Alexi 53 hw update

06-React/07-forms/homework/alex/app1/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

06-React/07-forms/homework/alex/app1/src/components/Users/Users.scss

@@ -0,0 +1,11 @@
+.password-input-container {
+    position: relative;
+  }
+
+  .password-toggle-button {
+    position: absolute;
+    top: 50%;
+    right: 30px;
+    transform: translateY(-250%);
+    cursor: pointer;
+  }

06-React/07-forms/homework/alex/app1/src/components/Users/Users.tsx

@@ -1,26 +1,29 @@
 import React,{ useState } from 'react';
-
-// interface User {
-//     id: number;
-//     userName: string;
-//     passWord: string;
-// }
+import { FaEye, FaEyeSlash } from 'react-icons/fa';
+import './Users.scss'
 
 const Login = () => {
     const [user, setUser] = useState("")
-    const [visible, setVisible] = useState(true)
+    const [visible, setVisible] = useState(false)
     const [password, setPassword] = useState("")
+
+
 
     const handleSubmit = (ev: React.FocusEvent<HTMLFormElement>) => {
         ev.preventDefault();
         setUser(user)
     } 
+
+    const togglePasswordVisibility = () => {
+      setVisible(!visible);
+    };
 
     return (
 
         <div style={{backgroundColor:"white",
                      padding:"10px",
-                     boxShadow:"5px 10px 18px #6b86b5"}}>
+                     boxShadow:"5px 10px 18px #6b86b5",
+                     position: "relative"}}>
             <p style={{textAlign:"left",
                        margin:"15px 10px",
                        fontSize:"10px",
@@ -44,16 +47,25 @@ const Login = () => {
                 placeholder="UserName"
                 onInput={(ev) => {setUser((ev.target as HTMLInputElement).value)}}
                 />
-                <input 
+                {/* <div className="password-input-container"> */}
+                  <input 
                 value={password}
+                type={visible ? "text" : "password"}
+                onChange={(e) => setPassword(e.target.value)}
                 style={{margin:"0px 10px 10px ",
                                border:"1.5px solid #80a3e0",
                                borderRadius:"1.5px",
                                height:"23px"
                        }}
-                type={visible ? "text" : "password"}
+
                 placeholder='Password'
                 />
+                        <span 
+                        className="password-toggle-button"
+                        onClick={togglePasswordVisibility}>
+                        {visible ? <FaEyeSlash /> : <FaEye />}
+                        </span>
+               {/* </div> */}
                 <button type='submit'
                 style={{backgroundColor:"#755dd4",
                 margin:"0px 10px 10px ",
@@ -83,28 +95,28 @@ const Login = () => {
                     <div style={{width:"10px",height:"10px",
                              border: "0.1px solid grey",
                              borderRadius:"50%",
-                             margin:"0px 10px 10px 10px" }}></div>       
+                             margin:"8px 10px 0px 20px" }}></div>       
                      <div style={{height: "14px",
                              width: "80px", 
                              borderBottom: "0.1px solid grey",
                              margin:"0px 10px 10px 20px" }}></div>
 
                 </div>
-                <a href='https://ide.geeksforgeeks.org/' > 
+                {/* <a href='https://ide.geeksforgeeks.org/' >  */}
                    <button 
                      style={{backgroundColor:"white",
                      margin:"10px 10px 10px ",
                      color:"#755dd4",
-                     width:"200px",
                      border:"1.5px solid #80a3e0",
                      height:"27px",
                      padding:"0px",
                      borderRadius:"3px",
                      fontSize:"10px"
-                     }}> 
+                     }}
+                     href='https://ide.geeksforgeeks.org/'> 
                        Signup
                    </button> 
-                </a> 
+                {/* </a>  */}
             </form>
 
 

06-React/07-forms/homework/alex/app1/src/types/types.ts

@@ -0,0 +1,6 @@
+export interface User {
+       id: number;
+       userName: string;
+       passWord: string;
+       token: string;
+     }

06-React/07-forms/homework/alex/app1/src/util/userList.ts

@@ -0,0 +1,32 @@
+import { User } from "../types/types";
+
+
+export const users: User [] = [
+{    id: 1,
+    userName: "aaa",
+    passWord: "bbbb",
+    token: "",
+},
+
+{    id: 2,
+    userName: "bbb",
+    passWord: "cccc",
+    token: "",
+},
+{    id: 3,
+    userName: "ccc",
+    passWord: "dddd",
+    token: "",
+},
+{    id: 4,
+    userName: "ddd",
+    passWord: "eeee",
+    token: "",
+},
+{    id: 5,
+    userName: "eee",
+    passWord: "ffff",
+    token: "",
+},
+]
+

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-icons": "^4.12.0"
+  }
+}