added user delition to webui

backend_py/db_handler.py

@@ -37,7 +37,9 @@ class DbConnector:
         except ValueError:
             print("Default admin user already exists")
 
-    def get_user(self, name: str) -> User | None:
+    def get_user(self, name: str) -> User | dict[User] | None:
+        if not name:
+            return self.session.query(User).all()
         return self.session.query(User).filter(User.name==name).first()
     
     def add_user(self, name: str, hash: str, role: str = "user"):
@@ -50,6 +52,13 @@ class DbConnector:
         self.session.add(new_user)
         self.session.commit()
 
+    def delete_user(self, name: str):
+        user = self.get_user(name)
+        if not user:
+            raise ValueError("User does not exist")
+        self.session.delete(user)
+        self.session.commit()
+
     def add_msg_to_room(self, room: str, msg: str, user: str):
         new_msg = Message(room=room, content=msg, user=user, timestamp=int(time.time()))
         self.session.add(new_msg)

backend_py/endpoints/auth.py

@@ -16,6 +16,20 @@ from utils import read_keys_from_request
 app = Bottle()
 
 
+def username_by_token(request) -> str | None:
+    token = request.get_cookie("oauth2")
+    if not token:
+        return None
+
+    try:
+        decoded = jwt.decode(token, JWT_SECRET, algorithms=["HS256"], options={"verify_sub": False})
+        curent_time = time.time()
+        if decoded.get("exp", float("inf")) + decoded.get("iat", float("inf")) < curent_time:
+            return None
+        return decoded["sub"]["user"]
+    except (jwt.ExpiredSignatureError, jwt.InvalidTokenError) as e:
+        print(f"Token error: {e}")
+        return None
 
 def user_guard(reyection_msg: str = "Requires authentication", allow_anonymous: bool = False):
     def user_guard_decorator(fn: callable):
@@ -74,22 +88,6 @@ def token():
     return dumps(jwt_content)
 
 
-def username_by_token(request) -> str | None:
-    token = request.get_cookie("oauth2")
-    if not token:
-        return None
-
-    try:
-        decoded = jwt.decode(token, JWT_SECRET, algorithms=["HS256"], options={"verify_sub": False})
-        curent_time = time.time()
-        if decoded.get("exp", float("inf")) + decoded.get("iat", float("inf")) < curent_time:
-            return None
-        return decoded["sub"]["user"]
-    except (jwt.ExpiredSignatureError, jwt.InvalidTokenError) as e:
-        print(f"Token error: {e}")
-        return None
-
-
 @app.route("/", method=["GET"])
 def get_user():
     username = username_by_token(request)
@@ -113,5 +111,24 @@ def add_user(user):
     except ValueError as e:
         response.status = 400
         return dumps({"error": str(e)})
-
+    
+@app.route("/delete/<deletion_target>", method=["POST"])
+@admin_guard()
+def delete_user(_, deletion_target: str):
+    response.content_type = 'application/json'
+    try:
+        request.db_connector.delete_user(deletion_target)
+        response.status = 200
+        return dumps({"message": "User deleted successfully"})
+    except ValueError as e:
+        response.status = 400
+        return dumps({"error": str(e)})
+    
+@app.route("/getAll", method=["GET"])
+@admin_guard()
+def get_all_users(_):
+    response.content_type = 'application/json'
+    users = request.db_connector.get_user(None)
+    user_list = [{"name": u.name, "role": u.role} for u in users]
+    return dumps(user_list)
 

frontend/src/composable/auth.ts

@@ -1,6 +1,7 @@
 import { API_URL } from '@/main'
 import { getJsonOrError } from '@/composable/utils'
 import { computed, ref, type Ref } from 'vue'
+import router from '@/router'
 
 export interface User {
   user: string
@@ -14,7 +15,7 @@ const readToken = () => {
   }
   return null
 }
-
+export let allUserStorage: Ref<User[] | null> = ref(null)
 const userHandler = () => {
   let curentUser: Ref<User | null> = ref(null)
 
@@ -60,6 +61,24 @@ const userHandler = () => {
     })
   }
 
+  const getAllUsers = async (): Promise<User[] | null> => {
+    return fetch(`${API_URL}/user/getAll`, {
+      method: 'GET',
+      credentials: 'include', // set coockies from responce
+    }).then(async (response) => {
+      if (response.ok) {
+        let data = await getJsonOrError(response)
+        return data.map((user: any) => ({
+          user: user.name as string,
+          role: user.role as string,
+        })) as User[]
+      } else {
+        console.error('Error fetching all users:', await response.text())
+        return null
+      }
+    })
+  }
+
   const currentUser = (): User | null => {
     if (curentUser.value === null) {
       try {
@@ -67,15 +86,33 @@ const userHandler = () => {
       } catch (e) {
         console.error('Error getting session from JWT:', e)
         curentUser.value = null
+        router.push('/login')
       }
     }
     return curentUser.value
   }
 
+  const allUsers = computed((): User[] | null => {
+    if (curentUser.value?.role !== 'admin') {
+      return null
+    }
+    if (allUserStorage.value === null) {
+      getAllUsers()
+        .then((users) => {
+          allUserStorage.value = users
+        })
+        .catch((error) => {
+          console.error('Error fetching all users:', error)
+        })
+    }
+    return allUserStorage.value
+  })
+
   return {
     getSessionFromJWT,
     requestToken,
     removeToken,
+    allUsers,
     currentUser: computed(() => currentUser()),
   }
 }

frontend/src/composable/settings.ts

