chore: updated a11y accessibility experience on password conditions

app/i18n/locales/ar.json

@@ -320,6 +320,8 @@
   "Passcode_choose_title": "اختر كلمة المرور الجديدة",
   "Passcode_enter_title": "أدخل كلمة المرور",
   "Password": "كلمة المرور",
+  "Password_Tip_Error": "الشرط غير محقق.",
+  "Password_Tip_Success": "تم استيفاء الشرط.",
   "Permalink_copied_to_clipboard": "تم نسخ الرابط الثابت إلى الحافظة!",
   "Phone": "الهاتف",
   "Pin": "ثبت",

app/i18n/locales/bn-IN.json

@@ -490,6 +490,8 @@
   "Passcode_choose_title": "আপনার নতুন পাসকোড চয়ন করুন",
   "Passcode_enter_title": "আপনার পাসকোড লিখুন",
   "Password": "পাসওয়ার্ড",
+  "Password_Tip_Error": "শর্ত পূরণ হয়নি।",
+  "Password_Tip_Success": "শর্ত পূরণ হয়েছে।",
   "Permalink_copied_to_clipboard": "পারমালিঙ্ক ক্লিপবোর্ডে কপি করা হয়েছে!",
   "Person_or_channel": "ব্যক্তি বা চ্যানেল",
   "Phone": "ফোন",

app/i18n/locales/cs.json

@@ -530,6 +530,8 @@
   "Passcode_choose_title": "Vyberte si nový přístupový kód",
   "Passcode_enter_title": "Zadejte přístupový kód",
   "Password": "Heslo",
+  "Password_Tip_Error": "Podmínka nesplněna.",
+  "Password_Tip_Success": "Podmínka splněna.",
   "Permalink_copied_to_clipboard": "Trvalý odkaz zkopírován do schránky!",
   "Person_or_channel": "Osoba nebo kanál",
   "Phone": "Telefon",

app/i18n/locales/de.json

@@ -479,6 +479,8 @@
   "Passcode_choose_title": "Setzen Sie Ihren neuen Sicherheitscode",
   "Passcode_enter_title": "Geben Sie Ihren Sicherheitscode ein",
   "Password": "Passwort",
+  "Password_Tip_Error": "Bedingung nicht erfüllt.",
+  "Password_Tip_Success": "Bedingung erfüllt.",
   "Permalink_copied_to_clipboard": "Permalink in die Zwischenablage kopiert!",
   "Phone": "Telefon",
   "Pin": "Anheften",

app/i18n/locales/en.json

@@ -549,6 +549,8 @@
   "Passcode_choose_title": "Choose your new passcode",
   "Passcode_enter_title": "Enter your passcode",
   "Password": "Password",
+  "Password_Tip_Error": "Condition not met.",
+  "Password_Tip_Success": "Condition met.",
   "Permalink_copied_to_clipboard": "Permalink copied to clipboard!",
   "Person_or_channel": "Person or channel",
   "Phone": "Phone",

app/i18n/locales/es.json

@@ -189,6 +189,8 @@
   "Oops": "Oops!",
   "Open_emoji_selector": "Abrir selector de emojis",
   "Password": "Contraseña",
+  "Password_Tip_Error": "Condición no cumplida.",
+  "Password_Tip_Success": "Condición cumplida.",
   "Permalink_copied_to_clipboard": "¡Enlace permanente copiado al portapapeles!",
   "Pin": "Fijar",
   "Pinned": "Fijado",

app/i18n/locales/fi.json

@@ -456,6 +456,8 @@
   "Passcode_choose_title": "Valitse uusi salasana",
   "Passcode_enter_title": "Anna salasanasi",
   "Password": "Salasana",
+  "Password_Tip_Error": "Ehto ei täyty.",
+  "Password_Tip_Success": "Ehto täytetty.",
   "Permalink_copied_to_clipboard": "Pysyvä linkki kopioitu leikepöydälle!",
   "Phone": "Puhelin",
   "Pin": "Kiinnitä",

app/i18n/locales/fr.json

@@ -415,6 +415,8 @@
   "Passcode_choose_title": "Choisissez votre nouveau code d'accès",
   "Passcode_enter_title": "Entrez votre code d'accès",
   "Password": "Mot de passe",
+  "Password_Tip_Error": "Condition non remplie.",
+  "Password_Tip_Success": "Condition remplie.",
   "Permalink_copied_to_clipboard": "Lien permanent copié dans le presse-papiers !",
   "Phone": "Téléphone",
   "Pin": "Épingler",

app/i18n/locales/hi-IN.json

@@ -490,6 +490,8 @@
   "Passcode_choose_title": "अपना नया पासकोड चुनें",
   "Passcode_enter_title": "अपना पासकोड डालें",
   "Password": "पासवर्ड",
+  "Password_Tip_Error": "शर्त पूरी नहीं हुई।",
+  "Password_Tip_Success": "शर्त पूरी हुई।",
   "Permalink_copied_to_clipboard": "पर्मालिंक क्लिपबोर्ड पर कॉपी किया गया!",
   "Person_or_channel": "व्यक्ति या चैनल",
   "Phone": "फ़ोन",

app/i18n/locales/hu.json

@@ -491,6 +491,8 @@
   "Passcode_choose_title": "Válassza ki az új jelkódot",
   "Passcode_enter_title": "Adja meg a jelkódot",
   "Password": "Jelszó",
+  "Password_Tip_Error": "Feltétel nem teljesült.",
+  "Password_Tip_Success": "Feltétel teljesítve.",
   "Permalink_copied_to_clipboard": "Permalink a vágólapra másolva!",
   "Person_or_channel": "Személy vagy csatorna",
   "Phone": "Telefon",

app/i18n/locales/it.json

@@ -354,6 +354,8 @@
   "Passcode_choose_title": "Scegli il tuo nuovo passcode",
   "Passcode_enter_title": "Inserisci il passcode",
   "Password": "Password",
+  "Password_Tip_Error": "Condizione non soddisfatta.",
+  "Password_Tip_Success": "Condizione soddisfatta.",
   "Permalink_copied_to_clipboard": "Permalink copiato negli appunti!",
   "Phone": "Telefono",
   "Pin": "Appunta",

app/i18n/locales/ja.json

@@ -278,6 +278,8 @@
   "Oops": "おっと！",
   "Open_emoji_selector": "絵文字ピッカーを開く",
   "Password": "パスワード",
+  "Password_Tip_Error": "条件が満たされていません。",
+  "Password_Tip_Success": "条件が満たされました。",
   "Permalink_copied_to_clipboard": "リンクをクリップボードにコピーしました！",
   "Pin": "ピン留め",
   "Pinned": "ピン留めされました",

app/i18n/locales/nl.json

@@ -415,6 +415,8 @@
   "Passcode_choose_title": "Kies je nieuwe toegangscode",
   "Passcode_enter_title": "Voer uw toegangscode in",
   "Password": "Wachtwoord",
+  "Password_Tip_Error": "Voorwaarde niet voldaan.",
+  "Password_Tip_Success": "Voorwaarde voldaan.",
   "Permalink_copied_to_clipboard": "Permalink gekopiëerd naar klembord!",
   "Phone": "Telefoon",
   "Pin": "Vastzetten",

app/i18n/locales/pt-BR.json

@@ -538,6 +538,8 @@
   "Passcode_choose_title": "Insira sua nova senha",
   "Passcode_enter_title": "Digite sua senha",
   "Password": "Senha",
+  "Password_Tip_Error": "Condição não atendida.",
+  "Password_Tip_Success": "Condição atendida.",
   "Permalink_copied_to_clipboard": "Link-permanente copiado para a área de transferência!",
   "Person_or_channel": "Pessoa ou canal",
   "Phone": "Telefone",

app/i18n/locales/pt-PT.json

@@ -290,6 +290,8 @@
   "Overwrites_the_server_configuration_and_use_room_config": "Sobrescreve a configuração do servidor e a configuração da sala de uso",
   "Parent_channel_or_group": "Canal de origem ou grupo",
   "Password": "Palavra-passe",
+  "Password_Tip_Error": "Condição não cumprida.",
+  "Password_Tip_Success": "Condição cumprida.",
   "Permalink_copied_to_clipboard": "Link permanente copiado para a área de transferência!",
   "Phone": "Telefone",
   "Pin": "Afixar",

app/i18n/locales/ru.json

@@ -446,6 +446,8 @@
   "Passcode_choose_title": "Выберите ваш новый пароль",
   "Passcode_enter_title": "Введите ваш пароль",
   "Password": "Пароль",
+  "Password_Tip_Error": "Условие не выполнено.",
+  "Password_Tip_Success": "Условие выполнено.",
   "Permalink_copied_to_clipboard": "Постоянная ссылка скопирована в буфер обмена!",
   "Phone": "Телефон",
   "Pin": "Прикрепить сообщение",

app/i18n/locales/sl-SI.json

@@ -427,6 +427,8 @@
   "Passcode_choose_title": "Izberite svojo novo geslo",
   "Passcode_enter_title": "Vnesite svojo geslo",
   "Password": "Geslo",
+  "Password_Tip_Error": "Pogoj ni izpolnjen.",
+  "Password_Tip_Success": "Pogoj izpolnjen.",
   "Permalink_copied_to_clipboard": "Permalink, kopirano v odložišče!",
   "Phone": "Telefon",
   "Pin": "Zatič",

app/i18n/locales/sv.json

@@ -455,6 +455,8 @@
   "Passcode_choose_title": "Välj en ny lösenkod",
   "Passcode_enter_title": "Ange din lösenkod",
   "Password": "Lösenord",
+  "Password_Tip_Error": "Villkor ej uppfyllt.",
+  "Password_Tip_Success": "Villkor uppfyllt.",
   "Permalink_copied_to_clipboard": "Permalänken har kopierats till urklipp.",
   "Phone": "Telefonnummer",
   "Pin": "Fäst",

app/i18n/locales/ta-IN.json

@@ -490,6 +490,8 @@
   "Passcode_choose_title": "உங்கள் புதிய கடவுச்சொல் தேர்ந்தெடுக்கவும்",
   "Passcode_enter_title": "உங்கள் கடவுச்சொல் உள்ளிடவும்",
   "Password": "கடவுச்சொல்",
+  "Password_Tip_Error": "நிபந்தனை பூர்த்தி செய்யப்படவில்லை.",
+  "Password_Tip_Success": "நிபந்தனை பூர்த்தி செய்யப்பட்டது.",
   "Permalink_copied_to_clipboard": "நிரல்களுக்கு பதில் நகல் எடுக்கப்பட்டுவிட்டது!",
   "Person_or_channel": "நபர் அல்லது சேனல்",
   "Phone": "கைபேசி",

app/i18n/locales/te-IN.json

@@ -490,6 +490,8 @@
   "Passcode_choose_title": "మీ కొత్త పాస్‌కోడ్ను ఎంచుకోండి",
   "Passcode_enter_title": "మీ పాస్‌కోడ్ నమోదు",
   "Password": "పాస్‌వర్డ్",
+  "Password_Tip_Error": "शर्त पूरी नहीं हुई।",
+  "Password_Tip_Success": "शर्त पूरी हुई।",
   "Permalink_copied_to_clipboard": "పర్మాలింక్ కోపీ అయ్యింది!",
   "Person_or_channel": "వ్యక్తి లేదా చానల్",
   "Phone": "ఫోన్",

app/i18n/locales/tr.json

@@ -337,6 +337,8 @@
   "Passcode_choose_title": "Yeni şifrenizi yazın",
   "Passcode_enter_title": "Şifrenizi giriniz",
   "Password": "Şifre",
+  "Password_Tip_Error": "Koşul karşılanmadı.",
+  "Password_Tip_Success": "Koşul sağlandı.",
   "Permalink_copied_to_clipboard": "Kalıcı bağlantı panoya kopyalandı!",
   "Phone": "Telefon",
   "Pin": "Sabitle",

app/i18n/locales/zh-CN.json

@@ -320,6 +320,8 @@
   "Passcode_choose_title": "请输入新通关密码",
   "Passcode_enter_title": "请输入通关密码",
   "Password": "密码",
+  "Password_Tip_Error": "未满足条件。",
+  "Password_Tip_Success": "条件已满足。",
   "Permalink_copied_to_clipboard": "永久链接已复制到剪贴板！",
   "Phone": "电话",
   "Pin": "钉选",

app/i18n/locales/zh-TW.json

@@ -337,6 +337,8 @@
   "Passcode_choose_title": "請輸入新通關密碼",
   "Passcode_enter_title": "請輸入通關密碼",
   "Password": "密碼",
+  "Password_Tip_Error": "條件不符合。",
+  "Password_Tip_Success": "條件滿足。",
   "Permalink_copied_to_clipboard": "永久連結已複製到剪貼簿！",
   "Phone": "電話",
   "Pin": "釘選",

app/views/RegisterView/PasswordTips.tsx

@@ -18,26 +18,44 @@ const styles = StyleSheet.create({
 	}
 });
 
