Skip to content

Z
zimbra-admin-api-js
Commit 83804563 authored by Elias Nahum's avatar Elias Nahum Committed by Juorder Antonio
Browse files
Options

add delete function, change passwd function, details mailbox view parcially finished

parent 77e7ab21
Show whitespace changes
Inline Side-by-side
Showing with 923 additions and 61 deletions
src/components/mailbox/change_passwd_modal.jsx 0 → 100644
View file @ 83804563
// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
// See LICENSE.txt for license information.
import {browserHistory} from 'react-router';
import {Modal} from 'react-bootstrap';
import UserStore from '../../stores/user_store.jsx';
import React from 'react';
export default class ConfirmDeleteModal extends React.Component {
constructor(props) {
super(props);
this.handleChangePasswd = this.handleChangePasswd.bind(this);
this.forceLogout = this.forceLogout.bind(this);
this.state = this.getStateFromStores();
}
getStateFromStores() {
const currentUser = UserStore.getCurrentUser();
return {currentUser};
}
forceLogout(path) {
setTimeout(() => {
browserHistory.push(path);
}, 3000);
}
handleChangePasswd() {
if (this.refs.passwdfield.value && this.refs.passwdfield.value.length > 0) {
this.props.data.setPassword(this.refs.passwdfield.value, () => {
this.setState({
alert: true,
message: 'Su contraseña se ha sido cambiada éxitosamente.',
typeError: 'text-success'
});
this.forceLogout('/logout');
}, (error) => {
this.setState({
alert: true,
message: error.message,
typeError: 'text-danger'
});
});
}
}
render() {
let labelError;
if (this.props.data.name === this.state.currentUser.name) {
labelError = (
<label className='text-warning'>{'Al cambiar su contraseña, deberá iniciar sesión de nuevo'}</label>
);
}
if (this.state.message) {
labelError = (
<label className={this.state.typeError}>{this.state.message}</label>
);
}
return (
<Modal
show={this.props.show}
onHide={this.props.onHide}
>
<div className='color-line'></div>
<Modal.Header closeButton={true}>
<Modal.Title>
{'Cambiar Contraseña'}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<form ref='form-change-passwd'>
<div className='row'>
<div className='col-xs-4 text-right'>
<label htmlFor='passwdfield'>Contraseña</label>
</div>
<div className='col-xs-7'>
<input
type='password'
ref='passwdfield'
className='form-control'
id='passwdfield'
/>
</div>
<div className='col-xs-12 text-center'>
<br/>
{labelError}
</div>
</div>
</form>
</div>
</Modal.Body>
<Modal.Footer>
<button
type='button'
className='btn btn-default'
onClick={this.props.onHide}
>
{'Cancelar'}
</button>
<button
type='button'
className='btn btn-info action-delete'
onClick={(e) => {
this.handleChangePasswd(e);
}}
ref='buttonDelete'
>
{'Cambiar Contraseña'}
</button>
</Modal.Footer>
</Modal>
);
}
}
ConfirmDeleteModal.propTypes = {
show: React.PropTypes.bool.isRequired,
onHide: React.PropTypes.func.isRequired,
data: React.PropTypes.object,
location: React.PropTypes.object
};
src/components/mailbox/confirm_delete_modal.jsx 0 → 100644
View file @ 83804563
// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
// See LICENSE.txt for license information.
import {browserHistory} from 'react-router';
import {Modal} from 'react-bootstrap';
import * as Utils from './../../utils/utils.jsx';
import * as Client from './../../utils/client.jsx';
import React from 'react';
export default class ConfirmDeleteModal extends React.Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
this.handleKeyUp = this.handleKeyUp.bind(this);
this.redirect = this.redirect.bind(this);
this.timetoRedict = 5;
this.state = {
timeToRedirect: this.timetoRedict
};
}
componentDidUpdate() {
if (this.props.show) {
Utils.toggleStatusButtons('.action-delete', true);
this.refs.confirmMailbox.value = '';
}
}
handleDelete() {
Client.removeAccount(
this.props.data.id,
() => {
this.setState(
{
alert: true,
message: `Su cuenta ${this.props.data.attrs.mail}, ha sido eliminada éxitosamente. Sera redirigido en ${this.state.timeToRedirect} seg`,
typeError: 'text-success'
}
);
this.redirect();
},
() => {
this.setState(
{
alert: true,
message: `Hubo un error, al intentar eliminar su cuenta : ${this.props.data.attrs.mail}`,
typeError: 'text-danger'
}
);
}
);
}
redirect() {
setTimeout(() => {
if (this.timetoRedict-- < 1) {
browserHistory.replace('/mailboxes');
} else {
this.setState({
message: `Su cuenta ${this.props.data.attrs.mail}, ha sido eliminada éxitosamente. Sera redirigido en ${this.timetoRedict} seg`
});
this.redirect();
}
}, 1000);
}
handleKeyUp() {
let val = this.refs.confirmMailbox.value;
if (val === this.props.data.attrs.mail) {
if (this.refs.buttonDelete.hasAttribute('disabled')) {
Utils.toggleStatusButtons('.action-delete', false);
}
} else {
Utils.toggleStatusButtons('.action-delete', true);
}
}
render() {
let labelError;
if (this.state.alert) {
labelError = (
<label className={this.state.typeError}>{this.state.message}</label>
);
}
return (
<Modal
show={this.props.show}
onHide={this.props.onHide}
>
<div className='color-line'></div>
<Modal.Header closeButton={true}>
<Modal.Title>
{'Eliminar Casilla'}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<form ref='form-delete'>
<div className='form-group'>
<input
type='text'
ref='confirmMailbox'
className='form-control'
placeholder='Escriba la casilla que desea borrar'
onKeyUp={() => {
this.handleKeyUp();
}}
/>
{labelError}
</div>
</form>
</div>
</Modal.Body>
<Modal.Footer>
<button
type='button'
className='btn btn-default'
onClick={this.props.onHide}
>
{'Cancelar'}
</button>
<button
type='button'
className='btn btn-danger action-delete'
onClick={(e) => {
this.handleDelete(e);
}}
ref='buttonDelete'
>
{'Sí, deseo borrarla'}
</button>
</Modal.Footer>
</Modal>
);
}
}
ConfirmDeleteModal.propTypes = {
show: React.PropTypes.bool.isRequired,
onHide: React.PropTypes.func.isRequired,
data: React.PropTypes.object,
location: React.PropTypes.object
};
src/components/mailbox/create_mailbox.jsx
View file @ 83804563
...@@ -68,6 +68,8 @@ export default class CreateMailBox extends React.Component { ...@@ -68,6 +68,8 @@ export default class CreateMailBox extends React.Component {
allowClear: true allowClear: true
});*/ });*/
$('#passwdMeter').pwstrength();
$('#sidebar-mailboxes').addClass('active'); $('#sidebar-mailboxes').addClass('active');
GlobalActions.emitEndLoading(); GlobalActions.emitEndLoading();
} }
...@@ -248,6 +250,7 @@ export default class CreateMailBox extends React.Component { ...@@ -248,6 +250,7 @@ export default class CreateMailBox extends React.Component {
className='form-control' className='form-control'
data-required='true' data-required='true'
ref='passwd' ref='passwd'
id='passwdMeter'
/> />
</div> </div>
</div> </div>
......
src/components/mailbox/edit_mailbox.jsx
View file @ 83804563
//import select2 from 'select2'; //import select2 from 'select2';
import $ from 'jquery'; import $ from 'jquery';
import React from 'react'; import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx'; import MessageBar from '../message_bar.jsx';
import Panel from '../panel.jsx';
import ConfirmDeleteModal from './confirm_delete_modal.jsx';
import ToggleModalButton from '../toggle_modal_button.jsx';
import * as Client from '../../utils/client.jsx'; import * as Client from '../../utils/client.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx'; import * as GlobalActions from '../../action_creators/global_actions.jsx';
...@@ -15,13 +17,10 @@ export default class EditMailBox extends React.Component { ...@@ -15,13 +17,10 @@ export default class EditMailBox extends React.Component {
this.handleEdit = this.handleEdit.bind(this); this.handleEdit = this.handleEdit.bind(this);
this.handleRadioChanged = this.handleRadioChanged.bind(this); this.handleRadioChanged = this.handleRadioChanged.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.getMailbox = this.getMailbox.bind(this); this.getMailbox = this.getMailbox.bind(this);
this.fillForm = this.fillForm.bind(this); this.fillForm = this.fillForm.bind(this);
this.state = { this.state = {};
data: false
};
} }
handleRadioChanged(val) { handleRadioChanged(val) {
...@@ -33,11 +32,9 @@ export default class EditMailBox extends React.Component { ...@@ -33,11 +32,9 @@ export default class EditMailBox extends React.Component {
Utils.toggleStatusButtons('.action-button', true); Utils.toggleStatusButtons('.action-button', true);
Utils.validateInputRequired(this.refs).then(() => { Utils.validateInputRequired(this.refs).then(() => {
let isAdmin = (this.refs.zimbraIsDelegatedAdminAccount.checked === true).toString().toUpperCase();
let attrs = { let attrs = {
givenName: this.refs.givenName.value, givenName: this.refs.givenName.value,
sn: this.refs.sn.value, sn: this.refs.sn.value
zimbraIsDelegatedAdminAccount: isAdmin
}; };
Client.modifyAccount( Client.modifyAccount(
...@@ -104,27 +101,12 @@ export default class EditMailBox extends React.Component { ...@@ -104,27 +101,12 @@ export default class EditMailBox extends React.Component {
$('#sidebar-mailboxes').removeClass('active'); $('#sidebar-mailboxes').removeClass('active');
} }
handleDelete(e) {
e.preventDefault();
Client.removeAccount(
this.state.data.id,
(data) => {
console.log('success', data); //eslint-disable-line no-console
},
(error) => {
console.log('error', error); //eslint-disable-line no-console
}
);
}
fillForm() { fillForm() {
let attrs = this.state.data.attrs; let attrs = this.state.data.attrs;
this.refs.mail.value = this.state.data.name; this.refs.mail.value = this.state.data.name;
this.refs.givenName.value = attrs.givenName || ''; this.refs.givenName.value = attrs.givenName || '';
this.refs.sn.value = attrs.sn; this.refs.sn.value = attrs.sn;
this.refs.description.value = attrs.description || ''; this.refs.description.value = attrs.description || '';
this.refs.zimbraIsDelegatedAdminAccount.checked = attrs.zimbraIsDelegatedAdminAccount === 'true';
} }
render() { render() {
...@@ -139,10 +121,16 @@ export default class EditMailBox extends React.Component { ...@@ -139,10 +121,16 @@ export default class EditMailBox extends React.Component {
); );
} }
let data;
let actions;
let form;
if (this.state.data) { if (this.state.data) {
data = this.state.data;
this.fillForm(); this.fillForm();
} }
let form = (
form = (
<form <form
className='simple_form form-horizontal mailbox-form' className='simple_form form-horizontal mailbox-form'
id='editAccount' id='editAccount'
...@@ -224,25 +212,6 @@ export default class EditMailBox extends React.Component { ...@@ -224,25 +212,6 @@ export default class EditMailBox extends React.Component {
</div> </div>
</div> </div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Administrador delegado'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='zimbraIsDelegatedAdminAccount'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'> <div className='form-group string'>
<label className='string required col-sm-3 control-label'> <label className='string required col-sm-3 control-label'>
<abbr title='Requerido'>{'*'}</abbr> <abbr title='Requerido'>{'*'}</abbr>
...@@ -330,7 +299,7 @@ export default class EditMailBox extends React.Component { ...@@ -330,7 +299,7 @@ export default class EditMailBox extends React.Component {
</form> </form>
); );
const actions = [ actions = [
{ {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
...@@ -341,13 +310,17 @@ export default class EditMailBox extends React.Component { ...@@ -341,13 +310,17 @@ export default class EditMailBox extends React.Component {
} }
}, },
{ {
label: 'Eliminar', setComponent: (
props: { <ToggleModalButton
className: 'btn btn-danger btn-xs action-button', role='button'
onClick: (e) => { className='btn btn-xs btn-danger action-button'
this.handleDelete(e); dialogType={ConfirmDeleteModal}
} dialogProps={{data}}
} key='delete-mailbox'
>
{'Eliminar'}
</ToggleModalButton>
)
} }
]; ];
......
src/components/mailbox/form_alias_mailbox.jsx 0 → 100644
View file @ 83804563
import React from 'react';
import Button from '../button.jsx';
export default class FormAliasMailbox extends React.Component {
render() {
return (
<form
className='simple_form form-horizontal mailbox-form'
onSubmit={(e) => {
this.handleSubmit(e);
}}
id='createAccount'
>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Habilitado'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='habilitado'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Termina el'}
</label>
<div className='col-sm-8'>
<input
type='password'
className='form-control'
ref='endsAt'
id='endsAt'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Respuesta'}
</label>
<div className='col-sm-8'>
<textarea
name='response'
className='form-control'
id='responseBox'
rows='4'
ref='respVacaciones'
>
</textarea>
</div>
</div>
<div className='form-group'>
<div className='col-xs-8 col-sm-offset-2'>
<Button
btnAttrs={
{
className: 'btn btn-info',
onClick: () => {
this.handleSaveAutoResp();
}
}
}
>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
}
}
src/components/mailbox/form_resp_vacaciones_mailbox.jsx 0 → 100644
View file @ 83804563
import React from 'react';
import Button from '../button.jsx';
export default class FormVacacionesMailbox extends React.Component {
constructor(props) {
super(props);
this.handleSaveAutoResp = this.handleSaveAutoResp.bind(this);
}
handleSaveAutoResp() {
console.log('save'); //eslint-disable-line no-console
}
render() {
return (
<form
className='simple_form form-horizontal mailbox-form'
onSubmit={(e) => {
this.handleSubmit(e);
}}
id='createAccount'
>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Habilitado'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='habilitado'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Termina el'}
</label>
<div className='col-sm-8'>
<input
type='password'
className='form-control'
ref='endsAt'
id='endsAt'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Respuesta'}
</label>
<div className='col-sm-8'>
<textarea
name='response'
id='responseBox'
className='form-control'
rows='4'
ref='respVacaciones'
>
</textarea>
</div>
</div>
<div className='form-group'>
<div className='col-xs-8 col-sm-offset-2'>
<Button
btnAttrs={
{
className: 'btn btn-info',
onClick: () => {
this.handleSaveAutoResp();
}
}
}
>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
}
}
src/components/mailbox/info_general_mailbox.jsx 0 → 100644
View file @ 83804563
import React from 'react';
import Button from '../button.jsx';
import * as Client from '../../utils/client.jsx';
import * as Utils from '../../utils/utils.jsx';
export default class BlockGeneralInfoMailbox extends React.Component {
constructor(props) {
super(props);
this.handleWatchDomain = this.handleWatchDomain.bind(this);
this.getDomain = this.getDomain.bind(this);
this.data = this.props.data;
this.domain = null;
this.state = {};
}
componentWillMount() {
this.domain = this.props.data.name.split('@');
this.domain = this.domain[this.domain.length - 1];
}
componentDidMount() {
this.getDomain();
}
getDomain() {
Client.getDomain(this.domain, (data) => {
this.setState({
hasDomain: true,
domainData: data
});
}, (error) => {
this.setState({
error: error.message
});
});
}
handleWatchDomain(e, path, location) {
Utils.handleLink(e, path, location);
}
render() {
let blockInfo = null;
if (this.state.hasDomain) {
blockInfo = (
<article>
<div>
<h4>
<span className='mailbox-name text-success'>{this.data.name}</span>
</h4>
</div>
<div>
<p>
{this.data.attrs.description}
</p>
</div>
<div>
<p>
<strong>{'Dominio'}: </strong>
<Button
btnAttrs={{
onClick: (e) => {
this.handleWatchDomain(e, `domains/${this.state.domainData.id}`, this.props.location);
}
}}
>
{this.domain}
</Button>
</p>
</div>
</article>
);
}
return (
blockInfo
);
}
}
BlockGeneralInfoMailbox.propTypes = {
data: React.PropTypes.object.isRequired,
location: React.PropTypes.object.isRequired
};
src/components/mailbox/mailbox.jsx
View file @ 83804563
...@@ -29,6 +29,7 @@ export default class Mailboxes extends React.Component { ...@@ -29,6 +29,7 @@ export default class Mailboxes extends React.Component {
this.handleAddMailbox = this.handleAddMailbox.bind(this); this.handleAddMailbox = this.handleAddMailbox.bind(this);
this.handleExportAsCSV = this.handleExportAsCSV.bind(this); this.handleExportAsCSV = this.handleExportAsCSV.bind(this);
this.handleTabChanged = this.handleTabChanged.bind(this); this.handleTabChanged = this.handleTabChanged.bind(this);
this.handleWatchInfo = this.handleWatchInfo.bind(this);
const page = parseInt(this.props.location.query.page, 10) || 1; const page = parseInt(this.props.location.query.page, 10) || 1;
...@@ -38,6 +39,10 @@ export default class Mailboxes extends React.Component { ...@@ -38,6 +39,10 @@ export default class Mailboxes extends React.Component {
}; };
} }
handleWatchInfo(e, path, location) {
Utils.handleLink(e, path, location);
}
getMailboxes() { getMailboxes() {
Client.getAllAccounts( Client.getAllAccounts(
{ {
...@@ -151,7 +156,16 @@ export default class Mailboxes extends React.Component { ...@@ -151,7 +156,16 @@ export default class Mailboxes extends React.Component {
> >
<td className={'mailbox-name'}> <td className={'mailbox-name'}>
<statusLabel className={statusClass}>{status}</statusLabel> <statusLabel className={statusClass}>{status}</statusLabel>
<Button
btnAttrs={{
className: 'mailbox-link',
onClick: (e) => {
this.handleWatchInfo(e, `mailboxes/${mail.id}`, location);
}
}}
>
{attrs.mail} {attrs.mail}
</Button>
</td> </td>
<td className={'mailbox-displayname'}> <td className={'mailbox-displayname'}>
...@@ -168,7 +182,7 @@ export default class Mailboxes extends React.Component { ...@@ -168,7 +182,7 @@ export default class Mailboxes extends React.Component {
{ {
className: 'btn btn-xs btn-default', className: 'btn btn-xs btn-default',
onClick: (e) => { onClick: (e) => {
this.handleEdit(e, '/mailboxes/' + attrs.mail + '/edit'); this.handleEdit(e, '/mailboxes/' + mail.id + '/edit');
} }
} }
} }
......
src/components/mailbox/mailbox_details.jsx 0 → 100644
View file @ 83804563
// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
// See LICENSE.txt for license information.
import $ from 'jquery';
import React from 'react';
import PageInfo from '../page_info.jsx';
import PanelTab from '../panel_tab.jsx';
import Panel from '../panel.jsx';
import BlockGeneralInfoMailbox from './info_general_mailbox.jsx';
import BlockStatsMailbox from './stats_mailbox.jsx';
import FormVacacionesMailbox from './form_resp_vacaciones_mailbox.jsx';
import FormAliasMailbox from './form_alias_mailbox.jsx';
import ChangePasswordModal from './change_passwd_modal.jsx';
import ToggleModalButton from '../toggle_modal_button.jsx';
import * as Client from '../../utils/client.jsx';
import * as Utils from '../../utils/utils.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx';
export default class MailboxDetails extends React.Component {
constructor(props) {
super(props);
this.getMailbox = this.getMailbox.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.state = {};
}
handleEdit(e, path, location) {
Utils.handleLink(e, path, location);
}
getMailbox() {
const id = this.props.params.id;
Utils.toggleStatusButtons('.action-info-btns', true);
Client.getAccount(id, (data) => {
this.setState({
data
});
GlobalActions.emitEndLoading();
Utils.toggleStatusButtons('.action-info-btns', false);
}, (error) => {
this.setState({
notFound: true,
message: error.message
});
GlobalActions.emitEndLoading();
Utils.toggleStatusButtons('.action-info-btns', false);
});
}
componentDidMount() {
$('#sidebar-mailboxes').addClass('active');
this.getMailbox();
}
componentWillUnmount() {
$('#sidebar-mailboxes').removeClass('active');
}
render() {
let generalData;
let statsData;
let btnsGeneralInfo = [];
let btnsStats = [];
if (this.state.data) {
generalData = (
<BlockGeneralInfoMailbox
data={this.state.data}
location={this.props.location}
/>
);
statsData = (
<BlockStatsMailbox
data={this.state.data}
/>
);
btnsGeneralInfo = [
{
props: {
className: 'btn btn-xs btn-default action-info-btns',
onClick: (e) => {
this.handleEdit(e, `mailboxes/${this.state.data.id}/edit`, this.props.location);
}
},
label: 'Editar'
},
{
setComponent: (
<ToggleModalButton
role='button'
className='btn btn-xs btn-default action-info-btns'
dialogType={ChangePasswordModal}
dialogProps={{
data: this.state.data
}}
key='change-passwd-mailbox'
>
{'Cambiar Contraseña'}
</ToggleModalButton>
)
}
];
btnsStats = [
{
props: {
className: 'btn btn-xs btn-default action-info-btns'
},
label: 'Ver Correos'
}
];
}
const pageInfo = (
<PageInfo
titlePage='Casillas'
descriptionPage='Usuarios de correo electrónico.'
/>
);
if (this.state.notFound) {
return (
<div>
{pageInfo}
<div className='block-center text-center'>
<h3>{this.state.message}</h3>
</div>
</div>
);
}
const formAutoResp = (
<FormVacacionesMailbox/>
);
const formAlias = (
<FormAliasMailbox/>
);
const tabAdmin = (
<Panel
hasHeader={false}
children={formAutoResp}
/>
);
const tab2 = (
<Panel
title='Casillas'
hasHeader={false}
children={formAlias}
/>
);
const panelTabs = (
<PanelTab
tabNames={['Resp Vacaciones', 'Alias']}
tabs={{
resp_vacaciones: tabAdmin,
alias: tab2
}}
location={this.props.location}
/>
);
return (
<div>
{pageInfo}
<div className='content animate-panel'>
<div className='row'>
<div className='col-md-6 central-content'>
<Panel
title='Información General'
btnsHeader={btnsGeneralInfo}
children={generalData}
classHeader='with-min-height'
/>
</div>
<div className='col-md-6 central-content'>
<Panel
title='Estadísticas'
btnsHeader={btnsStats}
children={statsData}
classHeader='with-min-height'
/>
</div>
</div>
<div className='row'>
<div className='col-md-12 panel-with-tabs'>
{panelTabs}
</div>
</div>
</div>
</div>
);
}
}
MailboxDetails.propTypes = {
location: React.PropTypes.object,
params: React.PropTypes.object
};
src/components/mailbox/stats_mailbox.jsx 0 → 100644
View file @ 83804563
import React from 'react';
import * as Utils from '../../utils/utils.jsx';
export default class BlockGeneralInfoMailbox extends React.Component {
constructor(props) {
super(props);
this.date = null;
this.status = null;
this.className = null;
this.lastConection = 'no se ha conectado';
}
componentWillMount() {
this.date = Utils.dateFormatted(this.props.data.attrs.zimbraCreateTimestamp);
switch (this.props.data.attrs.zimbraAccountStatus) {
case 'inactive':
this.status = 'Desactivada';
this.className = 'btn btn-md btn-default';
break;
case 'locked':
this.status = 'Bloqueada';
this.className = 'btn btn-md btn-primary2';
break;
default:
this.status = 'Activa';
this.className = 'btn btn-md btn-info';
break;
}
if (this.props.data.attrs.zimbraLastLogonTimestamp) {
this.lastConection = Utils.dateFormatted(this.props.data.attrs.zimbraLastLogonTimestamp);
}
}
render() {
return (
<div>
<div className='row'>
<div className='col-xs-6'>
<div>
<p>
<span className='center-block'>Creada El Día</span>
<strong>{this.date}</strong>
</p>
</div>
</div>
<div className='col-xs-6'>
<div>
<span className={this.className}>{this.status}</span>
</div>
</div>
</div>
<br/>
<div className='row'>
<div className='col-xs-6'>
<div>
<p>
<span className='center-block'>Espacio Usado</span>
<strong>0 Bytes</strong>
</p>
</div>
</div>
<div className='col-xs-6'>
<div>
<p>
<span className='center-block'>Últimas Conexión</span>
<strong>{this.lastConection}</strong>
</p>
</div>
</div>
</div>
</div>
);
}
}
BlockGeneralInfoMailbox.propTypes = {
data: React.PropTypes.object.isRequired
};
src/components/panel.jsx
View file @ 83804563
...@@ -4,6 +4,11 @@ import Button from './button.jsx'; ...@@ -4,6 +4,11 @@ import Button from './button.jsx';
export default class Panel extends React.Component { export default class Panel extends React.Component {
render() { render() {
const btns = this.props.btnsHeader.map((btn, i) => { const btns = this.props.btnsHeader.map((btn, i) => {
if (btn.setComponent) {
return (
btn.setComponent
);
}
return ( return (
<Button <Button
btnAttrs={btn.props} btnAttrs={btn.props}
......
src/index.jsx
View file @ 83804563
...@@ -18,6 +18,7 @@ import DomainDetails from './components/domain/domain_details.jsx'; ...@@ -18,6 +18,7 @@ import DomainDetails from './components/domain/domain_details.jsx';
import CreateDomains from './components/domain/create_domain.jsx'; import CreateDomains from './components/domain/create_domain.jsx';
import EditDomains from './components/domain/edit_domain.jsx'; import EditDomains from './components/domain/edit_domain.jsx';
import Mailboxes from './components/mailbox/mailbox.jsx'; import Mailboxes from './components/mailbox/mailbox.jsx';
import MailboxDetails from './components/mailbox/mailbox_details.jsx';
import CreateMailBox from './components/mailbox/create_mailbox.jsx'; import CreateMailBox from './components/mailbox/create_mailbox.jsx';
import EditMailBox from './components/mailbox/edit_mailbox.jsx'; import EditMailBox from './components/mailbox/edit_mailbox.jsx';
...@@ -163,6 +164,11 @@ function renderRootComponent() { ...@@ -163,6 +164,11 @@ function renderRootComponent() {
component={EditMailBox} component={EditMailBox}
/> />
<Route
path='mailboxes/:id'
component={MailboxDetails}
/>
<Route <Route
path='logout' path='logout'
onEnter={onLoggedOut} onEnter={onLoggedOut}
......
src/sass/components/_various.scss
View file @ 83804563
...@@ -1260,9 +1260,17 @@ label { ...@@ -1260,9 +1260,17 @@ label {
// File manager // File manager
.hpanel .panel-body.file-body { .hpanel {
.panel-body.file-body {
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;
}
&.with-min-height {
.panel-body {
min-height: 200px;
}
}
} }
.file-body { .file-body {
......
src/utils/utils.jsx
View file @ 83804563
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import {browserHistory} from 'react-router'; import {browserHistory} from 'react-router';
import * as GlobalActions from '../action_creators/global_actions.jsx'; import * as GlobalActions from '../action_creators/global_actions.jsx';
import CONSTANTS from './constants.jsx';
const COOKIE_TIMEOUT = 24 * 60 * 60 * 1000; const COOKIE_TIMEOUT = 24 * 60 * 60 * 1000;
...@@ -214,3 +215,17 @@ export function toggleStatusButtons(classNames, isDisabled) { ...@@ -214,3 +215,17 @@ export function toggleStatusButtons(classNames, isDisabled) {
} }
} }
} }
export function dateFormatted(dateString) {
if (typeof dateString === 'string') {
const date = dateString.substr(0, 8);
const year = date.substr(0, 4);
const month = parseInt(date.substr(4, 2), 10);
const day = date.substr(6, 2);
const dateFormattedString = `${day} de ${CONSTANTS.MONTHS[month - 1]} de ${year}`;
return dateFormattedString;
}
return false;
}
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