Merged in OS-129-maintenancemode (pull request #104)

OS-129 maintenancemode

client/src/app-components/are-you-sure.scss

@@ -18,7 +18,7 @@
         margin-bottom: 50px;
     }
 
-    &__butttons {
+    &__buttons {
         margin: 0 auto;
     }
 

client/src/app/App.js

@@ -59,6 +59,14 @@ class App extends React.Component {
             loggedInStaff: !_.includes(props.location.pathname, '/admin/panel') && props.session.logged && props.session.staff,
             loggedOutStaff: _.includes(props.location.pathname, '/admin/panel') && !props.session.logged
         };
+        
+        if(props.config['maintenance-mode'] && !_.includes(props.location.pathname, '/admin') && !_.includes(props.location.pathname, '/maintenance')) {
+            browserHistory.push('/maintenance');
+        }
+
+        if(!props.config['maintenance-mode'] && _.includes(props.location.pathname, '/maintenance')) {
+            browserHistory.push('/');
+        }
 
         if (validations.languageChanged) {
             browserHistory.push(props.location.pathname);

client/src/app/Routes.js

@@ -11,6 +11,7 @@ import MainLayout from 'app/main/main-layout';
 import MainHomePage from 'app/main/main-home/main-home-page';
 import MainSignUpPage from 'app/main/main-signup/main-signup-page';
 import MainRecoverPasswordPage from 'app/main/main-recover-password/main-recover-password-page';
+import MainMaintenancePage from 'app/main/main-maintenance-page';
 
 import DashboardLayout from 'app/main/dashboard/dashboard-layout';
 import DashboardListTicketsPage from 'app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page';
@@ -59,6 +60,7 @@ export default (
                 <IndexRoute component={MainHomePage} />
                 <Route path='signup' component={MainSignUpPage}/>
                 <Route path='recover-password' component={MainRecoverPasswordPage}/>
+                <Route path='maintenance' component={MainMaintenancePage}/>
                 <Route path='dashboard' component={DashboardLayout}>
                     <IndexRoute component={DashboardListTicketsPage} />
                     <Route path='articles' component={DashboardListArticlesPage}/>

client/src/app/main/main-maintenance-page.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import i18n from 'lib-app/i18n';
+import Icon from 'core-components/icon';
+
+class MainMaintenancePage extends React.Component {
+    render() {
+        return (
+            <div className="main-maintenance-page">
+                <div className="main-maintenance-page__icon">
+                    <Icon name="wrench" size="4x"/>
+                </div>
+                <div className="main-maintenance-page__title">
+                    {i18n('MAINTENANCE_MODE')}
+                </div>
+                <div className="main-maintenance-page__description">
+                    {i18n('MAINTENANCE_MODE_DESCRIPTION')}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default MainMaintenancePage;

client/src/app/main/main-maintenance-page.scss

@@ -0,0 +1,39 @@
+@import "../../scss/vars";
+
+.main-maintenance-page {
+    margin: auto;
+    width: 70%;
+    padding: 50px 100px;
+    border: 2px solid $dark-grey;
+    text-align: center;
+    background-color: white;
+    border-radius: 4px;
+
+    &__icon {
+        color: $primary-yellow;
+        background-color: $light-grey;
+        display: inline-block;
+        padding: 10px 15px;
+        margin-bottom: 20px;
+        border-radius: 10px;
+    }
+
+    &__title {
+        font-size: $font-size--xl;
+        margin-bottom: 30px;
+        color: $primary-yellow;
+        font-weight: bold;
+    }
+
+    &__description {
+        font-size: $font-size--bg;
+        color: $primary-black;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .main-maintenance-page {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

client/src/data/fixtures/system-fixtures.js

@@ -8,6 +8,7 @@ module.exports = [
                 data: {
                     'language': 'en',
                     'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
+                    'maintenance-mode': false,
                     'departments': [
                         {id: 1, name: 'Sales Support', owners: 2},
                         {id: 2, name: 'Technical Issues', owners: 5},

client/src/data/languages/en.js

@@ -117,6 +117,7 @@ export default {
     'TRANSFER_TICKETS_TO': 'Transfer tickets to',
     'COMMENTS': 'Comments',
     'DELETE_STAFF_MEMBER': 'Delete staff member',
+    'MAINTENANCE_MODE': 'Maintenance mode',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
@@ -145,6 +146,7 @@ export default {
     'EDIT_STAFF_DESCRIPTION': 'Here you can edit information about a staff member.',
     'MY_ACCOUNT_DESCRIPTION': 'Here you can edit information about you.',
     'DEPARTMENTS_DESCRIPTION': 'A department is a group where the tickets can go. They are used to categorize the tickets. You can assign them to other staff members.',
+    'MAINTENANCE_MODE_DESCRIPTION': 'The support system is in maintenance mode, thus unavailable at the moment. We will come back as soon as possible.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',

client/src/index.js

@@ -33,7 +33,7 @@ store.dispatch(SessionActions.initSession());
 let unsubscribe = store.subscribe(() => {
     console.log(store.getState());
 
-    if (store.getState().session.initDone) {
+    if (store.getState().session.initDone && store.getState().config.initDone) {
         unsubscribe();
         renderApplication();
     }

client/src/reducers/config-reducer.js

@@ -7,7 +7,8 @@ class ConfigReducer extends Reducer {
 
     getInitialState() {
         return {
-            language: sessionStore.getItem('language')
+            language: sessionStore.getItem('language'),
+            initDone: false
         };
     }
 
@@ -35,7 +36,8 @@ class ConfigReducer extends Reducer {
         }));
 
         return _.extend({}, state, payload.data, {
-            language: currentLanguage || payload.language
+            language: currentLanguage || payload.language,
+            initDone: true
         });
     }
 }

client/src/scss/_vars.scss

@@ -5,6 +5,8 @@ $secondary-red: #FB6362;
 $primary-blue: #414A59;
 $secondary-blue: #20B8c5;
 
+$primary-yellow: #E5D151;
+
 $primary-green: #82CA9C;
 
 $very-light-grey: #F7F7F7;