Merged master into idioma_espanol [skip ci]

client/package.json

@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "app-module-path": "^1.0.3",
+    "chart.js": "^2.4.0",
     "classnames": "^2.1.3",
     "draft-js": "^0.8.1",
     "draft-js-export-html": "^0.4.0",
@@ -63,10 +64,11 @@
     "lodash": "^3.10.0",
     "messageformat": "^0.2.2",
     "react": "^15.0.1",
+    "react-chartjs-2": "^2.0.0",
     "react-document-title": "^1.0.2",
     "react-dom": "^15.0.1",
     "react-google-recaptcha": "^0.5.2",
-    "react-motion": "^0.4.4",
+    "react-motion": "^0.4.7",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.0",
     "react-router-redux": "^4.0.5",

client/src/app-components/are-you-sure.js

@@ -2,21 +2,31 @@ import React from 'react';
 
 import i18n from 'lib-app/i18n';
 import Button from 'core-components/button';
+import Input from 'core-components/input';
 import ModalContainer from 'app-components/modal-container';
 
 class AreYouSure extends React.Component {
     static propTypes = {
         description: React.PropTypes.node,
-        onYes: React.PropTypes.func
+        onYes: React.PropTypes.func,
+        type: React.PropTypes.oneOf(['default', 'secure'])
+    };
+
+    static defaultProps = {
+        type: 'default'
     };
 
     static contextTypes = {
         closeModal: React.PropTypes.func
     };
-    
-    static openModal(description, onYes) {
+
+    state = {
+        password: ''
+    };
+
+    static openModal(description, onYes, type) {
         ModalContainer.openModal(
-            <AreYouSure description={description} onYes={onYes} />
+            <AreYouSure description={description} onYes={onYes} type={type}/>
         );
     }
 
@@ -31,8 +41,9 @@ class AreYouSure extends React.Component {
                     {i18n('ARE_YOU_SURE')}
                 </div>
                 <div className="are-you-sure__description" id="are-you-sure__description">
-                    {this.props.description}
+                    {this.props.description || (this.props.type === 'secure' && i18n('PLEASE_CONFIRM_PASSWORD'))}
                 </div>
+                {(this.props.type === 'secure') ? this.renderPassword() : null}
                 <div className="are-you-sure__buttons">
                     <div className="are-you-sure__yes-button">
                         <Button type="secondary" size="small" onClick={this.onYes.bind(this)} ref="yesButton" tabIndex="2">
@@ -40,7 +51,7 @@ class AreYouSure extends React.Component {
                         </Button>
                     </div>
                     <div className="are-you-sure__no-button">
-                        <Button type="link" size="auto" onClick={this.onNo.bind(this)}  tabIndex="2">
+                        <Button type="link" size="auto" onClick={this.onNo.bind(this)} tabIndex="2">
                             {i18n('CANCEL')}
                         </Button>
                     </div>
@@ -49,11 +60,31 @@ class AreYouSure extends React.Component {
         );
     }
 
-    onYes() {
-        this.closeModal();
+    renderPassword() {
+        return (
+            <Input className="are-you-sure__password" password placeholder="password" name="password" value={this.state.password} onChange={this.onPasswordChange.bind(this)} onKeyDown={this.onInputKeyDown.bind(this)}/>
+        );
+    }
 
-        if (this.props.onYes) {
-            this.props.onYes();
+    onPasswordChange(event) {
+        this.setState({
+            password: event.target.value
+        });
+    }
+
+    onInputKeyDown(event) {
+        if (event.keyCode == 13) {
+            this.onYes();
+        }
+    }
+
+    onYes() {
+        if (this.props.type === 'default' || this.state.password){
+            this.closeModal();
+
+            if (this.props.onYes) {
+                this.props.onYes(this.state.password);
+            }
         }
     }
 

client/src/app-components/are-you-sure.scss

@@ -27,4 +27,10 @@
         display: inline-block;
         margin-right: 10px;
     }
+
+    &__password {
+        margin: 0 auto;
+        margin-top: -30px;
+        margin-bottom: 20px;
+    }
 }

client/src/app-components/stats-chart.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import {Line} from 'react-chartjs-2';
+
+import i18n from 'lib-app/i18n';
+
+class StatsChart extends React.Component {
+
+    static propTypes = {
+        strokes: React.PropTypes.arrayOf(React.PropTypes.shape({
+            name: React.PropTypes.string,
+            values: React.PropTypes.arrayOf(React.PropTypes.shape({
+                date: React.PropTypes.string,
+                value: React.PropTypes.number
+            }))
+        })),
+        period: React.PropTypes.number
+    };
+
+    render() {
+        return (
+            <div>
+                <Line data={this.getChartData()} options={this.getChartOptions()} width={800} height={400} redraw/>
+            </div>
+        );
+    }
+
+    getChartData() {
+        let labels = this.getLabels();
+
+        let color = {
+            'CLOSE': 'rgba(150, 20, 20, 0.6)',
+            'CREATE_TICKET': 'rgba(20, 150, 20, 0.6)',
+            'SIGNUP': 'rgba(20, 20, 150, 0.6)',
+            'COMMENT': 'rgba(20, 200, 200, 0.6)',
+            'ASSIGN': 'rgba(20, 150, 20, 0.6)'
+        };
+
+        let strokes = this.props.strokes.slice();
+        let datasets = strokes.map((stroke, index) => {
+            return {
+                label: i18n('CHART_' + stroke.name),
+                data: stroke.values.map((val) => val.value),
+                fill: false,
+                borderWidth: this.getBorderWidth(),
+                borderColor: color[stroke.name],
+                pointBorderColor: color[stroke.name],
+                pointRadius: 0,
+                pointHoverRadius: 3,
+                lineTension: 0.2,
+                pointHoverBackgroundColor: color[stroke.name],
+                hitRadius: this.hitRadius(index)
+            }
+        });
+
+        return {
+            labels: labels,
+            datasets: datasets
+        };
+    }
+
+    getBorderWidth() {
+        return (this.props.period <= 90) ? 3 : 2;
+    }
+
+    getLabels() {
+        let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        let labels = [];
+
+        if (!this.props.strokes.length) {
+            labels = Array.from('x'.repeat(this.props.period));
+        }
+        else {
+            labels = this.props.strokes[0].values.map((item) => {
+                let idx = item.date.slice(4, 6) - 1;
+
+                return item.date.slice(6, 8) + ' ' +  months[idx];
+            });
+        }
+
+        return labels;
+    }
+
+    hitRadius(index) {
+        if (this.props.period <= 7) return 20;
+        if (this.props.period <= 30) return 15;
+        if (this.props.period <= 90) return 10;
+        return 3;
+    }
+
+    getChartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+}
+
+
+export default StatsChart;

client/src/app-components/stats.js

@@ -0,0 +1,197 @@
+import React from 'react';
+import _ from 'lodash';
+import classNames from 'classnames';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import DropDown from 'core-components/drop-down';
+import ToggleList from 'core-components/toggle-list';
+
+import StatsChart from 'app-components/stats-chart';
+
+const generalStrokes = ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'];
+const staffStrokes = ['ASSIGN', 'CLOSE'];
+const ID = {
+    'CREATE_TICKET': 0,
+    'ASSIGN': 0,
+    'CLOSE': 1,
+    'SIGNUP': 2,
+    'COMMENT': 3
+};
+
+class Stats extends React.Component {
+
+    static propTypes = {
+        type: React.PropTypes.string,
+        staffId: React.PropTypes.number
+    };
+
+    state = {
+        stats: this.getDefaultStats(),
+        strokes: this.getStrokes().map((name) => {
+            return {
+                name: name,
+                values: []
+            } 
+        }),
+        showed: [0],
+        period: 0
+    };
+
+    componentDidMount() {
+        this.retrieve(7);
+    }
+
+    render() {
+        return (
+            <div className={this.getClass()}>
+                <DropDown {...this.getDropDownProps()}/>
+                <ToggleList {...this.getToggleListProps()} />
+                <StatsChart {...this.getStatsChartProps()} />
+            </div>
+        );
+    }
+
+    getClass() {
+        let classes = {
+            'stats': true,
+            'stats_staff': this.props.type === 'staff'
+        };
+        
+        return classNames(classes);
+    }
+
+    getToggleListProps() {
+        return {
+            values: this.state.showed,
+            className: 'stats__toggle-list',
+            onChange: this.onToggleListChange.bind(this),
+            type: this.props.type === 'general' ? 'default' : 'small',
+            items: this.getStrokes().map((name) => {
+                return {
+                    content:
+                        <div className="stats__toggle-list-item">
+                            <div className="stats__toggle-list-item-value">{this.state.stats[name]}</div>
+                            <div className="stats__toggle-list-item-name">{i18n('CHART_' + name)}</div>
+                        </div>
+                }
+            })
+        };
+    }
+
+    onToggleListChange(event) {
+        this.setState({
+            showed: event.target.value
+        });
+    }
+
+    getDropDownProps() {
+        return {
+            items: ['Last 7 days', 'Last 30 days', 'Last 90 days', 'Last 365 days'].map((name) => {
+                return {
+                    content: name,
+                    icon: ''
+                };
+            }),
+            onChange: this.onDropDownChange.bind(this),
+            className: 'stats__dropdown'
+        }
+    }
+
+    onDropDownChange(event) {
+        let val = [7, 30, 90, 365];
+
+        this.retrieve(val[event.index]);
+    }
+
+    getStatsChartProps() {
+        let showed = this.getShowedArray();
+
+        return {
+            period: this.state.period,
+            strokes: _.filter(this.state.strokes, (s, i) => showed[i])
+        };
+    }
+
+    retrieve(period) {
+        let periodName;
+
+        switch (period) {
+            case 30:
+                periodName = 'MONTH';
+                break;
+            case 90:
+                periodName = 'QUARTER';
+                break;
+            case 365:
+                periodName = 'YEAR';
+                break;
+            default:
+                periodName = 'WEEK';
+        }
+
+        API.call({
+            path: '/system/get-stats',
+            data: this.getApiCallData(periodName)
+        }).then(this.onRetrieveSuccess.bind(this, period));
+    }
+
+    onRetrieveSuccess(period, result) {
+        let newStats = this.getDefaultStats();
+
+        let newStrokes = this.getStrokes().map((name) => {
+            return {
+                name: name,
+                values: []
+            };
+        });
+
+        let realPeriod = result.data.length / this.getStrokes().length;
+
+        result.data.map((item) => {
+            newStats[item.type] += item.value * 1;
+
+            newStrokes[ ID[item.type] ].values.push({
+                date: item.date,
+                value: item.value * 1
+            });
+        });
+
+        this.setState({stats: newStats, strokes: newStrokes, period: realPeriod});
+    }
+
+    getShowedArray() {
+        let showed = this.getStrokes().map(() => false);
+
+        for (let i = 0; i < showed.length; i++) {
+            showed[this.state.showed[i]] = true;
+        }
+
+        return showed;
+    }
+    
+    getStrokes() {
+        return this.props.type === 'general' ? generalStrokes : staffStrokes;
+    }
+
+    getDefaultStats() {
+        return this.props.type === 'general' ?
+        {
+            'CREATE_TICKET': 0,
+            'CLOSE': 0,
+            'SIGNUP': 0,
+            'COMMENT': 0
+        } :
+        {
+            'ASSIGN': 0,
+            'CLOSE': 0
+        };
+    }
+
+    getApiCallData(periodName) {
+        return this.props.type === 'general' ? {period: periodName} : {period: periodName, staffId: this.props.staffId};
+    }
+}
+
+export default Stats;

client/src/app-components/stats.scss

@@ -0,0 +1,54 @@
+@import '../scss/vars';
+
+.stats {
+
+    &__dropdown {
+        margin-left: auto;
+        margin-bottom: 20px;
+    }
+
+    &__toggle-list {
+        margin-bottom: 20px;
+        user-select: none;
+
+        &-item {
+
+            &-value {
+                font-size: $font-size--lg;
+                line-height: 80px;
+            }
+
+            &-name {
+                font-size: $font-size--md;
+                line-height: 20px;
+            }
+        }
+    }
+
+    &_staff {
+        .stats__dropdown {
+            margin-left: auto;
+            margin-bottom: 20px;
+            float: left;
+        }
+
+        .stats__toggle-list {
+            margin-bottom: 20px;
+            float: right;
+
+            &-item {
+
+                &-value {
+                    font-size: $font-size--md;
+                    line-height: 40px;
+                }
+
+                &-name {
+                    font-size: $font-size--sm;
+                    line-height: 20px;
+                }
+            }
+        }
+    }
+
+}

client/src/app-components/ticket-event.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
 
 import DateTransformer from 'lib-core/date-transformer';
 import Icon from 'core-components/icon';
@@ -161,7 +162,7 @@ class TicketEvent extends React.Component {
         }
 
         return (
-            <div className="ticket-viewer__file">
+            <div className="ticket-event__file">
                 {node}
             </div>
         )
@@ -222,7 +223,7 @@ class TicketEvent extends React.Component {
         const fileName = filePath.replace(/^.*[\\\/]/, '');
 
         return (
-            <a href={filePath} target="_blank">{fileName}</a>
+            <a href={API.getFileLink(filePath)}>{fileName}</a>
         )
     }
 }

client/src/app-components/ticket-event.scss

@@ -91,6 +91,14 @@
         }
     }
 
