udpate: setup page use wizard form step

src/app/app.vue

@@ -37,6 +37,10 @@ useHead({
     },
   ],
   meta: [
+    {
+      name: 'mobile-web-app-capable',
+      content: 'yes',
+    },
     {
       name: 'apple-mobile-web-app-capable',
       content: 'yes',

src/app/components/icons/ArrowLeftCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+</template>

src/app/components/icons/ArrowRightCircle.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    />
+  </svg>
+</template>

src/app/pages/setup.vue

@@ -2,61 +2,76 @@
   <main class="container mx-auto px-4">
     <UiBanner />
     <Panel>
-      <PanelBody class="lg:w-[60%] mx-auto mt-10 p-4">
+      <PanelBody class="md:w-[70%] lg:w-[60%] mx-auto mt-10 p-4">
         <h2 class="mt-8 mb-16 text-3xl font-medium">
           {{ $t('setup.welcome') }}
         </h2>
 
-        <div id="step1" class="tab">
+        <div class="tab">
           <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
-          <div>
+          <form>
-            <label for="username" class="inline-block py-2">{{
+            <div>
-              $t('username')
+              <label for="username" class="inline-block py-2">{{
-            }}</label>
+                $t('username')
-            <input
+              }}</label>
-              id="username"
+              <input
-              v-model="username"
+                id="username"
-              type="text"
+                v-model="username"
-              name="username"
+                type="text"
-              autocomplete="username"
+                name="username"
-              autofocus
+                autocomplete="username"
-              :placeholder="$t('setup.usernamePlaceholder')"
+                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"
+                :placeholder="$t('setup.usernamePlaceholder')"
-            />
+                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"
-          </div>
+              />
-          <div>
+            </div>
-            <Label for="password" class="inline-block py-2">{{
+            <div>
-              $t('setup.newPassword')
+              <Label for="password" class="inline-block py-2">{{
-            }}</Label>
+                $t('setup.newPassword')
-            <input
+              }}</Label>
-              id="password"
+              <input
-              v-model="password"
+                id="password"
-              type="password"
+                v-model="password"
-              name="password"
+                type="password"
-              autocomplete="new-password"
+                name="password"
-              :placeholder="$t('setup.passwordPlaceholder')"
+                autocomplete="new-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 focus:outline-0 focus:ring-0"
+                :placeholder="$t('setup.passwordPlaceholder')"
-            />
+                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"
-          </div>
+              />
-          <div>
+            </div>
-            <Label for="accept" class="inline-block my-4 mr-4">{{
+            <div>
-              $t('setup.accept')
+              <Label for="accept" class="inline-block my-4 mr-4">{{
-            }}</Label>
+                $t('setup.accept')
-            <input id="accept" v-model="accept" type="checkbox" name="accept" />
+              }}</Label>
-          </div>
+              <input
+                id="accept"
+                v-model="accept"
+                type="checkbox"
+                name="accept"
+              />
+            </div>
+          </form>
         </div>
 
-        <div id="step2" class="tab">
+        <div class="tab hidden">
           <p class="text-lg p-8">Host/Port section</p>
         </div>
 
-        <div id="step3" class="tab">
+        <div class="tab hidden">
           <p class="text-lg p-8">Migration section</p>
         </div>
 
-        <div>
+        <div class="tab hidden">
-          <div>Previous</div>
+          <p class="text-lg p-8">Validation section</p>
-          <div>Next</div>
+        </div>
+
+        <div class="flex justify-between items-center">
+          <IconsArrowLeftCircle class="size-12" />
+          <div class="step grow h-[3px] mx-4 bg-white"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <IconsArrowRightCircle class="size-12" />
         </div>
       </PanelBody>
     </Panel>