✨ View auth factors in admin panel

web/src/components/admin/UserAssignPermsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog class="max-w-[720px]" :model-value="data != null" @update:model-value="(val) => !val && emits('close')">
+  <v-dialog class="max-w-[720px]" :model-value="props.data != null" @update:model-value="(val) => !val && emits('close')">
     <template v-slot:default="{ isActive }">
       <v-card title="Assign permissions" :subtitle="`To user @${props.data?.name}`" :loading="submitting">
         <v-card-text>

web/src/components/admin/UserDetailPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog class="max-w-[720px]" :model-value="data != null" @update:model-value="(val) => !val && emits('close')">
+  <v-dialog class="max-w-[720px]" :model-value="props.data != null" @update:model-value="(val) => !val && emits('close')">
     <template v-slot:default="{ isActive }">
       <v-card :title="`User @${props.data?.name}`">
         <v-card-text>

web/src/components/admin/UserFactorPanel.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-dialog class="max-w-[720px]" :model-value="props.data != null"
+            @update:model-value="(val) => !val && emits('close')"
+            :loading="reverting">
+    <template v-slot:default="{ isActive }">
+      <v-card title="Auth Factors" :subtitle="`Of user @${props.data?.name}`">
+        <v-card-text>
+          <v-sheet elevation="2" rounded="lg">
+            <v-table density="compact">
+              <thead>
+              <tr>
+                <th class="text-left">
+                  Name
+                </th>
+                <th class="text-left">
+                  Secret
+                </th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr
+                v-for="item in factors"
+                :key="item.name"
+              >
+                <td class="w-1/2">{{ item.id }}</td>
+                <td class="w-1/2"><code>{{ item.secret }}</code></td>
+              </tr>
+              </tbody>
+            </v-table>
+          </v-sheet>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn
+            text="Close"
+            @click="isActive.value = false"
+          ></v-btn>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import { request } from "@/scripts/request"
+
+const props = defineProps<{ data: any }>()
+const emits = defineEmits(["close", "error"])
+
+const reverting = ref(false)
+
+const factors = ref<any[]>([])
+
+async function load() {
+  reverting.value = true
+  const res = await request(`/api/admin/users/${props.data.id}/factors`)
+  if (res.status !== 200) {
+    emits("error", await res.text())
+  } else {
+    factors.value = await res.json()
+  }
+  reverting.value = false
+}
+
+watch(props, (v) => {
+  if (v.data != null) {
+    factors.value = []
+    load()
+  }
+}, { immediate: true, deep: true })
+</script>

web/src/views/admin/users.vue

@@ -52,6 +52,18 @@
                 />
               </template>
             </v-tooltip>
+            <v-tooltip text="View Auth Factors">
+              <template #activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  variant="text"
+                  size="x-small"
+                  color="warning"
+                  icon="mdi-lock"
+                  @click="viewingFactorUser = item"
+                />
+              </template>
+            </v-tooltip>
           </td>
         </tr>
       </template>
@@ -61,6 +73,7 @@
     <user-assign-perms-panel :data="assigningPermUser" @close="assigningPermUser = null"
                              @success="readUsers(pagination)"
                              @error="val => error = val" />
+    <user-factor-panel :data="viewingFactorUser" @close="viewingFactorUser = null" @error="val => error = val" />
 
     <v-snackbar :timeout="3000" :model-value="error != null" @update:model-value="_ => error = null">
       {{ error }}
@@ -74,12 +87,14 @@ import { request } from "@/scripts/request"
 import { getAtk } from "@/stores/userinfo"
 import UserDetailPanel from "@/components/admin/UserDetailPanel.vue"
 import UserAssignPermsPanel from "@/components/admin/UserAssignPermsPanel.vue"
+import UserFactorPanel from "@/components/admin/UserFactorPanel.vue"
 
 const error = ref<string | null>(null)
 
 const users = ref<any[]>([])
 
 const viewingUser = ref<any>(null)
+const viewingFactorUser = ref<any>(null)
 const assigningPermUser = ref<any>(null)
 
 const dataDefinitions: { [id: string]: any[] } = {