fileserver/frontend/src/views/AdminView.vue

<script setup lang="ts">
import type { TokenInjectType } from "@/api";
import { inject, onBeforeMount, ref } from "vue";
import { Responses, check_token, Admin, isErrorResponse } from "@/api";
import { onBeforeRouteUpdate } from "vue-router";
import router from "@/router";

const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;

const users = ref<Responses.Admin.GetUsersEntry[]>([]);

onBeforeRouteUpdate(async () => {
  await updatePanel();
});
onBeforeMount(async () => {
  await updatePanel();
});
async function updatePanel() {
  const token = await check_token(jwt);
  if (!token) return;

  const res = await Admin.get_users(token);
  if (isErrorResponse(res)) return router.replace({ path: "/" });
  users.value = res.users;
}

async function setRole(user: number, roleStr: string) {
  const token = await check_token(jwt);
  if (!token) return;

  const res = await Admin.set_role(user, parseInt(roleStr, 10), token);
  if (isErrorResponse(res)) console.error(res.message);
  await updatePanel();
}

async function disableTfa(user: number) {
  const token = await check_token(jwt);
  if (!token) return;

  const res = await Admin.disable_tfa(user, token);
  if (isErrorResponse(res)) console.error(res.message);
  await updatePanel();
}

async function logoutUser(user: number) {
  const token = await check_token(jwt);
  if (!token) return;

  const res = await Admin.logout(user, token);
  if (isErrorResponse(res)) console.error(res.message);
  await updatePanel();
}

async function deleteUser(user: number) {
  const token = await check_token(jwt);
  if (!token) return;

  const res = await Admin.delete_user(user, token);
  if (isErrorResponse(res)) console.error(res.message);
  await updatePanel();
}
</script>

<template>
  <table>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Role</th>
      <th>Tfa Status</th>
      <th>Actions</th>
    </tr>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.name }}</td>
      <td>{{ user.gitlab ? "Gitlab" : "Password" }}</td>
      <td>
        <select @change="setRole(user.id, ($event.target as HTMLSelectElement).value)">
          <option value="0" :selected="user.role === 0 ? true : undefined">
            Disabled
          </option>
          <option value="1" :selected="user.role === 1 ? true : undefined">
            User
          </option>
          <option value="2" :selected="user.role === 2 ? true : undefined">
            Admin
          </option>
        </select>
      </td>
      <td v-if="user.gitlab"></td>
      <td v-else>
        {{ user.tfaEnabled ? "Enabled" : "Disabled" }}
      </td>
      <td>
        <button v-if="user.tfaEnabled" @click="disableTfa(user.id)">
          Disable Tfa
        </button>
        <button @click="logoutUser(user.id)">Logout all</button>
        <button @click="deleteUser(user.id)">Delete</button>
      </td>
    </tr>
  </table>
</template>

<style scoped></style>