1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-26 04:33:19 +00:00
seahub/frontend/src/components/dialog/create-repo-dialog.js

281 lines
8.9 KiB
JavaScript
Raw Normal View History

2018-12-03 08:21:09 +00:00
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Form, FormGroup, Label, Alert } from 'reactstrap';
import { gettext, enableEncryptedLibrary, repoPasswordMinLength, storages, libraryTemplates } from '../../utils/constants';
import { SeahubSelect } from '../common/select';
2018-12-03 08:21:09 +00:00
const propTypes = {
2018-12-17 02:23:05 +00:00
libraryType: PropTypes.string.isRequired,
2018-12-07 02:36:59 +00:00
onCreateRepo: PropTypes.func.isRequired,
onCreateToggle: PropTypes.func.isRequired,
2018-12-03 08:21:09 +00:00
};
class CreateRepoDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
repoName: '',
2018-12-07 02:36:59 +00:00
disabled: true,
encrypt: false,
password1: '',
2018-12-03 08:21:09 +00:00
password2: '',
2018-12-07 02:36:59 +00:00
errMessage: '',
permission: 'rw',
storage_id: storages.length ? storages[0].id : '',
library_template: libraryTemplates.length ? libraryTemplates[0] : '',
isSubmitBtnActive: false,
2018-12-03 08:21:09 +00:00
};
this.templateOptions = [];
this.storageOptions = [];
if (Array.isArray(libraryTemplates) && libraryTemplates.length) {
2024-07-18 03:58:42 +00:00
this.templateOptions = libraryTemplates.map((item) => { return { value: item, label: item }; });
}
if (Array.isArray(storages) && storages.length) {
2024-07-18 03:58:42 +00:00
this.storageOptions = storages.map((item) => { return { value: item.id, label: item.name }; });
}
2018-12-03 08:21:09 +00:00
}
2018-12-07 02:36:59 +00:00
handleRepoNameChange = (e) => {
if (!e.target.value.trim()) {
2024-07-18 03:58:42 +00:00
this.setState({ isSubmitBtnActive: false });
} else {
2024-07-18 03:58:42 +00:00
this.setState({ isSubmitBtnActive: true });
}
2024-07-18 03:58:42 +00:00
this.setState({ repoName: e.target.value });
};
2018-12-07 02:36:59 +00:00
handlePassword1Change = (e) => {
2024-07-18 03:58:42 +00:00
this.setState({ password1: e.target.value });
};
2018-12-07 02:36:59 +00:00
handlePassword2Change = (e) => {
2024-07-18 03:58:42 +00:00
this.setState({ password2: e.target.value });
};
2018-12-03 08:21:09 +00:00
handleSubmit = () => {
let isValid = this.validateInputParams();
if (isValid) {
let repoData = this.prepareRepoData();
if (this.props.libraryType === 'department') {
this.props.onCreateRepo(repoData, 'department');
return;
}
this.props.onCreateRepo(repoData);
2018-12-07 02:36:59 +00:00
}
};
2018-12-03 08:21:09 +00:00
handleKeyDown = (e) => {
2018-12-03 08:21:09 +00:00
if (e.key === 'Enter') {
this.handleSubmit();
2018-12-21 07:40:59 +00:00
e.preventDefault();
2018-12-03 08:21:09 +00:00
}
};
2018-12-03 08:21:09 +00:00
toggle = () => {
2018-12-07 02:36:59 +00:00
this.props.onCreateToggle();
};
2018-12-03 08:21:09 +00:00
2018-12-07 02:36:59 +00:00
validateInputParams() {
let errMessage = '';
let repoName = this.state.repoName.trim();
if (!repoName.length) {
errMessage = gettext('Name is required');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
2018-12-07 02:36:59 +00:00
return false;
}
if (repoName.indexOf('/') > -1) {
errMessage = gettext('Name should not include \'/\'.');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
return false;
2018-12-07 02:36:59 +00:00
}
if (this.state.encrypt) {
let password1 = this.state.password1.trim();
let password2 = this.state.password2.trim();
if (!password1.length) {
errMessage = gettext('Please enter password');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
2018-12-07 02:36:59 +00:00
return false;
}
if (!password2.length) {
errMessage = gettext('Please enter the password again');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
2018-12-07 02:36:59 +00:00
return false;
}
if (password1.length < repoPasswordMinLength) {
errMessage = gettext('Password is too short');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
2018-12-07 02:36:59 +00:00
return false;
}
if (password1 !== password2) {
errMessage = gettext('Passwords don\'t match');
2024-07-18 03:58:42 +00:00
this.setState({ errMessage: errMessage });
2018-12-07 02:36:59 +00:00
return false;
}
}
return true;
}
2018-12-16 07:11:30 +00:00
onPermissionChange = (e) => {
let permission = e.target.value;
2024-07-18 03:58:42 +00:00
this.setState({ permission: permission });
};
2018-12-16 07:11:30 +00:00
handleStorageInputChange = (selectedItem) => {
2024-07-18 03:58:42 +00:00
this.setState({ storage_id: selectedItem.value });
};
handlelibraryTemplatesInputChange = (selectedItem) => {
2024-07-18 03:58:42 +00:00
this.setState({ library_template: selectedItem.value });
};
2018-12-07 02:36:59 +00:00
onEncrypted = (e) => {
let isChecked = e.target.checked;
this.setState({
encrypt: isChecked,
disabled: !isChecked
});
};
2018-12-07 02:36:59 +00:00
prepareRepoData = () => {
let libraryType = this.props.libraryType;
let repoName = this.state.repoName.trim();
let password = this.state.encrypt ? this.state.password1 : '';
let permission = this.state.permission;
let repo = null;
if (libraryType === 'mine' || libraryType === 'public') {
repo = {
name: repoName,
passwd: password
};
}
if (libraryType === 'group') {
repo = {
repo_name: repoName,
password: password,
2018-12-16 07:11:30 +00:00
permission: permission,
};
}
if (libraryType === 'department') {
repo = {
repo_name: repoName,
passwd: password,
};
}
const storage_id = this.state.storage_id;
if (storage_id) {
repo.storage_id = storage_id;
}
const library_template = this.state.library_template;
if (library_template) {
repo.library_template = library_template;
}
2018-12-07 02:36:59 +00:00
return repo;
};
2018-12-07 02:36:59 +00:00
2018-12-03 08:21:09 +00:00
render() {
return (
<Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
2018-12-07 02:36:59 +00:00
<ModalHeader toggle={this.toggle}>{gettext('New Library')}</ModalHeader>
2018-12-03 08:21:09 +00:00
<ModalBody>
<Form>
<FormGroup>
2018-12-17 03:11:45 +00:00
<Label for="repoName">{gettext('Name')}</Label>
<Input
2018-12-17 03:11:45 +00:00
id="repoName"
onKeyDown={this.handleKeyDown}
value={this.state.repoName}
2018-12-07 02:36:59 +00:00
onChange={this.handleRepoNameChange}
autoFocus={true}
2018-12-03 08:21:09 +00:00
/>
</FormGroup>
{libraryTemplates.length > 0 && (
<FormGroup>
<Label>{gettext('Template')}</Label>
<SeahubSelect
defaultValue={this.templateOptions[0]}
options={this.templateOptions}
onChange={this.handlelibraryTemplatesInputChange}
value={this.templateOptions.find(opt => opt.value === this.state.library_template) || null}
/>
</FormGroup>
)}
{storages.length > 0 && (
<FormGroup>
<Label>{gettext('Storage Backend')}</Label>
<SeahubSelect
defaultValue={this.storageOptions[0]}
options={this.storageOptions}
onChange={this.handleStorageInputChange}
value={this.storageOptions.find(opt => opt.value === this.state.storage_id) || null}
/>
</FormGroup>
)}
2018-12-16 07:11:30 +00:00
{this.props.libraryType === 'group' && (
<FormGroup>
<Label for="exampleSelect">{gettext('Permission')}</Label>
<Input type="select" name="select" id="exampleSelect" onChange={this.onPermissionChange} value={this.state.permission}>
2018-12-17 03:11:45 +00:00
<option value='rw'>{gettext('Read-Write')}</option>
<option value='r'>{gettext('Read-Only')}</option>
2018-12-16 07:11:30 +00:00
</Input>
</FormGroup>
)}
2018-12-17 09:26:27 +00:00
{enableEncryptedLibrary &&
<div>
<FormGroup check>
<Input type="checkbox" id="encrypt" onChange={this.onEncrypted} />
2018-12-17 09:26:27 +00:00
<Label for="encrypt">{gettext('Encrypt')}</Label>
</FormGroup>
{!this.state.disabled &&
<FormGroup>
{/* todo translate */}
<Label for="passwd1">{gettext('Password')}</Label><span className="tip">{' '}{gettext('(at least {placeholder} characters)').replace('{placeholder}', repoPasswordMinLength)}</span>
<Input
id="passwd1"
type="password"
disabled={this.state.disabled}
value={this.state.password1}
onChange={this.handlePassword1Change}
autoComplete="new-password"
/>
</FormGroup>
}
{!this.state.disabled &&
<FormGroup>
<Label for="passwd2">{gettext('Password again')}</Label>
<Input
id="passwd2"
type="password"
disabled={this.state.disabled}
value={this.state.password2}
onChange={this.handlePassword2Change}
autoComplete="new-password"
/>
</FormGroup>
}
2018-12-17 09:26:27 +00:00
</div>
}
2018-12-03 08:21:09 +00:00
</Form>
{this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
2018-12-03 08:21:09 +00:00
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
2018-12-03 08:21:09 +00:00
</ModalFooter>
</Modal>
);
}
}
CreateRepoDialog.propTypes = propTypes;
export default CreateRepoDialog;