kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Add to other Password inputs
rodzic
cf128d70b4
commit
a8b738a719
|
@ -12,10 +12,10 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
|
|||
return (
|
||||
<HStack alignItems='center' space={2} data-testid='validation-checkmark'>
|
||||
<Icon
|
||||
src={require('@tabler/icons/icons/check.svg')}
|
||||
src={isValid ? require('@tabler/icons/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
|
||||
className={classNames({
|
||||
'w-4 h-4': true,
|
||||
'text-gray-500': !isValid,
|
||||
'text-gray-400 fill-gray-400': !isValid,
|
||||
'text-success-500': isValid,
|
||||
})}
|
||||
/>
|
||||
|
|
|
@ -4,7 +4,8 @@ import { Redirect } from 'react-router-dom';
|
|||
|
||||
import { resetPasswordConfirm } from 'soapbox/actions/security';
|
||||
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
import PasswordIndicator from 'soapbox/features/verification/components/password-indicator';
|
||||
import { useAppDispatch, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
const token = new URLSearchParams(window.location.search).get('reset_password_token');
|
||||
|
||||
|
@ -22,9 +23,11 @@ const Statuses = {
|
|||
const PasswordResetConfirm = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const { passwordRequirements } = useFeatures();
|
||||
|
||||
const [password, setPassword] = React.useState('');
|
||||
const [status, setStatus] = React.useState(Statuses.IDLE);
|
||||
const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(passwordRequirements ? false : true);
|
||||
|
||||
const isLoading = status === Statuses.LOADING;
|
||||
|
||||
|
@ -71,10 +74,14 @@ const PasswordResetConfirm = () => {
|
|||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
|
||||
{passwordRequirements && (
|
||||
<PasswordIndicator password={password} onChange={setHasValidPassword} />
|
||||
)}
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button type='submit' theme='primary' disabled={isLoading}>
|
||||
<Button type='submit' theme='primary' disabled={isLoading || !hasValidPassword}>
|
||||
<FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
|
|
|
@ -4,7 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
|
|||
import { changePassword } from 'soapbox/actions/security';
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
import { useAppDispatch, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
import PasswordIndicator from '../verification/components/password-indicator';
|
||||
|
||||
const messages = defineMessages({
|
||||
updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
|
||||
|
@ -22,9 +24,11 @@ const initialState = { currentPassword: '', newPassword: '', newPasswordConfirma
|
|||
const EditPassword = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const { passwordRequirements } = useFeatures();
|
||||
|
||||
const [state, setState] = React.useState(initialState);
|
||||
const [isLoading, setLoading] = React.useState(false);
|
||||
const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(passwordRequirements ? false : true);
|
||||
|
||||
const { currentPassword, newPassword, newPasswordConfirmation } = state;
|
||||
|
||||
|
@ -75,6 +79,10 @@ const EditPassword = () => {
|
|||
onChange={handleInputChange}
|
||||
value={newPassword}
|
||||
/>
|
||||
|
||||
{passwordRequirements && (
|
||||
<PasswordIndicator password={newPassword} onChange={setHasValidPassword} />
|
||||
)}
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={intl.formatMessage(messages.confirmationFieldLabel)}>
|
||||
|
@ -91,7 +99,7 @@ const EditPassword = () => {
|
|||
{intl.formatMessage(messages.cancel)}
|
||||
</Button>
|
||||
|
||||
<Button type='submit' theme='primary' disabled={isLoading}>
|
||||
<Button type='submit' theme='primary' disabled={isLoading || !hasValidPassword}>
|
||||
{intl.formatMessage(messages.submit)}
|
||||
</Button>
|
||||
</FormActions>
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
import React, { useEffect, useMemo } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Stack } from 'soapbox/components/ui';
|
||||
import ValidationCheckmark from 'soapbox/components/validation-checkmark';
|
||||
|
||||
const messages = defineMessages({
|
||||
minimumCharacters: {
|
||||
id: 'registration.validation.minimum_characters',
|
||||
defaultMessage: '8 characters',
|
||||
},
|
||||
capitalLetter: {
|
||||
id: 'registration.validation.capital_letter',
|
||||
defaultMessage: '1 capital letter',
|
||||
},
|
||||
lowercaseLetter: {
|
||||
id: 'registration.validation.lowercase_letter',
|
||||
defaultMessage: '1 lowercase letter',
|
||||
},
|
||||
});
|
||||
|
||||
const hasUppercaseCharacter = (string: string) => {
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
if (string.charAt(i) === string.charAt(i).toUpperCase() && string.charAt(i).match(/[a-z]/i)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const hasLowercaseCharacter = (string: string) => {
|
||||
return string.toUpperCase() !== string;
|
||||
};
|
||||
|
||||
interface IPasswordIndicator {
|
||||
onChange(isValid: boolean): void
|
||||
password: string
|
||||
}
|
||||
|
||||
const PasswordIndicator = ({ onChange, password }: IPasswordIndicator) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const meetsLengthRequirements = useMemo(() => password.length >= 8, [password]);
|
||||
const meetsCapitalLetterRequirements = useMemo(() => hasUppercaseCharacter(password), [password]);
|
||||
const meetsLowercaseLetterRequirements = useMemo(() => hasLowercaseCharacter(password), [password]);
|
||||
const hasValidPassword = meetsLengthRequirements && meetsCapitalLetterRequirements && meetsLowercaseLetterRequirements;
|
||||
|
||||
useEffect(() => {
|
||||
onChange(hasValidPassword);
|
||||
}, [hasValidPassword]);
|
||||
|
||||
return (
|
||||
<Stack className='mt-2' space={1}>
|
||||
<ValidationCheckmark
|
||||
isValid={meetsLengthRequirements}
|
||||
text={intl.formatMessage(messages.minimumCharacters)}
|
||||
/>
|
||||
|
||||
<ValidationCheckmark
|
||||
isValid={meetsCapitalLetterRequirements}
|
||||
text={intl.formatMessage(messages.capitalLetter)}
|
||||
/>
|
||||
|
||||
<ValidationCheckmark
|
||||
isValid={meetsLowercaseLetterRequirements}
|
||||
text={intl.formatMessage(messages.lowercaseLetter)}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PasswordIndicator;
|
|
@ -14,6 +14,8 @@ import ValidationCheckmark from 'soapbox/components/validation-checkmark';
|
|||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { getRedirectUrl } from 'soapbox/utils/redirect';
|
||||
|
||||
import PasswordIndicator from './components/password-indicator';
|
||||
|
||||
const messages = defineMessages({
|
||||
success: {
|
||||
id: 'registrations.success',
|
||||
|
@ -27,18 +29,6 @@ const messages = defineMessages({
|
|||
id: 'registrations.error',
|
||||
defaultMessage: 'Failed to register your account.',
|
||||
},
|
||||
minimumCharacters: {
|
||||
id: 'registration.validation.minimum_characters',
|
||||
defaultMessage: '8 characters',
|
||||
},
|
||||
capitalLetter: {
|
||||
id: 'registration.validation.capital_letter',
|
||||
defaultMessage: '1 capital letter',
|
||||
},
|
||||
lowercaseLetter: {
|
||||
id: 'registration.validation.lowercase_letter',
|
||||
defaultMessage: '1 lowercase letter',
|
||||
},
|
||||
});
|
||||
|
||||
const initialState = {
|
||||
|
@ -46,19 +36,6 @@ const initialState = {
|
|||
password: '',
|
||||
};
|
||||
|
||||
const hasUppercaseCharacter = (string: string) => {
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
if (string.charAt(i) === string.charAt(i).toUpperCase() && string.charAt(i).match(/[a-z]/i)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const hasLowercaseCharacter = (string: string) => {
|
||||
return string.toUpperCase() !== string;
|
||||
};
|
||||
|
||||
const Registration = () => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
@ -68,13 +45,9 @@ const Registration = () => {
|
|||
|
||||
const [state, setState] = React.useState(initialState);
|
||||
const [shouldRedirect, setShouldRedirect] = React.useState<boolean>(false);
|
||||
const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(false);
|
||||
const { username, password } = state;
|
||||
|
||||
const meetsLengthRequirements = React.useMemo(() => password.length >= 8, [password]);
|
||||
const meetsCapitalLetterRequirements = React.useMemo(() => hasUppercaseCharacter(password), [password]);
|
||||
const meetsLowercaseLetterRequirements = React.useMemo(() => hasLowercaseCharacter(password), [password]);
|
||||
const hasValidPassword = meetsLengthRequirements && meetsCapitalLetterRequirements && meetsLowercaseLetterRequirements;
|
||||
|
||||
const handleSubmit = React.useCallback((event) => {
|
||||
event.preventDefault();
|
||||
|
||||
|
@ -151,22 +124,7 @@ const Registration = () => {
|
|||
data-testid='password-input'
|
||||
/>
|
||||
|
||||
<Stack className='mt-2' space={1}>
|
||||
<ValidationCheckmark
|
||||
isValid={meetsLengthRequirements}
|
||||
text={intl.formatMessage(messages.minimumCharacters)}
|
||||
/>
|
||||
|
||||
<ValidationCheckmark
|
||||
isValid={meetsCapitalLetterRequirements}
|
||||
text={intl.formatMessage(messages.capitalLetter)}
|
||||
/>
|
||||
|
||||
<ValidationCheckmark
|
||||
isValid={meetsLowercaseLetterRequirements}
|
||||
text={intl.formatMessage(messages.lowercaseLetter)}
|
||||
/>
|
||||
</Stack>
|
||||
<PasswordIndicator password={password} onChange={setHasValidPassword} />
|
||||
</FormGroup>
|
||||
|
||||
<div className='text-center'>
|
||||
|
|
|
@ -380,6 +380,14 @@ const getInstanceFeatures = (instance: Instance) => {
|
|||
*/
|
||||
paginatedContext: v.software === TRUTHSOCIAL,
|
||||
|
||||
/**
|
||||
* Require minimum password requirements.
|
||||
* - 8 characters
|
||||
* - 1 uppercase
|
||||
* - 1 lowercase
|
||||
*/
|
||||
passwordRequirements: v.software === TRUTHSOCIAL,
|
||||
|
||||
/**
|
||||
* Displays a form to follow a user when logged out.
|
||||
* @see POST /main/ostatus
|
||||
|
|
Ładowanie…
Reference in New Issue