70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-main class="d-flex align-center justify-center min-h-screen bg-grey-lighten-4">
|
|
<v-container>
|
|
<v-row justify="center">
|
|
<v-col cols="12" sm="8" md="6" lg="4">
|
|
<v-card class="elevation-8 rounded-lg">
|
|
<v-card-text class="pa-8">
|
|
<div class="text-center mb-6">
|
|
<!-- <v-img
|
|
src="/logo.png"
|
|
alt="MonacoUSA"
|
|
max-width="120"
|
|
class="mx-auto mb-4"
|
|
/> -->
|
|
<h1 class="text-h4 font-weight-bold text-primary mb-2">
|
|
MonacoUSA Portal
|
|
</h1>
|
|
<p class="text-body-1 text-grey-600">
|
|
Sign in to access your dashboard
|
|
</p>
|
|
</div>
|
|
|
|
<v-btn
|
|
@click="handleLogin"
|
|
:loading="loading"
|
|
color="primary"
|
|
size="large"
|
|
block
|
|
class="mb-4"
|
|
prepend-icon="mdi-login"
|
|
>
|
|
Sign In with SSO
|
|
</v-btn>
|
|
|
|
<div class="text-center">
|
|
<p class="text-caption text-grey-600">
|
|
Secure authentication powered by Keycloak
|
|
</p>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
auth: false,
|
|
layout: false,
|
|
});
|
|
|
|
const { login } = useAuth();
|
|
const loading = ref(false);
|
|
|
|
const handleLogin = async () => {
|
|
loading.value = true;
|
|
try {
|
|
await login();
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|