add show password button

src/app/components/tanstakTable.tsx

@@ -340,7 +340,7 @@ export default function TanstakFilesTable() {
 			{/* Фильтры */}
 			<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 p-4">
 				<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
-					<div className="flex flex-col w-[150px]">
+					<div className="flex flex-col w-40">
 						<div className="text-sm font-medium mb-1">{t('date-filter')}:</div>
 						<DropDownList
 							value={(() => {
@@ -377,7 +377,7 @@ export default function TanstakFilesTable() {
 						</DropDownList>
 					</div>
 
-					<div className="flex flex-col w-[160px]">
+					<div className="flex flex-col w-40">
 						<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
 						<DropDownList
 							value={(() => {

src/app/styles/dashboard.scss

@@ -181,9 +181,6 @@
 			}
 		}
 
-		&.last-column {
-		}
-
 		&.last-row {
 			border-bottom: 1px solid var(--boder-collor);
 		}

src/app/styles/global-styles.scss

@@ -92,4 +92,23 @@
 		margin: 0 auto;
 		padding: 0 24px;
 	}
+}
+
+.show-password-button {
+	cursor: pointer;
+	position: absolute;
+	top: 0px;
+	right: 7px;
+
+	svg {
+		width: 16px;
+		color: #686060;
+		transition: color 0.2s ease;
+	}
+
+	&.show {
+		svg {
+			color: black;
+		}
+	}
 }

src/app/styles/login.module.scss

@@ -188,4 +188,8 @@
 		font-size: 13px;
 		line-height: 1.4;
 	}
+}
+
+.password-wrapper {
+	position: relative;
 }

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">
 							{