update: reduce templates

- remake: setup page to add others step configuration (host/port/migration)

src/app/components/panel/Panel.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="container mx-auto max-w-3xl px-3 md:px-0">
+  <div
-    <div
+    class="container mx-auto max-w-3xl px-3 md:px-0 shadow-md rounded-lg bg-white dark:bg-neutral-700 text-gray-700 dark:text-neutral-200 overflow-hidden"
-      class="shadow-md rounded-lg bg-white dark:bg-neutral-700 text-gray-700 dark:text-neutral-200 overflow-hidden"
+  >
-    >
+    <slot />
-      <slot />
-    </div>
   </div>
 </template>

src/app/components/panel/head/Boat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex md:block md:flex-shrink-0 space-x-1">
+  <div class="flex md:block flex-shrink-0 space-x-1">
     <slot />
   </div>
 </template>

src/app/components/panel/head/Head.vue

@@ -1,9 +1,7 @@
 <template>
   <div
-    class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
+    class="flex flex-row flex-grow flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600"
   >
-    <div class="flex flex-grow">
+    <slot />
-      <slot />
-    </div>
   </div>
 </template>

src/app/components/panel/head/Title.vue

@@ -5,7 +5,7 @@ const { text } = defineProps<{
 </script>
 
 <template>
-  <h3 class="flex-1 text-2xl font-medium dark:text-neutral-200">
+  <h2 class="flex-1 text-2xl font-medium">
     {{ text }}
-  </h3>
+  </h2>
 </template>

src/app/components/ui/Banner.vue

@@ -0,0 +1,8 @@
+<template>
+  <h1
+    class="text-4xl font-medium my-16 text-center text-gray-700 dark:text-neutral-200"
+  >
+    <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
+    <span class="align-middle">WireGuard</span>
+  </h1>
+</template>

src/app/pages/login.vue

@@ -1,12 +1,8 @@
 <template>
-  <section class="text-gray-700 dark:text-neutral-200">
+  <main>
-    <h1 class="text-4xl font-medium my-16 text-center">
+    <UiBanner />
-      <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
-      <span class="align-middle">WireGuard</span>
-    </h1>
-
     <form
-      class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-64 p-5 overflow-hidden mt-10"
+      class="shadow rounded-md bg-white dark:bg-neutral-700 text-gray-700 dark:text-neutral-200 mx-auto w-64 p-5 overflow-hidden mt-10"
       @submit="login"
     >
       <!-- Avatar -->
@@ -22,7 +18,8 @@
         name="username"
         :placeholder="$t('username')"
         autocomplete="username"
-        class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none"
+        autofocus
+        class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
       />
 
       <input
@@ -31,7 +28,7 @@
         name="password"
         :placeholder="$t('password')"
         autocomplete="current-password"
-        class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none"
+        class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 focus:outline-0 focus:ring-0"
       />
 
       <label
@@ -84,7 +81,7 @@
       :message="setupError.message"
       :duration="12000"
     />
-  </section>
+  </main>
 </template>
 
 <script setup lang="ts">

src/app/pages/setup.vue

@@ -1,18 +1,14 @@
 <template>
   <main class="container mx-auto px-4">
-    <h1
+    <UiBanner />
-      class="text-4xl font-medium my-16 text-center text-gray-700 dark:text-neutral-200"
-    >
-      <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
-      <span class="align-middle">WireGuard</span>
-    </h1>
     <Panel>
       <PanelBody class="lg:w-[60%] mx-auto mt-10 p-4">
         <h2 class="mt-8 mb-16 text-3xl font-medium">
           {{ $t('setup.welcome') }}
         </h2>
-        <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
+
-        <form class="mb-8" @submit.prevent="newAccount">
+        <div id="step1" class="tab">
+          <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
           <div>
             <label for="username" class="inline-block py-2">{{
               $t('username')
@@ -48,21 +44,20 @@
             }}</Label>
             <input id="accept" v-model="accept" type="checkbox" name="accept" />
           </div>
-          <button
+        </div>
-            type="submit"
+
-            :class="[
+        <div id="step2" class="tab">
-              {
+          <p class="text-lg p-8">Host/Port section</p>
-                'bg-red-800 dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer':
+        </div>
-                  password && username,
+
-                'bg-gray-200 dark:bg-neutral-800 cursor-not-allowed':
+        <div id="step3" class="tab">
-                  !password && !username,
+          <p class="text-lg p-8">Migration section</p>
-              },
+        </div>
-              'w-max px-4 rounded shadow py-2 text-sm text-white dark:text-white',
+
-            ]"
+        <div>
-          >
+          <div>Previous</div>
-            {{ $t('setup.submitBtn') }}
+          <div>Next</div>
-          </button>
+        </div>
-        </form>
       </PanelBody>
     </Panel>
 
@@ -100,7 +95,7 @@ watch(setupError, (value) => {
   }
 });
 
-async function newAccount() {
+async function _newAccount() {
   if (!username.value || !password.value) return;
 
   try {