From 6c86cc30a636d5f4cd2f3f41d2b054facb9e0c9d Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Wed, 9 Jun 2021 22:41:47 +0900
Subject: [PATCH 01/13] feat: add login form validation

---
 components.d.ts                      |  4 ++
 package.json                         |  3 ++
 pnpm-lock.yaml                       | 22 ++++++++++
 src/components/Checkbox.vue          | 42 +++++++++++++++++++
 src/components/Input.vue             | 63 +++++++++++++++++-----------
 src/components/LoginForm.vue         | 45 ++++++++++++++++++++
 src/components/RegisterAccount.vue   | 20 +++++++++
 src/components/SSOLogin.vue          | 24 +++++++++++
 src/logics/auth.ts                   | 15 +++++++
 src/main.ts                          |  4 ++
 src/pages/account/password_reset.vue | 12 ++++++
 src/pages/login.vue                  | 57 ++-----------------------
 src/plugins/vee-validate.ts          | 19 +++++++++
 tsconfig.json                        |  8 +++-
 windi.config.ts                      |  5 ++-
 15 files changed, 263 insertions(+), 80 deletions(-)
 create mode 100644 src/components/Checkbox.vue
 create mode 100644 src/components/LoginForm.vue
 create mode 100644 src/components/RegisterAccount.vue
 create mode 100644 src/components/SSOLogin.vue
 create mode 100644 src/pages/account/password_reset.vue
 create mode 100644 src/plugins/vee-validate.ts

diff --git a/components.d.ts b/components.d.ts
index b12a615..d27f5a9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -3,8 +3,12 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Checkbox: typeof import('./src/components/Checkbox.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     Input: typeof import('./src/components/Input.vue')['default']
+    LoginForm: typeof import('./src/components/LoginForm.vue')['default']
+    RegisterAccount: typeof import('./src/components/RegisterAccount.vue')['default']
+    SSOLogin: typeof import('./src/components/SSOLogin.vue')['default']
   }
 }
 
diff --git a/package.json b/package.json
index 99bc0af..0b76e73 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,10 @@
     "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"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ce63e2..188cde7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,11 +3,14 @@ lockfileVersion: 5.3
 specifiers:
   '@hannoeru/eslint-config': ^0.1.1
   '@iconify/json': ^1.1.354
+  '@vee-validate/i18n': ^4.1.20
+  '@vee-validate/rules': ^4.1.20
   '@vitejs/plugin-vue': ^1.2.3
   '@vue/compiler-sfc': ^3.1.1
   '@vueuse/core': ^5.0.2
   eslint: ^7.28.0
   typescript: ^4.3.2
+  vee-validate: ^4.4.4
   vite: ^2.3.7
   vite-plugin-components: ^0.10.4
   vite-plugin-icons: ^0.6.1
@@ -19,7 +22,10 @@ specifiers:
   windicss: ^3.1.3
 
 dependencies:
+  '@vee-validate/i18n': 4.1.20
+  '@vee-validate/rules': 4.1.20
   '@vueuse/core': 5.0.2_vue@3.1.1
+  vee-validate: 4.4.4_vue@3.1.1
   vue: 3.1.1
   vue-router: 4.0.8_vue@3.1.1
 
@@ -646,6 +652,14 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /@vee-validate/i18n/4.1.20:
+    resolution: {integrity: sha512-3K7R3m3Z206Hq6iJpXHJNSYDjJFFHzZrA7wjowTts52iEsv9kNpA/WCkdJsQLae8J+QLiKyK53ma35gAet8yFg==}
+    dev: false
+
+  /@vee-validate/rules/4.1.20:
+    resolution: {integrity: sha512-DsG+NrCv/rEIpEEOqv+R7Za5rsA9xdIq4XEARjcHI3liXgkd8aeNWCnnmGyDbkz2BVav7n37IhP16ceJHnFXBA==}
+    dev: false
+
   /@vitejs/plugin-vue/1.2.3_@vue+compiler-sfc@3.1.1:
     resolution: {integrity: sha512-LlnLpObkGKZ+b7dcpL4T24l13nPSHLjo+6Oc7MbZiKz5PMAUzADfNJ3EKfYIQ0l0969nxf2jp/9vsfnuJ7h6fw==}
     engines: {node: '>=12.0.0'}
