diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-04-04 19:21:31 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-04-04 19:21:31 -0400 |
commit | f7a4c75a214fb239989618e9583d78f98256e66c (patch) | |
tree | 3d645fc2a62c96985c069a32e93e3ab9dd964616 /webapp/components/error_page.jsx | |
parent | a0c91ef4afceffb100c75bd67585021a13abc24e (diff) | |
download | chat-f7a4c75a214fb239989618e9583d78f98256e66c.tar.gz chat-f7a4c75a214fb239989618e9583d78f98256e66c.tar.bz2 chat-f7a4c75a214fb239989618e9583d78f98256e66c.zip |
PLT-5702 Added special error page for private browsing error message (#5985)
Diffstat (limited to 'webapp/components/error_page.jsx')
-rw-r--r-- | webapp/components/error_page.jsx | 112 |
1 files changed, 93 insertions, 19 deletions
diff --git a/webapp/components/error_page.jsx b/webapp/components/error_page.jsx index 7de488f06..9bd2c722d 100644 --- a/webapp/components/error_page.jsx +++ b/webapp/components/error_page.jsx @@ -2,14 +2,27 @@ // See License.txt for license information. import $ from 'jquery'; - import React from 'react'; +import {FormattedMessage} from 'react-intl'; import {Link} from 'react-router/es6'; -import * as Utils from 'utils/utils.jsx'; +import {ErrorPageTypes} from 'utils/constants.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; +import * as Utils from 'utils/utils.jsx'; export default class ErrorPage extends React.Component { + static propTypes = { + location: React.PropTypes.object.isRequired + }; + + constructor(props) { + super(props); + + this.renderTitle = this.renderTitle.bind(this); + this.renderMessage = this.renderMessage.bind(this); + this.renderLink = this.renderLink.bind(this); + } + componentDidMount() { $('body').attr('class', 'sticky error'); } @@ -18,47 +31,108 @@ export default class ErrorPage extends React.Component { $('body').attr('class', ''); } - render() { - let title = this.props.location.query.title; - if (!title || title === '') { - title = Utils.localizeMessage('error.generic.title', 'Error'); + linkFilter(link) { + return link.startsWith('https://docs.mattermost.com') || link.startsWith('https://forum.mattermost.org'); + } + + renderTitle() { + if (this.props.location.query.type === ErrorPageTypes.LOCAL_STORAGE) { + return ( + <FormattedMessage + id='error.local_storage.title' + defaultMessage='Cannot Load Mattermost' + /> + ); + } + + if (this.props.location.query.title) { + return this.props.location.query.title; + } + + return Utils.localizeMessage('error.generic.title', 'Error'); + } + + renderMessage() { + if (this.props.location.query.type === ErrorPageTypes.LOCAL_STORAGE) { + return ( + <div> + <FormattedMessage + id='error.local_storage.message' + defaultMessage='Mattermost was unable to load because a setting in your browser prevents the use of its local storage features. To allow Mattermost to load, try the following actions:' + /> + <ul> + <li> + <FormattedMessage + id='error.local_storage.help1' + defaultMessage='Enable cookies' + /> + </li> + <li> + <FormattedMessage + id='error.local_storage.help2' + defaultMessage='Turn off private browsing' + /> + </li> + <li> + <FormattedMessage + id='error.local_storage.help3' + defaultMessage='Use a supported browser (IE 11, Chrome 43+, Firefox 38+, Safari 9, Edge)' + /> + </li> + </ul> + </div> + ); } let message = this.props.location.query.message; - if (!message || message === '') { + if (!message) { message = Utils.localizeMessage('error.generic.message', 'An error has occoured.'); } + return <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(message, {linkFilter: this.linkFilter})}}/>; + } + + renderLink() { let link = this.props.location.query.link; - if (!link || link === '') { + if (link) { + link = link.trim(); + } else { link = '/'; - } else if (link.startsWith('javascript:') || link.startsWith('vbscript:') || link.startsWith('data:')) { // eslint-disable-line no-script-url - // Sanitize out any script links + } + + if (!link.startsWith('/')) { + // Only allow relative links link = '/'; } let linkMessage = this.props.location.query.linkmessage; - if (!linkMessage || linkMessage === '') { + if (!linkMessage) { linkMessage = Utils.localizeMessage('error.generic.link_message', 'Back to Mattermost'); } return ( + <Link to={link}> + {linkMessage} + </Link> + ); + } + + render() { + const title = this.renderTitle(); + const message = this.renderMessage(); + const link = this.renderLink(); + + return ( <div className='container-fluid'> <div className='error__container'> <div className='error__icon'> <i className='fa fa-exclamation-triangle'/> </div> <h2>{title}</h2> - <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(message)}}/> - <Link to={link}>{linkMessage}</Link> + {message} + {link} </div> </div> ); } } - -ErrorPage.defaultProps = { -}; -ErrorPage.propTypes = { - location: React.PropTypes.object -}; |