feat: 後端API

app/citizen-frontend/src/pages/login.vue

@@ -17,29 +17,26 @@
             <v-card-text> 請輸入您的手機號碼或信箱 </v-card-text>
             <!-- 表單 -->
             <v-form class="pa-4" @submit.prevent="handleLogin">
-              <v-text-field
-                v-model="account"
+              <v-alert
+                v-if="errorMessage"
                 class="mb-4"
-                color="primary"
-                hide-details="auto"
-                label="手機號碼 / 信箱"
-                placeholder="例如: 0912345678"
-                prepend-inner-icon="mdi-cellphone-android"
-                required
-                rounded="lg"
-                variant="outlined"
-              />
+                density="compact"
+                type="error"
+                variant="tonal"
+              >
+                {{ errorMessage }}
+              </v-alert>
 
               <v-text-field
-                v-model="password"
+                v-model="account"
                 class="mb-6"
                 color="primary"
                 hide-details="auto"
-                label="密碼"
-                placeholder="請輸入密碼"
-                prepend-inner-icon="mdi-lock-outline"
+                label="手機號碼"
+                placeholder="例如: 0910666888"
+                prepend-inner-icon="mdi-cellphone-android"
+                required
                 rounded="lg"
-                type="password"
                 variant="outlined"
               />
 
@@ -106,6 +103,7 @@
 </template>
 
 <script setup lang="ts">
+import { HTTPError } from 'ky'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import BrandAvatar from '@/components/BrandAvatar.vue'
@@ -114,28 +112,75 @@ import { useAppStore } from '@/stores/app'
 const store = useAppStore()
 const router = useRouter()
 
-const account = ref('0912-345-678')
-const password = ref('')
+const account = ref('')
 const loading = ref(false)
 const lineLoading = ref(false)
+const errorMessage = ref('')
 
-function handleLogin () {
-  if (!account.value) return
-  loading.value = true
-  setTimeout(() => {
-    store.login(account.value)
-    loading.value = false
-    router.push('/')
-  }, 1000)
+/** 後端要求純數字、09 開頭、共 10 碼；允許使用者輸入時夾雜連字號或空白 */
+function normalizePhone (value: string) {
+  return value.replace(/\D/g, '')
 }
 
-function _handleLineLogin () {
-  lineLoading.value = true
-  setTimeout(() => {
-    store.login('0912-345-678') // LINE 模擬登入預設手機
-    lineLoading.value = false
+interface ErrorResponseBody {
+  /** 一般錯誤格式，例如 401 手機門號不存在 */
+  message?: string
+  /** 驗證失敗時（400）後端走 ASP.NET Core 的 ProblemDetails 格式 */
+  errors?: Record<string, string[]>
+}
+
+/** 優先取用後端回應 body 的錯誤訊息，取不到時退回通用錯誤訊息 */
+function resolveErrorMessage (error: unknown): string {
+  // ky 建立 HTTPError 時已經把 body 讀進 error.data，body 已被消耗，
+  // 不能再呼叫 error.response.json()（會丟 "Body has already been read"）
+  if (error instanceof HTTPError && error.data && typeof error.data === 'object') {
+    const body = error.data as ErrorResponseBody
+
+    if (body.message) {
+      return body.message
+    }
+
+    const firstFieldError = Object.values(body.errors ?? {})[0]?.[0]
+    if (firstFieldError) {
+      return firstFieldError
+    }
+  }
+
+  return error instanceof Error ? error.message : '登入失敗，請稍後再試。'
+}
+
+async function handleLogin () {
+  const phone = normalizePhone(account.value)
+
+  if (!/^09\d{8}$/.test(phone)) {
+    errorMessage.value = '請輸入正確的手機門號格式（09 開頭，共 10 碼）'
+    return
+  }
+
+  errorMessage.value = ''
+  loading.value = true
+
+  try {
+    await store.login(phone)
     router.push('/')
-  }, 1200)
+  } catch (error) {
+    errorMessage.value = resolveErrorMessage(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function _handleLineLogin () {
+  lineLoading.value = true
+
+  try {
+    await store.login('0910666888') // LINE 模擬登入預設手機
+    router.push('/')
+  } catch (error) {
+    errorMessage.value = resolveErrorMessage(error)
+  } finally {
+    lineLoading.value = false
+  }
 }
 </script>