Merge pull request #3088 from matrix-org/travis/less-fatal-identity

Don't handle identity server failure as fatal, and use the right message

res/css/structures/auth/_Login.scss

@@ -67,6 +67,10 @@ limitations under the License.
     font-weight: normal;
 }
 
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+    color: $orange-warning-color;
+}
+
 .mx_Login_type_container {
     display: flex;
     align-items: center;

res/themes/light/css/_light.scss

@@ -35,8 +35,9 @@ $selection-fg-color: $primary-bg-color;
 
 $focus-brightness: 105%;
 
-// red warning colour
+// warning colours
-$warning-color: $notice-primary-color;
+$warning-color: $notice-primary-color; // red
+$orange-warning-color: #ff8d13; // used for true warnings
 // background colour for warnings
 $warning-bg-color: #DF2A8B;
 $info-bg-color: #2A9EDF;

src/components/structures/auth/ForgotPassword.js

@@ -23,6 +23,7 @@ import Modal from "../../../Modal";
 import SdkConfig from "../../../SdkConfig";
 import PasswordReset from "../../../PasswordReset";
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import classNames from 'classnames';
 
 // Phases
 // Show controls to configure server details
@@ -59,6 +60,7 @@ module.exports = React.createClass({
             // that we can render it differently, and override any other error the user may
             // be seeing.
             serverIsAlive: true,
+            serverErrorIsFatal: false,
             serverDeadError: "",
         };
     },
@@ -83,7 +85,7 @@ module.exports = React.createClass({
             );
             this.setState({serverIsAlive: true});
         } catch (e) {
-            this.setState(AutoDiscoveryUtils.authComponentStateForError(e));
+            this.setState(AutoDiscoveryUtils.authComponentStateForError(e, "forgot_password"));
         }
     },
 
