From 7584c774bb10c812b652b822176fe08a4f63366d Mon Sep 17 00:00:00 2001
From: nhas <jordanatararimu@gmail.com>
Date: Thu, 21 Nov 2024 20:35:03 +1300
Subject: [PATCH] Add registration token functionality, remove unused vue pages

---
 adminui2/src/App.vue                          |   3 +-
 adminui2/src/api/registration_tokens.ts       |  13 +-
 adminui2/src/api/types.ts                     |   2 +-
 adminui2/src/components/ConfirmModal.vue      |   8 +-
 adminui2/src/layouts/default.vue              |   2 +-
 adminui2/src/pages/Agents.vue                 | 149 --------
 adminui2/src/pages/AttackTemplates.vue        | 148 --------
 .../src/pages/{admin => }/Configuration.vue   |   0
 adminui2/src/pages/HashSearch.vue             |  90 -----
 adminui2/src/pages/Listfiles.vue              | 189 ----------
 adminui2/src/pages/RegistrationTokens.vue     | 221 ++++++++++++
 adminui2/src/pages/{admin => }/Users.vue      |   0
 adminui2/src/pages/Utilisation.vue            |  56 ---
 adminui2/src/pages/Wizard.vue                 |  18 -
 adminui2/src/pages/admin/Agents.vue           | 330 ------------------
 adminui2/src/router/index.ts                  |   4 +-
 adminui2/src/stores/registration_tokens.ts    |   4 +-
 17 files changed, 241 insertions(+), 996 deletions(-)
 delete mode 100644 adminui2/src/pages/Agents.vue
 delete mode 100644 adminui2/src/pages/AttackTemplates.vue
 rename adminui2/src/pages/{admin => }/Configuration.vue (100%)
 delete mode 100644 adminui2/src/pages/HashSearch.vue
 delete mode 100644 adminui2/src/pages/Listfiles.vue
 create mode 100644 adminui2/src/pages/RegistrationTokens.vue
 rename adminui2/src/pages/{admin => }/Users.vue (100%)
 delete mode 100644 adminui2/src/pages/Utilisation.vue
 delete mode 100644 adminui2/src/pages/Wizard.vue
 delete mode 100644 adminui2/src/pages/admin/Agents.vue

diff --git a/adminui2/src/App.vue b/adminui2/src/App.vue
index ed2a4cd2..bb9c0d8e 100644
--- a/adminui2/src/App.vue
+++ b/adminui2/src/App.vue
@@ -13,7 +13,7 @@ const authStore = useAuthStore()
 const devicesStore = useDevicesStore()
 const usersStore = useUsersStore()
 
-const { hasCompletedAuth, hasTriedAuth, loggedInUser, isLoggedIn } = storeToRefs(authStore)
+const { hasCompletedAuth, hasTriedAuth, isLoggedIn } = storeToRefs(authStore)
 
 const toast = useToast()
 
