Merge pull request #21 from ZBoxApp/expired

Fix login when session expires

src/components/login/login.jsx

@@ -5,7 +5,10 @@ import $ from 'jquery';
 import React from 'react';
 import {browserHistory} from 'react-router';
 
+import UserStore from '../../stores/user_store.jsx';
+import Constants from '../../utils/constants.jsx';
 import * as Client from '../../utils/client.jsx';
+
 import Panel from '../panel.jsx';
 import LoginEmail from './login_email.jsx';
 import MessageBar from '../message_bar.jsx';
@@ -15,9 +18,10 @@ export default class Login extends React.Component {
         super(props);
 
         this.submit = this.submit.bind(this);
+        this.onUserChange = this.onUserChange.bind(this);
 
         this.state = {
-            doneCheckLogin: false
+            user: null
         };
     }
     componentWillUmount() {
@@ -29,10 +33,18 @@ export default class Login extends React.Component {
                 browserHistory.push('/accounts');
             } else {
                 $('body').addClass('blank');
-                this.setState({doneCheckLogin: true}); //eslint-disable-line react/no-did-mount-set-state
             }
         });
     }
+    onUserChange() {
+        const user = UserStore.getCurrentUser();
+
+        this.setState({user});
+
+        if (user) {
+            browserHistory.push('/accounts');
+        }
+    }
     submit(email, password) {
         var state = this.state;
 
@@ -60,8 +72,8 @@ export default class Login extends React.Component {
         );
     }
     render() {
-        if (!this.state.doneCheckLogin) {
-            return <div/>;
+        if (this.state.user) {
+            return <div>Done check login</div>;
         }
 
         let loginError;
@@ -74,6 +86,15 @@ export default class Login extends React.Component {
                     canClose={false}
                 />
             );
+        } else if (this.props.location.query.error === Constants.ZimbraCodes.AUTH_EXPIRED) {
+            loginError = (
+                <MessageBar
+                    message='Tu sesión a expirado. Por favor ingresa nuevamente.'
+                    type='info'
+                    position='relative'
+                    canClose={false}
+                />
+            );
         } else {
             loginError = (
                 <MessageBar
@@ -116,5 +137,5 @@ export default class Login extends React.Component {
 Login.defaultProps = {
 };
 Login.propTypes = {
-    params: React.PropTypes.object.isRequired
+    location: React.PropTypes.object.isRequired
 };

src/components/message_bar.jsx

@@ -64,7 +64,10 @@ export default class MessageBar extends React.Component {
             let icon;
             switch (this.props.type) {
             case 'error':
-                icon = (<i className='fa fa fa-exclamation-circle'></i>);
+                icon = (<i className='fa fa-exclamation-circle'></i>);
+                break;
+            case 'info':
+                icon = (<i className='fa fa-info-circle'></i>);
                 break;
             case 'success':
                 break;
@@ -103,7 +106,7 @@ MessageBar.defaultProps = {
 
 MessageBar.propTypes = {
     message: React.PropTypes.string.isRequired,
-    type: React.PropTypes.oneOf(['success', 'error', 'warning']),
+    type: React.PropTypes.oneOf(['success', 'error', 'warning', 'info']),
     position: React.PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit']),
     canClose: React.PropTypes.bool,
     autoclose: React.PropTypes.bool,

src/index.jsx

@@ -23,6 +23,7 @@ import EditMailBox from './components/mailbox/edit_mailbox.jsx';
 
 import * as Client from './utils/client.jsx';
 import * as Utils from './utils/utils.jsx';
+import Constants from './utils/constants.jsx';
 
 import $ from 'jquery';
 import React from 'react';
@@ -72,8 +73,12 @@ function onPreLoggedIn(nextState, replace, callback) {
             () => {
                 return callback();
             },
-            () => {
-                return browserHistory.push('/login');
+            (err) => {
+                let query;
+                if (err.extra && err.extra.code === Constants.ZimbraCodes.AUTH_EXPIRED) {
+                    query = `?error=${Constants.ZimbraCodes.AUTH_EXPIRED}`;
+                }
+                browserHistory.push(`/login${query}`);
             });
     });
 }

src/sass/components/_flash_alert.scss

@@ -9,6 +9,11 @@
     color: $white;
   }
 
+  .flash-info {
+    background: $color-blue;
+    color: $white;
+  }
+
   .flash-warning {
     background: $bg-warning-color;
     color: $white;

src/utils/client.jsx

@@ -15,9 +15,9 @@ import Constants from './constants.jsx';
 // función que maneja el error como corresponde
 function handleError(methodName, err) {
     if (err.extra &&
-        (err.extra.code === Constants.ZimbraCodes.AUTH__REQUIRED || err.extra.code === Constants.ZimbraCodes.AUTH__REQUIRED)
+        (err.extra.code === Constants.ZimbraCodes.AUTH_EXPIRED || err.extra.code === Constants.ZimbraCodes.AUTH__REQUIRED)
     ) {
-        Utils.setCookie('token', '', -1);
+        logout();
         return err;
     }
 
@@ -118,9 +118,12 @@ export function logout(callback) {
     if (cookie) {
         Utils.setCookie('token', '', -1);
     }
+    ZimbraStore.setCurrent(null);
     GlobalActions.saveUser(null);
 
-    return callback();
+    if (callback && typeof callback === 'function') {
+        callback();
+    }
 }
 
 export function isLoggedIn(callback) {