Skip to content

Commit

Permalink
password ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asterisk-z
Asterisk-z committed May 31, 2022
1 parent 3e62be6 commit 067977b
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 71 deletions.
33 changes: 13 additions & 20 deletions src/plays/password-generator/PasswordGenerator.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getPlayById } from "meta/play-meta-util";

import PlayHeader from "common/playlists/PlayHeader";
import { useEffect, useState, useRef } from "react";
import { useEffect, useState } from "react";

import "./password-generator-style.css";
import data from "./data.json";
Expand All @@ -24,11 +24,6 @@ function PasswordGenerator(props) {
const [password, setPassword] = useState({ status: false, password: "" });
const [passwordConfig, setPasswordConfig] = useState({ ...config });
const [error, setError] = useState(false);
const lowercaseCheckBox = useRef(null)
const uppercaseCheckBox = useRef(null)
const numberCheckBox = useRef(null)
const specialCharCheckBox = useRef(null)
const passwordField = useRef(null)

// generating lowercase characters
data.lowercase = data?.uppercase?.map((i) => i.toLowerCase());
Expand Down Expand Up @@ -74,7 +69,6 @@ function PasswordGenerator(props) {
const generateHander = () => {
const finalPassword = generatePassword();
setPassword({ status: false, password: finalPassword });
passwordField.current.value = finalPassword;
};

// Copy the password to the clipboard
Expand All @@ -92,14 +86,13 @@ function PasswordGenerator(props) {
const modifiedConfig = { ...passwordConfig };
delete modifiedConfig.length;
delete modifiedConfig.excludeSimilarCharacters;
modifiedConfig[id] = inputCheckbox.current.checked;
modifiedConfig[id] = !inputCheckbox;
const values = Object.values(modifiedConfig).filter((i) => i === true);
if (values.length === 0) {
return setError(true);
}
setPasswordConfig({ ...passwordConfig, [id]: inputCheckbox.current.checked });
setPasswordConfig({ ...passwordConfig, [id]: modifiedConfig[id] });
setError(false);
inputCheckbox.current.checked = !inputCheckbox.current.checked;
};

useEffect(() => {
Expand All @@ -119,37 +112,37 @@ function PasswordGenerator(props) {
<h1 className="title">Password Generator</h1>
{error && <ErrorBox />}
<div className="inputfield">
<input type="text" name="" className="text" id="" disabled ref={passwordField}/>
<input type="text" className="text" disabled value={password.password}/>
<button className="copy copybtn" onClick={onCopyClick}>
{password?.status ? "Copied" : "Copy"}
</button>
</div>
<div className="block">
<input type="checkbox" name="lowercase" ref={lowercaseCheckBox} id="lowercaseToggle" hidden check={passwordConfig.lowercase} />
<div className="select lowercase" id="lower" onClick={checkhandler('lowercase', lowercaseCheckBox)}>
<input type="checkbox" name="lowercase" id="lowercaseToggle" hidden checked={passwordConfig.lowercase} />
<div className="select lowercase" id="lower" onClick={checkhandler('lowercase', passwordConfig.lowercase)}>
<h3>Lowercase</h3>
<div className="bigCircle">
<div className="smallCircle"></div>
</div>
</div>
<input type="checkbox" name="" ref={uppercaseCheckBox} id="uppercaseToggle" hidden check={passwordConfig.uppercase} />
<div className="select uppercase" onClick={checkhandler('uppercase', uppercaseCheckBox)}>
<input type="checkbox" id="uppercaseToggle" hidden checked={passwordConfig.uppercase} />
<div className="select uppercase" onClick={checkhandler('uppercase', passwordConfig.uppercase)}>
<h3>Uppercase</h3>
<div className="bigCircle">
<div className="smallCircle"></div>
</div>
</div>
</div>
<div className="block">
<input type="checkbox" name="" ref={numberCheckBox} id="numberToggle" hidden check={passwordConfig.numbers} />
<div className="select number" onClick={checkhandler('numbers', numberCheckBox)}>
<input type="checkbox" id="numberToggle" hidden checked={passwordConfig.numbers} />
<div className="select number" onClick={checkhandler('numbers', passwordConfig.numbers)}>
<h3>Number</h3>
<div className="bigCircle">
<div className="smallCircle"></div>
</div>
</div>
<input type="checkbox" name="" ref={specialCharCheckBox} id="specialCharToggle" hidden check={passwordConfig.special} />
<div className="select specialchar" onClick={checkhandler('special', specialCharCheckBox)}>
<input type="checkbox" id="specialCharToggle" hidden checked={passwordConfig.special} />
<div className="select specialchar" onClick={checkhandler('special', passwordConfig.special)}>
<h3>Special Char</h3>
<div className="bigCircle">
<div className="smallCircle"></div>
Expand All @@ -176,7 +169,7 @@ function PasswordGenerator(props) {
</div>
<div className="block generate">
<div className="sub">
<input type="submit" onClick={generateHander} name="" className="generate" id="" value="Generate Password" />
<input type="submit" onClick={generateHander} className="generate" value="Generate Password" />
</div>
</div>
</div>
Expand Down
64 changes: 13 additions & 51 deletions src/plays/password-generator/password-generator-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
align-items: center;
gap: 1em;
width: 14em;
background-color: #18c0f4;
background-color: #18c0f4 ;
color: #fff;
text-transform: capitalize;
border: none;
Expand Down Expand Up @@ -145,63 +145,25 @@
text-transform: uppercase;
}

input#lowercaseToggle[type="checkbox"]:checked~.lowercase .bigCircle .smallCircle {
display: none;
}

input#lowercaseToggle[type="checkbox"]:checked~.lowercase .bigCircle {
outline : 1px solid #000;
background-color: transparent;
}

input#lowercaseToggle[type="checkbox"]:checked~.lowercase {
outline : 1px solid #000;
background-color: transparent;
color: #000;
}

input#uppercaseToggle[type="checkbox"]:checked~.uppercase .bigCircle .smallCircle {
display: none;
}

input#uppercaseToggle[type="checkbox"]:checked~.uppercase .bigCircle {
outline : 1px solid #000;
background-color: transparent;
}

