🎉 Init

.gitignore

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

README.md

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

app/app.vue

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

app/assets/base-style.css

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

app/assets/style.css

@@ -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;
+}

app/client/AllowedGrantsInput.vue

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

app/client/Client.ts

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

app/client/ClientAdd.vue

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

app/client/ClientDelete.vue

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

app/client/ClientEdit.vue

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

app/client/Grant.ts

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

app/components/Sidebar.vue

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

app/components/ui/UiButton.vue

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

app/components/ui/UiCheckbox.vue

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

app/components/ui/UiIcon.vue

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

app/components/ui/UiInput.vue

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

app/components/ui/UiWarning.vue

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

app/components/ui/popup/Popup.ts

@@ -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";
+    }
+}

app/components/ui/popup/PopupSlot.vue

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

app/components/ui/table/ContentCell.vue

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

app/components/ui/table/ContentRow.vue

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

app/components/ui/table/HeaderCell.vue

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

app/components/ui/table/HeaderRow.vue

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

app/components/ui/table/Table.vue

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

app/pages/app.vue

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

app/pages/index.vue

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

app/pages/realms/[realm_key].vue

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

app/pages/realms/[realm_key]/clients.vue

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

app/pages/realms/[realm_key]/home.vue

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

app/pages/realms/[realm_key]/index.vue

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

app/pages/realms/[realm_key]/keys.vue

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

app/pages/realms/[realm_key]/roles.vue

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

app/pages/realms/[realm_key]/users/[user_id].vue

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

app/pages/realms/[realm_key]/users/index.vue

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

app/realm/Realm.ts

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

app/role/Role.ts

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

app/role/RoleAdd.vue

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

app/role/RoleDelete.vue

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

app/user/User.ts

@@ -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;
+}

app/user/UserAdd.vue

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

app/user/UserDelete.vue

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

app/user/UserEdit.vue

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

app/utils/HttpUtils.ts

@@ -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;
+}

nuxt.config.ts

@@ -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' }
+            ]
+        }
+    },
+})

package.json

@@ -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"
+  }
+}

public/robots.txt

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

server/routes/api/[...path].ts

@@ -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')
+                }
+            }
+        });
+    }
+})

tsconfig.json

@@ -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"
+    }
+  ]
+}