refactor: refactorted App component

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"
   },

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;
 }

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 (
     <div className="App">
       <div className="container">
         <div className="generator">
-          <h2 className="generator__header">
-           Password Generator
-          </h2>
+          <Main passwordValue={password} handleClick={handleCopyPassword} />
+          {/* <h2 className="generator__header">Password Generator</h2>
           <div className="generator__password">
-            <h3 >{password}</h3>
+            <h3>{password}</h3>
             <button className="copy__btn">
               <i onClick={handleCopyPassword} className="far fa-clipboard"></i>
             </button>
-          </div>
-          <div className="form-group">
-            <label htmlFor="password-strength">Password length</label>
-            <input className="pw" defaultValue={passwordLength} onChange={(e) => setPasswordLength(e.target.value)} type="number" id="password-stregth" name="password-strength" max="26" min="8" />
-          </div>
-          <div className="form-group">
-            <label htmlFor="uppercase-letters">Add Uppercase Letters</label>
-            <input checked={includeUpperCase} onChange={(e) => setIncludeUpperCase(e.target.checked)} type="checkbox" id="uppercase-letters" name="uppercase-letters" />
-          </div>
-          <div className="form-group">
-            <label htmlFor="lowercase-letters">Add Lowercase Letters</label>
-            <input checked={includeLowerCase} onChange={(e) => setIncludeLowerCase(e.target.checked)} type="checkbox" id="lowercase-letters" name="lowercase-letters" />
-          </div>
-          <div className="form-group">
-            <label htmlFor="include-numbers">Include Numbers</label>
-            <input checked={includeNumbers} onChange={(e) => setIncludeNumbers(e.target.checked)} type="checkbox" id="include-numbers" name="include-numbers" />
-          </div>
-          <div className="form-group">
-            <label htmlFor="include-symbols">Include Symbols</label>
-            <input checked={includeSymbols} onChange={(e) => setIncludeSymbols(e.target.checked)} type="checkbox" id="include-symbols" name="include-symbols" />
-          </div>
+          </div> */}
+          <PasswordLength
+            length={passwordLength}
+            handleLength={changeLengthHandler}
+          />
+          <IncludeUpperCase
+            includes={includeUpperCase}
+            handleCheck={includeUpperCaseHandler}
+          />
+          <IncludeLowerCase
+            includes={includeLowerCase}
+            handleCheck={includeLowerCaseHandler}
+          />
+          <IncludeNumbers
+            includes={includeNumbers}
+            handleCheck={includeNumbersHandler}
+          />
+          <IncludeSymbols
+            includes={includeSymbols}
+            handleCheck={includeSymbolsHandler}
+          />
           <button onClick={handleGeneratePassword} className="generator__btn">
             Generate Password
           </button>
@@ -135,7 +153,7 @@ const App = () => {
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/components/IncludeLowerCase.js

@@ -0,0 +1,18 @@
+import classes from "./IncludeLowerCase.module.css";
+
+const IncludeLowerCase = ({ includes, handleCheck }) => {
+  return (
+    <div className={classes["form-group"]}>
+      <label htmlFor="lowercase-letters">Add Lowercase Letters</label>
+      <input
+        checked={includes}
+        onChange={(e) => handleCheck(e.target.checked)}
+        type="checkbox"
+        id="lowercase-letters"
+        name="lowercase-letters"
+      />
+    </div>
+  );
+};
+
+export default IncludeLowerCase;

src/components/IncludeLowerCase.module.css

@@ -0,0 +1,6 @@
+.form-group{
+    display: flex;
+    justify-content: space-between;
+    color: gre;
+    margin-bottom: 15px;
+}

src/components/IncludeNumbers.js

@@ -0,0 +1,18 @@
+import classes from "./IncludeNumbers.module.css";
+
+const IncludeNumbers = ({ includes, handleCheck }) => {
+  return (
+    <div className={classes["form-group"]}>
+      <label htmlFor="include-numbers">Include Numbers</label>
+      <input
+        checked={includes}
+        onChange={(e) => handleCheck(e.target.checked)}
+        type="checkbox"
+        id="include-numbers"
+        name="include-numbers"
+      />
+    </div>
+  );
+};
+
+export default IncludeNumbers;