fix: switch frontend login to authentik auth-code flow

src/pages/LoginPage.vue

@@ -8,82 +8,52 @@
         </div>
       </template>
 
-      <el-form @submit.prevent="handleLogin">
-        <el-form-item label="帳號">
-          <el-input
-            v-model="username"
-            placeholder="請輸入 Authentik username / email"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="密碼">
-          <el-input
-            v-model="password"
-            type="password"
-            placeholder="請輸入密碼"
-            clearable
-            show-password
-          />
-        </el-form-item>
+      <el-alert
+        v-if="error"
+        :title="error"
+        type="error"
+        show-icon
+        :closable="false"
+        class="mb-4"
+      />
 
-        <el-alert
-          v-if="error"
-          :title="error"
-          type="error"
-          show-icon
-          :closable="false"
-          class="mb-4"
-        />
+      <el-button
+        type="primary"
+        class="w-full"
+        :loading="loading"
+        @click="handleOidcLogin"
+      >
+        前往 Authentik 登入
+      </el-button>
 
-        <el-form-item>
-          <el-button
-            type="primary"
-            native-type="submit"
-            class="w-full"
-            :loading="loading"
-            :disabled="!username.trim() || !password.trim()"
-          >
-            登入
-          </el-button>
-        </el-form-item>
-      </el-form>
-
-      <p class="text-xs text-gray-400 text-center mt-2">登入成功後 access token 會存於本機 localStorage</p>
+      <div class="mt-4 text-xs text-gray-400 text-center space-y-1">
+        <p>會跳轉到 Authentik 輸入帳號密碼，成功後自動回來。</p>
+        <p>登入成功後 access token 會存於本機 localStorage。</p>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-import { loginWithPassword } from '@/api/auth'
+import { useRoute } from 'vue-router'
+import { getOidcAuthorizeUrl } from '@/api/auth'
 
-const router = useRouter()
 const route = useRoute()
-const authStore = useAuthStore()
-
-const username = ref('')
-const password = ref('')
 const loading = ref(false)
 const error = ref('')
 
-async function handleLogin() {
-  if (!username.value.trim() || !password.value.trim()) return
+async function handleOidcLogin() {
   loading.value = true
   error.value = ''
   try {
-    const loginRes = await loginWithPassword(username.value.trim(), password.value)
-    authStore.setToken(loginRes.data.access_token)
-    await authStore.fetchMe()
     const redirect = route.query.redirect || '/me'
-    router.push(redirect)
+    const callbackUrl = `${window.location.origin}/auth/callback?redirect=${encodeURIComponent(redirect)}`
+    const res = await getOidcAuthorizeUrl(callbackUrl)
+    window.location.href = res.data.authorize_url
   } catch (err) {
-    authStore.logout()
     const detail = err.response?.data?.detail
-    if (detail === 'invalid_username_or_password') {
-      error.value = '帳號或密碼錯誤'
-    } else if (detail === 'authentik_login_not_configured') {
+    if (detail === 'authentik_login_not_configured') {
       error.value = '後端尚未設定 Authentik 登入參數'
     } else {
       error.value = '登入失敗，請稍後再試'