adding ConfirmModal to ConfigurationServerTab

Fin Reinhard

05.04.2019 24eb0fced39367bf940049b530e23ddd0e85a881

 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>
        );
    }
}