port-nimara-client-portal/pages/login.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>