realm screen: Give early error when server URL is an email address.

Show an error message when the user tries to enter an email in the
server URL input field, even before trying to connect to the
server.

Fixes: #4058

Author: agrawal-d

src/start/RealmScreen.js

@@ -7,7 +7,7 @@ import { ZulipVersion } from '../utils/zulipVersion';
 import type { ApiResponseServerSettings, Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { ErrorMsg, Label, SmartUrlInput, Screen, ZulipButton } from '../common';
-import { isValidUrl } from '../utils/url';
+import { isValidUrl, tryParseUrl } from '../utils/url';
 import * as api from '../api';
 import { realmAdd, navigateToAuth } from '../actions';
 
@@ -45,14 +45,21 @@ class RealmScreen extends PureComponent<Props, State> {
   tryRealm = async () => {
     const { realm } = this.state;
 
+    const parsedRealm = tryParseUrl(realm);
+    if (!parsedRealm) {
+      this.setState({ error: 'Please enter a valid URL' });
+      return;
+    }
+    if (parsedRealm.username !== '') {
+      this.setState({ error: 'Please enter the server URL, not your email' });
+      return;
+    }
+
+    const { dispatch } = this.props;
     this.setState({
-      realm,
       progress: true,
       error: null,
     });
-
-    const { dispatch } = this.props;
-
     try {
       const serverSettings: ApiResponseServerSettings = await api.getServerSettings(realm);
       dispatch(realmAdd(realm, new ZulipVersion(serverSettings.zulip_version)));

static/translations/messages_en.json

@@ -36,6 +36,8 @@
   "Chat": "Chat",
   "Sign in with {method}": "Sign in with {method}",
   "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",
   "Wrong email or password. Try again.": "Wrong email or password. Try again.",
   "Wrong username or password. Try again.": "Wrong username or password. Try again.",
   "Enter a valid email address": "Enter a valid email address",