From 6aef4d9a0f42804db6dabeafa0b664b83fca702f Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Sat, 09 Feb 2019 07:06:32 +0000
Subject: [PATCH] RepConfigBasePanel extracted.
---
borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx | 75 ++++--------------------
borgbutler-webapp/src/components/views/repos/RepoConfigPasswordPanel.jsx | 4
borgbutler-webapp/src/components/views/repos/RepoConfigBasePanel.jsx | 101 +++++++++++++++++++++++++++++++++
3 files changed, 116 insertions(+), 64 deletions(-)
diff --git a/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx b/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
index 28b81e5..8e735f4 100644
--- a/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
+++ b/borgbutler-webapp/src/components/views/repos/ConfigureRepoPage.jsx
@@ -4,9 +4,7 @@
FormButton,
FormField,
FormGroup,
- FormInput,
FormLabel,
- FormLabelInputField,
FormOption,
FormRadioButton,
FormSelect
@@ -15,6 +13,7 @@
import {getRestServiceUrl} from '../../../utilities/global';
import {PageHeader} from '../../general/BootstrapComponents';
import PropTypes from 'prop-types';
+import RepoConfigBasePanel from './RepoConfigBasePanel';
import RepoConfigPasswordPanel from './RepoConfigPasswordPanel';
class ConfigureRepoPage extends React.Component {
@@ -24,6 +23,7 @@
this.handleTextChange = this.handleTextChange.bind(this);
this.handleRepoConfigChange = this.handleRepoConfigChange.bind(this);
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+ this.setRepoValue = this.setRepoValue.bind(this);
this.state = {
repoConfig: {
encryption: 'repoKey'
@@ -45,6 +45,11 @@
this.setState({repoConfig: {...this.state.repoConfig, [event.target.name]: event.target.value}});
}
+ setRepoValue(variable, value) {
+ //console.log(variable + "=" + value);
+ this.setState({repoConfig: {...this.state.repoConfig, [variable]: value}})
+ }
+
handleCheckboxChange = event => {
this.setState({[event.target.name]: event.target.value});
/*if (event.target.name === 'mode' && event.target.value === 'existingRepo'
@@ -54,44 +59,8 @@
}*/
}
- browseDirectory = () => {
- const current = "¤t=" + encodeURIComponent(this.state.repoConfig.repo);
- fetch(getRestServiceUrl("files/browse-local-filesystem?type=dir" + current), {
- method: "GET",
- dataType: "JSON",
- headers: {
- "Content-Type": "text/plain; charset=utf-8",
- }
- })
- .then((resp) => {
- return resp.json()
- })
- .then((data) => {
- if (data.directory) {
- this.setState({repoConfig: {...this.state.repoConfig, repo: data.directory}});
- }
- })
- .catch((error) => {
- console.log(error, "Oups, what's happened?")
- })
- }
-
render() {
const repoConfig = this.state.repoConfig;
- let repoPlaceHolder = 'Enter the repo used by Borg.';
- if (this.state.mode === 'initNewRepo' && this.state.localRemote === 'remote') {
- repoPlaceHolder = 'Enter the remote path of the repo, such as user@hostname:backup.';
- }
- let repoFieldLength = 10;
- let browseButton = null;
- if (this.state.localRemote === 'local') {
- repoFieldLength = 9;
- browseButton = <FormButton onClick={this.browseDirectory}
- hint={'Browse local backup directory. (experimental!)'}><I18n
- name={'common.browse'}/>
- </FormButton>;
- repoPlaceHolder = 'Enter or browse the local path of the repo home dir used by Borg.';
- }
return <React.Fragment>
<PageHeader>
Configure repository
@@ -125,29 +94,10 @@
onChange={this.handleCheckboxChange}/>
</FormField>
</FormGroup>
- <FormLabelInputField label={'Display name'} fieldLength={12}
- name={'displayName'} value={repoConfig.displayName}
- onChange={this.handleRepoConfigChange}
- placeholder="Enter display name (only for displaying purposes)."/>
- <FormGroup>
- <FormLabel length={2}>{'Repo'}</FormLabel>
- <FormField length={repoFieldLength}>
- <FormInput
- id={'repo'}
- name={'repo'}
- type={'text'}
- value={repoConfig.repo}
- onChange={this.handleRepoConfigChange}
- placeholder={repoPlaceHolder}
- />
- </FormField>
- {browseButton}
- </FormGroup>
- <FormLabelInputField label={'RSH'} fieldLength={12}
- name={'rsh'} value={repoConfig.rsh}
- onChange={this.handleRepoConfigChange}
- placeholder="Enter the rsh value (ssh command) for remote repository."
- className={this.state.localRemote === 'local' ? 'hidden' : null}/>
+ <RepoConfigBasePanel repoConfig={repoConfig}
+ remote={this.state.localRemote === 'local'}
+ handleRepoConfigChange={this.handleRepoConfigChange}
+ setRepoValue={this.setRepoValue}/>
<FormGroup className={this.state.mode === 'existingRepo' ? 'hidden' : null}>
<FormLabel length={2}>{'Encryption'}</FormLabel>
<FormField length={4}>
@@ -166,7 +116,8 @@
</FormGroup>
<RepoConfigPasswordPanel encryption={this.state.repoConfig.encryption}
repoConfig={repoConfig}
- handleRepoConfigChange={this.handleRepoConfigChange}/>
+ handleRepoConfigChange={this.handleRepoConfigChange}
+ setRepoValue={this.setRepoValue}/>
<FormField length={12}>
<Link to={'/repos'} className={'btn btn-outline-primary'}><I18n name={'common.cancel'}/>
</Link>
diff --git a/borgbutler-webapp/src/components/views/repos/RepoConfigBasePanel.jsx b/borgbutler-webapp/src/components/views/repos/RepoConfigBasePanel.jsx
new file mode 100644
index 0000000..95c9241
--- /dev/null
+++ b/borgbutler-webapp/src/components/views/repos/RepoConfigBasePanel.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+ FormButton,
+ FormField,
+ FormGroup,
+ FormInput,
+ FormLabel,
+ FormLabelInputField
+} from "../../general/forms/FormComponents";
+import PropTypes from "prop-types";
+import I18n from '../../general/translation/I18n';
+import {getRestServiceUrl} from "../../../utilities/global";
+import ConfigureRepoPage from "./ConfigureRepoPage";
+
+class RepoConfigBasePanel extends React.Component {
+
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ let repoPlaceHolder = 'Enter the repo used by Borg.';
+ if (this.props.remote) {
+ repoPlaceHolder = 'Enter the remote path of the repo, such as user@hostname:backup.';
+ }
+ let repoFieldLength = 10;
+ let browseButton = null;
+ if (this.props.remote) {
+ repoFieldLength = 9;
+ browseButton = <FormButton onClick={this.browseDirectory}
+ hint={'Browse local backup directory. (experimental!)'}><I18n
+ name={'common.browse'}/>
+ </FormButton>;
+ repoPlaceHolder = 'Enter or browse the local path of the repo home dir used by Borg.';
+ }
+ return (
+ <React.Fragment>
+ <FormLabelInputField label={'Display name'} fieldLength={12}
+ name={'displayName'} value={this.props.repoConfig.displayName}
+ onChange={this.props.handleRepoConfigChange}
+ placeholder="Enter display name (only for displaying purposes)."/>
+ <FormGroup>
+ <FormLabel length={2}>{'Repo'}</FormLabel>
+ <FormField length={repoFieldLength}>
+ <FormInput
+ id={'repo'}
+ name={'repo'}
+ type={'text'}
+ value={this.props.repoConfig.repo}
+ onChange={this.props.handleRepoConfigChange}
+ placeholder={repoPlaceHolder}
+ />
+ </FormField>
+ {browseButton}
+ </FormGroup>
+ <FormLabelInputField label={'RSH'} fieldLength={12}
+ name={'rsh'} value={this.props.repoConfig.rsh}
+ onChange={this.props.handleRepoConfigChange}
+ placeholder="Enter the rsh value (ssh command) for remote repository."
+ className={!this.props.remote ? 'hidden' : null}/>
+ </React.Fragment>
+ );
+ }
+
+ browseDirectory = () => {
+ const current = "¤t=" + encodeURIComponent(this.props.repoConfig.repo);
+ fetch(getRestServiceUrl("files/browse-local-filesystem?type=dir" + current), {
+ method: "GET",
+ dataType: "JSON",
+ headers: {
+ "Content-Type": "text/plain; charset=utf-8",
+ }
+ })
+ .then((resp) => {
+ return resp.json()
+ })
+ .then((data) => {
+ if (data.directory) {
+ this.props.setRepoValue('repo', data.directory);
+ }
+ })
+ .catch((error) => {
+ console.log(error, "Oups, what's happened?")
+ })
+ }
+}
+
+
+RepoConfigBasePanel.propTypes = {
+ handleRepoConfigChange: PropTypes.func.isRequired,
+ setRepoValue: PropTypes.func.isRequired,
+ repoConfig: PropTypes.object.isRequired,
+ remote: PropTypes.bool.isRequired,
+ editExistingRepo: PropTypes.bool
+};
+
+RepoConfigBasePanel.defaultProps = {
+ editExistingRepo: false
+};
+
+export default RepoConfigBasePanel;
diff --git a/borgbutler-webapp/src/components/views/repos/RepoConfigPasswordPanel.jsx b/borgbutler-webapp/src/components/views/repos/RepoConfigPasswordPanel.jsx
index 424ac6a..49151d4 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoConfigPasswordPanel.jsx
+++ b/borgbutler-webapp/src/components/views/repos/RepoConfigPasswordPanel.jsx
@@ -70,8 +70,7 @@
</React.Fragment>;
}
if (passwordCommand) {
- // TODO
- this.setState({repoConfig: {...this.state.repoConfig, 'passwordCommand': passwordCommand}})
+ this.props.setRepoValue('passwordCommand', passwordCommand);
}
this.setState({'passwordCreate': passwordCreate});
}
@@ -156,6 +155,7 @@
RepoConfigPasswordPanel.propTypes = {
handleRepoConfigChange: PropTypes.func.isRequired,
+ setRepoValue: PropTypes.func.isRequired,
repoConfig: PropTypes.object.isRequired,
encryption: PropTypes.string
};
--
Gitblit v1.10.0