Max Red - WIP [skip ci]

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

@@ -2,21 +2,27 @@ 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.string
     };
 
     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}/>
         );
     }
 
@@ -33,6 +39,7 @@ class AreYouSure extends React.Component {
                 <div className="are-you-sure__description" id="are-you-sure__description">
                     {this.props.description}
                 </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 +47,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 +56,31 @@ class AreYouSure extends React.Component {
         );
     }
 
-    onYes() {
+    renderPassword() {
-        this.closeModal();
+        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) {
+    onPasswordChange(event) {
-            this.props.onYes();
+        this.setState({
+            password: event.target.value
+        });
+    }
+
+    onInputKeyDown(event) {
+        if (event.keyCode == 13) {
+            this.onYes();
+        }
+    }
+
+    onYes() {
+        if (this.state.password){
+            this.closeModal();
+
+            if (this.props.onYes) {
+                this.props.onYes();
+            }
         }
     }
 

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

@@ -4,6 +4,7 @@ import {connect}  from 'react-redux';
 import ConfigActions from 'actions/config-actions';
 import i18n from 'lib-app/i18n';
 import ToggleButton from 'app-components/toggle-button';
+import AreYouSure from 'app-components/are-you-sure';
 
 import Button from 'core-components/button';
 import FileUploader from 'core-components/file-uploader';
@@ -27,13 +28,13 @@ class AdminPanelAdvancedSettings extends React.Component {
                         <div className="col-md-6">
                             <div className="admin-panel-system-settings__user-system-enabled">
                                 <span className="admin-panel-system-settings__text">{i18n('USER_SYSTEM_ENABLED')}</span>
-                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['user-system-enabled']}/>
+                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['user-system-enabled']} onChange={this.onToggleButtonChange.bind(this)}/>
                             </div>
                         </div>
                         <div className="col-md-6">
                             <div className="admin-panel-system-settings__registration">
                                 <span className="admin-panel-system-settings__text">{i18n('REGISTRATION')}</span>
-                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['registration']}/>
+                                <ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['registration']} onChange={this.onToggleButtonChange.bind(this)}/>
                             </div>
                         </div>
                     </div>
@@ -66,6 +67,10 @@ class AdminPanelAdvancedSettings extends React.Component {
         );
     }
 
+    onToggleButtonChange() {
+        AreYouSure.openModal(<div>{i18n('PLEASE_CONFIRM_PASSWORD')}</div>, (a) => a, 'secure');
+    }
+
 }
 
 

client/src/data/languages/en.js

@@ -158,6 +158,7 @@ export default {
     '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',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',