From 131779b23182cc1603a58855555dcb5d6fd40d00 Mon Sep 17 00:00:00 2001 From: Keshav Date: Fri, 2 Feb 2024 04:46:19 +0530 Subject: [PATCH 1/2] Added Password Show-Hidden Feat --- .../modules/User/components/AccountForm.jsx | 76 +++++++++++++++---- client/modules/User/components/LoginForm.jsx | 56 ++++++++++---- client/modules/User/components/SignupForm.jsx | 75 ++++++++++++++---- client/styles/components/_forms.scss | 22 ++++++ 4 files changed, 181 insertions(+), 48 deletions(-) diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx index 5be633b594..caa625e5ff 100644 --- a/client/modules/User/components/AccountForm.jsx +++ b/client/modules/User/components/AccountForm.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useState } from 'react'; import { Form, Field } from 'react-final-form'; import { useSelector, useDispatch } from 'react-redux'; import { useTranslation } from 'react-i18next'; @@ -25,6 +26,17 @@ function asyncValidate(fieldToValidate, value) { } function AccountForm() { + const [showCurrentPassword, setShowCurrentPassword] = useState(false); + const [showNewPassword, setShowNewPassword] = useState(false); + + const toggleCurrentPasswordVisibility = () => { + setShowCurrentPassword(!showCurrentPassword); + }; + + const toggleConfirmPasswordVisibility = () => { + setShowNewPassword(!showNewPassword); + }; + const { t } = useTranslation(); const user = useSelector((state) => state.user); const dispatch = useDispatch(); @@ -134,14 +146,30 @@ function AccountForm() { - +
+ + { + if (e.key === 'Enter') { + toggleCurrentPasswordVisibility(); + } + }} + > + {showCurrentPassword ? 'Hide' : 'Show'} + +
+ {field.meta.touched && field.meta.error && ( {field.meta.error} )} @@ -154,14 +182,30 @@ function AccountForm() { - +
+ + { + if (e.key === 'Enter') { + toggleConfirmPasswordVisibility(); + } + }} + > + {showNewPassword ? 'Hide' : 'Show'} + +
+ {field.meta.touched && field.meta.error && ( {field.meta.error} )} diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx index d990299322..010bc64af9 100644 --- a/client/modules/User/components/LoginForm.jsx +++ b/client/modules/User/components/LoginForm.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Form, Field } from 'react-final-form'; import { useDispatch } from 'react-redux'; @@ -7,6 +8,8 @@ import { validateLogin } from '../../../utils/reduxFormUtils'; import { validateAndLoginUser } from '../actions'; function LoginForm() { + const [showPassword, setShowPassword] = useState(false); + const { t } = useTranslation(); const dispatch = useDispatch(); @@ -14,6 +17,10 @@ function LoginForm() { return dispatch(validateAndLoginUser(formProps)); } + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + return (
{(field) => ( -

- - - {field.meta.touched && field.meta.error && ( - {field.meta.error} - )} -

+ <> +

+ +

+ + { + if (e.key === 'Enter') { + togglePasswordVisibility(); + } + }} + > + {showPassword ? 'Hide' : 'Show'} + +
+ {field.meta.touched && field.meta.error && ( + {field.meta.error} + )} +

+ )} {submitError && !modifiedSinceLastSubmit && ( diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx index c497981c1e..e2f8b94a89 100644 --- a/client/modules/User/components/SignupForm.jsx +++ b/client/modules/User/components/SignupForm.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Form, Field } from 'react-final-form'; import { useDispatch } from 'react-redux'; @@ -33,6 +34,17 @@ function validateEmail(email) { } function SignupForm() { + const [showPassword, setShowPassword] = useState(false); + const [ConfirmShowPassword, setConfirmShowPassword] = useState(false); + + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + const toggleConfirmPasswordVisibility = () => { + setConfirmShowPassword(!ConfirmShowPassword); + }; + const { t } = useTranslation(); const dispatch = useDispatch(); @@ -98,14 +110,30 @@ function SignupForm() { - +
+ + { + if (e.key === 'Enter') { + togglePasswordVisibility(); + } + }} + > + {showPassword ? 'Hide' : 'Show'} + +
+ {field.meta.touched && field.meta.error && ( {field.meta.error} )} @@ -118,14 +146,29 @@ function SignupForm() { - +
+ + { + if (e.key === 'Enter') { + toggleConfirmPasswordVisibility(); + } + }} + > + {ConfirmShowPassword ? 'Hide' : 'Show'} + +
{field.meta.touched && field.meta.error && ( {field.meta.error} )} diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss index 6daa1fa67a..a0009b819f 100644 --- a/client/styles/components/_forms.scss +++ b/client/styles/components/_forms.scss @@ -117,3 +117,25 @@ // .form--inline [type="submit"][disabled] { // cursor: not-allowed; // } + +.password-input-container { + position: relative; +} + +.form__input { + padding-right: 35px; +} + +.show-hide-button { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + border: none; + cursor: pointer; + outline: none; +} + +:focus-visible { + outline-color: lightgreen; +} \ No newline at end of file From fbcf8e665e3afe5d9e7532ca4ea2087687ab4796 Mon Sep 17 00:00:00 2001 From: Keshav Date: Fri, 2 Feb 2024 04:55:08 +0530 Subject: [PATCH 2/2] Added Password Show-Hidden Feat --- client/modules/User/components/AccountForm.jsx | 8 ++++++-- client/modules/User/components/LoginForm.jsx | 4 +++- client/modules/User/components/SignupForm.jsx | 8 ++++++-- translations/locales/en-US/translations.json | 12 +++++++++--- 4 files changed, 24 insertions(+), 8 deletions(-) diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx index caa625e5ff..67ba40e2ba 100644 --- a/client/modules/User/components/AccountForm.jsx +++ b/client/modules/User/components/AccountForm.jsx @@ -166,7 +166,9 @@ function AccountForm() { } }} > - {showCurrentPassword ? 'Hide' : 'Show'} + {showCurrentPassword + ? t('AccountForm.HidePassword') + : t('AccountForm.ShowPassword')} @@ -202,7 +204,9 @@ function AccountForm() { } }} > - {showNewPassword ? 'Hide' : 'Show'} + {showNewPassword + ? t('AccountForm.HidePassword') + : t('AccountForm.ShowPassword')} diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx index 010bc64af9..c92420ab21 100644 --- a/client/modules/User/components/LoginForm.jsx +++ b/client/modules/User/components/LoginForm.jsx @@ -76,7 +76,9 @@ function LoginForm() { } }} > - {showPassword ? 'Hide' : 'Show'} + {showPassword + ? t('LoginForm.HidePassword') + : t('LoginForm.ShowPassword')} {field.meta.touched && field.meta.error && ( diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx index e2f8b94a89..368fee03a1 100644 --- a/client/modules/User/components/SignupForm.jsx +++ b/client/modules/User/components/SignupForm.jsx @@ -130,7 +130,9 @@ function SignupForm() { } }} > - {showPassword ? 'Hide' : 'Show'} + {showPassword + ? t('SignupForm.HidePassword') + : t('SignupForm.ShowPassword')} @@ -166,7 +168,9 @@ function SignupForm() { } }} > - {ConfirmShowPassword ? 'Hide' : 'Show'} + {ConfirmShowPassword + ? t('SignupForm.HidePassword') + : t('SignupForm.ShowPassword')} {field.meta.touched && field.meta.error && ( diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json index 39f3a426ef..e709369d95 100644 --- a/translations/locales/en-US/translations.json +++ b/translations/locales/en-US/translations.json @@ -67,7 +67,9 @@ "UsernameOrEmailARIA": "Email or Username", "Password": "Password", "PasswordARIA": "Password", - "Submit": "Log In" + "Submit": "Log In", + "ShowPassword": "Show", + "HidePassword": "Hide" }, "LoginView": { "Title": "p5.js Web Editor | Login", @@ -311,7 +313,9 @@ "CurrentPasswordARIA": "Current Password", "NewPassword": "New Password", "NewPasswordARIA": "New Password", - "SubmitSaveAllSettings": "Save All Settings" + "SubmitSaveAllSettings": "Save All Settings", + "ShowPassword": "Show", + "HidePassword": "Hide" }, "AccountView": { "SocialLogin": "Social Login", @@ -357,7 +361,9 @@ "PasswordARIA": "password", "ConfirmPassword": "Confirm Password", "ConfirmPasswordARIA": "Confirm password", - "SubmitSignup": "Sign Up" + "SubmitSignup": "Sign Up", + "ShowPassword": "Show", + "HidePassword": "Hide" }, "SignupView": { "Title": "p5.js Web Editor | Signup",