feat(a11y): inline errors newServerView

app/actions/server.ts

@@ -14,7 +14,9 @@ interface ISelectServerSuccess extends Action {
 	version: string;
 	name: string;
 }
-
+interface IServerFailure extends Action {
+	failureMessage?: string;
+}
 export interface IServerRequestAction extends Action {
 	server: string;
 	username: string | null;
@@ -25,7 +27,7 @@ interface IServerInit extends Action {
 	previousServer: string;
 }
 
-export type TActionServer = ISelectServerAction & ISelectServerSuccess & IServerRequestAction & IServerInit;
+export type TActionServer = ISelectServerAction & ISelectServerSuccess & IServerRequestAction & IServerInit & IServerFailure;
 
 export function selectServerRequest(
 	server: string,
@@ -92,9 +94,10 @@ export function serverSuccess(): Action {
 	};
 }
 
-export function serverFailure(): Action {
+export function serverFailure(failureMessage?: string): IServerFailure {
 	return {
-		type: SERVER.FAILURE
+		type: SERVER.FAILURE,
+		failureMessage
 	};
 }
 

app/reducers/server.ts

@@ -5,6 +5,7 @@ export interface IServer {
 	connecting: boolean;
 	connected: boolean;
 	failure: boolean;
+	failureMessage?: string;
 	server: string;
 	version: string;
 	name: string | null;
@@ -31,14 +32,16 @@ export default function server(state = initialState, action: TActionServer): ISe
 			return {
 				...state,
 				connecting: true,
-				failure: false
+				failure: false,
+				failureMessage: undefined
 			};
 		case SERVER.FAILURE:
 			return {
 				...state,
 				connecting: false,
 				connected: false,
-				failure: true
+				failure: true,
+				failureMessage: action.failureMessage
 			};
 		case SERVER.SELECT_CANCEL:
 			return {
@@ -79,7 +82,8 @@ export default function server(state = initialState, action: TActionServer): ISe
 				connecting: false,
 				connected: true,
 				loading: false,
-				changingServer: false
+				changingServer: false,
+				failureMessage: undefined
 			};
 		case SERVER.SELECT_FAILURE:
 			return {

app/sagas/selectServer.ts

@@ -1,5 +1,4 @@
 import { put, takeLatest } from 'redux-saga/effects';
-import { Alert } from 'react-native';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import { Q } from '@nozbe/watermelondb';
 import valid from 'semver/functions/valid';
@@ -104,14 +103,12 @@ const getServerInfoSaga = function* getServerInfoSaga({ server, raiseError = tru
 		const serverInfoResult = yield* call(getServerInfo, server);
 		if (raiseError) {
 			if (!serverInfoResult.success) {
-				Alert.alert(I18n.t('Invalid_workspace_URL'), serverInfoResult.message);
-				yield put(serverFailure());
+				yield put(serverFailure(I18n.t('Invalid_URL')));
 				return;
 			}
 			const websocketInfo = yield* call(Services.getWebsocketInfo, { server });
 			if (!websocketInfo.success) {
-				Alert.alert(I18n.t('Invalid_workspace_URL'), websocketInfo.message);
-				yield put(serverFailure());
+				yield put(serverFailure(I18n.t('Invalid_URL')));
 				return;
 			}
 		}

app/views/NewServerView/components/CertificatePicker/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+import sharedStyles from '../../../Styles';
+
+const styles = StyleSheet.create({
+	certificatePicker: {
+		alignItems: 'center',
+		justifyContent: 'flex-end'
+	},
+	chooseCertificateTitle: {
+		...sharedStyles.textRegular
+	},
+	chooseCertificate: {
+		...sharedStyles.textSemibold
+	},
+	buttonPrompt: {
+		...sharedStyles.textRegular,
+		textAlign: 'center',
+		lineHeight: 20
+	}
+});
+
+export default styles;

app/views/NewServerView/components/ServerInput/index.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, TextInputProps, View } from 'react-native';
+import { Control } from 'react-hook-form';
 
 import { useTheme } from '../../../../theme';
-import { FormTextInput } from '../../../../containers/TextInput';
+import { ControlledFormTextInput } from '../../../../containers/TextInput';
 import { TServerHistoryModel } from '../../../../definitions';
 import I18n from '../../../../i18n';
 import { CustomIcon } from '../../../../containers/CustomIcon';
@@ -13,39 +14,42 @@ import { ServersHistoryActionSheetContent } from '../ServersHistoryActionSheetCo
 const styles = StyleSheet.create({
 	container: {
 		flexDirection: 'row',
-		alignItems: 'flex-end',
+		alignItems: 'center',
 		gap: 4
 	},
 	inputContainer: {
 		flex: 1
-	},
-	input: {
-		marginTop: 0,
-		marginBottom: 0
-	},
-	serversHistoryButton: {
-		paddingVertical: 9
 	}
 });
 
 interface IServerInput extends TextInputProps {
-	text: string;
+	error?: string;
+	control: Control<
+		{
+			workspaceUrl: string;
+		},
+		any
+	>;
 	serversHistory: TServerHistoryModel[];
 	onSubmit(): void;
 	onDelete(item: TServerHistoryModel): void;
 	onPressServerHistory(serverHistory: TServerHistoryModel): void;
 }
 
 const ServerInput = ({
-	text,
+	error,
+	control,
 	serversHistory,
 	onChangeText,
 	onSubmit,
 	onDelete,
 	onPressServerHistory
 }: IServerInput): JSX.Element => {
+	const [focused, setFocused] = useState(false);
 	const { colors } = useTheme();
 
+	const historyButtonMarginBottom = error ? 15 : -15;
+
 	const handleDeleteServerHistory = (item: TServerHistoryModel) => {
 		onDelete(item);
 		hideActionSheetRef();
@@ -71,23 +75,27 @@ const ServerInput = ({
 	return (
 		<View style={styles.container}>
 			<View style={styles.inputContainer}>
-				<FormTextInput
+				<ControlledFormTextInput
+					name='workspaceUrl'
+					control={control}
 					label={I18n.t('Workspace_URL')}
-					containerStyle={styles.input}
-					value={text}
+					containerStyle={styles.inputContainer}
+					inputStyle={error && !focused ? { borderColor: colors.fontDanger } : {}}
 					returnKeyType='send'
-					onChangeText={onChangeText}
 					testID='new-server-view-input'
 					onSubmitEditing={onSubmit}
 					clearButtonMode='while-editing'
 					keyboardType='url'
 					textContentType='URL'
 					required
+					onChangeText={onChangeText}
+					onFocus={() => setFocused(true)}
+					onBlur={() => setFocused(false)}
+					error={error}
 				/>
 			</View>
-
 			{serversHistory?.length > 0 ? (
-				<View style={styles.serversHistoryButton}>
+				<View style={{ marginBottom: historyButtonMarginBottom }}>
 					<Touch
 						accessible
 						accessibilityLabel={I18n.t('Open_servers_history')}

app/views/NewServerView/hooks/useConnectServer.tsx

@@ -11,12 +11,12 @@ import { ISubmitParams } from '../definitions';
 import basicAuth from '../methods/basicAuth';
 
 type TUseNewServerProps = {
-	text: string;
+	workspaceUrl: string;
 	certificate: string | null;
 	previousServer: string | null;
 };
 
-const useConnectServer = ({ text, certificate, previousServer }: TUseNewServerProps) => {
+const useConnectServer = ({ workspaceUrl, certificate, previousServer }: TUseNewServerProps) => {
 	const dispatch = useDispatch();
 
 	const submit = ({ fromServerHistory = false, username, serverUrl }: ISubmitParams = {}) => {
@@ -27,17 +27,17 @@ const useConnectServer = ({ text, certificate, previousServer }: TUseNewServerPr
 			sdk.disconnect();
 			dispatch(selectServerClear());
 		}
-		if (text || serverUrl) {
+		if (workspaceUrl || serverUrl) {
 			Keyboard.dismiss();
-			const server = completeUrl(serverUrl ?? text);
+			const server = completeUrl(serverUrl ?? workspaceUrl);
 
 			// Save info - SSL Pinning
 			if (certificate) {
 				UserPreferences.setString(`${CERTIFICATE_KEY}-${server}`, certificate);
 			}
 
 			// Save info - HTTP Basic Authentication
-			basicAuth(server, serverUrl ?? text);
+			basicAuth(server, serverUrl ?? workspaceUrl);
 
 			if (fromServerHistory) {
 				dispatch(serverRequest(server, username, true));

app/views/NewServerView/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { BackHandler, Keyboard, Text } from 'react-native';
+import { AccessibilityInfo, BackHandler, Keyboard, Text } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { Image } from 'expo-image';
+import { useForm } from 'react-hook-form';
 
 import { inviteLinksClear } from '../../actions/inviteLinks';
 import { selectServerRequest, serverFinishAdd, serverRequest } from '../../actions/server';
@@ -27,27 +28,38 @@ import styles from './styles';
 const NewServerView = ({ navigation }: INewServerViewProps) => {
 	const dispatch = useDispatch();
 	const { colors } = useTheme();
-	const { previousServer, connecting } = useAppSelector(state => ({
+	const { previousServer, connecting, failureMessage } = useAppSelector(state => ({
 		previousServer: state.server.previousServer,
-		connecting: state.server.connecting
+		connecting: state.server.connecting,
+		failureMessage: state.server.failureMessage
 	}));
 
-	const [text, setText] = useState<string>('');
+	const {
+		control,
+		watch,
+		formState: { errors },
+		setValue,
+		setError,
+		clearErrors
+	} = useForm({ mode: 'onChange', defaultValues: { workspaceUrl: '' } });
+
+	const workspaceUrl = watch('workspaceUrl');
 	const [showBottomInfo, setShowBottomInfo] = useState<boolean>(true);
 	const { deleteServerHistory, queryServerHistory, serversHistory } = useServersHistory();
 	const { certificate, chooseCertificate, removeCertificate } = useCertificate();
-	const { submit } = useConnectServer({ text, certificate, previousServer });
+	const { submit } = useConnectServer({ workspaceUrl, certificate, previousServer });
 	const phoneMarginTop = previousServer ? 32 : 84;
 	const marginTop = isTablet ? 0 : phoneMarginTop;
 	const formContainerStyle = previousServer ? { paddingBottom: 100 } : {};
 
 	const onChangeText = (text: string) => {
-		setText(text);
+		setValue('workspaceUrl', text);
 		queryServerHistory(text);
+		clearErrors();
 	};
 
 	const onPressServerHistory = (serverHistory: TServerHistoryModel) => {
-		setText(serverHistory.url);
+		setValue('workspaceUrl', serverHistory.url);
 		submit({ fromServerHistory: true, username: serverHistory?.username, serverUrl: serverHistory?.url });
 	};
 
@@ -64,7 +76,7 @@ const NewServerView = ({ navigation }: INewServerViewProps) => {
 		if (!server) {
 			return;
 		}
-		setText(server);
+		setValue('workspaceUrl', server);
 		server = completeUrl(server);
 		dispatch(serverRequest(server));
 	};
@@ -92,6 +104,13 @@ const NewServerView = ({ navigation }: INewServerViewProps) => {
 		});
 	};
 
+	useEffect(() => {
+		if (failureMessage && !errors.workspaceUrl) {
+			AccessibilityInfo.announceForAccessibility(failureMessage);
+			setError('workspaceUrl', { message: failureMessage });
+		}
+	}, [failureMessage]);
+
 	useEffect(() => {
 		EventEmitter.addEventListener('NewServer', handleNewServerEvent);
 		const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
@@ -146,7 +165,8 @@ const NewServerView = ({ navigation }: INewServerViewProps) => {
 					{I18n.t('Add_server')}
 				</Text>
 				<ServerInput
-					text={text}
+					error={errors.workspaceUrl?.message}
+					control={control}
 					serversHistory={serversHistory}
 					onChangeText={onChangeText}
 					onSubmit={submit}
@@ -157,7 +177,7 @@ const NewServerView = ({ navigation }: INewServerViewProps) => {
 					title={I18n.t('Connect')}
 					type='primary'
 					onPress={submit}
-					disabled={!text || connecting}
+					disabled={!workspaceUrl || connecting}
 					loading={connecting}
 					style={styles.connectButton}
 					testID='new-server-view-button'