hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-13 04:53:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make functional AddUser/CreateGroup/EditUser

Browse Source
This commit is contained in:
Nathan Barber
2021-04-07 11:56:45 -04:00
parent dc4bbc01bb
commit 0f5e86ff06
14 changed files with 325 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
jsx/build/admin-react.js
View File

File diff suppressed because one or more lines are too long

2
jsx/src/App.jsx
View File

@@ -11,7 +11,7 @@ import { createBrowserHistory } from "history";
import ServerDashboard from "./components/ServerDashboard/ServerDashboard";
import Groups from "./components/Groups/Groups";
import GroupEdit from "./components/GroupEdit/GroupEdit";
import CreateGroup from "./components/CreateGroup/CreateGroup"
import CreateGroup from "./components/CreateGroup/CreateGroup";
import AddUser from "./components/AddUser/AddUser";
import EditUser from "./components/EditUser/EditUser";

2
jsx/src/components/AddUser/AddUser.js
View File

@@ -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) =>

75
jsx/src/components/AddUser/AddUser.pre.jsx
View File

@@ -1,30 +1,12 @@
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,
};
}
render() {
var { addUsers, failRegexEvent, refreshUserData, dispatch } = this.props;
var { addUsers, failRegexEvent, refreshUserData, history } = props;
return (
<>
@@ -45,11 +27,7 @@ export class AddUser extends Component {
placeholder="usernames separated by line"
onBlur={(e) => {
let split_users = e.target.value.split("\n");
this.setState(
Object.assign({}, this.state, {
users: split_users,
})
);
setUsers(split_users);
}}
></textarea>
<br></br>
@@ -59,11 +37,12 @@ export class AddUser extends Component {
value=""
id="admin-check"
onChange={(e) =>
this.setState(
Object.assign({}, this.state, {
admin: e.target.checked,
})
)
// this.setState(
// Object.assign({}, this.state, {
// admin: e.target.checked,
// })
// )
setAdmin(e.target.checked)
}
/>
<span> </span>
@@ -80,26 +59,22 @@ export class AddUser extends Component {
id="submit"
className="btn btn-primary"
onClick={() => {
let filtered_users = this.state.users.filter(
let filtered_users = 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(
if (filtered_users.length < users.length) {
let removed_users = users.filter(
(e) => !filtered_users.includes(e)
);
this.setState(
Object.assign({}, this.state, {
users: filtered_users,
})
);
setUsers(filtered_users);
failRegexEvent();
}
addUsers(filtered_users, this.state.admin)
addUsers(filtered_users, admin)
.then(() => refreshUserData())
.then(() => this.props.history.push("/"))
.then(() => history.push("/"))
.catch((err) => console.log(err));
}}
>
@@ -112,5 +87,15 @@ export class AddUser extends Component {
</div>
</>
);
}
}
};
AddUser.propTypes = {
addUsers: PropTypes.func,
failRegexEvent: PropTypes.func,
refreshUserData: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
export default AddUser;

2
jsx/src/components/CreateGroup/CreateGroup.js
View File

@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { compose, withProps } from "recompose";
import { jhapiRequest } from "../../util/jhapiUtil";
import { CreateGroup } from "./CreateGroup.pre";
import CreateGroup from "./CreateGroup.pre";
const withUserAPI = withProps((props) => ({
createGroup: (groupName) => jhapiRequest("/groups/" + groupName, "POST"),

48
jsx/src/components/CreateGroup/CreateGroup.pre.jsx
View File

@@ -1,29 +1,11 @@
import React, { Component } from "react";
import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import Multiselect from "../Multiselect/Multiselect";
export class CreateGroup extends Component {
static get propTypes() {
return {
createGroup: PropTypes.func,
refreshGroupsData: PropTypes.func,
failRegexEvent: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
}
const CreateGroup = (props) => {
var [groupName, setGroupName] = useState("");
constructor(props) {
super(props);
this.state = {
groupName: "",
};
}
render() {
var { createGroup, refreshGroupsData } = this.props;
var { createGroup, refreshGroupsData, history } = props;
return (
<>
@@ -39,11 +21,11 @@ export class CreateGroup extends Component {
<input
className="group-name-input"
type="text"
value={this.state.groupName}
value={groupName}
id="group-name"
placeholder="group name..."
onChange={(e) => {
this.setState({ groupName: e.target.value });
setGroupName(e.target.value);
}}
></input>
</div>
@@ -57,10 +39,10 @@ export class CreateGroup extends Component {
id="submit"
className="btn btn-primary"
onClick={() => {
let groupName = this.state.groupName;
let groupName = groupName;
createGroup(groupName)
.then(refreshGroupsData())
.then(this.props.history.push("/groups"))
.then(history.push("/groups"))
.catch((err) => console.log(err));
}}
>
@@ -73,5 +55,15 @@ export class CreateGroup extends Component {
</div>
</>
);
}
}
};
CreateGroup.propTypes = {
createGroup: PropTypes.func,
refreshGroupsData: PropTypes.func,
failRegexEvent: PropTypes.func,
history: PropTypes.shape({
push: PropTypes.func,
}),
};
export default CreateGroup;

2
jsx/src/components/EditUser/EditUser.js
View File

@@ -1,7 +1,7 @@
import { connect } from "react-redux";
import { compose, withProps } from "recompose";
import { jhapiRequest } from "../../util/jhapiUtil";
import { EditUser } from "./EditUser.pre";
import EditUser from "./EditUser.pre";
const withUserAPI = withProps((props) => ({
editUser: (username, updated_username, admin) =>

112
jsx/src/components/EditUser/EditUser.pre.jsx
View File

@@ -1,43 +1,25 @@
import React, { Component } from "react";
import React, { Component, useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
export class EditUser extends Component {
static get propTypes() {
return {
location: PropTypes.shape({
state: PropTypes.shape({
username: PropTypes.string,
has_admin: PropTypes.bool,
}),
}),
history: PropTypes.shape({
push: PropTypes.func,
}),
editUser: PropTypes.func,
deleteUser: PropTypes.func,
failRegexEvent: PropTypes.func,
refreshUserData: PropTypes.func,
};
}
const EditUser = (props) => {
var {
editUser,
deleteUser,
failRegexEvent,
refreshUserData,
history,
} = props;
constructor(props) {
super(props);
this.state = {
updated_username: null,
admin: null,
};
}
render() {
if (this.props.location.state == undefined) {
this.props.history.push("/");
if (props.location.state == undefined) {
props.history.push("/");
return <></>;
}
var { username, has_admin } = this.props.location.state;
var { username, has_admin } = props.location.state;
var { editUser, deleteUser, failRegexEvent, refreshUserData } = this.props;
var [updatedUsername, setUpdatedUsername] = useState(""),
[admin, setAdmin] = useState(has_admin);
return (
<>
@@ -56,28 +38,17 @@ export class EditUser extends Component {
id="exampleFormControlTextarea1"
rows="3"
placeholder="updated username"
onKeyDown={(e) => {
this.setState(
Object.assign({}, this.state, {
updated_username: e.target.value,
})
);
onBlur={(e) => {
setUpdatedUsername(e.target.value);
}}
></textarea>
<br></br>
<input
className="form-check-input"
checked={has_admin ? true : false}
checked={admin}
type="checkbox"
value=""
id="admin-check"
onChange={(e) =>
this.setState(
Object.assign({}, this.state, {
admin: e.target.checked,
})
)
}
onChange={(e) => setAdmin(!admin)}
/>
<span> </span>
<label className="form-check-label">Admin</label>
@@ -88,7 +59,7 @@ export class EditUser extends Component {
onClick={() => {
deleteUser(username)
.then((data) => {
this.props.history.push("/");
history.push("/");
refreshUserData();
})
.catch((err) => console.log(err));
@@ -108,33 +79,23 @@ export class EditUser extends Component {
id="submit"
className="btn btn-primary"
onClick={() => {
let updated_username = this.state.updated_username,
admin = this.state.admin;
if (updated_username == null && admin == null) return;
if (updatedUsername == "" && admin == has_admin) return;
if (
updated_username.length > 2 &&
/[!@#$%^&*(),.?":{}|<>]/g.test(updated_username) ==
false
updatedUsername.length > 2 &&
/[!@#$%^&*(),.?":{}|<>]/g.test(updatedUsername) == false
) {
editUser(
username,
updated_username != null
? updated_username
: username,
admin != null ? admin : has_admin
updatedUsername != "" ? updatedUsername : username,
admin
)
.then((data) => {
this.props.history.push("/");
history.push("/");
refreshUserData();
})
.catch((err) => {});
} else {
this.setState(
Object.assign({}, this.state, {
updated_username: "",
})
);
setUpdatedUsername(null);
failRegexEvent();
}
}}
@@ -148,5 +109,22 @@ export class EditUser extends Component {
</div>
</>
);
}
}
};
EditUser.propTypes = {
location: PropTypes.shape({
state: PropTypes.shape({
username: PropTypes.string,
has_admin: PropTypes.bool,
}),
}),
history: PropTypes.shape({
push: PropTypes.func,
}),
editUser: PropTypes.func,
deleteUser: PropTypes.func,
failRegexEvent: PropTypes.func,
refreshUserData: PropTypes.func,
};
export default EditUser;

3
jsx/src/components/GroupEdit/GroupEdit.js
View File

@@ -8,8 +8,7 @@ const withGroupsAPI = withProps((props) => ({
jhapiRequest("/groups/" + groupname + "/users", "POST", { users }),
removeFromGroup: (users, groupname) =>
jhapiRequest("/groups/" + groupname + "/users", "DELETE", { users }),
deleteGroup: (name) =>
jhapiRequest("/groups/" + name, "DELETE"),
deleteGroup: (name) => jhapiRequest("/groups/" + name, "DELETE"),
refreshGroupsData: () =>
jhapiRequest("/groups", "GET")
.then((data) => data.json())

23
jsx/src/components/GroupEdit/GroupEdit.pre.jsx
View File

@@ -18,7 +18,7 @@ export class GroupEdit extends Component {
}),
addToGroup: PropTypes.func,
removeFromGroup: PropTypes.func,
deleteGroup: PropTypes.func
deleteGroup: PropTypes.func,
};
}
@@ -40,7 +40,12 @@ export class GroupEdit extends Component {
var { group_data, user_data, callback } = this.props.location.state;
var { addToGroup, removeFromGroup, deleteGroup, refreshGroupsData } = this.props;
var {
addToGroup,
removeFromGroup,
deleteGroup,
refreshGroupsData,
} = this.props;
if (!(group_data && user_data)) return <div></div>;
@@ -104,13 +109,19 @@ export class GroupEdit extends Component {
>
Apply
</button>
<button className="btn btn-danger" style={{ float: "right" }} onClick={() => {
var groupName = group_data.name
<button
className="btn btn-danger"
style={{ float: "right" }}
onClick={() => {
var groupName = group_data.name;
deleteGroup(groupName)
.then(refreshGroupsData())
.then(this.props.history.push("/groups"))
.catch(err => console.log(err))
}}>Delete Group</button>
.catch((err) => console.log(err));
}}
>
Delete Group
</button>
<br></br>
<br></br>
</div>

2
jsx/src/components/Groups/Groups.js
View File

@@ -21,7 +21,7 @@ const withGroupsAPI = withProps((props) => ({
jhapiRequest("/groups/" + name + "/users", "DELETE", {
body: { users: removed_users },
json: true,
})
}),
}));
export default compose(

9
jsx/src/components/Groups/Groups.pre.jsx
View File

@@ -69,9 +69,12 @@ export class Groups extends Component {
<button className="btn btn-light adjacent-span-spacing">
<Link to="/">Back</Link>
</button>
<button className="btn btn-primary adjacent-span-spacing" onClick={() => {
this.props.history.push("/create-group")
}}>
<button
className="btn btn-primary adjacent-span-spacing"
onClick={() => {
this.props.history.push("/create-group");
}}
>
New Group
</button>
</div>

2
jupyterhub-proxy.pid
View File

@@ -1 +1 @@
16381
17503

28
share/jupyterhub/static/js/admin-react.js
View File

File diff suppressed because one or more lines are too long