73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
|
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;
|