Max Red - Created top bars [skip ci]

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/admin/panel/settings/admin-panel-advanced-settings.js

@@ -3,9 +3,10 @@ import {connect}  from 'react-redux';
 
 import ConfigActions from 'actions/config-actions';
 import i18n from 'lib-app/i18n';
-import API from 'lib-app/api-call';
 import ToggleButton from 'app-components/toggle-button';
 
+import Button from 'core-components/button';
+import FileUploader from 'core-components/file-uploader';
 import Header from 'core-components/header';
 
 class AdminPanelAdvancedSettings extends React.Component {
@@ -25,20 +26,41 @@ class AdminPanelAdvancedSettings extends React.Component {
                     <div className="col-md-12">
                         <div className="col-md-6">
                             <div className="admin-panel-system-settings__user-system-enabled">
-                                <ToggleButton className="admin-panel-system-settings__user-system-enabled-toggle-button" value={this.props.config['user-system-enabled']}/>
+                                <span className="admin-panel-system-settings__text">{i18n('USER_SYSTEM_ENABLED')}</span>
-                                <span>{i18n('USER_SYSTEM_ENABLED')}</span>
+                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['user-system-enabled']}/>
                             </div>
                         </div>
                         <div className="col-md-6">
                             <div className="admin-panel-system-settings__registration">
-                                <ToggleButton className="admin-panel-system-settings__user-system-enabled-toggle-button" value={this.props.config['registration']}/>
+                                <span className="admin-panel-system-settings__text">{i18n('REGISTRATION')}</span>
-                                <span>{i18n('REGISTRATION')}</span>
+                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['registration']}/>
                             </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-system-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div>
+                            <FileUploader text="Upload"/>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-system-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div>
+                            <FileUploader text="Upload"/>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-system-settings__text">{i18n('BACKUP_DATABASE')}</div>
+                            <Button type="secondary" size="medium">Download</Button>
+                        </div>
+                        <div className="col-md-3">
+                            <div className="admin-panel-system-settings__text">{i18n('DELETE_ALL_USERS')}</div>
+                            <Button size="medium">Delete</Button>
+                        </div>
+                    </div>
+                    <div className="col-md-12">
+                        <span className="separator" />
+                    </div>
                 </div>
             </div>
         );

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

@@ -1,3 +1,18 @@
 .admin-panel-system-settings {
+    &__user-system-enabled {
 
-}
+    }
+
+    &__registration {
+
+    }
+
+    &__toggle-button {
+        display: inline-block;
+        margin-left: 20px;
+    }
+
+    &__text {
+        margin-bottom: 20px;
+    }
+}

client/src/data/languages/en.js

@@ -154,6 +154,10 @@ export default {
     'VERIFY_FAILED': 'Could not verify',
     'USER_SYSTEM_ENABLED': 'Use user system for customers',
     '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',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',