Create new repositories...

Kai Reinhard

20.38.2019 8ae4d0f0274613f0251970ac5c9ae7f88bd1979b

Create new repositories...

 borgbutler-webapp/src/components/views/repos/CreateRepoPage.jsx

New file
@@ -0,0 +1,64 @@
import React from 'react';
import {FormGroup} from 'reactstrap';
import {FormButton, FormField, FormLabelInputField} from '../../general/forms/FormComponents';
import I18n from "../../general/translation/I18n";
import {PageHeader} from "../../general/BootstrapComponents";

class CreateRepoPage extends React.Component {

    constructor(props) {
        super(props);
        this.handleTextChange = this.handleTextChange.bind(this);
        this.state = {
            repoConfig: {}
        };
    }

    handleTextChange = event => {
        event.preventDefault();
        this.setState({repoConfig: {...this.state.repoConfig, [event.target.name]: event.target.value}});
    }

    render() {
        const repoConfig = this.state.repoConfig;
        return <React.Fragment>
            <PageHeader>
                Configure new repository
            </PageHeader>
            <FormGroup>
                <FormLabelInputField label={'Display name'} fieldLength={12}
                                     name={'displayName'} value={repoConfig.displayName}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter display name (only for displaying purposes)."/>
                <FormLabelInputField label={'Repo'} fieldLength={12}
                                     name={'repo'} value={repoConfig.repo}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter the name of the repo, used by Borg."/>
                <FormLabelInputField label={'RSH'} fieldLength={12}
                                     name={'rsh'} value={repoConfig.rsh}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter the rsh value (ssh command) for remote repository."/>
                <FormLabelInputField label={'Password command'} fieldLength={12}
                                     name={'passwordCommand'} value={repoConfig.passwordCommand}
                                     onChange={this.handleTextChange}
                                     placeholder="Enter the password command to get the command from."/>
                <FormLabelInputField label={'Password'} fieldLength={6} type={'password'}
                                     name={'passphrase'} value={repoConfig.passphrase}
                                     onChange={this.handleTextChange}
                                     hint={"It's recommended to use password command instead."}
                />
                <FormField length={12}>
                    <FormButton onClick={this.onCancel}
                                hintKey="configuration.cancel.hint"><I18n name={'common.cancel'}/>
                    </FormButton>
                    <FormButton onClick={this.onSave} bsStyle="primary"
                                hintKey="configuration.save.hint"><I18n name={'common.save'}/>
                    </FormButton>
                </FormField>
            </FormGroup>
        </React.Fragment>;
    }
}

export default CreateRepoPage;


 borgbutler-webapp/src/components/views/repos/RepoListView.jsx

@@ -1,11 +1,12 @@
import React from 'react'
import {Link} from 'react-router-dom'
import './RepoListView.css';
import {CardDeck} from 'reactstrap';
import {PageHeader} from '../../general/BootstrapComponents';
import {getRestServiceUrl} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import RepoCard from './RepoCard';
import {IconRefresh} from "../../general/IconComponents";
import {IconAdd, IconRefresh} from "../../general/IconComponents";

class RepoListView extends React.Component {

@@ -73,12 +74,12 @@

            content = <React.Fragment>
                <CardDeck>
                {this.state.repos.map(repo => {
                    return <RepoCard
                        key={repo.id}
                        repo={repo}
                    />;
                })}
                    {this.state.repos.map(repo => {
                        return <RepoCard
                            key={repo.id}
                            repo={repo}
                        />;
                    })}
                </CardDeck>
            </React.Fragment>;

@@ -95,6 +96,12 @@
                </div>
            </PageHeader>
            {content}
            <br/>
            <Link to={'/repo/new'}
                  className={'btn btn-outline-primary'}
            >
                <IconAdd/>
            </Link>
        </React.Fragment>;
    };


 borgbutler-webapp/src/containers/WebApp.jsx

@@ -17,6 +17,7 @@
import Footer from '../components/views/footer/Footer';
import {loadVersion} from '../actions';
import {getTranslation} from '../utilities/i18n';
import CreateRepoPage from "../components/views/repos/CreateRepoPage";

class WebApp extends React.Component {

@@ -83,6 +84,7 @@
                            }
                            <Route path={'/repoArchives/:id/:displayName'} component={RepoArchiveListView}/>
                            <Route path={'/archives/:repoId/:archiveId'} component={ArchiveView}/>
                            <Route path={'/repo/new'} component={CreateRepoPage}/>
                        </Switch>
                    </div>
                    <Footer versionInfo={this.props.version}/>