Setup UI (#1392)

* update: setup ui page

* rebase

* remove script addition

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>
+      <h2
-      <p>Please first enter an admin username and a strong password.</p>
+        class="mt-8 mb-16 text-3xl font-medium text-gray-700 dark:text-neutral-200"
-      <form @submit="newAccount">
+      >
+        {{ $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>
+          <label for="accept" class="inline-block my-4 mr-4">{{
-          <input id="accept" type="checkbox" name="accept" />
+            $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/locales/en.json

@@ -1,4 +1,15 @@
 {
+  "setup": {
+    "welcome": "Welcome to your first setup of wg-easy !",
+    "msg": "Please first enter an admin username and a strong secure password. This information will be used to log in to your administration panel.",
+    "newPassword": "New Password",
+    "accept": "I accept the condition",
+    "submitBtn": "Create admin account",
+    "usernameCondition": "The username must contain at least 8 characters.",
+    "passwordCondition": "The password must contain at least 12 characters, including 1 uppercase letter, 1 lowercase letter, 1 digit, and 1 special character.",
+    "usernamePlaceholder": "Administrator",
+    "passwordPlaceholder": "Strong password"
+  },
   "name": "Name",
   "username": "Username",
   "password": "Password",

src/locales/fr.json

@@ -1,4 +1,15 @@
 {
+  "setup": {
+    "welcome": "Bienvenue à la page de configuration de votre wg-easy !",
+    "msg": "Veuillez renseigner votre nom d'utilisateur et votre mot de passe. Ces informations seront utilisées pour vous connecter à votre page d'administration.",
+    "newPassword": "Nouveau mot de passe",
+    "accept": "J'accepte les conditions d'utilisation",
+    "submitBtn": "Créer un nouveau compte",
+    "usernameCondition": "Le nom d'utilisateur doit contenir au moins 8 caractères.",
+    "passwordCondition": "Le mot de passe doit contenir au moins 12 caractères dont 1 majuscule, 1 minuscule, 1 chiffre et 1 caractère spécial.",
+    "usernamePlaceholder": "Administrateur",
+    "passwordPlaceholder": "Mot de passe sapau"
+  },
   "name": "Nom",
   "password": "Mot de passe",
   "signIn": "Se Connecter",