From a1eb7ef41b7cef95cf369b4d486712b6f3be2e3d Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Wed, 1 Apr 2026 01:35:46 +0800
Subject: [PATCH] feat(login): simplify to single keycloak redirect button

---
 frontend/src/pages/LoginPage.vue | 64 +++++---------------------------
 1 file changed, 10 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 18b1306..5a238f1 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/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">可使用帳號登入或 Google SSO 登入</p>
+          <p class="text-sm text-gray-500 mt-1">按下按鈕前往 Keycloak 登入</p>
         </div>
       </template>
 
@@ -17,34 +17,13 @@
         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-button
-          type="primary"
-          class="w-full"
-          :loading="passwordLoading"
-          @click="handlePasswordLogin"
-        >
-          使用帳號登入
-        </el-button>
-      </el-form>
-
-      <el-divider>或</el-divider>
-
       <el-button
-        type="success"
+        type="primary"
         class="w-full"
-        :loading="oidcLoading"
-        @click="handleOidcLogin"
+        :loading="loginLoading"
+        @click="handleLogin"
       >
-        使用 Google SSO 登入
+        前往 Keycloak 登入
       </el-button>
 
       <div class="mt-4 text-xs text-gray-400 text-center space-y-1">
@@ -56,45 +35,22 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { getOidcAuthorizeUrl } from '@/api/auth'
 
 const route = useRoute()
 
-const passwordLoading = ref(false)
-const oidcLoading = ref(false)
+const loginLoading = ref(false)
 const error = ref('')
-const form = reactive({
-  username: ''
-})
 
 function getPostLoginRedirect() {
   const redirect = route.query.redirect || '/me'
   return typeof redirect === 'string' ? redirect : '/me'
 }
 
-async function handlePasswordLogin() {
-  if (!form.username) {
-    error.value = '請輸入帳號'
-    return
-  }
-  passwordLoading.value = true
-  error.value = ''
-  try {
-    await redirectToOidc({
-      loginHint: form.username,
-      prompt: 'login'
-    })
-  } catch (_err) {
-    error.value = '登入失敗，請稍後再試'
-  } finally {
-    passwordLoading.value = false
-  }
-}
-
-async function handleOidcLogin() {
-  oidcLoading.value = true
+async function handleLogin() {
+  loginLoading.value = true
   error.value = ''
   try {
     await redirectToOidc({
@@ -103,7 +59,7 @@ async function handleOidcLogin() {
   } catch (err) {
     error.value = err.message || '登入失敗，請稍後再試'
   } finally {
-    oidcLoading.value = false
+    loginLoading.value = false
   }
 }