update: setup ui page

src/app/layouts/Header.vue

@@ -8,7 +8,7 @@
       "
     >
       <h1
-        v-if="!isLoginPage"
+        v-if="isLoginPage"
         class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
       >
         <img

src/app/pages/setup.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="container mx-auto px-4">
     <h1
       class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center"
     >
@@ -7,40 +7,59 @@
       <span class="align-middle">WireGuard</span>
     </h1>
     <div
-      class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-96 p-5 overflow-hidden mt-10 text-gray-700 dark:text-neutral-200"
+      class="flex flex-col items-center lg:w-[60%] mx-auto shadow rounded-md bg-white dark:bg-neutral-700 p-5 overflow-hidden mt-10 text-gray-700 dark:text-neutral-200"
     >
-      <h2>Welcome to your first setup of wg-easy !</h2>
-      <p>Please first enter an admin username and a strong password.</p>
-      <form @submit="newAccount">
+      <h2
+        class="mt-8 mb-16 text-3xl font-medium text-gray-700 dark:text-neutral-200"
+      >
+        {{ $t('setup.welcome') }}
+      </h2>
+      <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
+      <form class="mb-8" @submit="newAccount">
         <div>
-          <label for="username">Username</label>
+          <label for="username" class="inline-block py-2">{{
+            $t('username')
+          }}</label>
           <input
             id="username"
             v-model="username"
             type="text"
             name="username"
             autocomplete="username"
+            :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 outline-none"
+            required="true"
           />
+          <small v-if="errorCU" class="text-danger">{{
+            $t('setup.usernameCondition')
+          }}</small>
         </div>
         <div>
-          <label for="password">New Password</label>
+          <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 outline-none"
+            required="true"
           />
+          <small v-if="errorPWD" class="text-danger">{{
+            $t('setup.passwordCondition')
+          }}</small>
         </div>
         <div>
-          <label for="accept">I accept the condition</label>
-          <input id="accept" type="checkbox" name="accept" />
+          <label for="accept" class="inline-block my-4 mr-4">{{
+            $t('setup.accept')
+          }}</label>
+          <input id="accept" type="checkbox" name="accept" required="true" />
         </div>
-        <input
+        <button
           type="submit"
-          value="Save"
           :class="[
             {
               'bg-red-800 dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer':
@@ -48,9 +67,11 @@
               'bg-gray-200 dark:bg-neutral-800 cursor-not-allowed':
                 !password && !username,
             },
-            'w-full rounded shadow py-2 text-sm text-white dark:text-white',
+            'w-max px-4 rounded shadow py-2 text-sm text-white dark:text-white',
           ]"
-        />
+        >
+          {{ $t('setup.submitBtn') }}
+        </button>
       </form>
     </div>
   </main>
@@ -61,6 +82,9 @@ const username = ref<null | string>(null);
 const password = ref<null | string>(null);
 const authStore = useAuthStore();
 
+const errorCU = ref(false);
+const errorPWD = ref(false);
+
 async function newAccount(e: Event) {
   e.preventDefault();
 
@@ -74,6 +98,7 @@ async function newAccount(e: Event) {
   } catch (error) {
     if (error instanceof Error) {
       // TODO: replace alert with actual ui error message
+      // TODO: also use errorCU & errorPWD to show prompt error
       alert(error.message || error.toString());
     }
   }

src/package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "rm -rf /tmp/nitro && nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",