121 lines
3.8 KiB
Vue
121 lines
3.8 KiB
Vue
<template>
|
|
<v-app full-height>
|
|
<v-main class="container">
|
|
<v-container class="fill-height" fluid>
|
|
<v-row align="center" justify="center" class="fill-height">
|
|
<v-col cols="12" class="d-flex flex-column align-center">
|
|
<v-card class="pa-8" rounded max-width="450" elevation="3">
|
|
<v-row no-gutters>
|
|
<v-col cols="12" class="text-center mb-6">
|
|
<v-img src="/Port_Nimara_Logo_2_Colour_New_Transparent.png" width="200" class="mx-auto mb-4" />
|
|
<h1 class="text-h5 font-weight-medium mb-2">Welcome to Port Nimara</h1>
|
|
<p class="text-body-2 text-grey-darken-1">Client Portal Access</p>
|
|
</v-col>
|
|
|
|
<!-- Error Alert -->
|
|
<v-col cols="12" v-if="errorMessage" class="mb-4">
|
|
<v-alert
|
|
:text="errorMessage"
|
|
color="error"
|
|
variant="tonal"
|
|
closable
|
|
@click:close="errorMessage = ''"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Keycloak SSO Login -->
|
|
<v-col cols="12" class="mb-4">
|
|
<v-btn
|
|
color="primary"
|
|
size="large"
|
|
block
|
|
@click="loginWithKeycloak"
|
|
prepend-icon="mdi-shield-account"
|
|
:loading="keycloakLoading"
|
|
:disabled="keycloakLoading"
|
|
>
|
|
{{ keycloakLoading ? 'Connecting...' : 'Login with Single Sign-On' }}
|
|
</v-btn>
|
|
<p class="text-caption text-center text-grey-darken-1 mt-3">
|
|
Secure authentication through Keycloak SSO
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
|
|
<!-- PWA Install Banner -->
|
|
<PWAInstallBanner />
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// Define page meta for public access
|
|
definePageMeta({
|
|
auth: false
|
|
});
|
|
|
|
// Custom Keycloak auth
|
|
const { login: keycloakLogin } = useCustomAuth();
|
|
|
|
const keycloakLoading = ref(false);
|
|
const errorMessage = ref('');
|
|
|
|
// Check for error in query params
|
|
const route = useRoute();
|
|
onMounted(() => {
|
|
const error = route.query.error as string;
|
|
if (error) {
|
|
switch (error) {
|
|
case 'auth_failed':
|
|
errorMessage.value = 'Authentication failed. Please try again.';
|
|
break;
|
|
case 'service_unavailable':
|
|
errorMessage.value = 'Authentication service is temporarily unavailable. Please try again in a few moments.';
|
|
break;
|
|
case 'server_error':
|
|
errorMessage.value = 'Server error occurred during authentication. Please try again.';
|
|
break;
|
|
case 'access_denied':
|
|
errorMessage.value = 'Access denied. Please check your credentials and try again.';
|
|
break;
|
|
default:
|
|
errorMessage.value = 'Authentication failed. Please try again.';
|
|
}
|
|
}
|
|
});
|
|
|
|
// SSO login function using custom Keycloak auth
|
|
const loginWithKeycloak = async () => {
|
|
try {
|
|
errorMessage.value = ''; // Clear any previous errors
|
|
keycloakLoading.value = true;
|
|
console.log('[LOGIN] Starting SSO authentication via Keycloak...');
|
|
|
|
// Use our custom Keycloak authentication
|
|
keycloakLogin();
|
|
|
|
} catch (error) {
|
|
console.error('[LOGIN] SSO login error:', error);
|
|
errorMessage.value = 'SSO login failed. Please try again.';
|
|
} finally {
|
|
keycloakLoading.value = false;
|
|
}
|
|
};
|
|
|
|
useHead({
|
|
title: "Port Nimara - Login",
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
background: url(/background.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
</style>
|