1import React, { useState } from "react";
2import generator from "generate-password";
3 
4function App() {
5  const [password, setPassword] = useState('');
6  const [length, setLength] = useState(10);
7  const [isLowerCase, setIsLowerCase] = useState(true);
8  const [isUpperCase, setIsUpperCase] = useState(false);
9  const [isNumbers, setIsNumbers] = useState(false);
10  const [isSymbols, setIsSymbols] = useState(false);
11 
12  const generatePassword = () => {
13    const pwd = generator.generate({
14      length: length,
15      lowercase: isLowerCase,
16      uppercase: isUpperCase,
17      numbers: isNumbers,
18      symbols: isSymbols
19    });
20    setPassword(pwd);
21  }
22 
23  return (
24    <div>
25      <h5>Generate a random password in React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
26      <div class="container">
27        <div class="row">
28          <div class="col">
29            <label>
30              <span classname="lbl-len">Length:</span>
31              <input type="number" classname="input-len form-control" value="{length}" onchange="{e" ==""> setLength(e.target.value)}
32              />
33            </label>
34          </div>
35        </div>
36        <div class="row">
37          <div class="col">
38            <label classname="form-control">
39              <input type="checkbox" classname="mr-1" checked="{isLowerCase}" onchange={() ==> setIsLowerCase(val => !val)}
40              />
41              <span>LowerCase</span>
42            </label>
43          </div>
44          <div class="col">
45            <label classname="form-control">
46              <input type="checkbox" classname="mr-1" checked="{isUpperCase}" onchange={() ==> setIsUpperCase(val => !val)}
47              />
48              <span>UpperCase</span>
49            </label>
50          </div>
51        </div>
52        <div class="row">
53          <div class="col">
54            <label classname="form-control">
55              <input type="checkbox" classname="mr-1" checked="{isNumbers}" onchange={() ==> setIsNumbers(val => !val)}
56              />
57              <span>Numbers</span>
58            </label>
59          </div>
60          <div class="col">
61            <label classname="form-control">
62              <input type="checkbox" classname="mr-1" checked="{isSymbols}" onchange={() ==> setIsSymbols(val => !val)}
63              />
64              <span>Symbols</span>
65            </label>
66          </div>
67        </div>
68        <small>Note: At least one should be true.</small>
69        <div class="row">
70          <div class="col">
71            <input type="button" classname="btn btn-dark mt-2 mb-3" value="Generate Password" onclick="{generatePassword}">
72            <div>
73              Password: {password}
74            </div>
75          </div>
76        </div>
77      </div>
78    </div>
79  );
80}
81 
82export default App;
83