add: migration UI step

- rename: components
- fix: label for & form child id
- i18n french sup

src/app/components/setup/createAdminUser.vue → src/app/components/setup/adminUser.vue

@@ -7,6 +7,7 @@
     <div>
       <Label for="username">{{ $t('username') }}</Label>
       <input
+        id="username"
         v-model="username"
         form="newAccount"
         type="text"
@@ -17,6 +18,7 @@
     <div>
       <Label for="password">{{ $t('setup.newPassword') }}</Label>
       <input
+        id="password"
         v-model="password"
         form="newAccount"
         type="password"
@@ -26,7 +28,13 @@
     </div>
     <div>
       <Label for="accept">{{ $t('setup.accept') }}</Label>
-      <input v-model="accept" form="newAccount" type="checkbox" />
+      <input
+        id="accept"
+        v-model="accept"
+        form="newAccount"
+        type="checkbox"
+        class="ml-2"
+      />
     </div>
   </div>
 </template>

src/app/components/setup/updateHostPort.vue → src/app/components/setup/hostPort.vue

@@ -6,6 +6,7 @@
     <div>
       <Label for="host">{{ $t('setup.host') }}</Label>
       <input
+        id="host"
         v-model="host"
         type="text"
         :class="inputClass"
@@ -15,6 +16,7 @@
     <div>
       <Label for="port">{{ $t('setup.port') }}</Label>
       <input
+        id="port"
         v-model="port"
         type="number"
         :min="1"

src/app/components/setup/migration.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <p class="text-lg p-8 text-center">
+      {{ $t('setup.messageSetupMigration') }}
+    </p>
+    <div>
+      <Label for="migration">{{ $t('setup.migration') }}</Label>
+      <input id="migration" type="file" @change="onChangeFile" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+// const setupStore = useSetupStore();
+const { t } = useI18n();
+
+const emit = defineEmits(['validated']);
+
+const props = defineProps<{
+  next: boolean;
+}>();
+
+const next = toRef(props, 'next');
+const backupFile = ref<null | File>(null);
+
+watch(next, async (newVal) => {
+  if (newVal) {
+    await sendFile();
+  }
+});
+
+function onChangeFile(evt: Event) {
+  const target = evt.target as HTMLInputElement;
+  const file = target.files?.[0];
+
+  if (file) {
+    backupFile.value = file;
+  }
+}
+
+async function sendFile() {
+  if (!backupFile.value) {
+    emit('validated', {
+      title: t('setup.requirements'),
+      message: t('setup.emptyFields'),
+    });
+    return;
+  }
+
+  try {
+    // TODO: handle migration
+    emit('validated', null);
+  } catch (error) {
+    if (error instanceof FetchError) {
+      emit('validated', {
+        title: t('setup.requirements'),
+        message: error.data.message,
+      });
+    }
+  }
+}
+</script>

src/app/components/setup/validation.vue

