View auth factors in admin panel

This commit is contained in:
2024-07-04 23:12:43 +08:00
parent 13c26486b6
commit 8c7f255473
7 changed files with 730 additions and 303 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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[] } = {