PLT-7468 Moved more error pages to use predefined error types (#7378)

* PLT-7468 Moved more errors to use error types

* PLT-7468 Moved 404 error page to use error types

* Made helper function for rendering external links on error page

1 files changed, 118 insertions, 45 deletions

diff --git a/webapp/components/error_page.jsx b/webapp/components/error_page.jsx
index 14f6f2488..4e3e73188 100644
--- a/webapp/components/error_page.jsx
+++ b/webapp/components/error_page.jsx
@@ -8,7 +8,6 @@ import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router/es6';
 
 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 {
@@ -16,14 +15,6 @@ export default class ErrorPage extends React.Component {
         location: 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');
     }
@@ -32,18 +23,29 @@ export default class ErrorPage extends React.Component {
         $('body').attr('class', '');
     }
 
-    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) {
+    renderTitle = () => {
+        switch (this.props.location.query.type) {
+        case ErrorPageTypes.LOCAL_STORAGE:
             return (
                 <FormattedMessage
                     id='error.local_storage.title'
                     defaultMessage='Cannot Load Mattermost'
                 />
             );
+        case ErrorPageTypes.PERMALINK_NOT_FOUND:
+            return (
+                <FormattedMessage
+                    id='permalink.error.title'
+                    defaultMessage='Message Not Found'
+                />
+            );
+        case ErrorPageTypes.PAGE_NOT_FOUND:
+            return (
+                <FormattedMessage
+                    id='error.not_found.title'
+                    defaultMessage='Message Not Found'
+                />
+            );
         }
 
         if (this.props.location.query.title) {
@@ -53,8 +55,9 @@ export default class ErrorPage extends React.Component {
         return Utils.localizeMessage('error.generic.title', 'Error');
     }
 
-    renderMessage() {
-        if (this.props.location.query.type === ErrorPageTypes.LOCAL_STORAGE) {
+    renderMessage = () => {
+        switch (this.props.location.query.type) {
+        case ErrorPageTypes.LOCAL_STORAGE:
             return (
                 <div>
                     <FormattedMessage
@@ -83,45 +86,108 @@ export default class ErrorPage extends React.Component {
                     </ul>
                 </div>
             );
+        case ErrorPageTypes.PERMALINK_NOT_FOUND:
+            return (
+                <p>
+                    <FormattedMessage
+                        id='permalink.error.access'
+                        defaultMessage='Permalink belongs to a deleted message or to a channel to which you do not have access.'
+                    />
+                </p>
+            );
+        case ErrorPageTypes.OAUTH_MISSING_CODE:
+            return (
+                <div>
+                    <p>
+                        <FormattedMessage
+                            id='error.oauth_missing_code'
+                            defaultMessage='The service provider {service} did not provide an authorization code in the redirect URL.'
+                            values={{
+                                service: this.props.location.query.service
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='error.oauth_missing_code.google'
+                            defaultMessage='For {link} make sure your administrator enabled the Google+ API.'
+                            values={{
+                                link: this.renderLink('https://docs.mattermost.com/deployment/sso-google.html', 'error.oauth_missing_code.google.link', 'Google Apps')
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='error.oauth_missing_code.office365'
+                            defaultMessage='For {link} make sure the administrator of your Microsoft organization has enabled the Mattermost app.'
+                            values={{
+                                link: this.renderLink('https://docs.mattermost.com/deployment/sso-office.html', 'error.oauth_missing_code.office365.link', 'Office 365')
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='error.oauth_missing_code.gitlab'
+                            defaultMessage='For {link} please make sure you followed the setup instructions.'
+                            values={{
+                                link: this.renderLink('https://docs.mattermost.com/deployment/sso-gitlab.html', 'error.oauth_missing_code.gitlab.link', 'GitLab')
+                            }}
+                        />
+                    </p>
+                    <p>
+                        <FormattedMessage
+                            id='error.oauth_missing_code.forum'
+                            defaultMessage="If you reviewed the above and are still having trouble with configuration, you may post in our {link} where we'll be happy to help with issues during setup."
+                            values={{
+                                link: this.renderLink('https://forum.mattermost.org/c/trouble-shoot', 'error.oauth_missing_code.forum.link', 'Troubleshooting forum')
+                            }}
+                        />
+                    </p>
+                </div>
+            );
+        case ErrorPageTypes.PAGE_NOT_FOUND:
+            return (
+                <p>
+                    <FormattedMessage
+                        id='error.not_found.message'
+                        defaultMessage='The page you were trying to reach does not exist'
+                    />
+                </p>
+            );
         }
 
-        let message = this.props.location.query.message;
-        if (!message) {
-            message = Utils.localizeMessage('error.generic.message', 'An error has occoured.');
+        if (this.props.location.query.message) {
+            return <p>{this.props.location.query.message}</p>;
         }
 
-        return <div dangerouslySetInnerHTML={{__html: TextFormatting.formatText(message, {linkFilter: this.linkFilter})}}/>;
+        return (
+            <p>
+                <FormattedMessage
+                    id='error.generic.message'
+                    defaultMessage='An error has occurred.'
+                />
+            </p>
+        );
     }
 
-    renderLink() {
-        let link = this.props.location.query.link;
-        if (link) {
-            link = link.trim();
-        } else {
-            link = '/';
-        }
-
-        if (!link.startsWith('/')) {
-            // Only allow relative links
-            link = '/';
-        }
-
-        let linkMessage = this.props.location.query.linkmessage;
-        if (!linkMessage) {
-            linkMessage = Utils.localizeMessage('error.generic.link_message', 'Back to Mattermost');
-        }
-
+    renderLink = (url, id, defaultMessage) => {
         return (
-            <Link to={link}>
-                {linkMessage}
-            </Link>
+            <a
+                href={url}
+                rel='noopener noreferrer'
+                target='_blank'
+            >
+                <FormattedMessage
+                    id={id}
+                    defaultMessage={defaultMessage}
+                />
+            </a>
         );
     }
 
     render() {
         const title = this.renderTitle();
         const message = this.renderMessage();
-        const link = this.renderLink();
 
         return (
             <div className='container-fluid'>
@@ -129,9 +195,16 @@ export default class ErrorPage extends React.Component {
                     <div className='error__icon'>
                         <i className='fa fa-exclamation-triangle'/>
                     </div>
-                    <h2>{title}</h2>
+                    <h2>
+                        {title}
+                    </h2>
                     {message}
-                    {link}
+                    <Link to='/'>
+                        <FormattedMessage
+                            id='error.generic.link'
+                            defaultMessage='Back to Mattermost'
+                        />
+                    </Link>
                 </div>
             </div>
         );