From fe7c6fd7b982dce12d3af6ef689b9b48c2a6acfa Mon Sep 17 00:00:00 2001 From: Prajwal Choudhary Date: Mon, 22 May 2023 15:29:43 +0530 Subject: [PATCH] refactor: refactorted App component for better file structure --- package-lock.json | 37 ++++- package.json | 2 +- src/App.css | 30 +--- src/App.js | 158 ++++++++++++--------- src/components/IncludeLowerCase.js | 18 +++ src/components/IncludeLowerCase.module.css | 6 + src/components/IncludeNumbers.js | 18 +++ src/components/IncludeNumbers.module.css | 6 + src/components/IncludeSymbols.js | 18 +++ src/components/IncludeSymbols.module.css | 6 + src/components/IncludeUpperCase.js | 18 +++ src/components/IncludeUpperCase.module.css | 6 + src/components/Main.js | 17 +++ src/components/Main.module.css | 32 +++++ src/components/PasswordLength.js | 21 +++ src/components/PasswordLength.module.css | 6 + 16 files changed, 293 insertions(+), 106 deletions(-) create mode 100644 src/components/IncludeLowerCase.js create mode 100644 src/components/IncludeLowerCase.module.css create mode 100644 src/components/IncludeNumbers.js create mode 100644 src/components/IncludeNumbers.module.css create mode 100644 src/components/IncludeSymbols.js create mode 100644 src/components/IncludeSymbols.module.css create mode 100644 src/components/IncludeUpperCase.js create mode 100644 src/components/IncludeUpperCase.module.css create mode 100644 src/components/Main.js create mode 100644 src/components/Main.module.css create mode 100644 src/components/PasswordLength.js create mode 100644 src/components/PasswordLength.module.css diff --git a/package-lock.json b/package-lock.json index c04d376..862e919 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react_password_generator", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.15.0", @@ -12,7 +13,7 @@ "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "4.0.3", + "react-scripts": "^4.0.3", "react-toastify": "^8.1.0", "web-vitals": "^1.1.2" } @@ -4286,6 +4287,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -19181,9 +19193,11 @@ } }, "node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -24540,6 +24554,13 @@ "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "requires": { "type-fest": "^0.21.3" + }, + "dependencies": { + "type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + } } }, "ansi-html": { @@ -36099,9 +36120,11 @@ "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" }, "type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", diff --git a/package.json b/package.json index a5da2b0..a77a74e 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "@testing-library/user-event": "^12.8.3", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-scripts": "4.0.3", + "react-scripts": "^4.0.3", "react-toastify": "^8.1.0", "web-vitals": "^1.1.2" }, diff --git a/src/App.css b/src/App.css index 4c87ca1..1140a5f 100644 --- a/src/App.css +++ b/src/App.css @@ -5,33 +5,13 @@ justify-content: center; } -.generator{ - +.generator{ background-image: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%); border-radius: 10px; box-shadow: 0px 2px 10px rgba(245, 244, 244, 0.863); padding: 30px; } -.generator__header{ - text-align: center; - color: darkgreen; - margin-bottom: 20px; -} -.generator__password{ - background-color:#308D46; - padding: 13px 10px; - color: #fff; - margin-bottom: 15px; - height: 46px; - display: flex; - justify-content: space-between; -} -.copy__btn{ - color: #fff; - background: #308D46; - border: none; - cursor: pointer; -} + .generator__btn{ background: #308D46; border: none; @@ -43,10 +23,4 @@ font-size: 17px; cursor: pointer; -} -.form-group{ - display: flex; - justify-content: space-between; - color: gre; - margin-bottom: 15px; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8bd4e9c..833401a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,54 +1,70 @@ -import React, { useState } from 'react' -import "./App.css" -import { numbers, upperCaseLetters, lowerCaseLetters, specialCharacters } from './Character' -import { toast, ToastContainer } from 'react-toastify' -import 'react-toastify/dist/ReactToastify.css'; -import { COPY_Fail, COPY_SUCCESS } from './message'; +import React, { useState } from "react"; +import "./App.css"; +import { + numbers, + upperCaseLetters, + lowerCaseLetters, + specialCharacters, +} from "./Character"; +import { toast, ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { COPY_Fail, COPY_SUCCESS } from "./message"; +import Main from "./components/Main"; +import PasswordLength from "./components/PasswordLength"; +import IncludeUpperCase from "./components/IncludeUpperCase"; +import IncludeLowerCase from "./components/IncludeLowerCase"; +import IncludeNumbers from "./components/IncludeNumbers"; +import IncludeSymbols from "./components/IncludeSymbols"; const App = () => { - const [password, setPassword] = useState("") - const [passwordLength, setPasswordLength] = useState(26) - const [includeUpperCase, setIncludeUpperCase] = useState(false) - const [includeLowerCase, setIncludeLowerCase] = useState(false) - const [includeNumbers, setIncludeNumbers] = useState(false) - const [includeSymbols, setIncludeSymbols] = useState(false) + const [password, setPassword] = useState(""); + const [passwordLength, setPasswordLength] = useState(26); + const [includeUpperCase, setIncludeUpperCase] = useState(false); + const [includeLowerCase, setIncludeLowerCase] = useState(false); + const [includeNumbers, setIncludeNumbers] = useState(false); + const [includeSymbols, setIncludeSymbols] = useState(false); + const handleGeneratePassword = () => { - if (!includeUpperCase && !includeLowerCase && !includeNumbers && !includeSymbols) { - notify("To generate password you must select atleast one checkbox", true) - } - else { - let characterList = "" + if ( + !includeUpperCase && + !includeLowerCase && + !includeNumbers && + !includeSymbols + ) { + notify("To generate password you must select atleast one checkbox", true); + } else { + let characterList = ""; if (includeNumbers) { - characterList = characterList + numbers + characterList = characterList + numbers; } if (includeUpperCase) { - characterList = characterList + upperCaseLetters + characterList = characterList + upperCaseLetters; } if (includeLowerCase) { - characterList = characterList + lowerCaseLetters + characterList = characterList + lowerCaseLetters; } if (includeSymbols) { - characterList = characterList + specialCharacters + characterList = characterList + specialCharacters; } - setPassword(createPassword(characterList)) - notify("Password is generated successfully", false) + setPassword(createPassword(characterList)); + notify("Password is generated successfully", false); } + }; - - } const createPassword = (characterList) => { - let password = "" - const characterListLength = characterList.length + let password = ""; + const characterListLength = characterList.length; for (let i = 0; i < passwordLength; i++) { - const characterIndex = Math.round(Math.random() * characterListLength) - password = password + characterList.charAt(characterIndex) + const characterIndex = Math.round(Math.random() * characterListLength); + password = password + characterList.charAt(characterIndex); } - return password - } + return password; + }; + const copyToClipboard = (password) => { + navigator.clipboard.writeText(password); + }; - navigator.clipboard.writeText(password) - } const notify = (message, hasError = false) => { if (hasError) { toast.error(message, { @@ -60,8 +76,7 @@ const App = () => { draggable: true, progress: undefined, }); - } - else { + } else { toast(message, { position: "top-center", autoClose: 5000, @@ -72,52 +87,55 @@ const App = () => { progress: undefined, }); } + }; - } const handleCopyPassword = (e) => { if (password === "") { - notify(COPY_Fail, true) - } - else { - copyToClipboard(password) - notify(COPY_SUCCESS) + notify(COPY_Fail, true); + } else { + copyToClipboard(password); + notify(COPY_SUCCESS); } + }; - } + const changeLengthHandler = (value) => setPasswordLength(value); + const includeUpperCaseHandler = (value) => setIncludeUpperCase(value); + const includeLowerCaseHandler = (value) => setIncludeLowerCase(value); + const includeNumbersHandler = (value) => setIncludeNumbers(value); + const includeSymbolsHandler = (value) => setIncludeSymbols(value); return (
-

