42 lines
No EOL
1 KiB
Vue
42 lines
No EOL
1 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const { isAuthenticated, isInitialized, initKeycloak, login } = useKeycloak()
|
|
const isLoggingIn = ref(false)
|
|
|
|
onMounted(async () => {
|
|
const auth = await initKeycloak()
|
|
if (auth) {
|
|
navigateTo('/')
|
|
}
|
|
})
|
|
|
|
const handleLogin = () => {
|
|
isLoggingIn.value = true
|
|
login()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-wrapper">
|
|
<section class="settings-panel">
|
|
<div class="panel-header archivo-black">
|
|
MOD PORTAL
|
|
</div>
|
|
<div class="panel-body" style="text-align: center;">
|
|
<p style="color: #8b949e; font-size: 0.95rem; margin-bottom: 1.5rem;">
|
|
Hai there :3
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="btn-login-action"
|
|
:disabled="!isInitialized || isLoggingIn"
|
|
@click="handleLogin"
|
|
>
|
|
<span v-if="isLoggingIn" class="spinner sm btn-spinner"></span>
|
|
<span>{{ isLoggingIn ? 'Redirecting...' : 'Login with Keycloak' }}</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template> |