Added a delete user button

brian7704 · Jun 11, 2024 · 2bc28b7 · 2bc28b7
1 parent a101862
commit 2bc28b7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/src/_versions.ts b/src/_versions.ts
@@ -11,10 +11,10 @@ export interface TsAppVersion {
 export const versions: TsAppVersion = {
     version: '0.0.0',
     name: 'opentakserver-ui',
-    versionDate: '2024-06-10T21:30:25.776Z',
-    gitCommitHash: 'g09ff442',
-    gitCommitDate: '2024-06-10T21:23:13.000Z',
-    versionLong: '0.0.0-g09ff442',
+    versionDate: '2024-06-11T19:57:05.255Z',
+    gitCommitHash: 'ga101862',
+    gitCommitDate: '2024-06-10T21:32:59.000Z',
+    versionLong: '0.0.0-ga101862',
     gitTag: 'v1.1.1',
 };
 export default versions;
diff --git a/src/apiRoutes.tsx b/src/apiRoutes.tsx
@@ -21,6 +21,7 @@ export const apiRoutes = {
   changeRole: '/api/user/role',
   deactivateUser: '/api/user/deactivate',
   activateUser: '/api/user/activate',
+  deleteUser: '/api/user/delete',
   adminResetPassword: '/api/user/password/reset', //Allows admins to change any user's password
   register: '/api/register',
   tfValidate: '/api/tf-validate',

diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
@@ -11,21 +11,22 @@ import {
     TextInput, useComputedColorScheme,
 } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
-import { IconUserPlus } from '@tabler/icons-react';
+import { IconCheck, IconUserPlus, IconX } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 import axios from '../axios_config';
 import { apiRoutes } from '../apiRoutes';
 
 export default function Users() {
     const [users, setUsers] = useState<TableData>({
         caption: '',
-        head: ['Username', 'Protocol', 'Address', 'Port', 'Path', 'Link'],
+        head: ['Username', 'Role', 'Active', 'Last Login', 'Last Login IP', 'Current Login', 'Current Login IP', 'Login Count'],
         body: [],
     });
     const [activePage, setPage] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [addUserOpen, setAddUserOpen] = useState(false);
     const [showResetPassword, setShowResetPassword] = useState(false);
+    const [showDeleteUser, setShowDeleteUser] = useState(false);
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [confirm_password, setConfirmPassword] = useState('');
@@ -48,11 +49,22 @@ export default function Users() {
 
                 r.data.results.map((row:any) => {
                     if (tableData.body !== undefined) {
-                        const reset_password_button = <Button onClick={() => {
+                        const reset_password_button = <Button
+                          onClick={() => {
                             setShowResetPassword(true);
                             setUsername(row.username);
                         }}
-                        >Reset Password</Button>;
+                        >Reset Password
+                                                      </Button>;
+
+                        const delete_user_button = <Button
+                          disabled={row.username === localStorage.getItem('username')}
+                          onClick={() => {
+                            setUsername(row.username);
+                            setShowDeleteUser(true);
+                        }}
+                        >Delete User
+                                                   </Button>;
 
                         const active_switch = <Switch
                           disabled={row.username === localStorage.getItem('username')}
@@ -72,7 +84,7 @@ export default function Users() {
                         />;
 
                         tableData.body.push([row.username, (row.username === localStorage.getItem('username') ? row.roles[0].name : role_select),
-                            active_switch, row.last_login_at, row.last_login_ip, row.current_login_at, row.current_login_ip, row.login_count, reset_password_button]);
+                            active_switch, row.last_login_at, row.last_login_ip, row.current_login_at, row.current_login_ip, row.login_count, reset_password_button, delete_user_button]);
                     }
                     });
 
@@ -87,6 +99,28 @@ export default function Users() {
         getUsers();
     }, [activePage]);
 
+    function deleteUser() {
+        axios.post(apiRoutes.deleteUser, { username })
+            .then(r => {
+                if (r.status === 200) {
+                    notifications.show({
+                        message: 'Successfully deleted user',
+                        icon: <IconCheck />,
+                        color: 'green',
+                    });
+                    getUsers();
+                }
+            }).catch(err => {
+            console.log(err);
+            notifications.show({
+                title: 'Failed to delete user',
+                message: err.response.data.error,
+                icon: <IconX />,
+                color: 'red',
+            });
+        });
+    }
+
     function addUser(e:any) {
         e.preventDefault();
         axios.post(
@@ -243,6 +277,19 @@ export default function Users() {
                 />
                 <Button onClick={(e) => { resetPassword(e); }}>Change Password</Button>
             </Modal>
+            <Modal opened={showDeleteUser} onClose={() => setShowDeleteUser(false)} title={`Are you sure you want to delete ${username}?`}>
+                <Center>
+                    <Button
+                      mr="md"
+                      onClick={() => {
+                        deleteUser();
+                        setShowDeleteUser(false);
+                    }}
+                    >Yes
+                    </Button>
+                    <Button onClick={() => setShowDeleteUser(false)}>No</Button>
+                </Center>
+            </Modal>
         </>
     );
 }