Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

feat(ui): show password policy requirements and errors

Browse source
This commit is contained in:
Gao Sun 2023-09-05 00:04:55 +08:00
parent 1c0fe49be9
commit 7a6f5621c8
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
97 changed files with 1027 additions and 295 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.tsx
View file

@ -62,7 +62,7 @@ function PasswordPolicy({ isActive }: Props) {
getValues,
formState: { errors },
} = useFormContext<SignInExperienceForm>();
const { max } = getValues('passwordPolicy.length');
const max = getValues('passwordPolicy.length.max');
const { t } = useTranslation(undefined, {
keyPrefix: 'admin_console.sign_in_exp.password_policy',
});

3
packages/phrases-ui/src/locales/de/description.ts
View file

@ -62,6 +62,9 @@ const description = {
no_region_code_found: 'Kein Regionencode gefunden',
verify_email: 'Bestätige deine E-Mail-Adresse',
verify_phone: 'Bestätige deine Telefonnummer',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/de/error.ts → packages/phrases-ui/src/locales/de/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}} ist erforderlich',
general_invalid: 'Die {{types, list(type: disjunction;)}} is ungültig',
@ -18,6 +20,7 @@ const error = {
unknown: 'Unbekannter Fehler. Versuche es später noch einmal.',
invalid_session: 'Die Sitzung ist ungültig. Bitte melde dich erneut an.',
timeout: 'Zeitüberschreitung. Bitte melde dich erneut an.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/de/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/de/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const de = {
@ -15,6 +16,7 @@ const de = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/de/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/en/description.ts
View file

@ -59,6 +59,9 @@ const description = {
no_region_code_found: 'No region code found',
verify_email: 'Verify your email',
verify_phone: 'Verify your phone number',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.',
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.',
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/en/error.ts → packages/phrases-ui/src/locales/en/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: `{{types, list(type: disjunction;)}} is required`,
general_invalid: `The {{types, list(type: disjunction;)}} is invalid`,
@ -18,6 +20,7 @@ const error = {
unknown: 'Unknown error. Please try again later.',
invalid_session: 'Session not found. Please go back and sign in again.',
timeout: 'Request timeout. Please try again later.',
password_rejected,
};
export default Object.freeze(error);

19
packages/phrases-ui/src/locales/en/error/password-rejected.ts Normal file
View file

@ -0,0 +1,19 @@
import { type PasswordRejectionCode } from '@logto/core-kit';
const password_rejected = {
too_short: 'Minimum length is {{min}}.',
too_long: 'Maximum length is {{max}}.',
character_types: 'At least {{min}} types of characters are required.',
unsupported_characters: 'Unsupported character found.',
pwned: 'Avoid using simple passwords that are easy to guess.',
restricted_found: 'Avoid overusing {{list}}.',
'restricted.repetition': 'repeated characters',
'restricted.sequence': 'sequential characters',
'restricted.personal_info': 'your personal information',
'restricted.words': 'product context',
} satisfies Record<PasswordRejectionCode, string> & {
// Use for displaying a list of restricted issues
restricted_found: string;
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/en/index.ts
View file

@ -1,8 +1,9 @@
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const en = {
@ -13,6 +14,7 @@ const en = {
description,
error,
demo_app,
list,
},
};

7
packages/phrases-ui/src/locales/en/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ',
and: ' and ',
separator: ', ',
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/es/description.ts
View file

@ -60,6 +60,9 @@ const description = {
no_region_code_found: 'No se encontró código de región',
verify_email: 'Verificar su correo electrónico',
verify_phone: 'Verificar su número de teléfono',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/es/error.ts → packages/phrases-ui/src/locales/es/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: `{{types, list(type: disjunction;)}} es requerido`,
general_invalid: `El/La {{types, list(type: disjunction;)}} no es válido`,
@ -19,6 +21,7 @@ const error = {
unknown: 'Error desconocido. Por favor intente de nuevo más tarde.',
invalid_session: 'No se encontró la sesión. Por favor regrese e inicie sesión nuevamente.',
timeout: 'Tiempo de espera de solicitud agotado. Por favor intente de nuevo más tarde.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/es/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/es/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const es = {
@ -15,6 +16,7 @@ const es = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/es/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/fr/description.ts
View file

@ -62,6 +62,9 @@ const description = {
no_region_code_found: 'Aucun code de région trouvé',
verify_email: 'Vérifiez votre e-mail',
verify_phone: 'Vérifiez votre numéro de téléphone',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/fr/error.ts → packages/phrases-ui/src/locales/fr/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: 'Le {{types, list(type: disjunction;)}} est requis',
general_invalid: "Le {{types, list(type: disjunction;)}} n'est pas valide",
@ -20,6 +22,7 @@ const error = {
unknown: 'Erreur inconnue. Veuillez réessayer plus tard.',
invalid_session: 'Session non trouvée. Veuillez revenir en arrière et vous connecter à nouveau.',
timeout: "Délai d'attente de la requête dépassé. Veuillez réessayer plus tard.",
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/fr/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/fr/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const fr = {
@ -15,6 +16,7 @@ const fr = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/fr/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/it/description.ts
View file

@ -58,6 +58,9 @@ const description = {
no_region_code_found: 'Nessun codice di regione trovato',
verify_email: 'Verifica la tua email',
verify_phone: 'Verifica il tuo numero di telefono',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/it/error.ts → packages/phrases-ui/src/locales/it/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: `{{types, list(type: disjunction;)}} è richiesto`,
general_invalid: `Il {{types, list(type: disjunction;)}} non è valido`,
@ -18,6 +20,7 @@ const error = {
unknown: 'Errore sconosciuto. Si prega di riprovare più tardi.',
invalid_session: 'Sessione non trovata. Si prega di tornare indietro e accedere di nuovo.',
timeout: 'Timeout della richiesta. Si prega di riprovare più tardi.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/it/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/it/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const it = {
@ -15,6 +16,7 @@ const it = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/it/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/ja/description.ts
View file

@ -60,6 +60,9 @@ const description = {
no_region_code_found: '地域コードが見つかりません',
verify_email: 'Eメールを確認する',
verify_phone: '電話番号を確認する',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/ja/error.ts → packages/phrases-ui/src/locales/ja/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: `{{types, list(type: disjunction;)}}が必要です`,
general_invalid: `{{types, list(type: disjunction;)}}が無効です`,
@ -19,6 +21,7 @@ const error = {
unknown: '不明なエラーが発生しました。後でもう一度お試しください。',
invalid_session: 'セッションが見つかりません。もう一度サインインしてください。',
timeout: 'リクエストタイムアウト。後でもう一度お試しください。',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/ja/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/ja/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const ja = {
@ -15,6 +16,7 @@ const ja = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/ja/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/ko/description.ts
View file

@ -55,6 +55,9 @@ const description = {
no_region_code_found: '지역 코드를 찾을 수 없습니다.',
verify_email: '이메일 인증',
verify_phone: '휴대전화번호 인증',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/ko/error.ts → packages/phrases-ui/src/locales/ko/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}}은/는 필수예요.',
general_invalid: '{{types, list(type: disjunction;)}}은/는 유효하지 않아요.',
@ -17,6 +19,7 @@ const error = {
unknown: '알 수 없는 오류가 발생했어요. 잠시 후에 시도해 주세요.',
invalid_session: '세션을 찾을 수 없어요. 다시 로그인해 주세요.',
timeout: '요청 시간이 초과되었어요. 잠시 후에 다시 시도해 주세요.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/ko/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/ko/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const ko = {
@ -15,6 +16,7 @@ const ko = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/ko/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/pl-pl/description.ts
View file

@ -58,6 +58,9 @@ const description = {
no_region_code_found: 'Nie znaleziono kodu regionu',
verify_email: 'Potwierdź swój email',
verify_phone: 'Potwierdź swój numer telefonu',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/pl-pl/error.ts → packages/phrases-ui/src/locales/pl-pl/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: `{{types, list(type: disjunction;)}} jest wymagany`,
general_invalid: `{{types, list(type: disjunction;)}} jest nieprawidłowe`,
@ -19,6 +21,7 @@ const error = {
unknown: 'Nieznany błąd. Proszę spróbuj ponownie później.',
invalid_session: 'Sesja nie znaleziona. Proszę wróć i zaloguj się ponownie.',
timeout: 'Czas żądania upłynął. Proszę spróbuj ponownie później.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/pl-pl/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/pl-pl/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const pl_pl = {
@ -15,6 +16,7 @@ const pl_pl = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/pl-pl/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/pt-br/description.ts
View file

@ -57,6 +57,9 @@ const description = {
no_region_code_found: 'Não foi possível encontrar o código de região do seu telefone.',
verify_email: 'Verificar e-mail',
verify_phone: 'Verificar número de telefone',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/pt-br/error.ts → packages/phrases-ui/src/locales/pt-br/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}} é obrigatório',
general_invalid: 'O {{types, list(type: disjunction;)}} é inválido',
@ -18,6 +20,7 @@ const error = {
unknown: 'Erro desconhecido. Por favor, tente novamente mais tarde.',
invalid_session: 'Sessão não encontrada. Volte e faça login novamente.',
timeout: 'Tempo limite excedido. Por favor, tente novamente mais tarde.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/pt-br/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/pt-br/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const pt_br = {
@ -15,6 +16,7 @@ const pt_br = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/pt-br/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/pt-pt/description.ts
View file

@ -57,6 +57,9 @@ const description = {
no_region_code_found: 'Não foi possível encontrar o código de região do seu telefone.',
verify_email: 'Verifique o seu email',
verify_phone: 'Verifique o seu número de telefone',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/pt-pt/error.ts → packages/phrases-ui/src/locales/pt-pt/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}} is necessário',
general_invalid: 'O {{types, list(type: disjunction;)}} é inválido',
@ -19,6 +21,7 @@ const error = {
unknown: 'Erro desconhecido. Por favor, tente novamente mais tarde.',
invalid_session: 'Sessão não encontrada. Volte e faça login novamente.',
timeout: 'Tempo limite de sessão. Volte e faça login novamente.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/pt-pt/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/pt-pt/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const pt_pt = {
@ -15,6 +16,7 @@ const pt_pt = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/pt-pt/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/ru/description.ts
View file

@ -61,6 +61,9 @@ const description = {
no_region_code_found: 'Не удалось определить код региона',
verify_email: 'Подтвердите Ваш электронный адрес',
verify_phone: 'Подтвердите свой номер телефона',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/ru/error.ts → packages/phrases-ui/src/locales/ru/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: 'Введите {{types, list(type: disjunction;)}}',
general_invalid: 'Проверьте {{types, list(type: disjunction;)}}',
@ -19,6 +21,7 @@ const error = {
unknown: 'Неизвестная ошибка. Пожалуйста, повторите попытку позднее.',
invalid_session: 'Сессия не найдена. Пожалуйста, войдите снова.',
timeout: 'Время ожидания истекло. Пожалуйста, повторите попытку позднее.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/ru/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/ru/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const ru = {
@ -15,6 +16,7 @@ const ru = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/ru/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/tr-tr/description.ts
View file

@ -58,6 +58,9 @@ const description = {
no_region_code_found: 'Bölge kodu bulunamadı',
verify_email: 'E-postanızın doğrulanması',
verify_phone: 'Telefon numaranızın doğrulanması',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/tr-tr/error.ts → packages/phrases-ui/src/locales/tr-tr/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}} gerekli',
general_invalid: '{{types, list(type: disjunction;)}} geçersiz',
@ -18,6 +20,7 @@ const error = {
unknown: 'Bilinmeyen hata. Lütfen daha sonra tekrar deneyiniz.',
invalid_session: 'Oturum bulunamadı. Lütfen geri dönüp tekrar giriş yapınız.',
timeout: 'Oturum zaman aşımına uğradı. Lütfen geri dönüp tekrar giriş yapınız.',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/tr-tr/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/tr-tr/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const tr_tr = {
@ -15,6 +16,7 @@ const tr_tr = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/tr-tr/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/zh-cn/description.ts
View file

@ -51,6 +51,9 @@ const description = {
no_region_code_found: '没有找到区域码',
verify_email: '验证你的邮箱',
verify_phone: '验证你的手机号',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/zh-cn/error.ts → packages/phrases-ui/src/locales/zh-cn/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}}必填',
general_invalid: '无效的{{types, list(type: disjunction;)}}',
@ -17,6 +19,7 @@ const error = {
unknown: '未知错误，请稍后重试。',
invalid_session: '未找到会话，请返回并重新登录。',
timeout: '请求超时，请稍后重试。',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/zh-cn/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/zh-cn/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const zh_cn = {
@ -15,6 +16,7 @@ const zh_cn = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/zh-cn/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/zh-hk/description.ts
View file

@ -51,6 +51,9 @@ const description = {
no_region_code_found: '沒有找到區域碼',
verify_email: '驗證你的郵箱',
verify_phone: '驗證你的手機號',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/zh-hk/error.ts → packages/phrases-ui/src/locales/zh-hk/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}}必填',
general_invalid: '無效的{{types, list(type: disjunction;)}}',
@ -17,6 +19,7 @@ const error = {
unknown: '未知錯誤，請稍後重試。',
invalid_session: '未找到會話，請返回並重新登錄。',
timeout: '請求超時，請稍後重試。',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/zh-hk/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/zh-hk/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const zh_hk = {
@ -15,6 +16,7 @@ const zh_hk = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/zh-hk/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

3
packages/phrases-ui/src/locales/zh-tw/description.ts
View file

@ -51,6 +51,9 @@ const description = {
no_region_code_found: '沒有找到區域碼',
verify_email: '驗證你的郵箱',
verify_phone: '驗證你的手機號碼',
password_requirements_with_type_one: 'Password requires a minimum of {{min}} characters.', // UNTRANSLATED
password_requirements_with_type_other:
'Password requires a minimum of {{min}} characters, and contains {{count}} of the following: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and symbols.', // UNTRANSLATED
};
export default Object.freeze(description);

3
packages/phrases-ui/src/locales/zh-tw/error.ts → packages/phrases-ui/src/locales/zh-tw/error/index.ts
View file

@ -1,3 +1,5 @@
import password_rejected from './password-rejected.js';
const error = {
general_required: '{{types, list(type: disjunction;)}}必填',
general_invalid: '無效的{{types, list(type: disjunction;)}}',
@ -17,6 +19,7 @@ const error = {
unknown: '未知錯誤，請稍後重試。',
invalid_session: '未找到會話，請返回並重新登錄。',
timeout: '請求超時，請稍後重試。',
password_rejected,
};
export default Object.freeze(error);

14
packages/phrases-ui/src/locales/zh-tw/error/password-rejected.ts Normal file
View file

@ -0,0 +1,14 @@
const password_rejected = {
too_short: 'Minimum length is {{min}}.', // UNTRANSLATED
too_long: 'Maximum length is {{max}}.', // UNTRANSLATED
character_types: 'At least {{min}} types of characters are required.', // UNTRANSLATED
unsupported_characters: 'Unsupported character found.', // UNTRANSLATED
pwned: 'Avoid using simple passwords that are easy to guess.', // UNTRANSLATED
restricted_found: 'Avoid overusing {{list}}.', // UNTRANSLATED
'restricted.repetition': 'repeated characters', // UNTRANSLATED
'restricted.sequence': 'sequential characters', // UNTRANSLATED
'restricted.personal_info': 'your personal information', // UNTRANSLATED
'restricted.words': 'product context', // UNTRANSLATED
};
export default Object.freeze(password_rejected);

4
packages/phrases-ui/src/locales/zh-tw/index.ts
View file

@ -3,8 +3,9 @@ import type { LocalePhrase } from '../../types.js';
import action from './action.js';
import demo_app from './demo-app.js';
import description from './description.js';
import error from './error.js';
import error from './error/index.js';
import input from './input.js';
import list from './list.js';
import secondary from './secondary.js';
const zh_tw = {
@ -15,6 +16,7 @@ const zh_tw = {
description,
error,
demo_app,
list,
},
} satisfies LocalePhrase;

7
packages/phrases-ui/src/locales/zh-tw/list.ts Normal file
View file

@ -0,0 +1,7 @@
const list = {
or: ' or ', // UNTRANSLATED
and: ' and ', // UNTRANSLATED
separator: ', ', // UNTRANSLATED
};
export default Object.freeze(list);

4
packages/schemas/src/types/interactions.ts
View file

@ -1,4 +1,4 @@
import { emailRegEx, phoneRegEx, usernameRegEx, passwordRegEx } from '@logto/core-kit';
import { emailRegEx, phoneRegEx, usernameRegEx } from '@logto/core-kit';
import { z } from 'zod';
import { jsonObjectGuard } from '../foundations/index.js';
@ -91,7 +91,7 @@ export const profileGuard = z.object({
email: z.string().regex(emailRegEx).optional(),
phone: z.string().regex(phoneRegEx).optional(),
connectorId: z.string().optional(),
password: z.string().regex(passwordRegEx).optional(),
password: z.string().optional(),
});
export type Profile = z.infer<typeof profileGuard>;

10
packages/toolkit/core-kit/src/password-policy.test.ts
View file

@ -52,23 +52,23 @@ describe('PasswordPolicyChecker -> check()', () => {
expect(await checker.check('aaa', {})).toEqual([
{ code: 'password_rejected.too_short', interpolation: { min: 7 } },
{ code: 'password_rejected.character_types', interpolation: { min: 2 } },
{ code: 'password_rejected.repetition' },
{ code: 'password_rejected.restricted.repetition' },
]);
expect(await checker.check('123456', { phoneNumber: '12345' })).toEqual([
{ code: 'password_rejected.too_short', interpolation: { min: 7 } },
{ code: 'password_rejected.character_types', interpolation: { min: 2 } },
{ code: 'password_rejected.sequence' },
{ code: 'password_rejected.pwned' },
{ code: 'password_rejected.personal_info' },
{ code: 'password_rejected.restricted.sequence' },
{ code: 'password_rejected.restricted.personal_info' },
]);
expect(await checker.check('aaaaaatest😀', {})).toEqual([
{ code: 'password_rejected.too_long', interpolation: { max: 8 } },
{ code: 'password_rejected.unsupported_characters' },
{ code: 'password_rejected.repetition' },
{ code: 'password_rejected.restricted.repetition' },
{
code: 'password_rejected.restricted_words',
code: 'password_rejected.restricted.words',
interpolation: { words: 'test\naaaa', count: 2 },
},
]);

64
packages/toolkit/core-kit/src/password-policy.ts
View file

@ -65,15 +65,15 @@ export type PasswordRejectionCode =
| 'character_types'
| 'unsupported_characters'
| 'pwned'
| 'repetition'
| 'sequence'
| 'personal_info'
| 'restricted_words';
| 'restricted.repetition'
| 'restricted.sequence'
| 'restricted.personal_info'
| 'restricted.words';
/** A password issue that does not meet the policy. */
export type PasswordIssue = {
export type PasswordIssue<Code extends PasswordRejectionCode = PasswordRejectionCode> = {
/** Issue code. */
code: `password_rejected.${PasswordRejectionCode}`;
code: `password_rejected.${Code}`;
/** Interpolation data for the issue message. */
interpolation?: Record<string, unknown>;
};
@ -104,7 +104,7 @@ export type PersonalInfo = Partial<{
* // { code: 'password_rejected.too_short' },
* // { code: 'password_rejected.character_types', interpolation: { min: 2 } },
* // { code: 'password_rejected.pwned' },
* // { code: 'password_rejected.sequence' },
* // { code: 'password_rejected.restricted.sequence' },
* // ]
* ```
*/
@ -142,6 +142,29 @@ export class PasswordPolicyChecker {
});
}
if (this.policy.rejects.repetitionAndSequence) {
if (this.hasRepetition(password)) {
issues.push({
code: 'password_rejected.restricted.repetition',
});
}
if (this.hasSequentialChars(password)) {
issues.push({
code: 'password_rejected.restricted.sequence',
});
}
}
const words = this.hasWords(password);
if (words.length > 0) {
issues.push({
code: 'password_rejected.restricted.words',
interpolation: { words: words.join('\n'), count: words.length },
});
}
if (this.policy.rejects.personalInfo) {
if (!personalInfo) {
throw new TypeError('Personal information is required to check personal information.');
@ -149,7 +172,7 @@ export class PasswordPolicyChecker {
if (this.hasPersonalInfo(password, personalInfo)) {
issues.push({
code: 'password_rejected.personal_info',
code: 'password_rejected.restricted.personal_info',
});
}
}
@ -159,7 +182,7 @@ export class PasswordPolicyChecker {
/**
* Perform a fast check to see if the password passes the basic requirements.
* No pwned password and personal information check will be performed.
* Only the length and character types will be checked.
*
* This method is used for frontend validation.
*
@ -193,29 +216,6 @@ export class PasswordPolicyChecker {
});
}
if (this.policy.rejects.repetitionAndSequence) {
if (this.hasRepetition(password)) {
issues.push({
code: 'password_rejected.repetition',
});
}
if (this.hasSequentialChars(password)) {
issues.push({
code: 'password_rejected.sequence',
});
}
}
const words = this.hasWords(password);
if (words.length > 0) {
issues.push({
code: 'password_rejected.restricted_words',
interpolation: { words: words.join('\n'), count: words.length },
});
}
return issues;
}
/* eslint-enable @silverhand/fp/no-mutating-methods */

4
packages/ui/src/components/ErrorMessage/index.module.scss
View file

@ -3,4 +3,8 @@
.error {
font: var(--font-body-2);
color: var(--color-danger-default);
ul {
padding-inline-start: 1rem;
}
}

9
packages/ui/src/components/ErrorMessage/index.tsx
View file

@ -5,7 +5,14 @@ import { useTranslation } from 'react-i18next';
import * as styles from './index.module.scss';
type ErrorCode = TFuncKey<'translation', 'error'>;
type RemovePrefix<T extends string, Prefix extends T> = T extends `${Prefix}${string}` ? never : T;
/**
* All error codes that can be passed to ErrorMessage.
* Nested keys are removed since they will result in a non-string return value. They
* can be processed manually.
*/
type ErrorCode = RemovePrefix<TFuncKey<'translation', 'error'>, 'password_rejected'>;
export type ErrorType = ErrorCode | { code: ErrorCode; data?: Record<string, unknown> };

55
packages/ui/src/components/InputFields/InputField/index.tsx
View file

@ -28,25 +28,40 @@ const InputField = (
...props
}: Props,
reference: ForwardedRef<HTMLInputElement>
) => (
<div className={className}>
<div
className={classNames(
styles.inputField,
isDanger && styles.danger,
isSuffixFocusVisible && styles.isSuffixFocusVisible,
isSuffixVisible && styles.isSuffixVisible
)}
>
{prefix}
<input {...props} ref={reference} />
{suffix &&
cloneElement(suffix, {
className: classNames([suffix.props.className, styles.suffix]),
})}
</div>
{errorMessage && <ErrorMessage className={styles.errorMessage}>{errorMessage}</ErrorMessage>}
</div>
);
) => {
const errorMessages = errorMessage?.split('\n');
return (
<div className={className}>
<div
className={classNames(
styles.inputField,
isDanger && styles.danger,
isSuffixFocusVisible && styles.isSuffixFocusVisible,
isSuffixVisible && styles.isSuffixVisible
)}
>
{prefix}
<input {...props} ref={reference} />
{suffix &&
cloneElement(suffix, {
className: classNames([suffix.props.className, styles.suffix]),
})}
</div>
{errorMessages && (
<ErrorMessage className={styles.errorMessage}>
{errorMessages.length > 1 ? (
<ul>
{errorMessages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
) : (
errorMessages[0]
)}
</ErrorMessage>
)}
</div>
);
};
export default forwardRef(InputField);

8
packages/ui/src/containers/SetPassword/Lite.test.tsx
View file

@ -51,7 +51,9 @@ describe('<Lite />', () => {
});
await waitFor(() => {
expect(queryByText('error.password_min_length')).not.toBeNull();
expect(queryByText('error.password_rejected.too_short')).not.toBeNull();
expect(queryByText('error.password_rejected.character_types')).not.toBeNull();
expect(queryByText('error.password_rejected.sequence')).not.toBeNull();
});
expect(submit).not.toBeCalled();
@ -65,7 +67,9 @@ describe('<Lite />', () => {
});
await waitFor(() => {
expect(queryByText('error.password_min_length')).toBeNull();
expect(queryByText('error.password_rejected.too_short')).toBeNull();
expect(queryByText('error.password_rejected.character_types')).toBeNull();
expect(queryByText('error.password_rejected.sequence')).toBeNull();
});
});

13
packages/ui/src/containers/SetPassword/Lite.tsx
View file

@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import ErrorMessage from '@/components/ErrorMessage';
import { PasswordInputField } from '@/components/InputFields';
import { validatePassword } from '@/utils/form';
import * as styles from './index.module.scss';
@ -37,6 +36,7 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
useEffect(() => {
if (!isValid) {
console.log('!isValid');
clearErrorMessage?.();
}
}, [clearErrorMessage, isValid]);
@ -64,17 +64,6 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
aria-invalid={!!errors.newPassword}
{...register('newPassword', {
required: t('error.password_required'),
validate: (password) => {
const errorMessage = validatePassword(password);
if (errorMessage) {
return typeof errorMessage === 'string'
? t(`error.${errorMessage}`)
: t(`error.${errorMessage.code}`, errorMessage.data ?? {});
}
return true;
},
})}
/>

14
packages/ui/src/containers/SetPassword/SetPassword.test.tsx
View file

@ -54,7 +54,9 @@ describe('<SetPassword />', () => {
});
await waitFor(() => {
expect(queryByText('error.password_min_length')).not.toBeNull();
expect(queryByText('error.password_rejected.too_short')).not.toBeNull();
expect(queryByText('error.password_rejected.character_types')).not.toBeNull();
expect(queryByText('error.password_rejected.sequence')).not.toBeNull();
});
expect(submit).not.toBeCalled();
@ -68,7 +70,9 @@ describe('<SetPassword />', () => {
});
await waitFor(() => {
expect(queryByText('error.password_min_length')).toBeNull();
expect(queryByText('error.password_rejected.too_short')).toBeNull();
expect(queryByText('error.password_rejected.character_types')).toBeNull();
expect(queryByText('error.password_rejected.sequence')).toBeNull();
});
});
@ -86,7 +90,8 @@ describe('<SetPassword />', () => {
});
await waitFor(() => {
expect(queryByText('error.invalid_password')).not.toBeNull();
expect(queryByText('error.password_rejected.character_types')).not.toBeNull();
expect(queryByText('error.password_rejected.sequence')).not.toBeNull();
});
act(() => {
@ -98,7 +103,8 @@ describe('<SetPassword />', () => {
});
await waitFor(() => {
expect(queryByText('error.invalid_password')).toBeNull();
expect(queryByText('error.password_rejected.character_types')).toBeNull();
expect(queryByText('error.password_rejected.sequence')).toBeNull();
});
});

12
packages/ui/src/containers/SetPassword/SetPassword.tsx
View file

@ -8,7 +8,6 @@ import Button from '@/components/Button';
import IconButton from '@/components/Button/IconButton';
import ErrorMessage from '@/components/ErrorMessage';
import { InputField } from '@/components/InputFields';
import { validatePassword } from '@/utils/form';
import TogglePassword from './TogglePassword';
import * as styles from './index.module.scss';
@ -79,17 +78,6 @@ const SetPassword = ({
aria-invalid={!!errors.newPassword}
{...register('newPassword', {
required: t('error.password_required'),
validate: (password) => {
const errorMessage = validatePassword(password);
if (errorMessage) {
return typeof errorMessage === 'string'
? t(`error.${errorMessage}`)
: t(`error.${errorMessage.code}`, errorMessage.data ?? {});
}
return true;
},
})}
isSuffixFocusVisible={!!watch('newPassword')}
suffix={

57
packages/ui/src/hooks/use-list-translation.test.ts Normal file
View file

@ -0,0 +1,57 @@
import useListTranslation from './use-list-translation';
describe('useListTranslation (en)', () => {
const translateList = useListTranslation();
it('returns undefined for an empty list', () => {
expect(translateList([])).toBeUndefined();
});
it('returns the first item for a list of one item', () => {
expect(translateList(['a'])).toBe('a');
});
it('returns the list with "or" for a list of two items', () => {
expect(translateList(['a', 'b'])).toBe('a or b');
});
it('returns the list with the Oxford comma for a list of three items', () => {
expect(translateList(['a', 'b', 'c'])).toBe('a, b, or c');
});
it('returns the list with the specified joint', () => {
expect(translateList(['a', 'b', 'c'], 'and')).toBe('a, b, and c');
});
});
describe('useListTranslation (zh)', () => {
const translateList = useListTranslation();
it('returns undefined for an empty list', () => {
expect(translateList([])).toBeUndefined();
});
it('returns the first item for a list of one item', () => {
expect(translateList(['苹果'])).toBe('苹果');
});
it('returns the list with "或" for a list of two items', () => {
expect(translateList(['苹果', '橘子'])).toBe('苹果或橘子');
});
it('returns the list with the AP style for a list of three items', () => {
expect(translateList(['苹果', '橘子', '香蕉'])).toBe('苹果、橘子或香蕉');
});
it('returns the list with the specified joint', () => {
expect(translateList(['苹果', '橘子', '香蕉'], 'and')).toBe('苹果、橘子和香蕉');
});
it('adds a space between CJK and non-CJK characters', () => {
expect(translateList(['苹果', '橘子', 'banana'])).toBe('苹果、橘子或 banana');
expect(translateList(['苹果', '橘子', 'banana'], 'and')).toBe('苹果、橘子和 banana');
expect(translateList(['banana', '苹果', '橘子'])).toBe('banana、苹果或橘子');
expect(translateList(['苹果', 'banana', '橘子'])).toBe('苹果、banana 或橘子');
expect(translateList(['苹果', 'banana', 'orange'])).toBe('苹果、banana 或 orange');
});
});

76
packages/ui/src/hooks/use-list-translation.ts Normal file
View file

@ -0,0 +1,76 @@
import { conditionalArray } from '@silverhand/essentials';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
/**
* Returns whether the given character is a CJK character.
*
* @see https://stackoverflow.com/questions/43418812
*/
const isCjk = (char?: string) =>
Boolean(
char?.[0] && /[\u3040-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF\uFF66-\uFF9F]/.test(char[0])
);
/**
* Returns a function that translates a list of strings into a human-readable list. If the list
* is empty, `undefined` is returned.
*
* For non-CJK languages, the list is translated with the Oxford comma. For CJK languages, the
* list is translated with the AP style.
*
* CAUTION: This function may not be suitable for translating lists of non-English strings if the
* target language does not have the same rules for list translation as English.
*
* @example
* ```ts
* const translateList = useListTranslation();
*
* // en
* translateList([]); // undefined
* translateList(['a']); // 'a'
* translateList(['a', 'b']); // 'a and b'
* translateList(['a', 'b', 'c']); // 'a, b, or c'
* translateList(['a', 'b', 'c'], 'and'); // 'a, b, and c'
*
* // zh
* translateList(['a', 'b']); // 'a 或 b'
* translateList(['苹果', '橘子', '香蕉']); // '苹果、橘子或香蕉'
* translateList(['苹果', '橘子', 'banana']); // '苹果、橘子或 banana'
* ```
*/
const useListTranslation = () => {
const { t } = useTranslation();
return useCallback(
(list: string[], joint: 'or' | 'and' = 'or') => {
if (list.length === 0) {
return;
}
if (list.length === 1) {
return list[0];
}
const prefix = list.slice(0, -1).join(t('list.separator'));
const suffix = list.at(-1)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- `list` is not empty
const jointT = t(`list.${joint}`);
if (!isCjk(jointT)) {
// Oxford comma
return `${prefix}${t(`list.separator`)}${jointT}${suffix}`;
}
return conditionalArray(
prefix,
isCjk(prefix.at(-1)) && ' ',
jointT,
isCjk(suffix[0]) && ' ',
suffix
).join('');
},
[t]
);
};
export default useListTranslation;

80
packages/ui/src/hooks/use-password-action.ts Normal file
View file

@ -0,0 +1,80 @@
import { type RequestErrorBody } from '@logto/schemas';
import { useCallback } from 'react';
import useApi from '@/hooks/use-api';
import useErrorHandler, { type ErrorHandlers } from './use-error-handler';
import usePasswordErrorMessage from './use-password-error-message';
import { usePasswordPolicy } from './use-sie';
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the type of the api, use `any` to avoid type error
export type PasswordAction<Response> = (...args: any[]) => Promise<Response>;
export type SuccessHandler<F> = F extends PasswordAction<infer Response>
? (result?: Response) => void
: never;
type UsePasswordApiInit<Response> = {
api: PasswordAction<Response>;
setErrorMessage: (message?: string) => void;
errorHandlers: ErrorHandlers;
successHandler: SuccessHandler<PasswordAction<Response>>;
};
const usePasswordAction = <Response>({
api,
errorHandlers,
setErrorMessage,
successHandler,
}: UsePasswordApiInit<Response>) => {
const asyncAction = useApi(api);
const handleError = useErrorHandler();
const { getErrorMessage, getErrorMessageFromBody } = usePasswordErrorMessage();
const { policyChecker } = usePasswordPolicy();
const passwordRejectionHandler = useCallback(
(error: RequestErrorBody) => {
setErrorMessage(getErrorMessageFromBody(error));
},
[getErrorMessageFromBody, setErrorMessage]
);
const action = useCallback(
async (password: string) => {
// Perform fast check before sending request
const fastCheckErrorMessage = getErrorMessage(policyChecker.fastCheck(password));
if (fastCheckErrorMessage) {
setErrorMessage(fastCheckErrorMessage);
return;
}
const [error, result] = await asyncAction(password);
if (error) {
await handleError(error, {
'password.rejected': passwordRejectionHandler,
...errorHandlers,
});
return;
}
successHandler(result);
},
[
asyncAction,
errorHandlers,
getErrorMessage,
handleError,
passwordRejectionHandler,
policyChecker,
setErrorMessage,
successHandler,
]
);
return {
action,
};
};
export default usePasswordAction;

78
packages/ui/src/hooks/use-password-error-message.ts Normal file
View file

@ -0,0 +1,78 @@
import { type PasswordRejectionCode, type PasswordIssue } from '@logto/core-kit';
import { type RequestErrorBody } from '@logto/schemas';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import useListTranslation from '@/hooks/use-list-translation';
/**
* Return an object with two functions for getting the error message from an array of {@link PasswordIssue} or a {@link RequestErrorBody}.
*/
const usePasswordErrorMessage = () => {
const { t } = useTranslation();
const translateList = useListTranslation();
const getErrorMessage = useCallback(
(issues: PasswordIssue[]) => {
// Errors that should be displayed first and alone
const singleDisplayError = (
[
'unsupported_characters',
'too_short',
'character_types',
'too_long',
'pwned',
] satisfies PasswordRejectionCode[]
)
.map((code) => issues.find((issue) => issue.code === `password_rejected.${code}`))
.find(Boolean);
if (singleDisplayError) {
return t(`error.${singleDisplayError.code}`, singleDisplayError.interpolation ?? {});
}
// The `restricted` errors should be displayed together
const restrictedErrors = issues
.filter((issue): issue is PasswordIssue<`restricted.${string}` & PasswordRejectionCode> =>
issue.code.startsWith('password_rejected.restricted.')
)
.map((issue) => t(`error.${issue.code}`));
if (restrictedErrors.length > 0) {
return t('error.password_rejected.restricted_found', {
list: translateList(restrictedErrors),
});
}
},
[translateList, t]
);
const getErrorMessageFromBody = useCallback(
(error: RequestErrorBody) => {
if (error.code === 'password.rejected') {
// eslint-disable-next-line no-restricted-syntax -- trust the type from the server if the code matches
return getErrorMessage(error.data as PasswordIssue[]) ?? error.message;
}
},
[getErrorMessage]
);
return {
/**
* Get the error message from an array of {@link PasswordIssue}.
* If the array is empty or the error is not recognized, `undefined` is returned.
*/
getErrorMessage,
/**
* Get the error message from a {@link RequestErrorBody}.
*
* First, it will check if the error code is `password.rejected`:
* - If so, it will assume `error.data` is an array of {@link PasswordIssue}, then it will call
* {@link getErrorMessage} with the array;
* - If the result is `undefined`, it will directly return the error message from the body.
* - Otherwise, it will return `undefined`.
*/
getErrorMessageFromBody,
};
};
export default usePasswordErrorMessage;

19
packages/ui/src/hooks/use-sie.ts
View file

@ -1,5 +1,7 @@
import { PasswordPolicyChecker, passwordPolicyGuard } from '@logto/core-kit';
import { SignInIdentifier } from '@logto/schemas';
import { useContext } from 'react';
import { useContext, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import PageContext from '@/Providers/PageContextProvider/PageContext';
import { type VerificationCodeIdentifier } from '@/types';
@ -28,6 +30,21 @@ export const useSignInExperience = () => {
return experienceSettings;
};
export const usePasswordPolicy = () => {
const { t } = useTranslation();
const { experienceSettings } = useContext(PageContext);
const policy = useMemo(
() => passwordPolicyGuard.parse(experienceSettings?.passwordPolicy ?? {}),
[experienceSettings]
);
const policyChecker = useMemo(() => new PasswordPolicyChecker(policy), [policy]);
return {
policy,
policyChecker,
};
};
export const useForgotPasswordSettings = () => {
const { experienceSettings } = useContext(PageContext);
const { forgotPassword } = experienceSettings ?? {};

63
packages/ui/src/pages/Continue/SetPassword/index.tsx
View file

@ -1,19 +1,66 @@
import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
import SetPasswordForm from '@/containers/SetPassword';
import { passwordMinLength } from '@/utils/form';
import { useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import useSetPassword from './use-set-password';
import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
import { addProfile } from '@/apis/interaction';
import SetPasswordForm from '@/containers/SetPassword';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import type { ErrorHandlers } from '@/hooks/use-error-handler';
import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
import useRequiredProfileErrorHandler from '@/hooks/use-required-profile-error-handler';
import { usePasswordPolicy } from '@/hooks/use-sie';
const SetPassword = () => {
const { setPassword } = useSetPassword();
const [errorMessage, setErrorMessage] = useState<string>();
const clearErrorMessage = useCallback(() => {
setErrorMessage(undefined);
}, []);
const navigate = useNavigate();
const { show } = useConfirmModal();
const requiredProfileErrorHandler = useRequiredProfileErrorHandler();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'user.password_exists_in_profile': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
...requiredProfileErrorHandler,
}),
[navigate, requiredProfileErrorHandler, show]
);
const successHandler: SuccessHandler<typeof addProfile> = useCallback((result) => {
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
}, []);
const { action } = usePasswordAction({
api: addProfile,
setErrorMessage,
errorHandlers,
successHandler,
});
const {
policy: {
length: { min },
characterTypes: { min: count },
},
} = usePasswordPolicy();
return (
<SecondaryPageLayout
title="description.set_password"
description="error.invalid_password"
descriptionProps={{ min: passwordMinLength }}
description="description.password_requirements_with_type"
descriptionProps={{ min, count }}
>
<SetPasswordForm autoFocus onSubmit={setPassword} />
<SetPasswordForm
autoFocus
errorMessage={errorMessage}
clearErrorMessage={clearErrorMessage}
onSubmit={action}
/>
</SecondaryPageLayout>
);
};

53
packages/ui/src/pages/Continue/SetPassword/use-set-password.ts
View file

@ -1,53 +0,0 @@
import { useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { addProfile } from '@/apis/interaction';
import useApi from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import useErrorHandler from '@/hooks/use-error-handler';
import type { ErrorHandlers } from '@/hooks/use-error-handler';
import useRequiredProfileErrorHandler from '@/hooks/use-required-profile-error-handler';
const useSetPassword = () => {
const navigate = useNavigate();
const { show } = useConfirmModal();
const handleError = useErrorHandler();
const asyncAddProfile = useApi(addProfile);
const requiredProfileErrorHandler = useRequiredProfileErrorHandler();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'user.password_exists_in_profile': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
...requiredProfileErrorHandler,
}),
[navigate, requiredProfileErrorHandler, show]
);
const setPassword = useCallback(
async (password: string) => {
const [error, result] = await asyncAddProfile({ password });
if (error) {
await handleError(error, errorHandlers);
return;
}
if (result?.redirectTo) {
window.location.replace(result.redirectTo);
}
},
[asyncAddProfile, errorHandlers, handleError]
);
return {
setPassword,
};
};
export default useSetPassword;

58
packages/ui/src/pages/RegisterPassword/index.tsx
View file

@ -1,17 +1,55 @@
import { SignInIdentifier } from '@logto/schemas';
import { useCallback, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
import { setUserPassword } from '@/apis/interaction';
import SetPassword from '@/containers/SetPassword';
import { useSieMethods } from '@/hooks/use-sie';
import { passwordMinLength } from '@/utils/form';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import { type ErrorHandlers } from '@/hooks/use-error-handler';
import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
import { usePasswordPolicy, useSieMethods } from '@/hooks/use-sie';
import ErrorPage from '../ErrorPage';
import useUsernamePasswordRegister from './use-username-password-register';
const RegisterPassword = () => {
const { signUpMethods } = useSieMethods();
const setPassword = useUsernamePasswordRegister();
const navigate = useNavigate();
const { show } = useConfirmModal();
const [errorMessage, setErrorMessage] = useState<string>();
const clearErrorMessage = useCallback(() => {
setErrorMessage(undefined);
}, []);
const errorHandlers: ErrorHandlers = useMemo(
() => ({
// Incase previous page submitted username has been taken
'user.username_already_in_use': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
}),
[navigate, show]
);
const successHandler: SuccessHandler<typeof setUserPassword> = useCallback((result) => {
if (result && 'redirectTo' in result) {
window.location.replace(result.redirectTo);
}
}, []);
const { action } = usePasswordAction({
api: setUserPassword,
setErrorMessage,
errorHandlers,
successHandler,
});
const {
policy: {
length: { min },
characterTypes: { min: count },
},
} = usePasswordPolicy();
if (!signUpMethods.includes(SignInIdentifier.Username)) {
return <ErrorPage />;
@ -20,14 +58,14 @@ const RegisterPassword = () => {
return (
<SecondaryPageLayout
title="description.new_password"
description="error.invalid_password"
descriptionProps={{ min: passwordMinLength }}
description="description.password_requirements_with_type"
descriptionProps={{ min, count }}
>
<SetPassword
autoFocus
onSubmit={(password) => {
void setPassword(password);
}}
errorMessage={errorMessage}
clearErrorMessage={clearErrorMessage}
onSubmit={action}
/>
</SecondaryPageLayout>
);

44
packages/ui/src/pages/RegisterPassword/use-username-password-register.ts
View file

@ -1,44 +0,0 @@
import { useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { setUserPassword } from '@/apis/interaction';
import useApi from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import useErrorHandler from '@/hooks/use-error-handler';
import type { ErrorHandlers } from '@/hooks/use-error-handler';
const useUsernamePasswordRegister = () => {
const navigate = useNavigate();
const { show } = useConfirmModal();
const handleError = useErrorHandler();
const asyncSetPassword = useApi(setUserPassword);
const errorHandlers: ErrorHandlers = useMemo(
() => ({
// Incase previous page submitted username has been taken
'user.username_already_in_use': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-1);
},
}),
[navigate, show]
);
return useCallback(
async (password: string) => {
const [error, result] = await asyncSetPassword(password);
if (error) {
await handleError(error, errorHandlers);
}
if (result && 'redirectTo' in result) {
window.location.replace(result.redirectTo);
}
},
[asyncSetPassword, errorHandlers, handleError]
);
};
export default useUsernamePasswordRegister;

64
packages/ui/src/pages/ResetPassword/index.tsx
View file

@ -1,23 +1,71 @@
import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
import SetPassword from '@/containers/SetPassword';
import { passwordMinLength } from '@/utils/form';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import useResetPassword from './use-reset-password';
import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
import { setUserPassword } from '@/apis/interaction';
import SetPassword from '@/containers/SetPassword';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import { type ErrorHandlers } from '@/hooks/use-error-handler';
import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
import { usePasswordPolicy } from '@/hooks/use-sie';
import useToast from '@/hooks/use-toast';
const ResetPassword = () => {
const { resetPassword, errorMessage, clearErrorMessage } = useResetPassword();
const [errorMessage, setErrorMessage] = useState<string>();
const clearErrorMessage = useCallback(() => {
setErrorMessage(undefined);
}, []);
const { t } = useTranslation();
const { setToast } = useToast();
const navigate = useNavigate();
const { show } = useConfirmModal();
const errorHandlers: ErrorHandlers = useMemo(
() => ({
'session.verification_session_not_found': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-2);
},
'user.same_password': (error) => {
setErrorMessage(error.message);
},
}),
[navigate, setErrorMessage, show]
);
const successHandler: SuccessHandler<typeof setUserPassword> = useCallback(
(result) => {
if (result) {
setToast(t('description.password_changed'));
navigate('/sign-in', { replace: true });
}
},
[navigate, setToast, t]
);
const { action } = usePasswordAction({
api: setUserPassword,
setErrorMessage,
errorHandlers,
successHandler,
});
const {
policy: {
length: { min },
characterTypes: { min: count },
},
} = usePasswordPolicy();
return (
<SecondaryPageLayout
title="description.new_password"
description="error.invalid_password"
descriptionProps={{ min: passwordMinLength }}
description="description.password_requirements_with_type"
descriptionProps={{ min, count }}
>
<SetPassword
autoFocus
errorMessage={errorMessage}
clearErrorMessage={clearErrorMessage}
onSubmit={resetPassword}
onSubmit={action}
/>
</SecondaryPageLayout>
);

65
packages/ui/src/pages/ResetPassword/use-reset-password.ts
View file

@ -1,65 +0,0 @@
import { useMemo, useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { setUserPassword } from '@/apis/interaction';
import useApi from '@/hooks/use-api';
import { useConfirmModal } from '@/hooks/use-confirm-modal';
import useErrorHandler from '@/hooks/use-error-handler';
import type { ErrorHandlers } from '@/hooks/use-error-handler';
import useToast from '@/hooks/use-toast';
const useResetPassword = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { setToast } = useToast();
const { show } = useConfirmModal();
const [errorMessage, setErrorMessage] = useState<string>();
const handleError = useErrorHandler();
const asyncResetPassword = useApi(setUserPassword);
const clearErrorMessage = useCallback(() => {
// eslint-disable-next-line unicorn/no-useless-undefined
setErrorMessage(undefined);
}, []);
const resetPasswordErrorHandlers: ErrorHandlers = useMemo(
() => ({
'session.verification_session_not_found': async (error) => {
await show({ type: 'alert', ModalContent: error.message, cancelText: 'action.got_it' });
navigate(-2);
},
'user.same_password': (error) => {
setErrorMessage(error.message);
},
}),
[navigate, setErrorMessage, show]
);
const resetPassword = useCallback(
async (password: string) => {
const [error, result] = await asyncResetPassword(password);
if (error) {
await handleError(error, resetPasswordErrorHandlers);
return;
}
if (result) {
setToast(t('description.password_changed'));
navigate('/sign-in', { replace: true });
}
},
[asyncResetPassword, handleError, navigate, resetPasswordErrorHandlers, setToast, t]
);
return {
resetPassword,
errorMessage,
clearErrorMessage,
};
};
export default useResetPassword;