feat: show max password length in complexity components (#7810)

# Which Problems Are Solved There is confusing ambiguity in the error messages for setting too long passwords in different places. # How the Problems Are Solved A check for maximum password length is added so it's clear that passwords can't exceed a maximum length of 70 or 72 bytes. Password validation now provides a live updating check mark or cross mark to indicate if the maximum length requirement is met. # Additional Changes Clarified requirement descriptions on the registration page with complete sentences. # Additional Context Closes #6301 --------- Co-authored-by: Elio Bischof <elio@zitadel.com>
2025-08-12 01:37:31 +00:00 · 2024-05-23 04:07:36 -04:00
parent f5e9d4f57f
commit cfa3d013a4
31 changed files with 223 additions and 133 deletions
--- a/internal/api/ui/login/static/i18n/bg.yaml
+++ b/internal/api/ui/login/static/i18n/bg.yaml
@@ -27,19 +27,22 @@ SelectAccount:
  SessionState0: активен
  SessionState1: Не сте в профила си
  MustBeMemberOfOrg: 'Потребителят трябва да е член на {{.OrgName}} организация.'
+  
 Password:
  Title: Парола
-  Description: Въведете вашите данни за вход.
+  Description: Въведете данните си за вход.
  PasswordLabel: Парола
-  MinLength: Минимална дължина
-  HasUppercase: Главна буква
-  HasLowercase: Малка буква
-  HasNumber: Номер
-  HasSymbol: Символ
-  Confirmation: Съвпадение за потвърждение
-  ResetLinkText: нулиране на парола
-  BackButtonText: обратно
-  NextButtonText: следващия
+  MinLength: Трябва да е поне
+  MinLengthp2: символа дълга.
+  MaxLength: Трябва да е по-малко от 70 символа.
+  HasUppercase: Трябва да включва главна буква.
+  HasLowercase: Трябва да включва малка буква.
+  HasNumber: Трябва да включва число.
+  HasSymbol: Трябва да включва символ.
+  Confirmation: Потвърждението на паролата съвпада.
+  ResetLinkText: Нулиране на паролата
+  BackButtonText: Назад
+  NextButtonText: Напред
 UsernameChange:
  Title: Промяна на потребителското име
  Description: Задайте новото си потребителско име
--- a/internal/api/ui/login/static/i18n/cs.yaml
+++ b/internal/api/ui/login/static/i18n/cs.yaml
@@ -32,12 +32,14 @@ Password:
  Title: Heslo
  Description: Zadejte své přihlašovací údaje.
  PasswordLabel: Heslo
-  MinLength: Minimální délka
-  HasUppercase: Velké písmeno
-  HasLowercase: Malé písmeno
-  HasNumber: Číslo
-  HasSymbol: Symbol
-  Confirmation: Potvrzení shody
+  MinLength: Musí být alespoň
+  MinLengthp2: znaků dlouhé.
+  MaxLength: Musí být kratší než 70 znaků.
+  HasUppercase: Musí obsahovat velké písmeno.
+  HasLowercase: Musí obsahovat malé písmeno.
+  HasNumber: Musí obsahovat číslo.
+  HasSymbol: Musí obsahovat symbol.
+  Confirmation: Potvrzení hesla odpovídá.
  ResetLinkText: Obnovit heslo
  BackButtonText: Zpět
  NextButtonText: Další
--- a/internal/api/ui/login/static/i18n/de.yaml
+++ b/internal/api/ui/login/static/i18n/de.yaml
@@ -29,15 +29,17 @@ SelectAccount:
  MustBeMemberOfOrg: Der Benutzer muss der Organisation {{.OrgName}} angehören.

 Password:
-  Title: Willkommen zurück!
-  Description: Gib deine Benutzerdaten ein.
+  Title: Passwort
+  Description: Geben Sie Ihre Anmeldedaten ein.
  PasswordLabel: Passwort
-  MinLength: Mindestlänge
-  HasUppercase: Großbuchstaben
-  HasLowercase: Kleinbuchstaben
-  HasNumber: Nummer
-  HasSymbol: Symbol
-  Confirmation: Wiederholung stimmt überein
+  MinLength: Muss mindestens
+  MinLengthp2: Zeichen lang sein.
+  MaxLength: Muss weniger als 70 Zeichen lang sein.
+  HasUppercase: Muss einen Großbuchstaben enthalten.
+  HasLowercase: Muss einen Kleinbuchstaben enthalten.
+  HasNumber: Muss eine Zahl enthalten.
+  HasSymbol: Muss ein Symbol enthalten.
+  Confirmation: Passwortbestätigung stimmt überein.
  ResetLinkText: Passwort zurücksetzen
  BackButtonText: Zurück
  NextButtonText: Weiter
--- a/internal/api/ui/login/static/i18n/en.yaml
+++ b/internal/api/ui/login/static/i18n/en.yaml
@@ -32,12 +32,14 @@ Password:
  Title: Password
  Description: Enter your login data.
  PasswordLabel: Password
-  MinLength: Minimum length
-  HasUppercase: Uppercase letter
-  HasLowercase: Lowercase letter
-  HasNumber: Number
-  HasSymbol: Symbol
-  Confirmation: Confirmation match
+  MinLength: Must be at least
+  MinLengthp2: characters long.
+  MaxLength: Must be less than 70 characters long.
+  HasUppercase: Must include an uppercase letter.
+  HasLowercase: Must include a lowercase letter.
+  HasNumber: Must include a number.
+  HasSymbol: Must include a symbol.
+  Confirmation: Password confirmation matched.
  ResetLinkText: Reset Password
  BackButtonText: Back
  NextButtonText: Next
--- a/internal/api/ui/login/static/i18n/es.yaml
+++ b/internal/api/ui/login/static/i18n/es.yaml
@@ -30,17 +30,19 @@ SelectAccount:

 Password:
  Title: Contraseña
-  Description: Introduce tus datos de inicio de sesión.
+  Description: Introduce tus datos de acceso.
  PasswordLabel: Contraseña
-  MinLength: Longitud mínima
-  HasUppercase: Una letra mayúscula
-  HasLowercase: Una letra minúscula
-  HasNumber: Número
-  HasSymbol: Símbolo
-  Confirmation: Las contraseñas coinciden
-  ResetLinkText: restablecer contraseña
-  BackButtonText: atrás
-  NextButtonText: siguiente
+  MinLength: Debe tener al menos
+  MinLengthp2: caracteres de longitud.
+  MaxLength: Debe tener menos de 70 caracteres de longitud.
+  HasUppercase: Debe incluir una letra mayúscula.
+  HasLowercase: Debe incluir una letra minúscula.
+  HasNumber: Debe incluir un número.
+  HasSymbol: Debe incluir un símbolo.
+  Confirmation: La confirmación de la contraseña coincide.
+  ResetLinkText: Restablecer contraseña
+  BackButtonText: Atrás
+  NextButtonText: Siguiente

 UsernameChange:
  Title: Cambiar nombre de usuario
--- a/internal/api/ui/login/static/i18n/fr.yaml
+++ b/internal/api/ui/login/static/i18n/fr.yaml
@@ -32,12 +32,14 @@ Password:
  Title: Mot de passe
  Description: Entrez vos identifiants.
  PasswordLabel: Mot de passe
-  MinLength: Longueur minimale
-  HasUppercase: Lettre majuscule
-  HasLowercase: Lettre minuscule
-  HasNumber: Numéro
-  HasSymbol: Symbole
-  Confirmation: Les mots de passe sont identiques
+  MinLength: Doit contenir au moins
+  MinLengthp2: caractères.
+  MaxLength: Doit contenir moins de 70 caractères.
+  HasUppercase: Doit inclure une lettre majuscule.
+  HasLowercase: Doit inclure une lettre minuscule.
+  HasNumber: Doit inclure un chiffre.
+  HasSymbol: Doit inclure un symbole.
+  Confirmation: La confirmation du mot de passe correspond.
  ResetLinkText: Réinitialiser le mot de passe
  BackButtonText: Retour
  NextButtonText: Suivant
--- a/internal/api/ui/login/static/i18n/it.yaml
+++ b/internal/api/ui/login/static/i18n/it.yaml
@@ -32,14 +32,16 @@ Password:
  Title: Password
  Description: Inserisci i tuoi dati di accesso.
  PasswordLabel: Password
-  MinLength: Lunghezza minima
-  HasUppercase: Lettera maiuscola
-  HasLowercase: Lettera minuscola
-  HasNumber: Numero
-  HasSymbol: Simbolo
-  Confirmation: Conferma password
-  ResetLinkText: Password dimenticata?
-  BackButtonText: indietro
+  MinLength: Deve contenere almeno
+  MinLengthp2: caratteri.
+  MaxLength: Deve contenere meno di 70 caratteri.
+  HasUppercase: Deve includere una lettera maiuscola.
+  HasLowercase: Deve includere una lettera minuscola.
+  HasNumber: Deve includere un numero.
+  HasSymbol: Deve includere un simbolo.
+  Confirmation: La conferma della password corrisponde.
+  ResetLinkText: Reimposta password
+  BackButtonText: Indietro
  NextButtonText: Avanti

 UsernameChange:
--- a/internal/api/ui/login/static/i18n/ja.yaml
+++ b/internal/api/ui/login/static/i18n/ja.yaml
@@ -22,16 +22,18 @@ SelectAccount:
  MustBeMemberOfOrg: ユーザーは組織 {{.OrgName}} のメンバーである必要があります。

 Password:
-  Title: パスワードの入力
-  Description: ログインデータを入力します。
+  Title: パスワード
+  Description: ログインデータを入力してください。
  PasswordLabel: パスワード
-  MinLength: 文字列の長さ
-  HasUppercase: 大文字
-  HasLowercase: 小文字
-  HasNumber: 数字
-  HasSymbol: シンボル
-  Confirmation: パスワードの確認
-  ResetLinkText: パスワードを再設定する
+  MinLength: 少なくとも
+  MinLengthp2: 文字でなければなりません。
+  MaxLength: 70文字以下でなければなりません。
+  HasUppercase: 大文字を含む必要があります。
+  HasLowercase: 小文字を含む必要があります。
+  HasNumber: 数字を含む必要があります。
+  HasSymbol: 記号を含む必要があります。
+  Confirmation: パスワードの確認が一致しました。
+  ResetLinkText: パスワードをリセット
  BackButtonText: 戻る
  NextButtonText: 次へ

--- a/internal/api/ui/login/static/i18n/mk.yaml
+++ b/internal/api/ui/login/static/i18n/mk.yaml
@@ -32,15 +32,17 @@ Password:
  Title: Лозинка
  Description: Внесете ги вашите податоци за најава.
  PasswordLabel: Лозинка
-  MinLength: Минимална должина
-  HasUppercase: Голема буква
-  HasLowercase: Мала буква
-  HasNumber: Број
-  HasSymbol: Симбол
-  Confirmation: Потврда на лозинка
-  ResetLinkText: ресетирај лозинка
-  BackButtonText: назад
-  NextButtonText: следно
+  MinLength: Мора да биде најмалку
+  MinLengthp2: карактери долго.
+  MaxLength: Мора да биде помалку од 70 карактери.
+  HasUppercase: Мора да вклучи голема буква.
+  HasLowercase: Мора да вклучи мала буква.
+  HasNumber: Мора да вклучи број.
+  HasSymbol: Мора да вклучи симбол.
+  Confirmation: Потврдата за лозинката се совпаѓа.
+  ResetLinkText: Ресетирај лозинка
+  BackButtonText: Назад
+  NextButtonText: Напред

 UsernameChange:
  Title: Промена на корисничко име
--- a/internal/api/ui/login/static/i18n/nl.yaml
+++ b/internal/api/ui/login/static/i18n/nl.yaml
@@ -32,13 +32,15 @@ Password:
  Title: Wachtwoord
  Description: Voer uw inloggegevens in.
  PasswordLabel: Wachtwoord
-  MinLength: Minimum lengte
-  HasUppercase: Hoofdletter
-  HasLowercase: Kleine letter
-  HasNumber: Nummer
-  HasSymbol: Symbool
-  Confirmation: Bevestiging komt overeen
-  ResetLinkText: Reset Wachtwoord
+  MinLength: Moet minstens
+  MinLengthp2: tekens lang zijn.
+  MaxLength: Moet minder dan 70 tekens lang zijn.
+  HasUppercase: Moet een hoofdletter bevatten.
+  HasLowercase: Moet een kleine letter bevatten.
+  HasNumber: Moet een nummer bevatten.
+  HasSymbol: Moet een symbool bevatten.
+  Confirmation: Wachtwoordbevestiging komt overeen.
+  ResetLinkText: Wachtwoord resetten
  BackButtonText: Terug
  NextButtonText: Volgende

--- a/internal/api/ui/login/static/i18n/pl.yaml
+++ b/internal/api/ui/login/static/i18n/pl.yaml
@@ -32,15 +32,17 @@ Password:
  Title: Hasło
  Description: Wprowadź swoje dane logowania.
  PasswordLabel: Hasło
-  MinLength: Minimalna długość
-  HasUppercase: Duża litera
-  HasLowercase: Mała litera
-  HasNumber: Liczba
-  HasSymbol: Symbol
-  Confirmation: Potwierdzenie zgodności
-  ResetLinkText: zresetuj hasło
-  BackButtonText: wróć
-  NextButtonText: dalej
+  MinLength: Musi zawierać co najmniej
+  MinLengthp2: znaków.
+  MaxLength: Musi zawierać mniej niż 70 znaków.
+  HasUppercase: Musi zawierać dużą literę.
+  HasLowercase: Musi zawierać małą literę.
+  HasNumber: Musi zawierać numer.
+  HasSymbol: Musi zawierać symbol.
+  Confirmation: Potwierdzenie hasła pasuje.
+  ResetLinkText: Zresetuj hasło
+  BackButtonText: Wstecz
+  NextButtonText: Dalej

 UsernameChange:
  Title: Zmiana nazwy użytkownika
--- a/internal/api/ui/login/static/i18n/pt.yaml
+++ b/internal/api/ui/login/static/i18n/pt.yaml
@@ -32,15 +32,17 @@ Password:
  Title: Senha
  Description: Insira seus dados de login.
  PasswordLabel: Senha
-  MinLength: Comprimento mínimo
-  HasUppercase: Letra maiúscula
-  HasLowercase: Letra minúscula
-  HasNumber: Número
-  HasSymbol: Símbolo
-  Confirmation: Confirmação corresponde
-  ResetLinkText: redefinir senha
-  BackButtonText: voltar
-  NextButtonText: próximo
+  MinLength: Deve ter pelo menos
+  MinLengthp2: caracteres.
+  MaxLength: Deve ter menos de 70 caracteres.
+  HasUppercase: Deve incluir uma letra maiúscula.
+  HasLowercase: Deve incluir uma letra minúscula.
+  HasNumber: Deve incluir um número.
+  HasSymbol: Deve incluir um símbolo.
+  Confirmation: A confirmação da senha corresponde.
+  ResetLinkText: Redefinir senha
+  BackButtonText: Voltar
+  NextButtonText: Próximo

 UsernameChange:
  Title: Alterar nome de usuário
--- a/internal/api/ui/login/static/i18n/ru.yaml
+++ b/internal/api/ui/login/static/i18n/ru.yaml
@@ -29,17 +29,19 @@ SelectAccount:

 Password:
  Title: Пароль
-  Description: Введите ваши данные.
+  Description: Введите свои данные для входа.
  PasswordLabel: Пароль
-  MinLength: Минимальная длина
-  HasUppercase: Заглавная буква
-  HasLowercase: Строчная буква
-  HasNumber: Цифра
-  HasSymbol: Символ
-  Confirmation: Подтверждение пароля
-  ResetLinkText: сброс пароля
-  BackButtonText: назад
-  NextButtonText: далее
+  MinLength: Должно быть не менее
+  MinLengthp2: символов.
+  MaxLength: Должно быть меньше 70 символов.
+  HasUppercase: Должно содержать заглавную букву.
+  HasLowercase: Должно содержать строчную букву.
+  HasNumber: Должно содержать число.
+  HasSymbol: Должно содержать символ.
+  Confirmation: Подтверждение пароля совпадает.
+  ResetLinkText: Сбросить пароль
+  BackButtonText: Назад
+  NextButtonText: Вперед

 UsernameChange:
  Title: Изменение логина
--- a/internal/api/ui/login/static/i18n/zh.yaml
+++ b/internal/api/ui/login/static/i18n/zh.yaml
@@ -32,15 +32,17 @@ Password:
  Title: 密码
  Description: 输入您的登录数据。
  PasswordLabel: 密码
-  MinLength: 密码
-  HasUppercase: 大写字母
-  HasLowercase: 小写字母
-  HasNumber: 数字
-  HasSymbol: 符号
-  Confirmation: 确认匹配
-  ResetLinkText: 重设密码
-  BackButtonText: 后退
-  NextButtonText: 继续
+  MinLength: 必须至少有
+  MinLengthp2: 个字符。
+  MaxLength: 必须少于70个字符。
+  HasUppercase: 必须包含一个大写字母。
+  HasLowercase: 必须包含一个小写字母。
+  HasNumber: 必须包含一个数字。
+  HasSymbol: 必须包含一个符号。
+  Confirmation: 密码确认匹配。
+  ResetLinkText: 重置密码
+  BackButtonText: 返回
+  NextButtonText: 下一步

 UsernameChange:
  Title: 更改用户名
--- a/internal/api/ui/login/static/resources/scripts/password_policy_check.js
+++ b/internal/api/ui/login/static/resources/scripts/password_policy_check.js
@@ -15,6 +15,14 @@ function ComplexityPolicyCheck(passwordElement, passwordConfirmationElement) {
    invalid++;
  }

+  const maxLengthElem = document.getElementById("maxlength");
+  if (passwordElement.value.length <= 70) {
+    ValidPolicyFlipped(maxLengthElem);
+  } else {
+    InvalidPolicyFlipped(maxLengthElem);
+    invalid++;
+  }
+
  const upper = document.getElementById("uppercase");
  if (upperRegex !== "") {
    if (RegExp(upperRegex).test(passwordElement.value)) {
@@ -84,6 +92,14 @@ function ValidPolicy(element) {
  element.getElementsByTagName("i")[0].classList.add("lgn-valid");
 }

+function ValidPolicyFlipped(element) {
+  element.classList.add("valid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-warn");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-icon-times-solid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-valid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-icon-check-solid");
+}
+
 function InvalidPolicy(element) {
  element.classList.add("invalid");
  element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
@@ -91,3 +107,11 @@ function InvalidPolicy(element) {
  element.getElementsByTagName("i")[0].classList.add("lgn-warn");
  element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
 }
+
+function InvalidPolicyFlipped(element) {
+  element.classList.remove("valid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-icon-check-solid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-warn");
+}
--- a/internal/api/ui/login/static/templates/password_complexity_policy.html
+++ b/internal/api/ui/login/static/templates/password_complexity_policy.html
@@ -1,6 +1,7 @@
 {{define "password-complexity-policy-description"}}
 <ul class="lgn-no-dots lgn-policy" id="passwordcomplexity">
-    <li id="minlength" class="invalid"><i class="lgn-icon-times-solid lgn-warn"></i><span>{{t "Password.MinLength"}} {{.MinLength}}</span></li>
+    <li id="minlength" class="invalid"><i class="lgn-icon-times-solid lgn-warn"></i><span>{{t "Password.MinLength"}} {{.MinLength}} {{t "Password.MinLengthp2"}}</span></li>
+    <li id="maxlength" class="valid"><i class="lgn-icon-check-solid lgn-valid"></i><span>{{t "Password.MaxLength"}}</span></li>
    {{if .HasUppercase }}
    <li id="uppercase" class="invalid"><i class="lgn-icon-times-solid lgn-warn"></i><span>{{t "Password.HasUppercase"}}</span></li>
    {{end}}