Implement design and copy for errors

res/css/structures/_GenericErrorPage.scss

@@ -12,7 +12,7 @@
     right: 0;
     margin: auto;
     width: 500px;
-    height: 200px;
+    height: 125px;
     border: 1px solid #f22;
     padding: 10px 10px 20px;
     background-color: #fcc;

res/css/structures/auth/_Login.scss

@@ -62,6 +62,11 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
+.mx_Login_error.mx_Login_serverError {
+    text-align: left;
+    font-weight: normal;
+}
+
 .mx_Login_type_container {
     display: flex;
     align-items: center;

src/components/structures/GenericErrorPage.js

@@ -16,22 +16,18 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from "../../languageHandler";
 
 export default class GenericErrorPage extends React.PureComponent {
     static propTypes = {
+        title: PropTypes.object.isRequired, // jsx for title
         message: PropTypes.object.isRequired, // jsx to display
     };
 
     render() {
         return <div className='mx_GenericErrorPage'>
             <div className='mx_GenericErrorPage_box'>
-                <h1>{_t("Error loading Riot")}</h1>
+                <h1>{this.props.title}</h1>
                 <p>{this.props.message}</p>
-                <p>{_t(
-                    "If this is unexpected, please contact your system administrator " +
-                    "or technical support representative.",
-                )}</p>
             </div>
         </div>;
     }

src/components/structures/auth/ForgotPassword.js

@@ -213,9 +213,8 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
-            // TODO: TravisR - Design from Nad
             serverDeadSection = (
-                <div className="mx_Login_error">
+                <div className="mx_Login_error mx_Login_serverError">
                     {this.state.serverDeadError}
                 </div>
             );

src/components/structures/auth/Login.js

@@ -568,9 +568,8 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
-            // TODO: TravisR - Design from Nad
             serverDeadSection = (
-                <div className="mx_Login_error">
+                <div className="mx_Login_error mx_Login_serverError">
                     {this.state.serverDeadError}
                 </div>
             );

src/components/structures/auth/Registration.js

@@ -485,9 +485,8 @@ module.exports = React.createClass({
 
         let serverDeadSection;
         if (!this.state.serverIsAlive) {
-            // TODO: TravisR - Design from Nad
             serverDeadSection = (
-                <div className="mx_Login_error">
+                <div className="mx_Login_error mx_Login_serverError">
                     {this.state.serverDeadError}
                 </div>
             );

src/i18n/strings/en_EN.json

@@ -249,8 +249,10 @@
     "%(names)s and %(count)s others are typing …|other": "%(names)s and %(count)s others are typing …",
     "%(names)s and %(count)s others are typing …|one": "%(names)s and one other is typing …",
     "%(names)s and %(lastPerson)s are typing …": "%(names)s and %(lastPerson)s are typing …",
-    "Server failed liveliness check": "Server failed liveliness check",
+    "Cannot reach homeserver": "Cannot reach homeserver",
-    "Server failed syntax check": "Server failed syntax check",
+    "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.",
     "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",
@@ -1387,8 +1389,6 @@
     "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
     "You must join the room to see its files": "You must join the room to see its files",
     "There are no visible files in this room": "There are no visible files in this room",
-    "Error loading Riot": "Error loading Riot",
-    "If this is unexpected, please contact your system administrator or technical support representative.": "If this is unexpected, please contact your system administrator or technical support representative.",
     "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n    Use the long description to introduce new members to the community, or distribute\n    some important <a href=\"foo\">links</a>\n</p>\n<p>\n    You can even use 'img' tags\n</p>\n",
     "Add rooms to the community summary": "Add rooms to the community summary",
     "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",

src/utils/AutoDiscoveryUtils.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
 import {AutoDiscovery} from "matrix-js-sdk";
 import {_t, _td, newTranslatableError} from "../languageHandler";
 import {makeType} from "./TypeUtils";
@@ -56,19 +57,33 @@ export default class AutoDiscoveryUtils {
      * for the component, given the error.
      */
     static authComponentStateForError(err: Error): {serverIsAlive: boolean, serverDeadError: string} {
-        if (AutoDiscoveryUtils.isLivelinessError(err)) {
+        let title = _t("Cannot reach homeserver");
-            // TODO: TravisR - Copy from Nad
+        let body = _t("Ensure you have a stable internet connection, or get in touch with the server admin");
-            return {
+        if (!AutoDiscoveryUtils.isLivelinessError(err)) {
-                serverIsAlive: false,
+            title = _t("Your Riot is misconfigured");
-                serverDeadError: _t("Server failed liveliness check"),
+            body = _t(
-            };
+                "Ask your Riot admin to check <a>your config</a> for incorrect or duplicate entries.",
-        } else {
+                {}, {
-            // TODO: TravisR - Copy from Nad
+                    a: (sub) => {
-            return {
+                        return <a
-                serverIsAlive: false,
+                            href="https://github.com/vector-im/riot-web#configjson"
-                serverDeadError: _t("Server failed syntax check"),
+                            target="_blank"
-            };
+                            rel="noopener"
+                        >{sub}</a>;
+                    }
+                },
+            );
         }
+
+        return {
+            serverIsAlive: false,
+            serverDeadError: (
+                <div>
+                    <strong>{title}</strong>
+                    <div>{body}</div>
+                </div>
+            ),
+        };
     }
 
     /**