Merge pull request #2614 from mattermost/plt-2388

PLT-2388 Visiting invalid URLs and bad APIs causes redirect to error page

webapp/components/error_page.jsx

@@ -0,0 +1,58 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+
+import React from 'react';
+import {Link} from 'react-router';
+
+import * as Utils from 'utils/utils.jsx';
+
+export default class ErrorPage extends React.Component {
+    componentDidMount() {
+        $('body').attr('class', 'sticky error');
+    }
+    componentWillUnmount() {
+        $('body').attr('class', '');
+    }
+    render() {
+        let title = this.props.location.query.title;
+        if (!title || title === '') {
+            title = Utils.localizeMessage('error.generic.title', 'Error');
+        }
+
+        let message = this.props.location.query.message;
+        if (!message || message === '') {
+            message = Utils.localizeMessage('error.generic.message', 'An error has occoured.');
+        }
+
+        let link = this.props.location.query.link;
+        if (!link || link === '') {
+            link = '/';
+        }
+
+        let linkMessage = this.props.location.query.linkmessage;
+        if (!linkMessage || linkMessage === '') {
+            linkMessage = Utils.localizeMessage('error.generic.link_message', 'Back to Mattermost');
+        }
+
+        return (
+            <div className='container-fluid'>
+                <div className='error__container'>
+                    <div className='error__icon'>
+                        <i className='fa fa-exclamation-triangle'/>
+                    </div>
+                    <h2>{title}</h2>
+                    <p>{message}</p>
+                    <Link to={link}>{linkMessage}</Link>
+                </div>
+            </div>
+        );
+    }
+}
+
+ErrorPage.defaultProps = {
+};
+ErrorPage.propTypes = {
+    location: React.PropTypes.object
+};

webapp/root.jsx

@@ -10,7 +10,7 @@ import 'sass/styles.scss';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
+import {Router, Route, IndexRoute, IndexRedirect, Redirect, browserHistory} from 'react-router';
 import Root from 'components/root.jsx';
 import LoggedIn from 'components/logged_in.jsx';
 import NotLoggedIn from 'components/not_logged_in.jsx';
@@ -28,6 +28,7 @@ import BrowserStore from 'stores/browser_store.jsx';
 import SignupTeam from 'components/signup_team.jsx';
 import * as Client from 'utils/client.jsx';
 import * as Websockets from 'action_creators/websocket_actions.jsx';
+import * as Utils from 'utils/utils.jsx';
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 import SignupTeamConfirm from 'components/signup_team_confirm.jsx';
 import SignupUserComplete from 'components/signup_user_complete.jsx';
@@ -41,6 +42,7 @@ import InstalledIntegrations from 'components/backstage/installed_integrations.j
 import AddIntegration from 'components/backstage/add_integration.jsx';
 import AddIncomingWebhook from 'components/backstage/add_incoming_webhook.jsx';
 import AddOutgoingWebhook from 'components/backstage/add_outgoing_webhook.jsx';
+import ErrorPage from 'components/error_page.jsx';
 
 import SignupTeamComplete from 'components/signup_team_complete/components/signup_team_complete.jsx';
 import WelcomePage from 'components/signup_team_complete/components/team_signup_welcome_page.jsx';
@@ -61,6 +63,13 @@ import Login from 'components/login/login.jsx';
 
 import * as I18n from 'i18n/i18n.jsx';
 
+const notFoundParams = {
+    title: Utils.localizeMessage('error.not_found.title', 'Page not found'),
+    message: Utils.localizeMessage('error.not_found.message', 'The page you where trying to reach does not exist'),
+    link: '/',
+    linkmessage: Utils.localizeMessage('error.not_found.link_message', 'Back to Mattermost')
+};
+
 // This is for anything that needs to be done for ALL react components.
 // This runs before we start to render anything.
 function preRenderSetup(callwhendone) {
@@ -218,6 +227,10 @@ function renderRootComponent() {
                 component={Root}
                 onEnter={onRootEnter}
             >
+                <Route
+                    path='error'
+                    component={ErrorPage}
+                />
                 <Route
                     component={LoggedIn}
                     onEnter={preLoggedIn}
@@ -285,6 +298,11 @@ function renderRootComponent() {
                                 }}
                             />
                         </Route>
+                        <Redirect
+                            from='*'
+                            to='/error'
+                            query={notFoundParams}
+                        />
                     </Route>
                     <Route
                         path='admin_console'
@@ -380,6 +398,11 @@ function renderRootComponent() {
                                 component={LDAPToEmail}
                             />
                         </Route>
+                        <Redirect
+                            from='*'
+                            to='/error'
+                            query={notFoundParams}
+                        />
                     </Route>
                 </Route>
             </Route>