From 8cdcc71aa2f1359991c4f6da6cd7385898d99362 Mon Sep 17 00:00:00 2001 From: Olang Daniel Date: Mon, 30 May 2022 02:46:10 +0100 Subject: [PATCH 1/3] password ui --- .../password-generator/PasswordGenerator.jsx | 229 ++++++----- .../password-generator-style.css | 355 +++++++++++------- 2 files changed, 349 insertions(+), 235 deletions(-) diff --git a/src/plays/password-generator/PasswordGenerator.jsx b/src/plays/password-generator/PasswordGenerator.jsx index 3cf6d9ced..dab0f2fb7 100644 --- a/src/plays/password-generator/PasswordGenerator.jsx +++ b/src/plays/password-generator/PasswordGenerator.jsx @@ -1,7 +1,7 @@ import { getPlayById } from "meta/play-meta-util"; import PlayHeader from "common/playlists/PlayHeader"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import "./password-generator-style.css"; import data from "./data.json"; @@ -24,22 +24,36 @@ 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()); // generate a random number within limit which is provided const randomNumberGenerator = (limit) => { + let result = 0; + while (limit) { + result = Math.floor(Math.random() * Math.floor(Math.random() * 100)); + if (result < limit) return result; + continue; + } + }; // arrange data to feed the generatePassword function const arrangeData = () => { + const { numbers, special, uppercase, lowercase } = passwordConfig; const parseData = (val, key) => { @@ -58,89 +72,147 @@ 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 const generateHander = () => { + const finalPassword = generatePassword(); + setPassword({ status: false, password: finalPassword }); + + passwordField.current.value = finalPassword; + + + }; + + + // Copy the password to the clipboard + const onCopyClick = (e) => { + + e.preventDefault(); + + navigator.clipboard.writeText(password.password); + + setPassword({ ...password, status: true }); + }; - // handling checkbox and updating the config - const handleCheckedItem = (name, checked) => { + const ErrorBox = () => { + return

You cannot Uncheck All At Once.

; + }; + + const checkhandler = (id, inputCheckbox) => (e) => { + const modifiedConfig = { ...passwordConfig }; + delete modifiedConfig.length; + delete modifiedConfig.excludeSimilarCharacters; - modifiedConfig[name] = checked; + + modifiedConfig[id] = inputCheckbox.current.checked; + const values = Object.values(modifiedConfig).filter((i) => i === true); + if (values.length === 0) { + return setError(true); + } - setPasswordConfig({ ...passwordConfig, [name]: checked }); + + setPasswordConfig({ ...passwordConfig, [id]: inputCheckbox.current.checked }); + setError(false); - }; - // Copy the password to the clipboard - const onCopyClick = (e) => { - e.preventDefault(); - navigator.clipboard.writeText(password.password); - setPassword({ ...password, status: true }); + inputCheckbox.current.checked = !inputCheckbox.current.checked; + + }; + useEffect(() => { + generateHander(); + }, []); - const ErrorBox = () => { - return

You cannot Uncheck All At Once.

; + + + const setLength = (value) => { + + setPasswordConfig({ ...passwordConfig, ['length']: value }); + + setError(false); + }; + + return (
- {/* Your Code Starts Here */} -
-

Password Generator

-
- {error && } -
- - - - -
- - + +
+
+ +
+

Lowercase

+
+
+
+
+ +
+

Uppercase

+
+
+
+
+
+
+ +
+

Number

+
+
+
+
+ +
+

Special Char

+
+
+
+
+
+
+
+

Length

+ -
-
-
- - +
-
- +
+
+ + +
-
+
- {/* Your Code Ends Here */}
); } -const CheckBox = ({ name, checked, getCheckedItem, id }) => { - const checkboxChangeHandler = (id) => (e) => { - getCheckedItem(id, e.target.checked); - }; - - return ( -
- - -
- ); -}; export default PasswordGenerator; diff --git a/src/plays/password-generator/password-generator-style.css b/src/plays/password-generator/password-generator-style.css index 1688b6284..b2557c263 100644 --- a/src/plays/password-generator/password-generator-style.css +++ b/src/plays/password-generator/password-generator-style.css @@ -1,139 +1,216 @@ - - -.password-generator .main { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.password-generator .title { - text-align: center; -} - -.password-generator .section { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.password-generator .section > div:nth-of-type(2) { - position: relative; - /* background-color: black; */ -} - -.password-generator .copy-button { - position: absolute; - right: 0; - top: 0; - bottom: 0; - border: 2px solid #187B86; - border-left: none; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; - padding: 0 10px; - font-size: 20px; - background-color: #187B86; - outline: none; - color: white; - transition: 100ms; -} - -.password-generator .copy-button:hover { - background-color: #135088; - border: 2px solid #135088; - border-left: none; -} - -.password-generator .copid { - background-color: #135088; - border: 2px solid #135088; - border-left: none; -} - -.password-generator .section > div:nth-of-type(1) { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - width: 400px; - column-gap: 25px; - row-gap: 20px; - margin: 25px 0; -} - -.password-generator .password-input { - padding: 10px; - outline: none; - border: 2px solid #ccc; - border-radius: 5px; - font-size: 1.3rem; - font-weight: bold; - width: 400px; - /* max-width: 400px; */ - color: gray; -} - - -.password-generator .generate-pwd { - padding: 10px 1rem; - outline: none; - font-size: 1.5rem; - outline: none; - background: rgb(0,128,0, 0.8); - border: none; - color: white; - cursor: pointer; - border-radius: 5px; - transition: 100ms; - margin: 1rem 0 0 0; -} - -.password-generator .generate-pwd:hover { - background: rgb(0,128,0, 1); -} - -.password-generator .checkbox-comp { - padding: 0; - margin: 0; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; -} - -.password-generator .checkbox { - width: 20px; - height: 20px; - float: right; -} - -.password-generator .select { - width: 45px; - height: 25px; - font-size: 1rem; - float: right; - margin: 0; -} - -.password-generator .error { - color: red; - font-size: 1rem; - text-align: center; -} - -@media screen and (max-width: 600px) { - .password-generator .section > div:nth-of-type(1) { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - width: 100%; - } - - .password-generator .password-input { - font-size: 1rem; - width: 100%; - } - .password-generator .copy-button { - padding: 0 5px; - font-size: 16px; - } -} \ No newline at end of file + @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); + + .password-generator { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins'; + } + + .password-generator .main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .password-generator .title { + font-size: 3.5em; + font-weight: 900; + color: transparent; + -webkit-text-stroke-width: 2px; + -webkit-text-stroke-color: black; + margin-bottom: .5em; + min-width: 10.5em; + } + + .password-generator .main .inputfield { + outline: 1px solid #000; + padding: 1em; + border-radius: 1.5em; + min-width: 33.5em; + } + + .password-generator .main .inputfield .text { + border: none; + outline: none; + font-size: 1.2em; + margin: .1em .5em; + font-weight: 600; + color: rgb(104, 104, 104); + } + + .password-generator .main .inputfield .copy { + background-color: #18c0f4; + outline: none; + border: none; + font-size: 1em; + font-weight: 900; + color: #fff; + padding: .6em 1em; + border-radius: .7em; + text-transform: uppercase; + } + + .password-generator .main .block { + display: flex; + gap: 1em; + + } + + .password-generator .main .block .select { + margin: 1.5em 1em 0 1em; + display: flex; + border-radius: 10em; + padding: .1em 1em; + align-items: center; + gap: 1em; + width: 14em; + background-color: #18c0f4; + color: #fff; + text-transform: capitalize; + border: none; + cursor: pointer; + } + + .password-generator .main .block .select h3 { + margin: .5em auto; + justify-self: start; + } + + .password-generator .main .block .select .bigCircle { + background-color: #ffffff; + height: 2em; + width: 2em; + border-radius: 50%; + justify-self: flex-end; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + .password-generator .main .block .select .smallCircle { + background-color: #18c0f4; + height: 1em; + width: 1em; + border-radius: 50%; + } + + + .password-generator .main .block .flexlength { + display: flex; + outline: .15em solid #000; + width: 30em; + justify-content: center; + align-content: center; + align-items: center; + gap: 5em; + margin-top: 2em; + border-radius: 10em; + padding-top: 0em; + } + + + .password-generator .main .block .flexlength .select { + width: 5em; + text-align: center; + outline: none; + border: 2px solid #000; + font-size: 1.2em; + border-radius: .2em; + background-color: transparent; + color: #000; + margin-top: 0; + } + + + .password-generator .main .block .flexlength h3 { + font-weight: 900; + margin: .6em; + } + + .password-generator .main .block .sub { + margin: 1.5em; + } + + .password-generator .main .block .sub input { + color: #fff; + background-color: #016daf; + cursor: pointer; + font-size: 1.4em; + width: 22em; + font-weight: 900; + outline: none; + border: none; + border-radius: 5em; + padding: .7em; + 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 { + display: none; + } + + input#specialCharToggle[type="checkbox"]:checked~.specialchar .bigCircle { + outline : 1px solid #000; + background-color: transparent; + } + + input#specialCharToggle[type="checkbox"]:checked~.specialchar { + outline : 1px solid #000; + background-color: transparent; + color: #000; + } + + + .error { + color: red; + } \ No newline at end of file From 3e62be6a5fb4dddd1c06d65aa2f33c4f92e5e6ce Mon Sep 17 00:00:00 2001 From: Olang Daniel Date: Tue, 31 May 2022 08:17:41 +0100 Subject: [PATCH 2/3] password ui mediaquery --- .../password-generator/PasswordGenerator.jsx | 55 +----------- .../password-generator-style.css | 86 +++++++++++++++++-- 2 files changed, 82 insertions(+), 59 deletions(-) diff --git a/src/plays/password-generator/PasswordGenerator.jsx b/src/plays/password-generator/PasswordGenerator.jsx index dab0f2fb7..2cbd689a7 100644 --- a/src/plays/password-generator/PasswordGenerator.jsx +++ b/src/plays/password-generator/PasswordGenerator.jsx @@ -30,37 +30,26 @@ function PasswordGenerator(props) { const specialCharCheckBox = useRef(null) const passwordField = useRef(null) - // generating lowercase characters data.lowercase = data?.uppercase?.map((i) => i.toLowerCase()); // generate a random number within limit which is provided const randomNumberGenerator = (limit) => { - let result = 0; - while (limit) { - result = Math.floor(Math.random() * Math.floor(Math.random() * 100)); - if (result < limit) return result; - continue; - } - }; // 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"), @@ -72,96 +61,56 @@ 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; }; // generate password button click handler const generateHander = () => { - const finalPassword = generatePassword(); - setPassword({ status: false, password: finalPassword }); - passwordField.current.value = finalPassword; - - }; - // Copy the password to the clipboard const onCopyClick = (e) => { - e.preventDefault(); - navigator.clipboard.writeText(password.password); - setPassword({ ...password, status: true }); - }; const ErrorBox = () => { return

You cannot Uncheck All At Once.

; - }; + }; const checkhandler = (id, inputCheckbox) => (e) => { - const modifiedConfig = { ...passwordConfig }; - delete modifiedConfig.length; - delete modifiedConfig.excludeSimilarCharacters; - modifiedConfig[id] = inputCheckbox.current.checked; - const values = Object.values(modifiedConfig).filter((i) => i === true); - if (values.length === 0) { - return setError(true); - } - setPasswordConfig({ ...passwordConfig, [id]: inputCheckbox.current.checked }); - setError(false); - inputCheckbox.current.checked = !inputCheckbox.current.checked; - - }; - useEffect(() => { - generateHander(); - }, []); - - const setLength = (value) => { - setPasswordConfig({ ...passwordConfig, ['length']: value }); - setError(false); - }; - - return (
@@ -227,11 +176,9 @@ function PasswordGenerator(props) {
-
- diff --git a/src/plays/password-generator/password-generator-style.css b/src/plays/password-generator/password-generator-style.css index b2557c263..303ac5a5c 100644 --- a/src/plays/password-generator/password-generator-style.css +++ b/src/plays/password-generator/password-generator-style.css @@ -21,14 +21,12 @@ -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; margin-bottom: .5em; - min-width: 10.5em; } .password-generator .main .inputfield { outline: 1px solid #000; padding: 1em; border-radius: 1.5em; - min-width: 33.5em; } .password-generator .main .inputfield .text { @@ -55,7 +53,6 @@ .password-generator .main .block { display: flex; gap: 1em; - } .password-generator .main .block .select { @@ -210,7 +207,86 @@ color: #000; } - .error { color: red; - } \ No newline at end of file + } + + @media (max-width: 628px) { + + .password-generator .title { + font-size: 2.7em; + } + + .password-generator .main .inputfield .text { + width: 16em; + } + + .password-generator .main .block { + gap: 0em; + } + + .password-generator .main .block .select { + margin: 1.2em 0.3em 0 0.3em; + width: 13em; + } + + .password-generator .main .block .flexlength { + width: 26em; + } + .password-generator .main .block .sub input { + width: 19em; + } + } + + + @media (max-width: 500px) { + + .password-generator .title { + font-size: 1.7em; + } + + .password-generator .main .inputfield .text { + width: 12em; + font-size: .9em; + } + .password-generator .main .block .select h3 { + font-size: .8em; + } + .password-generator .main .block { + gap: 0em; + } + .password-generator .main .block .select .bigCircle { + height: 1em; + width: 1em; + } + + .password-generator .main .block .select .smallCircle { + height: 0.5em; + width: 0.5em; + } + + .password-generator .main .block .select { + margin: 1.2em 0.3em 0 0.3em; + width: 9em; + gap: 0em; + } + + .password-generator .main .block .flexlength { + margin-top: 1em; + width: 18em; + } + .password-generator .main .block .sub input { + font-size: 1em; + width: 19em; + } + .password-generator .main .block .flexlength h3 { + font-size: .9em; + } + + .password-generator .main .block .flexlength .select { + font-size: .9em; + } + + + + } From 067977b91660deaf47f6458d55f7893d7736de05 Mon Sep 17 00:00:00 2001 From: Olang Daniel Date: Tue, 31 May 2022 23:34:30 +0100 Subject: [PATCH 3/3] password ui --- .../password-generator/PasswordGenerator.jsx | 33 ++++------ .../password-generator-style.css | 64 ++++--------------- 2 files changed, 26 insertions(+), 71 deletions(-) diff --git a/src/plays/password-generator/PasswordGenerator.jsx b/src/plays/password-generator/PasswordGenerator.jsx index 2cbd689a7..68f44e60d 100644 --- a/src/plays/password-generator/PasswordGenerator.jsx +++ b/src/plays/password-generator/PasswordGenerator.jsx @@ -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"; @@ -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()); @@ -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 @@ -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(() => { @@ -119,21 +112,21 @@ function PasswordGenerator(props) {

Password Generator

{error && }
- +
- -
+ +

Lowercase

- -
+ +

Uppercase

@@ -141,15 +134,15 @@ function PasswordGenerator(props) {
- -
+ +

Number

- -
+ +

Special Char

@@ -176,7 +169,7 @@ function PasswordGenerator(props) {
- +
diff --git a/src/plays/password-generator/password-generator-style.css b/src/plays/password-generator/password-generator-style.css index 303ac5a5c..4ff9c6282 100644 --- a/src/plays/password-generator/password-generator-style.css +++ b/src/plays/password-generator/password-generator-style.css @@ -63,7 +63,7 @@ align-items: center; gap: 1em; width: 14em; - background-color: #18c0f4; + background-color: #18c0f4 ; color: #fff; text-transform: capitalize; border: none; @@ -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;