Skip to content

Commit

Permalink
Merge pull request #243 from Asterisk-z/main
Browse files Browse the repository at this point in the history 
Complete Password Generator UI
  • Loading branch information
@atapas
atapas committed Jun 5, 2022
2 parents be54a11 + 067977b commit 5f66294
Show file tree
Hide file tree
Showing 2 changed files with 329 additions and 237 deletions.
173 changes: 75 additions & 98 deletions src/plays/password-generator/PasswordGenerator.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,10 @@ function PasswordGenerator(props) {
// arrange data to feed the generatePassword function
const arrangeData = () => {
const { numbers, special, uppercase, lowercase } = passwordConfig;

const parseData = (val, key) => {
if (val) return data[key];
return [];
};

const concated = [
...parseData(numbers, "numbers"),
...parseData(special, "special"),
Expand All @@ -58,13 +56,13 @@ function PasswordGenerator(props) {

// Generate a random password
const generatePassword = () => {
setError(false);
const concated = arrangeData();
let finalPassword = "";
for (let i = 0; i < passwordConfig.length; i++) {
finalPassword += concated[randomNumberGenerator(concated.length)];
}
return finalPassword;
setError(false);
const concated = arrangeData();
let finalPassword = "";
for (let i = 0; i < passwordConfig.length; i++) {
finalPassword += concated[randomNumberGenerator(concated.length)];
}
return finalPassword;
};

// generate password button click handler
Expand All @@ -73,74 +71,90 @@ function PasswordGenerator(props) {
setPassword({ status: false, password: finalPassword });
};

// handling checkbox and updating the config
const handleCheckedItem = (name, checked) => {
// Copy the password to the clipboard
const onCopyClick = (e) => {
e.preventDefault();
navigator.clipboard.writeText(password.password);
setPassword({ ...password, status: true });
};

const ErrorBox = () => {
return <p className='error'>You cannot Uncheck All At Once.</p>;
};

const checkhandler = (id, inputCheckbox) => (e) => {
const modifiedConfig = { ...passwordConfig };
delete modifiedConfig.length;
delete modifiedConfig.excludeSimilarCharacters;
modifiedConfig[name] = checked;
modifiedConfig[id] = !inputCheckbox;
const values = Object.values(modifiedConfig).filter((i) => i === true);
if (values.length === 0) {
return setError(true);
}
setPasswordConfig({ ...passwordConfig, [name]: checked });
setPasswordConfig({ ...passwordConfig, [id]: modifiedConfig[id] });
setError(false);
};

// Copy the password to the clipboard
const onCopyClick = (e) => {
e.preventDefault();
navigator.clipboard.writeText(password.password);
setPassword({ ...password, status: true });
};

useEffect(() => {
generateHander();
}, []);

const ErrorBox = () => {
return <p className='error'>You cannot Uncheck All At Once.</p>;
const setLength = (value) => {
setPasswordConfig({ ...passwordConfig, ['length']: value });
setError(false);
};

return (
<div className='play-details'>
<PlayHeader play={play} />
<div className='play-details-body password-generator'>
{/* Your Code Starts Here */}
<div className='main'>
<h1 className='title'>Password Generator</h1>
<section className='section'>
{error && <ErrorBox />}
<div>
<CheckBox
getCheckedItem={handleCheckedItem}
checked={passwordConfig?.uppercase}
name='Uppercase'
id='uppercase'
/>
<CheckBox
getCheckedItem={handleCheckedItem}
checked={passwordConfig?.lowercase}
name='Lowercase'
id='lowercase'
/>
<CheckBox
getCheckedItem={handleCheckedItem}
checked={passwordConfig?.special}
name='Special Char.'
id='special'
/>
<CheckBox
getCheckedItem={handleCheckedItem}
checked={passwordConfig?.numbers}
name='Numbers'
id='numbers'
/>
<div className='checkbox-comp '>
<label>Length</label>
<select
<div className="main">
<h1 className="title">Password Generator</h1>
{error && <ErrorBox />}
<div className="inputfield">
<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" 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" 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" 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" 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>
</div>
</div>
</div>
<div className="block length">
<div className="flexlength">
<h3>Length</h3>
<select
className='select'
onChange={(e) => handleCheckedItem("length", e.target.value)}
onChange={(e) => setLength(e.target.value)}
value={passwordConfig.length}
>
{[12, 14, 16, 20].map((num) => {
Expand All @@ -151,55 +165,18 @@ function PasswordGenerator(props) {
);
})}
</select>
</div>
</div>
<div>
<input
type='text'
className='password-input'
value={password?.password}
onChange={null}
readOnly={true}
/>
<button
onClick={onCopyClick}
className={
password?.status ? "copy-button copid" : "copy-button"
}
>
{password?.status ? "Copied" : "Copy"}
</button>
</div>
</div>
<div>
<button onClick={generateHander} className='generate-pwd'>
Generate Password
</button>
<div className="block generate">
<div className="sub">
<input type="submit" onClick={generateHander} className="generate" value="Generate Password" />
</div>
</div>
</section>
</div>
{/* Your Code Ends Here */}
</div>
</div>
);
}

const CheckBox = ({ name, checked, getCheckedItem, id }) => {
const checkboxChangeHandler = (id) => (e) => {
getCheckedItem(id, e.target.checked);
};

return (
<div className='checkbox-comp'>
<label htmlFor={name}>{name}</label>
<input
checked={checked}
className='checkbox'
onChange={checkboxChangeHandler(id)}
id={name}
type='checkbox'
/>
</div>
);
};

export default PasswordGenerator;
Loading

1 comment on commit 5f66294

@vercel
Copy link

@vercel vercel bot commented on 5f66294 Jun 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-play – ./

reactoplay.vercel.app
react-play-git-main-atapas.vercel.app
react-play-atapas.vercel.app

Please sign in to comment.