@@ -29,7 +29,6 @@ onMounted(async () => {
 
 watch(hasCompletedAuth, (newHasCompletedAuth, prevHasCompletedAuth) => {
   if (newHasCompletedAuth && !prevHasCompletedAuth) {
-    toast.success(`Welcome ${loggedInUser.value?.username}`)
     devicesStore.load(true)
     usersStore.load(true)
   }
diff --git a/adminui2/src/api/registration_tokens.ts b/adminui2/src/api/registration_tokens.ts
index 11e02de8..be2dc726 100644
--- a/adminui2/src/api/registration_tokens.ts
+++ b/adminui2/src/api/registration_tokens.ts
@@ -1,7 +1,16 @@
-import type { RegistrationToken } from './types'
+import type { GenericResponseDTO, RegistrationTokenRequestDTO } from './types'
 
 import { client } from '.'
 
-export function getAllRegistrationTokens(): Promise<RegistrationToken[]> {
+export function getAllRegistrationTokens(): Promise<RegistrationTokenRequestDTO[]> {
   return client.get('/api/management/registration_tokens').then(res => res.data)
 }
+
+
+export function createRegistrationToken(token: RegistrationTokenRequestDTO): Promise<GenericResponseDTO> {
+  return client.post('/api/management/registration_tokens', token).then(res => res.data)
+}
+
+export function deleteRegistrationTokens(tokens: string[]): Promise<GenericResponseDTO> {
+  return client.delete('/api/management/registration_tokens', {data: tokens}).then(res => res.data)
+}
diff --git a/adminui2/src/api/types.ts b/adminui2/src/api/types.ts
index 1603600b..8df90b43 100644
--- a/adminui2/src/api/types.ts
+++ b/adminui2/src/api/types.ts
@@ -5,7 +5,7 @@ export interface RuleDTO {
   deny_routes: string[]
 }
 
-export interface RegistrationToken {
+export interface RegistrationTokenRequestDTO {
   token: string
   username: string
   groups: string[]
diff --git a/adminui2/src/components/ConfirmModal.vue b/adminui2/src/components/ConfirmModal.vue
index 0bf3e97a..7cda73ec 100644
--- a/adminui2/src/components/ConfirmModal.vue
+++ b/adminui2/src/components/ConfirmModal.vue
@@ -22,8 +22,8 @@ function confirm() {
   <div :class="isOpen ? 'modal modal-open' : 'modal'">
     <form method="dialog" class="remove-card-backgrounds modal-box text-left">
       <button @click="() => (isOpen = false)" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
-      <h2 class="my-4 text-xl font-bold">{{ title }}</h2>
-      <p>{{ body }}</p>
+      <h2 class="my-4 font-mono text-xl font-bold">{{ title }}</h2>
+      <p class="font-mono">{{ body }}</p>
 
       <div class="modal-action">
         <button class="btn m-1" @click="() => (isOpen = false)">Cancel</button>
@@ -44,10 +44,6 @@ function confirm() {
   max-width: 90vw;
   width: auto;
 }
-/* .modal::backdrop { */
-/* background-color: rgba(0, 0, 0, 0.3); */
-/* animation: modal-pop 0.2s ease-out; */
-/* } */
 </style>
 
 <style>
diff --git a/adminui2/src/layouts/default.vue b/adminui2/src/layouts/default.vue
index 12485b22..b413c6fc 100644
--- a/adminui2/src/layouts/default.vue
+++ b/adminui2/src/layouts/default.vue
@@ -30,7 +30,7 @@ const policyLinks = [
 ]
 
 const managementLinks = [
-  { name: 'Registration Tokens', icon: Icons.RegistrationKey, to: '/admin/general' },
+  { name: 'Registration Tokens', icon: Icons.RegistrationKey, to: '/management/registration_tokens' },
   { name: 'Users', icon: Icons.Groups, to: '/admin/users' },
   { name: 'Devices', icon: Icons.Device, to: '/admin/users' }
 ]
diff --git a/adminui2/src/pages/Agents.vue b/adminui2/src/pages/Agents.vue
deleted file mode 100644
index 9fbe4ca5..00000000
--- a/adminui2/src/pages/Agents.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useToast } from 'vue-toastification'
-
-import EmptyTable from '@/components/EmptyTable.vue'
-
-import { adminAgentSetMaintenance } from '@/api/admin'
-import type { AgentDTO } from '@/api/types'
-
-import { useToastError } from '@/composables/useToastError'
-
-import { useAuthStore } from '@/stores/auth'
-import { useAgentsStore } from '@/stores/rules'
-
-import { Icons } from '@/util/icons'
-import { formatDeviceName } from '@/util/formatDeviceName'
-
-const AgentStatusHealthy = 'AgentStatusHealthy'
-const AgentStatusUnhealthyButConnected = 'AgentStatusUnhealthyButConnected'
-const AgentStatusUnhealthyAndDisconnected = 'AgentStatusUnhealthyAndDisconnected'
-// const AgentStatusDead = 'AgentStatusDead'
-
-const agentsStore = useAgentsStore()
-const { agents: allAgents } = storeToRefs(agentsStore)
-agentsStore.load(true)
-
-const authStore = useAuthStore()
-const { isAdmin } = storeToRefs(authStore)
-
-const toast = useToast()
-const { catcher } = useToastError()
-
-async function toggleMaintenance(agent: AgentDTO) {
-  try {
-    const is_maintenance_mode = !agent.is_maintenance_mode
-    await adminAgentSetMaintenance(agent.id, {
-      is_maintenance_mode
-    })
-    toast.info(`Set agent ${agent.name} maintenance to ${is_maintenance_mode}`)
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    agentsStore.load(true)
-  }
-}
-</script>
-
-<template>
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Agents</h1>
-    <div class="mt-6 flex flex-wrap gap-6">
-      <div class="grow">
-        <div class="stats shadow">
-          <div class="stat">
-            <div class="stat-title">Agents Online & Healthy</div>
-            <div class="stat-value flex justify-between">
-              <span
-                >{{ allAgents.filter(x => x.agent_info.status == AgentStatusHealthy).length ?? '?' }}/{{ allAgents.length ?? '?' }}</span
-              >
-              <span class="mt-1 text-2xl text-primary">
-                <font-awesome-icon :icon="Icons.Agent" />
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex basis-full"></div>
-
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title">Agent List</h2>
-          <table class="table w-full">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th v-if="isAdmin">Version</th>
-                <th>Devices</th>
-                <th>Status</th>
-                <th v-if="isAdmin || allAgents.some(agent => agent.is_maintenance_mode)">Maintenance</th>
-              </tr>
-            </thead>
-            <tbody class="first-col-bold">
-              <tr class="hover" v-for="agent in allAgents" :key="agent.id">
-                <td>{{ agent.name }}</td>
-                <td v-if="isAdmin" class="font-mono">{{ agent.agent_info.version }}</td>
-                <td>
-                  <span v-for="device in agent.agent_devices" :key="device.device_id + device.device_name">
-                    <font-awesome-icon :icon="Icons.GPU" v-if="device.device_type == 'GPU'" />
-                    <font-awesome-icon :icon="Icons.CPU" v-else />
-                    {{ formatDeviceName(device.device_name) }} ({{ device.temp }} °c)
-                    <br />
-                  </span>
-                </td>
-
-                <td class="text-center">
-                  <div
-                    class="badge badge-warning badge-sm m-auto block"
-                    title="Marked for maintenance"
-                    v-if="agent.is_maintenance_mode"
-                  ></div>
-                  <div
-                    class="badge badge-accent badge-sm m-auto block"
-                    v-else-if="agent.agent_info.status == AgentStatusHealthy"
-                    title="Healthy"
-                  ></div>
-                  <div
-                    class="badge badge-warning badge-sm m-auto block"
-                    title="Unhealthy"
-                    v-else-if="
-                      agent.agent_info.status == AgentStatusUnhealthyAndDisconnected ||
-                      agent.agent_info.status == AgentStatusUnhealthyButConnected
-                    "
-                  ></div>
-                  <div class="badge badge-ghost badge-sm m-auto block" title="Dead" v-else></div>
-                </td>
-
-                <td v-if="isAdmin">
-                  <input
-                    type="checkbox"
-                    class="toggle toggle-sm m-auto block"
-                    v-model="agent.is_maintenance_mode"
-                    @click="toggleMaintenance(agent)"
-                  />
-                </td>
-                <td v-else-if="agent.is_maintenance_mode">
-                  <font-awesome-icon :icon="Icons.Maintenance" /><span class="ml-2">In maintenance</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <EmptyTable v-if="allAgents.length == 0" text="No Agents Yet" icon="fa-robot" />
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-thead > tr > th {
-  background: none !important;
-  border-bottom-width: 1px;
-  /* border-bottom: 1px solid black; */
-}
-
-.first-col-bold > tr td:first-of-type {
-  font-weight: bold;
-}
-</style>
diff --git a/adminui2/src/pages/AttackTemplates.vue b/adminui2/src/pages/AttackTemplates.vue
deleted file mode 100644
index f4018f87..00000000
--- a/adminui2/src/pages/AttackTemplates.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
-
-import AttackTemplateCreator from '@/components/AttackTemplateCreator.vue'
-import AttackTemplateEditor from '@/components/AttackTemplateEditor.vue'
-import AttackTemplateSetEditor from '@/components/AttackTemplateSetEditor.vue'
-import Modal from '@/components/Modal.vue'
-import IconButton from '@/components/IconButton.vue'
-import EmptyTable from '@/components/EmptyTable.vue'
-import ConfirmModal from '@/components/ConfirmModal.vue'
-import PageLoading from '@/components/PageLoading.vue'
-import AttackTemplateSetCreator from '@/components/AttackTemplateSetCreator.vue'
-
-import { AttackTemplateSetType, AttackTemplateType } from '@/api/attackTemplate'
-
-import { useToastError } from '@/composables/useToastError'
-
-import { useAttackTemplatesStore } from '@/stores/attackTemplates'
-
-import { Icons } from '@/util/icons'
-
-const attackTemplatesStore = useAttackTemplatesStore()
-const { templates, isFirstLoading } = storeToRefs(attackTemplatesStore)
-attackTemplatesStore.load(true)
-
-const isCreateModalOpen = ref(false)
-const isCreateSetModalOpen = ref(false)
-const isEditModalOpen = ref(false)
-const isEditSetModalOpen = ref(false)
-
-const attackTemplateToEditId = ref('')
-const attackTemplateSetToEditId = ref('')
-
-const toast = useToast()
-const { catcher } = useToastError()
-
-async function onOpenEditAttackSettings(id: string) {
-  const tmpl = attackTemplatesStore.byId(id)
-  if (!tmpl) {
-    toast.warning('Failed to open editor - template was null')
-    return
-  }
-
-  switch (tmpl.type) {
-    case AttackTemplateType: {
-      if (tmpl.hashcat_params == null) {
-        toast.warning('Failed to open editor - settings were null')
-        return
-      }
-      attackTemplateToEditId.value = tmpl.id
-      isEditModalOpen.value = true
-      break
-    }
-
-    case AttackTemplateSetType: {
-      attackTemplateSetToEditId.value = tmpl.id
-      isEditSetModalOpen.value = true
-      break
-    }
-  }
-}
-
-async function onDeleteAttackTemplate(id: string) {
-  try {
-    await attackTemplatesStore.delete(id)
-  } catch (e) {
-    catcher(e, 'Failed to delete attack template')
-  }
-}
-</script>
-
-<template>
-  <Modal v-model:isOpen="isCreateModalOpen">
-    <AttackTemplateCreator @onCreated="() => (isCreateModalOpen = false)" />
-  </Modal>
-
-  <Modal v-model:isOpen="isCreateSetModalOpen">
-    <AttackTemplateSetCreator @onCreated="() => (isCreateSetModalOpen = false)" />
-  </Modal>
-
-  <Modal v-model:isOpen="isEditModalOpen">
-    <AttackTemplateEditor :idToEdit="attackTemplateToEditId" @onSaved="() => (isEditModalOpen = false)" />
-  </Modal>
-
-  <Modal v-model:isOpen="isEditSetModalOpen">
-    <AttackTemplateSetEditor :idToEdit="attackTemplateSetToEditId" @onSaved="() => (isEditSetModalOpen = false)" />
-  </Modal>
-
-  <main class="w-full h-full p-4">
-    <PageLoading v-if="isFirstLoading" />
-    <div v-else>
-      <h1 class="text-4xl font-bold">Attack Templates</h1>
-      <div class="mt-6 flex flex-wrap gap-6">
-        <div class="card min-w-[800px] bg-base-100 shadow-xl">
-          <div class="card-body">
-            <div class="flex flex-row justify-between">
-              <h2 class="card-title">Attack Templates</h2>
-              <div>
-                <button class="btn btn-primary btn-sm ml-1" @click="() => (isCreateModalOpen = true)">
-                  New Template <font-awesome-icon :icon="Icons.AttackTemplate" />
-                </button>
-                <button class="btn btn-primary btn-sm ml-1" @click="() => (isCreateSetModalOpen = true)" :disabled="templates.length === 0">
-                  New Template Set
-                  <font-awesome-icon :icon="Icons.AttackTemplateSet" />
-                </button>
-              </div>
-            </div>
-            <table class="table w-full">
-              <thead>
-                <tr>
-                  <th class="w-0">Type</th>
-                  <th>Name</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="tmpl in templates" :key="tmpl.id">
-                  <td>
-                    <div class="tooltip" data-tip="Attack Template" v-if="tmpl.type === AttackTemplateType">
-                      <font-awesome-icon :icon="Icons.AttackTemplate" />
-                    </div>
-                    <div class="tooltip" data-tip="Template Set" v-if="tmpl.type === AttackTemplateSetType">
-                      <font-awesome-icon :icon="Icons.AttackTemplateSet" />
-                    </div>
-                  </td>
-                  <td>
-                    {{ tmpl.name }}
-                  </td>
-                  <td>
-                    <div>
-                      <IconButton @click="() => onOpenEditAttackSettings(tmpl.id)" :icon="Icons.Edit" color="primary" tooltip="Edit" />
-                      <ConfirmModal @on-confirm="() => onDeleteAttackTemplate(tmpl.id)">
-                        <IconButton :icon="Icons.Delete" color="error" tooltip="Delete" />
-                      </ConfirmModal>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <EmptyTable v-if="templates.length == 0" text="No Attack Templates Yet" :icon="Icons.AttackTemplate" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/adminui2/src/pages/admin/Configuration.vue b/adminui2/src/pages/Configuration.vue
similarity index 100%
rename from adminui2/src/pages/admin/Configuration.vue
rename to adminui2/src/pages/Configuration.vue
diff --git a/adminui2/src/pages/HashSearch.vue b/adminui2/src/pages/HashSearch.vue
deleted file mode 100644
index 7c574dfd..00000000
--- a/adminui2/src/pages/HashSearch.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
-
-import HashesInput from '@/components/RulesInput.vue'
-
-import { searchPotfile } from '@/api/potfile'
-import type { PotfileSearchResponseDTO } from '@/api/types'
-
-import { useHashesInput } from '@/composables/useHashesInput'
-import { useToastError } from '@/composables/useToastError'
-
-import { useTokensStore } from '@/stores/registration_tokens'
-
-import decodeHex from '@/util/decodeHex'
-
-const { hashesInput, hashesArr } = useHashesInput()
-
-const { catcher } = useToastError()
-
-const isLoading = ref(false)
-const results = ref<PotfileSearchResponseDTO | null>(null)
-
-async function doSearch() {
-  results.value = null
-  isLoading.value = true
-
-  try {
-    const response = await searchPotfile(hashesArr.value)
-    results.value = response
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const resourcesStore = useTokensStore()
-
-const { getHashTypeName } = storeToRefs(resourcesStore)
-resourcesStore.loadHashTypes()
-</script>
-
-<template>
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Hash Search</h1>
-    <small class="mb-2 mt-1 pl-0.5 text-sm">Hint: when you create a hashlist, all hashes are searched automatically for you</small>
-    <div class="mt-3 flex flex-wrap gap-6">
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body flex-row gap-3">
-          <div class="min-w-[400px]">
-            <h2 class="mb-2 text-xl font-semibold">Enter hashes to search (one per-line)</h2>
-            <HashesInput v-model="hashesInput" />
-            <button class="btn btn-primary mt-2 w-full" :disabled="isLoading" @click="doSearch">
-              <span v-if="isLoading" class="loading loading-spinner loading-lg"></span>
-              Search
-            </button>
-          </div>
-
-          <div class="divider divider-horizontal" v-if="results != null"></div>
-
-          <div class="min-w-[600px]" v-if="results != null">
-            <h2 class="card-title">Results</h2>
-            <table class="compact-table table table-sm w-full">
-              <thead>
-                <tr>
-                  <th>Original Hash</th>
-                  <th>Hash Type</th>
-                  <th>Cracked Plaintext</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(result, i) in results.results" :key="[i, result.hash, result.hash_type, result.plaintext_hex].join('|')">
-                  <td class="overflow-hidden text-ellipsis whitespace-nowrap font-mono" style="max-width: 500px">
-                    {{ result.hash }}
-                  </td>
-                  <td v-if="result.found">{{ getHashTypeName(result.hash_type) }} - {{ result.hash_type }}</td>
-                  <td v-else>Unknown</td>
-                  <td class="font-mono">
-                    <strong>{{ decodeHex(result.plaintext_hex) || '-' }}</strong>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/adminui2/src/pages/Listfiles.vue b/adminui2/src/pages/Listfiles.vue
deleted file mode 100644
index 99901654..00000000
--- a/adminui2/src/pages/Listfiles.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useToast } from 'vue-toastification'
-
-import IconButton from '@/components/IconButton.vue'
-import Modal from '@/components/Modal.vue'
-import FileUpload from '@/components/FileUpload.vue'
-import EmptyTable from '@/components/EmptyTable.vue'
-import ConfirmModal from '@/components/ConfirmModal.vue'
-import CheckboxSet from '@/components/CheckboxSet.vue'
-
-import type { DeviceDTO } from '@/api/types'
-import { deleteDevice, type ListfileTypeT } from '@/api/devices'
-
-import { useToastError } from '@/composables/useToastError'
-
-import { useListfilesStore } from '@/stores/devices'
-import { useAuthStore } from '@/stores/auth'
-
-import { bytesToReadable } from '@/util/units'
-import { Icons } from '@/util/icons'
-
-const listfilesStore = useListfilesStore()
-const { load: loadListfiles } = listfilesStore
-const { groupedByType } = storeToRefs(listfilesStore)
-const listfiles = computed(() => Object.values(groupedByType.value).flat())
-
-const isListfileUploadOpen = ref(false)
-
-const listfileTypes = {
-  Rulefile: { icon: Icons.Rulefile },
-  Wordlist: { icon: Icons.Wordlist },
-  Charset: { icon: Icons.Charset }
-} as { [key: string]: { icon: string } }
-
-const listfileTypesFilter = ref(
-  Object.fromEntries(
-    Object.keys(listfileTypes)
-      .map(x => [x, true])
-      .concat([['Unknown', true]])
-  )
-)
-
-const filteredListfiles = computed(() => {
-  return listfiles.value.filter(x => listfileTypesFilter.value[x.file_type] ?? listfileTypesFilter.value['Unknown'] ?? true)
-})
-
-const getIconForType = (type: string) => listfileTypes[type]?.icon ?? Icons.Unknown
-
-loadListfiles(true)
-
-const refreshTimer = ref(0)
-
-onMounted(() => {
-  refreshTimer.value = setInterval(() => {
-    loadListfiles(true)
-  }, 1000 * 60)
-})
-
-onBeforeUnmount(() => {
-  clearInterval(refreshTimer.value)
-})
-
-function speedUpRefresh() {
-  clearInterval(refreshTimer.value)
-  refreshTimer.value = setInterval(() => {
-    loadListfiles(true)
-  }, 1000 * 10)
-}
-
-const authStore = useAuthStore()
-const { loggedInUser, isAdmin } = storeToRefs(authStore)
-
-function canDelete(listfile: DeviceDTO) {
-  if (listfile.pending_delete) {
-    return false
-  }
-
-  if (isAdmin) {
-    return true
-  }
-  return listfile.created_by_user_id == loggedInUser.value?.id
-}
-
-function isGreyed(listfile: DeviceDTO) {
-  return listfile.pending_delete || !listfile.available_for_use
-}
-
-const toast = useToast()
-const { catcher } = useToastError()
-
-async function onDeleteListfile(listfile: DeviceDTO) {
-  speedUpRefresh()
-  try {
-    await deleteDevice(listfile.id)
-    toast.info(`Marked ${listfile.name} for deletion`)
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    loadListfiles(true)
-  }
-}
-</script>
-
-<template>
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Listfiles</h1>
-    <div class="mt-6 flex flex-wrap gap-6">
-      <div class="card min-w-[800px] bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div class="flex flex-row justify-between">
-            <Modal v-model:isOpen="isListfileUploadOpen">
-              <FileUpload @on-upload-finish="() => speedUpRefresh()" :allowed-file-types="Object.keys(listfileTypes) as ListfileTypeT[]" />
-            </Modal>
-            <h2 class="card-title">Listfiles</h2>
-
-            <div>
-              <div class="dropdown mr-2">
-                <label tabindex="0" class="btn btn-sm">Filter</label>
-                <ul tabindex="0" class="menu dropdown-content rounded-box z-[1] mt-1 min-w-[200px] bg-base-100 p-2 shadow">
-                  <CheckboxSet v-model="listfileTypesFilter" />
-                </ul>
-              </div>
-              <button class="btn btn-primary btn-sm" @click="() => (isListfileUploadOpen = true)">Upload Listfile</button>
-            </div>
-          </div>
-          <table class="table w-full">
-            <thead>
-              <tr>
-                <th>Type</th>
-                <th>Name</th>
-                <th>Size</th>
-                <th>Lines</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                :class="isGreyed(listfile) ? 'greyed-out-row hover text-gray-500' : 'hover'"
-                v-for="listfile in filteredListfiles"
-                :key="listfile.id"
-              >
-                <td class="text-center">
-                  <div class="tooltip" :data-tip="listfile.file_type">
-                    <font-awesome-icon :icon="getIconForType(listfile.file_type)" />
-                  </div>
-                </td>
-                <td>
-                  <strong>{{ listfile.name }}</strong>
-                  <span class="pl-2 text-sm text-gray-500" v-if="!listfile.available_for_use">
-                    <div class="tooltip" data-tip="Syncing...">
-                      <font-awesome-icon :icon="Icons.Awaiting" />
-                    </div>
-                  </span>
-                  <span class="pl-2 text-sm text-gray-500" v-if="listfile.pending_delete">
-                    <div class="tooltip" data-tip="Marked for death">
-                      <font-awesome-icon :icon="Icons.Dead" title="" />
-                    </div>
-                  </span>
-                </td>
-
-                <td>{{ bytesToReadable(listfile.size_in_bytes) }}</td>
-                <td>{{ listfile.lines }}</td>
-                <td class="text-center">
-                  <ConfirmModal @on-confirm="() => onDeleteListfile(listfile)" v-if="canDelete(listfile)">
-                    <IconButton :icon="Icons.Delete" color="error" tooltip="Delete" />
-                  </ConfirmModal>
-                  <div v-else class="tooltip cursor-not-allowed text-gray-300" :data-tip="'You can\'t delete this'">
-                    <button class="btn btn-ghost btn-xs cursor-not-allowed">
-                      <font-awesome-icon :icon="Icons.Locked" />
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <EmptyTable v-if="listfiles.length == 0" text="No Listfiles Uploaded Yet" icon="fa-file" />
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-.greyed-out-row strong {
-  font-weight: normal;
-}
-</style>
diff --git a/adminui2/src/pages/RegistrationTokens.vue b/adminui2/src/pages/RegistrationTokens.vue
new file mode 100644
index 00000000..24e6e49c
--- /dev/null
+++ b/adminui2/src/pages/RegistrationTokens.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useToast } from 'vue-toastification'
+
+import Modal from '@/components/Modal.vue'
+import PaginationControls from '@/components/PaginationControls.vue'
+import PageLoading from '@/components/PageLoading.vue'
+
+import { usePagination } from '@/composables/usePagination'
+import { useToastError } from '@/composables/useToastError'
+import { useTextareaInput } from '@/composables/useTextareaInput'
+
+import { useTokensStore } from '@/stores/registration_tokens'
+
+import { Icons } from '@/util/icons'
+import type { RegistrationTokenRequestDTO } from '@/api'
+import { createRegistrationToken, deleteRegistrationTokens } from '@/api/registration_tokens'
+import ConfirmModal from '@/components/ConfirmModal.vue'
+
+
+const tokensStore = useTokensStore()
+tokensStore.load(true)
+
+const tokens = computed(() => {
+  return tokensStore.tokens ?? []
+})
+
+
+const filterText = ref('')
+
+const filteredTokens = computed(() => {
+  const arr = tokens.value
+
+  if (filterText.value == '') {
+    return arr
+  }
+
+  const searchTerm = filterText.value.trim().toLowerCase()
+
+  return arr.filter(x => x.username.toLowerCase().includes(searchTerm))
+})
+
+const { next: nextPage, prev: prevPage, totalPages, currentItems: currentTokens, activePage } = usePagination(filteredTokens, 20)
+
+const isCreateTokenModalOpen = ref(false)
+
+const toast = useToast()
+const { catcher } = useToastError()
+
+const { Input: InitialGroups, Arr: InitialGroupsArr } = useTextareaInput()
+
+const newToken = ref<RegistrationTokenRequestDTO>({} as RegistrationTokenRequestDTO)
+
+function openCreateToken() {
+
+  newToken.value = {
+    uses: 1
+  } as RegistrationTokenRequestDTO
+
+  isCreateTokenModalOpen.value = true
+}
+
+async function createToken() {
+  if (newToken.value.username == '') {
+    toast.error('Empty usernames are not allowed')
+    return
+  }
+
+  try {
+    const resp = await createRegistrationToken(newToken.value)
+    tokensStore.load(true)
+    if (!resp.success) {
+      toast.error(resp.message ?? 'Failed')
+      return
+    } else {
+      toast.success("token for " + newToken.value.username + ' created!')
+      isCreateTokenModalOpen.value = false
+    }
+  } catch (e) {
+    catcher(e, 'failed to create token: ')
+  }
+}
+
+async function deleteToken(token: RegistrationTokenRequestDTO) {
+  //TODO handle multiple
+  const tokensToDelete = [token.token]
+  try {
+    const resp = await deleteRegistrationTokens(tokensToDelete)
+
+    tokensStore.load(true)
+    if (!resp.success) {
+      toast.error(resp.message ?? 'Failed')
+      return
+    } else {
+      toast.success("token " + newToken.value.username + ' deleted!')
+    }
+  } catch (e) {
+    catcher(e, 'failed to delete token: ')
+  }
+}
+
+</script>
+
+<template>
+  <Modal v-model:isOpen="isCreateTokenModalOpen">
+    <div class="w-screen max-w-[600px]">
+      <h3 class="text-lg font-bold">Create Token</h3>
+      <div class="mt-8">
+        <div class="form-group">
+          <label for="username" class="block font-medium text-gray-900">Username</label>
+          <input type="text" id="username" class="input input-bordered input-sm w-full" required
+            v-model="newToken.username" />
+        </div>
+
+        <div class="form-group">
+          <label for="token" class="block font-medium text-gray-900 pt-6">Token</label>
+          <input type="text" id="token" class="input input-bordered input-sm w-full" v-model="newToken.token"
+            placeholder="(Optional)" />
+        </div>
+
+        <div class="form-group">
+          <label for="overwrites" class="block font-medium text-gray-900 pt-6">Overwrites</label>
+          <input type="text" id="overwrites" class="input input-bordered input-sm w-full" v-model="newToken.overwrites"
+            placeholder="(Optional)" />
+        </div>
+
+        <div class="form-group">
+          <label for="groups" class="block font-medium text-gray-900 pt-6">Groups</label>
+          <input type="text" id="groups" class="input input-bordered input-sm w-full" v-model="newToken.groups"
+            placeholder="(Optional)" />
+        </div>
+
+        <div class="form-group">
+          <label for="uses" class="block font-medium text-gray-900 pt-6">Uses</label>
+          <input type="text" id="uses" class="input input-bordered input-sm w-full" v-model="newToken.uses"
+            placeholder="1" />
+        </div>
+
+        <span class="mt-4 flex">
+          <button class="btn btn-primary" @click="() => createToken()">Create</button>
+
+          <div class="flex flex-grow"></div>
+
+          <button class="btn btn-secondary" @click="() => (isCreateTokenModalOpen = false)">Cancel</button>
+        </span>
+      </div>
+    </div>
+  </Modal>
+
+  <main class="w-full p-4">
+
+    <h1 class="text-4xl font-bold">Registration Tokens</h1>
+    <div class="mt-6 flex flex-wrap gap-6">
+      <div class="card w-full bg-base-100 shadow-xl min-w-[800px]">
+        <div class="card-body">
+          <div class="flex flex-row justify-between">
+            <div class="tooltip" data-tip="Add rule">
+              <button class="btn btn-ghost btn-primary" @click="openCreateToken">Add Token <font-awesome-icon
+                  :icon="Icons.Add" /></button>
+            </div>
+            <div class="form-control">
+              <label class="label">
+                <input type="text" class="input input-bordered input-sm" placeholder="Filter..." v-model="filterText" />
+              </label>
+            </div>
+          </div>
+
+          <table class="table table-fixed w-full">
+            <thead>
+              <tr>
+                <th>Token</th>
+                <th>Username</th>
+                <th>Groups</th>
+                <th>Overwrites</th>
+                <th>Uses</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="hover group" v-for="token in currentTokens">
+                <td class="font-mono">
+                  <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ token.token }}</div>
+                </td>
+                <td class="font-mono">
+                  <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ token.username }}</div>
+                </td>
+                <td class="font-mono">
+                  <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ token.groups?.join(', ') || '-' }}
+                  </div>
+                </td>
+                <td class="font-mono">
+                  <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ token.overwrites }}</div>
+                </td>
+                <td class="font-mono relative">
+                  <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ token.uses }}</span>
+                  <ConfirmModal @on-confirm="() => deleteToken(token)">
+                  <button
+                    class="absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                    <font-awesome-icon :icon="Icons.Delete" class="text-error hover:text-error-focus" />
+                  </button>
+                  </ConfirmModal>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div class="mt-2 w-full text-center">
+            <PaginationControls @next="() => nextPage()" @prev="() => prevPage()" :current-page="activePage"
+              :total-pages="totalPages" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.hashlist-table.table-sm :where(th, td) {
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+</style>
diff --git a/adminui2/src/pages/admin/Users.vue b/adminui2/src/pages/Users.vue
similarity index 100%
rename from adminui2/src/pages/admin/Users.vue
rename to adminui2/src/pages/Users.vue
diff --git a/adminui2/src/pages/Utilisation.vue b/adminui2/src/pages/Utilisation.vue
deleted file mode 100644
index 78d9742c..00000000
--- a/adminui2/src/pages/Utilisation.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-
-import EmptyTable from '@/components/EmptyTable.vue'
-
-import { getJobCountPerUser } from '@/api/groups'
-
-import { useApi } from '@/composables/useApi'
-
-const { data, silentlyRefresh } = useApi(getJobCountPerUser)
-
-let intervalId = ref<number | null>(null)
-
-onMounted(() => {
-  intervalId.value = setInterval(() => silentlyRefresh, 30 * 1000)
-})
-
-onBeforeUnmount(() => {
-  if (intervalId.value != null) {
-    clearInterval(intervalId.value)
-  }
-})
-
-const sortedData = computed(() => data.value?.result.slice().sort((a, b) => b.job_count - a.job_count) ?? [])
-</script>
-
-<template>
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Utilisation</h1>
-    <div class="mt-6 flex flex-wrap gap-6">
-      <div class="card min-w-[800px] bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div class="flex flex-row justify-between">
-            <h2 class="card-title">Job Count per User</h2>
-          </div>
-
-          <table class="table w-full">
-            <thead>
-              <tr>
-                <th>User</th>
-                <th>Job Count</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="row in sortedData" :key="row.username">
-                <td>{{ row.username }}</td>
-                <td>{{ row.job_count }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <EmptyTable v-if="sortedData.length == 0" text="No Jobs Running" icon="fa-bars-progress" />
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/adminui2/src/pages/Wizard.vue b/adminui2/src/pages/Wizard.vue
deleted file mode 100644
index 3c5b0201..00000000
--- a/adminui2/src/pages/Wizard.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-
-import JobWizard from '@/components/Wizard/JobWizard.vue'
-
-const router = useRouter()
-
-function navToHashlist(hashlistId: string) {
-  router.push(`/hashlist/${hashlistId}`)
-}
-</script>
-
-<template>
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Cracking Wizard</h1>
-    <JobWizard :first-step="0" @successful-start="details => navToHashlist(details.hashlistId)" />
-  </main>
-</template>
diff --git a/adminui2/src/pages/admin/Agents.vue b/adminui2/src/pages/admin/Agents.vue
deleted file mode 100644
index 3a5f7154..00000000
--- a/adminui2/src/pages/admin/Agents.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { useToast } from 'vue-toastification'
-import { ref, computed } from 'vue'
-
-import ConfirmModal from '@/components/ConfirmModal.vue'
-import Modal from '@/components/Modal.vue'
-import IconButton from '@/components/IconButton.vue'
-import InfoTip from '@/components/InfoTip.vue'
-
-import {
-  adminAgentSetMaintenance,
-  adminCreateAgentRegistrationKey,
-  adminDeleteAgent,
-  adminDeleteAgentRegistrationKey,
-  adminGetAgentRegistrationKeys
-} from '@/api/admin'
-import { getAllAgents } from '@/api/rules'
-
-import { useApi } from '@/composables/useApi'
-import { useToastError } from '@/composables/useToastError'
-
-import { Icons } from '@/util/icons'
-import { formatDeviceName } from '@/util/formatDeviceName'
-
-import type { AgentDTO } from '@/api'
-
-const AgentStatusHealthy = 'AgentStatusHealthy'
-const AgentStatusUnhealthyButConnected = 'AgentStatusUnhealthyButConnected'
-const AgentStatusUnhealthyAndDisconnected = 'AgentStatusUnhealthyAndDisconnected'
-
-const isRegistrationModalOpen = ref(false)
-
-const { data: agents, silentlyRefresh: fetchAgents, isLoading } = useApi(getAllAgents)
-
-const { data: registrationKeys, silentlyRefresh: fetchRegistrationKeys } = useApi(adminGetAgentRegistrationKeys)
-
-const toast = useToast()
-const { catcher } = useToastError()
-
-const newRegKeyEphemeral = ref(false)
-const newRegKeyName = ref('')
-const newRegKeyValidationError = computed(() => {
-  if (newRegKeyName.value.length > 30) {
-    return 'Name too long'
-  }
-
-  return null
-})
-
-const isDisplayKeyModalOpen = ref(false)
-const keyToDisplay = ref('')
-const disableTlsVerification = ref(false)
-
-const isLoadingRegister = ref(false)
-
-const commandToRun = computed(() => {
-  const baseUrl = window.location.origin
-  const key = keyToDisplay.value
-
-  return `curl ${baseUrl}/agent-assets/install.sh ${disableTlsVerification.value ? '-k ' : ''}| PHATCRACK_HOST=${baseUrl} PHATCRACK_REGISTRATION_KEY=${key}${disableTlsVerification.value ? ' DISABLE_TLS_VERIFICATON=1' : ''} bash`
-})
-
-async function onCreateNewRegistrationKey() {
-  isLoadingRegister.value = true
-  try {
-    const res = await adminCreateAgentRegistrationKey({
-      name: newRegKeyName.value,
-      for_ephemeral_agent: newRegKeyEphemeral.value
-    })
-
-    toast.info('Created new registration key')
-
-    keyToDisplay.value = res.key
-    isDisplayKeyModalOpen.value = true
-    isRegistrationModalOpen.value = false
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    isLoadingRegister.value = false
-    fetchRegistrationKeys()
-  }
-}
-
-async function onDeleteAgent(id: string) {
-  try {
-    await adminDeleteAgent(id)
-    toast.info('Deleted agent')
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    fetchAgents()
-  }
-}
-
-async function onDeleteRegKey(id: string) {
-  try {
-    await adminDeleteAgentRegistrationKey(id)
-    toast.info('Deleted agent registration key')
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    fetchRegistrationKeys()
-  }
-}
-
-async function copyCommand() {
-  await navigator.clipboard.writeText(commandToRun.value)
-  toast.success('Copied to clipboard')
-}
-
-async function toggleMaintenance(agent: AgentDTO) {
-  try {
-    const is_maintenance_mode = !agent.is_maintenance_mode
-    await adminAgentSetMaintenance(agent.id, {
-      is_maintenance_mode
-    })
-    toast.info(`Set agent ${agent.name} maintenance to ${is_maintenance_mode}`)
-  } catch (e: any) {
-    catcher(e)
-  } finally {
-    fetchAgents()
-  }
-}
-</script>
-
-<template>
-  <Modal v-model:isOpen="isDisplayKeyModalOpen">
-    <div>
-      <div>
-        <h3 class="text-lg font-bold">Agent enrolment script</h3>
-
-        <p>
-          Run the following script on the server you want to use for hash cracking. This script will install the agent and register it with
-          the server.
-        </p>
-
-        <div class="bg-slate-200 border-slate-200 mt-4 p-4 rounded-lg">
-          <pre class="whitespace-pre-line overflow-wrap break-words max-w-[60vw]">
-            {{ commandToRun }}
-          </pre>
-
-          <div class="flex justify-end">
-            <div class="tooltip" data-tip="Copy">
-              <button class="btn btn-xs btn-outline btn-ghost" @click="copyCommand">
-                <font-awesome-icon :icon="Icons.Clipboard" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="form-control">
-          <label class="label font-bold"
-            ><span class="label-text"
-              >Disable TLS Verification?
-              <InfoTip
-                tooltip="If this is checked, the agent will not verify the server's TLS certificate. This is not recommended, but can be useful if you are using a self-signed certificate."
-              /> </span></label
-          ><input v-model="disableTlsVerification" type="checkbox" class="checkbox" />
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <Modal v-model:isOpen="isRegistrationModalOpen">
-    <div class="flex">
-      <div>
-        <h3 class="text-lg font-bold mr-8">Create a new registration key</h3>
-        <div class="form-control">
-          <label class="label font-bold">
-            <span class="label-text">Name (optional)</span>
-          </label>
-          <input v-model="newRegKeyName" type="text" placeholder="crack01" class="input input-bordered w-full max-w-xs" />
-        </div>
-        <div class="form-control">
-          <label class="label font-bold"
-            ><span class="label-text"
-              >Is agent ephemeral?
-              <span class="tooltip font-normal" data-tip="Ephemeral agents are removed after 2 minutes of inactivity">
-                <font-awesome-icon :icon="Icons.Info" />
-              </span> </span
-          ></label>
-          <input v-model="newRegKeyEphemeral" type="checkbox" class="checkbox" />
-        </div>
-        <div class="form-control mt-3">
-          <span class="tooltip" :data-tip="newRegKeyValidationError">
-            <button
-              @click="onCreateNewRegistrationKey"
-              :disabled="newRegKeyValidationError != null || isLoadingRegister"
-              class="btn btn-primary w-full"
-            >
-              <span class="loading loading-spinner loading-md" v-if="isLoadingRegister"></span>
-              Create
-            </button>
-          </span>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <main class="w-full p-4">
-    <h1 class="text-4xl font-bold">Agent Management</h1>
-
-    <div class="mt-6 flex flex-wrap gap-6">
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div class="flex flex-row justify-between">
-            <h2 class="card-title mr-2">Agents</h2>
-            <div>
-              <button class="btn btn-primary btn-sm ml-2" @click="() => (isRegistrationModalOpen = true)">
-                <font-awesome-icon :icon="Icons.Add" />
-                Register Agent
-              </button>
-            </div>
-          </div>
-
-          <div v-if="isLoading" class="flex h-56 h-full w-56 w-full justify-center self-center">
-            <span class="loading loading-spinner loading-lg"></span>
-          </div>
-          <table v-else class="table">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Version</th>
-                <th>Devices</th>
-                <th>Status</th>
-                <th>Maintenance</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="hover" v-for="agent in agents?.agents" :key="agent.id">
-                <td>
-                  <strong>{{ agent.name }}</strong>
-                </td>
-                <td class="font-mono">{{ agent.agent_info.version }}</td>
-                <td>
-                  <span v-for="device in agent.agent_devices" :key="device.device_id + device.device_name">
-                    <font-awesome-icon :icon="Icons.GPU" v-if="device.device_type == 'GPU'" />
-                    <font-awesome-icon :icon="Icons.CPU" v-else />
-                    {{ formatDeviceName(device.device_name) }} ({{ device.temp }} °c)
-                    <br />
-                  </span>
-                </td>
-
-                <td class="text-center">
-                  <div
-                    class="badge badge-warning badge-sm m-auto block"
-                    title="Marked for maintenance"
-                    v-if="agent.is_maintenance_mode"
-                  ></div>
-                  <div
-                    class="badge badge-accent badge-sm m-auto block"
-                    v-else-if="agent.agent_info.status == AgentStatusHealthy"
-                    title="Healthy"
-                  ></div>
-                  <div
-                    class="badge badge-warning badge-sm m-auto block"
-                    title="Unhealthy"
-                    v-else-if="
-                      agent.agent_info.status == AgentStatusUnhealthyAndDisconnected ||
-                      agent.agent_info.status == AgentStatusUnhealthyButConnected
-                    "
-                  ></div>
-                  <div class="badge badge-ghost badge-sm m-auto block" title="Dead" v-else></div>
-                </td>
-
-                <td>
-                  <input
-                    type="checkbox"
-                    class="toggle toggle-sm m-auto block"
-                    v-model="agent.is_maintenance_mode"
-                    @click="toggleMaintenance(agent)"
-                  />
-                </td>
-
-                <td class="text-center">
-                  <ConfirmModal @on-confirm="() => onDeleteAgent(agent.id)">
-                    <IconButton :icon="Icons.Delete" color="error" tooltip="Delete" />
-                  </ConfirmModal>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-6 flex flex-wrap gap-6" v-if="(registrationKeys?.agent_registration_keys ?? []).length > 0">
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div class="flex flex-row justify-between">
-            <h2 class="card-title mr-2">Existing Registration Keys</h2>
-          </div>
-
-          <table class="table table-sm">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>
-                  Key
-                  <span class="tooltip font-normal" data-tip="The full key cannot be shown again">
-                    <font-awesome-icon :icon="Icons.Info" class="ml-1" />
-                  </span>
-                </th>
-                <th>Ephemeral Agent?</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="key in registrationKeys?.agent_registration_keys ?? []" :key="key.id">
-                <td>
-                  <strong>{{ key.name || '-' }}</strong>
-                </td>
-                <td class="font-mono">{{ key.key_hint }}</td>
-                <td>
-                  <font-awesome-icon :icon="Icons.Tick" v-if="key.for_ephemeral_agent" />
-                </td>
-                <td>
-                  <ConfirmModal @on-confirm="() => onDeleteRegKey(key.id)">
-                    <IconButton :icon="Icons.Delete" color="error" tooltip="Delete" />
-                  </ConfirmModal>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
diff --git a/adminui2/src/router/index.ts b/adminui2/src/router/index.ts
index 000a12c3..b5a7950a 100644
--- a/adminui2/src/router/index.ts
+++ b/adminui2/src/router/index.ts
@@ -42,7 +42,7 @@ const router = createRouter({
     route('/cluster/members', 'Cluster Members', () => import('@/pages/ClusterMembers.vue')),
 
     route('/policy/rules', 'Firewall Rules', () => import('@/pages/Rules.vue')),
-    route('/policy/groups', 'Groups', () => import('@/pages/Groups.vue'))
+    route('/policy/groups', 'Groups', () => import('@/pages/Groups.vue')),
 
     // route('/diagnostics/wg', 'Wireguard Diagnostics', () => import('@/pages/projects/project.vue')),
     // route('/diagnostics/firewall', 'Firewall Diagnostics', () => import('@/pages/projects/project.vue')),
@@ -51,7 +51,7 @@ const router = createRouter({
 
     // route('/management/users', 'User Management', () => import('@/pages/Hashlist.vue')),
     // route('/management/devices', 'Device Management', () => import('@/pages/Hashlist.vue')),
-    // route('/management/registration_tokens', 'Registration Tokens', () => import('@/pages/Hashlist.vue')),
+    route('/management/registration_tokens', 'Registration Tokens', () => import('@/pages/RegistrationTokens.vue')),
 
     // route('/settings/general', 'Settings', () => import('@/pages/Listfiles.vue')),
     // route('/settings/management_users', 'Settings', () => import('@/pages/Listfiles.vue')),
diff --git a/adminui2/src/stores/registration_tokens.ts b/adminui2/src/stores/registration_tokens.ts
index 0234587a..80acfa14 100644
--- a/adminui2/src/stores/registration_tokens.ts
+++ b/adminui2/src/stores/registration_tokens.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 
 import { getAllRegistrationTokens } from '@/api/registration_tokens'
-import type { RegistrationToken } from '@/api/types'
+import type { RegistrationTokenRequestDTO } from '@/api/types'
 
 export type RegistrationTokensStore = {
-  tokens: RegistrationToken[]
+  tokens: RegistrationTokenRequestDTO[]
   loading: boolean
 }