@@ -0,0 +1,51 @@
+import { type User, allUserStorage } from '@/composable/auth'
+import { API_URL } from '@/main'
+
+export const deleteUser = async (user: User): Promise<void> => {
+  return fetch(`${API_URL}/user/delete/${user.user}`, {
+    method: 'POST',
+    credentials: 'include', // set cookies from response
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then(async (response) => {
+    if (response.ok) {
+      // Remove user from allUserStorage
+      const index = allUserStorage.value?.findIndex((u) => u.user === user.user)
+      if (index !== undefined && index >= 0) {
+        allUserStorage.value?.splice(index, 1)
+      }
+    } else {
+      console.error('Error deleting user:', await response.text())
+    }
+  })
+}
+
+export const addUser = async (
+  username: string,
+  password: string,
+  new_admin: boolean,
+): Promise<String> => {
+  return fetch(`${API_URL}/user/add`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      credentials: 'include',
+    },
+    body: JSON.stringify({
+      new_user: username,
+      new_password: password,
+      new_admin: new_admin,
+    }),
+  }).then(async (response) => {
+    if (response.ok) {
+      let data = await response.json()
+      allUserStorage.value?.push({
+        user: username,
+        role: new_admin ? 'admin' : 'user',
+      } as User)
+      return data.message
+    }
+    throw new Error('Failed to create user. Try another username.')
+  })
+}

frontend/src/views/User.vue

@@ -2,40 +2,28 @@
 import { ref } from 'vue'
 import { API_URL } from '@/main.ts'
 import { type User, primaryUser } from '@/composable/auth.ts'
+import { deleteUser, addUser } from '@/composable/settings'
 
 import UserInfo from '@/components/UserInfo.vue'
 
 const new_user_name = ref('')
 const new_user_passwd = ref('')
 const new_admin = ref(false)
-const msg = ref({ message: '', type: 'info' })
+const userCreationMsg = ref({ message: '', type: 'info' })
+const userDeletionMsg = ref({ message: '', type: 'info' })
 
 const onNewUserCreation = async () => {
-  try {
-    const response = await fetch(`${API_URL}/user/add`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        credentials: 'include',
-      },
-      body: JSON.stringify({
-        new_user: new_user_name.value,
-        new_password: new_user_passwd.value,
-        new_admin: new_admin.value,
-      }),
+  addUser(new_user_name.value, new_user_passwd.value, new_admin.value)
+    .then(() => {
+      userCreationMsg.value = { message: 'User created successfully', type: 'success' }
+      new_user_name.value = ''
+      new_user_passwd.value = ''
+      new_admin.value = false
+    })
+    .catch((error) => {
+      userCreationMsg.value = { message: `${error}`, type: 'error' }
+      console.error(error)
     })
-
-    const data = await response.json()
-    if (response.ok) {
-      msg.value = { message: data.message, type: 'success' }
-    } else {
-      throw new Error(data.error || 'Failed to create user')
-    }
-  } catch (error: unknown) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
-    msg.value = { message: `Error creating user: ${errorMessage}`, type: 'error' }
-    console.error('Error creating user:', error)
-  }
 }
 </script>
 
@@ -47,24 +35,58 @@ const onNewUserCreation = async () => {
         <p><a class="font-bold">Name:</a> {{ primaryUser.currentUser.value.user }}</p>
         <p><a class="font-bold">Role:</a> {{ primaryUser.currentUser.value.role }}</p>
       </div>
-      <div v-if="primaryUser.currentUser.value.role === 'admin'" class="boxed">
-        <h3>New user</h3>
-        <input v-model="new_user_name" placeholder="Username" />
-        <input v-model="new_user_passwd" type="password" placeholder="Password" />
-        <span class="flex flex-row">
-          <label for="new_admin">Admin:</label>
-          <input v-model="new_admin" id="new_admin" type="checkbox" class="!w-min ml-1" />
-        </span>
-        <button @click="() => onNewUserCreation()">Create User</button>
-        <UserInfo :type="msg.type as any" v-if="msg.message">
-          <template #default>
-            <p>{{ msg.message }}</p>
-          </template>
-        </UserInfo>
+      <template v-if="primaryUser.currentUser.value.role === 'admin'">
+        <div class="boxed">
+          <h3>Users</h3>
+          <table>
+            <tr>
+              <th class="font-bold">Username</th>
+              <th class="font-bold">Role</th>
+              <th class="font-bold">Actions</th>
+            </tr>
+            <tr v-for="user in primaryUser.allUsers.value" :key="user.user">
+              <td>{{ user.user }}</td>
+              <td>{{ user.role }}</td>
+              <td>
+                <button
+                  @click="
+                    () =>
+                      deleteUser(user)
+                        .then(() => (userDeletionMsg = { message: 'Success', type: 'success' }))
+                        .catch((e) => (userDeletionMsg = { message: e, type: 'error' }))
+                  "
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          </table>
+          <UserInfo :type="userDeletionMsg.type as any" v-if="userDeletionMsg.message">
+            <template #default>
+              <p>{{ userDeletionMsg.message }}</p>
+            </template>
+          </UserInfo>
+        </div>
+
+        <div class="boxed">
+          <h3>New user</h3>
+          <input v-model="new_user_name" placeholder="Username" />
+          <input v-model="new_user_passwd" type="password" placeholder="Password" />
+          <span class="flex flex-row">
+            <label for="new_admin">Admin:</label>
+            <input v-model="new_admin" id="new_admin" type="checkbox" class="!w-min ml-1" />
+          </span>
+          <button @click="() => onNewUserCreation()">Create User</button>
+          <UserInfo :type="userCreationMsg.type as any" v-if="userCreationMsg.message">
+            <template #default>
+              <p>{{ userCreationMsg.message }}</p>
+            </template>
+          </UserInfo>
+        </div>
+      </template>
+      <div v-else>
+        <p>You need Admin rights to see the rest...</p>
       </div>
     </div>
-    <div v-else>
-      <p>No user information...</p>
-    </div>
   </main>
 </template>