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

🎉 Init

Browse Source
This commit is contained in:
Andreas Dinauer 2026-03-22 09:09:04 +01:00
commit 973aafe5fd
50 changed files with 12038 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist
# Node dependencies
node_modules
# Logs
logs
*.log
# Misc
.DS_Store
.fleet
.idea
# Local env files
.env
.env.*
!.env.example

75
README.md Normal file
View File

@ -0,0 +1,75 @@
# Nuxt Minimal Starter
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

28
app/app.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div id="app" v-if="realms.data">
<Sidebar :realms="realms.data"></Sidebar>
<div id="page">
<NuxtPage></NuxtPage>
</div>
<PopupSlot></PopupSlot>
</div>
</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';
const realms = useGet<Realm[]>("/api/realms");
</script>
<style scoped>
#app {
display: grid;
grid-template-columns: auto 1fr;
}
#page {
padding: 1rem;
}
</style>

253
app/assets/base-style.css Normal file
View File

@ -0,0 +1,253 @@
.center {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.left-center {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
}
.right-center {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
.stretch-center {
display: flex;
align-items: center;
justify-content: stretch;
gap: 0.5rem;
}
.left-top {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5rem;
}
.center-top {
display: flex;
align-items: flex-start;
justify-content: center;
}
.center-bottom {
display: flex;
align-items: flex-end;
justify-content: center;
}
.top-center {
display: flex;
align-items: center;
justify-content: flex-start;
}
.spaced-top {
display: flex;
align-items: start;
justify-content: space-between;
}
.spaced-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.pointer {
cursor: pointer;
}
.expand {
height: 100%;
width: 100%;
}
.content, *[class^='content-'], *[class*=' content-'] {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
align-items: stretch;
}
.content .full {
width: 100%;
}
.content-s {
gap: 0.25rem;
}
.content-m {
gap: 0.5rem;
}
.content-l {
gap: 1rem;
}
.content-xl {
display: grid;
gap: 2rem;
}
.content-2xl {
gap: 3rem;
}
.content-3xl {
gap: 4rem;
}
.padding-m {
padding: 0.5rem;
}
.padding-l {
padding: 1rem;
}
.padding-xl {
padding: 2rem;
}
.narrow {
width: min(100%, 1340px);
padding: 0 0.5rem;
}
.narrow.s {
width: min(100%, 320px);
}
.narrow.m {
width: min(100%, 540px);
}
.narrow-b {
width: min(100%, 740px);
}
.tile, *[class^='tile-'], *[class*=' tile-'] {
background-color: var(--background-color);
border-radius: 0.25rem;
overflow: hidden;
width: 100%;
border: 1px solid #dfdfdf;
}
.tile-s {
padding: 0.25rem;
}
.tile-m {
padding: 0.5rem;
}
.tile-l {
padding: 1rem;
}
.tile-xl {
padding: 2rem;
}
.col-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.col-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.col-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.col-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.grayed-out {
color: #777777;
font-size: 0.85rem;
}
.row_auto-1fr {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
.height_100 {
height: 100%;
}
.gap-0 {
gap: 0;
}
.gap-m {
gap: 0.5rem;
}
.gap-l {
gap: 1rem;
}
.column {
flex-direction: column;
}
@media (max-width: 768px) {
.col-1-m {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.col-2-m {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.col-3-m {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.center-m {
display: flex;
justify-content: center;
align-items: center;
}
}
.full_20rem {
display: grid;
grid-template-columns: 1fr 20rem;
gap: 1rem;
}
.base-shape {
height: 2.25rem;
padding: 0.5rem;
}
.width-6rem {
width: 6rem;
}
.nowrap {
white-space: nowrap
}

24
app/assets/style.css Normal file
View File

@ -0,0 +1,24 @@
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
* {
padding: 0;
margin: 0;
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 550;
color: black;
text-decoration: none;
--background-color: #eaeaea;
box-sizing: border-box;
}
html, body, #__nuxt {
width: 100vw;
height: 100vh;
}
#app {
min-height: 100%;
width: 100vw;
}

33
app/client/AllowedGrantsInput.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="col-3" v-if="model">
<UiCheckbox :checked="model.includes(Grant.CLIENT_CREDENTIALS)" @click="toggle(Grant.CLIENT_CREDENTIALS)">Client Credentials</UiCheckbox>
<UiCheckbox :checked="model.includes(Grant.AUTHORIZATION)" @click="toggle(Grant.AUTHORIZATION)">Authorization Code</UiCheckbox>
<UiCheckbox :checked="model.includes(Grant.PASSWORD)" @click="toggle(Grant.PASSWORD)">Password</UiCheckbox>
</div>
</template>
<script setup lang="ts">
import {Grant} from "~/client/Grant";
const model = defineModel<Grant[]>();
function toggle(grant: Grant)
{
if (model.value != null)
{
const index = model.value.findIndex(item => item === grant);
if (index !== -1)
{
model.value.splice(index, 1);
}
else
{
model.value.push(grant);
}
}
}
</script>
<style scoped>
</style>

21
app/client/Client.ts Normal file
View File

@ -0,0 +1,21 @@
import type {Grant} from "~/client/Grant";
export class Client
{
constructor(
public id: string,
public name: string,
public redirectURI: string,
public allowedGrants: Grant[]
)
{
}
}
export class ClientCreation
{
name?: string;
secret?: string;
redirectURI?: string;
public allowedGrants: Grant[] = [];
}

44
app/client/ClientAdd.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<form class="content-l" @submit.prevent="addClient">
<UiInput label="Name" required>
<input type="text" v-model="client.name" required>
</UiInput>
<UiInput label="Secret">
<input type="text" v-model="client.secret">
</UiInput>
<UiInput label="Redirect URI">
<input type="url" v-model="client.redirectURI">
</UiInput>
<UiInput label="Allowed Grants">
<AllowedGrantsInput v-model="client.allowedGrants"></AllowedGrantsInput>
</UiInput>
<div class="center">
<UiButton type="submit">Create</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import AllowedGrantsInput from "~/client/AllowedGrantsInput.vue";
import {Client, ClientCreation} from "~/client/Client";
import {usePopup} from "~/components/ui/popup/Popup";
const client = ref(new ClientCreation());
function addClient()
{
console.log(client.value);
usePost<Client>("/api/realms/" + useRoute().params.realm_key + "/clients", client.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{
callback(response);
usePopup().close();
}
});
}
</script>
<style scoped>
</style>

34
app/client/ClientDelete.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<form class="content-l" v-if="popup.payload" @submit.prevent="deleteClient(popup.payload)">
<UiWarning><p>Are you sure you want to delete client <span>{{ popup.payload.name }}</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 {Client} from "~/client/Client";
import {useDelete} from "~/utils/HttpUtils";
import UiWarning from "~/components/ui/UiWarning.vue";
const popup = usePopup().require<Client>();
function deleteClient(client: Client)
{
useDelete("/api/realms/" + useRoute().params.realm_key + "/clients/" + client.name, () => {
if (popup.config?.callback)
{
popup.config.callback();
}
usePopup().close();
})
}
</script>
<style scoped>
span {
font-weight: bold;
}
</style>

37
app/client/ClientEdit.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<form class="content-l" v-if="client" @submit.prevent="editClient(client)">
<UiInput label="Name" required>
<input type="text" v-model="client.name" required>
</UiInput>
<UiInput label="Redirect URI">
<input type="url" v-model="client.redirectURI">
</UiInput>
<UiInput label="Allowed Grants">
<AllowedGrantsInput v-model="client.allowedGrants"></AllowedGrantsInput>
</UiInput>
<div class="center">
<UiButton type="submit">Update</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import AllowedGrantsInput from "~/client/AllowedGrantsInput.vue";
import {Client} from "~/client/Client";
import {usePopup} from "~/components/ui/popup/Popup";
const client = ref(structuredClone(toRaw(usePopup().require<Client>().payload)));
const originalName = client.value?.name;
function editClient(client: Client)
{
usePut("/api/realms/" + useRoute().params.realm_key + '/clients/' + originalName, client, (client: Client) => {
usePopup().callback(client);
usePopup().close();
});
}
</script>
<style scoped>
</style>

6
app/client/Grant.ts Normal file
View File

@ -0,0 +1,6 @@
export enum Grant
{
CLIENT_CREDENTIALS = "CLIENT_CREDENTIALS",
AUTHORIZATION = "AUTHORIZATION",
PASSWORD = "PASSWORD"
}

38
app/components/Sidebar.vue Normal file
View File

@ -0,0 +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>
</div>
</template>
<script setup lang="ts">
import type {Realm} from "~/realm/Realm";
defineProps<{
realms: Realm[]
}>()
</script>
<style scoped>
.sidebar {
display: grid;
grid-template-columns: 1fr;
padding: 1rem 2rem;
background-color: #f1f1f1;
align-content: flex-start;
border-right: 1px solid #dfdfdf;
}
.sidebar-link {
padding: 0.5rem;
border-radius: 0.25rem;
}
.sidebar-link.router-link-active {
background-color: #000000;
color: white;
}
</style>

44
app/components/ui/UiButton.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<button @click="() => click()" class="base-shape button pointer center" :class="{ loading: loading, reverse: reverse, disabled: disabled }"><slot></slot><UiIcon v-if="icon">{{icon}}</UiIcon></button>
</template>
<script setup lang="ts">
function click() {
if(!props.disabled) {
if(props.onclick != null) {
props.onclick()
}
if(props.to != null) {
useRouter().push(props.to);
}
}
}
const props = defineProps<{
icon?: string,
reverse?: boolean,
loading?: boolean | undefined,
disabled?: boolean,
onclick?: () => void
to?: string
}>();
</script>
<style>
.button {
background-color: black;
color: white;
border: none;
outline: none;
gap: 0.5rem;
white-space: nowrap;
border-radius: 0.25rem;
padding: 0.5rem;
font-weight: 500;
font-size: 1rem;
}
.button * {
color: white;
fill: white;
}
</style>

31
app/components/ui/UiCheckbox.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="left-center checkbox-wrapper">
<div class="checkbox" :class="{ checked: checked }"><UiIcon v-if="checked" class="check">check</UiIcon></div>
<label><slot></slot></label>
</div>
</template>
<script setup lang="ts">
defineProps<{
checked: boolean
}>()
</script>
<style scoped>
.checkbox-wrapper {
cursor: pointer;
user-select: none;
}
.checkbox {
width: 1.5rem;
height: 1.5rem;
border: 2px solid black;
border-radius: 0.25rem;
}
.checkbox.checked {
background-color: black;
}
.check {
color: white;
}
</style>

14
app/components/ui/UiIcon.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<span class="material-symbols-outlined"><slot></slot></span>
</template>
<style scoped>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
font-size: 1.25rem;
}
</style>

52
app/components/ui/UiInput.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="field">
<div class="left-center">
<label v-if="label">{{ label }} <span class="required" v-if="required">*</span></label>
<slot name="label"></slot>
</div>
<slot></slot>
</div>
</template>
<script setup lang="ts">
defineProps<{
label?: string,
required?: boolean
}>();
</script>
<style scoped>
.field {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
</style>
<style>
.field input, .field .input, .field textarea, .field select {
min-height: 2.5rem;
border-radius: 0.25rem;
background-color: rgb(255, 255, 255);
width: 100%;
border: 2px solid #444444;
outline: none;
padding: 0.25rem;
font-size: 1rem;
}
.field textarea {
min-height: 5rem;
padding: 0.25rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
border-color: #000000;
}
.required {
color: #e63515;
font-weight: bold;
}
.field input:disabled, textarea:disabled, select:disabled {
border: 2px solid #7a7a7a;
background-color: #f1f1f1;
}
</style>

19
app/components/ui/UiWarning.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="left-center ui-warning">
<UiIcon style="color: red">warning</UiIcon>
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ui-warning {
background-color: #ffeadf;
border: 1px solid #ff9c80;
padding: 0.5rem;
border-radius: 0.25rem;
}
</style>

99
app/components/ui/popup/Popup.ts Normal file
View File

@ -0,0 +1,99 @@
export class Popup<P>
{
component?: Component
payload?: P;
config?: PopupConfig
public static component<P>(component: Component): Popup<P>
{
const popup: Popup<P> = new Popup<P>();
popup.component = component;
return popup;
}
public setPayload(payload: P)
{
this.payload = payload;
return this;
}
public setConfig(config: PopupConfig)
{
this.config = config;
return this;
}
}
export interface PopupConfig
{
heading: string;
size: PopupSize;
closeOnOverlayClick?: boolean;
callback?: (payload?: any) => void;
}
export enum PopupSize
{
SMALL = "small", MEDIUM = "medium", LARGE = "large", FULL = "full"
}
export const usePopup = defineStore('popup', {
state: () => ({
popup: shallowRef<Popup<any> | undefined>(undefined)
}),
getters: {
get: (state) => {
return <P>(): Popup<P> | undefined => {
if (state.popup)
{
return state.popup as Popup<P>;
}
return undefined;
}
},
require: (state) => {
return <P>() => {
if (state.popup)
{
return state.popup as Popup<P>;
}
throw new Error('Expected to be in open popup state.');
}
}
},
actions: {
open<P>(popup: Popup<P>) {
this.popup = popup;
disableScrolling();
},
callback(payload?: any) {
if (this.popup?.config?.callback)
{
this.popup.config.callback(payload);
}
},
close() {
this.popup = undefined;
enableScrolling();
}
}
})
function disableScrolling()
{
const body = document.getElementsByTagName('body');
for(const element of body)
{
element.style.overflow = "hidden";
}
}
function enableScrolling()
{
const body = document.getElementsByTagName('body');
for(const element of body)
{
element.style.overflow = "visible";
}
}

88
app/components/ui/popup/PopupSlot.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="overlay center" @click="closeOutside" v-if="popup">
<div class="popup" :class="popup.config.size" @click.stop>
<div class="popup__header">
<h2>{{ popup.config.heading }}</h2>
<UiButton icon="close" @click="usePopup().close()" class="square"></UiButton>
</div>
<div class="popup__body">
<component :is="popup.component"></component>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {usePopup} from "~/components/ui/popup/Popup";
const popup = computed(() => usePopup().get());
function closeOutside()
{
if (popup.value?.config.closeOnOverlayClick)
{
usePopup().close();
}
}
onMounted(() => {
document.addEventListener('keydown', (event) => {
if(event.key === 'Escape')
{
usePopup().close();
}
});
})
</script>
<style scoped>
.overlay {
background-color: rgba(54, 54, 54, 0.514);
backdrop-filter: blur(0.1rem);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem;
z-index: 2;
}
.popup {
display: grid;
grid-template-rows: auto 1fr;
align-content: flex-start;
width: 100%;
height: 100%;
padding: 1rem;
background-color: rgb(255, 255, 255);
border-radius: 0.5rem;
}
.popup__header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.popup__body {
height: 100%;
overflow: hidden;
}
.small {
height: auto;
width: 540px;
}
.medium {
height: auto;
width: 740px;
}
.large {
height: auto;
width: 1340px;
}
.full {
height: auto;
width: 100%;
}
</style>

17
app/components/ui/table/ContentCell.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="cell left-center">
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.cell {
padding: 0.75rem 1rem;
text-wrap: nowrap;
overflow-y: scroll;
}
</style>

24
app/components/ui/table/ContentRow.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="content-row display-contents">
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.display-contents {
display: contents;
}
.content-row > * {
border-bottom: 1px solid #c1c1c1;
}
.content-row:hover > * {
background-color: #f6f6f6;
}
.content-row:last-of-type * {
border-bottom: 0;
}
</style>

20
app/components/ui/table/HeaderCell.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="header">
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.header {
border-bottom: 1px solid #c1c1c1;
padding: 0.75rem 1rem;
background-color: #efefef;
}
.header, .header * {
font-weight: 600;
}
</style>

15
app/components/ui/table/HeaderRow.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="display-contents">
<slot></slot>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.display-contents {
display: contents;
}
</style>

36
app/components/ui/table/Table.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="table">
<slot></slot>
<div class="footer center" v-if="showFooter">
<slot name="footer"></slot>
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
columns: string,
showFooter?: boolean
}>()
</script>
<style scoped>
.table {
display: grid;
grid-template-columns: v-bind(columns);
border: 1px solid #c1c1c1;
border-radius: 0.5rem;
overflow: hidden;
}
.header * {
font-weight: 600;
}
.artifact-list .artifact:last-of-type * {
border-bottom: 0;
}
.footer {
width: 100%;
grid-column: 1 / -1;
padding: 0.5rem;
}
</style>

11
app/pages/app.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

11
app/pages/index.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

41
app/pages/realms/[realm_key].vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="realm-page">
<div class="top-bar">
<NuxtLink class="link" v-for="route in ['/realms/' + realmKey + '/home']" :to="route" :class="{ active: useRoute().path.startsWith(route) }">Realm</NuxtLink>
<NuxtLink class="link" v-for="route in ['/realms/' + realmKey + '/clients']" :to="route" :class="{ active: useRoute().path.startsWith(route) }">Clients</NuxtLink>
<NuxtLink class="link" v-for="route in ['/realms/' + realmKey + '/users']" :to="route" :class="{ active: useRoute().path.startsWith(route) }">Users</NuxtLink>
<NuxtLink class="link" v-for="route in ['/realms/' + realmKey + '/roles']" :to="route" :class="{ active: useRoute().path.startsWith(route) }">Roles</NuxtLink>
<NuxtLink class="link" v-for="route in ['/realms/' + realmKey + '/keys']" :to="route" :class="{ active: useRoute().path.startsWith(route) }">Keys</NuxtLink>
</div>
<NuxtPage></NuxtPage>
</div>
</template>
<script setup lang="ts">
const realmKey = useRoute().params.realm_key;
</script>
<style scoped>
.realm-page {
display: grid;
grid-template-rows: auto 1fr;
gap: 1rem;
}
.top-bar {
background-color: #eaeaea;
border-radius: 0.25rem;
padding: 0.5rem;
display: flex;
gap: 0.5rem;
border: 1px solid #dfdfdf;
}
.link {
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
.link.active {
background-color: #000000;
color: white;
}
</style>

87
app/pages/realms/[realm_key]/clients.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="content-l">
<Table columns="auto auto auto 1fr auto" :show-footer="clients.data.length === 0" v-if="clients.loading === false && clients.data">
<HeaderRow>
<HeaderCell>Client ID</HeaderCell>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Redirect URI</HeaderCell>
<HeaderCell>Grants</HeaderCell>
<HeaderCell></HeaderCell>
</HeaderRow>
<ContentRow v-for="client in clients.data">
<ContentCell>{{ client.id }}</ContentCell>
<ContentCell>{{ client.name }}</ContentCell>
<ContentCell>{{ client.redirectURI }}</ContentCell>
<ContentCell><p v-if="client.allowedGrants">{{ client.allowedGrants.join(", ") }}</p></ContentCell>
<ContentCell style="padding: 0.25rem;">
<UiButton @click="editClient(client)"><UiIcon>edit</UiIcon></UiButton>
<UiButton @click="deleteClient(client)"><UiIcon>delete</UiIcon></UiButton>
</ContentCell>
</ContentRow>
<template #footer>
<p>No clients found.</p>
</template>
</Table>
<div>
<UiButton @click="addClient">Create</UiButton>
</div>
</div>
</template>
<script setup lang="ts">
import {Client} from "~/client/Client"
import Table from "~/components/ui/table/Table.vue";
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 {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import ClientAdd from "~/client/ClientAdd.vue";
import ClientDelete from "~/client/ClientDelete.vue";
import ClientEdit from "~/client/ClientEdit.vue";
const realmKey = useRoute().params.realm_key;
const clients = useGet<Client[]>('/api/realms/' + realmKey + '/clients');
function addClient()
{
const callback = (client: Client) => {
if (clients.value.data)
{
clients.value.data.push(client);
}
};
usePopup().open(Popup.component<Client>(ClientAdd).setConfig({ heading: 'Add Client', size: PopupSize.MEDIUM, callback: callback }));
}
function editClient(client: Client)
{
const callback = (_client: Client) => {
if (clients.value.data)
{
const index = clients.value.data.findIndex(c => c.name === client.name);
if (index !== -1)
{
clients.value.data[index] = _client;
}
}
}
usePopup().open(Popup.component<Client>(ClientEdit).setConfig({ heading: 'Edit Client', size: PopupSize.MEDIUM, callback: callback }).setPayload(client));
}
function deleteClient(client: Client)
{
const callback = () => {
if (clients.value.data)
{
clients.value.data = clients.value.data.filter(c => c !== client);
}
}
usePopup().open(Popup.component<Client>(ClientDelete).setPayload(client).setConfig({ heading: 'Delete Client', size: PopupSize.MEDIUM, callback: callback }));
}
</script>
<style scoped>
</style>

24
app/pages/realms/[realm_key]/home.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div>
<Table columns="1fr">
<HeaderRow>
<HeaderCell>Client ID</HeaderCell>
</HeaderRow>
<ContentRow>
</ContentRow>
</Table>
</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";
</script>
<style scoped>
</style>

3
app/pages/realms/[realm_key]/index.vue Normal file
View File

@ -0,0 +1,3 @@
<script setup lang="ts">
useRouter().push('/realms/' + useRoute().params.realm_key + '/home');
</script>

34
app/pages/realms/[realm_key]/keys.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div>
<Table columns="auto auto auto 1fr" v-if="keys.data">
<HeaderRow>
<HeaderCell>ID</HeaderCell>
<HeaderCell>Key Type</HeaderCell>
<HeaderCell>Algorithm</HeaderCell>
<HeaderCell>Use</HeaderCell>
</HeaderRow>
<ContentRow>
<ContentCell v-for="key in keys.data.keys">{{ key.kid }}</ContentCell>
<ContentCell v-for="key in keys.data.keys">{{ key.kty }}</ContentCell>
<ContentCell v-for="key in keys.data.keys">{{ key.alg }}</ContentCell>
<ContentCell v-for="key in keys.data.keys">{{ key.use }}</ContentCell>
</ContentRow>
</Table>
</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";
const realmKey = useRoute().params.realm_key;
const keys = useGet<any>('/api/realms/' + realmKey + '/protocol/openid-connect/certs');
</script>
<style scoped>
</style>

54
app/pages/realms/[realm_key]/roles.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="content-l">
<Table columns="1fr auto">
<HeaderRow>
<HeaderCell>Name</HeaderCell>
<HeaderCell></HeaderCell>
</HeaderRow>
<ContentRow v-for="role in roles.data">
<ContentCell>{{ role.name }}</ContentCell>
<ContentCell style="padding: 0.25rem;">
<UiButton><UiIcon>edit</UiIcon></UiButton>
<UiButton @click="deleteRole(role)"><UiIcon>delete</UiIcon></UiButton>
</ContentCell>
</ContentRow>
</Table>
<div>
<UiButton @click="addRole">Create</UiButton>
</div>
</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 ContentRow from "~/components/ui/table/ContentRow.vue";
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import RoleAdd from "~/role/RoleAdd.vue";
import type {Role} from "~/role/Role";
import ContentCell from "~/components/ui/table/ContentCell.vue";
import RoleDelete from "~/role/RoleDelete.vue";
const roles = useGet<Role[]>("/api/realms/" + useRoute().params.realm_key + "/roles");
function addRole()
{
const callback = (role: Role) => {
if (roles.value.data)
{
roles.value.data.push(role);
}
}
usePopup().open(Popup.component(RoleAdd).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM, callback: callback }))
}
function deleteRole(role: Role)
{
usePopup().open(Popup.component<Role>(RoleDelete).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM }).setPayload(role))
}
</script>
<style scoped>
</style>

