feat(a11y): inline errors ChangePassword (#6489)

* feat: removed changePassword input and added a button

* feat: created ChangePasswordView

* chore: remove unused ProfileView

* feat: onSetNewPassword

* fix: passwordView error

* fix: tests e2e

* chore: remove action sheet content

* fix: onboarding test

* fix: e2e tests

* fix: title color

* action: organized translations

* fix: background and password policies

* fix: color and a11y experience

* chore: format code with Prettier [skip ci]

* fix: lint

* fix: conflicts

* chore: code improvements

* fix: code improvements

* fix: code improvements

* chore: code improvements

* fix: password validation

* feat: translation

* fix: lint

---------

Co-authored-by: OtavioStasiak <[email protected]>

Author: OtavioStasiak

app/containers/ChangePasswordRequired.tsx

@@ -1,61 +1,27 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { NavigationProp, NavigationState } from '@react-navigation/native';
 
-import { logout, setUser } from '../actions/login';
+import { logout } from '../actions/login';
 import I18n from '../i18n';
-import { useSetting } from '../lib/hooks/useSetting';
-import { showErrorAlert } from '../lib/methods/helpers';
-import { Services } from '../lib/services';
 import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
-import { useActionSheet } from './ActionSheet';
-import ActionSheetContentWithInputAndSubmit from './ActionSheet/ActionSheetContentWithInputAndSubmit';
 import Button from './Button';
 import { CustomIcon } from './CustomIcon';
 
-export const ChangePasswordRequired = () => {
-	const [loading, setLoading] = useState(false);
+interface IChangePasswordRequired {
+	navigation: Omit<NavigationProp<any>, 'getState'> & {
+		getState(): NavigationState | undefined;
+	};
+}
+
+export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired) => {
 	const { colors } = useTheme();
 	const dispatch = useDispatch();
-	const { showActionSheet, hideActionSheet } = useActionSheet();
-
-	const requiresPasswordConfirmation = useSetting('Accounts_RequirePasswordConfirmation');
-	const passwordPlaceholder = useSetting('Accounts_PasswordPlaceholder') as string;
-	const passwordConfirmationPlaceholder = useSetting('Accounts_ConfirmPasswordPlaceholder') as string;
-
-	const changePassword = async (password: string) => {
-		setLoading(true);
-		try {
-			await Services.setUserPassword(password);
-			dispatch(setUser({ requirePasswordChange: false }));
-			hideActionSheet();
-		} catch (error: any) {
-			showErrorAlert(error?.reason || error?.message, I18n.t('Oops'));
-		}
-		setLoading(false);
-	};
 
-	const showActionSheetPassword = () => {
-		const inputs = [{ placeholder: passwordPlaceholder || I18n.t('Password'), secureTextEntry: true, key: 'password' }];
-		if (requiresPasswordConfirmation) {
-			inputs.push({
-				placeholder: passwordConfirmationPlaceholder || I18n.t('Confirm_your_password'),
-				secureTextEntry: true,
-				key: 'confirm-password'
-			});
-		}
-		showActionSheet({
-			children: (
-				<ActionSheetContentWithInputAndSubmit
-					title={I18n.t('Please_Enter_your_new_password')}
-					testID='change-password-required-sheet'
-					inputs={inputs}
-					onSubmit={input => changePassword(input[0])}
-					isDisabled={input => (loading || input[0] === '' || requiresPasswordConfirmation ? input[0] !== input[1] : false)}
-				/>
-			)
-		});
+	const handleChangePassword = () => {
+		navigation.navigate('ProfileStackNavigator', { screen: 'ChangePasswordView', params: { fromProfileView: false } });
 	};
 
 	return (
@@ -69,7 +35,7 @@ export const ChangePasswordRequired = () => {
 				testID='change-password-required-button'
 				title={I18n.t('Change_password')}
 				type='primary'
-				onPress={showActionSheetPassword}
+				onPress={handleChangePassword}
 			/>
 			<Button
 				testID='change-password-required-logout'

app/containers/PasswordPolicies/components/Tip.tsx

@@ -41,11 +41,9 @@ const Tip = ({ iconType, description }: ITipProps) => {
 	}
 
 	return (
-		<View style={styles.container}>
+		<View accessible accessibilityLabel={`${accessibilityLabel}${description}`} style={styles.container}>
 			<CustomIcon color={color} name={icon} size={16} />
-			<Text style={{ ...styles.text, color }} accessible accessibilityLabel={`${accessibilityLabel}${description}`}>
-				{description}
-			</Text>
+			<Text style={{ ...styles.text, color }}>{description}</Text>
 		</View>
 	);
 };

app/containers/PasswordPolicies/index.tsx

@@ -32,7 +32,7 @@ const PasswordPolicies = ({ isDirty, password, policies }: IPasswordTips) => {
 	};
 
 	return (
-		<View accessible>
+		<View>
 			<Text
 				accessibilityLabel={i18n.t('Your_Password_Must_Have')}
 				accessible

app/containers/TextInput/FormTextInput.tsx

@@ -70,6 +70,7 @@ export interface IRCTextInputProps extends TextInputProps {
 	label?: string;
 	required?: boolean;
 	error?: any;
+	showErrorMessage?: boolean;
 	loading?: boolean;
 	containerStyle?: StyleProp<ViewStyle>;
 	inputStyle?: StyleProp<TextStyle>;
@@ -79,7 +80,6 @@ export interface IRCTextInputProps extends TextInputProps {
 	left?: JSX.Element;
 	bottomSheet?: boolean;
 	onClearInput?: () => void;
-	showErrorMessage?: boolean;
 }
 
 const getInputError = (error: unknown): string => {

app/i18n/locales/ar.json

@@ -67,6 +67,7 @@
   "Certificate_password": "الرقم السري للشهادة",
   "Change_Language": "تغيير اللغة",
   "Change_language_loading": "تغيير اللغة",
+  "Change_my_password": "غير كلمة المرور الخاصة بي",
   "changing_avatar": "تغيير الصورة الرمزية",
   "Channel_hint_private": "لا يمكن للناس الانضمام إلا من خلال دعوتهم",
   "Channel_Name": "اسم القناة",
@@ -117,6 +118,7 @@
   "Created_snippet": "إنشاء مقتطف",
   "creating_channel": "إنشاء قناة",
   "creating_invite": "إنشاء دعوة",
+  "Current_password": "كلمة المرور الحالية",
   "Current_Status": "الحالة الحالية",
   "Custom": "مخصص",
   "Dark": "داكن",
@@ -490,6 +492,7 @@
   "Sending_to": "يتم الإرسال إلى",
   "Server": "سرفر",
   "Server_version": "سرفر: {{version}}",
+  "Set_new_password": "تعيين كلمة مرور جديدة",
   "Set_username_subtitle": "يتم استخدام اسم المستخدم للسماح للآخرين بذكرك في الرسائل",
   "Settings": "الإعدادات",
   "Settings_succesfully_changed": "تم تعديل الإعدادات بنجاح!",

app/i18n/locales/bn-IN.json

@@ -105,6 +105,7 @@
   "Certificate_password": "সার্টিফিকেট পাসওয়ার্ড",
   "Change_Language": "ভাষা পরিবর্তন",
   "Change_language_loading": "ভাষা পরিবর্তন করা হচ্ছে।",
+  "Change_my_password": "আমার পাসওয়ার্ড পরিবর্তন করুন।",
   "changed_room_announcement": "রুম ঘোষণা পরিবর্তন করেছে: {{announcement}}",
   "changed_room_description": "রুম বিবরণ পরিবর্তন করেছে: {{description}}",
   "changing_avatar": "অবতার পরিবর্তন হচ্ছে",
@@ -182,6 +183,7 @@
   "creating_discussion": "আলোচনা তৈরি হচ্ছে",
   "creating_invite": "ইনভাইট তৈরি হচ্ছে",
   "creating_team": "দল তৈরি হচ্ছে",
+  "Current_password": "বর্তমান পাসওয়ার্ড",
   "Current_Status": "বর্তমান অবস্থা",
   "Custom": "কাস্টম",
   "Dark": "অন্ধকার",
@@ -700,6 +702,7 @@
   "Sending_to": "পাঠাচ্ছি",
   "Server": "ওয়ার্কস্পেস",
   "Server_version": "ওয়ার্কস্পেস: {{version}}",
+  "Set_new_password": "নতুন পাসওয়ার্ড সেট করুন",
   "Set_username_subtitle": "ব্যবহারকারীর নামটি আপনাকে বার্তাগুলিতে উল্লেখ করতে অনুমতি দেওয়ার জন্য ব্যবহৃত হয়",
   "Settings": "সেটিংস",
   "Settings_succesfully_changed": "সেটিংস সফলভাবে পরিবর্তন হয়েছে!",

app/i18n/locales/cs.json

@@ -111,6 +111,7 @@
   "Certificate_password": "Heslo k certifikátu",
   "Change_Language": "Změnit jazyk",
   "Change_language_loading": "Změna jazyka.",
+  "Change_my_password": "Změnit moje heslo",
   "changed_room_announcement": "změnilo oznámení místnosti na: {{announcement}}",
   "changed_room_description": "změnil popis pokoje na: {{description}}",
   "changing_avatar": "měnící se avatar",
@@ -192,6 +193,7 @@
   "creating_discussion": "vytvoření diskuse",
   "creating_invite": "vytváření pozvánky",
   "creating_team": "vytváření týmu",
+  "Current_password": "Aktuální heslo",
   "Current_Status": "Aktuální stav",
   "Custom": "Vlastní",
   "Custom_push_gateway_connected_description": "Váš pracovní prostor používá vlastní bránu pro oznámení push. Případné problémy si ověřte u správce pracovního prostoru.",
@@ -748,6 +750,7 @@
   "Sending_to": "Odesílání do",
   "Server": "Pracovní prostor",
   "Server_version": "Pracovní prostor: {{version}}",
+  "Set_new_password": "Nastavit nové heslo",
   "Set_username_subtitle": "Uživatelské jméno se používá k tomu, aby se o vás ostatní mohli zmínit ve zprávách",
   "Settings": "Nastavení",
   "Settings_succesfully_changed": "Nastavení úspěšně změněno!",

app/i18n/locales/de.json

@@ -100,6 +100,7 @@
   "Certificate_password": "Zertifikats-Passwort",
   "Change_Language": "Sprache ändern",
   "Change_language_loading": "Ändere Sprache.",
+  "Change_my_password": "Ändere mein Passwort",
   "changed_room_announcement": "hat die Ankündigung des Raumes geändert zu: {{announcement}}",
   "changed_room_description": "hat die Raumbeschreibung geändert zu: {{description}}",
   "changing_avatar": "Avatar wechseln",
@@ -176,6 +177,7 @@
   "creating_discussion": "Erzeuge Diskussion",
   "creating_invite": "Einladung erstellen",
   "creating_team": "Team erstellen",
+  "Current_password": "Aktuelles Passwort",
   "Current_Status": "Aktueller Status",
   "Custom": "Benutzerdefiniert",
   "Dark": "Dunkel",
@@ -686,6 +688,7 @@
   "Sending_to": "Sende an",
   "Server": "Server",
   "Server_version": "Server: {{version}}",
+  "Set_new_password": "Neues Passwort festlegen",
   "Set_username_subtitle": "Der Benutzername wird verwendet, damit andere Personen Sie in Nachrichten erwähnen können",
   "Settings": "Einstellungen",
   "Settings_succesfully_changed": "Einstellungen erfolgreich geändert!",

app/i18n/locales/en.json

@@ -111,6 +111,7 @@
   "Certificate_password": "Certificate password",
   "Change_Language": "Change language",
   "Change_language_loading": "Changing language.",
+  "Change_my_password": "Change my password",
   "Change_password": "Change password",
   "changed_room_announcement": "changed room announcement to: {{announcement}}",
   "changed_room_description": "changed room description to: {{description}}",
@@ -195,6 +196,7 @@
   "creating_discussion": "creating discussion",
   "creating_invite": "creating invite",
   "creating_team": "creating team",
+  "Current_password": "Current password",
   "Current_Status": "Current Status",
   "Custom": "Custom",
   "Custom_push_gateway_connected_description": "Your workspace uses a custom push notification gateway. Check with your workspace administrator for any issues.",
@@ -777,6 +779,7 @@
   "Sending_to": "Sending to",
   "Server": "Workspace",
   "Server_version": "Workspace: {{version}}",
+  "Set_new_password": "Set new password",
   "Set_username_subtitle": "The username is used to allow others to mention you in messages",
   "Settings": "Settings",
   "Settings_succesfully_changed": "Settings succesfully changed!",

app/i18n/locales/es.json

@@ -61,6 +61,7 @@
   "Cancel_upload": "Cancelar carga",
   "Certificate_password": "Contraseña del certificado",
   "Change_Language": "Cambiar idioma",
+  "Change_my_password": "Cambiar mi contraseña",
   "changing_avatar": "cambiando avatar",
   "Channel_hint_private": "La gente solo puede unirse al ser invitado",
   "Channel_Name": "Nombre sala",
@@ -97,6 +98,7 @@
   "Create_new_channel_team_dm_discussion": "Crear nuevo canal, equipo, mensaje directo o discusión.",
   "Created_snippet": "crear mensaje en bloque",
   "creating_channel": "creando channel",
+  "Current_password": "Contraseña actual",
   "Current_Status": "Estado Actual",
   "Custom": "Personalizado",
   "Dark": "Oscuro",
@@ -335,6 +337,7 @@
   "Send_to": "Enviar a..",
   "Server": "Servidor",
   "Server_version": "Servidor: {{version}}",
+  "Set_new_password": "Establecer nueva contraseña",
   "Set_username_subtitle": "El nombre de usuario se utiliza para permitir que otros le mencionen en los mensajes",
   "Settings": "Configuración",
   "Settings_succesfully_changed": "¡Configuración cambiada correctamente!",