-const PasswordTips = () => {
+interface IPasswordTips {
+	isDirty: boolean;
+	password: string;
+}
+
+const PasswordTips = ({ isDirty, password }: IPasswordTips) => {
 	const { colors } = useTheme();
 
-	const accessibilityLabel = `${i18n.t('Your_Password_Must_Have')}  ${i18n.t('At_Least_8_Characters')} -  ${i18n.t(
-		'At_Most_24_Characters'
-	)} - ${i18n.t('Max_2_Repeating_Characters')} - ${i18n.t('At_Least_1_Lowercase_Letter')} - ${i18n.t(
-		'At_Least_1_Number'
-	)} - ${i18n.t('At_Least_1_Symbol')}`;
+	const atLeastEightCharactersValidation = /^.{8,}$/;
+	const atMostTwentyFourCharactersValidation = /^.{0,24}$/;
+	const maxTwoRepeatingCharacters = /^(?!.*(.)\1\1)/;
+	const atLeastOneLowercaseLetter = /[a-z]/;
+	const atLeastOneNumber = /\d/;
+	const atLeastOneSymbol = /[^a-zA-Z0-9]/;
+
+	const selectTipIconType = (validation: RegExp) => {
+		if (!isDirty) return 'info';
+
+		if (validation.test(password)) return 'success';
+
+		return 'error';
+	};
+
 	return (
-		<View accessible accessibilityLabel={accessibilityLabel}>
-			<Text accessible style={[styles.PasswordTipsTitle, { color: colors.fontDefault }]}>
+		<View accessible>
+			<Text
+				accessibilityLabel={i18n.t('Your_Password_Must_Have')}
+				accessible
+				style={[styles.PasswordTipsTitle, { color: colors.fontDefault }]}>
 				{i18n.t('Your_Password_Must_Have')}
 			</Text>
 			<View style={styles.tips}>
-				<Tip type='success' description={i18n.t('At_Least_8_Characters')} />
-				<Tip type='error' description={i18n.t('At_Most_24_Characters')} />
-				<Tip description={i18n.t('Max_2_Repeating_Characters')} />
-				<Tip description={i18n.t('At_Least_1_Lowercase_Letter')} />
-				<Tip description={i18n.t('At_Least_1_Number')} />
-				<Tip description={i18n.t('At_Least_1_Symbol')} />
+				<Tip iconType={selectTipIconType(atLeastEightCharactersValidation)} description={i18n.t('At_Least_8_Characters')} />
+				<Tip iconType={selectTipIconType(atMostTwentyFourCharactersValidation)} description={i18n.t('At_Most_24_Characters')} />
+				<Tip iconType={selectTipIconType(maxTwoRepeatingCharacters)} description={i18n.t('Max_2_Repeating_Characters')} />
+				<Tip iconType={selectTipIconType(atLeastOneLowercaseLetter)} description={i18n.t('At_Least_1_Lowercase_Letter')} />
+				<Tip iconType={selectTipIconType(atLeastOneNumber)} description={i18n.t('At_Least_1_Number')} />
+				<Tip iconType={selectTipIconType(atLeastOneSymbol)} description={i18n.t('At_Least_1_Symbol')} />
 			</View>
 		</View>
 	);

app/views/RegisterView/Tip.tsx

@@ -3,9 +3,10 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
+import I18n from '../../i18n';
 
 interface ITipProps {
-	type?: 'success' | 'error';
+	iconType?: 'success' | 'error' | 'info';
 	description: string;
 }
 
@@ -15,23 +16,36 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Tip = ({ type, description }: ITipProps) => {
+const Tip = ({ iconType, description }: ITipProps) => {
 	const { colors } = useTheme();
 
 	let icon: TIconsName = 'info';
 	let color = colors.fontDefault;
-	if (type === 'success') {
+	let accessibilityLabel = '';
+	if (iconType === 'success') {
 		icon = 'success-circle';
 		color = colors.statusFontSuccess;
+		accessibilityLabel = I18n.t('Password_Tip_Success');
 	}
-	if (type === 'error') {
+	if (iconType === 'error') {
 		icon = 'error-circle';
 		color = colors.statusFontDanger;
+		accessibilityLabel = I18n.t('Password_Tip_Error');
 	}
+
 	return (
 		<View style={styles.container}>
-			<CustomIcon color={color} name={icon} size={16} style={{ marginRight: 4 }} />
-			<Text>{description}</Text>
+			<CustomIcon
+				accessible
+				accessibilityLabel={accessibilityLabel}
+				color={color}
+				name={icon}
+				size={16}
+				style={{ marginRight: 4 }}
+			/>
+			<Text accessible accessibilityLabel={description}>
+				{description}
+			</Text>
 		</View>
 	);
 };

app/views/RegisterView/index.tsx

@@ -57,7 +57,8 @@ const RegisterView = ({ navigation, route }: IProps) => {
 		handleSubmit,
 		setFocus,
 		getValues,
-		formState: { isValid }
+		watch,
+		formState: { isValid, isDirty }
 	} = useForm({
 		mode: 'onChange',
 		defaultValues: {
@@ -69,9 +70,11 @@ const RegisterView = ({ navigation, route }: IProps) => {
 		},
 		resolver: yupResolver(validationSchema)
 	});
+	const password = watch('password');
 	const parsedCustomFields = getParsedCustomFields(Accounts_CustomFields);
 	const [customFields, setCustomFields] = useState(getCustomFields(parsedCustomFields));
 	const [saving, setSaving] = useState(false);
+
 	const login = () => {
 		navigation.navigate('LoginView', { title: new parse(Site_Url).hostname });
 	};
@@ -209,7 +212,9 @@ const RegisterView = ({ navigation, route }: IProps) => {
 		<FormContainer testID='register-view'>
 			<FormContainerInner>
 				<LoginServices separator />
-				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Sign_Up')}</Text>
+				<Text accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels }]}>
+					{I18n.t('Sign_Up')}
+				</Text>
 				<View style={styles.inputs}>
 					<Controller
 						name='name'
@@ -314,7 +319,7 @@ const RegisterView = ({ navigation, route }: IProps) => {
 					/>
 					{renderCustomFields()}
 				</View>
-				<PasswordTips />
+				<PasswordTips isDirty={isDirty} password={password} />
 				<Button
 					disabled={!isValid}
 					testID='register-view-submit'