mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-03 07:55:36 +00:00
Org user page (#2941)
* init org user * optimized code style * freezed item * update select-ediotr style * optimized code style * add state
This commit is contained in:
陈钦亮
Daniel Pan
91
frontend/src/components/dialog/org-add-admin-dialog.js
Normal file
91
frontend/src/components/dialog/org-add-admin-dialog.js
Normal file
@@ -0,0 +1,91 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import AsyncSelect from 'react-select/lib/Async';
|
||||
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import { seafileAPI } from '../../utils/seafile-api';
|
||||
|
||||
const propTypes = {
|
||||
toggle: PropTypes.func.isRequired,
|
||||
addOrgAdmin: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class AddOrgAdminDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: null
|
||||
};
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
loadOptions = (value, callback) => {
|
||||
if (value.trim().length > 0) {
|
||||
seafileAPI.searchUsers(value.trim()).then((res) => {
|
||||
this.options = [];
|
||||
for (let i = 0 ; i < res.data.users.length; i++) {
|
||||
let obj = {};
|
||||
obj.value = res.data.users[i].name;
|
||||
obj.email = res.data.users[i].email;
|
||||
obj.label =
|
||||
<Fragment>
|
||||
<img src={res.data.users[i].avatar_url} className="select-module select-module-icon avatar" alt="Avatar"/>
|
||||
<span className='select-module select-module-name'>{res.data.users[i].name}</span>
|
||||
</Fragment>;
|
||||
this.options.push(obj);
|
||||
}
|
||||
callback(this.options);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectChange = (option) => {
|
||||
this.setState({selectedOption: option});
|
||||
this.options = [];
|
||||
}
|
||||
|
||||
addOrgAdmin = () => {
|
||||
let users = [];
|
||||
if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
|
||||
for (let i = 0; i < this.state.selectedOption.length; i ++) {
|
||||
users[i] = this.state.selectedOption[i].email;
|
||||
}
|
||||
}
|
||||
this.props.addOrgAdmin(users)
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.toggle();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal isOpen={true}>
|
||||
<ModalHeader>{gettext('Add Admins')}</ModalHeader>
|
||||
<ModalBody>
|
||||
<AsyncSelect
|
||||
inputId={'react-select-1-input'}
|
||||
className='reviewer-select'
|
||||
placeholder={gettext('Select a user as admin...')}
|
||||
loadOptions={this.loadOptions}
|
||||
onChange={this.handleSelectChange}
|
||||
value={this.state.selectedOption}
|
||||
maxMenuHeight={200}
|
||||
isMulti
|
||||
isFocused
|
||||
isClearable
|
||||
classNamePrefix
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="primary" onClick={this.addOrgAdmin}>{gettext('Submit')}</Button>
|
||||
<Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AddOrgAdminDialog.propTypes = propTypes;
|
||||
|
||||
export default AddOrgAdminDialog;
|
||||
146
frontend/src/components/dialog/org-add-user-dialog.js
Normal file
146
frontend/src/components/dialog/org-add-user-dialog.js
Normal file
@@ -0,0 +1,146 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal, Input, ModalHeader, ModalBody, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
|
||||
import { gettext } from '../../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
toggle: PropTypes.func.isRequired,
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class AddOrgUserDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isPasswordVisible: true,
|
||||
email: '',
|
||||
name: '',
|
||||
password: '',
|
||||
passwdnew: '',
|
||||
errMessage: ''
|
||||
};
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
let isValid = this.validateInputParams();
|
||||
if (isValid) {
|
||||
let { email, name, password } = this.state;
|
||||
this.props.handleSubmit(email, name, password);
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyPress = (e) => {
|
||||
e.preventDefault();
|
||||
if (e.key == 'Enter') {
|
||||
this.handleSubmit(e);
|
||||
}
|
||||
};
|
||||
|
||||
togglePasswordVisible = () => {
|
||||
this.setState({
|
||||
isPasswordVisible: !this.state.isPasswordVisible
|
||||
});
|
||||
}
|
||||
|
||||
generatePassword = () => {
|
||||
let val = Math.random().toString(36).substr(5);
|
||||
this.setState({
|
||||
password: val,
|
||||
passwdnew: val
|
||||
});
|
||||
}
|
||||
|
||||
inputEmail = (e) => {
|
||||
let email = e.target.value.trim();
|
||||
this.setState({email: email});
|
||||
}
|
||||
|
||||
inputName = (e) => {
|
||||
let name = e.target.value.trim();
|
||||
this.setState({name: name});
|
||||
}
|
||||
|
||||
|
||||
inputPassword = (e) => {
|
||||
let passwd = e.target.value.trim();
|
||||
this.setState({password: passwd});
|
||||
}
|
||||
|
||||
inputPasswordNew = (e) => {
|
||||
let passwd = e.target.value.trim();
|
||||
this.setState({passwdnew: passwd});
|
||||
}
|
||||
|
||||
toggle = () => {
|
||||
this.props.toggle();
|
||||
};
|
||||
|
||||
validateInputParams() {
|
||||
let errMessage = '';
|
||||
let email = this.state.email;
|
||||
if (!email.length) {
|
||||
errMessage = 'email is required';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
|
||||
let password1 = this.state.password;
|
||||
let password2 = this.state.passwdnew;
|
||||
if (!password1.length) {
|
||||
errMessage = 'Please enter password';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
if (!password2.length) {
|
||||
errMessage = 'Please enter the password again';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
if (password1 !== password2) {
|
||||
errMessage = 'Passwords don\'t match';
|
||||
this.setState({errMessage: errMessage});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal isOpen={true}>
|
||||
<ModalHeader toggle={this.toggle}>{gettext('Add User')}</ModalHeader>
|
||||
<ModalBody>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label>{gettext('Email')}</Label>
|
||||
<Input value={this.state.email || ''} onChange={this.inputEmail} />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>{gettext('Name(optional)')}</Label>
|
||||
<Input value={this.state.name || ''} onChange={this.inputName} />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>{gettext('Password')}</Label>
|
||||
<InputGroup className="passwd">
|
||||
<Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
|
||||
<Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>{gettext('Confirm Password')}</Label>
|
||||
<Input className="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
|
||||
</FormGroup>
|
||||
<Button onClick={this.handleSubmit}>{gettext('Submit')}</Button>
|
||||
</Form>
|
||||
<Label className="err-message">{gettext(this.state.errMessage)}</Label>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
AddOrgUserDialog.propTypes = propTypes;
|
||||
|
||||
export default AddOrgUserDialog;
|
||||
Reference in New Issue
Block a user