+    &__file {
+        background-color: $very-light-grey;
+        cursor: pointer;
+        text-align: right;
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
     &_staff {
         .ticket-event__icon {
             background-color: $primary-blue;

client/src/app-components/ticket-viewer.js

@@ -190,6 +190,7 @@ class TicketViewer extends React.Component {
                 <div className="ticket-viewer__response-field row">
                     <Form {...this.getCommentFormProps()}>
                         <FormField name="content" validation="TEXT_AREA" required field="textarea" />
+                        <FormField name="file" field="file"/>
                         <SubmitButton>{i18n('RESPOND_TICKET')}</SubmitButton>
                     </Form>
                 </div>
@@ -234,10 +235,12 @@ class TicketViewer extends React.Component {
             loading: this.state.loading,
             onChange: (formState) => {this.setState({
                 commentValue: formState.content,
+                commentFile: formState.file,
                 commentEdited: true
             })},
             values: {
-                'content': this.state.commentValue
+                'content': this.state.commentValue,
+                'file': this.state.commentFile
             }
         };
     }
@@ -320,6 +323,7 @@ class TicketViewer extends React.Component {
 
         API.call({
             path: '/ticket/comment',
+            dataAsForm: true,
             data: _.extend({
                 ticketNumber: this.props.ticket.ticketNumber
             }, formState)

client/src/app-components/ticket-viewer.scss

@@ -48,13 +48,6 @@
         margin-top: 10px;
     }
 
-    &__file {
-        background-color: $very-light-grey;
-        text-align: right;
-        padding: 5px 10px;
-        font-size: 12px;
-    }
-
     &__comments {
         position: relative;
     }

client/src/app-components/toggle-button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import classNames from 'classnames';
 import i18n from 'lib-app/i18n';
 
 class ToggleButton extends React.Component {
@@ -12,12 +13,22 @@ class ToggleButton extends React.Component {
 
     render() {
         return (
-            <div className="toggle-button" onClick={this.onClick.bind(this)}>
+            <div className={this.getClass()} onClick={this.onClick.bind(this)}>
                 {this.props.value ? i18n('ON') : i18n('OFF')}
             </div>
         );
     }
 
+    getClass() {
+        let classes = {
+            'toggle-button': true,
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
+    }
+
+
     onClick() {
         if (this.props.onChange) {
             this.props.onChange({

client/src/app-components/topic-viewer.js

@@ -105,7 +105,7 @@ class TopicViewer extends React.Component {
                 <Link {...this.getArticleLinkProps(article, index)}>
                     {article.title}
                 </Link>
-                <Icon className="topic-viewer__grab-icon" name="arrows" ref={'grab-' + index}/>
+                {(this.props.editable) ? <Icon className="topic-viewer__grab-icon" name="arrows" ref={'grab-' + index}/> : null}
             </li>
         );
     }

client/src/app-components/topic-viewer.scss

@@ -2,10 +2,11 @@
 
 .topic-viewer {
     text-align: left;
+    margin: 35px 0;
 
     &__header {
         cursor: default;
-        margin-bottom: 15px;
+        margin-bottom: 20px;
         font-size: $font-size--bg;
 
         &:hover {

client/src/app/App.js

@@ -3,6 +3,7 @@ import _                  from 'lodash';
 import classNames         from 'classnames';
 import { connect }        from 'react-redux'
 import { browserHistory } from 'react-router';
+import DocumentTitle      from 'react-document-title';
 
 import ModalContainer from 'app-components/modal-container';
 
@@ -33,19 +34,23 @@ class App extends React.Component {
 
     render() {
         return (
-          <div className={this.getClass()}>
-              <div className="application__content">
-                {React.cloneElement(this.props.children, {})}
-              </div>
-              <ModalContainer />
-          </div>
+            <DocumentTitle title={this.props.config.title}>
+                <div className={this.getClass()}>
+                    <div className="application__content">
+                        {React.cloneElement(this.props.children, {})}
+                    </div>
+                    <ModalContainer />
+                </div>
+            </DocumentTitle>
         );
     }
 
     getClass() {
         let classes = {
             'application': true,
-            'application_modal-opened': (this.props.modal.opened)
+            'application_modal-opened': (this.props.modal.opened),
+            'application_full-width': (this.props.config.layout === 'full-width' && !_.includes(this.props.location.pathname, '/admin')),
+            'application_user-system': (this.props.config['user-system-enabled'])
         };
 
         return classNames(classes);
@@ -86,20 +91,24 @@ class App extends React.Component {
             browserHistory.push('/admin/panel');
         }
 
-        if (this.props.session.userLevel && !this.isPathAvailableForStaff()) {
+        if (props.session.userLevel && !this.isPathAvailableForStaff(props)) {
             browserHistory.push('/admin/panel');
         }
+
+        if (!props.config.registration && _.includes(props.location.pathname, 'signup')) {
+            browserHistory.push('/');
+        }
     }
 
-    isPathAvailableForStaff() {
-        let pathForLevel2 = _.findIndex(level2Paths, path => _.includes(this.props.location.pathname, path)) !== -1;
-        let pathForLevel3 = _.findIndex(level3Paths, path => _.includes(this.props.location.pathname, path)) !== -1;
+    isPathAvailableForStaff(props) {
+        let pathForLevel2 = _.findIndex(level2Paths, path => _.includes(props.location.pathname, path)) !== -1;
+        let pathForLevel3 = _.findIndex(level3Paths, path => _.includes(props.location.pathname, path)) !== -1;
 
-        if (this.props.session.userLevel === 1) {
+        if (props.session.userLevel === 1) {
             return !pathForLevel2 && !pathForLevel3;
         }
 
-        if (this.props.session.userLevel === 2) {
+        if (props.session.userLevel === 2) {
             return !pathForLevel3;
         }
 

client/src/app/Routes.js

@@ -13,6 +13,8 @@ import MainSignUpPage from 'app/main/main-signup/main-signup-page';
 import MainVerifyTokenPage from 'app/main/main-verify-token-page';
 import MainRecoverPasswordPage from 'app/main/main-recover-password/main-recover-password-page';
 import MainMaintenancePage from 'app/main/main-maintenance-page';
+import MainCheckTicketPage from 'app/main/main-check-ticket-page';
+import MainViewTicketPage from 'app/main/main-view-ticket-page';
 
 import DashboardLayout from 'app/main/dashboard/dashboard-layout';
 import DashboardListTicketsPage from 'app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page';
@@ -48,9 +50,8 @@ import AdminPanelDepartments from 'app/admin/panel/staff/admin-panel-departments
 import AdminPanelViewStaff from 'app/admin/panel/staff/admin-panel-view-staff';
 
 import AdminPanelSystemPreferences from 'app/admin/panel/settings/admin-panel-system-preferences';
-import AdminPanelUserSystem from 'app/admin/panel/settings/admin-panel-user-system';
+import AdminPanelAdvancedSettings from 'app/admin/panel/settings/admin-panel-advanced-settings';
 import AdminPanelEmailTemplates from 'app/admin/panel/settings/admin-panel-email-templates';
-import AdminPanelCustomFields from 'app/admin/panel/settings/admin-panel-custom-fields';
 
 const history = syncHistoryWithStore(browserHistory, store);
 
@@ -63,6 +64,13 @@ export default (
                 <Route path='verify-token/:email/:token' component={MainVerifyTokenPage}/>
                 <Route path='recover-password' component={MainRecoverPasswordPage}/>
                 <Route path='maintenance' component={MainMaintenancePage}/>
+
+                <Route path='create-ticket' component={DashboardCreateTicketPage}/>
+                <Route path='check-ticket(/:ticketNumber/:email)' component={MainCheckTicketPage}/>
+                <Route path='view-ticket/:ticketNumber' component={MainViewTicketPage}/>
+                <Route path='articles' component={DashboardListArticlesPage}/>
+                <Route path='article/:articleId' component={DashboardArticlePage}/>
+
                 <Route path='dashboard' component={DashboardLayout}>
                     <IndexRoute component={DashboardListTicketsPage} />
                     <Route path='articles' component={DashboardListArticlesPage}/>
@@ -114,9 +122,8 @@ export default (
                     <Route path="settings">
                         <IndexRedirect to="system-preferences" />
                         <Route path="system-preferences" component={AdminPanelSystemPreferences} />
-                        <Route path="user-system" component={AdminPanelUserSystem} />
+                        <Route path="advanced-settings" component={AdminPanelAdvancedSettings} />
                         <Route path="email-templates" component={AdminPanelEmailTemplates} />
-                        <Route path="custom-fields" component={AdminPanelCustomFields} />
                     </Route>
                 </Route>
             </Route>

client/src/app/admin/admin-login-page.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import {connect}  from 'react-redux';
 
 import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
 import SessionActions from 'actions/session-actions';
 
 import Form from 'core-components/form';
@@ -16,7 +17,7 @@ class AdminLoginPage extends React.Component {
         return (
             <div className="admin-login-page">
                 <Widget className="admin-login-page__content">
-                    <div className="admin-login-page__image"><img width="100%" src="/images/logo.png" alt="OpenSupports Admin Panel"/></div>
+                    <div className="admin-login-page__image"><img width="100%" src={API.getURL() + '/images/logo.png'} alt="OpenSupports Admin Panel"/></div>
                     <div className="admin-login-page__login-form">
                         <Form onSubmit={this.onSubmit.bind(this)} loading={this.props.session.pending}>
                             <FormField name="email" label={i18n('EMAIL')} field="input" validation="EMAIL" fieldProps={{size:'large'}} required />

client/src/app/admin/panel/admin-panel-menu.js

@@ -99,7 +99,7 @@ class AdminPanelMenu extends React.Component {
                 level: 1,
                 items: this.getItemsByFilteredByLevel([
                     {
-                        name: i18n('TICKET_STATS'),
+                        name: i18n('STATISTICS'),
                         path: '/admin/panel/stats',
                         level: 1
                     },
@@ -201,19 +201,14 @@ class AdminPanelMenu extends React.Component {
                         level: 3
                     },
                     {
-                        name: i18n('USER_SYSTEM'),
-                        path: '/admin/panel/settings/user-system',
+                        name: i18n('ADVANCED_SETTINGS'),
+                        path: '/admin/panel/settings/advanced-settings',
                         level: 3
                     },
                     {
                         name: i18n('EMAIL_TEMPLATES'),
                         path: '/admin/panel/settings/email-templates',
                         level: 3
-                    },
-                    {
-                        name: i18n('FILTERS_CUSTOM_FIELDS'),
-                        path: '/admin/panel/settings/custom-fields',
-                        level: 3
                     }
                 ])
             }

client/src/app/admin/panel/admin-panel-staff-widget.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import {connect}  from 'react-redux';
 
 import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
 import Button from 'core-components/button';
 import SessionActions from 'actions/session-actions';
 
@@ -24,7 +25,7 @@ class AdminPanelStaffWidget extends React.Component {
                     </div>
                 </div>
                 <div className="admin-panel-staff-widget__profile-pic-wrapper">
-                    <img className="admin-panel-staff-widget__profile-pic" src={this.props.session.userProfilePic} />
+                    <img className="admin-panel-staff-widget__profile-pic" src={(this.props.session.userProfilePic) ? API.getFileLink(this.props.session.userProfilePic) : (API.getURL() + '/images/logo.png')} />
                 </div>
             </div>
         );

client/src/app/admin/panel/admin-panel-staff-widget.scss

@@ -8,6 +8,7 @@
     text-align: center;
 
     &__profile-pic-wrapper {
+        background-color: white;
         position: absolute;
         top: 8px;
         border: 4px solid $grey;

client/src/app/admin/panel/dashboard/admin-panel-activity.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import _ from 'lodash';
+import {TransitionMotion, spring} from 'react-motion';
 
 import API from 'lib-app/api-call';
 import i18n from 'lib-app/i18n';
@@ -64,12 +66,30 @@ class AdminPanelActivity extends React.Component {
     renderList() {
         return (
             <div>
-                {this.state.activities.map(this.renderRow.bind(this))}
+                <TransitionMotion styles={this.getStyles()} willEnter={this.getEnterStyle.bind(this)}>
+                    {this.renderActivityList.bind(this)}
+                </TransitionMotion>
                 {(!this.state.limit) ? this.renderButton() : null}
             </div>
         );
     }
 
+    renderActivityList(styles) {
+        return (
+            <div>
+                {styles.map(this.renderAnimatedItem.bind(this))}
+            </div>
+        );
+    }
+
+    renderAnimatedItem(config, index) {
+        return (
+            <div style={config.style} key={config.key}>
+                {this.renderRow(config.data, index)}
+            </div>
+        );
+    }
+
     renderButton() {
         return (
             <SubmitButton type="secondary" onClick={this.retrieveNextPage.bind(this)}>
@@ -84,6 +104,21 @@ class AdminPanelActivity extends React.Component {
         );
     }
 
+    getStyles() {
+        return this.state.activities.map((item, index) => ({
+            key: index + '',
+            data: item,
+            style: {marginTop: spring(0), opacity: spring(1)}
+        }));
+    }
+
+    getEnterStyle() {
+        return {
+            marginTop: -20,
+            opacity: 0
+        };
+    }
+
     onMenuItemClick(index) {
         this.setState({
             page: 1,

client/src/app/admin/panel/dashboard/admin-panel-my-account.js

@@ -23,6 +23,7 @@ class AdminPanelMyAccount extends React.Component {
     getEditorProps() {
         return {
             myAccount: true,
+            staffId: this.props.userId,
             name: this.props.userName,
             email: this.props.userEmail,
             profilePic: this.props.userProfilePic,

client/src/app/admin/panel/dashboard/admin-panel-stats.js

@@ -1,14 +1,20 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+import Stats from 'app-components/stats';
+import Header from 'core-components/header';
+
 class AdminPanelStats extends React.Component {
 
     render() {
         return (
-            <div>
-                /admin/panel/stats
+            <div class="admin-panel-stats">
+                <Header title={i18n('STATISTICS')} description={i18n('STATISTICS_DESCRIPTION')}/>
+                <Stats type="general"/>
             </div>
         );
     }
+    
 }
 
 export default AdminPanelStats;

client/src/app/admin/panel/settings/admin-panel-advanced-settings.js

@@ -0,0 +1,288 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+import ConfigActions from 'actions/config-actions';
+import API from 'lib-app/api-call';
+import i18n from 'lib-app/i18n';
+import ToggleButton from 'app-components/toggle-button';
+import AreYouSure from 'app-components/are-you-sure';
+import ModalContainer from 'app-components/modal-container';
+
+import Message from 'core-components/message';
+import Button from 'core-components/button';
+import FileUploader from 'core-components/file-uploader';
+import Header from 'core-components/header';
+import Listing from 'core-components/listing';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
+
+class AdminPanelAdvancedSettings extends React.Component {
+
+    state = {
+        loading: true,
+        messageType: '',
+        messageContent: '',
+        keyName: '',
+        keyCode: '',
+        selectedAPIKey: -1,
+        APIKeys: []
+    };
+
+    componentDidMount() {
+        this.getAllKeys();
+    }
+
+    render() {
+        return (
+            <div className="admin-panel-advanced-settings">
+                <Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')}/>
+                {(this.state.messageType) ? this.renderMessage() : null}
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="col-md-6">
+                            <div className="admin-panel-advanced-settings__user-system-enabled">
+                                <span className="admin-panel-advanced-settings__text">{i18n('ENABLE_USER_SYSTEM')}</span>
+                                <ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['user-system-enabled']} onChange={this.onToggleButtonUserSystemChange.bind(this)}/>
+                            </div>
+                        </div>
+                        <div className="col-md-6">
+                            <div className="admin-panel-advanced-settings__registration">
+                                <span className="admin-panel-advanced-settings__text">{i18n('ENABLE_USER_REGISTRATION')}</span>
+                                <ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['registration']} onChange={this.onToggleButtonRegistrationChange.bind(this)}/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-md-12">
+                        <span className="separator" />
+                    </div>
+                    <div className="col-md-12">
+                        <div className="col-md-3">
+                            <div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div>
+                            <FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportCSV.bind(this)}/>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div>
+                            <FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportSQL.bind(this)}/>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-advanced-settings__text">{i18n('BACKUP_DATABASE')}</div>
+                            <Button className="admin-panel-advanced-settings__button" type="secondary" size="medium" onClick={this.onBackupDatabase.bind(this)}>Download</Button>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-advanced-settings__text">{i18n('DELETE_ALL_USERS')}</div>
+                            <Button className="admin-panel-advanced-settings__button" size="medium" onClick={this.onDeleteAllUsers.bind(this)}>Delete</Button>
+                        </div>
+                    </div>
+                    <div className="col-md-12">
+                        <span className="separator" />
+                    </div>
+                    <div className="col-md-12 admin-panel-advanced-settings__api-keys">
+                        <div className="col-md-12 admin-panel-advanced-settings__api-keys-title">{i18n('REGISTRATION_API_KEYS')}</div>
+                        <div className="col-md-4">
+                            <Listing {...this.getListingProps()} />
+                        </div>
+                        <div className="col-md-8">
+                            {(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    renderMessage() {
+        return (
+            <Message type={this.state.messageType}>{this.state.messageContent}</Message>
+        );
+    }
+
+    renderNoKey() {
+        return (
+            <div className="admin-panel-advanced-settings__api-keys-none">
+                {i18n('NO_KEY_SELECTED')}
+            </div>
+        );
+    }
+
+    renderKey() {
+        let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
+
+        return (
+            <div className="admin-panel-advanced-settings__api-keys-info">
+                <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div>
+                <div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.name}</div>
+                <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('KEY')}</div>
+                <div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.token}</div>
+                <Button className="admin-panel-advanced-settings__api-keys-button" size="medium" onClick={this.onDeleteKeyClick.bind(this)}>
+                    {i18n('DELETE')}
+                </Button>
+            </div>
+        );
+    }
+
+    getListingProps() {
+        return {
+            title: i18n('REGISTRATION_API_KEYS'),
+            enableAddNew: true,
+            items: this.state.APIKeys.map((item) => {
+                return {
+                    content: item.name,
+                    icon: ''
+                };
+            }),
+            selectedIndex: this.state.selectedAPIKey,
+            onChange: index => this.setState({selectedAPIKey: index}),
+            onAddClick: this.openAPIKeyModal.bind(this)
+        };
+    }
+
+    openAPIKeyModal() {
+        ModalContainer.openModal(
+            <Form className="admin-panel-advanced-settings__api-keys-modal" onSubmit={this.addAPIKey.bind(this)}>
+                <Header title={i18n('ADD_API_KEY')} description={i18n('ADD_API_KEY_DESCRIPTION')}/>
+                <FormField name="name" label={i18n('NAME_OF_KEY')} validation="DEFAULT" required fieldProps={{size: 'large'}}/>
+                <SubmitButton type="secondary">{i18n('SUBMIT')}</SubmitButton>
+            </Form>
+        );
+    }
+
+    addAPIKey({name}) {
+        ModalContainer.closeModal();
+        API.call({
+            path: '/system/add-api-key',
+            data: {name}
+        }).then(this.getAllKeys.bind(this));
+    }
+
+    getAllKeys() {
+        API.call({
+            path: '/system/get-api-keys',
+            data: {}
+        }).then(this.onRetrieveSuccess.bind(this));
+    }
+
+    onDeleteKeyClick() {
+        AreYouSure.openModal(null, () => {
+            API.call({
+                path: '/system/delete-api-key',
+                data: {
+                    name: this.state.APIKeys[this.state.selectedAPIKey].name
+                }
+            }).then(this.getAllKeys.bind(this));
+        });
+    }
+
+    onRetrieveSuccess(result) {
+        this.setState({
+            APIKeys: result.data,
+            selectedAPIKey: -1
+        });
+    }
+
+    onToggleButtonUserSystemChange() {
+        AreYouSure.openModal(null, this.onAreYouSureUserSystemOk.bind(this), 'secure');
+    }
+
+    onToggleButtonRegistrationChange() {
+        AreYouSure.openModal(null, this.onAreYouSureRegistrationOk.bind(this), 'secure');
+    }
+
+    onAreYouSureUserSystemOk(password) {
+        API.call({
+            path: this.props.config['user-system-enabled'] ? '/system/disable-user-system' : '/system/enable-user-system',
+            data: {
+                password: password
+            }
+        }).then(() => {
+            this.setState({
+                messageType: 'success',
+                messageContent: this.props.config['user-system-enabled'] ? i18n('USER_SYSTEM_DISABLED') : i18n('USER_SYSTEM_ENABLED')
+            });
+            this.props.dispatch(ConfigActions.updateData());
+        }).catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_UPDATING_SETTINGS')}));
+    }
+
+    onAreYouSureRegistrationOk(password) {
+        API.call({
+            path: this.props.config['registration'] ? '/system/disable-registration' : '/system/enable-registration',
+            data: {
+                password: password
+            }
+        }).then(() => {
+            this.setState({
+                messageType: 'success',
+                messageContent: this.props.config['registration'] ? i18n('REGISTRATION_DISABLED') : i18n('REGISTRATION_ENABLED')
+            });
+            this.props.dispatch(ConfigActions.updateData());
+        }).catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_UPDATING_SETTINGS')}));
+    }
+
+    onImportCSV(event) {
+        AreYouSure.openModal(null, this.onAreYouSureCSVOk.bind(this, event.target.value), 'secure');
+    }
+
+    onImportSQL(event) {
+        AreYouSure.openModal(null, this.onAreYouSureSQLOk.bind(this, event.target.value), 'secure');
+    }
+
+    onAreYouSureCSVOk(file, password) {
+        API.call({
+           path: '/system/import-csv',
+           data: {
+               file: file,
+               password: password
+           }
+        })
+        .then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_CSV_DESCRIPTION')}))
+        .catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_CSV_DESCRIPTION')}));
+    }
+
+    onAreYouSureSQLOk(file, password) {
+        API.call({
+            path: '/system/import-sql',
+            data: {
+                file: file,
+                password: password
+            }
+        })
+        .then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_SQL_DESCRIPTION')}))
+        .catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_SQL_DESCRIPTION')}));
+    }
+
+    onBackupDatabase() {
+        API.call({
+            path: '/system/backup-database',
+            plain: true,
+            data: {}
+        }).then((result) => {
+            let contentType = 'application/octet-stream';
+            let link = document.createElement('a');
+            let blob = new Blob([result], {'type': contentType});
+            link.href = window.URL.createObjectURL(blob);
+            link.download = 'backup.sql';
+            link.click();
+        });
+    }
+
+    onDeleteAllUsers() {
+        AreYouSure.openModal(null, this.onAreYouSureDeleteAllUsersOk.bind(this), 'secure');
+    }
+
+    onAreYouSureDeleteAllUsersOk(password) {
+        API.call({
+            path: '/system/delete-all-users',
+            data: {
+                password: password
+            }
+        }).then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_DELETING_ALL_USERS')}
+        )).catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_DELETING_ALL_USERS')}));
+    }
+}
+
+
+export default connect((store) => {
+    return {
+        config: store.config
+    };
+})(AdminPanelAdvancedSettings);

client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss

@@ -0,0 +1,64 @@
+@import "../../../../scss/vars";
+
+.admin-panel-advanced-settings {
+    &__user-system-enabled {
+
+    }
+
+    &__registration {
+
+    }
+
+    &__toggle-button {
+        display: inline-block;
+        margin-left: 20px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    &__text {
+        margin-top: 30px;
+        margin-bottom: 20px;
+    }
+
+    &__button {
+        margin-bottom: 30px;
+        width: 150px;
+    }
+
+    &__api-keys {
+
+        &-title {
+            font-size: $font-size--bg;
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        &-info {
+            text-align: left;
+        }
+
+        &-subtitle {
+            font-size: $font-size--md;
+            margin-bottom: 5px;
+        }
+
+        &-data {
+            background-color: $light-grey;
+            border-radius: 4px;
+            width: 300px;
+            margin: 10px 0;
+            text-align: center;
+            padding: 5px 0;
+        }
+
+        &-modal {
+            min-width: 500px;
+        }
+
+        &-none {
+            color: $dark-grey;
+            font-size: $font-size--md;
+        }
+    }
+}

client/src/app/admin/panel/settings/admin-panel-custom-fields.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class AdminPanelCustomFields extends React.Component {
-
-    render() {
-        return (
-            <div>
-                /admin/panel/settings/custom-fields
-            </div>
-        );
-    }
-}
-
-export default AdminPanelCustomFields;

client/src/app/admin/panel/settings/admin-panel-system-preferences.js

@@ -213,7 +213,7 @@ class AdminPanelSystemPreferences extends React.Component {
                 'reCaptchaPrivate': result.data.reCaptchaPrivate,
                 'url': result.data['url'],
                 'title': result.data['title'],
-                'layout': result.data['layout'] == 'Full width' ? 1 : 0,
+                'layout': result.data['layout'] == 'full-width' ? 1 : 0,
                 'time-zone': result.data['time-zone'],
                 'no-reply-email': result.data['no-reply-email'],
                 'smtp-host': result.data['smtp-host'],

client/src/app/admin/panel/settings/admin-panel-user-system.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class AdminPanelUserSystem extends React.Component {
-
-    render() {
-        return (
-            <div>
-                /admin/panel/settings/user-system
-            </div>
-        );
-    }
-}
-
-export default AdminPanelUserSystem;

client/src/app/admin/panel/staff/staff-editor.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 import SessionStore from 'lib-app/session-store';
 import TicketList from 'app-components/ticket-list';
 import AreYouSure from 'app-components/are-you-sure';
+import Stats from 'app-components/stats';
 
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
 import SubmitButton from 'core-components/submit-button';
 import Message from 'core-components/message';
 import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+import Loading from 'core-components/loading';
 
 class StaffEditor extends React.Component {
     static propTypes = {
@@ -31,6 +35,7 @@ class StaffEditor extends React.Component {
         email: this.props.email,
         level: this.props.level - 1,
         message: null,
+        loadingPicture: false,
         departments: this.getUserDepartments()
     };
     
@@ -66,9 +71,12 @@ class StaffEditor extends React.Component {
                                     </div>
                                 </div>
                             </div>
-                            <div className="staff-editor__card-pic-wrapper">
-                                <img className="staff-editor__card-pic" src={this.props.profilePic} />
-                            </div>
+                            <label className={this.getPictureWrapperClass()}>
+                                <div className="staff-editor__card-pic-background"></div>
+                                <img className="staff-editor__card-pic" src={(this.props.profilePic) ? API.getFileLink(this.props.profilePic) : (API.getURL() + '/images/logo.png')} />
+                                {(this.state.loadingPicture) ? <Loading className="staff-editor__card-pic-loading" size="large"/> : <Icon className="staff-editor__card-pic-icon" name="upload" size="4x"/>}
+                                <input className="staff-editor__image-uploader" type="file" multiple={false} accept="image/x-png,image/gif,image/jpeg" onChange={this.onProfilePicChange.bind(this)}/>
+                            </label>
                         </div>
                     </div>
                     <div className="col-md-8">
@@ -97,7 +105,8 @@ class StaffEditor extends React.Component {
                     </div>
                     <div className="col-md-8">
                         <div className="staff-editor__activity">
-                            ACTIVITY
+                            <div className="staff-editor__activity-title">{i18n('ACTIVITY')}</div>
+                            <Stats staffId={this.props.staffId} type="staff"/>
                         </div>
                     </div>
                 </div>
@@ -193,6 +202,15 @@ class StaffEditor extends React.Component {
         );
     }
 
+    getPictureWrapperClass() {
+        let classes = {
+            'staff-editor__card-pic-wrapper': true,
+            'staff-editor__card-pic-wrapper_loading': this.state.loadingPicture
+        };
+
+        return classNames(classes);
+    }
+
     getTicketListProps() {
         return {
             type: 'secondary',
@@ -280,6 +298,32 @@ class StaffEditor extends React.Component {
             this.setState({message: 'FAIL'});
         });
     }
+
+    onProfilePicChange(event) {
+        this.setState({
+            loadingPicture: true
+        });
+
+        API.call({
+            path: '/staff/edit',
+            dataAsForm: true,
+            data: {
+                staffId: this.props.staffId,
+                file: event.target.files[0]
+            }
+        }).then(() => {
+            this.setState({
+                loadingPicture: false
+            });
+
+            if(this.props.onChange) {
+                this.props.onChange();
+            }
+        }).catch(() => {
+            window.scrollTo(0,0);
+            this.setState({message: 'FAIL', loadingPicture: false});
+        });
+    }
 }
 
 export default StaffEditor;

client/src/app/admin/panel/staff/staff-editor.scss

@@ -2,6 +2,10 @@
 
 .staff-editor {
 
+    &__image-uploader {
+        opacity: 0;
+    }
+
     &__card {
         background-color: $primary-red;
         position: relative;
@@ -17,7 +21,31 @@
             left: 50%;
             transform: translate(-50%, 0);
 
+            &-background {
+                background-color: black;
+                opacity: 0;
+                transition: opacity 0.2s ease;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                z-index: 10;
+            }
+
+            &-icon {
+                position: absolute;
+                color: white;
+                opacity: 0;
+                transition: opacity 0.2s ease;
+                top: 70px;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                z-index: 11;
+            }
+
             &-wrapper {
+                transition: opacity 0.2s ease;
+                background-color: white;
                 position: absolute;
                 top: 20px;
                 border: 4px solid $grey;
@@ -28,6 +56,26 @@
                 text-align: center;
                 left: 50%;
                 transform: translate(-50%, 0);
+                opacity: 1;
+
+                &_loading,
+                &:hover {
+                    cursor: pointer;
+
+                    .staff-editor__card-pic-background {
+                        opacity: 0.6;
+                    }
+
+                    .staff-editor__card-pic-icon {
+                        opacity: 0.8;
+                    }
+
+                    .staff-editor__card-pic-loading {
+                        position: absolute;
+                        top: 0;
+                        z-index: 11;
+                    }
+                }
             }
         }
 
@@ -156,4 +204,13 @@
             color: $dark-grey;
         }
     }
+
+    &__activity {
+
+        &-title {
+            margin-bottom: 10px;
+            text-align: left;
+        }
+    }
+
 }

client/src/app/admin/panel/tickets/admin-panel-view-ticket.js

@@ -12,6 +12,16 @@ import Header from 'core-components/header';
 
 class AdminPanelViewTicket extends React.Component {
 
+    static propTypes = {
+        avoidSeen: React.PropTypes.bool,
+        assignmentAllowed: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+        avoidSeen: false,
+        assignmentAllowed: true
+    };
+
     state = {
         loading: true,
         ticket: {}
@@ -62,7 +72,7 @@ class AdminPanelViewTicket extends React.Component {
         return {
             ticket: this.state.ticket,
             onChange: this.retrieveTicket.bind(this),
-            assignmentAllowed: true,
+            assignmentAllowed: this.props.assignmentAllowed,
             customResponses: this.props.customResponses,
             editable: this.state.ticket.owner && this.state.ticket.owner.id == SessionStore.getSessionData().userId
         };
@@ -83,7 +93,7 @@ class AdminPanelViewTicket extends React.Component {
             ticket: result.data
         });
 
-        if(result.data.unreadStaff) {
+        if(!this.props.avoidSeen && result.data.unreadStaff) {
             API.call({
                 path: '/ticket/seen',
                 data: {

client/src/app/app.scss

@@ -2,4 +2,160 @@
 
 .application {
     padding: $half-space;
+
+    &_full-width {
+        padding: 0;
+
+        .main-layout {
+            width: 100%;
+            max-width: none;
+
+            &-header {
+                border-radius: 0;
+                height: 40px;
+
+                &__login-links {
+                    padding-top: 8px;
+                    padding-left: 22px;
+                }
+
+                &__languages {
+                    top: 10px;
+                    left: -20px;
+                }
+            }
+
+            &--content {
+                position: relative;
+            }
+
+            &-footer {
+                height: 40px;
+
+                &--powered {
+                    padding-top: 9px;
+                }
+            }
+        }
+
+        .main-home-page {
+            margin: 0 auto;
+
+            .widget {
+                background-color: $very-light-grey;
+            }
+        }
+
+        .signup-widget {
+            background-color: $very-light-grey;
+        }
+        
+        .dashboard {
+
+            .widget {
+                background-color: transparent;
+            }
+
+            &__menu {
+                margin-left: -5px;
+                margin-top: -20px;
+                padding: 0;
+                background-color: $very-light-grey;
+                height: 100%;
+                position: absolute;
+
+                .menu__list {
+                    background-color: transparent;
+                    height: 100%;
+                    position: relative;
+                }
+
+                .menu__header {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    background-color: $secondary-blue;
+                    text-align: right;
+                }
+            }
+
+            &__content {
+                margin-top: -10px;
+            }
+
+            @media screen and (max-width: 992px) {
+
+                .dashboard__menu {
+                    position: static;
+                }
+            }
+        }
+
+        &__widget {
+            background-color: $very-light-grey;
+        }
+
+        @media screen and (max-width: 467px) {
+
+            .input {
+                width: 250px;
+            }
+        }
+
+        &.application_user-system {
+
+            .main-layout {
+                background-color: white;
+            }
+
+            .main-home-page {
+
+                &__login-widget {
+                    position: absolute;
+                }
+
+                &__portal-wrapper {
+                    margin-left: 360px;
+                    padding-left: 15px;
+                    padding-right: 15px;
+                }
+
+                @media screen and (max-width: 992px) {
+                    .main-home-page {
+
+                        &__login-widget,
+                        &__portal-wrapper {
+                            float: none;
+                            width: initial;
+                            margin-left: 0;
+                            position: static;
+                        }
+                    }
+                }
+            }
+        }
+
+        @media screen and (max-width: 379px) {
+
+            .main-home-page {
+
+                .widget {
+                    min-width: 313px !important;
+                    width: initial !important;
+                }
+            }
+        }
+    }
+
+    &_user-system {
+        @media screen and (max-width: 379px) {
+
+            .main-home-page {
+
+                .widget {
+                    min-width: initial;
+                    width: 283px;
+                }
+            }
+        }
+    }
 }

client/src/app/demo/components-demo-page.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const LineChart = require("react-chartjs-2").Line;
 const _ = require('lodash');
 const DocumentTitle = require('react-document-title');
 
@@ -16,8 +17,42 @@ const Menu = require('core-components/menu');
 const Tooltip = require('core-components/tooltip');
 const Table = require('core-components/table');
 const InfoTooltip = require('core-components/info-tooltip');
-const ToggleButton = require('app-components/toggle-button');
 
+function rand(min, max, num) {
+    var rtn = [];
+    while (rtn.length < num) {
+        rtn.push((Math.random() * (max - min)) + min);
+    }
+    return rtn;
+}
+
+let chartData = {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [
+        {
+            label: "My Second dataset",
+            fill: false,
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            borderWidth: 3,
+            data: rand(32, 100, 6),
+            pointRadius: 0
+        },
+        {
+            label: "My Second dataset",
+            fill: false,
+            pointColor: "rgba(151,187,205,1)",
+            pointStrokeColor: "#fff",
+            pointHighlightFill: "#fff",
+            pointHighlightStroke: "rgba(151,187,205,1)",
+            borderWidth: 3,
+            data: rand(32, 100, 6)
+        }
+    ]
+};
+let chartOptions = {};
 let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
 let secondaryMenuItems = [
     {content: 'My Tickets', icon: 'file-text'},
@@ -176,6 +211,12 @@ let DemoPage = React.createClass({
             render: (
                 <InfoTooltip type="warning" text="No staff member is assigned to this department." />
             )
+        },
+        {
+            title: 'LineChart',
+            render: (
+                <LineChart data={chartData} options={chartOptions} width="600" height="250" />
+            )
         }
 	],
 

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 import {connect}  from 'react-redux';
 
 import ArticlesActions from 'actions/articles-actions';
@@ -10,6 +11,7 @@ import DateTransformer from 'lib-core/date-transformer';
 import Header from 'core-components/header';
 import Loading from 'core-components/loading';
 import BreadCrumb from 'core-components/breadcrumb';
+import Widget from 'core-components/widget';
 
 class DashboardArticlePage extends React.Component {
 
@@ -32,12 +34,20 @@ class DashboardArticlePage extends React.Component {
     }
 
     render() {
+        let Wrapper = 'div';
+
+        if(_.startsWith(this.props.location.pathname, '/article/')) {
+            Wrapper = Widget;
+        }
+
         return (
-            <div className="dashboard-article-page">
-                <div className="dashboard-article-page__breadcrumb">
-                    <BreadCrumb items={this.getBreadCrumbItems()}/>
-                </div>
-                {(this.props.loading) ? <Loading /> : this.renderContent()}
+            <div className={this.getClass()}>
+                <Wrapper>
+                    <div className="dashboard-article-page__breadcrumb">
+                        <BreadCrumb items={this.getBreadCrumbItems()}/>
+                    </div>
+                    {(this.props.loading) ? <Loading /> : this.renderContent()}
+                </Wrapper>
             </div>
         );
     }
@@ -62,6 +72,15 @@ class DashboardArticlePage extends React.Component {
             </div>
         );
     }
+    
+    getClass() {
+        let classes = {
+            'dashboard-article-page': true,
+            'dashboard-article-page_wrapped': _.startsWith(this.props.location.pathname, '/article/')
+        };
+        
+        return classNames(classes);
+    }
 
     findArticle() {
         let article = null;
@@ -91,11 +110,11 @@ class DashboardArticlePage extends React.Component {
         let article = this.findArticle();
         let topic = this.findTopic();
         let items = [
-            {content: i18n('ARTICLES'), url: '/dashboard/articles'}
+            {content: i18n('ARTICLES'), url: (_.startsWith(this.props.location.pathname, '/article/')) ? '/articles' : '/dashboard/articles'}
         ];
 
         if(topic && topic.name) {
-            items.push({content: topic.name, url: '/dashboard/articles'});
+            items.push({content: topic.name, url: (_.startsWith(this.props.location.pathname, '/article/')) ? '/articles' : '/dashboard/articles'});
         }
 
         if(article && article.title) {

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.scss

@@ -5,4 +5,8 @@
         text-align: right;
         margin-top: 20px;
     }
+
+    &_wrapped {
+        padding: 0 15px;
+    }
 }

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -2,7 +2,7 @@ import React              from 'react';
 import _                  from 'lodash';
 import ReCAPTCHA          from 'react-google-recaptcha';
 import { browserHistory } from 'react-router';
-import RichTextEditor from 'react-rte-browserify';
+import RichTextEditor     from 'react-rte-browserify';
 
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
@@ -10,6 +10,7 @@ import SessionStore       from 'lib-app/session-store';
 import store              from 'app/store';
 import SessionActions     from 'actions/session-actions';
 import LanguageSelector   from 'app-components/language-selector';
+import Captcha            from 'app/main/captcha';
 
 import Header             from 'core-components/header';
 import Form               from 'core-components/form';
@@ -34,6 +35,8 @@ class CreateTicketForm extends React.Component {
             title: '',
             content: RichTextEditor.createEmptyValue(),
             departmentIndex: 0,
+            email: '',
+            name: '',
             language: 'en'
         }
     };
@@ -56,6 +59,9 @@ class CreateTicketForm extends React.Component {
                         }}/>
                     </div>
                     <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
+                    <div className="create-ticket-form__file">
+                        <FormField name="file" field="file" />
+                    </div>
                     {(!this.props.userLogged) ? this.renderCaptcha() : null}
                     <SubmitButton>Create Ticket</SubmitButton>
                 </Form>
@@ -76,7 +82,7 @@ class CreateTicketForm extends React.Component {
     renderCaptcha() {
         return (
             <div className="create-ticket-form__captcha">
-                <Captcha />
+                <Captcha ref="captcha"/>
             </div>
         );
     }
@@ -102,27 +108,38 @@ class CreateTicketForm extends React.Component {
     }
 
     onSubmit(formState) {
-        this.setState({
-            loading: true
-        });
+        let captcha = this.refs.captcha && this.refs.captcha.getWrappedInstance();
 
-        API.call({
-            path: '/ticket/create',
-            data: _.extend({}, formState, {
-                departmentId: SessionStore.getDepartments()[formState.departmentIndex].id
-            })
-        }).then(this.onTicketSuccess.bind(this)).catch(this.onTicketFail.bind(this));
+        if (captcha && !captcha.getValue()) {
+            captcha.focus();
+        } else {
+            this.setState({
+                loading: true
+            });
+
+            API.call({
+                path: '/ticket/create',
+                dataAsForm: true,
+                data: _.extend({}, formState, {
+                    captcha: captcha && captcha.getValue(),
+                    departmentId: SessionStore.getDepartments()[formState.departmentIndex].id
+                })
+            }).then(this.onTicketSuccess.bind(this, formState.email)).catch(this.onTicketFail.bind(this));
+        }
     }
 
-    onTicketSuccess() {
+    onTicketSuccess(email, result) {
         this.setState({
             loading: false,
             message: 'success'
         });
 
-        store.dispatch(SessionActions.getUserData());
-
-        setTimeout(() => {browserHistory.push('/dashboard')}, 2000);
+        if(this.props.userLogged) {
+            store.dispatch(SessionActions.getUserData());
+            setTimeout(() => {browserHistory.push('/dashboard')}, 2000);
+        } else {
+            setTimeout(() => {browserHistory.push('/check-ticket/' + email + '/' + result.data.ticketNumber)}, 2000);
+        }
     }
 
     onTicketFail() {

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss

@@ -1,5 +1,9 @@
 .create-ticket-form {
 
+    &__file {
+        text-align: left;
+    }
+
     &__message {
         margin-top: 20px;
     }

client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js

@@ -1,16 +1,45 @@
 import React from 'react';
+import classNames from 'classnames';
+import {connect} from 'react-redux';
 
 import CreateTicketForm from 'app/main/dashboard/dashboard-create-ticket/create-ticket-form';
+import Widget from 'core-components/widget';
 
 class DashboardCreateTicketPage extends React.Component {
 
+    static propTypes = {
+        userSystemEnabled: React.PropTypes.bool
+    };
+
     render() {
+        let Wrapper = 'div';
+
+        if((this.props.location.pathname === '/create-ticket')) {
+            Wrapper = Widget;
+        }
+
         return (
-            <div>
-                <CreateTicketForm />
+            <div className={this.getClass()}>
+                <Wrapper>
+                    <CreateTicketForm userLogged={(this.props.location.pathname !== '/create-ticket')} />
+                </Wrapper>
             </div>
         );
     }
+
+    getClass() {
+        let classes = {
+            'dashboard-create-ticket-page': true,
+            'dashboard-create-ticket-page_wrapped': (this.props.location.pathname === '/create-ticket'),
+            'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled'])
+        };
+
+        return classNames(classes);
+    }
 }
 
-export default DashboardCreateTicketPage;
+export default connect((store) => {
+    return {
+        config: store.config
+    };
+})(DashboardCreateTicketPage);

client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.scss

@@ -0,0 +1,6 @@
+.dashboard-create-ticket-page {
+
+    &_wrapped {
+        padding: 0 10px;
+    }
+}

client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js

@@ -24,19 +24,19 @@ class DashboardEditProfilePage extends React.Component {
     render() {
         return (
             <div className="edit-profile-page">
-                <Header title="Edit Profile" description="what ever" />
-                <div className="edit-profile-page__title">Edit Email</div>
+                <Header title={i18n('EDIT_PROFILE')} description={i18n('EDIT_PROFILE_VIEW_DESCRIPTION')} />
+                <div className="edit-profile-page__title">{i18n('EDIT_EMAIL')}</div>
                 <Form loading={this.state.loadingEmail} onSubmit={this.onSubmitEditEmail.bind(this)}>
                     <FormField name="newEmail" label="New Email" field="input" validation="EMAIL" fieldProps={{size:'large'}} required/>
-                    <SubmitButton>CHANGE EMAIL</SubmitButton>
+                    <SubmitButton>{i18n('CHANGE_EMAIL')}</SubmitButton>
                     {this.renderMessageEmail()}
                 </Form>
-                <div className="edit-profile-page__title">Edit password</div>
+                <div className="edit-profile-page__title">{i18n('EDIT_PASSWORD')}</div>
                 <Form loading={this.state.loadingPass} onSubmit={this.onSubmitEditPassword.bind(this)}>
-                    <FormField name="oldPassword" label="Old Password" field="input" validation="PASSWORD" fieldProps={{password:true, size:'large'}} required/>
-                    <FormField name="password" label="New Password" field="input" validation="PASSWORD" fieldProps={{password:true, size:'large'}} required/>
-                    <FormField name="repeatNewPassword" label="Repeat New Password" field="input" validation="REPEAT_PASSWORD" fieldProps={{password:true ,size:'large'}} required/>
-                    <SubmitButton>CHANGE PASSWORD</SubmitButton>
+                    <FormField name="oldPassword" label={i18n('OLD_PASSWORD')} field="input" validation="PASSWORD" fieldProps={{password:true, size:'large'}} required/>
+                    <FormField name="password" label={i18n('NEW_PASSWORD')} field="input" validation="PASSWORD" fieldProps={{password:true, size:'large'}} required/>
+                    <FormField name="repeatNewPassword" label={i18n('REPEAT_NEW_PASSWORD')} field="input" validation="REPEAT_PASSWORD" fieldProps={{password:true ,size:'large'}} required/>
+                    <SubmitButton>{i18n('CHANGE_PASSWORD')}</SubmitButton>
                     {this.renderMessagePass()}
                 </Form>
             </div>

client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss

@@ -1,12 +1,15 @@
 @import '../../../../scss/vars';
 
 .edit-profile-page {
+
     &__title {
         color: $dark-grey;
         font-size: 20px;
         text-align: left;
+        margin-bottom: 20px;
     }
-    &__message{
+
+    &__message {
         margin-top: 20px;
         margin-bottom: 20px;
     }

client/src/app/main/dashboard/dashboard-layout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import classNames from 'classnames';
 
 import DashboardMenu from 'app/main/dashboard/dashboard-menu';
 import Widget from 'core-components/widget';
@@ -9,8 +10,10 @@ class DashboardLayout extends React.Component {
     render() {
         return (this.props.session.logged) ? (
             <div className="dashboard">
-                <div className="dashboard__menu col-md-3"><DashboardMenu location={this.props.location} /></div>
-                <div className="dashboard__content col-md-9">
+                <div className={this.getDashboardMenuClass()}>
+                    <DashboardMenu location={this.props.location} />
+                </div>
+                <div className={this.getDashboardContentClass()}>
                     <Widget>
                         {this.props.children}
                     </Widget>
@@ -18,10 +21,32 @@ class DashboardLayout extends React.Component {
             </div>
         ) : null;
     }
+
+    getDashboardMenuClass() {
+        let classes = {
+            'dashboard__menu': true,
+            'col-md-3': (this.props.config.layout === 'boxed'),
+            'col-md-2': (this.props.config.layout === 'full-width')
+        };
+
+        return classNames(classes);
+    }
+
+    getDashboardContentClass() {
+        let classes = {
+            'dashboard__content': true,
+            'col-md-9': (this.props.config.layout === 'boxed'),
+            'col-md-10': (this.props.config.layout === 'full-width'),
+            'col-md-offset-2': (this.props.config.layout === 'full-width')
+        };
+
+        return classNames(classes);
+    }
 }
 
 export default connect((store) => {
     return {
-        session: store.session
+        session: store.session,
+        config: store.config
     };
 })(DashboardLayout);

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import {connect}  from 'react-redux';
 import _ from 'lodash';
 import {Link} from 'react-router';
@@ -9,6 +10,7 @@ import ArticlesActions from 'actions/articles-actions';
 
 import Header from 'core-components/header';
 import SearchBox from 'core-components/search-box';
+import Widget from 'core-components/widget';
 
 class DashboardListArticlesPage extends React.Component {
 
@@ -22,18 +24,28 @@ class DashboardListArticlesPage extends React.Component {
     }
 
     render() {
+        let Wrapper = 'div';
+
+        if(this.props.location.pathname == '/articles') {
+            Wrapper = Widget;
+        }
+
         return (
-            <div className="dashboard-list-articles-page">
-                <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
-                <SearchBox className="dashboard-list-articles-page__search-box" onSearch={this.onSearch.bind(this)} searchOnType />
-                {(!this.state.showSearchResults) ? this.renderArticleList() : this.renderSearchResults()}
+            <div className={this.getClass()}>
+                <Wrapper>
+                    <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
+                    <SearchBox className="dashboard-list-articles-page__search-box" onSearch={this.onSearch.bind(this)} searchOnType />
+                    {(!this.state.showSearchResults) ? this.renderArticleList() : this.renderSearchResults()}
+                </Wrapper>
             </div>
         );
     }
 
     renderArticleList() {
+        let articlePath = (this.props.location.pathname == '/articles') ? '/article/' : '/dashboard/article/';
+        
         return (
-            <ArticlesList editable={false} articlePath="/dashboard/article/" retrieveOnMount={false}/>
+            <ArticlesList editable={false} articlePath={articlePath} retrieveOnMount={false}/>
         );
     }
 
@@ -53,7 +65,7 @@ class DashboardListArticlesPage extends React.Component {
         return (
             <div className="dashboard-list-articles-page__search-result">
                 <div className="dashboard-list-articles-page__search-result-title">
-                    <Link to={'/dashboard/article/' + item.id}>{item.title}</Link>
+                    <Link to={((this.props.location.pathname == '/articles') ? '/article/' : '/dashboard/article/') + item.id}>{item.title}</Link>
                 </div>
                 <div className="dashboard-list-articles-page__search-result-description">{content}</div>
                 <div className="dashboard-list-articles-page__search-result-topic">{item.topic}</div>
@@ -61,6 +73,16 @@ class DashboardListArticlesPage extends React.Component {
         );
     }
 
+    getClass() {
+        let classes = {
+            'dashboard-list-articles-page': true,
+            'dashboard-list-articles-page_wrapped': (this.props.location.pathname == '/articles'),
+            'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled'])
+        };
+
+        return classNames(classes);
+    }
+
     onSearch(query) {
         this.setState({
             results: SearchBox.searchQueryInList(this.getArticles(), query, this.isQueryInTitle.bind(this), this.isQueryInContent.bind(this)),
@@ -103,6 +125,7 @@ class DashboardListArticlesPage extends React.Component {
 
 export default connect((store) => {
     return {
+        config: store.config,
         topics: store.articles.topics,
         loading: store.articles.loading
     };

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss

@@ -29,4 +29,8 @@
             text-transform: uppercase;
         }
     }
+
+    &_wrapped {
+        padding: 0 15px;
+    }
 }

client/src/app/main/dashboard/dashboard-menu.js

@@ -24,7 +24,7 @@ class DashboardMenu extends React.Component {
 
     getProps() {
         return {
-            header: 'Dashboard',
+            header: i18n('DASHBOARD'),
             items: this.getMenuItems(),
             selectedIndex: this.getSelectedIndex(),
             onItemClick: this.onItemClick.bind(this),

client/src/app/main/main-check-ticket-page.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import classNames from 'classnames';
+import {browserHistory} from 'react-router';
+import {connect} from 'react-redux';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+import SessionStore from 'lib-app/session-store';
+
+import Widget from 'core-components/widget';
+import Header from 'core-components/header';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
+import Captcha from 'app/main/captcha';
+
+class MainCheckTicketPage extends React.Component {
+
+    state = {
+        loading: false,
+        form: {
+            email: this.props.params.email || '',
+            ticketNumber: this.props.params.ticketNumber || ''
+        },
+        errors: {}
+    };
+
+    render() {
+        return (
+            <div className={this.getClass()}>
+                <Widget>
+                    <Header title={i18n('CHECK_TICKET')} description={i18n('VIEW_TICKET_DESCRIPTION')} />
+                    <Form {...this.getFormProps()}>
+                        <div className="main-check-ticket-page__inputs">
+                            <div className="main-check-ticket-page__input">
+                                <FormField name="email" label={i18n('EMAIL')} validation="EMAIL" required fieldProps={{size: 'large'}}/>
+                            </div>
+                            <div className="main-check-ticket-page__input">
+                                <FormField name="ticketNumber" label={i18n('TICKET_NUMBER')} validation="DEFAULT" required fieldProps={{size: 'large'}}/>
+                            </div>
+                        </div>
+                        <div className="main-check-ticket-page__captcha">
+                            <Captcha ref="captcha"/>
+                        </div>
+                        <SubmitButton>{i18n('CHECK_TICKET')}</SubmitButton>
+                    </Form>
+                </Widget>
+            </div>
+        );
+    }
+
+    getClass() {
+        let classes = {
+            'main-check-ticket-page': true,
+            'col-md-10 col-md-offset-1': (!this.props.config['user-system-enabled'])
+        };
+
+        return classNames(classes);
+    }
+
+    getFormProps() {
+        return {
+            className: 'main-check-ticket-page__form',
+            loading: this.state.loading,
+            values: this.state.form,
+            errors: this.state.errors,
+            onChange: (form) => this.setState({form}),
+            onValidateErrors: (errors) => this.setState({errors}),
+            onSubmit: this.onFormSubmit.bind(this)
+        };
+    }
+
+    onFormSubmit(form) {
+        const captcha = this.refs.captcha.getWrappedInstance();
+
+        if (!captcha.getValue()) {
+            captcha.focus();
+        } else {
+            this.setState({
+                loading: true
+            });
+
+            API.call({
+                path: '/ticket/get',
+                data: {
+                    captcha: captcha && captcha.getValue(),
+                    ticketNumber: form.ticketNumber,
+                    email: form.email
+                }
+            }).then(this.onTicketGetSuccess.bind(this)).catch(() => this.setState({
+                loading: false,
+                errors: {
+                    email: i18n('INVALID_EMAIL_OR_TICKET_NUMBER'),
+                    ticketNumber: i18n('INVALID_EMAIL_OR_TICKET_NUMBER')
+                }
+            }));
+        }
+    }
+
+    onTicketGetSuccess(result) {
+        SessionStore.setItem('token', result.data.token);
+        setTimeout(() => {browserHistory.push('/view-ticket/' + this.state.form.ticketNumber)}, 2000);
+    }
+}
+
+export default connect((store) => {
+    return {
+        config: store.config
+    };
+})(MainCheckTicketPage);

client/src/app/main/main-check-ticket-page.scss

@@ -0,0 +1,24 @@
+.main-check-ticket-page {
+    padding: 0 15px;
+
+    &__form {
+        margin: 0 auto;
+        max-width: 790px;
+    }
+
+    &__inputs {
+        display: inline-block;
+        margin: 0 auto;
+    }
+
+    &__input {
+        display: inline-block;
+        margin: 0 20px;
+    }
+
+    &__captcha {
+        margin: 20px auto 20px;
+        height: 78px;
+        width: 304px;
+    }
+}

client/src/app/main/main-home/main-home-page-login-widget.scss

@@ -17,8 +17,4 @@
     &__message {
         margin-top: 18px;
     }
-
-    &_password {
-        width: 324px;
-    }
 }

client/src/app/main/main-home/main-home-page-portal.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import {browserHistory} from 'react-router';
+import {connect} from 'react-redux'
 
 import Widget from 'core-components/widget';
 import Card from 'core-components/card';
@@ -7,26 +9,76 @@ import i18n from 'lib-app/i18n';
 import Header from 'core-components/header';
 
 class MainHomePagePortal extends React.Component {
+    static propTypes = {
+        type: React.PropTypes.oneOf(['default', 'complete'])
+    };
+
     render() {
         return (
             <Widget className={classNames('main-home-page-portal', this.props.className)}>
                 <div className="main-home-page-portal__title">
-                    <Header title={i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
+                    <Header title={this.props.title || i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
                 </div>
                 <div className="main-home-page-portal__cards">
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
+                        <Card {...this.getTicketsCardProps()}/>
                     </div>
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
+                        <Card {...((this.props.type === 'complete') ? this.getViewTicketCardProps() : this.getAccountCardProps())} />
                     </div>
                     <div className="main-home-page-portal__card col-md-4">
-                        <Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
+                        <Card {...this.getArticlesCardProps()} />
                     </div>
                 </div>
             </Widget>
         );
     }
+
+    getTicketsCardProps() {
+        return {
+            title: i18n('TICKETS'),
+            description: i18n('TICKETS_DESCRIPTION'),
+            icon: 'ticket',
+            color: 'red',
+            buttonText: (this.props.type === 'complete') ? i18n('CREATE_TICKET') : null,
+            onButtonClick: () => browserHistory.push('/create-ticket')
+        };
+    }
+
+    getAccountCardProps() {
+        return {
+            title: i18n('ACCOUNT'),
+            description: i18n('ACCOUNT_DESCRIPTION'),
+            icon: 'user',
+            color: 'green'
+        };
+    }
+
+    getArticlesCardProps() {
+        return {
+            title: i18n('ARTICLES'),
+            description: i18n('ARTICLES_DESCRIPTION'),
+            icon: 'book',
+            color: 'blue',
+            buttonText: (this.props.type === 'complete') ? i18n('VIEW_ARTICLES') : null,
+            onButtonClick: () => browserHistory.push('/articles')
+        };
+    }
+
+    getViewTicketCardProps() {
+        return {
+            title: i18n('VIEW_TICKET'),
+            description: i18n('VIEW_TICKET_DESCRIPTION'),
+            icon: 'check-square-o',
+            color: 'green',
+            buttonText: (this.props.type === 'complete') ? i18n('CHECK_TICKET') : null,
+            onButtonClick: () => browserHistory.push('/check-ticket')
+        };
+    }
 }
 
-export default MainHomePagePortal;
+export default connect((store) => {
+    return {
+        title: store.config.title
+    };
+})(MainHomePagePortal);

client/src/app/main/main-home/main-home-page.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
 
-import {connect}        from 'react-redux'
 import i18n from 'lib-app/i18n';
 
 import MainHomePageLoginWidget from 'app/main/main-home/main-home-page-login-widget';
@@ -13,11 +14,9 @@ class MainHomePage extends React.Component {
         return (
             <div className="main-home-page">
                 {this.renderMessage()}
-                <div className="col-md-4">
-                    <MainHomePageLoginWidget />
-                </div>
-                <div className="col-md-8">
-                    <MainHomePagePortal />
+                {(this.props.config['user-system-enabled']) ? this.renderLoginWidget() : null}
+                <div className={this.getPortalClass()}>
+                    <MainHomePagePortal type={((this.props.config['user-system-enabled']) ? 'default' : 'complete')}/>
                 </div>
             </div>
         );
@@ -34,6 +33,14 @@ class MainHomePage extends React.Component {
         }
     }
 
+    renderLoginWidget() {
+        return (
+            <div className="col-md-4 main-home-page__login-widget">
+                <MainHomePageLoginWidget />
+            </div>
+        );
+    }
+
     renderSuccess() {
         return (
             <Message title={i18n('VERIFY_SUCCESS')} type="success" className="main-home-page__message">
@@ -49,10 +56,21 @@ class MainHomePage extends React.Component {
             </Message>
         );
     }
+
+    getPortalClass() {
+        let classes = {
+            'main-home-page__portal-wrapper': true,
+            'col-md-8': (this.props.config['user-system-enabled'] && this.props.config['layout'] === 'boxed'),
+            'col-md-10 col-md-offset-1' : (!this.props.config['user-system-enabled'])
+        };
+
+        return classNames(classes);
+    }
 }
 
 export default connect((store) => {
     return {
-        session: store.session
+        session: store.session,
+        config: store.config
     };
 })(MainHomePage);

client/src/app/main/main-layout-header.js

@@ -1,5 +1,5 @@
 import React              from 'react';
-import { connect }        from 'react-redux'
+import {connect}          from 'react-redux';
 
 import i18n               from 'lib-app/i18n';
 import ConfigActions      from 'actions/config-actions';
@@ -12,7 +12,7 @@ class MainLayoutHeader extends React.Component {
     render() {
         return (
             <div className="main-layout-header">
-                {this.renderAccessLinks()}
+                {(this.props.config['user-system-enabled']) ? this.renderAccessLinks() : this.renderHomeLink()}
                 <LanguageSelector {...this.getLanguageSelectorProps()} />
             </div>
         );
@@ -32,7 +32,7 @@ class MainLayoutHeader extends React.Component {
             result = (
                 <div className="main-layout-header__login-links">
                     <Button type="clean" route={{to:'/'}}>{i18n('LOG_IN')}</Button>
-                    <Button type="clean" route={{to:'/signup'}}>{i18n('SIGN_UP')}</Button>
+                    {(this.props.config['registration']) ? <Button type="clean" route={{to:'/signup'}}>{i18n('SIGN_UP')}</Button> : null}
                 </div>
             );
         }
@@ -40,6 +40,14 @@ class MainLayoutHeader extends React.Component {
         return result;
     }
 
+    renderHomeLink() {
+        return (
+            <div className="main-layout-header__login-links">
+                <Button type="clean" route={{to:'/'}}>{i18n('HOME')}</Button>
+            </div>
+        );
+    }
+
     getLanguageSelectorProps() {
         return {
             className: 'main-layout-header__languages',

client/src/app/main/main-signup/main-signup-page.js

@@ -4,7 +4,6 @@ import _                  from 'lodash';
 
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
-import SessionStore       from 'lib-app/session-store';
 
 import Captcha            from 'app/main/captcha';
 import SubmitButton       from 'core-components/submit-button';
@@ -12,7 +11,7 @@ import Message            from 'core-components/message';
 import Form               from 'core-components/form';
 import FormField          from 'core-components/form-field';
 import Widget             from 'core-components/widget';
-
+import Header             from 'core-components/header';
 
 class MainSignUpPageWidget extends React.Component {
 
@@ -28,7 +27,8 @@ class MainSignUpPageWidget extends React.Component {
     render() {
         return (
             <div className="main-signup-page">
-                <Widget className="signup-widget col-md-6 col-md-offset-3" title="Register">
+                <Widget className="signup-widget col-md-6 col-md-offset-3">
+                    <Header title={i18n('SIGN_UP')} description={i18n('SIGN_UP_VIEW_DESCRIPTION')} />
                     <Form {...this.getFormProps()}>
                         <div className="signup-widget__inputs">
                             <FormField {...this.getInputProps()} label="Full Name" name="name" validation="NAME" required/>
@@ -63,7 +63,7 @@ class MainSignUpPageWidget extends React.Component {
         return {
             loading: this.state.loading,
             className: 'signup-widget__form',
-            onSubmit: this.onLoginFormSubmit.bind(this)
+            onSubmit: this.onSignupFormSubmit.bind(this)
         };
     }
 
@@ -77,7 +77,7 @@ class MainSignUpPageWidget extends React.Component {
         };
     }
 
-    onLoginFormSubmit(formState) {
+    onSignupFormSubmit(formState) {
         const captcha = this.refs.captcha.getWrappedInstance();
 
         if (!captcha.getValue()) {

client/src/app/main/main-signup/main-signup-page.scss

@@ -15,7 +15,7 @@
         }
 
         &__captcha {
-            margin: 10px 84px 20px;
+            margin: 10px auto 20px;
             height: 78px;
             width: 304px;
         }

client/src/app/main/main-view-ticket-page.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import AdminPanelViewTicket from 'app/admin/panel/tickets/admin-panel-view-ticket'
+
+import Widget from 'core-components/widget';
+
+class MainViewTicketPage extends React.Component {
+
+    render() {
+        return (
+            <div className="main-view-ticket-page">
+                <Widget>
+                    <AdminPanelViewTicket {...this.props} avoidSeen assignmentAllowed={false} />
+                </Widget>
+            </div>
+        );
+    }
+}
+
+export default MainViewTicketPage;

client/src/app/main/main-view-ticket-page.scss

@@ -0,0 +1,3 @@
+.main-view-ticket-page {
+    padding: 0 15px;
+}

client/src/core-components/button.js

@@ -17,6 +17,7 @@ class Button extends React.Component {
 
     static propTypes = {
         children: React.PropTypes.node,
+        inverted: React.PropTypes.bool,
         size: React.PropTypes.oneOf([
             'extra-small',
             'small',
@@ -70,7 +71,8 @@ class Button extends React.Component {
         let classes = {
             'button': true,
             'button_disabled': this.props.disabled,
-            
+            'button_inverted': this.props.inverted,
+
             'button_primary': (this.props.type === 'primary'),
             'button_secondary': (this.props.type === 'secondary'),
             'button_tertiary': (this.props.type === 'tertiary'),

client/src/core-components/button.scss

@@ -31,6 +31,10 @@
     &_secondary {
         background-color: $primary-green;
 
+        &:focus, &:hover {
+            background-color: lighten($primary-green, 5%);
+            outline: none;
+        }
 
         &.button_disabled,
         &.button_disabled:hover {
@@ -41,6 +45,11 @@
     &_tertiary {
         background-color: $secondary-blue;
 
+        &:focus, &:hover {
+            background-color: lighten($secondary-blue, 5%);
+            outline: none;
+        }
+
         &.button_disabled,
         &.button_disabled:hover {
             background-color: lighten($secondary-blue, 15%);
@@ -93,4 +102,26 @@
             text-decoration: underline;
         }
     }
+
+    &_inverted {
+        background-color: white;
+
+        &:focus, &:hover {
+            background-color: white;
+            opacity: 0.9;
+            outline: none;
+        }
+
+        &.button_primary {
+            color: $primary-red;
+        }
+
+        &.button_secondary {
+            color: $primary-green;
+        }
+
+        &.button_tertiary {
+            color: $secondary-blue;
+        }
+    }
 }

client/src/core-components/card.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Icon from 'core-components/icon';
+import Button from 'core-components/button';
 import classNames from 'classnames';
 
 class Card extends React.Component{
@@ -7,7 +8,9 @@ class Card extends React.Component{
         description: React.PropTypes.string,
         title: React.PropTypes.string,
         icon: React.PropTypes.string,
-        color: React.PropTypes.string
+        color: React.PropTypes.string,
+        buttonText: React.PropTypes.string,
+        onButtonClick: React.PropTypes.func
     };
     
     render() {
@@ -16,12 +19,23 @@ class Card extends React.Component{
                 <div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
                 <div className="card__title">{this.props.title}</div>
                 <div className="card__description">{this.props.description}</div>
+                {(this.props.buttonText) ? this.renderButton() : null}
+            </div>
+        );
+    }
+
+    renderButton() {
+        return (
+            <div className="card__button">
+                <Button type={this.getButtonType()} inverted onClick={this.props.onButtonClick}>
+                    {this.props.buttonText}
+                </Button>
             </div>
         );
     }
 
     getClass() {
-        var classes = {
+        let classes = {
             'card': true,
             'card_red': (this.props.color === 'red'),
             'card_blue': (this.props.color === 'blue'),
@@ -32,5 +46,15 @@ class Card extends React.Component{
 
         return classNames(classes);
     }
+
+    getButtonType() {
+        let types = {
+            'red': 'primary',
+            'green': 'secondary',
+            'blue': 'tertiary'
+        };
+
+        return types[this.props.color];
+    }
 }
 export default Card;

client/src/core-components/card.scss

@@ -5,6 +5,7 @@
     color: white;
     height: 260px;
     padding: 15px;
+    position: relative;
 
     &__title {
         font-variant: small-caps;
@@ -16,6 +17,13 @@
         font-size: $font-size--sm;
     }
 
+    &__button {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 17px;
+    }
+
     &_red {
         background-color: $primary-red;
     }

client/src/core-components/file-uploader.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+
+class FileUploader extends React.Component {
+    static propTypes = {
+        text: React.PropTypes.string,
+        value: React.PropTypes.object,
+        onChange: React.PropTypes.func
+    };
+
+    static defaultProps = {
+        text: 'Upload file'
+    };
+
+    render() {
+        return (
+            <label className="file-uploader">
+                <input className="file-uploader__input" type="file" multiple={false} onChange={this.onChange.bind(this)}/>
+                <span className="file-uploader__custom" tabIndex="0">
+                    <Icon className="file-uploader__icon" name="upload" /> {this.props.text}
+                </span>
+                <span className="file-uploader__value">{this.props.value && this.props.value.name}</span>
+            </label>
+        );
+    }
+
+    onChange(event) {
+        if(this.props.onChange) {
+            this.props.onChange({
+                target: {
+                    value: event.target.files[0]
+                }
+            });
+        }
+    }
+}
+
+export default FileUploader;

client/src/core-components/file-uploader.scss

@@ -0,0 +1,31 @@
+@import "../scss/vars";
+
+.file-uploader {
+
+    &__input {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
+    }
+
+    &__custom {
+        display: inline-block;
+        cursor: pointer;
+        color: white;
+        background-color: $primary-red;
+        line-height: 35px;
+        padding: 0 15px;
+    }
+
+    &__icon {
+        margin-right: 15px;
+    }
+
+    &__value {
+        margin-left: 10px;
+        color: $dark-grey;
+    }
+}

client/src/core-components/form-field.js

@@ -9,6 +9,7 @@ import Checkbox from 'core-components/checkbox';
 import CheckboxGroup from 'core-components/checkbox-group';
 import TextEditor from 'core-components/text-editor';
 import InfoTooltip from 'core-components/info-tooltip';
+import FileUploader from 'core-components/file-uploader';
 
 class FormField extends React.Component {
     static contextTypes = {
@@ -24,7 +25,7 @@ class FormField extends React.Component {
         error: React.PropTypes.string,
         infoMessage: React.PropTypes.node,
         value: React.PropTypes.any,
-        field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']),
+        field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group', 'file']),
         fieldProps: React.PropTypes.object
     };
     
@@ -84,7 +85,8 @@ class FormField extends React.Component {
             'textarea': TextEditor,
             'select': DropDown,
             'checkbox': Checkbox,
-            'checkbox-group': CheckboxGroup
+            'checkbox-group': CheckboxGroup,
+            'file': FileUploader
         }[this.props.field];
 
         if(this.props.decorator) {
@@ -142,7 +144,8 @@ class FormField extends React.Component {
     getDivTypes() {
         return [
             'textarea',
-            'checkbox-group'
+            'checkbox-group',
+            'file'
         ];
     }
 

client/src/core-components/toggle-list.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import _ from 'lodash';
+import classNames from 'classnames';
+
+class ToggleList extends React.Component {
+    static propTypes = {
+        items: React.PropTypes.arrayOf(React.PropTypes.shape({
+            content: React.PropTypes.node
+        })),
+        onChange: React.PropTypes.func,
+        type: React.PropTypes.oneOf(['default', 'small'])
+    };
+
+    state = {
+        selected: []
+    };
+    
+    render() {
+        return (
+            <div className={this.getClass()}>
+                {this.props.items.map(this.renderItem.bind(this))}
+            </div>
+        );
+    }
+
+    getClass() {
+        let classes = {
+            'toggle-list': true,
+            'toggle-list_small': this.props.type == 'small',
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
+    }
+
+    renderItem(obj, index) {
+
+        return (
+            <div className={this.getItemClass(index)} onClick={this.selectItem.bind(this, index)} key={index}>
+                {obj.content}
+            </div>
+        );
+    }
+
+    getItemClass(index) {
+        let classes = {
+            'toggle-list__item': true,
+            'toggle-list__first-item': (index === 0),
+            'toggle-list__last-item': (index === this.props.items.length - 1),
+            'toggle-list__selected': _.includes(this.getSelectedList(), index)
+        };
+
+        return classNames(classes);
+    }
+
+    selectItem(index) {
+        let newSelected = _.clone(this.getSelectedList());
+
+        _.includes(this.getSelectedList(), index) ? _.remove(newSelected, _index => _index == index) : newSelected.push(index);
+
+        this.setState({
+            selected: newSelected
+        });
+
+        if (this.props.onChange) {
+            this.props.onChange({
+                target: {
+                    value: newSelected
+                }
+            });
+        }
+    }
+
+    getSelectedList() {
+        return (this.props.values === undefined) ? this.state.selected : this.props.values;
+    }
+}
+
+export default ToggleList;

client/src/core-components/toggle-list.scss

@@ -0,0 +1,35 @@
+@import "../scss/vars";
+
+.toggle-list {
+
+    &__item {
+        border: 1px $light-grey solid;
+        border-left: none;
+        width: 180px;
+        height: 120px;
+        display: inline-block;
+        transition: box-shadow 0.2s ease-in-out;
+        user-select: none;
+        cursor: default;
+    }
+
+    &__selected {
+        box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.08);
+    }
+
+    &__first-item {
+        border: 1px $light-grey solid;
+        border-radius: 4px 0 0 4px;
+    }
+
+    &__last-item {
+        border-radius: 0 4px 4px 0;
+    }
+
+    &_small {
+        .toggle-list__item {
+            height: 80px;
+            width: 120px;
+        }
+    }
+}

client/src/core-components/widget.scss

@@ -5,7 +5,6 @@
     border-radius: 4px;
     text-align: center;
     padding: 20px;
-    min-width: 324px;
     min-height: 361px;
 
     &--title {
@@ -14,4 +13,16 @@
         font-size: 17px;
         margin-bottom: 20px;
     }
+}
+
+@media screen and (min-width: 379px) {
+    .widget {
+        min-width: 324px;
+    }
+}
+@media screen and (max-width: 409px) {
+    .widget {
+        min-width: 313px;
+        margin-left: -11px;
+    }
 }

client/src/data/fixtures/system-fixtures.js

@@ -1,7 +1,7 @@
 module.exports = [
     {
         path: '/system/get-settings',
-        time: 1000,
+        time: 850,
         response: function (params) {
             if(params && params.allSettings) {
                 return {
@@ -11,8 +11,8 @@ module.exports = [
                         'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                         'reCaptchaPrivate': 'LALA',
                         'url': 'http://www.opensupports.com/support',
-                        'title': 'Very Cool',
-                        'layout': 'Boxed',
+                        'title': 'Support Center',
+                        'layout': 'boxed',
                         'time-zone': 3,
                         'no-reply-email': 'shitr@post.com',
                         'smtp-host': 'localhost',
@@ -27,7 +27,9 @@ module.exports = [
                             {id: 3, name: 'System and Administration', owners: 0}
                         ],
                         'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
-                        'supportedLanguages': ['en', 'es', 'de']
+                        'supportedLanguages': ['en', 'es', 'de'],
+                        'registration': true,
+                        'user-system-enabled': true
                     }
                 };
 
@@ -36,6 +38,8 @@ module.exports = [
                     status: 'success',
                     data: {
                         'language': 'en',
+                        'title': 'Support Center',
+                        'layout': 'boxed',
                         'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                         'maintenance-mode': false,
                         'departments': [
@@ -44,7 +48,9 @@ module.exports = [
                             {id: 3, name: 'System and Administration', owners: 0}
                         ],
                         'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
-                        'supportedLanguages': ['en', 'es', 'de']
+                        'supportedLanguages': ['en', 'es', 'de'],
+                        'registration': true,
+                        'user-system-enabled': true
                     }
                 };
             }
@@ -110,6 +116,52 @@ module.exports = [
             };
         }
     },
+    {
+        path: '/system/download',
+        time: 100,
+        contentType: 'application/octet-stream',
+        response: function () {
+            return 'text content';
+        }
+    },
+    {
+        path: '/system/delete-all-users',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/backup-database',
+        time: 100,
+        contentType: 'application/octet-stream',
+        response: function () {
+            return 'text content';
+        }
+    },
+    {
+        path: '/system/import-csv',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/import-sql',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
     {
         path: '/system/get-mail-templates',
         time: 100,
@@ -157,13 +209,161 @@ module.exports = [
             };
         }
     },
+    {
+        path: '/system/get-stats',
+        time: 200,
+        response: function(_data) {
+            let generalVal = _data.staffId;
+
+            let ID = {
+                'WEEK': 7,
+                'MONTH': 30,
+                'QUARTER': 90,
+                'YEAR': 365
+            };
+
+            let k = ID[_data.period];
+            let DATA = [];
+
+            for (let i = 0; i < k; i++) {
+                if(generalVal){
+                    DATA.push({
+                        date: '201701' + (i + 103) % 100,
+                        type: 'ASSIGN',
+                        general: generalVal,
+                        value: (Math.floor((Math.random() + 17) * i)).toString()
+                    });
+                    DATA.push({
+                        date: '201701' + (i + 109) % 100,
+                        type: 'CLOSE',
+                        general: generalVal,
+                        value: (Math.floor((Math.random() + 12) * i )).toString()
+                    });
+                }
+                else {
+                    DATA.push({
+                        date: '201701' + (i + 107) % 100,
+                        type: 'COMMENT',
+                        general: generalVal,
+                        value: (Math.floor((Math.random() + 5) * i)).toString()
+                    });
+                    DATA.push({
+                        date: '201701' + (i + 104) % 100,
+                        type: 'SIGNUP',
+                        general: generalVal,
+                        value: (Math.floor(Math.random() * (i - 180) * (i - 185) / 400)).toString()
+                    });
+                    DATA.push({
+                        date: '201701' + (i + 103) % 100,
+                        type: 'CLOSE',
+                        general: generalVal,
+                        value: (Math.floor((Math.random() + 12) * i )).toString()
+                    });
+                    DATA.push({
+                        date: '201701' + (i + 99) % 100,
+                        type: 'CREATE_TICKET',
+                        general: generalVal,
+                        value: (Math.floor((Math.random() + 7) * i)).toString()
+                    });
+                }
+            }
+
+            return {
+                status: "success",
+                data: DATA
+            };
+        }
+    },
+    {
+        path: '/system/enable-user-system',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            }
+        }
+    },
+    {
+        path: '/system/disable-user-system',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            }
+        }
+    },
+    {
+        path: '/system/enable-registration',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            }
+        }
+    },
+    {
+        path: '/system/disable-registration',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            }
+        }
+    },
+    {
+        path: '/system/add-api-key',
+        time: 300,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/delete-api-key',
+        time: 300,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/get-api-keys',
+        time: 300,
+        response: function () {
+            return {
+                status: 'success',
+                data: [
+                    {
+                        name: 'Game System Registration',
+                        token: '9as8da9s51c6a51c51a9s1c9asdf1'
+                    },
+                    {
+                        name: 'PHPbb forum',
+                        token: 'apires1qe65fq65e1f6a5e1f6afaef2'
+                    },
+                    {
+                        name: 'How do you turn this on?',
+                        token: 'das65d4as651age16wq6ofqwwcemcw'
+                    }
+                ]
+            }
+        }
+    },
     {
         path: '/system/get-logs',
         time: 300,
-        response: function() {
+        response: function () {
             return {
-                "status": "success",
-                "data": [
+                status: "success",
+                data: [
                     {
                         "type": "EDIT_SETTINGS",
                         "to": null,

client/src/data/fixtures/ticket-fixtures.js

@@ -110,10 +110,12 @@ module.exports = [
                     closed: false,
                     priority: 'medium',
                     author: {
+                        id: 3,
                         name: 'Haskell Curry',
                         email: 'haskell@lambda.com'
                     },
                     owner: {
+                        id: 1,
                         name: 'Steve Jobs'
                     },
                     events: [

client/src/data/fixtures/user-fixtures.js

@@ -166,7 +166,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201504090001',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,
@@ -385,7 +385,7 @@ module.exports = [
                                 name: 'Technical Issues'
                             },
                             date: '201604161427',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: true,
                             closed: false,
@@ -504,7 +504,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201604150849',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,
@@ -607,7 +607,7 @@ module.exports = [
                                 name: 'Sales Support'
                             },
                             date: '201504091032',
-                            file: 'http://www.opensupports.com/some_file.zip',
+                            file: 'some_file.txt',
                             language: 'en',
                             unread: false,
                             closed: false,

client/src/data/languages/en.js

@@ -12,6 +12,7 @@ export default {
     'FORGOT_PASSWORD': 'Forgot your password?',
     'RECOVER_PASSWORD': 'Recover Password',
     'RECOVER_SENT': 'An email with recover instructions has been sent.',
+    'OLD_PASSWORD': 'Old password',
     'NEW_PASSWORD': 'New password',
     'REPEAT_NEW_PASSWORD': 'Repeat new password',
     'BACK_LOGIN_FORM': 'Back to login form',
@@ -36,7 +37,7 @@ export default {
     'DASHBOARD': 'Dashboard',
     'USERS': 'Users',
     'SETTINGS': 'Settings',
-    'TICKET_STATS': 'Ticket Stats',
+    'STATISTICS': 'Statistics',
     'LAST_ACTIVITY': 'Last Activity',
     'MY_TICKETS': 'My Tickets',
     'NEW_TICKETS': 'New Tickets',
@@ -48,7 +49,7 @@ export default {
     'STAFF_MEMBERS': 'Staff Members',
     'DEPARTMENTS': 'Departments',
     'SYSTEM_PREFERENCES': 'System Preferences',
-    'USER_SYSTEM': 'User System',
+    'ADVANCED_SETTINGS': 'Advanced Settings',
     'EMAIL_TEMPLATES': 'Email Templates',
     'FILTERS_CUSTOM_FIELDS': 'Filters and Custom Fields',
     'PRIORITY': 'Priority',
@@ -73,6 +74,7 @@ export default {
     'ASSIGN_TO_ME': 'Assign to me',
     'UN_ASSIGN': 'Unassign',
     'VIEW_TICKET': 'View Ticket',
+    'VIEW_TICKET_DESCRIPTION': 'Check the status of your ticket using your ticket number and email.',
     'SELECT_CUSTOM_RESPONSE': 'Select a custom response...',
     'WARNING': 'Warning',
     'INFO': 'Information',
@@ -81,6 +83,10 @@ export default {
     'UN_BAN': 'Disable ban',
     'BAN_NEW_EMAIL': 'Ban new email',
     'BAN_EMAIL': 'Ban email',
+    'EDIT_EMAIL': 'Edit email',
+    'EDIT_PASSWORD': 'Edit password',
+    'CHANGE_EMAIL': 'Change email',
+    'CHANGE_PASSWORD': 'Change password',
     'NAME': 'Name',
     'SIGNUP_DATE': 'Sign up date',
     'SEARCH_USERS': 'Search users...',
@@ -152,6 +158,28 @@ export default {
     'ALL_NOTIFICATIONS': 'All notifications',
     'VERIFY_SUCCESS': 'User verified',
     'VERIFY_FAILED': 'Could not verify',
+    'ENABLE_USER_SYSTEM': 'Use user system for customers',
+    'ENABLE_USER_REGISTRATION': 'Enable user registration',
+    'INCLUDE_USERS_VIA_CSV': 'Include users via CSV file',
+    'INCLUDE_DATABASE_VIA_SQL': 'Include database via SQL file',
+    'BACKUP_DATABASE': 'Backup database',
+    'DELETE_ALL_USERS': 'Delete all users',
+    'PLEASE_CONFIRM_PASSWORD': 'Please confirm your password to make these changes',
+    'REGISTRATION_API_KEYS': 'Registration API keys',
+    'NAME_OF_KEY': 'Name of key',
+    'KEY': 'Key',
+    'ADD_API_KEY': 'Add API Key',
+    'NO_KEY_SELECTED': 'No Key selected',
+    'CHECK_TICKET': 'Check Ticket',
+    'ACTIVITY': 'Activity',
+    'HOME': 'Home',
+    'TICKET_NUMBER': 'Ticket number',
+    
+    'CHART_CREATE_TICKET': 'Tickets created',
+    'CHART_CLOSE': 'Tickets closed',
+    'CHART_SIGNUP': 'Signups',
+    'CHART_COMMENT': 'Replies',
+    'CHART_ASSIGN': 'Assigned',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',
@@ -186,7 +214,7 @@ export default {
     'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
     'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
     'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
-    'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
+    'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your account\'s profile. Keep track of all your tickets you send to our staff team.',
     'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
     'CUSTOM_RESPONSES_DESCRIPTION': 'Custom responses are automated responses for common problems',
     'MY_TICKETS_DESCRIPTION': 'Here you can view the tickets you are responsible for.',
@@ -202,7 +230,7 @@ export default {
     'ADD_ARTICLE_DESCRIPTION': 'Here you can add an article that will be available for every user. It will be added inside the category {category}.',
     'LIST_ARTICLES_DESCRIPTION': 'This is a list of articles that includes information about our services.',
     'ADD_TOPIC_DESCRIPTION': 'Here you can add a topic that works as a category for articles.',
-    'DELETE_ARTICLE_DESCRIPTION': 'You\'re going to delete this article for ever.',
+    'DELETE_ARTICLE_DESCRIPTION': 'You\'re going to delete this article forever.',
     'STAFF_MEMBERS_DESCRIPTION': 'Here you can see who are your staff members.',
     'ADD_STAFF_DESCRIPTION': 'Here you can add staff members to your teams.',
     'EDIT_STAFF_DESCRIPTION': 'Here you can edit information about a staff member.',
@@ -213,6 +241,15 @@ export default {
     'SYSTEM_PREFERENCES_DESCRIPTION': 'Here you can edit the preferences of the system.',
     'VERIFY_SUCCESS_DESCRIPTION': 'You user has been verified correctly. You can log in now.',
     'VERIFY_FAILED_DESCRIPTION': 'The verification could not be done.',
+    'STATISTICS_DESCRIPTION': 'Here you can view statistics related to tickets and signups.',
+    'ADVANCED_SETTINGS_DESCRIPTION': 'Here you can change the advanced settings of your system. Please be careful, the changes you make can not be reversed.',
+    'USER_SYSTEM_DISABLED': 'User system has been disabled',
+    'USER_SYSTEM_ENABLED': 'User system has been enabled',
+    'REGISTRATION_DISABLED': 'Registration has been disabled',
+    'REGISTRATION_ENABLED': 'Registration has been enabled',
+    'ADD_API_KEY_DESCRIPTION': 'Insert the name and a registration api key be generated.',
+    'SIGN_UP_VIEW_DESCRIPTION': 'Here you can create an account for our support center. It is required for send tickets and see documentation.',
+    'EDIT_PROFILE_VIEW_DESCRIPTION': 'Here you can edit your user by changing your email or your password.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',

client/src/lib-app/api-call.js

@@ -2,23 +2,39 @@ const _ = require('lodash');
 const APIUtils = require('lib-core/APIUtils');
 const SessionStore = require('lib-app/session-store');
 
-const root = 'http://localhost:3000/api';
+const url = 'http://localhost:3000';
+const apiUrl = 'http://localhost:3000/api';
 
-function processData (data) {
-    return _.extend({
-        csrf_token: SessionStore.getSessionData().token,
-        csrf_userid: SessionStore.getSessionData().userId
-    }, data);
+function processData (data, dataAsForm = false) {
+    let newData;
+    
+    if(dataAsForm) {
+        newData = new FormData();
+
+        _.each(data, (value, key) => {
+            newData.append(key, value);
+        });
+
+        newData.append('csrf_token', SessionStore.getSessionData().token);
+        newData.append('csrf_userid', SessionStore.getSessionData().userId);
+    } else {
+        newData = _.extend({
+            csrf_token: SessionStore.getSessionData().token,
+            csrf_userid: SessionStore.getSessionData().userId
+        }, data)
+    }
+    
+    return newData;
 }
 
 module.exports = {
-    call: function ({path, data}) {
+    call: function ({path, data, plain, dataAsForm}) {
         return new Promise(function (resolve, reject) {
-            APIUtils.post(root + path, processData(data))
+            APIUtils.post(apiUrl + path, processData(data, dataAsForm), dataAsForm)
                 .then(function (result) {
                     console.log(result);
 
-                    if (result.status === 'success') {
+                    if (plain || result.status === 'success') {
                         resolve(result);
                     } else if (reject) {
                         reject(result);
@@ -33,5 +49,17 @@ module.exports = {
                     });
                 });
         });
+    },
+    
+    getFileLink(filePath) {
+        return apiUrl + '/system/download?file=' + filePath;
+    },
+    
+    getAPIUrl() {
+        return apiUrl;
+    },
+    
+    getURL() {
+        return url;
     }
 };

client/src/lib-app/fixtures-loader.js

@@ -24,7 +24,7 @@ fixtures.add(require('data/fixtures/article-fixtures'));
 
 _.each(fixtures.getAll(), function (fixture) {
     mockjax({
-        contentType: 'application/json',
+        contentType: fixture.contentType || 'application/json',
         url: 'http://localhost:3000/api' + fixture.path,
         responseTime: fixture.time || 500,
         response: function (settings) {

client/src/lib-app/session-store.js

@@ -58,6 +58,10 @@ class SessionStore {
         this.setItem('departments', JSON.stringify(configs.departments));
         this.setItem('allowedLanguages', JSON.stringify(configs.allowedLanguages));
         this.setItem('supportedLanguages', JSON.stringify(configs.supportedLanguages));
+        this.setItem('layout', configs.layout);
+        this.setItem('title', configs.title);
+        this.setItem('registration', configs.registration);
+        this.setItem('user-system-enabled', configs['user-system-enabled']);
     }
 
     getConfigs() {
@@ -66,7 +70,11 @@ class SessionStore {
             reCaptchaKey: this.getItem('reCaptchaKey'),
             departments: this.getDepartments(),
             allowedLanguages: JSON.parse(this.getItem('allowedLanguages')),
-            supportedLanguages: JSON.parse(this.getItem('supportedLanguages'))
+            supportedLanguages: JSON.parse(this.getItem('supportedLanguages')),
+            layout: this.getItem('layout'),
+            registration: this.getItem('registration'),
+            title: this.getItem('title'),
+            ['user-system-enabled']: this.getItem('user-system-enabled')
         };
     }
 

client/src/lib-core/APIUtils.js

@@ -3,14 +3,25 @@ const $ = require('jquery');
 
 const APIUtils = {
 
-    getPromise(path, method, data) {
+    getPromise(path, method, data, dataAsForm) {
         return (resolve, reject) => {
-            $.ajax({
+            let options = {
                 url: path,
                 method: method,
-                data: data,
-                dataType: 'json'
-            })
+                data: data
+            };
+            
+            if(dataAsForm) {
+                options = {
+                    url: path,
+                    type: method,
+                    data: data,
+                    processData: false,
+                    contentType: false
+                };
+            }
+            
+            $.ajax(options)
             .done(resolve)
             .fail((jqXHR, textStatus) => {
                 reject(textStatus);
@@ -22,8 +33,8 @@ const APIUtils = {
         return new Promise(this.getPromise(path, 'GET'));
     },
 
-    post(path, data) {
-        return new Promise(this.getPromise(path, 'POST', data));
+    post(path, data, dataAsForm) {
+        return new Promise(this.getPromise(path, 'POST', data, dataAsForm));
     },
 
     patch(path, data) {

client/src/reducers/session-reducer.js

@@ -44,7 +44,8 @@ class SessionReducer extends Reducer {
             logged: true,
             pending: false,
             failed: false,
-            staff: payload.data.staff
+            staff: payload.data.staff,
+            userId: payload.data.userId
         });
     }
 
@@ -75,7 +76,8 @@ class SessionReducer extends Reducer {
             initDone: true,
             logged: true,
             pending: false,
-            failed: false
+            failed: false,
+            userId: payload.data.userId
         });
     }
 
@@ -117,6 +119,7 @@ class SessionReducer extends Reducer {
     
     onSessionChecked(state) {
         let userData = sessionStore.getUserData();
+        let userId = sessionStore.getSessionData().userId;
         
         return _.extend({}, state, {
             initDone: true, 
@@ -127,7 +130,8 @@ class SessionReducer extends Reducer {
             userProfilePic: userData.profilePic,
             userLevel: userData.level,
             userDepartments: userData.departments,
-            userTickets: userData.tickets
+            userTickets: userData.tickets,
+            userId: userId
         });
     }
 

client/src/scss/_vars.scss

@@ -43,7 +43,7 @@ $font-size--xl: 32px;
     }
 
     &::-webkit-scrollbar-track {
-        backgroundr: transparent;
+        background: transparent;
     }
 
     &:hover {

server/composer.json

@@ -4,7 +4,8 @@
         "respect/validation": "^1.1",
         "phpmailer/phpmailer": "^5.2",
         "google/recaptcha": "~1.1",
-        "gabordemooij/redbean": "^4.3"
+        "gabordemooij/redbean": "^4.3",
+        "ifsnop/mysqldump-php": "2.*"
     },
     "require-dev": {
       "phpunit/phpunit": "5.0.*"

server/controllers/article/add-topic.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class AddTopicController extends Controller {
     const PATH = '/add-topic';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/add.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class AddArticleController extends Controller {
     const PATH = '/add';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/delete-topic.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class DeleteTopicController extends Controller {
     const PATH = '/delete-topic';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/delete.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class DeleteArticleController extends Controller {
     const PATH = '/delete';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/edit-topic.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class EditTopicController extends Controller {
     const PATH = '/edit-topic';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/edit.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class EditArticleController extends Controller {
     const PATH = '/edit';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/article/get-all.php

@@ -4,10 +4,11 @@ DataValidator::with('CustomValidations', true);
 
 class GetAllArticlesController extends Controller {
     const PATH = '/get-all';
+    const METHOD = 'POST';
 
     public function validations() {
         return [
-            'permission' => 'user',
+            'permission' => (Controller::isUserSystemEnabled()) ? 'user' : 'any',
             'requestData' => []
         ];
     }

server/controllers/staff/add.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class AddStaffController extends Controller {
     const PATH = '/add';
+    const METHOD = 'POST';
 
     private $name;
     private $email;

server/controllers/staff/assign-ticket.php

@@ -4,6 +4,8 @@ DataValidator::with('CustomValidations', true);
 
 class AssignStaffController extends Controller {
     const PATH = '/assign-ticket';
+    const METHOD = 'POST';
+
     private $ticket;
     private $user;
 

server/controllers/staff/delete.php

@@ -6,6 +6,7 @@ DataValidator::with('CustomValidations', true);
 
 class DeleteStaffController extends Controller {
     const PATH = '/delete';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/staff/edit.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class EditStaffController extends Controller {
     const PATH = '/edit';
+    const METHOD = 'POST';
 
     private $staffInstance;
 
@@ -56,6 +57,10 @@ class EditStaffController extends Controller {
             $this->staffInstance->sharedDepartmentList = $this->getDepartmentList();
         }
 
+        if($fileUploader = $this->uploadFile()) {
+            $this->staffInstance->profilePic = ($fileUploader instanceof FileUploader) ? $fileUploader->getFileName() : null;
+        }
+
         $this->staffInstance->store();
     }
 

server/controllers/staff/get-all-tickets.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class GetAllTicketsStaffController extends Controller {
     const PATH = '/get-all-tickets';
+    const METHOD = 'POST';
 
     public function validations() {
         return[

server/controllers/staff/get-all.php

@@ -4,6 +4,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class GetAllStaffController extends Controller {
     const PATH ='/get-all';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/staff/get-new-tickets.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class GetNewTicketsStaffController extends Controller {
     const PATH = '/get-new-tickets';
+    const METHOD = 'POST';
 
     public function validations() {
         return[

server/controllers/staff/get-tickets.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class GetTicketStaffController extends Controller {
     const PATH = '/get-tickets';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/staff/get.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class GetStaffController extends Controller {
     const PATH = '/get';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/staff/last-events.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class LastEventsStaffController extends Controller {
     const PATH = '/last-events';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/staff/search-tickets.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class SearchTicketStaffController extends Controller {
     const PATH = '/search-tickets';
+    const METHOD = 'POST';
 
     public function validations() {
         return[

server/controllers/staff/un-assign-ticket.php

@@ -4,6 +4,7 @@ DataValidator::with('CustomValidations', true);
 
 class UnAssignStaffController extends Controller {
     const PATH = '/un-assign-ticket';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/system.php

@@ -11,6 +11,16 @@ require_once 'system/edit-mail-template.php';
 require_once 'system/recover-mail-template.php';
 require_once 'system/disable-registration.php';
 require_once 'system/enable-registration.php';
+require_once 'system/disable-user-system.php';
+require_once 'system/enabled-user-system.php';
+require_once 'system/add-api-key.php';
+require_once 'system/delete-api-key.php';
+require_once 'system/get-all-keys.php';
+require_once 'system/get-stats.php';
+require_once 'system/delete-all-users.php';
+require_once 'system/csv-import.php';
+require_once 'system/backup-database.php';
+require_once 'system/download.php';
 
 $systemControllerGroup = new ControllerGroup();
 $systemControllerGroup->setGroupPath('/system');
@@ -27,5 +37,15 @@ $systemControllerGroup->addController(new EditMailTemplateController);
 $systemControllerGroup->addController(new RecoverMailTemplateController);
 $systemControllerGroup->addController(new DisableRegistrationController);
 $systemControllerGroup->addController(new EnableRegistrationController);
+$systemControllerGroup->addController(new GetStatsController);
+$systemControllerGroup->addController(new AddAPIKeyController);
+$systemControllerGroup->addController(new DeleteAPIKeyController);
+$systemControllerGroup->addController(new GetAllKeyController);
+$systemControllerGroup->addController(new DeleteAllUsersController);
+$systemControllerGroup->addController(new BackupDatabaseController);
+$systemControllerGroup->addController(new DownloadController);
+$systemControllerGroup->addController(new CSVImportController);
+$systemControllerGroup->addController(new DisableUserSystemController);
+$systemControllerGroup->addController(new EnabledUserSystemController);
 
 $systemControllerGroup->finalize();

server/controllers/system/add-api-key.php

@@ -0,0 +1,42 @@
+<?php
+use Respect\Validation\Validator as DataValidator;
+
+class AddAPIKeyController extends Controller {
+    const PATH = '/add-api-key';
+    const METHOD = 'POST';
+
+    public function validations() {
+        return [
+            'permission' => 'staff_3',
+            'requestData' => [
+                'name' => [
+                    'validation' => DataValidator::length(2, 55)->alnum(),
+                    'error' => ERRORS::INVALID_NAME
+                ]
+            ]
+        ];
+    }
+
+    public function handler() {
+        $apiInstance = new APIKey();
+
+        $name = Controller::request('name');
+
+        $keyInstance = APIKey::getDataStore($name, 'name');
+
+        if($keyInstance->isNull()){
+            $token = Hashing::generateRandomToken();
+
+            $apiInstance->setProperties([
+                'name' => $name,
+                'token' => $token
+            ]);
+
+            $apiInstance->store();
+            Response::respondSuccess($token);
+        } else {
+            Response::respondError(ERRORS::NAME_ALREADY_USED);
+        }
+
+    }
+}

server/controllers/system/add-department.php

@@ -3,6 +3,7 @@ use Respect\Validation\Validator as DataValidator;
 
 class AddDepartmentController extends Controller {
     const PATH = '/add-department';
+    const METHOD = 'POST';
 
     public function validations() {
         return [

server/controllers/system/backup-database.php

@@ -0,0 +1,31 @@
+<?php
+use Ifsnop\Mysqldump as IMysqldump;
+
+class BackupDatabaseController extends Controller {
+    const PATH = '/backup-database';
+    const METHOD = 'POST';
+
+    public function validations() {
+        return [
+            'permission' => 'staff_3',
+            'requestData' => []
+        ];
+    }
+
+    public function handler() {
+        global $mysql_host;
+        global $mysql_database;
+        global $mysql_user;
+        global $mysql_password;
+
+        $fileDownloader = FileDownloader::getInstance();
+        $fileDownloader->setFileName('backup.sql');
+
+        $mysqlDump = new IMysqldump\Mysqldump('mysql:host='. $mysql_host .';dbname=' . $mysql_database, $mysql_user, $mysql_password);
+        $mysqlDump->start($fileDownloader->getFullFilePath());
+
+        if($fileDownloader->download()) {
+            $fileDownloader->eraseFile();
+        }
+    }
+}

server/controllers/system/csv-import.php

@@ -0,0 +1,56 @@
+<?php
+
+class CSVImportController extends Controller {
+    const PATH = '/csv-import';
+    const METHOD = 'POST';
+
+    public function validations() {
+        return [
+            'permission' => 'staff_3',
+            'requestData' => []
+        ];
+    }
+
+    public function handler() {
+        $fileUploader = $this->uploadFile();
+
+        if(!$fileUploader instanceof FileUploader) {
+            throw new Exception(ERRORS::INVALID_FILE);
+        }
+
+        $file = fopen($fileUploader->getFullFilePath(),'r');
+        $errors = [];
+
+        while(!feof($file)) {
+            $userList = fgetcsv($file);
+
+            Controller::setDataRequester(function ($key) use ($userList) {
+                switch ($key) {
+                    case 'email':
+                        return $userList[0];
+                    case 'password':
+                        return $userList[1];
+                    case 'name':
+                        return $userList[2];
+                }
+
+                return null;
+            });
+
+            $signupController = new SignUpController(true);
+
+            try {
+                $signupController->validate();
+                $signupController->handler();
+            } catch (\Exception $exception) {
+                $errors[] = $exception->getMessage() . ' in email ' . $userList[0];
+            }
+        }
+
+        fclose($file);
+        
+        unlink($fileUploader->getFullFilePath());
+        
+        Response::respondSuccess($errors);
+    }
+}