Bug Fixes + IN Operator + User deletion

src/src/api.js

@@ -51,6 +51,10 @@ export default class API {
         return this.apiCall("user/get", { id: id });
     }
 
+    async deleteUser(id) {
+        return this.apiCall("user/delete", { id: id });
+    }
+
     async fetchUsers(pageNum = 1, count = 20) {
         return this.apiCall("user/fetch", { page: pageNum, count: count });
     }

src/src/elements/dialog.js

@@ -6,6 +6,17 @@ export default function Dialog(props) {
     const classes = "modal fade" + (show ? " show" : "");
     const style = { paddingRight: "12px", display: (show ? "block" : "none") };
     const onClose = props.onClose || function() { };
+    const onOption = props.onOption || function() { };
+    const options = props.options || ["Close"];
+
+    let buttons = [];
+    for (let name of options) {
+        buttons.push(
+            <button type="button" key={"button-" + name} className="btn btn-default" data-dismiss={"modal"} onClick={() => { onClose(); onOption(name); }}>
+                {name}
+            </button>
+        )
+    }
 
     return (
         <div className={classes} id="modal-default" style={style} aria-modal="true" onClick={() => onClose()}>
@@ -20,8 +31,8 @@ export default function Dialog(props) {
                     <div className="modal-body">
                         <p>{props.message}</p>
                     </div>
-                    <div className="modal-footer justify-content-between">
-                        <button type="button" className="btn btn-default" data-dismiss="modal" onClick={() => onClose()}>Close</button>
+                    <div className="modal-footer">
+                        { buttons }
                     </div>
                 </div>
             </div>

src/src/index.js

@@ -34,8 +34,8 @@ class AdminDashboard extends React.Component {
     this.fetchNotifications();
   }
 
-  showDialog(message, title) {
-    const props = { show: true, message: message, title: title };
+  showDialog(message, title, options=["Close"], onOption = null) {
+    const props = { show: true, message: message, title: title, options: options, onOption: onOption };
     this.setState({ ...this.state, dialog: { ...this.state.dialog, ...props } });
   }
 

src/src/views/edituser.js

@@ -9,7 +9,8 @@ export default class EditUser extends React.Component {
     constructor(props) {
         super(props);
         this.parent = {
-            api: props.api
+            api: props.api,
+            showDialog: props.showDialog,
         };
 
         this.state = {
@@ -18,6 +19,7 @@ export default class EditUser extends React.Component {
             fetchError: null,
             loaded: false,
             isSaving: false,
+            isDeleting: false,
             groups: { },
             searchString: "",
             searchActive: false
@@ -37,7 +39,13 @@ export default class EditUser extends React.Component {
     componentDidMount() {
         this.parent.api.getUser(this.props.match.params["userId"]).then((res) => {
             if (res.success) {
-                this.setState({ ...this.state, user: {... res.user, password: ""} });
+                this.setState({ ...this.state, user: {
+                        name: res.user.name,
+                        email: res.user.email || "",
+                        groups: res.user.groups,
+                        password: ""
+                    }
+                });
                 this.parent.api.fetchGroups(1, 50).then((res) => {
                     if (res.success) {
                         this.setState({ ...this.state, groups: res.groups, loaded: true });
@@ -92,6 +100,27 @@ export default class EditUser extends React.Component {
         });
     }
 
+    onDeleteUser(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const id = this.props.match.params["userId"];
+
+        this.parent.showDialog("Are you sure you want to delete this user permanently?", "Delete User?", ["Yes", "No"], (btn) => {
+            if (btn === "Yes") {
+                this.parent.api.deleteUser(id).then((res) => {
+                    if (res.success) {
+                        this.props.history.push("/admin/users");
+                    } else {
+                        let alerts = this.state.alerts.slice();
+                        alerts.push({ title: "Error deleting user", message: res.msg, type: "danger" });
+                        this.setState({ ...this.state, isSaving: false, alerts: alerts, user: { ...this.state.user, password: "" } });
+                    }
+                })
+            }
+        });
+    }
+
     onRemoveGroup(event, groupId) {
         event.stopPropagation();
         if (this.state.user.groups.hasOwnProperty(groupId)) {
@@ -178,7 +207,7 @@ export default class EditUser extends React.Component {
                 );
             }
 
-            form = <form role={"form"} onSubmit={this.onSubmitForm.bind(this)}>
+            form = <form role={"form"} onSubmit={(e) => e.preventDefault()}>
                 <div className={"form-group"}>
                     <label htmlFor={"username"}>Username</label>
                     <input type={"text"} className={"form-control"} placeholder={"Enter username"}
@@ -238,8 +267,12 @@ export default class EditUser extends React.Component {
                     &nbsp;Back
                 </Link>
                 { this.state.isSaving
-                    ? <button type={"submit"} className={"btn btn-primary mt-2"} disabled>Saving…&nbsp;<Icon icon={"circle-notch"} /></button>
-                    : <button type={"submit"} className={"btn btn-primary mt-2"}>Save</button>
+                    ? <button type={"submit"} className={"btn btn-primary mt-2 mr-2"} disabled>Saving…&nbsp;<Icon icon={"circle-notch"} /></button>
+                    : <button type={"submit"} className={"btn btn-primary mt-2 mr-2"} onClick={this.onSubmitForm.bind(this)}>Save</button>
+                }
+                { this.state.isDeleting
+                    ? <button type={"submit"} className={"btn btn-danger mt-2"} disabled>Deleting…&nbsp;<Icon icon={"circle-notch"} /></button>
+                    : <button type={"submit"} className={"btn btn-danger mt-2"} onClick={this.onDeleteUser.bind(this)}>Delete</button>
                 }
             </form>
         }