31
app/pages/realms/[realm_key]/users/[user_id].vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="content-l" v-if="user.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">
<h3>E-Mail</h3>
<p>{{user.data.email}}</p>
</div>
<div class="tile-m">
<h3>Name</h3>
<p>{{user.data.firstname}} {{user.data.lastname}}</p>
</div>
</div>
<div class="left-center">
<UiButton icon="edit" reverse>Edit</UiButton>
<UiButton icon="delete" reverse>Delete</UiButton>
</div>
</div>
</template>
<script setup lang="ts">
import type {User} from "~/user/User";
const user = useGet<User>("/api/realms/" + useRoute().params.realm_key + "/users/" + useRoute().params.user_id);
</script>
<style scoped>
.link {
border-bottom: 1px solid black;
}
</style>

70
app/pages/realms/[realm_key]/users/index.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="content-l">
<Table columns="auto auto 1fr auto" :show-footer="users.data.length === 0" v-if="users.loading === false && users.data">
<HeaderRow>
<HeaderCell>E-Mail</HeaderCell>
<HeaderCell>First Name</HeaderCell>
<HeaderCell>Last Name</HeaderCell>
<HeaderCell></HeaderCell>
</HeaderRow>
<ContentRow v-for="user in users.data" @click="useRouter().push('/realms/' + useRoute().params.realm_key + '/users/' + user.id)">
<ContentCell>{{ user.email }}</ContentCell>
<ContentCell>{{ user.firstname }}</ContentCell>
<ContentCell>{{ user.lastname }}</ContentCell>
<ContentCell style="padding: 0.25rem;">
<UiButton><UiIcon>edit</UiIcon></UiButton>
<UiButton @click.stop="deleteUser(user)"><UiIcon>delete</UiIcon></UiButton>
</ContentCell>
</ContentRow>
<template #footer>
<p>No users found.</p>
</template>
</Table>
<div>
<UiButton @click="addUser">Create</UiButton>
</div>
</div>
</template>
<script setup lang="ts">
import Table from "~/components/ui/table/Table.vue";
import {useGet} from "~/utils/HttpUtils";
import {User} from "~/user/User"
import HeaderRow from "~/components/ui/table/HeaderRow.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 {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
import UserDelete from "~/user/UserDelete.vue"
import UserAdd from "~/user/UserAdd.vue";
const realmKey = useRoute().params.realm_key;
const users = useGet<User[]>('/api/realms/' + realmKey + '/users');
function addUser()
{
const callback = (user: User) => {
if (users.value.data)
{
users.value.data.push(user);
}
};
usePopup().open(Popup.component<User>(UserAdd).setConfig({ heading: 'Add User', size: PopupSize.MEDIUM, callback: callback }));
}
function deleteUser(user: User)
{
const callback = () => {
if (users.value.data)
{
users.value.data = users.value.data.filter(u => u !== user);
}
}
usePopup().open(Popup.component<User>(UserDelete).setPayload(user).setConfig({ heading: 'Delete User', size: PopupSize.MEDIUM, callback: callback }));
}
</script>
<style scoped>
</style>

9
app/realm/Realm.ts Normal file
View File

@ -0,0 +1,9 @@
export class Realm
{
constructor(
public key: string,
public name: string
)
{
}
}

12
app/role/Role.ts Normal file
View File

@ -0,0 +1,12 @@
export class Role
{
constructor (
public id: string,
public name: string
) {}
}
export class RoleCreation
{
name?: string
}

28
app/role/RoleAdd.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<form @submit.prevent="addRole">
<UiInput label="Name">
<input type="text" v-model="role.name">
</UiInput>
<UiButton type="submit">Create</UiButton>
</form>
</template>
<script setup lang="ts">
import {type Role, RoleCreation} from "~/role/Role";
import {usePopup} from "~/components/ui/popup/Popup";
import {usePost} from '~/utils/HttpUtils';
const role = ref(new RoleCreation());
function addRole()
{
usePost<Role>("/api/realms/" + useRoute().params.realm_key + "/roles", role.value, (role: Role) => {
usePopup().callback(role);
usePopup().close();
});
}
</script>
<style scoped>
</style>

17
app/role/RoleDelete.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div v-if="popup.payload">
<UiWarning><p>Are you sure you want to delete role <span>{{ popup.payload.name }}</span>?</p></UiWarning>
</div>
</template>
<script setup lang="ts">
import {usePopup} from "~/components/ui/popup/Popup";
import UiWarning from "~/components/ui/UiWarning.vue";
import type {Role} from "~/role/Role";
const popup = usePopup().require<Role>();
</script>
<style scoped>
</style>

