0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

refactor(ui): refine password input

This commit is contained in:
Gao Sun 2023-09-07 22:42:52 +08:00
parent f71763da25
commit b68a581789
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
6 changed files with 25 additions and 21 deletions

View file

@ -12,7 +12,7 @@ import * as styles from './index.module.scss';
type Props = {
title: TFuncKey;
description?: TFuncKey | ReactElement;
description?: TFuncKey | ReactElement | '';
titleProps?: Record<string, unknown>;
descriptionProps?: Record<string, unknown>;
notification?: TFuncKey;

View file

@ -10,6 +10,7 @@ type Props = {
onSubmit: (password: string) => void;
errorMessage?: string;
clearErrorMessage?: () => void;
maxLength?: number;
};
const SetPassword = (props: Props) => {

View file

@ -42,20 +42,20 @@ export const usePasswordPolicy = () => {
const requirementsDescription = useMemo(
() =>
t('description.password_requirements', {
items: condArray(
// There's no need to show the length requirement if it can be satisfied by the character types
policy.length.min > policy.characterTypes.min &&
t('description.password_requirement.length', { count: policy.length.min }),
// Show the character types requirement if:
// - It's greater than 1, or;
// - The length requirement is equal to or less than 1 (since the length requirement will be hidden in this case)
(policy.characterTypes.min > 1 || policy.length.min <= 1) &&
t('description.password_requirement.character_types', {
count: policy.characterTypes.min,
})
),
}),
policy.length.min <= 1 && policy.characterTypes.min <= 1
? undefined
: t('description.password_requirements', {
items: condArray(
// There's no need to show the length requirement if it can be satisfied by the character types
policy.length.min > policy.characterTypes.min &&
t('description.password_requirement.length', { count: policy.length.min }),
// Show the character types requirement if it's greater than 1.
policy.characterTypes.min > 1 &&
t('description.password_requirement.character_types', {
count: policy.characterTypes.min,
})
),
}),
[t, policy.length.min, policy.characterTypes.min]
);

View file

@ -44,7 +44,7 @@ const SetPassword = () => {
const {
policy: {
length: { min },
length: { min, max },
characterTypes: { min: count },
},
requirementsDescription,
@ -53,12 +53,13 @@ const SetPassword = () => {
return (
<SecondaryPageLayout
title="description.set_password"
description={<span>{requirementsDescription}</span>}
description={requirementsDescription && <span>{requirementsDescription}</span>}
descriptionProps={{ min, count }}
>
<SetPasswordForm
autoFocus
errorMessage={errorMessage}
maxLength={max}
clearErrorMessage={clearErrorMessage}
onSubmit={action}
/>

View file

@ -46,7 +46,7 @@ const RegisterPassword = () => {
const {
policy: {
length: { min },
length: { min, max },
characterTypes: { min: count },
},
requirementsDescription,
@ -59,12 +59,13 @@ const RegisterPassword = () => {
return (
<SecondaryPageLayout
title="description.new_password"
description={<span>{requirementsDescription}</span>}
description={requirementsDescription && <span>{requirementsDescription}</span>}
descriptionProps={{ min, count }}
>
<SetPassword
autoFocus
errorMessage={errorMessage}
maxLength={max}
clearErrorMessage={clearErrorMessage}
onSubmit={action}
/>

View file

@ -50,7 +50,7 @@ const ResetPassword = () => {
});
const {
policy: {
length: { min },
length: { min, max },
characterTypes: { min: count },
},
requirementsDescription,
@ -59,12 +59,13 @@ const ResetPassword = () => {
return (
<SecondaryPageLayout
title="description.new_password"
description={<span>{requirementsDescription}</span>}
description={requirementsDescription && <span>{requirementsDescription}</span>}
descriptionProps={{ min, count }}
>
<SetPassword
autoFocus
errorMessage={errorMessage}
maxLength={max}
clearErrorMessage={clearErrorMessage}
onSubmit={action}
/>