update: ui

src/app/components/step/Progress.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    v-for="n in totalSteps"
+    :key="n"
+    :class="[
+      'step grow h-[3px] mx-4',
+      step >= n ? 'dark:bg-white' : 'dark:bg-gray-500',
+    ]"
+  ></div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  step: {
+    type: Number,
+    required: true,
+  },
+  totalSteps: {
+    type: Number,
+    default: 4,
+  },
+});
+</script>

src/app/pages/setup.vue

@@ -7,71 +7,70 @@
           {{ $t('setup.welcome') }}
         </h2>
 
-        <div class="tab">
+        <div v-if="step === 1">
           <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
-          <form>
+          <div>
-            <div>
+            <label for="username" class="inline-block py-2">{{
-              <label for="username" class="inline-block py-2">{{
+              $t('username')
-                $t('username')
+            }}</label>
-              }}</label>
+            <input
-              <input
+              id="username"
-                id="username"
+              v-model="username"
-                v-model="username"
+              form="formulaire"
-                type="text"
+              type="text"
-                name="username"
+              name="username"
-                autocomplete="username"
+              autocomplete="username"
-                autofocus
+              autofocus
-                :placeholder="$t('setup.usernamePlaceholder')"
+              :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"
+              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>
+          <div>
-              <Label for="password" class="inline-block py-2">{{
+            <Label for="password" class="inline-block py-2">{{
-                $t('setup.newPassword')
+              $t('setup.newPassword')
-              }}</Label>
+            }}</Label>
-              <input
+            <input
-                id="password"
+              id="password"
-                v-model="password"
+              v-model="password"
-                type="password"
+              form="formulaire"
-                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
+            }}</Label>
-                id="accept"
+            <input id="accept" v-model="accept" type="checkbox" name="accept" />
-                v-model="accept"
+          </div>
-                type="checkbox"
+          <form id="formulaire"></form>
-                name="accept"
-              />
-            </div>
-          </form>
         </div>
 
-        <div class="tab hidden">
+        <div v-if="step === 2">
           <p class="text-lg p-8">Host/Port section</p>
         </div>
 
-        <div class="tab hidden">
+        <div v-if="step === 3">
           <p class="text-lg p-8">Migration section</p>
         </div>
 
-        <div class="tab hidden">
+        <div v-if="step === 4">
           <p class="text-lg p-8">Validation section</p>
         </div>
 
         <div class="flex justify-between items-center">
-          <IconsArrowLeftCircle class="size-12" />
+          <IconsArrowLeftCircle
-          <div class="step grow h-[3px] mx-4 bg-white"></div>
+            :class="['size-12', { 'text-gray-500': step === 1 }]"
-          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+            @click="decreaseStep"
-          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          />
-          <div class="step grow h-[3px] mx-4 bg-gray-500"></div>
+          <StepProgress :step="step" />
-          <IconsArrowRightCircle class="size-12" />
+          <IconsArrowRightCircle
+            :class="['size-12', { 'text-gray-500': step === 4 }]"
+            @click="increaseStep"
+          />
         </div>
       </PanelBody>
     </Panel>
@@ -95,6 +94,16 @@ const password = ref<null | string>(null);
 const accept = ref<boolean>(true);
 const authStore = useAuthStore();
 
+const step = ref(1);
+
+function increaseStep() {
+  if (step.value < 4) step.value += 1;
+}
+
+function decreaseStep() {
+  if (step.value > 1) step.value -= 1;
+}
+
 type SetupError = {
   title: string;
   message: string;