- Password Generator -

+
+ {/*

Password Generator

-

{password}

+

{password}

-
-
- - setPasswordLength(e.target.value)} type="number" id="password-stregth" name="password-strength" max="26" min="8" /> -
-
- - setIncludeUpperCase(e.target.checked)} type="checkbox" id="uppercase-letters" name="uppercase-letters" /> -
-
- - setIncludeLowerCase(e.target.checked)} type="checkbox" id="lowercase-letters" name="lowercase-letters" /> -
-
- - setIncludeNumbers(e.target.checked)} type="checkbox" id="include-numbers" name="include-numbers" /> -
-
- - setIncludeSymbols(e.target.checked)} type="checkbox" id="include-symbols" name="include-symbols" /> -
+
*/} + + + + + @@ -135,7 +153,7 @@ const App = () => {
- ) -} + ); +}; -export default App +export default App; diff --git a/src/components/IncludeLowerCase.js b/src/components/IncludeLowerCase.js new file mode 100644 index 0000000..60cee57 --- /dev/null +++ b/src/components/IncludeLowerCase.js @@ -0,0 +1,18 @@ +import classes from "./IncludeLowerCase.module.css"; + +const IncludeLowerCase = ({ includes, handleCheck }) => { + return ( +
+ + handleCheck(e.target.checked)} + type="checkbox" + id="lowercase-letters" + name="lowercase-letters" + /> +
+ ); +}; + +export default IncludeLowerCase; diff --git a/src/components/IncludeLowerCase.module.css b/src/components/IncludeLowerCase.module.css new file mode 100644 index 0000000..101ee55 --- /dev/null +++ b/src/components/IncludeLowerCase.module.css @@ -0,0 +1,6 @@ +.form-group{ + display: flex; + justify-content: space-between; + color: gre; + margin-bottom: 15px; +} \ No newline at end of file diff --git a/src/components/IncludeNumbers.js b/src/components/IncludeNumbers.js new file mode 100644 index 0000000..0ca4471 --- /dev/null +++ b/src/components/IncludeNumbers.js @@ -0,0 +1,18 @@ +import classes from "./IncludeNumbers.module.css"; + +const IncludeNumbers = ({ includes, handleCheck }) => { + return ( +
+ + handleCheck(e.target.checked)} + type="checkbox" + id="include-numbers" + name="include-numbers" + /> +
+ ); +}; + +export default IncludeNumbers; diff --git a/src/components/IncludeNumbers.module.css b/src/components/IncludeNumbers.module.css new file mode 100644 index 0000000..101ee55 --- /dev/null +++ b/src/components/IncludeNumbers.module.css @@ -0,0 +1,6 @@ +.form-group{ + display: flex; + justify-content: space-between; + color: gre; + margin-bottom: 15px; +} \ No newline at end of file diff --git a/src/components/IncludeSymbols.js b/src/components/IncludeSymbols.js new file mode 100644 index 0000000..a5bdebd --- /dev/null +++ b/src/components/IncludeSymbols.js @@ -0,0 +1,18 @@ +import classes from "./IncludeSymbols.module.css"; + +const IncludeSymbols = ({ includes, handleCheck }) => { + return ( +
+ + handleCheck(e.target.checked)} + type="checkbox" + id="include-symbols" + name="include-symbols" + /> +
+ ); +}; + +export default IncludeSymbols; diff --git a/src/components/IncludeSymbols.module.css b/src/components/IncludeSymbols.module.css new file mode 100644 index 0000000..101ee55 --- /dev/null +++ b/src/components/IncludeSymbols.module.css @@ -0,0 +1,6 @@ +.form-group{ + display: flex; + justify-content: space-between; + color: gre; + margin-bottom: 15px; +} \ No newline at end of file diff --git a/src/components/IncludeUpperCase.js b/src/components/IncludeUpperCase.js new file mode 100644 index 0000000..7cb01f8 --- /dev/null +++ b/src/components/IncludeUpperCase.js @@ -0,0 +1,18 @@ +import classes from "./IncludeUpperCase.module.css"; + +const IncludeUpperCase = ({ includes, handleCheck }) => { + return ( +
+ + handleCheck(e.target.checked)} + type="checkbox" + id="uppercase-letters" + name="uppercase-letters" + /> +
+ ); +}; + +export default IncludeUpperCase; diff --git a/src/components/IncludeUpperCase.module.css b/src/components/IncludeUpperCase.module.css new file mode 100644 index 0000000..101ee55 --- /dev/null +++ b/src/components/IncludeUpperCase.module.css @@ -0,0 +1,6 @@ +.form-group{ + display: flex; + justify-content: space-between; + color: gre; + margin-bottom: 15px; +} \ No newline at end of file diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 0000000..fdf890e --- /dev/null +++ b/src/components/Main.js @@ -0,0 +1,17 @@ +import classes from "./Main.module.css"; + +const Main = ({ passwordValue, handleCheck }) => { + return ( + <> +

Password Generator

+
+

{passwordValue}

+ +
+ + ); +}; + +export default Main; diff --git a/src/components/Main.module.css b/src/components/Main.module.css new file mode 100644 index 0000000..6dd1a5c --- /dev/null +++ b/src/components/Main.module.css @@ -0,0 +1,32 @@ +.generator__header{ + text-align: center; + color: darkgreen; + margin-bottom: 20px; + } + .generator__password{ + background-color:#308D46; + padding: 13px 10px; + color: #fff; + margin-bottom: 15px; + height: 46px; + display: flex; + justify-content: space-between; + } + .copy__btn{ + color: #fff; + background: #308D46; + border: none; + cursor: pointer; + } + .generator__btn{ + background: #308D46; + border: none; + width: 100%; + margin-top: 10px; + padding: 10px; + color: #fff; + border-radius: 30px; + font-size: 17px; + cursor: pointer; + + } \ No newline at end of file diff --git a/src/components/PasswordLength.js b/src/components/PasswordLength.js new file mode 100644 index 0000000..0747bf4 --- /dev/null +++ b/src/components/PasswordLength.js @@ -0,0 +1,21 @@ +import classes from "./PasswordLength.module.css"; + +const PasswordLength = ({ length, handleLength }) => { + return ( +
+ + handleLength(e.target.value)} + type="number" + id="password-strength" + name="password-strength" + max="26" + min="8" + /> +
+ ); +}; + +export default PasswordLength; diff --git a/src/components/PasswordLength.module.css b/src/components/PasswordLength.module.css new file mode 100644 index 0000000..7cb6393 --- /dev/null +++ b/src/components/PasswordLength.module.css @@ -0,0 +1,6 @@ +.form-group{ + display: flex; + justify-content: space-between; + color: gre; + margin-bottom: 15px; + } \ No newline at end of file