feat: add user admin page - various dependency updates

client/app/pages/admin/index.ts

@@ -1 +0,0 @@
-export * from './admin';

client/app/pages/index.ts

@@ -1,4 +1,3 @@
-export * from './admin';
 export * from './clips/clips';
 export * from './downloader/downloader';
 export * from './not-found/not-found';
@@ -6,4 +5,5 @@ export * from './oauth/oauth';
 export * from './soundboard/soundboard';
 export * from './stats/stats';
 export * from './upload-history/upload-history';
+export * from './user-event-log';
 export * from './video-archive/video-archive';

client/app/pages/user-event-log/index.ts

@@ -0,0 +1 @@
+export * from './user-event-log';

client/app/pages/user-event-log/user-event-log.tsx

@@ -8,15 +8,16 @@ interface IState {
   userEventLogs: IUserEventLog[];
 }
 
-export class Admin extends React.Component<IProps, IState> {
+export class UserEventLog extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
     this.state = {
       userEventLogs: [],
     };
   }
+
   componentDidMount() {
-    UserEventLogService.getUserEventLogs().then(userEventLogs => {
+    UserEventLogService.getUserEventLogs().then((userEventLogs) => {
       this.setState({
         userEventLogs,
       });

client/app/pages/users/index.tsx

@@ -0,0 +1 @@
+export * from './users';

client/app/pages/users/users.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { IUser } from '../../model';
+import { UserService } from '../../services/user.service';
+
+interface IState {
+  users: IUser[];
+  showSavedMessage: boolean;
+}
+
+export class Users extends React.Component<any, IState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      users: [],
+      showSavedMessage: false,
+    };
+  }
+
+  componentDidMount() {
+    UserService.getUsers().then((users) => {
+      this.setState({ users });
+    });
+  }
+
+  onUserChange = (type: 'permissions' | 'voice_join_sound', event: any, index: number) => {
+    this.setState({ showSavedMessage: false });
+
+    let users = [...this.state.users];
+    const val = type === 'permissions' ? parseInt(event.target.value) : event.target.value;
+    users[index] = {
+      ...users[index],
+      [type]: val,
+    };
+
+    this.setState({ users });
+  };
+
+  renderUsers = () => {
+    return this.state.users.map((u: IUser, i: number) => {
+      return (
+        <tr key={i}>
+          <td>{u.username}</td>
+          <td>{u.email}</td>
+          <td>
+            <input
+              className="input"
+              type="number"
+              min={1}
+              max={3}
+              value={u.permissions}
+              onChange={(e) => this.onUserChange('permissions', e, i)}
+            />
+          </td>
+          <td>
+            <input
+              className="input"
+              type="text"
+              value={u.voice_join_sound || ''}
+              onChange={(e) => this.onUserChange('voice_join_sound', e, i)}
+            />
+          </td>
+        </tr>
+      );
+    });
+  };
+
+  save = (event: any) => {
+    this.setState({ showSavedMessage: false });
+    event.preventDefault();
+    UserService.putUsers(this.state.users).then((users: IUser[]) => {
+      this.setState({ users, showSavedMessage: true });
+    });
+  };
+
+  render() {
+    return (
+      <form className="content" onSubmit={this.save}>
+        <div className="card card--wide">
+          <div className="card__header">Users</div>
+          <div className="overflow-x-auto">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Username</th>
+                  <th>Email</th>
+                  <th>Permissions</th>
+                  <th>Join Sound</th>
+                </tr>
+              </thead>
+              <tbody>{this.renderUsers()}</tbody>
+            </table>
+          </div>
+
+          <br />
+          <button className="button button--primary" type="submit">
+            Save
+          </button>
+          {this.state.showSavedMessage && <span style={{ marginLeft: 5 }}>Users updated</span>}
+        </div>
+      </form>
+    );
+  }
+}