From ca87a982ed718c90dda5daeec79561a9e7b684a5 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Tue, 17 Sep 2024 15:23:30 +0200
Subject: [PATCH] udpate: setup page use wizard form step

---
 src/app/app.vue                               |  4 +
 src/app/components/icons/ArrowLeftCircle.vue  | 15 +++
 src/app/components/icons/ArrowRightCircle.vue | 15 +++
 src/app/pages/setup.vue                       | 99 +++++++++++--------
 4 files changed, 91 insertions(+), 42 deletions(-)
 create mode 100644 src/app/components/icons/ArrowLeftCircle.vue
 create mode 100644 src/app/components/icons/ArrowRightCircle.vue

diff --git a/src/app/app.vue b/src/app/app.vue
index 0ad77a48..2e1e6be4 100644
--- a/src/app/app.vue
+++ b/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',
diff --git a/src/app/components/icons/ArrowLeftCircle.vue b/src/app/components/icons/ArrowLeftCircle.vue
new file mode 100644
index 00000000..fd6d9179
--- /dev/null
+++ b/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>
diff --git a/src/app/components/icons/ArrowRightCircle.vue b/src/app/components/icons/ArrowRightCircle.vue
new file mode 100644
index 00000000..f43a2afc
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/setup.vue b/src/app/pages/setup.vue
index df7ece2a..5eaf2162 100644
--- a/src/app/pages/setup.vue
+++ b/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>
-            <label for="username" class="inline-block py-2">{{
-              $t('username')
-            }}</label>
-            <input
-              id="username"
-              v-model="username"
-              type="text"
-              name="username"
-              autocomplete="username"
-              autofocus
-              :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>
-            <Label for="password" class="inline-block py-2">{{
-              $t('setup.newPassword')
-            }}</Label>
-            <input
-              id="password"
-              v-model="password"
-              type="password"
-              name="password"
-              autocomplete="new-password"
-              :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>
-            <Label for="accept" class="inline-block my-4 mr-4">{{
-              $t('setup.accept')
-            }}</Label>
-            <input id="accept" v-model="accept" type="checkbox" name="accept" />
-          </div>
+          <form>
+            <div>
+              <label for="username" class="inline-block py-2">{{
+                $t('username')
+              }}</label>
+              <input
+                id="username"
+                v-model="username"
+                type="text"
+                name="username"
+                autocomplete="username"
+                autofocus
+                :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>
+              <Label for="password" class="inline-block py-2">{{
+                $t('setup.newPassword')
+              }}</Label>
+              <input
+                id="password"
+                v-model="password"
+                type="password"
+                name="password"
+                autocomplete="new-password"
+                :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>
+              <Label for="accept" class="inline-block my-4 mr-4">{{
+                $t('setup.accept')
+              }}</Label>
+              <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>Previous</div>
-          <div>Next</div>
+        <div class="tab hidden">
+          <p class="text-lg p-8">Validation section</p>
+        </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>