diff --git a/06-React/07-forms/homework/alex/app1/package-lock.json b/06-React/07-forms/homework/alex/app1/package-lock.json index 1dd8b4316..1d498b84d 100644 --- a/06-React/07-forms/homework/alex/app1/package-lock.json +++ b/06-React/07-forms/homework/alex/app1/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "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", @@ -2783,6 +2784,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/06-React/07-forms/homework/alex/app1/package.json b/06-React/07-forms/homework/alex/app1/package.json index 5754ad7a6..9ad6fdb1a 100644 --- a/06-React/07-forms/homework/alex/app1/package.json +++ b/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", diff --git a/06-React/07-forms/homework/alex/app1/src/components/Users/Users.scss b/06-React/07-forms/homework/alex/app1/src/components/Users/Users.scss new file mode 100644 index 000000000..0c23a9de8 --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/06-React/07-forms/homework/alex/app1/src/components/Users/Users.tsx b/06-React/07-forms/homework/alex/app1/src/components/Users/Users.tsx index 3caee4832..35cedcf63 100644 --- a/06-React/07-forms/homework/alex/app1/src/components/Users/Users.tsx +++ b/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) => { ev.preventDefault(); setUser(user) } + + const togglePasswordVisibility = () => { + setVisible(!visible); + }; return (
+ boxShadow:"5px 10px 18px #6b86b5", + position: "relative"}}>

{ placeholder="UserName" onInput={(ev) => {setUser((ev.target as HTMLInputElement).value)}} /> - */} + 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' /> + + {visible ? : } + + {/*

*/} - + {/* */} diff --git a/06-React/07-forms/homework/alex/app1/src/types/types.ts b/06-React/07-forms/homework/alex/app1/src/types/types.ts index e69de29bb..3721367ac 100644 --- a/06-React/07-forms/homework/alex/app1/src/types/types.ts +++ b/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; + } \ No newline at end of file diff --git a/06-React/07-forms/homework/alex/app1/src/util/userList.ts b/06-React/07-forms/homework/alex/app1/src/util/userList.ts new file mode 100644 index 000000000..4bca01be4 --- /dev/null +++ b/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: "", +}, +] + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..08cf26e51 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,50 @@ +{ + "name": "fullstack-feb23", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "react-icons": "^4.12.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "peerDependencies": { + "react": "*" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..222d13f01 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-icons": "^4.12.0" + } +}