19
app/user/User.ts Normal file
View File

@ -0,0 +1,19 @@
export class User
{
constructor(
public id: string,
public email: string,
public firstname: string,
public lastname: string
)
{
}
}
export class UserCreation
{
email?: string;
firstname?: string;
lastname?: string;
password?: string;
}

44
app/user/UserAdd.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<form class="content-l" @submit.prevent="addUser">
<UiInput label="E-Mail" required>
<input type="email" v-model="user.email" required>
</UiInput>
<div class="col-2">
<UiInput label="First Name" required>
<input type="text" v-model="user.firstname" required>
</UiInput>
<UiInput label="Last Name" required>
<input type="text" v-model="user.lastname" required>
</UiInput>
</div>
<UiInput label="Password" required>
<input type="password" v-model="user.password" required>
</UiInput>
<div class="center">
<UiButton type="submit">Create</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import {User, UserCreation} from "~/user/User";
import {usePopup} from "~/components/ui/popup/Popup";
const user = ref(new UserCreation());
function addUser()
{
usePost<User>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{
callback(response);
usePopup().close();
}
});
}
</script>
<style scoped>
</style>

34
app/user/UserDelete.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<form class="content-l" v-if="popup.payload" @submit.prevent="deleteUser(popup.payload)">
<UiWarning><p>Are you sure you want to delete user <span>{{ popup.payload.email }}</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";
const popup = usePopup().require<User>();
function deleteUser(user: User)
{
useDelete("/api/realms/" + useRoute().params.realm_key + "/users/" + user.id, () => {
if (popup.config?.callback)
{
popup.config.callback();
}
usePopup().close();
})
}
</script>
<style scoped>
span {
font-weight: bold;
}
</style>

