feat(auth): update password requirements and localization for signup

- Updated password label and placeholder to "Password" and "Enter your password" across multiple languages. - Added password guideline for minimum requirements in English, German, Spanish, Portuguese, Albanian, and Chinese. - Introduced maximum character requirement for passwords in all supported languages. - Enhanced password validation messages to improve user experience during signup.
2025-07-22 17:25:25 +05:30
parent 33aace71c8
commit 3beed3dae6
7 changed files with 63 additions and 37 deletions
--- a/worklenz-frontend/public/locales/alb/auth/signup.json
+++ b/worklenz-frontend/public/locales/alb/auth/signup.json
@@ -7,11 +7,13 @@
  "emailLabel": "Email",
  "emailPlaceholder": "Shkruani email-in tuaj",
  "emailRequired": "Ju lutemi shkruani Email-in tuaj!",
-  "passwordLabel": "Fjalëkalimi",
-  "passwordPlaceholder": "Krijoni një fjalëkalim",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "Ju lutemi krijoni një Fjalëkalim!",
  "passwordMinCharacterRequired": "Fjalëkalimi duhet të jetë së paku 8 karaktere!",
-  "passwordPatternRequired": "Fjalëkalimi nuk plotëson kërkesat!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "Fjalëkalimi nuk i plotëson kërkesat!",
  "strongPasswordPlaceholder": "Vendosni një fjalëkalim më të fortë",
  "passwordValidationAltText": "Fjalëkalimi duhet të përmbajë së paku 8 karaktere me shkronja të mëdha dhe të vogla, një numër dhe një simbol.",
  "signupSuccessMessage": "Jeni regjistruar me sukses!",
--- a/worklenz-frontend/public/locales/de/auth/signup.json
+++ b/worklenz-frontend/public/locales/de/auth/signup.json
@@ -7,11 +7,13 @@
  "emailLabel": "E-Mail",
  "emailPlaceholder": "Ihre E-Mail-Adresse eingeben",
  "emailRequired": "Bitte geben Sie Ihre E-Mail-Adresse ein!",
-  "passwordLabel": "Passwort",
-  "passwordPlaceholder": "Ihr Passwort eingeben",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "Bitte geben Sie Ihr Passwort ein!",
  "passwordMinCharacterRequired": "Das Passwort muss mindestens 8 Zeichen lang sein!",
-  "passwordPatternRequired": "Das Passwort erfüllt nicht die Anforderungen!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "Das Passwort entspricht nicht den Anforderungen!",
  "strongPasswordPlaceholder": "Ein stärkeres Passwort eingeben",
  "passwordValidationAltText": "Das Passwort muss mindestens 8 Zeichen enthalten, mit Groß- und Kleinbuchstaben, einer Zahl und einem Sonderzeichen.",
  "signupSuccessMessage": "Sie haben sich erfolgreich registriert!",
--- a/worklenz-frontend/public/locales/en/auth/signup.json
+++ b/worklenz-frontend/public/locales/en/auth/signup.json
@@ -8,9 +8,11 @@
  "emailPlaceholder": "Enter your email",
  "emailRequired": "Please enter your Email!",
  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "Please enter your Password!",
  "passwordMinCharacterRequired": "Password must be at least 8 characters!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
  "passwordPatternRequired": "Password does not meet the requirements!",
  "strongPasswordPlaceholder": "Enter a stronger password",
  "passwordValidationAltText": "Password must include at least 8 characters with upper and lower case letters, a number, and a symbol.",
--- a/worklenz-frontend/public/locales/es/auth/signup.json
+++ b/worklenz-frontend/public/locales/es/auth/signup.json
@@ -7,10 +7,12 @@
  "emailLabel": "Correo electrónico",
  "emailPlaceholder": "Ingresa tu correo electrónico",
  "emailRequired": "¡Por favor ingresa tu correo electrónico!",
-  "passwordLabel": "Contraseña",
-  "passwordPlaceholder": "Ingresa tu contraseña",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "¡Por favor ingresa tu contraseña!",
  "passwordMinCharacterRequired": "¡La contraseña debe tener al menos 8 caracteres!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
  "passwordPatternRequired": "¡La contraseña no cumple con los requisitos!",
  "strongPasswordPlaceholder": "Ingresa una contraseña más segura",
  "passwordValidationAltText": "La contraseña debe incluir al menos 8 caracteres con letras mayúsculas y minúsculas, un número y un símbolo.",