@@ -7,10 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import { FetchError } from 'ofetch';
-
-const { t } = useI18n();
-
 const emit = defineEmits(['validated']);
 
 const props = defineProps<{
@@ -19,22 +15,9 @@ const props = defineProps<{
 
 const next = toRef(props, 'next');
 
-watch(next, async (newVal) => {
+watch(next, (newVal) => {
   if (newVal) {
-    await runNext();
-  }
-});
-
-async function runNext() {
-  try {
     emit('validated', null);
-  } catch (error) {
-    if (error instanceof FetchError) {
-      emit('validated', {
-        title: t('setup.requirements'),
-        message: error.data.message,
-      });
-    }
   }
-}
+});
 </script>

src/app/components/setup/welcome.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p class="text-2xl pt-8 px-8 text-center">
+      {{ $t('setup.messageWelcome.whatIs') }}
+    </p>
+    <p class="text-2xl pt-2 text-center text-red-600">
+      {{ $t('setup.messageWelcome.warning') }}
+    </p>
+    <p class="text-2xl pt-3 text-center">
+      {{ $t('setup.messageWelcome.next') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(['validated']);
+
+const props = defineProps<{
+  next: boolean;
+}>();
+
+const next = toRef(props, 'next');
+
+watch(next, (newVal) => {
+  if (newVal) {
+    emit('validated', null);
+  }
+});
+</script>

src/app/pages/setup.vue

@@ -7,30 +7,42 @@
           {{ $t('setup.welcome') }}
         </h2>
 
-        <SetupChooseLang
+        <SetupLang
           v-if="step === 1"
           :next="nextStep"
           @validated="handleValidatedStep"
         />
 
-        <SetupCreateAdminUser
+        <SetupWelcome
           v-if="step === 2"
           :next="nextStep"
           @validated="handleValidatedStep"
         />
 
-        <SetupUpdateHostPort
+        <SetupAdminUser
           v-if="step === 3"
           :next="nextStep"
           @validated="handleValidatedStep"
         />
 
-        <SetupValidation
+        <SetupHostPort
           v-if="step === 4"
           :next="nextStep"
           @validated="handleValidatedStep"
         />
 
+        <SetupMigration
+          v-if="step === 5"
+          :next="nextStep"
+          @validated="handleValidatedStep"
+        />
+
+        <SetupValidation
+          v-if="step === 6"
+          :next="nextStep"
+          @validated="handleValidatedStep"
+        />
+
         <div class="flex justify-between items-center mt-12">
           <IconsArrowLeftCircle
             :class="[
@@ -72,7 +84,7 @@ type SetupError = {
 
 /* STEP MANAGEMENT */
 const step = ref(1);
-const totalSteps = ref(4);
+const totalSteps = ref(6);
 const stepValide = ref<number[]>([]);
 const setupError = ref<null | SetupError>(null);
 const nextStep = ref(false);
@@ -117,7 +129,7 @@ function handleValidatedStep(error: null | SetupError) {
   }
 
   if (!error) {
-    if (step.value === 2 || step.value === 3) {
+    if (step.value === 3 || step.value === 4) {
       // if new admin user has been created, allow to skip this step if user returns to the previous steps
       stepValide.value.push(step.value);
     }

src/locales/en.json

@@ -14,9 +14,15 @@
   "confirmPassword": "Confirm Password",
   "setup": {
     "welcome": "Welcome to your first setup of wg-easy !",
+    "messageWelcome": {
+      "whatIs": "You have found the easiest way to install and manage WireGuard on any Linux host!",
+      "warning": "First of all, make sure you have a backup of your data if you want to migrate your users to your new wg-easy.",
+      "next": "Click on the arrow button to proceed to the next step."
+    },
     "messageSetupLanguage": "Please choose a default language.",
     "messageSetupCreateAdminUser": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
     "messageSetupHostPort": "Please enter the host and port information. This will be used for the client configuration when setting up WireGuard on their devices.",
+    "messageSetupMigration": "Please provide the backup file if you want to migrate your data from your previous wg-easy version to your new setup.",
     "messageSetupValidation": "Welcome to wg-easy ! The easiest way to run WireGuard VPN and Web-based Admin UI.",
     "emptyFields": "The fields are required",
     "chooseLang": "Select a language...",
@@ -29,7 +35,8 @@
     "host": "Host",
     "hostPlaceholder": "wg-easy.example.com",
     "port": "Port",
-    "portPlaceholder": "443"
+    "portPlaceholder": "443",
+    "migration": "Restore the backup"
   },
   "zod": {
     "id": "Client ID must be a valid UUID",

src/locales/fr.json

@@ -13,10 +13,16 @@
   "currentPassword": "Mot de passe actuel",
   "confirmPassword": "Confirmer le mot de passe",
   "setup": {
-    "welcome": "Bienvenue dans votre première configuration de wg-easy !",
+    "welcome": "Bienvenue à votre première installation de wg-easy !",
+    "messageWelcome": {
+      "whatIs": "Vous avez trouvé le moyen le plus simple d'installer et de gérer WireGuard sur n'importe quel hôte Linux !",
+      "warning": "Tout d'abord, assurez-vous d'avoir une sauvegarde de vos données si vous voulez migrer vos utilisateurs vers votre nouveau wg-easy.",
+      "next": "Cliquez sur la flèche pour passer à l'étape suivante."
+    },
     "messageSetupLanguage": "Sélectionner votre langue.",
     "messageSetupCreateAdminUser": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.",
     "messageSetupHostPort": "Veuillez entrer les informations de l'hôte et du port. Cela sera utilisé pour la configuration du client lors de la configuration de WireGuard sur leurs appareils.",
+    "messageSetupMigration": " Veuillez fournir le fichier de sauvegarde si vous souhaitez migrer vos données de la version précédente de wg-easy vers votre nouvelle installation.",
     "messageSetupValidation": "Bienvenue sur wg-easy ! La meilleur application pour administrer son serveur VPN WireGuard.",
     "emptyFields": "Des champs sont requis",
     "chooseLang": "Choisir une langue...",
@@ -29,7 +35,8 @@
     "host": "Hôte",
     "hostPlaceholder": "wg-easy.example.com",
     "port": "Port",
-    "portPlaceholder": "443"
+    "portPlaceholder": "443",
+    "migration": "Restaurer la sauvegarde"
   },
   "zod": {
     "id": "L'ID du client doit être un UUID valide",