feat(login): simplify to single keycloak redirect button
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user