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.

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",
+  "passwordLabel": "Password",
-  "passwordPlaceholder": "Krijoni një fjalëkalim",
+  "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!",

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",
+  "passwordLabel": "Password",
-  "passwordPlaceholder": "Ihr Passwort eingeben",
+  "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!",

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.",

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",
+  "passwordLabel": "Password",
-  "passwordPlaceholder": "Ingresa tu contraseña",
+  "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.",

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",
+  "passwordLabel": "Password",
-  "passwordPlaceholder": "Insira sua senha",
+  "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!",

worklenz-frontend/public/locales/zh/auth/signup.json

@@ -7,10 +7,12 @@
   "emailLabel": "电子邮件",
   "emailPlaceholder": "输入您的电子邮件",
   "emailRequired": "请输入您的电子邮件！",
-  "passwordLabel": "密码",
+  "passwordLabel": "Password",
-  "passwordPlaceholder": "输入您的密码",
+  "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个字符，包括大小写字母、一个数字和一个符号。",

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,31 +400,41 @@ 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)}
             />
-            <div style={{ marginTop: 8, marginBottom: 4 }}>
+            <Typography.Text type="secondary" style={{ fontSize: 12, marginTop: 4, marginBottom: 0, display: 'block' }}>
-              {passwordChecklistItems.map(item => {
+              {t('passwordGuideline', {
-                const passed = item.test(passwordValue);
+                defaultValue: 'Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.'
-                // Only green if passed, otherwise neutral (never red)
-                let color = passed
-                  ? (themeMode === 'dark' ? '#52c41a' : '#389e0d')
-                  : (themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf');
-                return (
-                  <Flex key={item.key} align="center" gap={8} style={{ color, fontSize: 13 }}>
-                    {passed ? (
-                      <CheckCircleTwoTone twoToneColor={themeMode === 'dark' ? '#52c41a' : '#52c41a'} />
-                    ) : (
-                      <CloseCircleTwoTone twoToneColor={themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf'} />
-                    )}
-                    <span>{item.label}</span>
-                  </Flex>
-                );
               })}
-            </div>
+            </Typography.Text>
+            {passwordActive && (
+              <div style={{ marginTop: 8, marginBottom: 4 }}>
+                {passwordChecklistItems.map(item => {
+                  const passed = item.test(passwordValue);
+                  // Only green if passed, otherwise neutral (never red)
+                  let color = passed
+                    ? (themeMode === 'dark' ? '#52c41a' : '#389e0d')
+                    : (themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf');
+                  return (
+                    <Flex key={item.key} align="center" gap={8} style={{ color, fontSize: 13 }}>
+                      {passed ? (
+                        <CheckCircleTwoTone twoToneColor={themeMode === 'dark' ? '#52c41a' : '#52c41a'} />
+                      ) : (
+                        <CloseCircleTwoTone twoToneColor={themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf'} />
+                      )}
+                      <span>{item.label}</span>
+                    </Flex>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </Form.Item>