feat(login): simplify to single keycloak redirect button
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -17,34 +17,13 @@
|
|||||||
class="mb-4"
|
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
|
<el-button
|
||||||
type="success"
|
type="primary"
|
||||||
class="w-full"
|
class="w-full"
|
||||||
:loading="oidcLoading"
|
:loading="loginLoading"
|
||||||
@click="handleOidcLogin"
|
@click="handleLogin"
|
||||||
>
|
>
|
||||||
使用 Google SSO 登入
|
前往 Keycloak 登入
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<div class="mt-4 text-xs text-gray-400 text-center space-y-1">
|
<div class="mt-4 text-xs text-gray-400 text-center space-y-1">
|
||||||
@@ -56,45 +35,22 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { getOidcAuthorizeUrl } from '@/api/auth'
|
import { getOidcAuthorizeUrl } from '@/api/auth'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const passwordLoading = ref(false)
|
const loginLoading = ref(false)
|
||||||
const oidcLoading = ref(false)
|
|
||||||
const error = ref('')
|
const error = ref('')
|
||||||
const form = reactive({
|
|
||||||
username: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
function getPostLoginRedirect() {
|
function getPostLoginRedirect() {
|
||||||
const redirect = route.query.redirect || '/me'
|
const redirect = route.query.redirect || '/me'
|
||||||
return typeof redirect === 'string' ? redirect : '/me'
|
return typeof redirect === 'string' ? redirect : '/me'
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handlePasswordLogin() {
|
async function handleLogin() {
|
||||||
if (!form.username) {
|
loginLoading.value = true
|
||||||
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
|
|
||||||
error.value = ''
|
error.value = ''
|
||||||
try {
|
try {
|
||||||
await redirectToOidc({
|
await redirectToOidc({
|
||||||
@@ -103,7 +59,7 @@ async function handleOidcLogin() {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
error.value = err.message || '登入失敗,請稍後再試'
|
error.value = err.message || '登入失敗,請稍後再試'
|
||||||
} finally {
|
} finally {
|
||||||
oidcLoading.value = false
|
loginLoading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user