First Commit
This commit is contained in:
Josh S
GitHub
parent
1b0f36a39f
commit
c0bae65c80
10 changed files with 341 additions and 0 deletions
7
README.md
Normal file
7
README.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
# A simple password generator built in `React.js`
|
||||
|
||||
`npm install`
|
||||
|
||||
`npm start`
|
||||
|
||||
# For build production run `npm run build`
|
||||
33
package.json
Normal file
33
package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "password-gen",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-toastify": "^9.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
12
public/index.html
Normal file
12
public/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Password Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
188
src/App.jsx
Normal file
188
src/App.jsx
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import { React, useState} from 'react';
|
||||
import { toast, ToastContainer} from 'react-toastify';
|
||||
import './Assets/CSS/App.min.css';
|
||||
import { numbers, upperCaseLetters, lowerCaseLetters, specialCharacters } from './Components/Characters';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
import { COPY_SUCCESS } from './Components/Message';
|
||||
|
||||
function App() {
|
||||
const [password, setPassword] = useState('')
|
||||
const [passwordLength, setPasswordLength] = useState(20)
|
||||
const [includeUppercase, setIncludeUppercase] = useState(false)
|
||||
const [includeLowercase, setIncludeLowercase] = useState(false)
|
||||
const [includeNumbers, setIncludeNumbers] = useState(false)
|
||||
const [includeSymbols, setIncludeSymbols] = useState(false)
|
||||
|
||||
const handleGeneratePassword = (e) => {
|
||||
if (
|
||||
!includeUppercase &&
|
||||
!includeLowercase &&
|
||||
!includeNumbers &&
|
||||
!includeSymbols
|
||||
) {
|
||||
notify('Error! You must select atleast one option.', true)
|
||||
}
|
||||
let characterList = ''
|
||||
|
||||
if (includeLowercase) {
|
||||
characterList = characterList + lowerCaseLetters
|
||||
}
|
||||
|
||||
if (includeUppercase) {
|
||||
characterList = characterList + upperCaseLetters
|
||||
}
|
||||
|
||||
if (includeNumbers) {
|
||||
characterList = characterList + numbers
|
||||
}
|
||||
|
||||
if (includeSymbols) {
|
||||
characterList = characterList + specialCharacters
|
||||
}
|
||||
|
||||
setPassword(createPassword(characterList))
|
||||
}
|
||||
|
||||
const createPassword = (characterList) => {
|
||||
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)
|
||||
}
|
||||
|
||||
return password
|
||||
}
|
||||
|
||||
const copyToClipboard = () => {
|
||||
const newTextArea = document.createElement('textarea')
|
||||
newTextArea.innerText = password
|
||||
document.body.appendChild(newTextArea)
|
||||
newTextArea.select()
|
||||
document.execCommand('copy')
|
||||
newTextArea.remove()
|
||||
}
|
||||
|
||||
const notify = (message, hasError = false) => {
|
||||
if (hasError) {
|
||||
toast.error(message, {
|
||||
position: 'top-center',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
})
|
||||
} else {
|
||||
toast(message, {
|
||||
position: 'top-center',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyPassword = (e) => {
|
||||
if(password === '') {
|
||||
notify('Error! Nothing to copy', true)
|
||||
} else {
|
||||
copyToClipboard()
|
||||
notify(COPY_SUCCESS)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="container">
|
||||
<div className="generator">
|
||||
<h2 className="generator__header">Simple Password Generator</h2>
|
||||
<div className="generator__password">
|
||||
<h3>{password}</h3>
|
||||
<button onClick={handleCopyPassword} className='copy__btn'>
|
||||
<i className="far fa-clipboard"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className='passgen-text' htmlFor='password-strength'>Password Length</label>
|
||||
<input
|
||||
defaultValue={passwordLength}
|
||||
onChange={(e) => setPasswordLength(e.target.value)}
|
||||
type='number'
|
||||
id='password-strength'
|
||||
name='password-strength'
|
||||
max='22'
|
||||
min='10'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className='passgen-text' htmlFor='uppercase-letters'>Include Upppercase Characters</label>
|
||||
<input
|
||||
checked={includeUppercase}
|
||||
onChange={(e) => setIncludeUppercase(e.target.checked)}
|
||||
type='checkbox'
|
||||
id='uppercase-letters'
|
||||
name='uppercase-letters'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className='passgen-text' htmlFor='lowercase-letters'>Include Lowercase Characters</label>
|
||||
<input
|
||||
checked={includeLowercase}
|
||||
onChange={(e) => setIncludeLowercase(e.target.checked)}
|
||||
type='checkbox'
|
||||
id='lowercase-letters'
|
||||
name='lowercase-letters'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className='passgen-text' 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 className='passgen-text' htmlFor='include-symbols'>Include Symbols</label>
|
||||
<input
|
||||
checked={includeSymbols}
|
||||
onChange={(e) => setIncludeSymbols(e.target.checked)}
|
||||
type='checkbox'
|
||||
id='include-symbols'
|
||||
name='include-symbols'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button onClick={handleGeneratePassword} className="generator__btn">
|
||||
Generate
|
||||
</button>
|
||||
<ToastContainer
|
||||
position='top-center'
|
||||
autoClose={5000}
|
||||
hideProgressBar={false}
|
||||
newestOnTop={false}
|
||||
closeOnClick={true}
|
||||
rtl={false}
|
||||
pauseOnFocusLoss={false}
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
77
src/Assets/CSS/App.min.css
vendored
Normal file
77
src/Assets/CSS/App.min.css
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
@import url(https://fonts.bunny.net/css?family=abril-fatface:400|rubik:600,800i,900i);
|
||||
|
||||
.App {
|
||||
min-height: 100vh;
|
||||
background-color: #101725;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 350px;
|
||||
margin: 0 auto;
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
.generator {
|
||||
background-color: #0b0f19;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.generator__header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Abril Fatface', display;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
.generator__password {
|
||||
position: relative;
|
||||
background-color: #101725;
|
||||
padding: 13px 10px;
|
||||
color: white;
|
||||
height: 46px;
|
||||
margin-bottom: 15px;
|
||||
font-family: 'Abril Fatface', display;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
.copy__btn {
|
||||
position: absolute;
|
||||
background-color: #3b3b98;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 40px;
|
||||
padding: 10;
|
||||
cursor: pointer;
|
||||
top: 3px;
|
||||
right: 3x;
|
||||
}
|
||||
|
||||
.generator__btn {
|
||||
background-color: #101725;
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
font-family: 'Abril Fatface', display;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
font-family: 'Abril Fatface', display;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
|
||||
.passgen-text {
|
||||
font-family: 'Abril Fatface', display;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
}
|
||||
5
src/Assets/CSS/Index.min.css
vendored
Normal file
5
src/Assets/CSS/Index.min.css
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
4
src/Components/Characters.js
Normal file
4
src/Components/Characters.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const numbers = '0123456789'
|
||||
export const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
|
||||
export const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz'
|
||||
export const specialCharacters = "!'^+%&/()=?_#$½§{[]}|;:>÷`<.*-@é"
|
||||
1
src/Components/Message.js
Normal file
1
src/Components/Message.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const COPY_SUCCESS = 'Password successfully copied to clipboard'
|
||||
11
src/index.js
Normal file
11
src/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './Assets/CSS/Index.min.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('app')
|
||||
)
|
||||
Loading…
Add table
Reference in a new issue