Add a generic error page element for startup errors

Used by Riot to communicate configuration problems.

res/css/_components.scss

@@ -6,6 +6,7 @@
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
+@import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";

res/css/structures/_GenericErrorPage.scss

@@ -0,0 +1,19 @@
+.mx_GenericErrorPage {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+}
+
+.mx_GenericErrorPage_box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 500px;
+    height: 200px;
+    border: 1px solid #f22;
+    padding: 10px;
+    background-color: #fcc;
+}

src/components/structures/GenericErrorPage.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+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 = {
+        message: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return <div className='mx_GenericErrorPage'>
+            <div className='mx_GenericErrorPage_box'>
+                <h1>{_t("Error loading Riot")}</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/i18n/strings/en_EN.json

@@ -1336,6 +1336,8 @@
     "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?",