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