add show-password-button for login form

src/app/styles/global-styles.scss

@@ -98,7 +98,7 @@
 	cursor: pointer;
 	position: absolute;
 	top: 0px;
-	right: 7px;
+	right: 6px;
 
 	svg {
 		width: 16px;

src/app/ui/login-form.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss'
-import { useActionState } from 'react';
+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(
@@ -12,6 +13,20 @@ export default function LoginForm() {
 	);
 	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']}`}>
@@ -36,13 +51,24 @@ export default function LoginForm() {
 				<label className={`${styles['form-label']}`}>
 					{t('password')}
 				</label>
+				<div className={`${styles['password-wrapper']}`}>
 					<input
-					type="password"
+						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)}