admin panel mobile view

src/app/components/Header/Update.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    v-if="globalStore.release?.updateAvailable"
+    v-if="
+      globalStore.release?.updateAvailable &&
+      authStore.userData &&
+      hasPermissions(authStore.userData, 'admin', 'any')
+    "
     class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
     :title="`v${globalStore.release.currentRelease} → v${globalStore.release.latestRelease.version}`"
   >
@@ -23,6 +27,5 @@
 
 <script lang="ts" setup>
 const globalStore = useGlobalStore();
-
-// TODO: only show this to admins
+const authStore = useAuthStore();
 </script>

src/app/pages/admin.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="container mx-auto p-4">
-      <div class="flex">
-        <div class="mr-4 w-64 rounded-lg bg-white p-4 dark:bg-neutral-700">
+      <div class="flex flex-col gap-4 lg:flex-row">
+        <div class="rounded-lg bg-white p-4 lg:w-64 dark:bg-neutral-700">
           <NuxtLink to="/admin">
             <h2 class="mb-4 text-xl font-bold dark:text-neutral-200">
               {{ t('pages.admin.panel') }}
@@ -13,6 +13,7 @@
               v-for="(item, index) in menuItems"
               :key="index"
               :to="`/admin/${item.id}`"
+              active-class="bg-red-800 rounded"
             >
               <BaseButton
                 as="span"
@@ -27,7 +28,7 @@
         <div
           class="flex-1 rounded-lg bg-white p-6 dark:bg-neutral-700 dark:text-neutral-200"
         >
-          <h1 class="mb-6 text-3xl font-bold">{{ activeMenuItem?.name }}</h1>
+          <h1 class="mb-6 text-3xl font-bold">{{ activeMenuItem.name }}</h1>
           <NuxtPage />
         </div>
       </div>
@@ -44,13 +45,17 @@ const { t } = useI18n();
 const route = useRoute();
 
 const menuItems = [
-  { id: '', name: t('pages.admin.general') },
+  { id: 'general', name: t('pages.admin.general') },
   { id: 'config', name: t('pages.admin.config') },
   { id: 'interface', name: t('pages.admin.interface') },
   { id: 'hooks', name: t('pages.admin.hooks') },
 ];
 
+const defaultItem = { id: '', name: t('pages.admin.panel') };
+
 const activeMenuItem = computed(() => {
-  return menuItems.find((item) => route.path === `/admin/${item.id}`);
+  return (
+    menuItems.find((item) => route.path === `/admin/${item.id}`) ?? defaultItem
+  );
 });
 </script>

src/app/pages/admin/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="flex flex-col gap-3">
+    <p class="whitespace-pre-line">{{ $t('admin.introText') }}</p>
+  </main>
+</template>

src/app/pages/login.vue

@@ -54,6 +54,9 @@
 </template>
 
 <script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+
 const authenticating = ref(false);
 const remember = ref(false);
 const username = ref<null | string>(null);

src/i18n/locales/en.json

@@ -45,7 +45,7 @@
     "migration": "Restore the backup:",
     "createAccount": "Create Account",
     "successful": "Setup successful",
-    "hostDesc": "Public hostname clients will connect to\nIPv6 address has to be in square brackets",
+    "hostDesc": "Public hostname clients will connect to",
     "portDesc": "Public UDP port clients will connect to (same as port mapping)"
   },
   "update": {
@@ -157,7 +157,8 @@
       "mtuDesc": "MTU WireGuard will use",
       "portDesc": "UDP Port WireGuard will listen on (could invalidate config)",
       "changeCidr": "Change CIDR"
-    }
+    },
+    "introText": "Welcome to the admin panel.\n\nHere you can manage the general settings, the configuration, the interface settings and the hooks.\n\nStart by choosing one of the sections in the sidebar."
   },
   "zod": {
     "generic": {

src/server/api/session.get.ts

@@ -2,11 +2,10 @@ export default defineEventHandler(async (event) => {
   const session = await useWGSession(event);
 
   if (!session.data.userId) {
-    throw createError({
-      statusCode: 401,
-      statusMessage: 'Not logged in',
-    });
+    // not logged in
+    return null;
   }
+
   const user = await Database.users.get(session.data.userId);
   if (!user) {
     throw createError({

src/server/database/repositories/userConfig/service.ts

@@ -38,6 +38,8 @@ export class UserConfigService {
     return userConfig;
   }
 
+  // TODO: wrap ipv6 host in square brackets
+
   updateHostPort(host: string, port: number) {
     return this.#statements.updateHostPort.execute({
       interface: 'wg0',