monacousa-portal/pages/login.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>