HaimKortovich
3a52768b97
Some checks failed
Build and Publish / build-release (push) Failing after 1m31s
57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
auth: false
|
|
})
|
|
|
|
const { signIn, status } = useAuth()
|
|
|
|
const isLoading = ref(false)
|
|
const isAuthenticated = computed(() => status.value === 'authenticated')
|
|
|
|
watch(isAuthenticated, (authenticated) => {
|
|
if (authenticated) {
|
|
navigateTo('/')
|
|
}
|
|
})
|
|
|
|
async function loginWithZitadel() {
|
|
try {
|
|
isLoading.value = true
|
|
await signIn('zitadel', { callbackUrl: '/' })
|
|
} catch (error) {
|
|
console.error('Login failed:', error)
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex items-center justify-center" style="background: var(--page-bg);">
|
|
<div class="w-full max-w-md p-8 rounded-xl border" style="background: var(--surface); border-color: var(--card-border);">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-2xl font-semibold" style="color: var(--text-primary);">
|
|
Welcome to Segur-OS
|
|
</h1>
|
|
<p class="mt-2 text-sm" style="color: var(--text-muted);">
|
|
Sign in to access your insurance management dashboard
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
:disabled="isLoading"
|
|
@click="loginWithZitadel"
|
|
class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
style="background: var(--brand); color: white;"
|
|
>
|
|
<UIcon v-if="isLoading" name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin" />
|
|
<UIcon v-else name="i-heroicons-lock-closed" class="h-5 w-5" />
|
|
<span>{{ isLoading ? 'Signing in...' : 'Sign in with Zitadel' }}</span>
|
|
</button>
|
|
|
|
<div class="mt-6 text-center text-xs" style="color: var(--text-muted);">
|
|
<p>Secure authentication powered by Zitadel</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |