password bakery

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-toastify": "^7.0.3",
     "web-vitals": "^1.1.1"
   },
   "scripts": {

public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -1,38 +1,66 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+    min-height: 100vh;
+    background:  #00ff00;
+  }
+
+  .container {
+    width: 350px;
+    margin: 0 auto;
+    padding-top: 200px;
+  }
+
+  .generator {
+    background: #009900;
+    border-radius: 3px;
+    box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border: 1 solid;
+    border-radius: 10%;
+  }
+
+  .generator__header {
+    text-align: center;
+    color:black;
+    margin-bottom: 20px;
+  }
+
+  .generator__password {
+    position: relative;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 13px 10px;
+    color: #fff;
+    height: 46px;
+    margin-bottom: 15px;
+  }
+
+  .copy__btn {
+    position: absolute;
+    background: #003300;
+    color: #fff;
+    border: none;
+    height: 40px;
+    padding: 10px;
+    cursor: pointer;
+    top: 3px;
+    right: 3px;
+  }
+
+  .generator__btn {
+    background: #00ff00;
+    border: none;
+    display: block;
+    width: 100%;
+    padding: 10px;
+    color: black;
+    font-size: 17px;
+    cursor: pointer;
+    border: 1 solid;
+    border-radius:10px;
+  }
+
+  .form-group {
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    margin-bottom: 15px;
+  }

src/App.js

@@ -1,25 +1,146 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react'
+import './App.css'
+import { Numbers, upperCaseLetters, lowerCaseLetters, specialCharacters } from './characters'  
+import {toast , ToastContainer} from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css';
 
-function App() {
-  return (
+
+
+function App(){
+    const [password, setPassword] = useState('')
+    const [passwordLength, setPasswordLength] = useState(20)
+    const [uppercase, setUppercase] = useState(false)
+    const [lowercase, setLowercase] = useState(false)
+    const [numbers, setNumbers] = useState(false)
+    const [symbols, setSymbols] = useState(false)
+    const MakePassword = (e) => {
+      let  characters = '';
+      const countConditions = [uppercase , lowercase , numbers , symbols].filter(item => item !== false);
+        if(countConditions.length === 0){
+            return notify('select at least one conditions' , true);
+        }
+        if(passwordLength < 4){
+            return notify('password length can\'t be less than 4' , true);
+        }
+        if(passwordLength > 20){
+            return notify('password length can\'t be more than 20' , true);
+        }
+        if(uppercase){
+            characters += upperCaseLetters;
+        }
+        if(lowercase){
+            characters += lowerCaseLetters;
+        }
+        if(numbers){
+            characters += Numbers;
+        }
+        if(symbols){
+            characters += specialCharacters;
+        }
+
+        setPassword(MakeMyPassword(characters));
+    }
+    const copyFunction = (e) =>{
+        const textarea = document.createElement('textarea');
+        textarea.innerText = password
+        if(!textarea.innerText){
+            notify("nothing to copy" , true)
+        }else{
+            notify('password copied successfully')
+        }
+        document.body.appendChild(textarea)
+        textarea.select()
+        document.execCommand('copy')
+        textarea.remove()
+    }
+
+    const notify = (message , error=false) =>{
+        if(error){
+            toast.error(message, {
+                position: "top-center",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                });  
+        }else{
+            toast.success(message, {
+                position: "top-center",
+                autoClose: 5000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                });    
+        }            
+    }
+
+        const MakeMyPassword = (characters) => {
+            let password = '' ;
+            for (let i = 0; i < passwordLength ; i++) {
+                const charactersIndex = Math.round(Math.random() * characters.length)
+                password += characters.charAt(charactersIndex)
+            }
+            return password;
+        }   
+
+    return(
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <div className="container">
+            <div className="generator">
+                <h2 className="generator__header">
+                    Password Bakery
+                </h2>
+                 <div className="generator__password">
+                     <h3>{password}</h3>
+                     <button onClick={copyFunction} className="copy__btn">
+                     <i className="far fa-copy"></i>
+                     </button>
+                 </div>
+
+                 <div className="form-group">
+                 <label htmlFor='password-strength'>Length</label>
+                    <input value={passwordLength} onChange={(e)=>setPasswordLength(e.target.value)} type="number" id="password-strength" name="password-strength" max="20" min="4"/>
+                 </div>
+                 <div className="form-group">
+                    <label htmlFor="uppercase-letters">Uppercase</label>
+                    <input value={uppercase}  onChange={(e)=>setUppercase(e.target.checked)} type="checkbox" id="uppercase-letters" name="uppercase-letters" />
+                 </div>
+                 <div className="form-group">
+                     <label htmlFor="lowercase-letters">Lowercase</label>
+                     <input value={lowercase} onChange={(e)=>setLowercase(e.target.checked)} type="checkbox" id="lowercase-letters" name="lowercase-letters" />
+                 </div>
+                 <div className="form-group">
+                     <label htmlFor="include-numbers">Numbers</label>
+                     <input value={numbers} onChange={(e)=>setNumbers(e.target.checked)} type="checkbox" id="include-numbers" name="include-numbers" />
+                 </div>
+                 <div className="form-group">
+                     <label htmlFor="include-symbols">Symbols</label>
+                     <input value={symbols} onChange={(e)=>setSymbols(e.target.checked)} type="checkbox" id="include-symbols" name="include-symbols" />
+                 </div>
+                 <button onClick={MakePassword} className="generator__btn">
+                     Bake A Password
+                 </button>
+                 <ToastContainer
+                position="top-center"
+                autoClose={5000}
+                hideProgressBar={false}
+                newestOnTop={false}
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                />
+            </div>
+        </div>
     </div>
-  );
+    );
 }
 
-export default App;
+
+
+export default App

src/characters.js

@@ -0,0 +1,6 @@
+export const Numbers = '0123456789'
+export const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+export const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz'
+export const specialCharacters = '!@#$%^&*(){}[]=<>/,.'
+
+

src/index.css

@@ -1,13 +1,21 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+* {
+    margin: 0;
+    padding: 0;
+    font-family: monospace, cursive, Arial, Helvetica, sans-serif;
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+

src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();