add show password button

src/app/ui/register-form.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss';
-import { useActionState } from 'react';
+import { useActionState, useState } from 'react';
 import { registration } from '@/app/actions/auth';
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
+import { IconEye } from '@/app/ui/icons/icons';
 
 export default function RegisterForm() {
 	const [state, formAction, isPending] = useActionState(
@@ -14,6 +15,20 @@ export default function RegisterForm() {
 	);
 	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={(e) => {
 			formAction(e);
@@ -89,13 +104,26 @@ export default function RegisterForm() {
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('password')}
 					</label>
-					<input
-						type="password"
-						id="password" name="password"
-						className={`${styles['form-input']}`}
-						placeholder={t('password-placeholder')}
-						defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
-					/>
+					<div
+						className={`${styles['password-wrapper']}`}
+					>
+						<input
+							type={showPassword ? "text" : "password"}
+							id="password" name="password"
+							className={`${styles['form-input']}`}
+							placeholder={t('password-placeholder')}
+							defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
+						/>
+						<button
+							onMouseDown={handleMouseDown}
+							onMouseUp={handleMouseUp}
+							onMouseOut={handleMouseOut}
+							type="button"
+							className={`show-password-button ${showPassword? 'show': ''}`}
+						>
+							<IconEye />
+						</button>
+					</div>
 					{state?.error?.password && (
 						<p className="text-sm text-red-500">
 							{