@@ -120,6 +122,7 @@ module.exports = React.createClass({
     onSubmitForm: async function(ev) {
         ev.preventDefault();
 
+        // refresh the server errors, just in case the server came back online
         await this._checkServerLiveliness(this.props.serverConfig);
 
         if (!this.state.email) {
@@ -213,8 +216,13 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
+            const classes = classNames({
+                "mx_Login_error": true,
+                "mx_Login_serverError": true,
+                "mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
+            });
             serverDeadSection = (
-                <div className="mx_Login_error mx_Login_serverError">
+                <div className={classes}>
                     {this.state.serverDeadError}
                 </div>
             );

src/components/structures/auth/Login.js

@@ -26,6 +26,7 @@ import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import classNames from "classnames";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -100,6 +101,7 @@ module.exports = React.createClass({
             // that we can render it differently, and override any other error the user may
             // be seeing.
             serverIsAlive: true,
+            serverErrorIsFatal: false,
             serverDeadError: "",
         };
     },
@@ -349,8 +351,10 @@ module.exports = React.createClass({
                 busy: false,
                 ...AutoDiscoveryUtils.authComponentStateForError(e),
             });
+            if (this.state.serverErrorIsFatal) {
                 return; // Server is dead - do not continue.
             }
+        }
 
         loginLogic.getFlows().then((flows) => {
             // look for a flow where we understand all of the steps.
@@ -561,8 +565,13 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
+            const classes = classNames({
+                "mx_Login_error": true,
+                "mx_Login_serverError": true,
+                "mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
+            });
             serverDeadSection = (
-                <div className="mx_Login_error mx_Login_serverError">
+                <div className={classes}>
                     {this.state.serverDeadError}
                 </div>
             );

src/components/structures/auth/Registration.js

@@ -27,6 +27,7 @@ import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import * as ServerType from '../../views/auth/ServerTypeSelector';
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import classNames from "classnames";
 
 // Phases
 // Show controls to configure server details
@@ -85,6 +86,7 @@ module.exports = React.createClass({
             // that we can render it differently, and override any other error the user may
             // be seeing.
             serverIsAlive: true,
+            serverErrorIsFatal: false,
             serverDeadError: "",
         };
     },
@@ -168,9 +170,11 @@ module.exports = React.createClass({
             );
             this.setState({serverIsAlive: true});
         } catch (e) {
-            this.setState(AutoDiscoveryUtils.authComponentStateForError(e));
+            this.setState(AutoDiscoveryUtils.authComponentStateForError(e, "register"));
+            if (this.state.serverErrorIsFatal) {
                 return; // Server is dead - do not continue.
             }
+        }
 
         const {hsUrl, isUrl} = serverConfig;
         this._matrixClient = Matrix.createClient({
@@ -467,7 +471,7 @@ module.exports = React.createClass({
                 onEditServerDetailsClick={onEditServerDetailsClick}
                 flows={this.state.flows}
                 serverConfig={this.props.serverConfig}
-                canSubmit={this.state.serverIsAlive}
+                canSubmit={this.state.serverIsAlive && !this.state.serverErrorIsFatal}
             />;
         }
     },
@@ -485,8 +489,13 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
+            const classes = classNames({
+                "mx_Login_error": true,
+                "mx_Login_serverError": true,
+                "mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
+            });
             serverDeadSection = (
-                <div className="mx_Login_error mx_Login_serverError">
+                <div className={classes}>
                     {this.state.serverDeadError}
                 </div>
             );

src/i18n/strings/en_EN.json

@@ -253,6 +253,10 @@
     "Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin",
     "Your Riot is misconfigured": "Your Riot is misconfigured",
     "Ask your Riot admin to check <a>your config</a> for incorrect or duplicate entries.": "Ask your Riot admin to check <a>your config</a> for incorrect or duplicate entries.",
+    "Cannot reach identity server": "Cannot reach identity server",
+    "You can register, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "You can register, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.",
+    "You can reset your password, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "You can reset your password, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.",
+    "You can log in, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.": "You can log in, but some features will be unavailable until the identity server is back online. If you keep seeing this warning, check your configuration or contact a server admin.",
     "No homeserver URL provided": "No homeserver URL provided",
     "Unexpected error resolving homeserver configuration": "Unexpected error resolving homeserver configuration",
     "Unexpected error resolving identity server configuration": "Unexpected error resolving identity server configuration",

src/utils/AutoDiscoveryUtils.js

@@ -20,7 +20,7 @@ import {_t, _td, newTranslatableError} from "../languageHandler";
 import {makeType} from "./TypeUtils";
 import SdkConfig from "../SdkConfig";
 
-const LIVLINESS_DISCOVERY_ERRORS = [
+const LIVELINESS_DISCOVERY_ERRORS = [
     AutoDiscovery.ERROR_INVALID_HOMESERVER,
     AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER,
 ];
@@ -46,17 +46,18 @@ export default class AutoDiscoveryUtils {
      */
     static isLivelinessError(error: string|Error): boolean {
         if (!error) return false;
-        return !!LIVLINESS_DISCOVERY_ERRORS.find(e => e === error || e === error.message);
+        return !!LIVELINESS_DISCOVERY_ERRORS.find(e => e === error || e === error.message);
     }
 
     /**
      * Gets the common state for auth components (login, registration, forgot
      * password) for a given validation error.
      * @param {Error} err The error encountered.
-     * @returns {{serverDeadError: (string|*), serverIsAlive: boolean}} The state
+     * @param {string} pageName The page for which the error should be customized to. See
-     * for the component, given the error.
+     * implementation for known values.
+     * @returns {*} The state for the component, given the error.
      */
-    static authComponentStateForError(err: Error): {serverIsAlive: boolean, serverDeadError: string} {
+    static authComponentStateForError(err: Error, pageName="login"): Object {
         let title = _t("Cannot reach homeserver");
         let body = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
         if (!AutoDiscoveryUtils.isLivelinessError(err)) {
@@ -75,8 +76,38 @@ export default class AutoDiscoveryUtils {
             );
         }
 
+        let isFatalError = true;
+        const errorMessage = err.message ? err.message : err;
+        if (errorMessage === AutoDiscovery.ERROR_INVALID_IDENTITY_SERVER) {
+            isFatalError = false;
+            title = _t("Cannot reach identity server");
+
+            // It's annoying having a ladder for the third word in the same sentence, but our translations
+            // don't make this easy to avoid.
+            if (pageName === "register") {
+                body = _t(
+                    "You can register, but some features will be unavailable until the identity server is " +
+                    "back online. If you keep seeing this warning, check your configuration or contact a server " +
+                    "admin.",
+                );
+            } else if (pageName === "reset_password") {
+                body = _t(
+                    "You can reset your password, but some features will be unavailable until the identity " +
+                    "server is back online. If you keep seeing this warning, check your configuration or contact " +
+                    "a server admin.",
+                );
+            } else {
+                body = _t(
+                    "You can log in, but some features will be unavailable until the identity server is " +
+                    "back online. If you keep seeing this warning, check your configuration or contact a server " +
+                    "admin.",
+                );
+            }
+        }
+
         return {
             serverIsAlive: false,
+            serverErrorIsFatal: isFatalError,
             serverDeadError: (
                 <div>
                     <strong>{title}</strong>