From ccbcab1bf3748a5a43f8142c4c7671e026a5e11b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 25 Jul 2023 19:24:10 +0200
Subject: [PATCH] update Login view with form components

---
 package.json    |   1 +
 pages/login.vue | 105 ++++++++++++++++++++++++------------------------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index 01bb405..a9c10a6 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "@vee-validate/yup": "^4.10.8",
     "vee-validate": "^4.10.8"
   }
 }
diff --git a/pages/login.vue b/pages/login.vue
index f2c3781..8e4998a 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import * as yup from 'yup'
+
+definePageMeta({
+  layout: false,
+})
+
 const isLoggedIn = useIsLoggedIn()
 
-const form = {
-  username: '',
-  password: '',
-}
+const { t } = useI18n()
 
-async function login() {
+async function login(form) {
   const { error } = await useApi('/login', {
     method: 'POST',
     body: { credentials: form.username + ':' + form.password },
@@ -19,54 +22,52 @@ async function login() {
     // FIXME : display an error or something
   }
 }
+
+const schema = {
+  username: yup.string().required(),
+  password: yup.string().required(),
+}
 </script>
 
 <template>
-  <div class="w-80 mx-auto pt-20">
-    <img class="flex-none mx-auto w-1/2 p-5" src="/assets/img/logo-white.svg" />
-    <form method="POST" @submit.prevent="login">
-      <div class="flex items-center mb-6">
-        <div class="w-1/6">
-          <label class="pl-3" for="login-username">
-            <Icon name="mdi:account-circle" size="2em" class="text-gray-400" />
-          </label>
-        </div>
-        <div class="">
-          <input
-            id="login-username"
-            v-model="form.username"
-            class="text-gray-700 rounded py-2 px-4"
-            type="text"
-            placeholder="username"
-          />
-        </div>
-      </div>
-      <div class="flex items-center mb-6">
-        <div class="w-1/6">
-          <label class="pl-3" for="login-password">
-            <Icon name="mdi:lock" size="2em" class="text-gray-400" />
-          </label>
-        </div>
-        <div class="">
-          <input
-            id="login-password"
-            v-model="form.password"
-            class="text-gray-700 rounded py-2 px-4"
-            type="password"
-            placeholder="******************"
-          />
-        </div>
-      </div>
-      <div class="flex items-center">
-        <div class="w-full">
-          <button
-            class="w-full bg-indigo-500 hover:bg-indigo-400 font-bold py-2 px-4 rounded"
-            type="submit"
-          >
-            Connect
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
+  <main class="w-50 m-auto">
+    <img
+      class="flex-none mx-auto w-1/2 mb-10"
+      src="/assets/img/logo-white.svg"
+    />
+
+    <BaseForm :schema="schema" @submit="login">
+      <FormField
+        name="username"
+        :label="t('username')"
+        icon="mdi:account-circle"
+        class="mb-4"
+      >
+        <TextInput name="username" type="text" :placeholder="t('username')" />
+      </FormField>
+
+      <FormField
+        name="password"
+        :label="t('password')"
+        icon="mdi:lock"
+        class="mb-4"
+      >
+        <TextInput
+          name="password"
+          type="password"
+          :placeholder="t('password')"
+        />
+      </FormField>
+
+      <YButton type="submit" block>
+        {{ t('login') }}
+      </YButton>
+    </BaseForm>
+  </main>
 </template>
+
+<style>
+#__nuxt {
+  @apply min-h-screen flex;
+}
+</style>