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,9 +7,8 @@
           {{ $t('setup.welcome') }}
         </h2>
 
-        <div class="tab">
+        <div v-if="step === 1">
           <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
-          <form>
           <div>
             <label for="username" class="inline-block py-2">{{
               $t('username')
@@ -17,6 +16,7 @@
             <input
               id="username"
               v-model="username"
+              form="formulaire"
               type="text"
               name="username"
               autocomplete="username"
@@ -32,6 +32,7 @@
             <input
               id="password"
               v-model="password"
+              form="formulaire"
               type="password"
               name="password"
               autocomplete="new-password"
@@ -43,35 +44,33 @@
             <Label for="accept" class="inline-block my-4 mr-4">{{
               $t('setup.accept')
             }}</Label>
-              <input
+            <input id="accept" v-model="accept" type="checkbox" name="accept" />
-                id="accept"
-                v-model="accept"
-                type="checkbox"
-                name="accept"
-              />
           </div>
-          </form>
+          <form id="formulaire"></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;