├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── index.js
    ├── components
    │   ├── PasswordList.js
    │   ├── Password.js
    │   └── Settings.js
    ├── utility
    │   └── password-generator.js
    └── App.js
├── README.md
├── .gitignore
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizbatanero/password-generator-react/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import 'semantic-ui-css/semantic.min.css';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Password Generator
 2 | :lock: Password generator built with React and SemanticUI
 3 | 
 4 | ### [Live Demo](https://password-generator-react.netlify.com/)
 5 | 
 6 | ## Running Locally
 7 | 
 8 | ```sh
 9 | npm install
10 | npm start
11 | ```
12 | 
13 | Runs the app in development mode.<br>
14 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/PasswordList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Password from './Password';
 3 | import { Loader } from 'semantic-ui-react';
 4 | 
 5 | const PasswordList = ({ passwords, isLoading }) => {
 6 |   if (isLoading) {
 7 |     return (
 8 |       <Loader
 9 |         active
10 |         size="medium"
11 |         inline="centered"
12 |         style={{ marginTop: 30 }}
13 |       />
14 |     );
15 |   }
16 |   return (
17 |     <div>
18 |       {passwords.map((password) => (
19 |         <Password password={password} key={password} />
20 |       ))}
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default PasswordList;
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "password-generator-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "react": "^16.8.6",
 7 |     "react-copy-to-clipboard": "^5.0.1",
 8 |     "react-dom": "^16.8.6",
 9 |     "react-scripts": "3.0.1",
10 |     "react-semantic-ui-range": "^0.7.0",
11 |     "semantic-ui-css": "^2.4.1",
12 |     "semantic-ui-react": "^0.87.1",
13 |     "zxcvbn": "^4.4.2"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": "react-app"
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/utility/password-generator.js:
--------------------------------------------------------------------------------
 1 | function getCharactersFromSettings({
 2 |   lowerCase,
 3 |   upperCase,
 4 |   numbers,
 5 |   symbols,
 6 |   allowedSymbols
 7 | }) {
 8 |   let characters = [];
 9 | 
10 |   if (lowerCase) characters.push('abcdefghijklmnopqrstuvwxyz');
11 |   if (upperCase) characters.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
12 |   if (numbers) characters.push('0123456789');
13 |   if (symbols) characters.push(allowedSymbols);
14 | 
15 |   return characters.join('');
16 | }
17 | 
18 | function randomPassword(characters, { length, lowerCase, upperCase }) {
19 |   let password = [];
20 | 
21 |   while (password.length < length) {
22 |     const randomIndex = Math.floor(Math.random() * characters.length);
23 |     password.push(characters[randomIndex]);
24 |   }
25 | 
26 |   return password.join('');
27 | }
28 | 
29 | export const generatePasswords = settings => {
30 |   const characters = getCharactersFromSettings(settings);
31 | 
32 |   let passwords = [];
33 | 
34 |   while (passwords.length < settings.amount) {
35 |     passwords.push(randomPassword(characters, settings));
36 |   }
37 | 
38 |   return passwords;
39 | };
40 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Settings from './components/Settings';
 3 | import PasswordList from './components/PasswordList';
 4 | import { generatePasswords } from './utility/password-generator';
 5 | import { Grid, Header } from 'semantic-ui-react';
 6 | 
 7 | class App extends React.Component {
 8 |   state = {
 9 |     passwords: [],
10 |     isLoading: false
11 |   };
12 | 
13 |   handleGenerate = settings => {
14 |     this.setState({ isLoading: true }, () => {
15 |       setTimeout(() => {
16 |         this.setState({
17 |           passwords: generatePasswords(settings),
18 |           isLoading: false
19 |         });
20 |       }, 300);
21 |     });
22 |   };
23 | 
24 |   render() {
25 |     return (
26 |       <div
27 |         style={{ background: '#f9fbfd', height: '100vh', overflowY: 'scroll' }}
28 |       >
29 |         <Grid container centered className="App">
30 |           <Grid.Column style={{ maxWidth: 450, padding: '70px 0' }}>
31 |             <Header as="h2" textAlign="center">
32 |               Password Generator
33 |             </Header>
34 |             <Settings handleGenerate={this.handleGenerate} />
35 |             <PasswordList
36 |               passwords={this.state.passwords}
37 |               isLoading={this.state.isLoading}
38 |             />
39 |           </Grid.Column>
40 |         </Grid>
41 |       </div>
42 |     );
43 |   }
44 | }
45 | 
46 | export default App;
47 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>Password Generator</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/src/components/Password.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Card, Button, Popup, Progress } from 'semantic-ui-react';
 3 | import { CopyToClipboard } from 'react-copy-to-clipboard';
 4 | import zxcvbn from 'zxcvbn';
 5 | 
 6 | const strengthColors = ['red', 'orange', 'yellow', 'olive', 'teal'];
 7 | 
 8 | function charColor(char) {
 9 |   if (char.match(/\d/)) {
10 |     return 'teal';
11 |   } else if (char.match(/[^a-zA-Z0-9]/)) {
12 |     return 'brown';
13 |   } else {
14 |     return 'black';
15 |   }
16 | }
17 | 
18 | const Password = ({ password }) => {
19 |   const [copied, setCopied] = useState(false);
20 |   const passwordStrength = zxcvbn(password).score;
21 | 
22 |   return (
23 |     <Card fluid>
24 |       <Card.Content style={{ display: 'flex', alignItems: 'center' }}>
25 |         {password.split('').map((char, index) => (
26 |           <span
27 |             style={{ color: charColor(char), fontFamily: 'monospace' }}
28 |             key={index}
29 |           >
30 |             {char}
31 |           </span>
32 |         ))}
33 |         <Popup
34 |           inverted
35 |           size="tiny"
36 |           position="right center"
37 |           content={copied ? 'Copied!' : 'Copy to clipboard'}
38 |           trigger={
39 |             <CopyToClipboard text={password} onCopy={() => setCopied(true)}>
40 |               <Button
41 |                 basic
42 |                 icon="copy outline"
43 |                 style={{ marginLeft: 'auto' }}
44 |               />
45 |             </CopyToClipboard>
46 |           }
47 |           onClose={() => setCopied(false)}
48 |         />
49 |       </Card.Content>
50 |       <Card.Content style={{ padding: 0 }}>
51 |         <Progress
52 |           percent={((passwordStrength + 1) / 5) * 100}
53 |           size="tiny"
54 |           style={{ margin: 0, borderRadius: 0 }}
55 |           color={strengthColors[passwordStrength]}
56 |         />
57 |       </Card.Content>
58 |     </Card>
59 |   );
60 | };
61 | 
62 | export default Password;
63 | 


--------------------------------------------------------------------------------
/src/components/Settings.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Slider } from 'react-semantic-ui-range';
  3 | import {
  4 |   Segment,
  5 |   Button,
  6 |   Icon,
  7 |   Form,
  8 |   Label,
  9 |   Checkbox
 10 | } from 'semantic-ui-react';
 11 | 
 12 | class Settings extends React.PureComponent {
 13 |   state = {
 14 |     length: 14,
 15 |     lowerCase: true,
 16 |     upperCase: true,
 17 |     numbers: true,
 18 |     symbols: true,
 19 |     allowedSymbols: '@!*_-:=#/{}[]',
 20 |     amount: 3
 21 |   };
 22 | 
 23 |   handleChange = ({ target }) => {
 24 |     const invalidSymbol =
 25 |       target.name === 'allowedSymbols' && target.value.match(/[a-zA-Z0-9\s]/);
 26 | 
 27 |     if (!invalidSymbol) {
 28 |       this.setState({ [target.name]: target.value });
 29 |     }
 30 |   };
 31 | 
 32 |   handleCheckbox = (e, { name, checked }) => {
 33 |     this.setState({ [name]: checked });
 34 |   };
 35 | 
 36 |   componentDidMount() {
 37 |     this.props.handleGenerate(this.state);
 38 |   }
 39 | 
 40 |   componentDidUpdate() {
 41 |     this.props.handleGenerate(this.state);
 42 |   }
 43 | 
 44 |   render() {
 45 |     const {
 46 |       symbols,
 47 |       allowedSymbols,
 48 |       lowerCase,
 49 |       upperCase,
 50 |       numbers,
 51 |       length,
 52 |       amount
 53 |     } = this.state;
 54 | 
 55 |     if (symbols && !allowedSymbols.length) {
 56 |       this.setState({ symbols: false });
 57 |     }
 58 |     if (!lowerCase && !upperCase && !symbols && !numbers) {
 59 |       this.setState({ lowerCase: true });
 60 |     }
 61 | 
 62 |     return (
 63 |       <Segment stacked>
 64 |         <div style={{ marginBottom: 10 }}>
 65 |           <Slider
 66 |             value={length}
 67 |             color="grey"
 68 |             settings={{
 69 |               start: length,
 70 |               min: 3,
 71 |               max: 24,
 72 |               step: 1,
 73 |               onChange: value => this.setState({ length: value })
 74 |             }}
 75 |             style={{ inner: { margin: 0 } }}
 76 |           />
 77 |           <Label color="grey" size="large" style={{ margin: '3px 0 0' }}>
 78 |             password length
 79 |             <Label.Detail>{length}</Label.Detail>
 80 |           </Label>
 81 |         </div>
 82 |         <Form.Checkbox
 83 |           label="lower case letters"
 84 |           name="lowerCase"
 85 |           checked={this.state.lowerCase}
 86 |           onChange={this.handleCheckbox}
 87 |           style={{ marginBottom: 5 }}
 88 |         />
 89 |         <Form.Checkbox
 90 |           label="upper case letters"
 91 |           name="upperCase"
 92 |           checked={this.state.upperCase}
 93 |           onChange={this.handleCheckbox}
 94 |           style={{ marginBottom: 5 }}
 95 |         />
 96 |         <Form.Checkbox
 97 |           label="numbers"
 98 |           name="numbers"
 99 |           checked={this.state.numbers}
100 |           onChange={this.handleCheckbox}
101 |           style={{ marginBottom: 5 }}
102 |         />
103 |         <Form.Input
104 |           label={
105 |             <Checkbox
106 |               label=""
107 |               name="symbols"
108 |               checked={this.state.symbols}
109 |               onChange={this.handleCheckbox}
110 |               disabled={!this.state.allowedSymbols.length}
111 |             />
112 |           }
113 |           name="allowedSymbols"
114 |           value={this.state.allowedSymbols}
115 |           onChange={this.handleChange}
116 |         />
117 |         <div style={{ margin: '10px 0' }}>
118 |           <Slider
119 |             value={amount}
120 |             color="grey"
121 |             settings={{
122 |               start: amount,
123 |               min: 1,
124 |               max: 20,
125 |               step: 1,
126 |               onChange: value => this.setState({ amount: value })
127 |             }}
128 |             style={{ inner: { margin: 0 } }}
129 |           />
130 |           <Label color="grey" size="large" style={{ margin: '3px 0 0' }}>
131 |             number of passwords
132 |             <Label.Detail>{amount}</Label.Detail>
133 |           </Label>
134 |         </div>
135 |         <Button
136 |           fluid
137 |           basic
138 |           icon
139 |           onClick={() => this.props.handleGenerate(this.state)}
140 |         >
141 |           <Icon name="refresh" />
142 |         </Button>
143 |       </Segment>
144 |     );
145 |   }
146 | }
147 | 
148 | export default Settings;
149 | 


--------------------------------------------------------------------------------