fix logout button

web/src/lib/components/page/PageHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Logo from '$lib/assets/logo.png';
+  import { buttonVariants } from '$lib/components/ui/button';
 
   export let showLogout: boolean = false;
 </script>
@@ -7,12 +8,12 @@
 <header class={'w-full py-3 px-2'}>
   <nav class={'w-full flex items-center justify-between'}>
     <div class={'flex items-center gap-x-2 text-3xl font-medium'}>
-      <img src={Logo} alt="WireAdmin" width="40" height="40" />
-      <h1>WireAdmin</h1>
+      <img src={Logo} alt="WireAdmin" width="40" height="40" class="max-sm:w-8" />
+      <h1 class="max-sm:text-lg">WireAdmin</h1>
     </div>
 
-    <div class={'hidden md:flex items-center gap-x-2'}>
-      <a href={'https://github.com/shahradelahi/wireadmin'} title={'Giv me a star on Github'}>
+    <div class={'flex items-center gap-x-8'}>
+      <a href={'https://github.com/shahradelahi/wireadmin'} title={'Giv me a star on Github'} class="hidden md:block">
         <img
           src={'https://img.shields.io/github/stars/shahradelahi/wireadmin.svg?style=social&label=Star'}
           alt={'Giv me a star on Github'}
@@ -20,16 +21,9 @@
       </a>
 
       {#if showLogout}
-        <a href={'/logout'} title="logout">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-red-500 hover:text-red-700"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-          </svg>
+        <a href="/logout" rel="external" title="Logout" class="group text-sm/2 font-medium text-neutral-700 hover:text-neutral-800">
+          <i class="far fa-arrow-right-from-arc text-sm text-neutral-500 group-hover:text-neutral-800 mr-0.5"></i>
+          Logout
         </a>
       {/if}
     </div>

web/src/routes/+page.server.ts

@@ -1,7 +1,7 @@
 import { type Actions, error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { findServer, getServers, WGServer } from '$lib/wireguard';
-import { superValidate } from 'sveltekit-superforms/server';
+import { findServer, generateWgServer, getServers, WGServer } from '$lib/wireguard';
+import { setError, superValidate } from 'sveltekit-superforms/server';
 import { CreateServerSchema } from './schema';
 import { NameSchema } from '$lib/wireguard/schema';
 
@@ -33,4 +33,26 @@ export const actions: Actions = {
 
     return { ok: true };
   },
+  create: async (event) => {
+    const form = await superValidate(event, CreateServerSchema);
+    if (!form.valid) {
+      return setError(form, 'Bad Request');
+    }
+
+    const { name, address, port, dns, mtu = '1350' } = form.data;
+
+    const serverId = await generateWgServer({
+      name,
+      address,
+      port: Number(port),
+      type: 'direct',
+      mtu: Number(mtu),
+      dns,
+    });
+
+    return {
+      ok: true,
+      serverId,
+    };
+  },
 };