add, remove alias functions, modify fields for auto response form completed.

package.json

@@ -17,6 +17,8 @@
     "perfect-scrollbar": "0.6.10",
     "react": "15.0.0",
     "react-bootstrap": "0.28.5",
+    "react-bootstrap-datetimepicker": "0.0.22",
+    "react-datalist": "^3.0.0",
     "react-dom": "15.0.0",
     "react-router": "2.0.1",
     "react-textarea-autosize": "3.3.1",

src/action_creators/global_actions.jsx

@@ -17,6 +17,13 @@ export function emitEndLoading() {
     });
 }
 
+export function emitMessage(attrs) {
+    AppDispatcher.handleViewAction({
+        type: ActionTypes.NEW_MESSAGE,
+        attrs
+    });
+}
+
 export function saveUser(user) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.USER_CHANGED,

src/components/mailbox/form_resp_vacaciones_mailbox.jsx

 import React from 'react';
 import Button from '../button.jsx';
+import DateTimeField from 'react-bootstrap-datetimepicker';
+import * as Client from '../../utils/client.jsx';
+import * as Utils from '../../utils/utils.jsx';
+import Constants from '../../utils/constants.jsx';
+
+import * as GlobalActions from '../../action_creators/global_actions.jsx';
+
+const messageType = Constants.MessageType;
 
 export default class FormVacacionesMailbox extends React.Component {
     constructor(props) {
@@ -9,7 +17,43 @@ export default class FormVacacionesMailbox extends React.Component {
     }
 
     handleSaveAutoResp() {
-        console.log('save'); //eslint-disable-line no-console
+        const data = this.props.data;
+        const refs = this.refs;
+        let enabled = refs.zimbraPrefOutOfOfficeReplyEnabled.checked.toString().toUpperCase();
+        let formated = document.getElementById('zimbraPrefOutOfOfficeUntilDate').value.split('/').reverse().join('') + '000000Z';
+
+        let attrs = {
+            zimbraPrefOutOfOfficeReplyEnabled: enabled,
+            zimbraPrefOutOfOfficeUntilDate: formated,
+            zimbraPrefOutOfOfficeReply: refs.zimbraPrefOutOfOfficeReply.value
+        };
+
+        Client.modifyAccount(data.id, attrs, () => {
+            GlobalActions.emitMessage({
+                message: 'Se ha modificado con éxito',
+                type: messageType.SUCCESS
+            });
+        }, (error) => {
+            GlobalActions.emitMessage({
+                message: error.message,
+                type: messageType.ERROR
+            });
+        });
+    }
+
+    componentDidMount() {
+        const data = this.props.data.attrs;
+        if (data.hasOwnProperty('zimbraPrefOutOfOfficeReplyEnabled')) {
+            this.refs.zimbraPrefOutOfOfficeReplyEnabled.checked = data.zimbraPrefOutOfOfficeReplyEnabled.toString().toLowerCase() === 'true';
+        }
+
+        if (data.hasOwnProperty('zimbraPrefOutOfOfficeUntilDate')) {
+            document.getElementById('zimbraPrefOutOfOfficeUntilDate').value = Utils.dateFormatted(data.zimbraPrefOutOfOfficeUntilDate, true, '/');
+        }
+
+        if (data.hasOwnProperty('zimbraPrefOutOfOfficeReply')) {
+            this.refs.zimbraPrefOutOfOfficeReply.value = data.zimbraPrefOutOfOfficeReply;
+        }
     }
 
     render() {
@@ -32,7 +76,7 @@ export default class FormVacacionesMailbox extends React.Component {
                                 <input
                                     type='checkbox'
                                     className='pretty'
-                                    ref='habilitado'
+                                    ref='zimbraPrefOutOfOfficeReplyEnabled'
                                 />
                                 <span></span>
                             </div>
@@ -46,11 +90,14 @@ export default class FormVacacionesMailbox extends React.Component {
                     </label>
 
                     <div className='col-sm-8'>
-                        <input
-                            type='password'
-                            className='form-control'
-                            ref='endsAt'
-                            id='endsAt'
+                        <DateTimeField
+                            inputFormat='DD/MM/YYYY'
+                            inputProps={
+                                {
+                                    id: 'zimbraPrefOutOfOfficeUntilDate',
+                                    readOnly: 'readOnly'
+                                }
+                            }
                         />
                     </div>
                 </div>
@@ -66,7 +113,7 @@ export default class FormVacacionesMailbox extends React.Component {
                             id='responseBox'
                             className='form-control'
                             rows='4'
-                            ref='respVacaciones'
+                            ref='zimbraPrefOutOfOfficeReply'
                         >
                         </textarea>
                     </div>
@@ -84,7 +131,7 @@ export default class FormVacacionesMailbox extends React.Component {
                                 }
                             }
                         >
-                            {'Cancelar'}
+                            {'Guardar'}
                         </Button>
                     </div>
                 </div>
@@ -92,3 +139,10 @@ export default class FormVacacionesMailbox extends React.Component {
         );
     }
 }
+
+FormVacacionesMailbox.propTypes = {
+    data: React.PropTypes.oneOfType([
+        React.PropTypes.object,
+        React.PropTypes.string
+    ])
+};

src/components/mailbox/mailbox.jsx

@@ -204,7 +204,7 @@ export default class Mailboxes extends React.Component {
                                     }
                                 }}
                             >
-                                {attrs.mail}
+                                {mail.name}
                             </Button>
                         </td>
 

src/components/mailbox/mailbox_details.jsx

@@ -4,6 +4,8 @@
 import $ from 'jquery';
 import React from 'react';
 
+import EventStore from '../../stores/event_store.jsx';
+
 import PageInfo from '../page_info.jsx';
 import PanelTab from '../panel_tab.jsx';
 import Panel from '../panel.jsx';
@@ -13,6 +15,7 @@ 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 MessageBar from '../message_bar.jsx';
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
@@ -24,6 +27,7 @@ export default class MailboxDetails extends React.Component {
 
         this.getMailbox = this.getMailbox.bind(this);
         this.handleEdit = this.handleEdit.bind(this);
+        this.showMessage = this.showMessage.bind(this);
 
         this.state = {};
     }
@@ -32,6 +36,14 @@ export default class MailboxDetails extends React.Component {
         Utils.handleLink(e, path, location);
     }
 
+    showMessage(attrs) {
+        this.setState({
+            error: attrs.message,
+            type: attrs.type.toLowerCase(),
+            autocloseInSecs: 10
+        });
+    }
+
     getMailbox() {
         const id = this.props.params.id;
         Utils.toggleStatusButtons('.action-info-btns', true);
@@ -55,11 +67,13 @@ export default class MailboxDetails extends React.Component {
     }
 
     componentDidMount() {
+        EventStore.addMessageListener(this.showMessage);
         $('#sidebar-mailboxes').addClass('active');
         this.getMailbox();
     }
 
     componentWillUnmount() {
+        EventStore.removeMessageListener(this.showMessage);
         $('#sidebar-mailboxes').removeClass('active');
     }
 
@@ -68,6 +82,18 @@ export default class MailboxDetails extends React.Component {
         let statsData;
         let btnsGeneralInfo = [];
         let btnsStats = [];
+        let panelTabs;
+        let message;
+
+        if (this.state.error) {
+            message = (
+                <MessageBar
+                    message={this.state.error}
+                    type={this.state.type}
+                    autoclose={true}
+                />
+            );
+        }
 
         if (this.state.data) {
             generalData = (
@@ -118,32 +144,15 @@ export default class MailboxDetails extends React.Component {
                     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/>
+                <FormVacacionesMailbox data={this.state.data}/>
             );
 
             const formAlias = (
-            <FormAliasMailbox/>
+                <FormAliasMailbox
+                    data={this.state.data}
+                />
             );
 
             const tabAdmin = (
@@ -157,11 +166,12 @@ export default class MailboxDetails extends React.Component {
                 <Panel
                     title='Casillas'
                     hasHeader={false}
+                    classHeader={'reset-panel'}
                     children={formAlias}
                 />
             );
 
-        const panelTabs = (
+            panelTabs = (
                 <PanelTab
                     tabNames={['Resp Vacaciones', 'Alias']}
                     tabs={{
@@ -171,10 +181,30 @@ export default class MailboxDetails extends React.Component {
                     location={this.props.location}
                 />
             );
+        }
+
+        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>
+            );
+        }
 
         return (
             <div>
                 {pageInfo}
+                {message}
                 <div className='content animate-panel'>
                     <div className='row'>
                         <div className='col-md-6 central-content'>

src/config/config.json

 {
-    "debug": true,
+    "debug": false,
     "zimbraUrl": "http://zimbra.zboxapp.dev:8000/service/admin/soap",
     "zimbraProxy": "https://zimbra.zboxapp.dev:7071",
     "dnsApiUrl": "http://zimbra.zboxapp.dev:3000",

src/sass/components/_various.scss

@@ -1266,6 +1266,18 @@ label {
     text-align: center;
   }
 
+  &.reset-panel {
+    margin: 0;
+
+    .panel-body {
+      padding: 0;
+
+      .btn {
+        margin: 0;
+      }
+    }
+  }
+
   &.with-min-height {
     .panel-body {
       min-height: 200px;
@@ -1612,3 +1624,7 @@ label {
     }
   }
 }
+
+.pointer {
+  cursor: pointer;
+}

src/stores/event_store.jsx

@@ -32,6 +32,18 @@ class EventStoreClass extends EventEmitter {
     removeEndLoadingListener(callback) {
         this.removeListener(eventTypes.END_LOADING_EVENT, callback);
     }
+
+    emitMessage(attrs) {
+        this.emit(eventTypes.NEW_MESSAGE_EVENT, attrs);
+    }
+
+    addMessageListener(callback) {
+        this.on(eventTypes.NEW_MESSAGE_EVENT, callback);
+    }
+
+    removeMessageListener(callback) {
+        this.removeListener(eventTypes.NEW_MESSAGE_EVENT, callback);
+    }
 }
 
 var EventStore = new EventStoreClass();
@@ -47,6 +59,9 @@ EventStore.dispatchToken = AppDispatcher.register((payload) => {
     case ActionTypes.END_LOADING:
         EventStore.emitEndLoading();
         break;
+    case ActionTypes.NEW_MESSAGE:
+        EventStore.emitMessage(action.attrs);
+        break;
     default:
     }
 });

src/utils/client.jsx

@@ -362,3 +362,22 @@ export function getDnsInfo(domain, success, error) {
         }
     });
 }
+
+export function addAccountAlias(alias, success, error) {
+    initZimbra().then(
+        (zimbra) => {
+            zimbra.addAccountAlias(alias, (err, data) => {
+                if (err) {
+                    const e = handleError('addAccountAlias', err);
+                    return error(e);
+                }
+
+                return success(data);
+            });
+        },
+        (err) => {
+            const e = handleError('addAccountAlias', err);
+            return error(e);
+        }
+    );
+}

src/utils/constants.jsx

@@ -8,7 +8,8 @@ export default {
         START_LOADING: null,
         END_LOADING: null,
         USER_CHANGED: null,
-        RECEIVED_ERROR: null
+        RECEIVED_ERROR: null,
+        NEW_MESSAGE: null
     }),
 
     PayloadSources: keyMirror({
@@ -21,7 +22,14 @@ export default {
         DOMAIN_DLS_CHANGE_EVENT: null,
         START_LOADING_EVENT: null,
         END_LOADING_EVENT: null,
-        USER_CHANGE_EVENT: null
+        USER_CHANGE_EVENT: null,
+        NEW_MESSAGE_EVENT: null
+    }),
+
+    MessageType: keyMirror({
+        SUCCESS: null,
+        WARNING: null,
+        ERROR: null
     }),
 
     ZimbraCodes: {

src/utils/utils.jsx

@@ -204,16 +204,26 @@ export function toggleStatusButtons(classNames, isDisabled) {
     }
 }
 
-export function dateFormatted(dateString) {
+export function dateFormatted(dateString, isShortDate, separator) {
     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 month = (isShortDate) ? date.substr(4, 2) : parseInt(date.substr(4, 2), 10);
         const day = date.substr(6, 2);
-        const dateFormattedString = `${day} de ${CONSTANTS.MONTHS[month - 1]} de ${year}`;
+        let dateFormattedString = `${day} de ${CONSTANTS.MONTHS[month - 1]} de ${year}`;
+
+        if (isShortDate) {
+            dateFormattedString = `${day}${separator}${month}${separator}${year}`;
+        }
 
         return dateFormattedString;
     }
 
     return false;
 }
+
+export function removeIndexFromArray(array, index, pos) {
+    array.splice(index, pos || 1);
+
+    return array;
+}