adding ConfirmModal to ConfigurationServerTab

Fin Reinhard

05.04.2019 24eb0fced39367bf940049b530e23ddd0e85a881

adding ConfirmModal to ConfigurationServerTab

 borgbutler-webapp/src/components/general/modal/ConfirmModal.jsx

New file
@@ -0,0 +1,52 @@
import React from 'react';
import * as PropTypes from 'prop-types';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';

class ConfirmModal extends React.Component {

    constructor(props) {
        super(props);

        this.confirm = this.confirm.bind(this);
    }

    confirm() {
        this.props.toggle();
        this.props.onConfirm();
    }

    render() {
        return (
            <div>
                <Modal isOpen={this.props.open} toggle={this.props.toggle}>
                    <ModalHeader toggle={this.props.toggle}>Modal title</ModalHeader>
                    <ModalBody>
                        {this.props.children}
                    </ModalBody>
                    <ModalFooter>
                        <Button color={'primary'} onClick={this.confirm}>{this.props.confirmButton}</Button>
                        <Button color={'secondary'} onClick={this.props.toggle}>{this.props.cancelButton}</Button>
                    </ModalFooter>
                </Modal>
            </div>
        );
    }
}

ConfirmModal.propTypes = {
    onConfirm: PropTypes.func.isRequired,
    title: PropTypes.string.isRequired,
    children: PropTypes.node.isRequired,
    toggle: PropTypes.func.isRequired,
    open: PropTypes.bool,
    confirmButton: PropTypes.string,
    cancelButton: PropTypes.string
};

ConfirmModal.defaultProps = {
    open: false,
    confirmButton: 'Ok',
    cancelButton: 'Cancel'
};

export default ConfirmModal;

 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",
    static clearAllCaches() {
        fetch(getRestServiceUrl('configuration/clearAllCaches'), {
            method: 'GET',
            dataType: 'JSON',
                headers: {
                    "Content-Type": "text/plain; charset=utf-8"
                'Content-Type': 'text/plain; charset=utf-8'
                }
            })
        }

    toggleModal() {
        this.setState({
            confirmModal: !this.state.confirmModal
        })
    }

    render() {
@@ -112,9 +118,19 @@
        }

        return (
            <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.onClearAllCaches}> Clear all caches
                        <FormButton id={'clearAllCaches'} onClick={this.toggleModal}> Clear all caches
                    </FormButton>
                </FormLabelField>
                <FormLabelInputField label={'Port'} fieldLength={2} type="number" min={0} max={65535}
@@ -122,9 +138,11 @@
                                     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}
                    <FormLabelInputField label={'Maximum disc capacity (MB)'} fieldLength={2} type="number" min={50}
                                         max={10000}
                                     step={50}
                                     name={'maxArchiveContentCacheCapacityMb'} value={this.state.maxArchiveContentCacheCapacityMb}
                                         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}`}/>
@@ -136,6 +154,7 @@
                </FormLabelField>
                {todo}
            </form>
            </div>
        );
    }
}

 borgbutler-webapp/src/css/my-style.css

@@ -45,6 +45,10 @@
    margin-bottom: 10px;
}

h5.modal-title {
    margin-top: 0;
}

/* Navbar */

.navbar.bg-light {