118 lines
3.0 KiB
TypeScript
118 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import styles from '@/app/styles/module/login.module.scss'
|
|
import { useActionState, useState, useRef, useEffect } from 'react';
|
|
import { authorization } from '@/app/actions/auth';
|
|
import { useTranslations } from 'next-intl';
|
|
import { IconEye } from '@/app/ui/icons/icons';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
export default function LoginForm() {
|
|
const [state, formAction, isPending] = useActionState(
|
|
authorization,
|
|
undefined,
|
|
);
|
|
const t = useTranslations('Login-register-form');
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
function showPassowrd() {
|
|
setShowPassword(!showPassword);
|
|
}
|
|
|
|
const checkBoxRememberMe = useRef<HTMLInputElement>(null);
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
queryClient.clear();
|
|
}, [])
|
|
|
|
return (
|
|
<form action={formAction}>
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']}`}>
|
|
{t('email-adress')}
|
|
</label>
|
|
<input
|
|
type="readOnly"
|
|
id="email"
|
|
name="email"
|
|
className={`${styles['form-input']}`}
|
|
placeholder={t('enter-email')}
|
|
defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
|
|
onChange={(e) => {
|
|
e.target.value = e.target.value.toLocaleLowerCase();
|
|
}}
|
|
/>
|
|
{state?.error?.email && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.email)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className={`${styles['form-group']}`}>
|
|
<label className={`${styles['form-label']}`}>
|
|
{t('password')}
|
|
</label>
|
|
<div className={`${styles['password-wrapper']}`}>
|
|
<input
|
|
type={showPassword ? "text" : "password"}
|
|
id="password"
|
|
name="password"
|
|
className={`${styles['form-input']} ${styles['password']}`}
|
|
placeholder={t('enter-password')}
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
showPassowrd();
|
|
}}
|
|
type="button"
|
|
className={`show-password-button ${showPassword ? 'show' : ''}`}
|
|
>
|
|
<IconEye />
|
|
</button>
|
|
</div>
|
|
{state?.error?.password && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error?.password)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{state?.error.server && (
|
|
<p className={`${styles['form-error']}`}>
|
|
{t(state?.error.server)}
|
|
</p>
|
|
)}
|
|
<div className={`${styles['form-options']}`}>
|
|
<div className={`${styles['form-checkbox']}`}>
|
|
<input type="checkbox" id="remember" name="remember" ref={checkBoxRememberMe} />
|
|
<label
|
|
onClick={() => {
|
|
if (checkBoxRememberMe.current) {
|
|
checkBoxRememberMe.current.click();
|
|
}
|
|
}}
|
|
className="select-none"
|
|
>
|
|
{t('remember-me')}
|
|
</label>
|
|
</div>
|
|
<a href="forgot-password" className={`${styles['forgot-password']}`} >
|
|
{t('forgot-password')}?
|
|
</a>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className={`${styles['btn']}`}
|
|
disabled={isPending}
|
|
>
|
|
{t("sign-in")}
|
|
{isPending && (
|
|
<div className="loading-animation">
|
|
<div className="global-spinner"></div>
|
|
</div>
|
|
)}
|
|
</button>
|
|
</form>
|
|
)
|
|
} |