Password visibility toggle added

alexeevrevan · Aug 19, 2023 · bf10705 · bf10705
1 parent 32d59d6
commit bf10705
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 1 deletion.
diff --git a/images/visibility-off.svg b/images/visibility-off.svg
diff --git a/images/visibility-on.svg b/images/visibility-on.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,8 @@ import Title from "./components/Title_component";
 import Window from "./components/Main_window";
 import edna_logo_gif from  "../images/edna_gif.gif";
 import Captcha from "../images/Captcha.png";
+import Visibility_On from "../images/visibility-on.svg";
+import Visibility_Off from "../images/visibility-off.svg";
 
 import Image_Wrapper from "./components/Image_wrapper";
 import Login_Frame from "./components/Login_Frame";
@@ -16,7 +18,19 @@ import Sign_In from "./components/Sign_In";
 import Footer from "./components/Footer";
 import Footer_Text from "./components/Footer_Text";
 
+import {useForm, SubmitHandler} from "react-hook-form";
+
+import React, {useState} from "react";
+import Visibility from "./components/Visibility";
+
 export const App = () => {
+
+    //Скрыть-показать пароль
+    const [open, setOpen] = useState(false);
+    const toggle = () =>{
+        setOpen(!open)
+    };
+
     return (
         <div>
             <Wrapper>
@@ -26,22 +40,35 @@ export const App = () => {
                     </Image_Wrapper>
                     <Login_Frame>
                         <Title>Вход в аккаунт</Title>
+
                         <Input_Field>
                             <Small_Grey_Text>Е-mail</Small_Grey_Text>
                             <Input_text placeholder = "company.com"></Input_text>
                             <div style={{height: '1px', alignSelf: 'stretch'}}></div>
                         </Input_Field>
+
                         <Input_Field>
                             <Small_Grey_Text>Пароль</Small_Grey_Text>
-                            <Input_text placeholder = "●●●●●●●●●●●●●●●●"></Input_text>
+                            <Input_text placeholder = "●●●●●●●●●●●●●●●●" type={(!open ? 'password' : 'text')}></Input_text>
                             <div style={{height: '12px', alignSelf: 'stretch'}}></div>
+
+                            {
+                                ///Меняем иконку (открытый закрытый глаз)
+                                !open ? <Visibility src={Visibility_On} onClick={toggle}/> : <Visibility src={Visibility_Off} onClick={toggle}/>
+                            }
+
                         </Input_Field>
+
                         <img src={Captcha} style={{position: 'relative',left: "-3px"}} alt={''}/>
+
+
                         <Input_Field>
                             <Small_Grey_Text>Цифры с картинки</Small_Grey_Text>
                             <Input_text placeholder = "00000"></Input_text>
                             <div style={{height: '12px', alignSelf: 'stretch'}}></div>
                         </Input_Field>
+
+
                         <Bottom_Frame>
                             <Forgot_Password href={'/'}>Забыли пароль?</Forgot_Password>
                             <Entry_Button href={'/'}>Войти</Entry_Button>

diff --git a/src/components/Visibility.tsx b/src/components/Visibility.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Visibility = styled.img`
+  position: relative;
+  bottom: 39px;
+  left: 310px;
+  width: 19px;
+  height: 19px;
+`
+
+export default Visibility