add password toggle button

3 files changed, 27 insertions, 7 deletions

diff --git a/src/components/header/authdialog/LoginForm.tsx b/src/components/header/authdialog/LoginForm.tsx
index c5b606c..0a72f67 100644
--- a/src/components/header/authdialog/LoginForm.tsx
+++ b/src/components/header/authdialog/LoginForm.tsx
@@ -14,7 +14,7 @@ export default function LoginForm() {
                 </Button>
                 <div className="gap-[10px] flex-col flex h-[88px]">
                     <InputField placeholder="Никнейм или почта" />
-                    <InputField placeholder="Пароль" />
+                    <InputField isPassword placeholder="Пароль" />
                 </div>
             </div>
             <Button className="w-full gap-[10px]">Войти</Button>
diff --git a/src/components/header/authdialog/RegisterForm.tsx b/src/components/header/authdialog/RegisterForm.tsx
index 20a7c14..3c2c164 100644
--- a/src/components/header/authdialog/RegisterForm.tsx
+++ b/src/components/header/authdialog/RegisterForm.tsx
@@ -80,6 +80,7 @@ export default function RegisterForm() {
 
                 <div className="flex flex-col ">
                     <InputField
+                        isPassword
                         placeholder="Пароль"
                         type="password"
                         name="password"
@@ -93,6 +94,7 @@ export default function RegisterForm() {
 
                 <div className="flex flex-col ">
                     <InputField
+                        isPassword
                         placeholder="Повторите пароль"
                         type="password"
                         name="passwordConfirm"
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 0424772..7dd5b62 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,9 +1,27 @@
+'use client';
+
 import { cn } from '@/lib/utils';
-import React from 'react';
+import { useState } from 'react';
+import ShowIcon from '@icons/show-icon.svg';
+import HideIcon from '@icons/hide-icon.svg';
 
-export function Input({
-    className,
-    ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) {
-    return <input className={cn('outline-none', className)} {...props} />;
+export function Input({ className, isPassword, ...props }: any) {
+    const [show, setShow] = useState(false);
+    return (
+        <div className="relative w-full">
+            <input
+                {...props}
+                type={isPassword ? (show ? 'text' : 'password') : props.type}
+                className={cn('w-full outline-none', className)}
+            />
+            {isPassword && (
+                <span
+                    onClick={() => setShow(!show)}
+                    className="absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer"
+                >
+                    {show ? <ShowIcon /> : <HideIcon />}
+                </span>
+            )}
+        </div>
+    );
 }