RealmInputScreen: Make client-side validation errors clearer (UX and code)

Before this, we were using some React state for whether to show a
line of red error text just below the input. We didn't unset it at
the moment the error condition went away, which could be confusing.

Also, the on-submit validation logic disagreed with the logic for
whether the button was disabled: the former counted an email address
as invalid, while the latter didn't.

Also, when the submit button *was* disabled -- the input value was a
URL that doesn't parse -- you wouldn't get the validation message
when you pressed it, because we weren't passing
isPressHandledWhenDisabled to the button. You could only get the
message to appear by triggering the TextInput's onSubmitEditing,
e.g. by pressing the go/enter button on a software keyboard.

Instead, do as we do for other validated inputs, like in the compose
box: on every render, track a validation error (if any) and use it
for the submit button's disabled state and its on-press callback,
with isPressHandledWhenDisabled.

Author: chrisbobbe

src/start/RealmInputScreen.js

@@ -7,7 +7,6 @@ import { useFocusEffect } from '@react-navigation/native';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import type { ServerSettings } from '../api/settings/getServerSettings';
-import ErrorMsg from '../common/ErrorMsg';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import Screen from '../common/Screen';
 import ZulipButton from '../common/ZulipButton';
@@ -17,18 +16,46 @@ import { ThemeContext } from '../styles/theme';
 import { createStyleSheet, HALF_COLOR } from '../styles';
 import { showErrorAlert } from '../utils/info';
 import { TranslationContext } from '../boot/TranslationProvider';
+import type { LocalizableText } from '../types';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'realm-input'>,
   route: RouteProp<'realm-input', {| initial: boolean | void |}>,
 |}>;
 
-const urlFromInputValue = (realmInputValue: string): URL | void => {
+enum ValidationError {
+  InvalidUrl = 0,
+  NoUseEmail = 1,
+}
+
+function validationErrorMsg(validationError: ValidationError): LocalizableText {
+  switch (validationError) {
+    case ValidationError.InvalidUrl:
+      return 'Please enter a valid URL.';
+    case ValidationError.NoUseEmail:
+      return 'Please enter the server URL, not your email.';
+  }
+}
+
+type MaybeParsedInput =
+  | {| +valid: true, value: URL |}
+  | {| +valid: false, error: ValidationError |};
+
+const tryParseInput = (realmInputValue: string): MaybeParsedInput => {
   const withScheme = /^https?:\/\//.test(realmInputValue)
     ? realmInputValue
     : `https://${realmInputValue}`;
 
-  return tryParseUrl(withScheme);
+  const url = tryParseUrl(withScheme);
+
+  if (!url) {
+    return { valid: false, error: ValidationError.InvalidUrl };
+  }
+  if (url.username !== '') {
+    return { valid: false, error: ValidationError.NoUseEmail };
+  }
+
+  return { valid: true, value: url };
 };
 
 export default function RealmInputScreen(props: Props): Node {
@@ -39,8 +66,7 @@ export default function RealmInputScreen(props: Props): Node {
 
   const [progress, setProgress] = React.useState(false);
   const [realmInputValue, setRealmInputValue] = React.useState('');
-  const parsedRealm = urlFromInputValue(realmInputValue);
-  const [validationErrorMsg, setError] = React.useState(null);
+  const maybeParsedInput = tryParseInput(realmInputValue);
 
   const textInputRef = React.useRef<React$ElementRef<typeof TextInput> | null>(null);
 
@@ -63,19 +89,14 @@ export default function RealmInputScreen(props: Props): Node {
   );
 
   const tryRealm = React.useCallback(async () => {
-    if (!parsedRealm) {
-      setError('Please enter a valid URL.');
-      return;
-    }
-    if (parsedRealm.username !== '') {
-      setError('Please enter the server URL, not your email.');
+    if (!maybeParsedInput.valid) {
+      showErrorAlert(_('Invalid input'), _(validationErrorMsg(maybeParsedInput.error)));
       return;
     }
 
     setProgress(true);
-    setError(null);
     try {
-      const serverSettings: ServerSettings = await api.getServerSettings(parsedRealm);
+      const serverSettings: ServerSettings = await api.getServerSettings(maybeParsedInput.value);
       navigation.push('auth', { serverSettings });
       Keyboard.dismiss();
     } catch (errorIllTyped) {
@@ -88,7 +109,7 @@ export default function RealmInputScreen(props: Props): Node {
     } finally {
       setProgress(false);
     }
-  }, [navigation, parsedRealm, _]);
+  }, [navigation, maybeParsedInput, _]);
 
   const styles = React.useMemo(
     () =>
@@ -141,17 +162,14 @@ export default function RealmInputScreen(props: Props): Node {
           ref={textInputRef}
         />
       </View>
-      {validationErrorMsg !== null ? (
-        <ErrorMsg error={validationErrorMsg} />
-      ) : (
-        <ZulipTextIntl text="e.g. zulip.example.com" style={styles.hintText} />
-      )}
+      <ZulipTextIntl text="e.g. zulip.example.com" style={styles.hintText} />
       <ZulipButton
         style={styles.button}
         text="Enter"
         progress={progress}
         onPress={tryRealm}
-        disabled={parsedRealm === undefined}
+        isPressHandledWhenDisabled
+        disabled={!maybeParsedInput.valid}
       />
     </Screen>
   );

static/translations/messages_en.json

@@ -122,6 +122,7 @@
   "Request timed out.": "Request timed out.",
   "Chat": "Chat",
   "Sign in with {method}": "Sign in with {method}",
+  "Invalid input": "Invalid input",
   "Cannot connect to server.": "Cannot connect to server.",
   "Please enter a valid URL.": "Please enter a valid URL.",
   "Please enter the server URL, not your email.": "Please enter the server URL, not your email.",