beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add show password option to one one of the password fields in the sign up form and the set password form

Browse source
This commit is contained in:
Abhinav 2023-04-13 16:31:28 +05:30
parent 0bce61f1ac
commit ab355d1db0
2 changed files with 52 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/SetPasswordForm.tsx
View file

@ -7,6 +7,7 @@ import { PasswordStrengthHint } from './PasswordStrength';
import { isWeakPassword } from 'utils/crypto';
import { Trans } from 'react-i18next';
import { t } from 'i18next';
import ShowHidePassword from './Form/ShowHidePassword';
export interface SetPasswordFormProps {
userEmail: string;
@ -26,6 +27,17 @@ export interface SetPasswordFormValues {
}
function SetPasswordForm(props: SetPasswordFormProps) {
const [loading, setLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (
event: React.MouseEvent<HTMLButtonElement>
) => {
event.preventDefault();
};
const onSubmit = async (
values: SetPasswordFormValues,
@ -82,7 +94,7 @@ function SetPasswordForm(props: SetPasswordFormProps) {
name="password"
id="password"
autoComplete="new-password"
type="password"
type={showPassword ? 'text' : 'password'}
label={t('PASSPHRASE_HINT')}
value={values.passphrase}
onChange={handleChange('passphrase')}
@ -90,6 +102,19 @@ function SetPasswordForm(props: SetPasswordFormProps) {
helperText={errors.passphrase}
autoFocus
disabled={loading}
InputProps={{
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
}}
/>
<TextField
fullWidth

27
src/components/SignUp.tsx
View file

@ -31,6 +31,7 @@ import VerticallyCentered from './Container';
import { PasswordStrengthHint } from './PasswordStrength';
import { Trans } from 'react-i18next';
import { t } from 'i18next';
import ShowHidePassword from './Form/ShowHidePassword';
interface FormValues {
email: string;
@ -46,6 +47,17 @@ export default function SignUp(props: SignUpProps) {
const router = useRouter();
const [acceptTerms, setAcceptTerms] = useState(false);
const [loading, setLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};
const handleMouseDownPassword = (
event: React.MouseEvent<HTMLButtonElement>
) => {
event.preventDefault();
};
const registerUser = async (
{ email, passphrase, confirm }: FormValues,
@ -137,13 +149,26 @@ export default function SignUp(props: SignUpProps) {
id="password"
name="password"
autoComplete="new-password"
type="password"
type={showPassword ? 'text' : 'password'}
label={t('PASSPHRASE_HINT')}
value={values.passphrase}
onChange={handleChange('passphrase')}
error={Boolean(errors.passphrase)}
helperText={errors.passphrase}
disabled={loading}
InputProps={{
endAdornment: (
<ShowHidePassword
showPassword={showPassword}
handleClickShowPassword={
handleClickShowPassword
}
handleMouseDownPassword={
handleMouseDownPassword
}
/>
),
}}
/>
<TextField