improve setup

src/app/components/Base/Tooltip.vue

@@ -1,14 +1,17 @@
 <template>
   <TooltipProvider>
-    <TooltipRoot>
+    <TooltipRoot :open="open" @update:open="open = $event">
       <TooltipTrigger
-        class="inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        class="mx-2 inline-flex h-4 w-4 items-center justify-center rounded-full text-gray-400 outline-none focus:shadow-sm focus:shadow-black"
+        as-child
       >
-        <slot />
+        <button @click="open = !open">
+          <slot />
+        </button>
       </TooltipTrigger>
       <TooltipPortal>
         <TooltipContent
-          class="select-none rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
+          class="select-none whitespace-pre-line rounded bg-gray-600 px-3 py-2 text-sm leading-none text-white shadow-lg will-change-[transform,opacity]"
           :side-offset="5"
         >
           {{ text }}
@@ -21,4 +24,6 @@
 
 <script lang="ts" setup>
 defineProps<{ text: string }>();
+
+const open = ref(false);
 </script>

src/app/layouts/setup.vue

@@ -11,8 +11,8 @@
     </header>
     <main>
       <Panel>
-        <PanelBody class="mx-auto mt-10 p-4 md:w-[70%] lg:w-[60%]">
-          <h2 class="mb-16 mt-8 text-3xl font-medium">
+        <PanelBody class="m-4 mx-auto mt-10 md:w-[70%] lg:w-[60%]">
+          <h2 class="mb-16 mt-8 text-center text-3xl font-medium">
             {{ $t('setup.welcome') }}
           </h2>
 

src/app/pages/setup/1.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <p class="px-8 pt-8 text-center text-2xl">
+  <div class="flex flex-col items-center">
+    <p class="px-8 text-center text-2xl">
       {{ $t('setup.welcomeDesc') }}
     </p>
-    <NuxtLink to="/setup/2">
+    <NuxtLink to="/setup/2" class="mt-8">
       <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
     </NuxtLink>
   </div>

src/app/pages/setup/2.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
       {{ $t('setup.createAdminDesc') }}
     </p>
-    <div class="flex flex-col gap-3">
+    <div class="mt-8 flex flex-col gap-3">
       <div class="flex flex-col">
         <FormNullTextField
           id="username"
@@ -28,7 +28,7 @@
           :label="$t('general.confirmPassword')"
         />
       </div>
-      <div>
+      <div class="mt-4 flex justify-center">
         <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
       </div>
     </div>

src/app/pages/setup/3.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
       {{ $t('setup.existingSetup') }}
     </p>
-    <div class="mb-8 flex justify-center">
-      <NuxtLink to="/setup/4">
-        <BaseButton as="span">{{ $t('general.no') }}</BaseButton>
+    <div class="mt-4 flex justify-center gap-3">
+      <NuxtLink to="/setup/4" class="w-20">
+        <BaseButton as="span" class="w-full justify-center">
+          {{ $t('general.no') }}
+        </BaseButton>
       </NuxtLink>
-      <NuxtLink to="/setup/migrate">
-        <BaseButton as="span">{{ $t('general.yes') }}</BaseButton>
+      <NuxtLink to="/setup/migrate" class="w-20">
+        <BaseButton as="span" class="w-full justify-center">
+          {{ $t('general.yes') }}
+        </BaseButton>
       </NuxtLink>
     </div>
   </div>

src/app/pages/setup/4.vue

@@ -1,21 +1,27 @@
 <template>
   <div>
-    <p class="p-8 text-center text-lg">
+    <p class="text-center text-lg">
       {{ $t('setup.setupConfigDesc') }}
     </p>
-    <div class="flex flex-col gap-3">
+    <div class="mt-8 flex flex-col gap-3">
       <div class="flex flex-col">
         <FormNullTextField
           id="host"
           v-model="host"
           :label="$t('general.host')"
           placeholder="vpn.example.com"
+          :description="$t('setup.hostDesc')"
         />
       </div>
       <div class="flex flex-col">
-        <FormNumberField id="port" v-model="port" :label="$t('general.port')" />
+        <FormNumberField
+          id="port"
+          v-model="port"
+          :label="$t('general.port')"
+          :description="$t('setup.portDesc')"
+        />
       </div>
-      <div>
+      <div class="mt-4 flex justify-center">
         <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
       </div>
     </div>

src/app/pages/setup/migrate.vue

@@ -1,13 +1,15 @@
 <template>
-  <div>
-    <p class="p-8 text-center text-lg">
+  <div class="flex flex-col items-center">
+    <p class="text-center text-lg">
       {{ $t('setup.setupMigrationDesc') }}
     </p>
-    <div>
+    <div class="mt-8 flex gap-3">
       <Label for="migration">{{ $t('setup.migration') }}</Label>
       <input id="migration" type="file" @change="onChangeFile" />
     </div>
-    <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+    <div class="mt-4">
+      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+    </div>
   </div>
 </template>
 

src/app/pages/setup/success.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col items-center">
     <p>{{ $t('setup.successful') }}</p>
-    <NuxtLink to="/login">
+    <NuxtLink to="/login" class="mt-4">
       <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
     </NuxtLink>
   </div>

src/i18n/locales/en.json

@@ -35,16 +35,18 @@
     "confirmPassword": "Confirm Password"
   },
   "setup": {
-    "welcome": "Welcome to your first setup of wg-easy !",
-    "welcomeDesc": "You have found the easiest way to install and manage WireGuard on any Linux host!",
+    "welcome": "Welcome to your first setup of wg-easy",
+    "welcomeDesc": "You have found the easiest way to install and manage WireGuard on any Linux host",
     "existingSetup": "Do you have an existing setup?",
     "createAdminDesc": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
     "setupConfigDesc": "Please enter the host and port information. This will be used for the client configuration when setting up WireGuard on their devices.",
     "setupMigrationDesc": "Please provide the backup file if you want to migrate your data from your previous wg-easy version to your new setup.",
     "upload": "Upload",
-    "migration": "Restore the backup",
+    "migration": "Restore the backup:",
     "createAccount": "Create Account",
-    "successful": "Setup successful"
+    "successful": "Setup successful",
+    "hostDesc": "Public hostname clients will connect to\nIPv6 address has to be in square brackets",
+    "portDesc": "Public UDP port clients will connect to (same as port mapping)"
   },
   "update": {
     "updateAvailable": "There is an update available!",

src/nuxt.config.ts

@@ -28,7 +28,9 @@ export default defineNuxtConfig({
     },
     locales: [
       {
+        // same as i18n.config.ts
         code: 'en',
+        // BCP 47 language tag
         language: 'en-US',
         name: 'English',
       },