Skip to content

Commit

Permalink
Fixed copy and password strength
Browse files Browse the repository at this point in the history
Made it so the UI checks for how many settinsg the user chose to strengthen their password. If all 4 checkboxes were checked, it was a very strong password, and every time they removed one, it would go down in strength.

for the copy method, I took out the alert message because it was preventing the password from being copied to clipboard.
  • Loading branch information
abant07 committed Jan 27, 2024
1 parent 6199cd4 commit a99d639
Showing 1 changed file with 34 additions and 4 deletions.
38 changes: 34 additions & 4 deletions ui/password-generator-tool/src/components/Generate.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,28 @@ const Generate = () => {
const [number, setNumber] = useState(false)
const [specialCharacter, setSpecialCharacter] = useState(false)
const [passwordLength, setPasswordLength] = useState(8)
const [generatedPassword, setGeneratedPassword] = useState('eKs@4]sx3hq]')
const [generatedPassword, setGeneratedPassword] = useState('Configure your password')
const [sendToEmail, setSendToEmail] = useState(false)
const [targetEmail, setTargetEmail] = useState('')
const [copy, setCopied] = useState('COPY')
const [settings, setSettings] = useState(0)

useEffect(() => {
const characters = { capitalAlphabet, smallAlphabet, number, specialCharacter, passwordLength }
var count = 0
if (characters.capitalAlphabet) {
count += 1
}
if (characters.smallAlphabet) {
count += 1
}
if (characters.number) {
count += 1
}
if (characters.specialCharacter) {
count += 1
}
setSettings(count)
callGeneratePasswordApi(characters)
}, [capitalAlphabet, smallAlphabet, number, specialCharacter, passwordLength])

Expand All @@ -40,16 +56,30 @@ const Generate = () => {
<Col lg={5}>
<div className="d-flex justify-content-between mb-4">
<div className="fs-3 border-2 text-truncate text-center border-0">{generatedPassword}</div>
<label className="bg-success fw-bold rounded-4 py-2 px-4" style={{fontSize: "12px"}}>VERY STRONG</label>
{settings == 4 && (
<label className="fw-bold rounded-4 py-3 px-4 mb-2" style={{fontSize: "12px", color: "white", backgroundColor: "#006400"}}>VERY STRONG</label>
)}
{settings == 3 && (
<label className="bg-success fw-bold rounded-4 py-3 px-4 mb-2" style={{fontSize: "12px", color: "white"}}>STRONG</label>
)}
{settings == 2 && (
<label className="bg-warning fw-bold rounded-4 py-3 px-4 mb-2" style={{fontSize: "12px", color: "white"}}>GOOD</label>
)}
{settings <= 1 && (
<label className="bg-danger fw-bold rounded-4 py-3 px-4 mb-2" style={{fontSize: "12px", color: "white"}}>POOR</label>
)}
</div>
<button
className="btn btn-light shadow"
onClick={() => {
navigator.clipboard.writeText(generatedPassword)
alert("Copied!")
setCopied("COPIED")
setTimeout(function() {
setCopied("COPY")
}, 1000);
}}
>
<strong>COPY</strong>
<strong>{copy}</strong>
</button>
<div className="d-flex justify-content-between my-3">
<div className="text-capitalize">
Expand Down

0 comments on commit a99d639

Please sign in to comment.