verifoo/admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧 Work

Browse Source
This commit is contained in:
Andreas Dinauer 2026-04-04 19:40:30 +02:00
parent 875576ef2d
commit 431c0dda99
22 changed files with 362 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/app.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="app" v-if="realms.data">
<Sidebar :realms="realms.data"></Sidebar>
<div id="app" v-if="realms">
<Sidebar :realms="realms"></Sidebar>
<div id="page">
<NuxtPage></NuxtPage>
</div>
@ -9,12 +9,15 @@
</template>
<script setup lang="ts">
import {useGet} from "~/utils/HttpUtils";
import type {Realm} from "~/realm/Realm";
import Sidebar from "~/components/Sidebar.vue";
import PopupSlot from '~/components/ui/popup/PopupSlot.vue';
import {useRealmStore} from "~/realm/RealmStore";
const realms = useGet<Realm[]>("/api/realms");
const realms = computed(() => useRealmStore().getRealms());
onMounted(() => {
useRealmStore().init();
})
</script>
<style scoped>

2
app/client/ClientAdd.vue
View File

@ -28,7 +28,7 @@ const client = ref(new ClientCreation());
function addClient()
{
console.log(client.value);
usePost<Client>("/api/realms/" + useRoute().params.realm_key + "/clients", client.value, (response) => {
usePost<Client, ClientCreation>("/api/realms/" + useRoute().params.realm_key + "/clients", client.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{

23
app/components/Sidebar.vue
View File

@ -1,25 +1,38 @@
<template>
<div class="sidebar content-l">
<h2>Verifoo</h2>
<div class="content-s">
<NuxtLink class="sidebar-link">Home</NuxtLink>
<NuxtLink class="sidebar-link" v-for="realm in realms" :to="'/realms/' + realm.key">{{ realm.name }}</NuxtLink>
<div class="inner-sidebar">
<div class="content-s">
<NuxtLink class="sidebar-link" to="/">Home</NuxtLink>
<NuxtLink class="sidebar-link" v-for="realm in realms" :to="'/realms/' + realm.key + '/home'">{{ realm.name }}</NuxtLink>
</div>
<div class="content-s">
<UiButton icon="add" reverse @click="addRealm">Create</UiButton>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type {Realm} from "~/realm/Realm";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RealmAdd from "~/realm/RealmAdd.vue";
defineProps<{
realms: Realm[]
}>()
function addRealm()
{
usePopup().open(Popup.component(RealmAdd).setConfig({ heading: 'Add Realm', size: PopupSize.MEDIUM }));
}
</script>
<style scoped>
.sidebar {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
padding: 1rem 2rem;
background-color: #f1f1f1;
align-content: flex-start;
@ -35,4 +48,8 @@ defineProps<{
background-color: #000000;
color: white;
}
.inner-sidebar {
display: grid;
grid-template-rows: 1fr auto;
}
</style>

8
app/components/ui/UiButton.vue
View File

@ -34,11 +34,17 @@ const props = defineProps<{
white-space: nowrap;
border-radius: 0.25rem;
padding: 0.5rem;
font-weight: 500;
font-weight: 550;
font-size: 1rem;
}
.button * {
color: white;
fill: white;
}
.small {
height: 1.75rem;
}
.button.disabled {
background-color: #7a7a7a;
}
</style>

18
app/components/ui/alert/ErrorAlert.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="error-alert">
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.error-alert {
background-color: #ffeadf;
border: 1px solid #ff9c80;
padding: 0.5rem;
border-radius: 0.25rem;
}
</style>

4
app/components/ui/popup/PopupSlot.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="overlay center" @click="closeOutside" v-if="popup">
<div class="overlay center" @click="closeOutside" v-if="popup && popup.config">
<div class="popup" :class="popup.config.size" @click.stop>
<div class="popup__header">
<h2>{{ popup.config.heading }}</h2>
@ -19,7 +19,7 @@ const popup = computed(() => usePopup().get());
function closeOutside()
{
if (popup.value?.config.closeOnOverlayClick)
if (popup.value?.config?.closeOnOverlayClick)
{
usePopup().close();
}

46
app/pages/realms/[realm_key]/home.vue
View File

@ -1,24 +1,42 @@
<template>
<div>
<Table columns="1fr">
<HeaderRow>
<HeaderCell>Client ID</HeaderCell>
</HeaderRow>
<ContentRow>
</ContentRow>
</Table>
<div class="content-l" v-if="realm.data">
<div class="col-2">
<div class="content-m">
<h3>Name</h3>
<p class="tile-m">{{realm.data.name}}</p>
</div>
<div class="content-m">
<h3>Access Token Lifetime</h3>
<p class="tile-m">{{(realm.data.lifetime / 60)}} Minutes</p>
</div>
</div>
<ErrorAlert>
<div class="spaced-center">
<p>Delete Realm</p>
<UiButton class="delete-button" @click="deleteRealm(realm.data)">Delete</UiButton>
</div>
</ErrorAlert>
</div>
</template>
<script setup lang="ts">
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import Table from "~/components/ui/table/Table.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ErrorAlert from "~/components/ui/alert/ErrorAlert.vue";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RealmDelete from "~/realm/RealmDelete.vue";
import type {Realm} from "~/realm/Realm";
import {useGet} from "~/utils/HttpUtils";
import UiButton from "~/components/ui/UiButton.vue";
const realm = useGet<Realm>("/api/realms/" + useRoute().params.realm_key);
function deleteRealm(realm: Realm)
{
usePopup().open(Popup.component<Realm>(RealmDelete).setConfig({ heading: 'Delete Realm', size: PopupSize.MEDIUM }).setPayload(realm))
}
</script>
<style scoped>
.delete-button {
background-color: red;
}
</style>

5
app/pages/realms/[realm_key]/keys.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<Table columns="auto auto auto 1fr" v-if="keys.data">
<Table columns="auto auto auto 1fr" :show-footer="keys.data.keys.length === 0" v-if="keys.data">
<HeaderRow>
<HeaderCell>ID</HeaderCell>
<HeaderCell>Key Type</HeaderCell>
@ -13,6 +13,9 @@
<ContentCell v-for="key in keys.data.keys">{{ key.alg }}</ContentCell>
<ContentCell v-for="key in keys.data.keys">{{ key.use }}</ContentCell>
</ContentRow>
<template #footer>
<p>No keys found.</p>
</template>
</Table>
</div>
</template>

5
app/pages/realms/[realm_key]/roles.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content-l">
<Table columns="1fr auto">
<Table columns="1fr auto" :show-footer="roles.data.length === 0" v-if="roles.data">
<HeaderRow>
<HeaderCell>Name</HeaderCell>
<HeaderCell></HeaderCell>
@ -12,6 +12,9 @@
<UiButton @click="deleteRole(role)"><UiIcon>delete</UiIcon></UiButton>
</ContentCell>
</ContentRow>
<template #footer>
<p>No roles found.</p>
</template>
</Table>
<div>
<UiButton @click="addRole">Create</UiButton>

20
app/pages/realms/[realm_key]/users/[user_id].vue
View File

@ -1,5 +1,5 @@
<template>
<div class="content-l" v-if="user.data">
<div class="content-l" v-if="user.data && roleAssignments.data">
<p class="left-center" style="gap: 0.25rem"><span class="link" @click="useRouter().push('/realms/' + useRoute().params.realm_key + '/users')">Users</span><UiIcon>chevron_right</UiIcon><span>{{user.data.email}}</span></p>
<div class="col-2">
<div class="tile-m">
@ -11,6 +11,7 @@
<p>{{user.data.firstname}} {{user.data.lastname}}</p>
</div>
</div>
<UserRoleDisplay :role-assignments="roleAssignments.data"></UserRoleDisplay>
<div class="left-center">
<UiButton icon="edit" reverse>Edit</UiButton>
<UiButton icon="delete" reverse>Delete</UiButton>
@ -20,8 +21,23 @@
<script setup lang="ts">
import type {User} from "~/user/User";
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import Table from "~/components/ui/table/Table.vue";
import type {RoleAssignment} from "~/role-assignment/RoleAssignment";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import type {Role} from "~/role/Role";
import UserRoleAssignment from "~/user/UserRoleAssignment.vue";
import UiButton from "~/components/ui/UiButton.vue";
import UserRoleDisplay from "~/user/UserRoleDisplay.vue";
const user = useGet<User>("/api/realms/" + useRoute().params.realm_key + "/users/" + useRoute().params.user_id);
const realmKey = useRoute().params.realm_key;
const userId = useRoute().params.user_id;
const user = useGet<User>("/api/realms/" + realmKey + "/users/" + userId);
const roleAssignments = useGet<RoleAssignment>("/api/realms/" + realmKey + "/users/" + userId + "/role-assignments");
</script>
<style scoped>

9
app/realm/Realm.ts
View File

@ -2,8 +2,15 @@ export class Realm
{
constructor(
public key: string,
public name: string
public name: string,
public lifetime: number
)
{
}
}
export class RealmCreation
{
key?: string;
name?: string;
}

32
app/realm/RealmAdd.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<form class="content-l" @submit.prevent="addRealm">
<div class="col-2">
<UiInput label="Name" required>
<input type="text" v-model="realm.name" required>
</UiInput>
<UiInput label="Key" required>
<input type="text" v-model="realm.key" required>
</UiInput>
</div>
<div class="center">
<UiButton type="submit">Create</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import {usePopup} from "~/components/ui/popup/Popup";
import {Realm, RealmCreation} from "~/realm/Realm";
import {useRealmStore} from "~/realm/RealmStore";
const realm = ref(new RealmCreation());
function addRealm()
{
useRealmStore().add(realm.value);
}
</script>
<style scoped>
</style>

30
app/realm/RealmDelete.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<form class="content-l" v-if="popup.payload" @submit.prevent="deleteRealm(popup.payload)">
<UiWarning><p>Are you sure you want to delete realm <span>{{ popup.payload.name }} ({{ popup.payload.key }})</span>?</p></UiWarning>
<div class="center">
<UiButton type="submit">Delete</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import {usePopup} from "~/components/ui/popup/Popup";
import type {User} from "~/user/User";
import {useDelete} from "~/utils/HttpUtils";
import UiWarning from "~/components/ui/UiWarning.vue";
import type {Realm} from "~/realm/Realm";
import {useRealmStore} from "~/realm/RealmStore";
const popup = usePopup().require<Realm>();
function deleteRealm(realm: Realm)
{
useRealmStore().delete(realm);
}
</script>
<style scoped>
span {
font-weight: bold;
}
</style>

45
app/realm/RealmStore.ts Normal file
View File

@ -0,0 +1,45 @@
import {Realm, RealmCreation} from "~/realm/Realm";
import {useGet} from "~/utils/HttpUtils";
import {usePopup} from "~/components/ui/popup/Popup";
export const useRealmStore = defineStore('realms', {
state: () => ({
realms: useGet<Realm[]>("/api/realms").value.data
}),
getters: {
getRealms: (state) => {
return () => {
return state.realms;
}
}
},
actions: {
init()
{
const realms = useGet<Realm[]>("/api/realms");
watchEffect(() => {
this.realms = realms.value.data;
})
},
add(realm: RealmCreation)
{
usePost<Realm, RealmCreation>("/api/realms", realm, (response) => {
this.realms?.push(response);
usePopup().close();
useRouter().push("/realms/" + response.key + '/home');
});
},
delete(realm: Realm)
{
useDelete("/api/realms/" + realm.key, () => {
const index = this.realms?.findIndex(item => item.key === realm.key);
if (index && index >= 0)
{
this.realms?.splice(index, 1);
usePopup().close();
useRouter().push("/");
}
})
}
},
})

9
app/role-assignment/RoleAssignment.ts Normal file
View File

@ -0,0 +1,9 @@
import type {Role} from "~/role/Role";
export class RoleAssignment
{
constructor(
public assigned: Role[],
public unassigned: Role[]
) {}
}

2
app/role/RoleAdd.vue
View File

@ -16,7 +16,7 @@ const role = ref(new RoleCreation());
function addRole()
{
usePost<Role>("/api/realms/" + useRoute().params.realm_key + "/roles", role.value, (role: Role) => {
usePost<Role, RoleCreation>("/api/realms/" + useRoute().params.realm_key + "/roles", role.value, (role: Role) => {
usePopup().callback(role);
usePopup().close();
});

2
app/user/UserAdd.vue
View File

@ -28,7 +28,7 @@ const user = ref(new UserCreation());
function addUser()
{
usePost<User>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
usePost<User, UserCreation>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{

2
app/user/UserEdit.vue
View File

@ -28,7 +28,7 @@ const user = ref(new UserCreation());
function addUser()
{
usePost<User>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
usePost<User, UserCreation>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{

46
app/user/UserRoleAssignment.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<form class="content-l" @submit.prevent="assign(selection)" v-if="roles && roles.length > 0">
<div class="content-m">
<p class="tile-m role left-center" :class="{ selected: selection?.name === role.name }" v-for="role in roles" @click="selection = role">{{ role.name }}</p>
</div>
<div class="center">
<UiButton type="submit" :disabled="selection == null">Assign</UiButton>
</div>
</form>
<div v-else>
<p class="tile-m">There are no roles available for assignment.</p>
</div>
</template>
<script setup lang="ts">
import type {Role} from "~/role/Role";
import {usePopup} from "~/components/ui/popup/Popup";
import {usePost, usePut} from "~/utils/HttpUtils";
const selection: Ref<Role | undefined> = ref();
const roles = usePopup().require<Role[]>().payload;
function assign(role?: Role)
{
if (role != null)
{
const realmKey = useRoute().params.realm_key;
const userId = useRoute().params.user_id;
usePut<any, { assign: string[] }>("/api/realms/" + realmKey + "/users/" + userId + "/role-assignments", { assign: [role.name]}, () => {
usePopup().callback(role);
usePopup().close();
})
}
}
</script>
<style scoped>
.role {
height: 2.5rem;
border: 2px solid transparent;
}
.selected {
border-color: black;
}
</style>

72
app/user/UserRoleDisplay.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="content-m">
<div class="left-center">
<h3>Roles</h3>
<UiButton class="small" icon="group_add" @click="assignRoles(roleAssignments.unassigned)" reverse>Assign</UiButton>
</div>
<Table columns="1fr auto" :show-footer="roleAssignments.assigned.length === 0">
<HeaderRow>
<HeaderCell>Name</HeaderCell>
<HeaderCell></HeaderCell>
</HeaderRow>
<ContentRow v-for="role in roleAssignments.assigned">
<ContentCell>{{role.name}}</ContentCell>
<ContentCell style="padding: 0.25rem;" @click="unassign(role)"><UiButton icon="delete"></UiButton></ContentCell>
</ContentRow>
<template #footer>
<p>No roles assigned.</p>
</template>
</Table>
</div>
</template>
<script setup lang="ts">
import UiButton from "~/components/ui/UiButton.vue";
import Table from "~/components/ui/table/Table.vue";
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
import ContentRow from "~/components/ui/table/ContentRow.vue";
import type {RoleAssignment} from "~/role-assignment/RoleAssignment";
import type {Role} from "~/role/Role";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import UserRoleAssignment from "~/user/UserRoleAssignment.vue";
const props = defineProps<{
roleAssignments: RoleAssignment
}>()
function unassign(role: Role)
{
const callback = (role: Role) => {
props.roleAssignments.unassigned.push(role);
const index = props.roleAssignments.assigned.findIndex(item => item.name === role.name);
if (index >= 0)
{
props.roleAssignments.assigned.splice(index, 1);
}
}
const realmKey = useRoute().params.realm_key;
const userId = useRoute().params.user_id;
usePut<any, { unassign: string[] }>("/api/realms/" + realmKey + "/users/" + userId + "/role-assignments", { unassign: [role.name] }, () => {
callback(role);
});
}
function assignRoles(unassignedRoles: Role[])
{
const callback = (role: Role) => {
props.roleAssignments.assigned.push(role);
const index = props.roleAssignments.unassigned.findIndex(item => item.name === role.name);
if (index >= 0)
{
props.roleAssignments.unassigned.splice(index, 1);
}
}
usePopup().open(Popup.component<Role[]>(UserRoleAssignment).setPayload(unassignedRoles).setConfig({ heading: 'Assign Roles', size: PopupSize.MEDIUM, callback: callback }));
}
</script>
<style scoped>
</style>

4
app/utils/HttpUtils.ts
View File

@ -5,7 +5,7 @@ export class PostRequestState
loading?: boolean = true;
}
export function usePost<R>(path: string, body?: any, onSuccess?: (response: R) => void, onError?: () => {})
export function usePost<R, P>(path: string, body?: P, onSuccess?: (response: R) => void, onError?: () => {})
{
const state = ref(new PostRequestState());
axios.post<R>(path, body)
@ -82,7 +82,7 @@ export class PutRequestState
loading?: boolean = true;
}
export function usePut<R>(path: string, body?: any, onSuccess?: (response: R) => void, onError?: () => {})
export function usePut<R, P>(path: string, body?: P, onSuccess?: (response: R) => void, onError?: () => {})
{
const state = ref(new PutRequestState());
axios.put<R>(path, body)

2
server/routes/api/[...path].ts
View File

@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
event.headers.delete("host");
event.headers.delete("origin");
event.headers.set("authorization", credentials)
event.headers.set("authorization", credentials);
return sendProxy(event, process.env.NUXT_PUBLIC_BASE_URL + event.path, {
fetchOptions: {