add password toggle button

5 files changed, 33 insertions, 7 deletions

diff --git a/public/icons/hide-icon.svg b/public/icons/hide-icon.svg
new file mode 100644
index 0000000..e63d8c3
--- /dev/null
+++ b/public/icons/hide-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.543135 5.05406C0.507703 4.9525 0.493878 4.84514 0.50248 4.73836C0.511083 4.63158 0.541937 4.52754 0.593214 4.43241C0.644491 4.33728 0.715146 4.25301 0.800991 4.18458C0.886836 4.11615 0.986123 4.06496 1.09296 4.03405C1.19981 4.00314 1.31203 3.99313 1.42297 4.00462C1.53392 4.01611 1.64133 4.04886 1.73885 4.10093C1.83636 4.15301 1.92198 4.22335 1.99064 4.30778C2.05931 4.39221 2.10961 4.48901 2.13856 4.59244C3.87736 10.1815 12.1262 10.1823 13.8667 4.59564C13.8979 4.49489 13.9495 4.40102 14.0184 4.31939C14.0874 4.23776 14.1725 4.16998 14.2688 4.11991C14.3651 4.06984 14.4707 4.03846 14.5796 4.02757C14.6886 4.01667 14.7987 4.02648 14.9036 4.05642C15.0086 4.08636 15.1064 4.13586 15.1915 4.20208C15.2765 4.2683 15.3471 4.34995 15.3993 4.44236C15.4515 4.53478 15.4842 4.63615 15.4955 4.7407C15.5069 4.84524 15.4966 4.95091 15.4654 5.05166C15.1624 6.05273 14.648 6.98325 13.9542 7.78537L15.017 8.80621C15.1688 8.9571 15.2528 9.15919 15.2509 9.36896C15.2491 9.57872 15.1614 9.77938 15.0068 9.92771C14.8523 10.076 14.6432 10.1602 14.4247 10.162C14.2061 10.1638 13.9956 10.0832 13.8383 9.93746L12.7456 8.88861C12.1559 9.3156 11.5044 9.65762 10.8117 9.90386L11.1093 10.9719C11.141 11.0743 11.1511 11.1819 11.1388 11.2881C11.1265 11.3943 11.0922 11.4971 11.0379 11.5904C10.9835 11.6837 10.9103 11.7656 10.8224 11.8312C10.7345 11.8969 10.6338 11.945 10.5263 11.9727C10.4187 12.0004 10.3065 12.0071 10.1962 11.9925C10.0859 11.9778 9.97973 11.9421 9.88404 11.8875C9.78834 11.8328 9.70503 11.7603 9.63902 11.6742C9.573 11.5882 9.52563 11.4903 9.49969 11.3863L9.19627 10.3007C8.4069 10.4127 7.60002 10.4127 6.81064 10.3007L6.50723 11.3863C6.48129 11.4903 6.43391 11.5882 6.3679 11.6742C6.30189 11.7603 6.21857 11.8328 6.12288 11.8875C6.02718 11.9421 5.92105 11.9778 5.81074 11.9925C5.70043 12.0071 5.58818 12.0004 5.48063 11.9727C5.37307 11.945 5.27239 11.8969 5.18452 11.8312C5.09665 11.7656 5.02339 11.6837 4.96904 11.5904C4.9147 11.4971 4.88038 11.3943 4.86811 11.2881C4.85585 11.1819 4.86588 11.0743 4.89763 10.9719L5.19521 9.90386C4.50248 9.65737 3.85098 9.31508 3.26136 8.88782L2.1694 9.93746C2.0131 10.0877 1.80103 10.1722 1.57983 10.1723C1.35864 10.1725 1.14644 10.0883 0.989921 9.93826C0.833402 9.78825 0.745382 9.5847 0.745226 9.3724C0.74507 9.1601 0.832789 8.95644 0.989088 8.80621L2.05187 7.78617C1.39836 7.03734 0.876558 6.1269 0.541469 5.05486L0.543135 5.05406Z" fill="#464199"/>
+</svg>
diff --git a/public/icons/show-icon.svg b/public/icons/show-icon.svg
new file mode 100644
index 0000000..b977ba9
--- /dev/null
+++ b/public/icons/show-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 5.3C7.42135 5.3 6.86639 5.53178 6.45722 5.94436C6.04805 6.35695 5.81818 6.91652 5.81818 7.5C5.81818 8.08348 6.04805 8.64306 6.45722 9.05564C6.86639 9.46822 7.42135 9.7 8 9.7C8.57865 9.7 9.13361 9.46822 9.54278 9.05564C9.95195 8.64306 10.1818 8.08348 10.1818 7.5C10.1818 6.91652 9.95195 6.35695 9.54278 5.94436C9.13361 5.53178 8.57865 5.3 8 5.3ZM8 11.1667C7.03558 11.1667 6.11065 10.7804 5.4287 10.0927C4.74675 9.40509 4.36364 8.47246 4.36364 7.5C4.36364 6.52754 4.74675 5.59491 5.4287 4.90728C6.11065 4.21964 7.03558 3.83333 8 3.83333C8.96442 3.83333 9.88935 4.21964 10.5713 4.90728C11.2532 5.59491 11.6364 6.52754 11.6364 7.5C11.6364 8.47246 11.2532 9.40509 10.5713 10.0927C9.88935 10.7804 8.96442 11.1667 8 11.1667ZM8 2C4.36364 2 1.25818 4.28067 0 7.5C1.25818 10.7193 4.36364 13 8 13C11.6364 13 14.7418 10.7193 16 7.5C14.7418 4.28067 11.6364 2 8 2Z" fill="#464199"/>
+</svg>
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>
+    );
 }