feat(login): simplify to single keycloak redirect button

This commit is contained in:
Chris
2026-04-01 01:35:46 +08:00
parent 9abe1f13e1
commit e3e920dc64

View File

@@ -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"
:loading="loginLoading"
@click="handleLogin"
>
使用帳號登入
</el-button>
</el-form>
<el-divider></el-divider>
<el-button
type="success"
class="w-full"
:loading="oidcLoading"
@click="handleOidcLogin"
>
使用 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
}
}