autocomplete

src/components/input/Input.tsx

@@ -3,6 +3,7 @@ import { cn } from "../../lib/cn";
 import { eyeClosed, eyeOpen } from "../../assets/icons/input";
 
 interface inputProps {
+  name?: string;
   type: "text" | "email" | "password" | "first_name";
   error?: string;
   disabled?: boolean;
@@ -12,6 +13,7 @@ interface inputProps {
   className?: string;
   onChange: (state: string) => void;
   defaultState?: string;
+  autocomplete?: string;
 }
 
 export const Input: React.FC<inputProps> = ({
@@ -24,6 +26,8 @@ export const Input: React.FC<inputProps> = ({
   className = "",
   onChange,
   defaultState = "",
+  name = "",
+  autocomplete="",
 }) => {
   const [value, setValue] = React.useState<string>(defaultState);
   const [visible, setVIsible] = React.useState<boolean>(type != "password");
@@ -47,6 +51,8 @@ export const Input: React.FC<inputProps> = ({
             "bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
             type == "password" ? "h-[40px]" : "h-[36px]"
           )}
+          name={name}
+          autoComplete={autocomplete}
           type={type == "password" ? (visible ? "text" : "password") : type}
           placeholder={placeholder}
           onChange={(e) => {

src/views/home/auth/Login.tsx

@@ -58,8 +58,8 @@ const Login = () => {
           </div>
 
 
-          <Input className="mt-[10px]" type="text" label="Логин" onChange={(v) => {setUsername(v)}} placeholder="login"/>
+          <Input name="login" autocomplete="login" className="mt-[10px]" type="text" label="Логин" onChange={(v) => {setUsername(v)}} placeholder="login"/>
-          <Input className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />
+          <Input name="password" autocomplete="password" className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />
 
           <div className="flex justify-end mt-[10px]">
             <Link

src/views/home/auth/Register.tsx

@@ -59,10 +59,10 @@ const Register = () => {
           </div>
 
 
-          <Input className="mt-[10px]" type="email" label="Почта" onChange={(v) => {setEmail(v)}} placeholder="example@gmail.com" />
+          <Input name="email" autocomplete="email" className="mt-[10px]" type="email" label="Почта" onChange={(v) => {setEmail(v)}} placeholder="example@gmail.com" />
-          <Input className="mt-[10px]" type="text" label="Логин пользователя" onChange={(v) => {setUsername(v)}} placeholder="login" />
+          <Input name="login" autocomplete="login" className="mt-[10px]" type="text" label="Логин пользователя" onChange={(v) => {setUsername(v)}} placeholder="login" />
-          <Input className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />
+          <Input name="password" autocomplete="password" className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />
-          <Input className="mt-[10px]" type="password" label="Повторите пароль" onChange={(v) => {setConfirmPassword(v)}} placeholder="abCD1234" />
+          <Input name="confirm-password" autocomplete="confirm-password" className="mt-[10px]" type="password" label="Повторите пароль" onChange={(v) => {setConfirmPassword(v)}} placeholder="abCD1234" />
 
           <div className=" flex items-center mt-[10px] h-[24px]">
             <Checkbox