Skip to content

Z
zimbra-admin-api-js
Commit 743a6f5a authored by enahum's avatar enahum
Browse files
Options

Merge pull request #8 from ZBoxApp/login 

Login page & message_bar component
parents d13ae580 ef343900
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 58 deletions
src/components/login/login.jsx
View file @ 743a6f5a
// 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,19 +63,42 @@ 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>
<div className='col-sm-12'>
<div className=''>
<h5 className='margin--less'>{'Iniciar Sesión'}</h5>
<h2 className=''>
{'ZBox Manager'}
<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}
......@@ -65,6 +107,15 @@ export default class Login extends React.Component {
</div>
</div>
</div>
</div>
<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
View file @ 743a6f5a
......@@ -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 0 → 100644
View file @ 743a6f5a
// 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
View file @ 743a6f5a
......@@ -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 0 → 100644
View file @ 743a6f5a
.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
View file @ 743a6f5a
......@@ -2,6 +2,7 @@
@import 'buttons';
@import 'contact';
@import 'dropdown';
@import 'flash_alert';
@import 'fonts';
@import 'grid';
@import 'icheck';
......
src/sass/utils/_variables.scss
View file @ 743a6f5a
......@@ -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
View file @ 743a6f5a
......@@ -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);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment