mirror of
https://github.com/jupyterhub/jupyterhub.git
synced 2025-10-16 06:22:59 +00:00
Make functional AddUser/CreateGroup/EditUser
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { connect } from "react-redux";
|
||||
import { compose, withProps } from "recompose";
|
||||
import { jhapiRequest } from "../../util/jhapiUtil";
|
||||
import { AddUser } from "./AddUser.pre";
|
||||
import AddUser from "./AddUser.pre";
|
||||
|
||||
const withUserAPI = withProps((props) => ({
|
||||
addUsers: (usernames, admin) =>
|
||||
|
@@ -1,116 +1,101 @@
|
||||
import React, { Component } from "react";
|
||||
import React, { Component, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
export class AddUser extends Component {
|
||||
static get propTypes() {
|
||||
return {
|
||||
addUsers: PropTypes.func,
|
||||
failRegexEvent: PropTypes.func,
|
||||
refreshUserData: PropTypes.func,
|
||||
dispatch: PropTypes.func,
|
||||
history: PropTypes.shape({
|
||||
push: PropTypes.func,
|
||||
}),
|
||||
};
|
||||
}
|
||||
const AddUser = (props) => {
|
||||
var [users, setUsers] = useState([]),
|
||||
[admin, setAdmin] = useState(false);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
users: [],
|
||||
admin: false,
|
||||
};
|
||||
}
|
||||
var { addUsers, failRegexEvent, refreshUserData, history } = props;
|
||||
|
||||
render() {
|
||||
var { addUsers, failRegexEvent, refreshUserData, dispatch } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<div className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<h4>Add Users</h4>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="add-user-textarea"
|
||||
rows="3"
|
||||
placeholder="usernames separated by line"
|
||||
onBlur={(e) => {
|
||||
let split_users = e.target.value.split("\n");
|
||||
this.setState(
|
||||
Object.assign({}, this.state, {
|
||||
users: split_users,
|
||||
})
|
||||
);
|
||||
}}
|
||||
></textarea>
|
||||
<br></br>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="admin-check"
|
||||
onChange={(e) =>
|
||||
this.setState(
|
||||
Object.assign({}, this.state, {
|
||||
admin: e.target.checked,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span> </span>
|
||||
<label className="form-check-label">Admin</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="panel-footer">
|
||||
<button id="return" className="btn btn-light">
|
||||
<Link to="/">Back</Link>
|
||||
</button>
|
||||
<span> </span>
|
||||
<button
|
||||
id="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
let filtered_users = this.state.users.filter(
|
||||
(e) =>
|
||||
e.length > 2 &&
|
||||
/[!@#$%^&*(),.?":{}|<>]/g.test(e) == false
|
||||
);
|
||||
if (filtered_users.length < this.state.users.length) {
|
||||
let removed_users = this.state.users.filter(
|
||||
(e) => !filtered_users.includes(e)
|
||||
);
|
||||
this.setState(
|
||||
Object.assign({}, this.state, {
|
||||
users: filtered_users,
|
||||
})
|
||||
);
|
||||
failRegexEvent();
|
||||
return (
|
||||
<>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<div className="panel panel-default">
|
||||
<div className="panel-heading">
|
||||
<h4>Add Users</h4>
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="add-user-textarea"
|
||||
rows="3"
|
||||
placeholder="usernames separated by line"
|
||||
onBlur={(e) => {
|
||||
let split_users = e.target.value.split("\n");
|
||||
setUsers(split_users);
|
||||
}}
|
||||
></textarea>
|
||||
<br></br>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="admin-check"
|
||||
onChange={(e) =>
|
||||
// this.setState(
|
||||
// Object.assign({}, this.state, {
|
||||
// admin: e.target.checked,
|
||||
// })
|
||||
// )
|
||||
setAdmin(e.target.checked)
|
||||
}
|
||||
/>
|
||||
<span> </span>
|
||||
<label className="form-check-label">Admin</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="panel-footer">
|
||||
<button id="return" className="btn btn-light">
|
||||
<Link to="/">Back</Link>
|
||||
</button>
|
||||
<span> </span>
|
||||
<button
|
||||
id="submit"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
let filtered_users = users.filter(
|
||||
(e) =>
|
||||
e.length > 2 &&
|
||||
/[!@#$%^&*(),.?":{}|<>]/g.test(e) == false
|
||||
);
|
||||
if (filtered_users.length < users.length) {
|
||||
let removed_users = users.filter(
|
||||
(e) => !filtered_users.includes(e)
|
||||
);
|
||||
setUsers(filtered_users);
|
||||
failRegexEvent();
|
||||
}
|
||||
|
||||
addUsers(filtered_users, this.state.admin)
|
||||
.then(() => refreshUserData())
|
||||
.then(() => this.props.history.push("/"))
|
||||
.catch((err) => console.log(err));
|
||||
}}
|
||||
>
|
||||
Add Users
|
||||
</button>
|
||||
</div>
|
||||
addUsers(filtered_users, admin)
|
||||
.then(() => refreshUserData())
|
||||
.then(() => history.push("/"))
|
||||
.catch((err) => console.log(err));
|
||||
}}
|
||||
>
|
||||
Add Users
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
AddUser.propTypes = {
|
||||
addUsers: PropTypes.func,
|
||||
failRegexEvent: PropTypes.func,
|
||||
refreshUserData: PropTypes.func,
|
||||
history: PropTypes.shape({
|
||||
push: PropTypes.func,
|
||||
}),
|
||||
};
|
||||
|
||||
export default AddUser;
|
||||
|
Reference in New Issue
Block a user