Implement design and copy for errors
This commit is contained in:
parent
10f4d6b419
commit
ace1bde238
8 changed files with 42 additions and 29 deletions
|
@ -12,7 +12,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
height: 200px;
|
height: 125px;
|
||||||
border: 1px solid #f22;
|
border: 1px solid #f22;
|
||||||
padding: 10px 10px 20px;
|
padding: 10px 10px 20px;
|
||||||
background-color: #fcc;
|
background-color: #fcc;
|
||||||
|
|
|
@ -62,6 +62,11 @@ limitations under the License.
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_Login_error.mx_Login_serverError {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.mx_Login_type_container {
|
.mx_Login_type_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -16,22 +16,18 @@ limitations under the License.
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {_t} from "../../languageHandler";
|
|
||||||
|
|
||||||
export default class GenericErrorPage extends React.PureComponent {
|
export default class GenericErrorPage extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
title: PropTypes.object.isRequired, // jsx for title
|
||||||
message: PropTypes.object.isRequired, // jsx to display
|
message: PropTypes.object.isRequired, // jsx to display
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return <div className='mx_GenericErrorPage'>
|
return <div className='mx_GenericErrorPage'>
|
||||||
<div className='mx_GenericErrorPage_box'>
|
<div className='mx_GenericErrorPage_box'>
|
||||||
<h1>{_t("Error loading Riot")}</h1>
|
<h1>{this.props.title}</h1>
|
||||||
<p>{this.props.message}</p>
|
<p>{this.props.message}</p>
|
||||||
<p>{_t(
|
|
||||||
"If this is unexpected, please contact your system administrator " +
|
|
||||||
"or technical support representative.",
|
|
||||||
)}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -213,9 +213,8 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
let serverDeadSection;
|
let serverDeadSection;
|
||||||
if (!this.state.serverIsAlive) {
|
if (!this.state.serverIsAlive) {
|
||||||
// TODO: TravisR - Design from Nad
|
|
||||||
serverDeadSection = (
|
serverDeadSection = (
|
||||||
<div className="mx_Login_error">
|
<div className="mx_Login_error mx_Login_serverError">
|
||||||
{this.state.serverDeadError}
|
{this.state.serverDeadError}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -568,9 +568,8 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
let serverDeadSection;
|
let serverDeadSection;
|
||||||
if (!this.state.serverIsAlive) {
|
if (!this.state.serverIsAlive) {
|
||||||
// TODO: TravisR - Design from Nad
|
|
||||||
serverDeadSection = (
|
serverDeadSection = (
|
||||||
<div className="mx_Login_error">
|
<div className="mx_Login_error mx_Login_serverError">
|
||||||
{this.state.serverDeadError}
|
{this.state.serverDeadError}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -485,9 +485,8 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
let serverDeadSection;
|
let serverDeadSection;
|
||||||
if (!this.state.serverIsAlive) {
|
if (!this.state.serverIsAlive) {
|
||||||
// TODO: TravisR - Design from Nad
|
|
||||||
serverDeadSection = (
|
serverDeadSection = (
|
||||||
<div className="mx_Login_error">
|
<div className="mx_Login_error mx_Login_serverError">
|
||||||
{this.state.serverDeadError}
|
{this.state.serverDeadError}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 …|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 %(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 …",
|
"%(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",
|
"No homeserver URL provided": "No homeserver URL provided",
|
||||||
"Unexpected error resolving homeserver configuration": "Unexpected error resolving homeserver configuration",
|
"Unexpected error resolving homeserver configuration": "Unexpected error resolving homeserver configuration",
|
||||||
"Unexpected error resolving identity server configuration": "Unexpected error resolving identity server 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 <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",
|
"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",
|
"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",
|
"<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",
|
"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?",
|
"Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
|
||||||
|
|
|
@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
import {AutoDiscovery} from "matrix-js-sdk";
|
import {AutoDiscovery} from "matrix-js-sdk";
|
||||||
import {_t, _td, newTranslatableError} from "../languageHandler";
|
import {_t, _td, newTranslatableError} from "../languageHandler";
|
||||||
import {makeType} from "./TypeUtils";
|
import {makeType} from "./TypeUtils";
|
||||||
|
@ -56,19 +57,33 @@ export default class AutoDiscoveryUtils {
|
||||||
* for the component, given the error.
|
* for the component, given the error.
|
||||||
*/
|
*/
|
||||||
static authComponentStateForError(err: Error): {serverIsAlive: boolean, serverDeadError: string} {
|
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>
|
||||||
|
),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue