Ivan - Add verification token for frontend user view [skip ci]

client/src/actions/session-actions.js

@@ -71,6 +71,13 @@ export default {
         }
     },
 
+    verify(value) {
+        return {
+            type: 'VERIFY',
+            payload: value
+        };
+    },
+
     initSession() {
         return {
             type: 'CHECK_SESSION',

client/src/app/Routes.js

@@ -10,6 +10,7 @@ import DemoPage from 'app/demo/components-demo-page';
 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 MainVerifyTokenPage from 'app/main/main-verify-token-page';
 import MainRecoverPasswordPage from 'app/main/main-recover-password/main-recover-password-page';
 import MainMaintenancePage from 'app/main/main-maintenance-page';
 
@@ -59,6 +60,7 @@ export default (
             <Route path='/' component={MainLayout}>
                 <IndexRoute component={MainHomePage} />
                 <Route path='signup' component={MainSignUpPage}/>
+                <Route path='verify-token/:email/:token' component={MainVerifyTokenPage}/>
                 <Route path='recover-password' component={MainRecoverPasswordPage}/>
                 <Route path='maintenance' component={MainMaintenancePage}/>
                 <Route path='dashboard' component={DashboardLayout}>

client/src/app/main/main-home/main-home-page-login-widget.js

@@ -19,18 +19,14 @@ import Message          from 'core-components/message';
 
 class MainHomePageLoginWidget extends React.Component {
 
-    constructor(props) {
+    state = {
-        super(props);
+        sideToShow: 'front',
-
+        loginFormErrors: {},
-        this.state = {
+        recoverFormErrors: {},
-            sideToShow: 'front',
+        recoverSent: false,
-            loginFormErrors: {},
+        loadingLogin: false,
-            recoverFormErrors: {},
+        loadingRecover: false
-            recoverSent: false,
+    };
-            loadingLogin: false,
-            loadingRecover: false
-        };
-    }
 
     componentDidUpdate(prevProps) {
         if (!prevProps.session.failed && this.props.session.failed) {
@@ -126,7 +122,11 @@ class MainHomePageLoginWidget extends React.Component {
         let errors = _.extend({}, this.state.loginFormErrors);
 
         if (this.props.session.failed) {
-            errors.password = i18n('ERROR_PASSWORD');
+            if (this.props.session.failMessage === 'INVALID_CREDENTIALS') {
+                errors.password = i18n('ERROR_PASSWORD');
+            } else if (this.props.session.failMessage === 'UNVERIFIED_USER') {
+                errors.email = i18n('UNVERIFIED_EMAIL');
+            }
         }
 
         return errors;

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

@@ -1,13 +1,18 @@
 import React from 'react';
 
+import {connect}        from 'react-redux'
+import i18n from 'lib-app/i18n';
+
 import MainHomePageLoginWidget from 'app/main/main-home/main-home-page-login-widget';
 import MainHomePagePortal      from 'app/main/main-home/main-home-page-portal';
+import Message                 from 'core-components/message';
 
 class MainHomePage extends React.Component {
     
     render() {
         return (
             <div className="main-home-page">
+                {this.renderMessage()}
                 <div className="col-md-4">
                     <MainHomePageLoginWidget />
                 </div>
@@ -17,6 +22,37 @@ class MainHomePage extends React.Component {
             </div>
         );
     }
+
+    renderMessage() {
+        switch (this.props.session.verify) {
+            case 'success':
+                return this.renderSuccess();
+            case 'failed':
+                return this.renderFailed();
+            default:
+                return null;
+        }
+    }
+
+    renderSuccess() {
+        return (
+            <Message title={i18n('VERIFY_SUCCESS')} type="success" className="main-home-page__message">
+                {i18n('VERIFY_SUCCESS_DESCRIPTION')}
+            </Message>
+        );
+    }
+
+    renderFailed() {
+        return (
+            <Message title={i18n('VERIFY_FAILED')} type="error" className="main-home-page__message">
+                {i18n('VERIFY_FAILED_DESCRIPTION')}
+            </Message>
+        );
+    }
 }
 
-export default MainHomePage;
+export default connect((store) => {
+    return {
+        session: store.session
+    };
+})(MainHomePage);

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

@@ -1,3 +1,8 @@
 .main-home-page {
 
+    &__message {
+        margin-bottom: 20px;
+        margin-left: 20px;
+        margin-right: 20px;
+    }
 }

client/src/app/main/main-verify-token-page.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {connect}        from 'react-redux'
+import {browserHistory} from 'react-router';
+
+import SessionActions from 'actions/session-actions'
+import API from 'lib-app/api-call';
+
+import Message from 'core-components/message';
+
+class MainVerifyTokenPage extends React.Component {
+
+    componentDidMount() {
+        API.call({
+            path: '/user/verify-token',
+            data: {
+                token: this.props.params.token,
+                email: this.props.params.email
+            }
+        }).then(() => {
+            this.props.dispatch(SessionActions.verify(true));
+            browserHistory.push('/');
+        }).catch(() => {
+            this.props.dispatch(SessionActions.verify(false));
+            browserHistory.push('/');
+        });
+    }
+
+    render() {
+        return null;
+    }
+}
+
+
+export default connect((store) => {
+    return {
+        session: store.session
+    };
+})(MainVerifyTokenPage);

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

@@ -21,7 +21,7 @@ module.exports = [
             } else {
                 response = {
                     status: 'fail',
-                    message: 'Invalid Credientals'
+                    message: 'INVALID_CREDENTIALS'
                 };
             }
 
@@ -88,6 +88,16 @@ module.exports = [
             }
         }
     },
+    {
+        path: '/user/verify-token',
+        time: 200,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
     {
         path: '/user/signup',
         time: 1000,

client/src/data/languages/en.js

@@ -150,6 +150,8 @@ export default {
     'LOAD_MORE': 'Load More',
     'MY_NOTIFICATIONS': 'My notifications',
     'ALL_NOTIFICATIONS': 'All notifications',
+    'VERIFY_SUCCESS': 'User verified',
+    'VERIFY_FAILED': 'Could not verify',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',
@@ -209,6 +211,8 @@ export default {
     'MAINTENANCE_MODE_DESCRIPTION': 'The support system is in maintenance mode, thus unavailable at the moment. We will come back as soon as possible.',
     'EMAIL_TEMPLATES_DESCRIPTION': 'Here you can edit the templates of the emails that will be sent to users. Remember that the double brackets curly braces indicate a variable value. For example, \'name\' represents the user\'s name.',
     'SYSTEM_PREFERENCES_DESCRIPTION': 'Here you can edit the preferences of the system.',
+    'VERIFY_SUCCESS_DESCRIPTION': 'You user has been verified correctly. You can log in now.',
+    'VERIFY_FAILED_DESCRIPTION': 'The verification could not be done.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',
@@ -232,6 +236,7 @@ export default {
     'ERROR_RETRIEVING_ARTICLES': 'An error occurred while trying to retrieve articles.',
     'ERROR_LIST': 'Select at least one',
     'ERROR_URL': 'Invalid URL',
+    'UNVERIFIED_EMAIL': 'Email is not verified yet',
 
     //MESSAGES
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',

client/src/reducers/session-reducer.js

@@ -9,7 +9,8 @@ class SessionReducer extends Reducer {
             initDone: false,
             logged: false,
             pending: false,
-            failed: false
+            failed: false,
+            verify: null
         };
     }
 
@@ -19,6 +20,7 @@ class SessionReducer extends Reducer {
             'LOGIN_FULFILLED': this.onLoginCompleted.bind(this),
             'LOGIN_REJECTED': this.onLoginFailed,
             'LOGOUT_FULFILLED': this.onLogout,
+            'VERIFY': this.onVerify,
             'USER_DATA_FULFILLED': this.onUserDataRetrieved,
             'CHECK_SESSION_REJECTED': (state) => { return _.extend({}, state, {initDone: true})},
             'SESSION_CHECKED': this.onSessionChecked,
@@ -46,8 +48,9 @@ class SessionReducer extends Reducer {
         });
     }
 
-    onLoginFailed(state) {
+    onLoginFailed(state, payload) {
         return _.extend({}, state, {
+            failMessage: payload.message,
             logged: false,
             pending: false,
             failed: true
@@ -127,6 +130,12 @@ class SessionReducer extends Reducer {
             userTickets: userData.tickets
         });
     }
+
+    onVerify(state, payload) {
+        return _.extend({}, state, {
+            verify: (payload) ? 'success' : 'failed'
+        });
+    }
 }
 
 export default SessionReducer.getInstance();