@@ -4206,6 +4220,14 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vee-validate/4.4.4_vue@3.1.1:
+    resolution: {integrity: sha512-1zVt1wJEE/I7ozD2Ixrz7pfAbcZsCItvSNVJq3CAw48cKZOM/m6i8IM/LfbhwIs/HF4xjx0G7YbMQZTG6N8keA==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.1.1
+    dev: false
+
   /vfile-message/1.1.1:
     resolution: {integrity: sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==}
     dependencies:
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
new file mode 100644
index 0000000..bbb8b5c
--- /dev/null
+++ b/src/components/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { Field } from 'vee-validate'
+
+defineProps({
+  value: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <Field
+    v-slot="{ field, errorMessage }"
+    :name="name"
+    type="checkbox"
+    :value="value"
+    class="relative w-full pb-6"
+    as="div"
+  >
+    <label class="ml-2">
+      <input type="checkbox" :name="name" v-bind="field" :value="value" :disabled="disabled">
+      {{ label }}
+    </label>
+    <p v-show="errorMessage" class="absolute left-0 bottom-0.5 m-0 text-xs text-red-400">
+      {{ errorMessage }}
+    </p>
+  </Field>
+</template>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 1635999..4d03cc0 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import { defineEmit, defineProps, ref, watch } from 'vue'
-
-const input = ref<HTMLInputElement | null>(null)
+import { defineProps } from 'vue'
+import { useField } from 'vee-validate'
 
 const props = defineProps({
-  modelValue: {
+  type: {
     type: String,
-    default: '',
+    default: 'text',
   },
-  label: {
+  value: {
     type: String,
     default: '',
   },
-  type: {
+  name: {
     type: String,
-    default: 'text',
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
   },
   autocomplete: {
     type: String,
@@ -27,32 +30,42 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-
-const emit = defineEmit(['input', 'update:modelValue'])
 
-watch(() => props.modelValue, (v) => {
-  if (!input.value || input.value.value === v) return
-  input.value.value = v
 })
 
-function handleInput(event: Event) {
-  const { value } = event.target as HTMLInputElement
-  emit('input', value)
-  emit('update:modelValue', value)
-}
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  handleChange,
+} = useField(props.name, undefined, {
+  initialValue: props.value,
+})
 
 </script>
 
 <template>
-  <label class="block my-2">
-    <span class="block text-sm mb-1">{{ label }}</span>
+  <div class="relative w-full pb-6">
+    <label :for="name" class="block mb-1">
+      {{ label }}
+    </label>
     <input
-      class="px-3 py-2 border w-full rounded-md"
+      :id="name"
+      :name="name"
       :type="type"
-      :placeholder="placeholder"
+      :value="inputValue"
       :autocomplete="autocomplete"
-      @input="handleInput"
+      :placeholder="placeholder"
+      class="
+        border border-tansparent rounded-md
+        px-3 py-2 outline-none w-full
+        focus:border-gray-400"
+      :class="{ 'border-red-400': !!errorMessage }"
+      @input="handleChange"
+      @blur="handleBlur"
     >
-  </label>
+    <p v-show="errorMessage" class="absolute left-0 bottom-0.5 m-0 text-xs text-red-400">
+      {{ errorMessage }}
+    </p>
+  </div>
 </template>
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
new file mode 100644
index 0000000..6657836
--- /dev/null
+++ b/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">
+    <Input
+      name="email"
+      type="email"
+      label="帳號"
+      placeholder="user@example.com"
+      autocomplete="email"
+    />
+    <Input
+      name="password"
+      type="password"
+      label="密碼"
+      placeholder="password"
+      autocomplete="current-password"
+    />
+    <Checkbox
+      name="remember"
+      label="記住我"
+    />
+    <div class="flex justify-between items-center mb-4">
+      <router-link to="/account/password_reset" class="text-sm underline">
+        忘記密碼
+      </router-link>
+      <button class="btn" type="submit" :disabled="!meta.valid">
+        登入
+      </button>
+    </div>
+  </Form>
+</template>
diff --git a/src/components/RegisterAccount.vue b/src/components/RegisterAccount.vue
new file mode 100644
index 0000000..d6ad957
--- /dev/null
+++ b/src/components/RegisterAccount.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps({})
+
+</script>
+
+<template>
+  <div>
+    <span class="block py-2">註冊帳號：</span>
+    <div class="flex space-x-4 text-center">
+      <router-link to="#" class="flex-1 btn btn-outline">
+        機構單位
+      </router-link>
+      <router-link to="#" class="flex-1 btn">
+        一般民眾
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/src/components/SSOLogin.vue b/src/components/SSOLogin.vue
new file mode 100644
index 0000000..1ac291c
--- /dev/null
+++ b/src/components/SSOLogin.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useAuth } from '@/logics/auth'
+
+const {
+  loginWithLine,
+  loginWithFacebook,
+  loginWithTwitter,
+} = useAuth()
+
+</script>
+
+<template>
+  <div class="space-y-2 mb-2">
+    <button class="btn w-full bg-line" @click="loginWithLine">
+      Line 登入
+    </button>
+    <button class="btn w-full bg-facebook" @click="loginWithFacebook">
+      Facebook 登入
+    </button>
+    <button class="btn w-full bg-twitter" @click="loginWithTwitter">
+      Twitter 登入
+    </button>
+  </div>
+</template>
diff --git a/src/logics/auth.ts b/src/logics/auth.ts
index d01ca83..f9296aa 100644
--- a/src/logics/auth.ts
+++ b/src/logics/auth.ts
@@ -15,6 +15,7 @@ interface LogoutResponse {
 export interface LoginArgs {
   username: string
   password: string
+  remember: boolean
 }
 
 export function useAuth() {
@@ -41,6 +42,17 @@ export function useAuth() {
     }
   }
 
+  // handle SSO logins
+  function loginWithLine() {
+    alert('Login with Line')
+  }
+  function loginWithFacebook() {
+    alert('Login with Facebook')
+  }
+  function loginWithTwitter() {
+    alert('Login with Twitter')
+  }
+
   function logout() {
     const { isFetching, error, data } = useFetch(`${API_ENDPOINT}/logout`).json<LogoutResponse>().post()
 
@@ -60,6 +72,9 @@ export function useAuth() {
   return {
     userId,
     login,
+    loginWithLine,
+    loginWithFacebook,
+    loginWithTwitter,
     logout,
     isAuthorized,
   }
diff --git a/src/main.ts b/src/main.ts
index 95522f8..ee961a7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,9 +3,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
 import App from './App.vue'
 
+// css
 import 'virtual:windi.css'
 import './style/main.css'
 
+// plugins
+import './plugins/vee-validate'
+
 const app = createApp(App)
 const router = createRouter({
   history: createWebHistory(),
diff --git a/src/pages/account/password_reset.vue b/src/pages/account/password_reset.vue
new file mode 100644
index 0000000..c73889a
--- /dev/null
+++ b/src/pages/account/password_reset.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps({})
+
+</script>
+
+<template>
+  <main>
+    <h1>重置密碼</h1>
+  </main>
+</template>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 2f2e790..c59c1c2 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,21 +1,7 @@
 <script setup lang="ts">
-import { computed, defineProps, ref, unref } from 'vue'
-import type { LoginArgs } from '@/logics/auth'
+import { defineProps } from 'vue'
 
 defineProps({})
-
-const loginData = ref<Partial<LoginArgs>>({})
-const isFilled = computed(() => {
-  return !!(loginData.value.username && loginData.value.password)
-})
-
-function handleLogin(event: Event) {
-  if (!isFilled.value) return
-
-  const loginArgs = unref(loginData)
-  console.log(loginArgs)
-}
-
 </script>
 
 <template>
@@ -24,44 +10,9 @@ function handleLogin(event: Event) {
       <h1 class="text-xl mb-4">
         登入
       </h1>
-      <form @submit.prevent="handleLogin">
-        <Input v-model="loginData.password" label="帳號" type="email" placeholder="user@example.com" autocomplete="username" />
-        <Input v-model="loginData.password" label="密碼" type="password" placeholder="password" autocomplete="current-password" />
-        <label for="">
-          <input id="" type="checkbox" name="">
-          記住我
-        </label>
-        <div class="flex justify-between items-center my-4">
-          <router-link to="#">
-            忘記密碼
-          </router-link>
-          <button class="btn" type="submit" :disabled="!isFilled">
-            登入
-          </button>
-        </div>
-      </form>
-      <div class="space-y-2 mb-2">
-        <button class="btn w-full bg-line" type="submit" :disabled="!isFilled">
-          Line 登入
-        </button>
-        <button class="btn w-full bg-facebook" type="submit" :disabled="!isFilled">
-          Facebook 登入
-        </button>
-        <button class="btn w-full bg-twitter" type="submit" :disabled="!isFilled">
-          Twitter 登入
-        </button>
-      </div>
-      <div>
-        <span class="block py-2">註冊帳號：</span>
-        <div class="flex space-x-4 text-center">
-          <router-link to="#" class="flex-1 btn btn-outline" :disabled="!isFilled">
-            機構單位
-          </router-link>
-          <router-link to="#" class="flex-1 btn" :disabled="!isFilled">
-            一般民眾
-          </router-link>
-        </div>
-      </div>
+      <LoginForm />
+      <SSOLogin />
+      <RegisterAccount />
     </div>
   </main>
 </template>
diff --git a/src/plugins/vee-validate.ts b/src/plugins/vee-validate.ts
new file mode 100644
index 0000000..583d6c3
--- /dev/null
+++ b/src/plugins/vee-validate.ts
@@ -0,0 +1,19 @@
+import { defineRule, configure } from 'vee-validate'
+import { required, email, min } from '@vee-validate/rules'
+import { localize, setLocale } from '@vee-validate/i18n'
+import zh_TW from '@vee-validate/i18n/dist/locale/zh_TW.json'
+
+// 導入驗證規則
+defineRule('min', min)
+defineRule('email', email)
+defineRule('required', required)
+
+// 新增語言（用於錯誤信息）
+configure({
+  generateMessage: localize({
+    'zh-tw': zh_TW,
+  }),
+})
+
+// 設定當前語言
+setLocale('zh-tw')
diff --git a/tsconfig.json b/tsconfig.json
index 9563901..4424932 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,11 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "*.d.ts"
+  ]
 }
diff --git a/windi.config.ts b/windi.config.ts
index 102dff2..ac9f7c0 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -18,8 +18,11 @@ export default defineConfig({
       '&:focus': {
         '@apply': 'outline-none',
       },
+      '&:disabled': {
+        '@apply': 'bg-gray-300',
+      },
       '&-outline': {
-        '@apply': ' py-1.5 bg-white border border-primary text-primary',
+        '@apply': 'py-1.5 bg-white border border-primary text-primary',
       },
     },
     'icon-btn': {

From 7a28796ba1819b6e883d116ff51a29e1eb5bf7db Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Wed, 9 Jun 2021 22:44:48 +0900
Subject: [PATCH 02/13] fix: build

---
 package.json   |  3 ++-
 pnpm-lock.yaml | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0b76e73..b428a19 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "@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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 188cde7..181a524 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ specifiers:
   vue-router: ^4.0.8
   vue-tsc: ^0.1.7
   windicss: ^3.1.3
+  yup: ^0.32.9
 
 dependencies:
   '@vee-validate/i18n': 4.1.20
@@ -28,6 +29,7 @@ dependencies:
   vee-validate: 4.4.4_vue@3.1.1
   vue: 3.1.1
   vue-router: 4.0.8_vue@3.1.1
+  yup: 0.32.9
 
 devDependencies:
   '@hannoeru/eslint-config': 0.1.1_eslint@7.28.0+typescript@4.3.2
@@ -223,6 +225,12 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  /@babel/runtime/7.14.0:
+    resolution: {integrity: sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==}
+    dependencies:
+      regenerator-runtime: 0.13.7
+    dev: false
+
   /@babel/template/7.12.13:
     resolution: {integrity: sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==}
     dependencies:
@@ -519,6 +527,10 @@ packages:
     resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
     dev: true
 
+  /@types/lodash/4.14.170:
+    resolution: {integrity: sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==}
+    dev: false
+
   /@types/node/15.12.2:
     resolution: {integrity: sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==}
     dev: true
@@ -2751,6 +2763,10 @@ packages:
       p-locate: 4.1.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.camelcase/4.3.0:
     resolution: {integrity: sha1-soqmKIorn8ZRA1x3EfZathkDMaY=}
     dev: true
@@ -2773,7 +2789,6 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
 
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
@@ -2916,6 +2931,10 @@ packages:
     resolution: {integrity: sha512-0ZIR9PasPxGXmRsEF8jsDzndzHDj7tIav+JUmvIFB/WHswliFnquxECT/De7GR4yg99ky/NlRKJT82G1y271bw==}
     dev: true
 
+  /nanoclone/0.2.1:
+    resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==}
+    dev: false
+
   /nanoid/3.1.23:
     resolution: {integrity: sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3321,6 +3340,10 @@ packages:
       react-is: 16.13.1
     dev: true
 
+  /property-expr/2.0.4:
+    resolution: {integrity: sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==}
+    dev: false
+
   /property-information/5.6.0:
     resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
     dependencies:
@@ -3524,6 +3547,10 @@ packages:
       strip-indent: 2.0.0
     dev: true
 
+  /regenerator-runtime/0.13.7:
+    resolution: {integrity: sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==}
+    dev: false
+
   /regexp-tree/0.1.23:
     resolution: {integrity: sha512-+7HWfb4Bvu8Rs2eQTUIpX9I/PlQkYOuTNbRpKLJlQpSgwSkzFYh+pUj0gtvglnOZLKB6YgnIgRuJ2/IlpL48qw==}
     hasBin: true
@@ -3981,6 +4008,10 @@ packages:
     resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
     dev: true
 
+  /toposort/2.0.2:
+    resolution: {integrity: sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=}
+    dev: false
+
   /trim-newlines/2.0.0:
     resolution: {integrity: sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=}
     engines: {node: '>=4'}
@@ -4721,3 +4752,16 @@ packages:
     dependencies:
       camelcase: 4.1.0
     dev: true
+
+  /yup/0.32.9:
+    resolution: {integrity: sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@babel/runtime': 7.14.0
+      '@types/lodash': 4.14.170
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      nanoclone: 0.2.1
+      property-expr: 2.0.4
+      toposort: 2.0.2
+    dev: false

From 3230a85db7267d134aeee837f13ed95178dd97a8 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Wed, 9 Jun 2021 22:59:13 +0900
Subject: [PATCH 03/13] fix: localStorage serialize with null

---
 src/logics/auth.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/logics/auth.ts b/src/logics/auth.ts
index f9296aa..0fa55f2 100644
--- a/src/logics/auth.ts
+++ b/src/logics/auth.ts
@@ -20,10 +20,19 @@ export interface LoginArgs {
 
 export function useAuth() {
   const router = useRouter()
-  const userId = useStorage<string | null>('userId', null)
+  const userId = useStorage<string | null>('userId', null, undefined, {
+    serializer: {
+      read(raw) {
+        return raw === 'null' ? null : raw
+      },
+      write(raw) {
+        return String(raw)
+      },
+    },
+  })
 
   const isAuthorized = computed(() => {
-    return userId.value !== 'null'
+    return userId.value !== null
   })
 
   function login(user: LoginArgs) {

From 3fc587426539a4c763b13c4f1590aaac9d4c6f0b Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 01:34:11 +0900
Subject: [PATCH 04/13] feat: personal register page

---
 components.d.ts                               |   7 +-
 src/components/LoginForm.vue                  |   8 +-
 src/components/RegisterAccount.vue            |   6 +-
 .../{Checkbox.vue => TheCheckbox.vue}         |   0
 src/components/{Input.vue => TheInput.vue}    |  17 +--
 src/components/TheRadio.vue                   |  52 ++++++++
 src/components/TheSelect.vue                  |  72 +++++++++++
 src/components/layout/AuthLayout.vue          |   7 +
 src/pages/login.vue                           |  18 ++-
 src/pages/register/org.vue                    |   0
 src/pages/register/personal.vue               | 122 ++++++++++++++++++
 src/plugins/vee-validate.ts                   |   3 +-
 12 files changed, 284 insertions(+), 28 deletions(-)
 rename src/components/{Checkbox.vue => TheCheckbox.vue} (100%)
 rename src/components/{Input.vue => TheInput.vue} (72%)
 create mode 100644 src/components/TheRadio.vue
 create mode 100644 src/components/TheSelect.vue
 create mode 100644 src/components/layout/AuthLayout.vue
 create mode 100644 src/pages/register/org.vue
 create mode 100644 src/pages/register/personal.vue

diff --git a/components.d.ts b/components.d.ts
index d27f5a9..0dfcc23 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -3,12 +3,15 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    Checkbox: typeof import('./src/components/Checkbox.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
-    Input: typeof import('./src/components/Input.vue')['default']
     LoginForm: typeof import('./src/components/LoginForm.vue')['default']
     RegisterAccount: typeof import('./src/components/RegisterAccount.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']
   }
 }
 
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 6657836..32f8af0 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -15,25 +15,25 @@ function onSubmit(values: LoginArgs) {
 
 <template>
   <Form v-slot="{ meta }" :validation-schema="schema" @submit="onSubmit">
-    <Input
+    <TheInput
       name="email"
       type="email"
       label="帳號"
       placeholder="user@example.com"
       autocomplete="email"
     />
-    <Input
+    <TheInput
       name="password"
       type="password"
       label="密碼"
       placeholder="password"
       autocomplete="current-password"
     />
-    <Checkbox
+    <TheCheckbox
       name="remember"
       label="記住我"
     />
-    <div class="flex justify-between items-center mb-4">
+    <div class="flex mb-4 justify-between items-center">
       <router-link to="/account/password_reset" class="text-sm underline">
         忘記密碼
       </router-link>
diff --git a/src/components/RegisterAccount.vue b/src/components/RegisterAccount.vue
index d6ad957..b6c74e7 100644
--- a/src/components/RegisterAccount.vue
+++ b/src/components/RegisterAccount.vue
@@ -7,12 +7,12 @@ defineProps({})
 
 <template>
   <div>
-    <span class="block py-2">註冊帳號：</span>
+    <span class="py-2 block">註冊帳號：</span>
     <div class="flex space-x-4 text-center">
-      <router-link to="#" class="flex-1 btn btn-outline">
+      <router-link to="/register/org" class="flex-1 btn btn-outline">
         機構單位
       </router-link>
-      <router-link to="#" class="flex-1 btn">
+      <router-link to="/register/person" class="flex-1 btn">
         一般民眾
       </router-link>
     </div>
diff --git a/src/components/Checkbox.vue b/src/components/TheCheckbox.vue
similarity index 100%
rename from src/components/Checkbox.vue
rename to src/components/TheCheckbox.vue
diff --git a/src/components/Input.vue b/src/components/TheInput.vue
similarity index 72%
rename from src/components/Input.vue
rename to src/components/TheInput.vue
index 4d03cc0..562bbc4 100644
--- a/src/components/Input.vue
+++ b/src/components/TheInput.vue
@@ -30,7 +30,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-
+  required: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const {
@@ -45,9 +48,10 @@ const {
 </script>
 
 <template>
-  <div class="relative w-full pb-6">
-    <label :for="name" class="block mb-1">
+  <div class="w-full pb-6 relative">
+    <label :for="name" class="mb-1 block">
       {{ label }}
+      <span v-if="required" class="text-red-400">*</span>
     </label>
     <input
       :id="name"
@@ -56,15 +60,12 @@ const {
       :value="inputValue"
       :autocomplete="autocomplete"
       :placeholder="placeholder"
-      class="
-        border border-tansparent rounded-md
-        px-3 py-2 outline-none w-full
-        focus:border-gray-400"
+      class="border border-tansparent rounded-md outline-none w-full py-2 px-3 focus:border-gray-400"
       :class="{ 'border-red-400': !!errorMessage }"
       @input="handleChange"
       @blur="handleBlur"
     >
-    <p v-show="errorMessage" class="absolute left-0 bottom-0.5 m-0 text-xs text-red-400">
+    <p v-show="errorMessage" class="m-0 text-xs bottom-0.5 left-0 text-red-400 absolute">
       {{ errorMessage }}
     </p>
   </div>
diff --git a/src/components/TheRadio.vue b/src/components/TheRadio.vue
new file mode 100644
index 0000000..b847000
--- /dev/null
+++ b/src/components/TheRadio.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { Field, ErrorMessage } from 'vee-validate'
+import type { PropType } from 'vue'
+
+interface RadioChild {
+  text: string
+  value: string
+}
+
+defineProps({
+  value: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  children: {
+    type: Array as PropType<RadioChild[]>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="w-full pb-6 relative">
+    <label :for="name" class="mb-1 block">
+      {{ label }}
+      <span v-if="required" class="text-red-400">*</span>
+    </label>
+    <div class="space-x-3">
+      <template v-for="{ value, text } in children" :key="value">
+        <Field :name="name" type="radio" :value="value" /> {{ text }}
+      </template>
+    </div>
+    <ErrorMessage :name="name" as="p" class="m-0 text-xs bottom-0.5 left-0 text-red-400 absolute" />
+  </div>
+</template>
diff --git a/src/components/TheSelect.vue b/src/components/TheSelect.vue
new file mode 100644
index 0000000..d3d33e8
--- /dev/null
+++ b/src/components/TheSelect.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { useField } from 'vee-validate'
+import type { PropType } from 'vue'
+
+interface SelectChildren {
+  text: string
+  value: string
+}
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  children: {
+    type: Array as PropType<SelectChildren[]>,
+    required: true,
+  },
+})
+
+const {
+  value: inputValue,
+  errorMessage,
+  handleBlur,
+  handleChange,
+} = useField(props.name, undefined, {
+  initialValue: props.value,
+})
+
+</script>
+
+<template>
+  <div class="w-full pb-6 relative">
+    <label :for="name" class="mb-1 block">
+      {{ label }}
+      <span v-if="required" class="text-red-400">*</span>
+    </label>
+    <select
+      :id="name"
+      :name="name"
+      :value="inputValue"
+      class="border border-tansparent rounded-md outline-none w-full py-2.5 px-3 focus:border-gray-400"
+      :class="{ 'border-red-400': !!errorMessage }"
+      @change="handleChange"
+      @blur="handleBlur"
+    >
+      <option v-for="{ value, text } in children" :key="value" :value="value">
+        {{ text }}
+      </option>
+    </select>
+    <p v-show="errorMessage" class="m-0 text-xs bottom-0.5 left-0 text-red-400 absolute">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/layout/AuthLayout.vue b/src/components/layout/AuthLayout.vue
new file mode 100644
index 0000000..03bdc4e
--- /dev/null
+++ b/src/components/layout/AuthLayout.vue
@@ -0,0 +1,7 @@
+<template>
+  <main class="w-full">
+    <div class="border rounded-md mx-auto max-w-sm text-left p-10">
+      <slot />
+    </div>
+  </main>
+</template>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index c59c1c2..46370df 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -5,14 +5,12 @@ defineProps({})
 </script>
 
 <template>
-  <main class="w-full">
-    <div class="p-10 rounded-md border text-left max-w-sm mx-auto">
-      <h1 class="text-xl mb-4">
-        登入
-      </h1>
-      <LoginForm />
-      <SSOLogin />
-      <RegisterAccount />
-    </div>
-  </main>
+  <AuthLayout>
+    <h1 class="text-xl mb-4">
+      登入
+    </h1>
+    <LoginForm />
+    <SSOLogin />
+    <RegisterAccount />
+  </AuthLayout>
 </template>
diff --git a/src/pages/register/org.vue b/src/pages/register/org.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
new file mode 100644
index 0000000..4c4f473
--- /dev/null
+++ b/src/pages/register/personal.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { Form } from 'vee-validate'
+import type { LoginArgs } from '@/logics/auth'
+
+const schema = {
+  username: 'required',
+  email: 'required|email',
+  password: 'required|min:8',
+  passwordConfirm: 'required|confirmed:@password',
+  tel: 'required|numeric',
+}
+
+const initialValues = {
+  otherContactType: 'line',
+  invoice: 'no',
+}
+
+const selectChild = [
+  {
+    text: 'Line',
+    value: 'line',
+  },
+  {
+    text: 'Facebook',
+    value: 'facebook',
+  },
+  {
+    text: 'Telegram',
+    value: 'telegram',
+  },
+]
+
+const radioChild = [
+  {
+    text: '是',
+    value: 'yes',
+  },
+  {
+    text: '否',
+    value: 'no',
+  },
+]
+
+function onSubmit(values: LoginArgs) {
+  alert(JSON.stringify(values, null, 2))
+}
+</script>
+
+<template>
+  <AuthLayout>
+    <h1 class="text-xl mb-4">
+      註冊帳號（一般民眾）
+    </h1>
+    <Form v-slot="{ meta }" :validation-schema="schema" :initial-values="initialValues" @submit="onSubmit">
+      <TheInput
+        name="username"
+        label="帳號名稱"
+        placeholder="username"
+        autocomplete="username"
+        required
+      />
+      <TheInput
+        name="email"
+        type="email"
+        label="電子郵件信箱"
+        placeholder="user@example.com"
+        autocomplete="email"
+        required
+      />
+      <TheInput
+        name="password"
+        type="password"
+        label="密碼"
+        placeholder="password"
+        autocomplete="new-password"
+        required
+      />
+      <TheInput
+        name="passwordConfirm"
+        type="password"
+        label="確認密碼"
+        placeholder="password"
+        autocomplete="current-password"
+        required
+      />
+      <TheInput
+        name="tel"
+        type="tel"
+        label="電話號碼（不含『 - 』）"
+        placeholder="0901234564"
+        autocomplete="tel"
+        required
+      />
+      <TheSelect
+        name="otherContactType"
+        label="其他聯絡方式"
+        :children="selectChild"
+      />
+      <TheInput
+        name="otherContact"
+        type="text"
+        label=""
+        placeholder="line / facebook / telegram"
+        autocomplete="tel"
+      />
+      <TheRadio
+        name="invoice"
+        label="是否需要收據"
+        :children="radioChild"
+        required
+      />
+      <div class="flex mb-4 justify-between items-center">
+        <router-link to="/" class="text-sm underline">
+          取消
+        </router-link>
+        <button class="btn" type="submit" :disabled="!meta.valid">
+          註冊
+        </button>
+      </div>
+    </Form>
+  </AuthLayout>
+</template>
diff --git a/src/plugins/vee-validate.ts b/src/plugins/vee-validate.ts
index 583d6c3..2e731d4 100644
--- a/src/plugins/vee-validate.ts
+++ b/src/plugins/vee-validate.ts
@@ -1,5 +1,5 @@
 import { defineRule, configure } from 'vee-validate'
-import { required, email, min } from '@vee-validate/rules'
+import { required, email, min, confirmed } from '@vee-validate/rules'
 import { localize, setLocale } from '@vee-validate/i18n'
 import zh_TW from '@vee-validate/i18n/dist/locale/zh_TW.json'
 
@@ -7,6 +7,7 @@ import zh_TW from '@vee-validate/i18n/dist/locale/zh_TW.json'
 defineRule('min', min)
 defineRule('email', email)
 defineRule('required', required)
+defineRule('confirmed', confirmed)
 
 // 新增語言（用於錯誤信息）
 configure({

From b1fc6241ea4e6b944db90343487aef8c7854d715 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 01:36:01 +0900
Subject: [PATCH 05/13] fix: register links

---
 components.d.ts                                                 | 2 +-
 .../{RegisterAccount.vue => RegisterAccountLinks.vue}           | 2 +-
 src/pages/login.vue                                             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{RegisterAccount.vue => RegisterAccountLinks.vue} (86%)

diff --git a/components.d.ts b/components.d.ts
index 0dfcc23..3cd7803 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -5,7 +5,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Header: typeof import('./src/components/Header.vue')['default']
     LoginForm: typeof import('./src/components/LoginForm.vue')['default']
-    RegisterAccount: typeof import('./src/components/RegisterAccount.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']
diff --git a/src/components/RegisterAccount.vue b/src/components/RegisterAccountLinks.vue
similarity index 86%
rename from src/components/RegisterAccount.vue
rename to src/components/RegisterAccountLinks.vue
index b6c74e7..5558654 100644
--- a/src/components/RegisterAccount.vue
+++ b/src/components/RegisterAccountLinks.vue
@@ -12,7 +12,7 @@ defineProps({})
       <router-link to="/register/org" class="flex-1 btn btn-outline">
         機構單位
       </router-link>
-      <router-link to="/register/person" class="flex-1 btn">
+      <router-link to="/register/personal" class="flex-1 btn">
         一般民眾
       </router-link>
     </div>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 46370df..0ff8f18 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -11,6 +11,6 @@ defineProps({})
     </h1>
     <LoginForm />
     <SSOLogin />
-    <RegisterAccount />
+    <RegisterAccountLinks />
   </AuthLayout>
 </template>

From c89150ce7e9143551188a12852d9ddc67dd6fb6b Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 01:44:44 +0900
Subject: [PATCH 06/13] refactor: extract input children type

---
 src/components/TheRadio.vue     |  8 ++------
 src/components/TheSelect.vue    |  8 ++------
 src/pages/register/personal.vue | 10 ++++++----
 src/type.ts                     |  4 ++++
 4 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 src/type.ts

diff --git a/src/components/TheRadio.vue b/src/components/TheRadio.vue
index b847000..e6107a6 100644
--- a/src/components/TheRadio.vue
+++ b/src/components/TheRadio.vue
@@ -2,11 +2,7 @@
 import { defineProps } from 'vue'
 import { Field, ErrorMessage } from 'vee-validate'
 import type { PropType } from 'vue'
-
-interface RadioChild {
-  text: string
-  value: string
-}
+import type { InputChildren } from '@/type'
 
 defineProps({
   value: {
@@ -30,7 +26,7 @@ defineProps({
     default: false,
   },
   children: {
-    type: Array as PropType<RadioChild[]>,
+    type: Array as PropType<InputChildren[]>,
     required: true,
   },
 })
diff --git a/src/components/TheSelect.vue b/src/components/TheSelect.vue
index d3d33e8..cac7dc7 100644
--- a/src/components/TheSelect.vue
+++ b/src/components/TheSelect.vue
@@ -2,11 +2,7 @@
 import { defineProps } from 'vue'
 import { useField } from 'vee-validate'
 import type { PropType } from 'vue'
-
-interface SelectChildren {
-  text: string
-  value: string
-}
+import type { InputChildren } from '@/type'
 
 const props = defineProps({
   value: {
@@ -30,7 +26,7 @@ const props = defineProps({
     default: false,
   },
   children: {
-    type: Array as PropType<SelectChildren[]>,
+    type: Array as PropType<InputChildren[]>,
     required: true,
   },
 })
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
index 4c4f473..9a8dc88 100644
--- a/src/pages/register/personal.vue
+++ b/src/pages/register/personal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate'
 import type { LoginArgs } from '@/logics/auth'
+import type { InputChildren } from '@/type'
 
 const schema = {
   username: 'required',
@@ -8,6 +9,7 @@ const schema = {
   password: 'required|min:8',
   passwordConfirm: 'required|confirmed:@password',
   tel: 'required|numeric',
+  invoice: 'required',
 }
 
 const initialValues = {
@@ -15,7 +17,7 @@ const initialValues = {
   invoice: 'no',
 }
 
-const selectChild = [
+const otherContactItems: InputChildren[] = [
   {
     text: 'Line',
     value: 'line',
@@ -30,7 +32,7 @@ const selectChild = [
   },
 ]
 
-const radioChild = [
+const needInvoiceItems: InputChildren[] = [
   {
     text: '是',
     value: 'yes',
@@ -94,7 +96,7 @@ function onSubmit(values: LoginArgs) {
       <TheSelect
         name="otherContactType"
         label="其他聯絡方式"
-        :children="selectChild"
+        :children="otherContactItems"
       />
       <TheInput
         name="otherContact"
@@ -106,7 +108,7 @@ function onSubmit(values: LoginArgs) {
       <TheRadio
         name="invoice"
         label="是否需要收據"
-        :children="radioChild"
+        :children="needInvoiceItems"
         required
       />
       <div class="flex mb-4 justify-between items-center">
diff --git a/src/type.ts b/src/type.ts
new file mode 100644
index 0000000..e910a81
--- /dev/null
+++ b/src/type.ts
@@ -0,0 +1,4 @@
+export interface InputChildren {
+  text: string
+  value: string
+}

From 01765dd0d5dfce2790beff98469e278d5d716b32 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 01:47:39 +0900
Subject: [PATCH 07/13] chore: rename type file to types

---
 src/components/TheRadio.vue     | 2 +-
 src/components/TheSelect.vue    | 2 +-
 src/pages/register/personal.vue | 2 +-
 src/{type.ts => types.ts}       | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{type.ts => types.ts} (100%)

diff --git a/src/components/TheRadio.vue b/src/components/TheRadio.vue
index e6107a6..40b40c4 100644
--- a/src/components/TheRadio.vue
+++ b/src/components/TheRadio.vue
@@ -2,7 +2,7 @@
 import { defineProps } from 'vue'
 import { Field, ErrorMessage } from 'vee-validate'
 import type { PropType } from 'vue'
-import type { InputChildren } from '@/type'
+import type { InputChildren } from '@/types'
 
 defineProps({
   value: {
diff --git a/src/components/TheSelect.vue b/src/components/TheSelect.vue
index cac7dc7..2b44dd9 100644
--- a/src/components/TheSelect.vue
+++ b/src/components/TheSelect.vue
@@ -2,7 +2,7 @@
 import { defineProps } from 'vue'
 import { useField } from 'vee-validate'
 import type { PropType } from 'vue'
-import type { InputChildren } from '@/type'
+import type { InputChildren } from '@/types'
 
 const props = defineProps({
   value: {
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
index 9a8dc88..a3692b0 100644
--- a/src/pages/register/personal.vue
+++ b/src/pages/register/personal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate'
 import type { LoginArgs } from '@/logics/auth'
-import type { InputChildren } from '@/type'
+import type { InputChildren } from '@/types'
 
 const schema = {
   username: 'required',
diff --git a/src/type.ts b/src/types.ts
similarity index 100%
rename from src/type.ts
rename to src/types.ts

From 4cfa514dd3ce2a8dc0bc811832cfda60edc5a7d9 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 02:20:36 +0900
Subject: [PATCH 08/13] feat: add unit register page

---
 src/components/RegisterAccountLinks.vue |   4 +-
 src/components/TheCheckbox.vue          |   1 +
 src/components/TheInput.vue             |   1 +
 src/components/TheRadio.vue             |   2 +-
 src/components/TheSelect.vue            |   1 +
 src/data/index.ts                       |  10 ++
 src/data/tw-county-list.json            | 158 +++++++++++++++++++++++
 src/pages/register/org.vue              |   0
 src/pages/register/personal.vue         |   2 +-
 src/pages/register/unit.vue             | 161 ++++++++++++++++++++++++
 10 files changed, 336 insertions(+), 4 deletions(-)
 create mode 100644 src/data/index.ts
 create mode 100644 src/data/tw-county-list.json
 delete mode 100644 src/pages/register/org.vue
 create mode 100644 src/pages/register/unit.vue

diff --git a/src/components/RegisterAccountLinks.vue b/src/components/RegisterAccountLinks.vue
index 5558654..ecddeb0 100644
--- a/src/components/RegisterAccountLinks.vue
+++ b/src/components/RegisterAccountLinks.vue
@@ -9,8 +9,8 @@ defineProps({})
   <div>
     <span class="py-2 block">註冊帳號：</span>
     <div class="flex space-x-4 text-center">
-      <router-link to="/register/org" class="flex-1 btn btn-outline">
-        機構單位
+      <router-link to="/register/unit" class="flex-1 btn btn-outline">
+        一線單位
       </router-link>
       <router-link to="/register/personal" class="flex-1 btn">
         一般民眾
diff --git a/src/components/TheCheckbox.vue b/src/components/TheCheckbox.vue
index bbb8b5c..5494353 100644
--- a/src/components/TheCheckbox.vue
+++ b/src/components/TheCheckbox.vue
@@ -28,6 +28,7 @@ defineProps({
     :name="name"
     type="checkbox"
     :value="value"
+    :label="label"
     class="relative w-full pb-6"
     as="div"
   >
diff --git a/src/components/TheInput.vue b/src/components/TheInput.vue
index 562bbc4..eee1d24 100644
--- a/src/components/TheInput.vue
+++ b/src/components/TheInput.vue
@@ -43,6 +43,7 @@ const {
   handleChange,
 } = useField(props.name, undefined, {
   initialValue: props.value,
+  label: props.label,
 })
 
 </script>
diff --git a/src/components/TheRadio.vue b/src/components/TheRadio.vue
index 40b40c4..7219601 100644
--- a/src/components/TheRadio.vue
+++ b/src/components/TheRadio.vue
@@ -40,7 +40,7 @@ defineProps({
     </label>
     <div class="space-x-3">
       <template v-for="{ value, text } in children" :key="value">
-        <Field :name="name" type="radio" :value="value" /> {{ text }}
+        <Field :name="name" :label="label" type="radio" :value="value" /> {{ text }}
       </template>
     </div>
     <ErrorMessage :name="name" as="p" class="m-0 text-xs bottom-0.5 left-0 text-red-400 absolute" />
diff --git a/src/components/TheSelect.vue b/src/components/TheSelect.vue
index 2b44dd9..fc38882 100644
--- a/src/components/TheSelect.vue
+++ b/src/components/TheSelect.vue
@@ -38,6 +38,7 @@ const {
   handleChange,
 } = useField(props.name, undefined, {
   initialValue: props.value,
+  label: props.label,
 })
 
 </script>
diff --git a/src/data/index.ts b/src/data/index.ts
new file mode 100644
index 0000000..4e2cc6d
--- /dev/null
+++ b/src/data/index.ts
@@ -0,0 +1,10 @@
+import { data, select_columns } from './tw-county-list.json'
+
+export const TWCountyList = data.map((item) => {
+  return {
+    text: item[select_columns.indexOf('NAME_2014')],
+    value: item[select_columns.indexOf('ISO3166')],
+  }
+}).filter((item) => {
+  return !!item.text
+})
diff --git a/src/data/tw-county-list.json b/src/data/tw-county-list.json
new file mode 100644
index 0000000..254d0cd
--- /dev/null
+++ b/src/data/tw-county-list.json
@@ -0,0 +1,158 @@
+{
+  "sheet": {
+    "name": "\u4e2d\u83ef\u6c11\u570b\u7e23\u5e02",
+    "user": { "name": "ronnywang", "url": "https:\/\/sheethub.com\/ronnywang" },
+    "url": "https:\/\/sheethub.com\/ronnywang\/%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E7%B8%A3%E5%B8%82",
+    "id": "ronnywang\/\u4e2d\u83ef\u6c11\u570b\u7e23\u5e02",
+    "meta": {},
+    "geo": true,
+    "description": "From http:\/\/data.gov.tw\/node\/7442",
+    "uri_columns": [0],
+    "columns": [
+      {
+        "name": "COUNTYID",
+        "description": "\u4e2d\u83ef\u6c11\u570b\u884c\u653f\u5340\u57df\u53ca\u6751\u91cc\u4ee3\u78bc",
+        "column_id": 0
+      },
+      {
+        "name": "NAME_1984",
+        "description": "1984 \u5e74\u65b0\u7af9\u5e02\u5347\u683c\u7701\u8f44\u5e02\u5f8c\u7684\u540d\u7a31",
+        "column_id": 1
+      },
+      { "name": "NAME_1984_ALIAS", "column_id": 2 },
+      {
+        "name": "NAME_2010",
+        "description": "2010 \u5e74\u4e94\u90fd(\u53f0\u5317\u3001\u65b0\u5317\u3001\u53f0\u4e2d\u3001\u53f0\u5357\u3001\u9ad8\u96c4)\u5347\u683c\u7248\u672c",
+        "column_id": 3
+      },
+      { "name": "NAME_2010_ALIAS", "column_id": 4 },
+      {
+        "name": "NAME_2014",
+        "description": "2014\u5e74\u6843\u5712\u5e02\u5347\u683c\u76f4\u8f44\u5e02",
+        "column_id": 5
+      },
+      { "name": "NAME_2014_ALIAS", "column_id": 6 },
+      { "name": "ISO3166", "column_id": 7 },
+      {
+        "name": "SEGIS_COUNTY_ID",
+        "description": "\u884c\u653f\u5340\u7a7a\u9593\u55ae\u5143\u4ee3\u78bc",
+        "column_id": 8
+      },
+      {
+        "name": "AREA_ID",
+        "description": "\u7e23\u5e02\u82f1\u6587\u5b57\u4ee3\u78bc\uff0c\u540c\u8eab\u4efd\u8b49\u7b2c\u4e00\u78bc\u898f\u5247",
+        "column_id": 9
+      }
+    ],
+    "links": [
+      {
+        "link_id": 347,
+        "columns": {
+          "column": {
+            "name": "NAME_2014",
+            "description": "2014\u5e74\u6843\u5712\u5e02\u5347\u683c\u76f4\u8f44\u5e02",
+            "column_id": 5
+          }
+        },
+        "reference": {
+          "reference_id": 71,
+          "sheet": {
+            "name": "\u4e2d\u83ef\u6c11\u570b\u884c\u653f\u5340_map_\u540d\u7a312014",
+            "user": {
+              "name": "area.reference.tw",
+              "url": "https:\/\/sheethub.com\/area.reference.tw"
+            },
+            "url": "https:\/\/sheethub.com\/area.reference.tw\/%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E8%A1%8C%E6%94%BF%E5%8D%80_map_%E5%90%8D%E7%A8%B12014",
+            "id": "area.reference.tw\/\u4e2d\u83ef\u6c11\u570b\u884c\u653f\u5340_map_\u540d\u7a312014",
+            "meta": {},
+            "geo": false,
+            "description": "",
+            "uri_columns": [0]
+          },
+          "columns": { "column": { "name": "name", "column_id": 0 } },
+          "need_update": false
+        },
+        "need_update": true,
+        "miss_count": 7
+      }
+    ]
+  },
+  "total_count": 29,
+  "count": 29,
+  "indexes": [],
+  "select_columns": [
+    "COUNTYID",
+    "NAME_1984",
+    "NAME_1984_ALIAS",
+    "NAME_2010",
+    "NAME_2010_ALIAS",
+    "NAME_2014",
+    "NAME_2014_ALIAS",
+    "ISO3166",
+    "SEGIS_COUNTY_ID",
+    "AREA_ID"
+  ],
+  "data": [
+    ["63", "臺北市", "台北市", "臺北市", "台北市", "臺北市", "台北市", "TPE", "63000", "A"],
+    ["10001", "臺北縣", "台北縣", "", "", "", "", "", "10001", ""],
+    ["66", "", "", "臺中市", "台中市", "臺中市", "台中市", "TXG", "66000", "B"],
+    ["67", "", "", "臺南市", "台南市", "臺南市", "台南市", "TNN", "67000", "D"],
+    ["10021", "臺南市", "台南市", "", "", "", "", "", "10021", ""],
+    ["9007", "連江縣", "", "連江縣", "", "連江縣", "", "LJF", "9007", "Z"],
+    ["9020", "金門縣", "", "金門縣", "", "金門縣", "", "JME", "9020", "W"],
+    ["10002", "宜蘭縣", "", "宜蘭縣", "", "宜蘭縣", "", "ILA", "10002", "G"],
+    ["10004", "新竹縣", "", "新竹縣", "", "新竹縣", "", "HSQ", "10004", "J"],
+    ["10005", "苗栗縣", "", "苗栗縣", "", "苗栗縣", "", "MIA", "10005", "K"],
+    ["10007", "彰化縣", "", "彰化縣", "", "彰化縣", "", "CHA", "10007", "N"],
+    ["10008", "南投縣", "", "南投縣", "", "南投縣", "", "NAN", "10008", "M"],
+    ["10009", "雲林縣", "", "雲林縣", "", "雲林縣", "", "YUN", "10009", "P"],
+    ["10010", "嘉義縣", "", "嘉義縣", "", "嘉義縣", "", "CYQ", "10010", "Q"],
+    ["10013", "屏東縣", "", "屏東縣", "", "屏東縣", "", "PIF", "10013", "T"],
+    ["10014", "臺東縣", "台東縣", "臺東縣", "台東縣", "臺東縣", "台東縣", "TTT", "10014", "V"],
+    ["10015", "花蓮縣", "", "花蓮縣", "", "花蓮縣", "", "HUA", "10015", "U"],
+    ["10016", "澎湖縣", "", "澎湖縣", "", "澎湖縣", "", "PEN", "10016", "X"],
+    ["10017", "基隆市", "", "基隆市", "", "基隆市", "", "KEE", "10017", "C"],
+    ["10018", "新竹市", "", "新竹市", "", "新竹市", "", "HSZ", "10018", "O"],
+    ["10020", "嘉義市", "", "嘉義市", "", "嘉義市", "", "CYI", "10020", "I"],
+    ["64", "高雄市", "", "高雄市", "", "高雄市", "", "KHH", "64000", "E"],
+    ["65", "", "", "新北市", "", "新北市", "", "TPQ", "65000", "F"],
+    ["68", "", "", "", "", "桃園市", "", "TAO", "68000", "H"],
+    ["10019", "臺中市", "台中市", "", "", "", "", "", "10019", ""],
+    ["10003", "桃園縣", "", "桃園縣", "", "", "", "", "10003", ""],
+    ["10006", "臺中縣", "台中縣", "", "", "", "", "TXQ", "10006", "L"],
+    ["10011", "臺南縣", "台南縣", "", "", "", "", "TNQ", "10011", "R"],
+    ["10012", "高雄縣", "", "", "", "", "", "KHQ", "10012", "S"]
+  ],
+  "ids": [
+    18744641,
+    18744647,
+    18744644,
+    18744645,
+    19517270,
+    18744625,
+    18744626,
+    18744627,
+    18744628,
+    18744629,
+    18744630,
+    18744631,
+    18744632,
+    18744633,
+    18744634,
+    18744635,
+    18744636,
+    18744637,
+    18744638,
+    18744639,
+    18744640,
+    18744642,
+    18744643,
+    18744646,
+    18744648,
+    18744649,
+    18744650,
+    18744651,
+    18744652
+  ],
+  "sheet_updated_at": 0
+}
diff --git a/src/pages/register/org.vue b/src/pages/register/org.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
index a3692b0..63746c7 100644
--- a/src/pages/register/personal.vue
+++ b/src/pages/register/personal.vue
@@ -88,7 +88,7 @@ function onSubmit(values: LoginArgs) {
       <TheInput
         name="tel"
         type="tel"
-        label="電話號碼（不含『 - 』）"
+        label="聯絡電話（不含『 - 』）"
         placeholder="0901234564"
         autocomplete="tel"
         required
diff --git a/src/pages/register/unit.vue b/src/pages/register/unit.vue
new file mode 100644
index 0000000..a0e4214
--- /dev/null
+++ b/src/pages/register/unit.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { Form } from 'vee-validate'
+import { TWCountyList } from '@/data'
+import type { LoginArgs } from '@/logics/auth'
+import type { InputChildren } from '@/types'
+
+const schema = {
+  username: 'required',
+  email: 'required|email',
+  password: 'required|min:8',
+  passwordConfirm: 'required|confirmed:@password',
+  tel: 'required|numeric',
+  unitType: 'required',
+  unitName: 'required',
+  unitCounty: 'required',
+  invoice: 'required',
+}
+
+const initialValues = {
+  otherContactType: 'line',
+  invoice: 'no',
+}
+
+const unitType: InputChildren[] = [
+  {
+    text: '醫院',
+    value: 'hospital',
+  },
+  {
+    text: '警局',
+    value: 'police-station',
+  },
+  {
+    text: '消防局',
+    value: 'fire-department',
+  },
+]
+
+const otherContactItems: InputChildren[] = [
+  {
+    text: 'Line',
+    value: 'line',
+  },
+  {
+    text: 'Facebook',
+    value: 'facebook',
+  },
+  {
+    text: 'Telegram',
+    value: 'telegram',
+  },
+]
+
+const needInvoiceItems: InputChildren[] = [
+  {
+    text: '是',
+    value: 'yes',
+  },
+  {
+    text: '否',
+    value: 'no',
+  },
+]
+
+function onSubmit(values: LoginArgs) {
+  alert(JSON.stringify(values, null, 2))
+}
+</script>
+
+<template>
+  <AuthLayout>
+    <h1 class="text-xl mb-4">
+      註冊帳號（一線單位）
+    </h1>
+    <Form v-slot="{ meta }" :validation-schema="schema" :initial-values="initialValues" @submit="onSubmit">
+      <TheInput
+        name="username"
+        label="帳號名稱"
+        placeholder="username"
+        autocomplete="username"
+        required
+      />
+      <TheInput
+        name="email"
+        type="email"
+        label="電子郵件信箱"
+        placeholder="user@example.com"
+        autocomplete="email"
+        required
+      />
+      <TheInput
+        name="password"
+        type="password"
+        label="密碼"
+        placeholder="password"
+        autocomplete="new-password"
+        required
+      />
+      <TheInput
+        name="passwordConfirm"
+        type="password"
+        label="確認密碼"
+        placeholder="password"
+        autocomplete="current-password"
+        required
+      />
+      <TheInput
+        name="tel"
+        type="tel"
+        label="聯絡電話（不含『 - 』）"
+        placeholder="0901234564"
+        autocomplete="tel"
+        required
+      />
+      <TheSelect
+        name="unitType"
+        label="單位類型"
+        :children="unitType"
+        required
+      />
+      <TheInput
+        name="unitName"
+        type="text"
+        label="單位正式名稱"
+        required
+      />
+      <TheSelect
+        name="unitCounty"
+        label="單位縣市"
+        :children="TWCountyList"
+        required
+      />
+      <TheSelect
+        name="otherContactType"
+        label="其他聯絡方式"
+        :children="otherContactItems"
+      />
+      <TheInput
+        name="otherContact"
+        type="text"
+        label=""
+        placeholder="line / facebook / telegram"
+        autocomplete="tel"
+      />
+      <TheRadio
+        name="invoice"
+        label="是否需要收據"
+        :children="needInvoiceItems"
+        required
+      />
+      <div class="flex mb-4 justify-between items-center">
+        <router-link to="/" class="text-sm underline">
+          取消
+        </router-link>
+        <button class="btn" type="submit" :disabled="!meta.valid">
+          註冊
+        </button>
+      </div>
+    </Form>
+  </AuthLayout>
+</template>

From 1bb2680caed96846086ef1ac65d8463c4ed8828c Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 02:30:06 +0900
Subject: [PATCH 09/13] feat: reset password page

---
 src/logics/auth.ts                   |  5 ++++
 src/pages/account/password_reset.vue | 40 ++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/logics/auth.ts b/src/logics/auth.ts
index 0fa55f2..6f385cf 100644
--- a/src/logics/auth.ts
+++ b/src/logics/auth.ts
@@ -78,6 +78,10 @@ export function useAuth() {
     }
   }
 
+  function resetPassword(email: string) {
+    alert(email)
+  }
+
   return {
     userId,
     login,
@@ -86,5 +90,6 @@ export function useAuth() {
     loginWithTwitter,
     logout,
     isAuthorized,
+    resetPassword,
   }
 }
diff --git a/src/pages/account/password_reset.vue b/src/pages/account/password_reset.vue
index c73889a..9b54895 100644
--- a/src/pages/account/password_reset.vue
+++ b/src/pages/account/password_reset.vue
@@ -1,12 +1,42 @@
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { Form } from 'vee-validate'
+import { useAuth } from '@/logics/auth'
 
-defineProps({})
+const { resetPassword } = useAuth()
 
+const schema = {
+  email: 'required|email',
+}
+
+function onSubmit(values: {
+  email: string
+}) {
+  resetPassword(values.email)
+}
 </script>
 
 <template>
-  <main>
-    <h1>重置密碼</h1>
-  </main>
+  <AuthLayout>
+    <h1 class="text-xl mb-4">
+      重設密碼
+    </h1>
+    <Form v-slot="{ meta }" :validation-schema="schema" @submit="onSubmit">
+      <TheInput
+        name="email"
+        type="email"
+        label="電子郵件信箱"
+        placeholder="user@example.com"
+        autocomplete="email"
+        required
+      />
+      <div class="flex mb-4 justify-between items-center">
+        <router-link to="/" class="text-sm underline">
+          取消
+        </router-link>
+        <button class="btn" type="submit" :disabled="!meta.valid">
+          送出
+        </button>
+      </div>
+    </Form>
+  </AuthLayout>
 </template>

From 8e79f3fc712a34dd8b2078ff05f51706c31f82e2 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 02:38:40 +0900
Subject: [PATCH 10/13] refactor: adjust some styles

---
 src/components/LoginForm.vue            | 2 +-
 src/components/RegisterAccountLinks.vue | 2 +-
 src/components/SSOLogin.vue             | 2 +-
 src/pages/register/personal.vue         | 2 +-
 src/pages/register/unit.vue             | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 32f8af0..f5a00d8 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -33,7 +33,7 @@ function onSubmit(values: LoginArgs) {
       name="remember"
       label="記住我"
     />
-    <div class="flex mb-4 justify-between items-center">
+    <div class="flex mb-6 justify-between items-center">
       <router-link to="/account/password_reset" class="text-sm underline">
         忘記密碼
       </router-link>
diff --git a/src/components/RegisterAccountLinks.vue b/src/components/RegisterAccountLinks.vue
index ecddeb0..fdb0200 100644
--- a/src/components/RegisterAccountLinks.vue
+++ b/src/components/RegisterAccountLinks.vue
@@ -6,7 +6,7 @@ defineProps({})
 </script>
 
 <template>
-  <div>
+  <div class="border-t pt-2">
     <span class="py-2 block">註冊帳號：</span>
     <div class="flex space-x-4 text-center">
       <router-link to="/register/unit" class="flex-1 btn btn-outline">
diff --git a/src/components/SSOLogin.vue b/src/components/SSOLogin.vue
index 1ac291c..01ee06e 100644
--- a/src/components/SSOLogin.vue
+++ b/src/components/SSOLogin.vue
@@ -10,7 +10,7 @@ const {
 </script>
 
 <template>
-  <div class="space-y-2 mb-2">
+  <div class="space-y-3 py-4 border-t">
     <button class="btn w-full bg-line" @click="loginWithLine">
       Line 登入
     </button>
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
index 63746c7..c578097 100644
--- a/src/pages/register/personal.vue
+++ b/src/pages/register/personal.vue
@@ -111,7 +111,7 @@ function onSubmit(values: LoginArgs) {
         :children="needInvoiceItems"
         required
       />
-      <div class="flex mb-4 justify-between items-center">
+      <div class="flex justify-between items-center">
         <router-link to="/" class="text-sm underline">
           取消
         </router-link>
diff --git a/src/pages/register/unit.vue b/src/pages/register/unit.vue
index a0e4214..3e510a5 100644
--- a/src/pages/register/unit.vue
+++ b/src/pages/register/unit.vue
@@ -148,7 +148,7 @@ function onSubmit(values: LoginArgs) {
         :children="needInvoiceItems"
         required
       />
-      <div class="flex mb-4 justify-between items-center">
+      <div class="flex justify-between items-center">
         <router-link to="/" class="text-sm underline">
           取消
         </router-link>

From cc8c62935f044e36b84690b2f7dbc9ebc16885a0 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 02:58:23 +0900
Subject: [PATCH 11/13] chore: update deps

---
 package.json   |  2 +-
 pnpm-lock.yaml | 34 +++++++++++++++++-----------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index b428a19..2f21e52 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 181a524..f7ddebb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
-  '@hannoeru/eslint-config': ^0.1.1
+  '@hannoeru/eslint-config': ^0.1.2
   '@iconify/json': ^1.1.354
   '@vee-validate/i18n': ^4.1.20
   '@vee-validate/rules': ^4.1.20
@@ -32,7 +32,7 @@ dependencies:
   yup: 0.32.9
 
 devDependencies:
-  '@hannoeru/eslint-config': 0.1.1_eslint@7.28.0+typescript@4.3.2
+  '@hannoeru/eslint-config': 0.1.2_eslint@7.28.0+typescript@4.3.2
   '@iconify/json': 1.1.354
   '@vitejs/plugin-vue': 1.2.3_@vue+compiler-sfc@3.1.1
   '@vue/compiler-sfc': 3.1.1_vue@3.1.1
@@ -293,8 +293,8 @@ packages:
       - supports-color
     dev: true
 
-  /@hannoeru/eslint-config-basic/0.1.1_eslint@7.28.0:
-    resolution: {integrity: sha512-WP3gk6hR3wv57b+n3LvlDR3kUXpNov7G4xT7eDW23qn8O8AuTntdegA9xOPF1oS1YJhATFSrf/3ZfL66h3zv6A==}
+  /@hannoeru/eslint-config-basic/0.1.2_eslint@7.28.0:
+    resolution: {integrity: sha512-aoEF9+7V+dtUBG9kFy+L7FhmU2MzLE1IeUwE/wozjYZH1yzMEqwwGF5w0QqOgOUd4aOZDUuOD1KEL7O1WLsq/Q==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
@@ -314,12 +314,12 @@ packages:
       - supports-color
     dev: true
 
-  /@hannoeru/eslint-config-react/0.1.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-r+hKH/ZQeq8R8stsJNPY4Xgxi9ycWocg62zZBbMyUgtUOqt+ofd6uqqQJc4FbeeT3wBma715lkMWo71ArLp9FQ==}
+  /@hannoeru/eslint-config-react/0.1.2_eslint@7.28.0+typescript@4.3.2:
+    resolution: {integrity: sha512-FHh3VcxhjUpw9dHYDWcYDaAeioeT+6090mJeAe88IGx278QY+muXihIWzEsEmfq3N6/ggSzttM9SibjtnL1PiQ==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@hannoeru/eslint-config-ts': 0.1.1_eslint@7.28.0+typescript@4.3.2
+      '@hannoeru/eslint-config-ts': 0.1.2_eslint@7.28.0+typescript@4.3.2
       eslint: 7.28.0
       eslint-plugin-react: 7.24.0_eslint@7.28.0
     transitivePeerDependencies:
@@ -327,13 +327,13 @@ packages:
       - typescript
     dev: true
 
-  /@hannoeru/eslint-config-ts/0.1.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-ydM8yfiVfwcAD/wkWVkZAEiOorcgzM1MXYvtEDrpZNpO2NN6osS9J3PqX1T/CSJgR9qr/e/zudEoaWZcAXx4gg==}
+  /@hannoeru/eslint-config-ts/0.1.2_eslint@7.28.0+typescript@4.3.2:
+    resolution: {integrity: sha512-hQtFRC7tS7KX1u0kVPih6039uO9/crqbNk1hmH5ghmqpym4r17Ai5++18gIWvG881nRiFr+56zULT/qMdZnZDQ==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@hannoeru/eslint-config-basic': 0.1.1_eslint@7.28.0
+      '@hannoeru/eslint-config-basic': 0.1.2_eslint@7.28.0
       '@typescript-eslint/eslint-plugin': 4.26.1_c8cbd5e7f5f92609ec78d991aced454b
       '@typescript-eslint/parser': 4.26.1_eslint@7.28.0+typescript@4.3.2
       eslint: 7.28.0
@@ -342,12 +342,12 @@ packages:
       - supports-color
     dev: true
 
-  /@hannoeru/eslint-config-vue/0.1.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-Re5UUenP7WEXV3Xx30GOEoGfhPrgrbur/pyES0DpsZU34jyrvQfotHBXs0xzQSxRVeNB3y3O2H3MWOpMnBDxOA==}
+  /@hannoeru/eslint-config-vue/0.1.2_eslint@7.28.0+typescript@4.3.2:
+    resolution: {integrity: sha512-4+tc2O/cxF/OypAcJArvkTQaVxY09xh6ocqShVZBOERX93fK9Bv2zZKbKLOHroh1z91nS8EQQl6iW17lkXt2Ew==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@hannoeru/eslint-config-ts': 0.1.1_eslint@7.28.0+typescript@4.3.2
+      '@hannoeru/eslint-config-ts': 0.1.2_eslint@7.28.0+typescript@4.3.2
       eslint: 7.28.0
       eslint-plugin-vue: 7.10.0_eslint@7.28.0
     transitivePeerDependencies:
@@ -355,13 +355,13 @@ packages:
       - typescript
     dev: true
 
-  /@hannoeru/eslint-config/0.1.1_eslint@7.28.0+typescript@4.3.2:
-    resolution: {integrity: sha512-Rw98399zFNlJZwBNSoXACWGM0+Rz1BUzO5DknpBfgbiP7RhvkkJe/GxUGrR6oZmSEiKD2pTx7e5TcZZUGtpS7Q==}
+  /@hannoeru/eslint-config/0.1.2_eslint@7.28.0+typescript@4.3.2:
+    resolution: {integrity: sha512-BL5Q8WEXSR+cX3sTNneCYgCc7tByF72t29mv0iWtomRh5cOBFB7jGasvC8fbjIFkWXW8RMVJfag+foLrF79bDA==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@hannoeru/eslint-config-react': 0.1.1_eslint@7.28.0+typescript@4.3.2
-      '@hannoeru/eslint-config-vue': 0.1.1_eslint@7.28.0+typescript@4.3.2
+      '@hannoeru/eslint-config-react': 0.1.2_eslint@7.28.0+typescript@4.3.2
+      '@hannoeru/eslint-config-vue': 0.1.2_eslint@7.28.0+typescript@4.3.2
       eslint: 7.28.0
     transitivePeerDependencies:
       - supports-color

From bf8642ddaa2164e6bff3ecaae315db4c25a7ebb3 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 03:01:18 +0900
Subject: [PATCH 12/13] chore: change cancel redirect path

---
 src/pages/account/password_reset.vue | 2 +-
 src/pages/register/personal.vue      | 2 +-
 src/pages/register/unit.vue          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/account/password_reset.vue b/src/pages/account/password_reset.vue
index 9b54895..0b22be5 100644
--- a/src/pages/account/password_reset.vue
+++ b/src/pages/account/password_reset.vue
@@ -30,7 +30,7 @@ function onSubmit(values: {
         required
       />
       <div class="flex mb-4 justify-between items-center">
-        <router-link to="/" class="text-sm underline">
+        <router-link to="/login" class="text-sm underline">
           取消
         </router-link>
         <button class="btn" type="submit" :disabled="!meta.valid">
diff --git a/src/pages/register/personal.vue b/src/pages/register/personal.vue
index c578097..cce26db 100644
--- a/src/pages/register/personal.vue
+++ b/src/pages/register/personal.vue
@@ -112,7 +112,7 @@ function onSubmit(values: LoginArgs) {
         required
       />
       <div class="flex justify-between items-center">
-        <router-link to="/" class="text-sm underline">
+        <router-link to="/login" class="text-sm underline">
           取消
         </router-link>
         <button class="btn" type="submit" :disabled="!meta.valid">
diff --git a/src/pages/register/unit.vue b/src/pages/register/unit.vue
index 3e510a5..17ff989 100644
--- a/src/pages/register/unit.vue
+++ b/src/pages/register/unit.vue
@@ -149,7 +149,7 @@ function onSubmit(values: LoginArgs) {
         required
       />
       <div class="flex justify-between items-center">
-        <router-link to="/" class="text-sm underline">
+        <router-link to="/login" class="text-sm underline">
           取消
         </router-link>
         <button class="btn" type="submit" :disabled="!meta.valid">

From 26b33011e64328d0ccc37a674f4220b9f83d1bd0 Mon Sep 17 00:00:00 2001
From: hanlee <me@hanlee.co>
Date: Thu, 10 Jun 2021 03:17:29 +0900
Subject: [PATCH 13/13] feat: replace to new favicon

---
 public/favicon.ico | Bin 4286 -> 4286 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..d67e4e4d02d3a6a160797bcfeb06961a5ad6d386 100644
GIT binary patch
literal 4286
zcmeI0%SyvQ6oyYLWEos&6}*)R=y+Kv4OFu*-6(Dq@wO8Y)V4l`wYJYueSzvu@VPYp
zCyg=;!6s=IQYPg~IG33}Jv}oGAu8ZgE)$=rH%U|?A_?H4UBLeEK<vXFFmRZ&slflO
zfbTj4iZ$1n0Shrq)m&l6_&ImZuLuid{(_Odg}DyFEx1u&dk<_XJ~e*nSDX@JdFUTw
zo+hX(uzdiwKtu6!4%^qb|2*||jlcBy9*n-Jzv;j6SpP>@&v$_LydQXt?*rcd^cd${
zjk^C;r65rB)}2|f1Qr!wi)n8|*fBBWiTUcPu(sER@Bf{?B;bKIc+}~>%2xMHK4`RI
zp92rX#asG3k=?=d;;AnSApCED&H4=xq~rzp_bJD)#xt}ha?)>R)Gr$STz>y?see7{
zqfcCu5cV;0dEI;^9K-YSxE^{>@4sdEPr*q-&XBhQRzT`;(EnZknI90%KvRJcD-gsT
PL_v^}cf4j8Mx4|)C6se#

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S