diff --git a/frontend/src/components/common/fields/fields.ts b/frontend/src/components/common/fields/fields.ts index f06366948..cef427f16 100644 --- a/frontend/src/components/common/fields/fields.ts +++ b/frontend/src/components/common/fields/fields.ts @@ -8,4 +8,5 @@ import type { ChangeEvent } from 'react' export interface CommonFieldProps { onChange: (event: ChangeEvent) => void value: string + hasError?: boolean } diff --git a/frontend/src/components/common/fields/new-password-field.tsx b/frontend/src/components/common/fields/new-password-field.tsx index d4563c713..92db18706 100644 --- a/frontend/src/components/common/fields/new-password-field.tsx +++ b/frontend/src/components/common/fields/new-password-field.tsx @@ -14,7 +14,7 @@ import { Trans, useTranslation } from 'react-i18next' * @param onChange Hook that is called when the entered password changes. * @param value The currently entered password. */ -export const NewPasswordField: React.FC = ({ onChange, value }) => { +export const NewPasswordField: React.FC = ({ onChange, value, hasError = false }) => { const { t } = useTranslation() const isValid = useMemo(() => { @@ -30,6 +30,7 @@ export const NewPasswordField: React.FC = ({ onChange, value } type='password' size='sm' isValid={isValid} + isInvalid={hasError} onChange={onChange} placeholder={t('login.auth.password') ?? undefined} className='bg-dark text-light' diff --git a/frontend/src/components/common/fields/password-again-field.tsx b/frontend/src/components/common/fields/password-again-field.tsx index 317ca858a..40202f752 100644 --- a/frontend/src/components/common/fields/password-again-field.tsx +++ b/frontend/src/components/common/fields/password-again-field.tsx @@ -19,16 +19,21 @@ interface PasswordAgainFieldProps extends CommonFieldProps { * @param value The currently entered retype of the password. * @param password The password entered into the password input field. */ -export const PasswordAgainField: React.FC = ({ onChange, value, password }) => { +export const PasswordAgainField: React.FC = ({ + onChange, + value, + password, + hasError = false +}) => { const { t } = useTranslation() const isInvalid = useMemo(() => { - return value !== '' && password !== value - }, [password, value]) + return value !== '' && password !== value && hasError + }, [password, value, hasError]) const isValid = useMemo(() => { - return password !== '' && password === value - }, [password, value]) + return password !== '' && password === value && !hasError + }, [password, value, hasError]) return ( diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx index 0c595049b..8c9c283f5 100644 --- a/frontend/src/pages/register.tsx +++ b/frontend/src/pages/register.tsx @@ -69,6 +69,10 @@ export const RegisterPage: NextPage = () => { ) }, [username, password, displayName, passwordAgain]) + const isWeakPassword = useMemo(() => { + return error === RegisterErrorType.PASSWORD_TOO_WEAK + }, [error]) + const onUsernameChange = useOnInputChange(setUsername) const onDisplayNameChange = useOnInputChange(setDisplayName) const onPasswordChange = useOnInputChange(setPassword) @@ -95,8 +99,13 @@ export const RegisterPage: NextPage = () => {
- - + +