feat: user authentication & login, register pages

components.d.ts

@@ -4,7 +4,14 @@
 declare module 'vue' {
   export interface GlobalComponents {
     Header: typeof import('./src/components/Header.vue')['default']
-    Input: typeof import('./src/components/Input.vue')['default']
+    LoginForm: typeof import('./src/components/LoginForm.vue')['default']
+    RegisterAccountLinks: typeof import('./src/components/RegisterAccountLinks.vue')['default']
+    SSOLogin: typeof import('./src/components/SSOLogin.vue')['default']
+    TheCheckbox: typeof import('./src/components/TheCheckbox.vue')['default']
+    TheInput: typeof import('./src/components/TheInput.vue')['default']
+    TheRadio: typeof import('./src/components/TheRadio.vue')['default']
+    TheSelect: typeof import('./src/components/TheSelect.vue')['default']
+    AuthLayout: typeof import('./src/components/layout/AuthLayout.vue')['default']
   }
 }
 

package.json

@@ -8,12 +8,16 @@
     "lint:fix": "eslint --fix --ext .js,.ts,.vue,.json ."
   },
   "dependencies": {
+    "@vee-validate/i18n": "^4.1.20",
+    "@vee-validate/rules": "^4.1.20",
     "@vueuse/core": "^5.0.2",
+    "vee-validate": "^4.4.4",
     "vue": "^3.1.1",
-    "vue-router": "^4.0.8"
+    "vue-router": "^4.0.8",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@hannoeru/eslint-config": "^0.1.1",
+    "@hannoeru/eslint-config": "^0.1.2",
     "@iconify/json": "^1.1.354",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vue/compiler-sfc": "^3.1.1",

src/components/LoginForm.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Form } from 'vee-validate'
+import type { LoginArgs } from '@/logics/auth'
+
+const schema = {
+  email: 'required|email',
+  password: 'required|min:8',
+  remember: '',
+}
+
+function onSubmit(values: LoginArgs) {
+  alert(JSON.stringify(values, null, 2))
+}
+</script>
+
+<template>
+  <Form v-slot="{ meta }" :validation-schema="schema" @submit="onSubmit">
+    <TheInput
+      name="email"
+      type="email"
+      label="帳號"
+      placeholder="user@example.com"
+      autocomplete="email"
+    />
+    <TheInput
+      name="password"
+      type="password"
+      label="密碼"
+      placeholder="password"
+      autocomplete="current-password"
+    />
+    <TheCheckbox
+      name="remember"
+      label="記住我"
+    />
+    <div class="flex mb-6 justify-between items-center">
+      <router-link to="/account/password_reset" class="text-sm underline">
+        忘記密碼
+      </router-link>
+      <button class="btn" type="submit" :disabled="!meta.valid">
+        登入
+      </button>
+    </div>
+  </Form>
+</template>