--- a/worklenz-frontend/public/locales/pt/auth/signup.json
+++ b/worklenz-frontend/public/locales/pt/auth/signup.json
@@ -7,11 +7,13 @@
  "emailLabel": "Email",
  "emailPlaceholder": "Insira seu email",
  "emailRequired": "Por favor, insira seu Email!",
-  "passwordLabel": "Senha",
-  "passwordPlaceholder": "Insira sua senha",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "Por favor, insira sua Senha!",
  "passwordMinCharacterRequired": "Senha deve ter pelo menos 8 caracteres!",
-  "passwordPatternRequired": "Senha não atende aos requisitos!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "A senha não atende aos requisitos!",
  "strongPasswordPlaceholder": "Insira uma senha mais forte",
  "passwordValidationAltText": "Senha deve incluir pelo menos 8 caracteres com letras maiúsculas e minúsculas, um número e um símbolo.",
  "signupSuccessMessage": "Você se inscreveu com sucesso!",
--- a/worklenz-frontend/public/locales/zh/auth/signup.json
+++ b/worklenz-frontend/public/locales/zh/auth/signup.json
@@ -7,10 +7,12 @@
  "emailLabel": "电子邮件",
  "emailPlaceholder": "输入您的电子邮件",
  "emailRequired": "请输入您的电子邮件！",
-  "passwordLabel": "密码",
-  "passwordPlaceholder": "输入您的密码",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
  "passwordRequired": "请输入您的密码！",
  "passwordMinCharacterRequired": "密码必须至少包含8个字符！",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
  "passwordPatternRequired": "密码不符合要求！",
  "strongPasswordPlaceholder": "输入更强的密码",
  "passwordValidationAltText": "密码必须至少包含8个字符，包括大小写字母、一个数字和一个符号。",
--- a/worklenz-frontend/src/pages/auth/SignupPage.tsx
+++ b/worklenz-frontend/src/pages/auth/SignupPage.tsx
@@ -293,15 +293,19 @@ const SignupPage = () => {
    password: [
      {
        required: true,
-        message: null,
+        message: t('passwordRequired'),
      },
      {
        min: 8,
-        message: null,
+        message: t('passwordMinCharacterRequired'),
+      },
+      {
+        max: 32,
+        message: t('passwordMaxCharacterRequired'),
      },
      {
        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])/,
-        message: null,
+        message: t('passwordPatternRequired'),
      },
    ],
  };
@@ -336,7 +340,7 @@ const SignupPage = () => {

  const themeMode = useAppSelector(state => state.themeReducer.mode);
  const [passwordValue, setPasswordValue] = useState('');
-  const [passwordTouched, setPasswordTouched] = useState(false);
+  const [passwordActive, setPasswordActive] = useState(false);

  return (
    <Card
@@ -396,12 +400,21 @@ const SignupPage = () => {
              size="large"
              style={{ borderRadius: 4 }}
              value={passwordValue}
+              onFocus={() => setPasswordActive(true)}
              onChange={e => {
                setPasswordValue(e.target.value);
-                if (!passwordTouched) setPasswordTouched(true);
+                setPasswordActive(true);
+              }}
+              onBlur={() => {
+                if (!passwordValue) setPasswordActive(false);
              }}
-              onBlur={() => setPasswordTouched(true)}
            />
+            <Typography.Text type="secondary" style={{ fontSize: 12, marginTop: 4, marginBottom: 0, display: 'block' }}>
+              {t('passwordGuideline', {
+                defaultValue: 'Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.'
+              })}
+            </Typography.Text>
+            {passwordActive && (
              <div style={{ marginTop: 8, marginBottom: 4 }}>
                {passwordChecklistItems.map(item => {
                  const passed = item.test(passwordValue);
@@ -421,6 +434,7 @@ const SignupPage = () => {
                  );
                })}
              </div>
+            )}
          </div>
        </Form.Item>