From 24eb0fced39367bf940049b530e23ddd0e85a881 Mon Sep 17 00:00:00 2001
From: Fin Reinhard <fin.reinhard@icloud.com>
Date: Sat, 05 Jan 2019 10:04:44 +0000
Subject: [PATCH] adding ConfirmModal to ConfigurationServerTab

---
 borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx |   99 +++++++++++++++++++++++++++++--------------------
 1 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx b/borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx
index a9907cc..449598d 100644
--- a/borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx
+++ b/borgbutler-webapp/src/components/views/config/ConfigurationServerTab.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import {FormButton, FormCheckbox, FormLabelField, FormLabelInputField} from "../../general/forms/FormComponents";
-import {getRestServiceUrl, isDevelopmentMode} from "../../../utilities/global";
-import I18n from "../../general/translation/I18n";
+import {FormButton, FormCheckbox, FormLabelField, FormLabelInputField} from '../../general/forms/FormComponents';
+import {getRestServiceUrl, isDevelopmentMode} from '../../../utilities/global';
+import I18n from '../../general/translation/I18n';
 import ErrorAlertGenericRestFailure from '../../general/ErrorAlertGenericRestFailure';
-import Loading from "../../general/Loading";
+import Loading from '../../general/Loading';
+import ConfirmModal from '../../general/modal/ConfirmModal';
 
 class ConfigServerTab extends React.Component {
     loadConfig = () => {
@@ -45,13 +46,14 @@
             port: 9042,
             webdevelopmentMode: false,
             maxArchiveContentCacheCapacityMb: 100,
-            redirect: false
+            redirect: false,
+            confirmModal: false
         };
 
         this.handleTextChange = this.handleTextChange.bind(this);
         this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
-        this.onClearAllCaches = this.onClearAllCaches.bind(this);
         this.loadConfig = this.loadConfig.bind(this);
+        this.toggleModal = this.toggleModal.bind(this);
     }
 
     componentDidMount() {
@@ -82,16 +84,20 @@
         })
     }
 
-    onClearAllCaches() {
-        if (window.confirm('Do you really want to clear all caches? All Archive file lists and caches for repo and archive informatino will be cleared.')) {
-            fetch(getRestServiceUrl("configuration/clearAllCaches"), {
-                method: "GET",
-                dataType: "JSON",
-                headers: {
-                    "Content-Type": "text/plain; charset=utf-8"
-                }
-            })
-        }
+    static clearAllCaches() {
+        fetch(getRestServiceUrl('configuration/clearAllCaches'), {
+            method: 'GET',
+            dataType: 'JSON',
+            headers: {
+                'Content-Type': 'text/plain; charset=utf-8'
+            }
+        })
+    }
+
+    toggleModal() {
+        this.setState({
+            confirmModal: !this.state.confirmModal
+        })
     }
 
     render() {
@@ -112,30 +118,43 @@
         }
 
         return (
-            <form>
-                <FormLabelField>
-                    <FormButton id={'clearAllCaches'} onClick={this.onClearAllCaches}> Clear all caches
-                    </FormButton>
-                </FormLabelField>
-                <FormLabelInputField label={'Port'} fieldLength={2} type="number" min={0} max={65535}
-                                     step={1}
-                                     name={'port'} value={this.state.port}
-                                     onChange={this.handleTextChange}
-                                     placeholder="Enter port"/>
-                <FormLabelInputField label={'Maximum disc capacity (MB)'} fieldLength={2} type="number" min={50} max={10000}
-                                     step={50}
-                                     name={'maxArchiveContentCacheCapacityMb'} value={this.state.maxArchiveContentCacheCapacityMb}
-                                     onChange={this.handleTextChange}
-                                     placeholder="Enter maximum Capacity"
-                hint={`Limits the cache size of archive file lists in the local cache directory: ${this.state.cacheDir}`}/>
-                <FormLabelField label={<I18n name={'configuration.webDevelopmentMode'}/>} fieldLength={2}>
-                    <FormCheckbox checked={this.state.webDevelopmentMode}
-                                  hintKey={'configuration.webDevelopmentMode.hint'}
-                                  name="webDevelopmentMode"
-                                  onChange={this.handleCheckboxChange}/>
-                </FormLabelField>
-                {todo}
-            </form>
+            <div>
+                <ConfirmModal
+                    onConfirm={ConfigServerTab.clearAllCaches}
+                    title={'Are you sure?'}
+                    toggle={this.toggleModal}
+                    open={this.state.confirmModal}
+                >
+                    Do you really want to clear all caches? All Archive file lists and caches for repo and archive
+                    information will be cleared.
+                </ConfirmModal>
+                <form>
+                    <FormLabelField>
+                        <FormButton id={'clearAllCaches'} onClick={this.toggleModal}> Clear all caches
+                        </FormButton>
+                    </FormLabelField>
+                    <FormLabelInputField label={'Port'} fieldLength={2} type="number" min={0} max={65535}
+                                         step={1}
+                                         name={'port'} value={this.state.port}
+                                         onChange={this.handleTextChange}
+                                         placeholder="Enter port" />
+                    <FormLabelInputField label={'Maximum disc capacity (MB)'} fieldLength={2} type="number" min={50}
+                                         max={10000}
+                                         step={50}
+                                         name={'maxArchiveContentCacheCapacityMb'}
+                                         value={this.state.maxArchiveContentCacheCapacityMb}
+                                         onChange={this.handleTextChange}
+                                         placeholder="Enter maximum Capacity"
+                                         hint={`Limits the cache size of archive file lists in the local cache directory: ${this.state.cacheDir}`} />
+                    <FormLabelField label={<I18n name={'configuration.webDevelopmentMode'} />} fieldLength={2}>
+                        <FormCheckbox checked={this.state.webDevelopmentMode}
+                                      hintKey={'configuration.webDevelopmentMode.hint'}
+                                      name="webDevelopmentMode"
+                                      onChange={this.handleCheckboxChange} />
+                    </FormLabelField>
+                    {todo}
+                </form>
+            </div>
         );
     }
 }

--
Gitblit v1.10.0