44
app/user/UserEdit.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<form class="content-l" @submit.prevent="addUser">
<UiInput label="E-Mail" required>
<input type="email" v-model="user.email" required>
</UiInput>
<div class="col-2">
<UiInput label="First Name" required>
<input type="text" v-model="user.firstname" required>
</UiInput>
<UiInput label="Last Name" required>
<input type="text" v-model="user.lastname" required>
</UiInput>
</div>
<UiInput label="Password" required>
<input type="password" v-model="user.password" required>
</UiInput>
<div class="center">
<UiButton type="submit">Update</UiButton>
</div>
</form>
</template>
<script setup lang="ts">
import {User, UserCreation} from "~/user/User";
import {usePopup} from "~/components/ui/popup/Popup";
const user = ref(new UserCreation());
function addUser()
{
usePost<User>("/api/realms/" + useRoute().params.realm_key + "/users", user.value, (response) => {
const callback = usePopup().get()?.config?.callback;
if (callback)
{
callback(response);
usePopup().close();
}
});
}
</script>
<style scoped>
</style>

104
app/utils/HttpUtils.ts Normal file
View File

@ -0,0 +1,104 @@
import axios, {AxiosError} from "axios";
export class PostRequestState
{
loading?: boolean = true;
}
export function usePost<R>(path: string, body?: any, onSuccess?: (response: R) => void, onError?: () => {})
{
const state = ref(new PostRequestState());
axios.post<R>(path, body)
.then((response) => {
console.log("jfdsl");
if (onSuccess)
{
onSuccess(response.data);
}
state.value.loading = false;
})
.catch(() => {
if (onError)
{
onError();
}
state.value.loading = false;
});
return state;
}
export class GetRequestState<R>
{
constructor(
public loading: boolean,
public data?: R,
public error?: AxiosError
) {}
}
export function useGet<R>(path: string)
{
const state = ref(new GetRequestState<R>(true, undefined, undefined));
axios.get<R>(path)
.then((response) => {
state.value = new GetRequestState<R>(false, response.data, undefined);
})
.catch((error) => {
state.value = new GetRequestState<R>(false, undefined, error);
});
return state;
}
export class DeleteRequestState
{
constructor(
public loading: boolean
) {}
}
export function useDelete<R>(path: string, onSuccess?: () => void, onError?: () => {})
{
const state = ref(new DeleteRequestState(true));
axios.delete(path)
.then(() => {
if (onSuccess)
{
onSuccess();
}
state.value = new DeleteRequestState(false);
})
.catch(() => {
if (onError)
{
onError();
}
state.value = new DeleteRequestState(false);
});
return state;
}
export class PutRequestState
{
loading?: boolean = true;
}
export function usePut<R>(path: string, body?: any, onSuccess?: (response: R) => void, onError?: () => {})
{
const state = ref(new PutRequestState());
axios.put<R>(path, body)
.then((response) => {
if (onSuccess)
{
onSuccess(response.data);
}
state.value.loading = false;
})
.catch(() => {
if (onError)
{
onError();
}
state.value.loading = false;
});
return state;
}

