Login page & message_bar component

src/components/login/login.jsx

 // Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import $ from 'jquery';
+import React from 'react';
+import {browserHistory} from 'react-router';
+
 import * as Client from '../../utils/client.jsx';
 import LoginEmail from './login_email.jsx';
-
-import {browserHistory, Link} from 'react-router';
-
-import React from 'react';
+import MessageBar from '../message_bar.jsx';
 
 export default class Login extends React.Component {
     constructor(props) {
@@ -18,19 +19,37 @@ export default class Login extends React.Component {
             doneCheckLogin: false
         };
     }
+    componentWillUmount() {
+        $('body').removeClass('blank');
+    }
     componentDidMount() {
         Client.isLoggedIn((data) => {
             if (data && data.logged_in) {
                 browserHistory.push('/accounts');
             } else {
+                $('body').addClass('blank');
                 this.setState({doneCheckLogin: true}); //eslint-disable-line react/no-did-mount-set-state
             }
         });
     }
-    submit(username, password) {
+    submit(email, password) {
+        var state = this.state;
+
+        if (!email) {
+            state.loginError = 'El correo electrónico es obligatorio';
+            this.setState(state);
+            return;
+        }
+
+        if (!password) {
+            state.loginError = 'La contraseña es obligatoria';
+            this.setState(state);
+            return;
+        }
+
         this.setState({loginError: null});
 
-        Client.login(username, password,
+        Client.login(email, password,
             () => {
                 browserHistory.push('/accounts');
             },
@@ -44,24 +63,56 @@ export default class Login extends React.Component {
             return <div/>;
         }
 
+        let loginError;
+        if (this.state.loginError) {
+            loginError = (
+                <MessageBar
+                    message={this.state.loginError}
+                    type='error'
+                    position='relative'
+                    canClose={false}
+                />
+            );
+        } else {
+            loginError = (
+                <MessageBar
+                    message='Necesitas iniciar sesión o registrarte para continuar.'
+                    type='error'
+                    position='relative'
+                    canClose={false}
+                />
+            );
+        }
+
         return (
-            <div>
-                <div className='signup-header'>
-                    <Link to='/'>
-                        <span className='fa fa-chevron-left'/>
-                        {'Volver'}
-                    </Link>
+            <div className='login-container'>
+                <div className='row'>
+                    <div className='col-md-12'>
+                        <div className='hpanel'>
+                            {loginError}
+                            <div
+                                className='panel-body'
+                                style={{paddingLeft: '80px', paddingRight: '80px', paddingBottom: '60px'}}
+                            >
+                                <h2
+                                    className='text-center'
+                                    style={{marginBottom: '50px'}}
+                                >
+                                    {'Ingreso a ZBox Manager'}
+                                </h2>
+                                <LoginEmail
+                                    submit={this.submit}
+                                    loginError={this.state.loginError}
+                                />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div className='col-sm-12'>
-                    <div className=''>
-                        <h5 className='margin--less'>{'Iniciar Sesión'}</h5>
-                        <h2 className=''>
-                            {'ZBox Manager'}
-                        </h2>
-                        <LoginEmail
-                            submit={this.submit}
-                            loginError={this.state.loginError}
-                        />
+                <div className='row'>
+                    <div className='col-md-12 text-center'>
+                        {'ZBox Manager : Administra tu Correo en la nube, seguro y facil de usar'}
+                        <br/>
+                        {'Copyright © 2016 ZBox Spa. Todos los derechos reservados'}
                     </div>
                 </div>
             </div>

src/components/login/login_email.jsx

@@ -18,41 +18,20 @@ export default class LoginEmail extends React.Component {
     }
     handleSubmit(e) {
         e.preventDefault();
-        var state = {};
 
         const email = this.refs.email.value.trim();
-        if (!email) {
-            state.loginError = 'El correo electrónico es obligatorio';
-            this.setState(state);
-            return;
-        }
-
         const password = this.refs.password.value.trim();
-        if (!password) {
-            state.loginError = 'La contraseña es obligatoria';
-            this.setState(state);
-            return;
-        }
-
-        state.loginError = '';
-        this.setState(state);
-
         this.props.submit(email, password);
     }
     render() {
-        let loginError;
         let errorClass = '';
         if (this.state.loginError) {
-            loginError = <label className='control-label'>{this.state.loginError}</label>;
             errorClass = ' has-error';
         }
 
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='signup__email-container'>
-                    <div className={'form-group' + errorClass}>
-                        {loginError}
-                    </div>
                     <div className={'form-group' + errorClass}>
                         <input
                             autoFocus={true}
@@ -78,9 +57,9 @@ export default class LoginEmail extends React.Component {
                     <div className='form-group'>
                         <button
                             type='submit'
-                            className='btn btn-primary'
+                            className='btn btn-success btn-block'
                         >
-                            {'Iniciar Sesión'}
+                            {'Ingresar'}
                         </button>
                     </div>
                 </div>

src/components/message_bar.jsx

+// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import $ from 'jquery';
+import React from 'react';
+
+export default class MessageBar extends React.Component {
+    constructor(props) {
+        super(props);
+        this.fadeOut = this.fadeOut.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+    }
+    componentWillMount() {
+        if (this.props.message) {
+            this.setState({message: this.props.message});
+        }
+    }
+    componentWillReceiveProps(newProps) {
+        this.setState({message: newProps.message});
+    }
+    componentDidMount() {
+        this.fadeOut(this.props.autocloseInSecs * 1000);
+    }
+    componentDidUpdate() {
+        this.fadeOut(this.props.autocloseInSecs * 1000);
+    }
+    fadeOut(time) {
+        const self = this;
+        if (self.state.message && self.props.autoclose) {
+            $('div.flash').delay(time).fadeOut(1000, () => {
+                self.handleClose();
+            });
+        }
+    }
+    handleClose() {
+        this.setState({message: null});
+    }
+    render() {
+        const message = this.state.message;
+        if (message) {
+            let dismissible;
+            let closeButton;
+            if (this.props.canClose) {
+                dismissible = 'alert-dismissible';
+                closeButton = (
+                    <button
+                        type='button'
+                        className='close'
+                        data-dismiss='alert'
+                        aria-label='Close'
+                        onClick={() => this.handleClose(500)}
+                    >
+                        <span
+                            aria-hidden='true'
+                            style={{color: '#fff'}}
+                        >
+                            {'x'}
+                        </span>
+                    </button>
+                );
+            }
+
+            const alertClass = `alert flash-${this.props.type} ${dismissible}`;
+            let icon;
+            switch (this.props.type) {
+            case 'error':
+                icon = (<i className='fa fa fa-exclamation-circle'></i>);
+                break;
+            }
+
+            return (
+                <div
+                    className='flash'
+                    style={{position: this.props.position, display: 'block'}}
+                >
+                    <div
+                        className={alertClass}
+                        role='alert'
+                    >
+                        {closeButton}
+                        {icon} {message}
+                    </div>
+                </div>
+            );
+        }
+
+        return <div/>;
+    }
+}
+
+MessageBar.defaultProps = {
+    message: null,
+    type: 'error',
+    position: 'relative',
+    canClose: true,
+    autoclose: false,
+    autocloseInSecs: 10
+};
+
+MessageBar.propTypes = {
+    message: React.PropTypes.string.isRequired,
+    type: React.PropTypes.oneOf(['success', 'error', 'warning']),
+    position: React.PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'inherit']),
+    canClose: React.PropTypes.bool,
+    autoclose: React.PropTypes.bool,
+    autocloseInSecs: React.PropTypes.number
+};

src/components/not_logged_in.jsx

@@ -7,21 +7,15 @@ import React from 'react';
 
 export default class NotLoggedIn extends React.Component {
     componentDidMount() {
-        $('body').attr('class', 'sticky');
-        $('#root').attr('class', 'container-fluid');
+        $('body').addClass('sticky');
+        $('#root').addClass('container-fluid');
     }
     componentWillUnmount() {
         $('body').attr('class', '');
         $('#root').attr('class', '');
     }
     render() {
-        return (
-            <div className='inner-wrap'>
-                <div className='row content'>
-                    {this.props.children}
-                </div>
-            </div>
-        );
+        return this.props.children;
     }
 }
 

src/sass/components/_flash_alert.scss

+.flash {
+  .flash-error {
+    background: $bg-error-color;
+    color: $flash-error-color;
+  }
+
+  .flash-success {
+    background: $bg-success-color;
+    color: $white;
+  }
+
+  .flash-warning {
+    background: $bg-warning-color;
+    color: $white;
+  }
+}

src/sass/components/_module.scss

@@ -2,6 +2,7 @@
 @import 'buttons';
 @import 'contact';
 @import 'dropdown';
+@import 'flash_alert';
 @import 'fonts';
 @import 'grid';
 @import 'icheck';

src/sass/utils/_variables.scss

@@ -70,3 +70,9 @@ $ui-sortable-placeholder-border-color: #cecece;
 $filter-body-panel-bg: #fafcfd;
 $filter-body-panel-shadow: rgba(0, 0, 0, .175);
 $code-mirror-border-color: #eee;
+
+//Flash alerts
+$bg-success-color: #74d348;
+$bg-error-color: #f2dede;
+$bg-warning-color: #e67e22;
+$flash-error-color: #a94442;

src/utils/client.jsx

@@ -4,7 +4,8 @@
 import $ from 'jquery';
 import jszimbra from 'js-zimbra';
 import * as Utils from './utils.jsx';
-import Domain from '../zimbra/domain.jsx';
+
+// import Domain from '../zimbra/domain.jsx';
 
 let domain;
 
@@ -61,9 +62,6 @@ export function login(username, secret, success, error) {
             return error(e);
         }
 
-        // aqui deberiamos inicializar todas las apis
-        domain = new Domain(zimbra);
-
         Utils.setCookie('token', zimbra.token, 3);
         return success(zimbra);
     });