From 53ad547dd08186686780063699f62e0ad08f89cb Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:51:22 +0200
Subject: [PATCH] update: login page

---
 src/app/components/error/Toast.vue   |   2 +-
 src/app/components/panel/Panel.vue   |   2 +-
 src/app/pages/login.vue              |  41 +++++++--
 src/app/pages/me.vue                 |   2 +
 src/app/pages/setup.vue              | 132 ++++++++++++++-------------
 src/app/stores/auth.ts               |   4 +-
 src/app/utils/api.ts                 |   4 +-
 src/locales/en.json                  |   4 +-
 src/server/api/account/setup.post.ts |   2 +-
 src/server/api/session.post.ts       |   2 +-
 src/server/utils/types.ts            |  13 +++
 11 files changed, 128 insertions(+), 80 deletions(-)

diff --git a/src/app/components/error/Toast.vue b/src/app/components/error/Toast.vue
index 6eff1611..efde0da4 100644
--- a/src/app/components/error/Toast.vue
+++ b/src/app/components/error/Toast.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 
 const open = ref(true);
 
-const autoCloseToast = props.duration ? Number(props.duration) : 5000; // 5 seconds
+const autoCloseToast = props.duration ? Number(props.duration) : 12000; // 12 seconds
 
 onMounted(() => {
   setTimeout(() => {
diff --git a/src/app/components/panel/Panel.vue b/src/app/components/panel/Panel.vue
index f9b7d433..3777a9e0 100644
--- a/src/app/components/panel/Panel.vue
+++ b/src/app/components/panel/Panel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container mx-auto max-w-3xl px-3 md:px-0">
     <div
-      class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"
+      class="shadow-md rounded-lg bg-white dark:bg-neutral-700 text-gray-700 dark:text-neutral-200 overflow-hidden"
     >
       <slot />
     </div>
diff --git a/src/app/pages/login.vue b/src/app/pages/login.vue
index 11a5ae85..098a1c69 100644
--- a/src/app/pages/login.vue
+++ b/src/app/pages/login.vue
@@ -1,8 +1,6 @@
 <template>
-  <section>
-    <h1
-      class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center"
-    >
+  <section class="text-gray-700 dark:text-neutral-200">
+    <h1 class="text-4xl font-medium my-16 text-center">
       <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
       <span class="align-middle">WireGuard</span>
     </h1>
@@ -79,16 +77,41 @@
         :value="$t('signIn')"
       />
     </form>
+
+    <ErrorToast
+      v-if="setupError"
+      :title="setupError.title"
+      :message="setupError.message"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
+import { FetchError } from 'ofetch';
+
+const { t } = useI18n();
+
 const authenticating = ref(false);
 const remember = ref(false);
 const username = ref<null | string>(null);
 const password = ref<null | string>(null);
 const authStore = useAuthStore();
 
+type SetupError = {
+  title: string;
+  message: string;
+};
+
+const setupError = ref<null | SetupError>(null);
+
+watch(setupError, (value) => {
+  if (value) {
+    setTimeout(() => {
+      setupError.value = null;
+    }, 13000);
+  }
+});
+
 async function login(e: Event) {
   e.preventDefault();
 
@@ -104,10 +127,12 @@ async function login(e: Event) {
     if (res) {
       await navigateTo('/');
     }
-  } catch (err) {
-    if (err instanceof Error) {
-      // TODO: replace alert with actual ui error message
-      alert(err.message || err.toString());
+  } catch (error) {
+    if (error instanceof FetchError) {
+      setupError.value = {
+        title: t('error.login'),
+        message: error.data.message,
+      };
     }
   }
   authenticating.value = false;
diff --git a/src/app/pages/me.vue b/src/app/pages/me.vue
index 6c12e66a..59a084f2 100644
--- a/src/app/pages/me.vue
+++ b/src/app/pages/me.vue
@@ -108,6 +108,8 @@ const username = ref(authStore.userData?.username);
 const name = ref(authStore.userData?.name);
 const email = ref(authStore.userData?.email);
 
+// TODO: handle update password
+
 const currentPassword = ref(authStore.userData?.email);
 const newPassword = ref(authStore.userData?.email);
 const confirmPassword = ref(authStore.userData?.email);
diff --git a/src/app/pages/setup.vue b/src/app/pages/setup.vue
index a90dc2ec..c1ec8a01 100644
--- a/src/app/pages/setup.vue
+++ b/src/app/pages/setup.vue
@@ -1,77 +1,75 @@
 <template>
   <main class="container mx-auto px-4">
     <h1
-      class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center"
+      class="text-4xl font-medium my-16 text-center text-gray-700 dark:text-neutral-200"
     >
       <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
       <span class="align-middle">WireGuard</span>
     </h1>
-    <div
-      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
-        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.prevent="newAccount">
-        <div>
-          <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"
-          />
-        </div>
-        <div>
-          <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"
-          />
-        </div>
-        <div>
-          <Label for="accept" class="inline-block my-4 mr-4">{{
-            $t('setup.accept')
-          }}</Label>
-          <input id="accept" type="checkbox" name="accept" />
-        </div>
-        <button
-          type="submit"
-          :class="[
-            {
-              'bg-red-800 dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer':
-                password && username,
-              'bg-gray-200 dark:bg-neutral-800 cursor-not-allowed':
-                !password && !username,
-            },
-            'w-max px-4 rounded shadow py-2 text-sm text-white dark:text-white',
-          ]"
-        >
-          {{ $t('setup.submitBtn') }}
-        </button>
-      </form>
-    </div>
+    <Panel>
+      <PanelBody class="lg:w-[60%] mx-auto mt-10 p-4">
+        <h2 class="mt-8 mb-16 text-3xl font-medium">
+          {{ $t('setup.welcome') }}
+        </h2>
+        <p class="text-lg p-8">{{ $t('setup.msg') }}</p>
+        <form class="mb-8" @submit.prevent="newAccount">
+          <div>
+            <label for="username" class="inline-block py-2">{{
+              $t('username')
+            }}</label>
+            <input
+              id="username"
+              v-model="username"
+              type="text"
+              name="username"
+              autocomplete="username"
+              autofocus
+              :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 focus:outline-0 focus:ring-0"
+            />
+          </div>
+          <div>
+            <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 focus:outline-0 focus:ring-0"
+            />
+          </div>
+          <div>
+            <Label for="accept" class="inline-block my-4 mr-4">{{
+              $t('setup.accept')
+            }}</Label>
+            <input id="accept" v-model="accept" type="checkbox" name="accept" />
+          </div>
+          <button
+            type="submit"
+            :class="[
+              {
+                'bg-red-800 dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer':
+                  password && username,
+                'bg-gray-200 dark:bg-neutral-800 cursor-not-allowed':
+                  !password && !username,
+              },
+              'w-max px-4 rounded shadow py-2 text-sm text-white dark:text-white',
+            ]"
+          >
+            {{ $t('setup.submitBtn') }}
+          </button>
+        </form>
+      </PanelBody>
+    </Panel>
 
     <ErrorToast
       v-if="setupError"
       :title="setupError.title"
       :message="setupError.message"
-      :duration="12000"
     />
   </main>
 </template>
@@ -80,8 +78,10 @@
 import { FetchError } from 'ofetch';
 
 const { t } = useI18n();
+
 const username = ref<null | string>(null);
 const password = ref<null | string>(null);
+const accept = ref<boolean>(true);
 const authStore = useAuthStore();
 
 type SetupError = {
@@ -95,7 +95,7 @@ watch(setupError, (value) => {
   if (value) {
     setTimeout(() => {
       setupError.value = null;
-    }, 6000);
+    }, 13000);
   }
 });
 
@@ -103,7 +103,11 @@ async function newAccount() {
   if (!username.value || !password.value) return;
 
   try {
-    const res = await authStore.signup(username.value, password.value);
+    const res = await authStore.signup(
+      username.value,
+      password.value,
+      accept.value
+    );
     if (res) {
       navigateTo('/login');
     }
diff --git a/src/app/stores/auth.ts b/src/app/stores/auth.ts
index 1f282b03..fbb2e9e4 100644
--- a/src/app/stores/auth.ts
+++ b/src/app/stores/auth.ts
@@ -9,8 +9,8 @@ export const useAuthStore = defineStore('Auth', () => {
   /**
    * @throws if unsuccessful
    */
-  async function signup(username: string, password: string) {
-    const response = await api.setupAccount({ username, password });
+  async function signup(username: string, password: string, accept: boolean) {
+    const response = await api.setupAccount({ username, password, accept });
     return response.success;
   }
 
diff --git a/src/app/utils/api.ts b/src/app/utils/api.ts
index 7ef85a89..a42608dd 100644
--- a/src/app/utils/api.ts
+++ b/src/app/utils/api.ts
@@ -118,13 +118,15 @@ class API {
   async setupAccount({
     username,
     password,
+    accept,
   }: {
     username: string;
     password: string;
+    accept: boolean;
   }) {
     return $fetch('/api/account/setup', {
       method: 'post',
-      body: { username, password },
+      body: { username, password, accept },
     });
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 5302d225..a77f3be6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -36,6 +36,7 @@
     "passwordLowercase": "Password must have at least 1 lowercase letter",
     "passwordNumber": "Password must have at least 1 number",
     "passwordSpecial": "Password must have at least 1 special character",
+    "accept": "Please accept the condition",
     "remember": "Remember must be a valid boolean",
     "expireDate": "expiredDate must be a valid string",
     "expireDateMin": "expiredDate must be at least 1 Character",
@@ -94,6 +95,7 @@
   "OneTimeLink": "Generate short one time link",
   "errorInit": "Initialization failed.",
   "error": {
-    "clear": "Clear"
+    "clear": "Clear",
+    "login": "Log in error"
   }
 }
diff --git a/src/server/api/account/setup.post.ts b/src/server/api/account/setup.post.ts
index e3f54a6a..f70749a1 100644
--- a/src/server/api/account/setup.post.ts
+++ b/src/server/api/account/setup.post.ts
@@ -1,7 +1,7 @@
 export default defineEventHandler(async (event) => {
   const { username, password } = await readValidatedBody(
     event,
-    validateZod(passwordType, event)
+    validateZod(passwordSetupType, event)
   );
   const users = await Database.user.findAll();
   if (users.length !== 0) {
diff --git a/src/server/api/session.post.ts b/src/server/api/session.post.ts
index 6c76ef2d..364c7603 100644
--- a/src/server/api/session.post.ts
+++ b/src/server/api/session.post.ts
@@ -3,7 +3,7 @@ import type { SessionConfig } from 'h3';
 export default defineEventHandler(async (event) => {
   const { username, password, remember } = await readValidatedBody(
     event,
-    validateZod(credentialsType)
+    validateZod(credentialsType, event)
   );
 
   const users = await Database.user.findAll();
diff --git a/src/server/utils/types.ts b/src/server/utils/types.ts
index da382122..17a62027 100644
--- a/src/server/utils/types.ts
+++ b/src/server/utils/types.ts
@@ -36,6 +36,10 @@ const password = z
   .regex(/[!@#$%^&*(),.?":{}|<>]/, 'zod.passwordSpecial') // i18n key
   .pipe(safeStringRefine);
 
+const accept = z.boolean().refine((val) => val === true, {
+  message: 'zod.accept',
+}); // i18n key
+
 const remember = z.boolean({ message: 'zod.remember' }); // i18n key
 
 const expireDate = z
@@ -137,6 +141,15 @@ export const passwordType = z.object(
   { message: objectMessage }
 );
 
+export const passwordSetupType = z.object(
+  {
+    username: username,
+    password: password,
+    accept: accept,
+  },
+  { message: objectMessage }
+);
+
 export const featuresType = z.object(
   {
     features: features,