reafactor + show password button for confirm password

src/app/[locale]/login/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import styles from '@/app/styles/login.module.scss'
 import LogoIcon from '@/app/ui/logo-icon';
 import Link from 'next/link';
-import LoginForm from '@/app/ui/login-form';
+import LoginForm from '@/app/ui/forms/login-form';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 import { useTranslations } from 'next-intl';
 import VKLogin from '@/app/components/VKLogin';

src/app/[locale]/register/page.tsx

@@ -1,7 +1,7 @@
 import LogoIcon from '@/app/ui/logo-icon';
 import styles from '@/app/styles/login.module.scss'
 import Link from 'next/link';
-import RegisterForm from '@/app/ui/register-form';
+import RegisterForm from '@/app/ui/forms/register-form';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 import {useTranslations} from 'next-intl';
 

src/app/ui/forms/register-form.tsx

@@ -16,17 +16,31 @@ export default function RegisterForm() {
 	const t = useTranslations('Login-register-form');
 
 	const [showPassword, setShowPassword] = useState(false);
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-	function handleMouseDown() {
+	function handleMouseDown(target: 'password' | 'confirm-password') {
+		if (target === 'password') {
 			setShowPassword(true);
+		} else {
+			setShowConfirmPassword(true);
+		}
 	}
 
-	function handleMouseUp() {
+	function handleMouseUp(target: 'password' | 'confirm-password') {
+		if (target === 'password') {
 			setShowPassword(false);
+		} else {
+			setShowConfirmPassword(false);
 		}
 
-	function handleMouseOut() {
+	}
+
+	function handleMouseOut(target: 'password' | 'confirm-password') {
+		if (target === 'password') {
 			setShowPassword(false);
+		} else {
+			setShowConfirmPassword(false);
+		}
 	}
 
 	return (
@@ -115,11 +129,17 @@ export default function RegisterForm() {
 							defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
 						/>
 						<button
-							onMouseDown={handleMouseDown}
-							onMouseUp={handleMouseUp}
-							onMouseOut={handleMouseOut}
+							onMouseDown={() => {
+								handleMouseDown('password');
+							}}
+							onMouseUp={() => {
+								handleMouseUp('password');
+							}}
+							onMouseOut={() => {
+								handleMouseOut('password')
+							}}
 							type="button"
-							className={`show-password-button ${showPassword? 'show': ''}`}
+							className={`show-password-button ${showPassword ? 'show' : ''}`}
 						>
 							<IconEye />
 						</button>
@@ -138,14 +158,31 @@ export default function RegisterForm() {
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('confirm-password')}
 					</label>
+					<div className={`${styles['password-wrapper']}`}>
 						<input
-						type="password"
+							type={showConfirmPassword ? "text" : "password"}
 							id="confirm_password"
 							name="confirm_password"
 							className={`${styles['form-input']}`}
 							placeholder={t('repeat-password')}
 							defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
 						/>
+						<button
+							onMouseDown={() => {
+								handleMouseDown('confirm-password');
+							}}
+							onMouseUp={() => {
+								handleMouseUp('confirm-password');
+							}}
+							onMouseOut={() => {
+								handleMouseOut('confirm-password')
+							}}
+							type="button"
+							className={`show-password-button ${showPassword ? 'show' : ''}`}
+						>
+							<IconEye />
+						</button>
+					</div>
 					{state?.error?.confirm_password && (
 						<p className="text-sm text-red-500">
 							{t(state?.error?.confirm_password)}