19
nuxt.config.ts Normal file
View File

@ -0,0 +1,19 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
css: [
'@/assets/style.css',
'@/assets/base-style.css'
],
modules: ['@pinia/nuxt'],
app: {
head: {
title: "Verifoo Dashboard",
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' },
{ rel: 'icon', type: 'image/x-icon', href: '/logo.ico' }
]
}
},
})

10211
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "frontend-admin",
"type": "module",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@pinia/nuxt": "^0.11.3",
"axios": "^1.13.6",
"nuxt": "^4.4.2",
"vue": "^3.5.30",
"vue-router": "^5.0.3"
},
"devDependencies": {
"@types/node": "^25.5.0"
}
}

BIN
public/logo.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-Agent: *
Disallow:

13
server/routes/api/[...path].ts Normal file
View File

@ -0,0 +1,13 @@
export default defineEventHandler(async (event) => {
if (process.env.NODE_ENV === 'development')
{
setHeader(event, "Authorization", "Basic " + Buffer.from("admin:pw").toString('base64'))
return proxyRequest(event, 'http://localhost:8089' + event.path, {
fetchOptions: {
headers: {
Authorization: "Basic " + Buffer.from("admin:pw").toString('base64')
}
}
});
}
})

18
tsconfig.json Normal file
View File

@ -0,0 +1,18 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"files": [],
"references": [
{
"path": "./.nuxt/tsconfig.app.json"
},
{
"path": "./.nuxt/tsconfig.server.json"
},
{
"path": "./.nuxt/tsconfig.shared.json"
},
{
"path": "./.nuxt/tsconfig.node.json"
}
]
}