reafactor + show password button for confirm password

2025-12-16 10:11:39 +07:00
parent 79df200ccb
commit ee1575cac7
4 changed files with 57 additions and 20 deletions
@@ -0,0 +1,99 @@
+'use client'
+
+import styles from '@/app/styles/login.module.scss'
+import { useActionState, useState } from 'react';
+import { authorization } from '@/app/actions/auth';
+import { useTranslations } from 'next-intl';
+import { IconEye } from '@/app/ui/icons/icons';
+
+export default function LoginForm() {
+	const [state, formAction, isPending] = useActionState(
+		authorization,
+		undefined,
+	);
+	const t = useTranslations('Login-register-form');
+
+	const [showPassword, setShowPassword] = useState(false);
+
+	function handleMouseDown() {
+		setShowPassword(true);
+	}
+
+	function handleMouseUp() {
+		setShowPassword(false);
+	}
+
+	function handleMouseOut() {
+		setShowPassword(false);
+	}
+
+	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 : ''}
+				/>
+				{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']}`}
+						placeholder={t('enter-password')}
+					/>
+					<button
+						onMouseDown={handleMouseDown}
+						onMouseUp={handleMouseUp}
+						onMouseOut={handleMouseOut}
+						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" />
+					<label>
+						{t('remember-me')}
+					</label>
+				</div>
+				<a href="forgot-password" className={`${styles['forgot-password']}`} >
+					{t('forgot-password')}?
+				</a>
+			</div>
+			<button type="submit" className={`${styles['btn']}`}>
+				{t('sign-in')}
+			</button>
+		</form>
+	)
+}