diff --git a/worklenz-frontend/public/locales/alb/auth/signup.json b/worklenz-frontend/public/locales/alb/auth/signup.json index 1dac7a39..17426508 100644 --- 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!", diff --git a/worklenz-frontend/public/locales/de/auth/signup.json b/worklenz-frontend/public/locales/de/auth/signup.json index 55a63a23..8eb7e5a3 100644 --- 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!", diff --git a/worklenz-frontend/public/locales/en/auth/signup.json b/worklenz-frontend/public/locales/en/auth/signup.json index af4611ba..c40eb9e7 100644 --- 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.", diff --git a/worklenz-frontend/public/locales/es/auth/signup.json b/worklenz-frontend/public/locales/es/auth/signup.json index 465ff287..2dbd0188 100644 --- 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.", diff --git a/worklenz-frontend/public/locales/pt/auth/signup.json b/worklenz-frontend/public/locales/pt/auth/signup.json index cd994d4a..b6c55121 100644 --- 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!", diff --git a/worklenz-frontend/public/locales/zh/auth/signup.json b/worklenz-frontend/public/locales/zh/auth/signup.json index a2b34e57..d2938d64 100644 --- 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个字符,包括大小写字母、一个数字和一个符号。", diff --git a/worklenz-frontend/src/pages/auth/SignupPage.tsx b/worklenz-frontend/src/pages/auth/SignupPage.tsx index de6ae10a..7f096da2 100644 --- 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 ( { 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)} /> -
- {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 ( - - {passed ? ( - - ) : ( - - )} - {item.label} - - ); + + {t('passwordGuideline', { + defaultValue: 'Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.' })} -
+ + {passwordActive && ( +
+ {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 ( + + {passed ? ( + + ) : ( + + )} + {item.label} + + ); + })} +
+ )}