From 2b303b18fc6748c560e5b4335a70f25cf59b9528 Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Tue, 31 Mar 2026 23:18:28 +0800
Subject: [PATCH] feat(login): support both password and Google SSO entry on
 login page

---
 src/pages/LoginPage.vue | 105 ++++++++++++++++++++++++++++++++++------
 1 file changed, 90 insertions(+), 15 deletions(-)

diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 6a792f9..847997e 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -4,7 +4,7 @@
       <template #header>
         <div class="text-center">
           <h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
-          <p class="text-sm text-gray-500 mt-1">使用 Authentik 帳號密碼登入</p>
+          <p class="text-sm text-gray-500 mt-1">可使用帳號密碼或 Google SSO 登入</p>
         </div>
       </template>
 
@@ -17,17 +17,48 @@
         class="mb-4"
       />
 
+      <el-form @submit.prevent="handlePasswordLogin" label-position="top">
+        <el-form-item label="帳號">
+          <el-input
+            v-model="form.username"
+            placeholder="username 或 email"
+            autocomplete="username"
+            @keyup.enter="handlePasswordLogin"
+          />
+        </el-form-item>
+        <el-form-item label="密碼">
+          <el-input
+            v-model="form.password"
+            type="password"
+            show-password
+            placeholder="請輸入密碼"
+            autocomplete="current-password"
+            @keyup.enter="handlePasswordLogin"
+          />
+        </el-form-item>
+        <el-button
+          type="primary"
+          class="w-full"
+          :loading="passwordLoading"
+          @click="handlePasswordLogin"
+        >
+          帳號密碼登入
+        </el-button>
+      </el-form>
+
+      <el-divider>或</el-divider>
+
       <el-button
-        type="primary"
+        type="success"
         class="w-full"
-        :loading="loading"
+        :loading="oidcLoading"
         @click="handleOidcLogin"
       >
-        前往 Authentik 登入
+        使用 Google SSO 登入
       </el-button>
 
       <div class="mt-4 text-xs text-gray-400 text-center space-y-1">
-        <p>會跳轉到 Authentik 輸入帳號密碼，成功後自動回來。</p>
+        <p>Google SSO 會跳轉到 Authentik，完成驗證後自動返回。</p>
         <p>登入成功後 access token 會存於本機 localStorage。</p>
       </div>
     </el-card>
@@ -35,20 +66,64 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { getOidcAuthorizeUrl } from '@/api/auth'
+import { reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getOidcAuthorizeUrl, loginWithPassword } from '@/api/auth'
+import { useAuthStore } from '@/stores/auth'
 
 const route = useRoute()
-const loading = ref(false)
-const error = ref('')
+const router = useRouter()
+const authStore = useAuthStore()
 
-async function handleOidcLogin() {
-  loading.value = true
+const passwordLoading = ref(false)
+const oidcLoading = ref(false)
+const error = ref('')
+const form = reactive({
+  username: '',
+  password: ''
+})
+
+function getPostLoginRedirect() {
+  const redirect = route.query.redirect || '/me'
+  return typeof redirect === 'string' ? redirect : '/me'
+}
+
+async function handlePasswordLogin() {
+  if (!form.username || !form.password) {
+    error.value = '請輸入帳號與密碼'
+    return
+  }
+  passwordLoading.value = true
   error.value = ''
   try {
-    const redirect = route.query.redirect || '/me'
-    sessionStorage.setItem('post_login_redirect', typeof redirect === 'string' ? redirect : '/me')
+    const res = await loginWithPassword(form.username, form.password)
+    const token = res.data?.access_token
+    if (!token) {
+      error.value = '登入失敗：缺少 access token'
+      return
+    }
+    authStore.setToken(token)
+    await authStore.fetchMe()
+    router.push(getPostLoginRedirect())
+  } catch (err) {
+    const detail = err.response?.data?.detail
+    if (detail === 'invalid_username_or_password') {
+      error.value = '帳號或密碼錯誤'
+    } else if (detail === 'authentik_login_not_configured') {
+      error.value = '後端尚未設定帳密登入參數'
+    } else {
+      error.value = '登入失敗，請稍後再試'
+    }
+  } finally {
+    passwordLoading.value = false
+  }
+}
+
+async function handleOidcLogin() {
+  oidcLoading.value = true
+  error.value = ''
+  try {
+    sessionStorage.setItem('post_login_redirect', getPostLoginRedirect())
     const callbackUrl = `${window.location.origin}/auth/callback`
     const res = await getOidcAuthorizeUrl(callbackUrl)
     const authorizeUrl = res.data.authorize_url
@@ -66,7 +141,7 @@ async function handleOidcLogin() {
       error.value = '登入失敗，請稍後再試'
     }
   } finally {
-    loading.value = false
+    oidcLoading.value = false
   }
 }
 </script>