input#uppercaseToggle[type="checkbox"]:checked~.uppercase {
outline : 1px solid #000;
background-color: transparent;
color: #000;
}


input#numberToggle[type="checkbox"]:checked~.number .bigCircle .smallCircle {
display: none;
}

input#numberToggle[type="checkbox"]:checked~.number .bigCircle {
outline : 1px solid #000;
background-color: transparent;
}

input#numberToggle[type="checkbox"]:checked~.number {
outline : 1px solid #000;
background-color: transparent;
color: #000;
}


input#specialCharToggle[type="checkbox"]:checked~.specialchar .bigCircle .smallCircle {
input#lowercaseToggle:not([type="checkbox"]:checked)~.lowercase .bigCircle .smallCircle,
input#uppercaseToggle:not([type="checkbox"]:checked)~.uppercase .bigCircle .smallCircle,
input#numberToggle:not([type="checkbox"]:checked)~.number .bigCircle .smallCircle,
input#specialCharToggle:not([type="checkbox"]:checked)~.specialchar .bigCircle .smallCircle {
display: none;
}

input#specialCharToggle[type="checkbox"]:checked~.specialchar .bigCircle {
input#lowercaseToggle:not([type="checkbox"]:checked)~.lowercase .bigCircle,
input#uppercaseToggle:not([type="checkbox"]:checked)~.uppercase .bigCircle,
input#numberToggle:not([type="checkbox"]:checked)~.number .bigCircle,
input#specialCharToggle:not([type="checkbox"]:checked)~.specialchar .bigCircle {
outline : 1px solid #000;
background-color: transparent;
}

input#specialCharToggle[type="checkbox"]:checked~.specialchar {
input#lowercaseToggle:not([type="checkbox"]:checked)~.lowercase,
input#uppercaseToggle:not([type="checkbox"]:checked)~.uppercase,
input#numberToggle:not([type="checkbox"]:checked)~.number,
input#specialCharToggle:not([type="checkbox"]:checked)~.specialchar {
outline : 1px solid #000;
background-color: transparent;
color: #000;
Expand Down

0 comments on commit 067977b

Please sign in to comment.