@htlkg/astro 0.0.1

package/src/auth/LoginForm.vue

@@ -0,0 +1,482 @@
+<template>
+  <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
+    <!-- Notification for errors/success messages -->
+    <Notification
+      v-model:show="showNotification"
+      :type="notificationType"
+      :title="notificationTitle"
+      :message="notificationMessage"
+      :fixed="true"
+    />
+
+    <!-- New Password Modal -->
+    <Modal
+      v-model:open="showNewPasswordModal"
+      modal-name="newPasswordModal"
+      title="Set New Password"
+      :actions="[{ action: 'setPassword', name: 'Set Password' }]"
+      @action="handleNewPasswordAction"
+    >
+      <p class="mb-4 text-sm text-gray-600">
+        You need to set a new password before continuing.
+      </p>
+      <uiInput
+        name="newPassword"
+        label="New Password"
+        type="password"
+        :loading="isLoading"
+        :value="newPassword"
+        :error="newPasswordError"
+        :color="newPasswordError ? 'red' : undefined"
+        requiredText="Required"
+        @inputChanged="(input) => { newPassword = input.value; newPasswordError = ''; }"
+      />
+      <uiInput
+        name="confirmPassword"
+        label="Confirm Password"
+        type="password"
+        :loading="isLoading"
+        :value="confirmPassword"
+        :error="confirmPasswordError"
+        :color="confirmPasswordError ? 'red' : undefined"
+        requiredText="Required"
+        @inputChanged="(input) => { confirmPassword = input.value; confirmPasswordError = ''; }"
+      />
+    </Modal>
+
+    <!-- Password Reset Modal -->
+    <Modal
+      v-model:open="showResetModal"
+      modal-name="resetPasswordModal"
+      title="Reset Your Password"
+      :actions="[{ action: 'reset', name: 'Send Reset Link' }]"
+      @action="handleResetModalAction"
+    >
+      <p class="mb-4 text-sm text-gray-600">
+        Enter your email address. If there's an account associated with this email,
+        we'll send you instructions to reset your password.
+      </p>
+      <uiInput
+        name="resetEmail"
+        label="Email Address"
+        type="email"
+        :loading="isLoading"
+        :value="resetEmail"
+        @inputChanged="(input) => resetEmail = input.value"
+      />
+    </Modal>
+
+    <!-- MFA Code Modal -->
+    <Modal
+      v-model:open="showMfaModal"
+      modal-name="mfaModal"
+      title="Two-Factor Authentication"
+      :actions="[{ action: 'verify', name: 'Verify Code' }]"
+      @action="handleMfaAction"
+    >
+      <p class="mb-4 text-sm text-gray-600">
+        Enter the verification code from your authenticator app.
+      </p>
+      <uiInput
+        name="mfaCode"
+        label="Verification Code"
+        type="text"
+        :loading="isLoading"
+        :value="mfaCode"
+        :error="mfaError"
+        :color="mfaError ? 'red' : undefined"
+        placeholder="000000"
+        requiredText="Required"
+        @inputChanged="(input) => { mfaCode = input.value; mfaError = ''; }"
+      />
+    </Modal>
+
+    <!-- Login Form Container -->
+    <div class="bg-white rounded-2xl shadow-2xl p-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <!-- Logo and Header -->
+      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        <img
+          v-if="logo"
+          class="mx-auto h-16"
+          :src="logo"
+          alt="Logo"
+        />
+        <h2 v-if="title" class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          {{ title }}
+        </h2>
+      </div>
+
+      <!-- Login Form -->
+      <div class="mt-10">
+        <form class="space-y-6" @submit.prevent="handleLogin">
+          <uiInput
+            name="username"
+            :loading="isLoading"
+            label="Email Address"
+            type="email"
+            placeholder="Enter your email address"
+            :value="username"
+            :error="emailError"
+            :color="emailError ? 'red' : undefined"
+            requiredText="Required"
+            @inputChanged="handleEmailChange"
+          />
+
+          <uiInput
+            name="password"
+            :loading="isLoading"
+            label="Password"
+            type="password"
+            placeholder="Enter your password"
+            :value="password"
+            :error="passwordError"
+            :color="passwordError ? 'red' : undefined"
+            requiredText="Required"
+            @inputChanged="handlePasswordChange"
+          />
+
+          <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
+            <uiButton
+              :loading="isLoading"
+              :disabled="!username || !password || isLoading"
+              @click="handleLogin"
+            >
+              {{ isLoading ? 'Signing in...' : 'Sign In' }}
+            </uiButton>
+
+            <p class="text-sm text-gray-500">
+              Forgot your password?
+              <span
+                @click="showResetModal = true"
+                class="text-indigo-600 hover:text-indigo-500 underline cursor-pointer font-semibold"
+              >
+                Reset it
+              </span>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { signIn, confirmSignIn, resetPassword, getCurrentUser, fetchAuthSession } from "aws-amplify/auth";
+import { uiInput, uiButton } from "@hotelinking/ui";
+import { Modal, Notification } from "@htlkg/components";
+
+interface Props {
+  redirectUrl?: string;
+  logo?: string;
+  title?: string;
+  initialError?: string | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  redirectUrl: "/",
+  logo: "https://images.hotelinking.com/ui/WiFiBot.svg",
+  title: "Sign In",
+  initialError: null,
+});
+
+// Form state
+const username = ref("");
+const password = ref("");
+const isLoading = ref(false);
+const emailError = ref("");
+const passwordError = ref("");
+
+// Notification state
+const showNotification = ref(false);
+const notificationType = ref<"success" | "danger" | "warning" | "info">("danger");
+const notificationTitle = ref("");
+const notificationMessage = ref("");
+
+// New password modal state
+const showNewPasswordModal = ref(false);
+const newPassword = ref("");
+const confirmPassword = ref("");
+const newPasswordError = ref("");
+const confirmPasswordError = ref("");
+
+// Reset password modal state
+const showResetModal = ref(false);
+const resetEmail = ref("");
+
+// MFA modal state
+const showMfaModal = ref(false);
+const mfaCode = ref("");
+const mfaError = ref("");
+
+// Store sign-in result for MFA flow
+let pendingSignInResult: any = null;
+
+onMounted(() => {
+  if (props.initialError) {
+    showErrorNotification("Authentication Error", props.initialError);
+  }
+  checkAuthStatus();
+});
+
+async function checkAuthStatus() {
+  try {
+    await getCurrentUser();
+    const session = await fetchAuthSession();
+    if (session.tokens?.accessToken) {
+      window.location.href = props.redirectUrl;
+    }
+  } catch {
+    // User not authenticated, stay on login page
+  }
+}
+
+// Notification helpers
+const showErrorNotification = (title: string, message: string) => {
+  notificationType.value = "danger";
+  notificationTitle.value = title;
+  notificationMessage.value = message;
+  showNotification.value = true;
+};
+
+const showSuccessNotification = (title: string, message: string) => {
+  notificationType.value = "success";
+  notificationTitle.value = title;
+  notificationMessage.value = message;
+  showNotification.value = true;
+};
+
+// Input handlers
+const handleEmailChange = (input: { value?: string; inputValue?: string }) => {
+  username.value = input.value || input.inputValue || "";
+  emailError.value = "";
+  showNotification.value = false;
+};
+
+const handlePasswordChange = (input: { value?: string; inputValue?: string }) => {
+  password.value = input.value || input.inputValue || "";
+  passwordError.value = "";
+  showNotification.value = false;
+};
+
+// Login handler
+async function handleLogin() {
+  emailError.value = "";
+  passwordError.value = "";
+
+  if (!username.value) {
+    emailError.value = "Email is required";
+    return;
+  }
+  if (!password.value) {
+    passwordError.value = "Password is required";
+    return;
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(username.value)) {
+    emailError.value = "Please enter a valid email address";
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    const result = await signIn({
+      username: username.value,
+      password: password.value,
+    });
+
+    if (result.isSignedIn) {
+      const session = await fetchAuthSession();
+      if (session.tokens?.accessToken) {
+        window.location.href = props.redirectUrl;
+      }
+    } else if (result.nextStep) {
+      handleNextStep(result);
+    }
+  } catch (err: any) {
+    handleAuthError(err);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// Handle authentication next steps
+function handleNextStep(result: any) {
+  pendingSignInResult = result;
+
+  switch (result.nextStep.signInStep) {
+    case "CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED":
+      showNewPasswordModal.value = true;
+      break;
+    case "CONFIRM_SIGN_IN_WITH_TOTP_CODE":
+    case "CONFIRM_SIGN_IN_WITH_SMS_CODE":
+      showMfaModal.value = true;
+      break;
+    case "CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE":
+      showErrorNotification(
+        "Additional Verification",
+        "Custom challenge required. Please contact support."
+      );
+      break;
+    default:
+      showErrorNotification(
+        "Additional Step Required",
+        `${result.nextStep.signInStep}`
+      );
+  }
+}
+
+// New password modal handler
+async function handleNewPasswordAction(event: { action: string }) {
+  if (event.action === "close") {
+    showNewPasswordModal.value = false;
+    return;
+  }
+
+  if (event.action === "setPassword") {
+    newPasswordError.value = "";
+    confirmPasswordError.value = "";
+
+    if (!newPassword.value) {
+      newPasswordError.value = "Password is required";
+      return;
+    }
+    if (newPassword.value.length < 8) {
+      newPasswordError.value = "Password must be at least 8 characters";
+      return;
+    }
+    if (newPassword.value !== confirmPassword.value) {
+      confirmPasswordError.value = "Passwords do not match";
+      return;
+    }
+
+    isLoading.value = true;
+
+    try {
+      const result = await confirmSignIn({
+        challengeResponse: newPassword.value,
+      });
+
+      if (result.isSignedIn) {
+        showNewPasswordModal.value = false;
+        showSuccessNotification("Password Updated", "Your password has been set successfully.");
+        const session = await fetchAuthSession();
+        if (session.tokens?.accessToken) {
+          setTimeout(() => {
+            window.location.href = props.redirectUrl;
+          }, 1000);
+        }
+      }
+    } catch (err: any) {
+      handleAuthError(err);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+}
+
+// Reset password modal handler
+async function handleResetModalAction(event: { action: string }) {
+  if (event.action === "close") {
+    showResetModal.value = false;
+    return;
+  }
+
+  if (event.action === "reset") {
+    if (!resetEmail.value) {
+      showErrorNotification("Email Required", "Please enter your email address.");
+      return;
+    }
+
+    isLoading.value = true;
+
+    try {
+      await resetPassword({ username: resetEmail.value });
+      showResetModal.value = false;
+      showSuccessNotification(
+        "Reset Email Sent",
+        "Check your email for password reset instructions."
+      );
+    } catch (err: any) {
+      handleAuthError(err);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+}
+
+// MFA modal handler
+async function handleMfaAction(event: { action: string }) {
+  if (event.action === "close") {
+    showMfaModal.value = false;
+    return;
+  }
+
+  if (event.action === "verify") {
+    mfaError.value = "";
+
+    if (!mfaCode.value) {
+      mfaError.value = "Verification code is required";
+      return;
+    }
+
+    isLoading.value = true;
+
+    try {
+      const result = await confirmSignIn({
+        challengeResponse: mfaCode.value,
+      });
+
+      if (result.isSignedIn) {
+        showMfaModal.value = false;
+        showSuccessNotification("Verified", "Authentication successful.");
+        const session = await fetchAuthSession();
+        if (session.tokens?.accessToken) {
+          setTimeout(() => {
+            window.location.href = props.redirectUrl;
+          }, 1000);
+        }
+      }
+    } catch (err: any) {
+      mfaError.value = "Invalid verification code";
+      handleAuthError(err);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+}
+
+// Error handler
+function handleAuthError(err: any) {
+  if (err.name === "NotAuthorizedException") {
+    showErrorNotification(
+      "Authentication Failed",
+      "Invalid email or password. Please check your credentials and try again."
+    );
+  } else if (err.name === "UserNotConfirmedException") {
+    showErrorNotification(
+      "Account Not Confirmed",
+      "Please confirm your email address before signing in."
+    );
+  } else if (err.name === "PasswordResetRequiredException") {
+    showErrorNotification(
+      "Password Reset Required",
+      "Please reset your password to continue."
+    );
+  } else if (err.name === "UserNotFoundException") {
+    showErrorNotification(
+      "User Not Found",
+      "No account found with this email address."
+    );
+  } else if (err.name === "TooManyRequestsException") {
+    showErrorNotification(
+      "Too Many Attempts",
+      "Too many login attempts. Please wait a moment and try again."
+    );
+  } else {
+    showErrorNotification("Error", err.message || "An unexpected error occurred.");
+  }
+}
+</script>

package/src/auth/LoginPage.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * Default Login Page for htlkg integration
+ *
+ * This page is automatically injected by the htlkg integration when
+ * loginPage is enabled in the configuration.
+ *
+ * Features:
+ * - AWS Amplify authentication with Cognito
+ * - New password / reset password flow
+ * - MFA support
+ * - Error notifications using @hotelinking/ui
+ * - No custom CSS - uses @hotelinking/ui components
+ * - Redirects if user is already authenticated
+ */
+
+import DefaultLayout from "../layouts/DefaultLayout.astro";
+import LoginForm from "./LoginForm.vue";
+
+export const prerender = false;
+
+// Get configuration from virtual module
+const { loginPageConfig } = await import("virtual:htlkg-config");
+
+const {
+  logo = "https://images.hotelinking.com/ui/WiFiBot.svg",
+  title = "Sign In",
+  redirectUrl = "/admin",
+} = loginPageConfig || {};
+
+// Check if user is already authenticated (populated by auth middleware)
+const user = Astro.locals.user;
+
+if (user) {
+  // User is already logged in, redirect to configured URL or query param
+  return Astro.redirect(Astro.url.searchParams.get("redirect") || redirectUrl);
+}
+
+// Get query parameters for error handling
+const { searchParams } = Astro.url;
+const error = searchParams.get("error");
+
+// Error messages
+const errorMessages: Record<string, string> = {
+  not_authenticated: "Please sign in to continue",
+  admin_required: "Admin access required",
+  access_denied: "Access denied",
+  invalid_brand: "Invalid brand",
+  server_error: "An error occurred. Please try again.",
+};
+
+const errorMessage = error ? errorMessages[error] || "An error occurred" : null;
+const finalRedirectUrl = searchParams.get("redirect") || redirectUrl;
+---
+
+<DefaultLayout title={title}>
+  <div
+    class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
+  >
+    <div class="max-w-md w-full space-y-8">
+      <LoginForm
+        client:only="vue"
+        redirectUrl={finalRedirectUrl}
+        logo={logo}
+        title={title}
+        initialError={errorMessage}
+      />
+    </div>
+  </div>
+</DefaultLayout>

package/src/components/PageHeader.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * Page Header Component
+ *
+ * Reusable page header with title, description, and action buttons.
+ *
+ * @example
+ * ```astro
+ * <PageHeader
+ *   title="Dashboard"
+ *   description="Overview of your account"
+ * >
+ *   <button slot="actions">Add New</button>
+ * </PageHeader>
+ * ```
+ */
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  breadcrumbs?: BreadcrumbItem[];
+}
+
+const { title, description, breadcrumbs = [] } = Astro.props;
+---
+
+<div class="page-header">
+  {
+    breadcrumbs.length > 0 && (
+      <nav class="breadcrumbs">
+        {breadcrumbs.map((crumb, index) => (
+          <>
+            {crumb.href ? (
+              <a href={crumb.href} class="breadcrumb-link">
+                {crumb.label}
+              </a>
+            ) : (
+              <span class="breadcrumb-current">{crumb.label}</span>
+            )}
+            {index < breadcrumbs.length - 1 && (
+              <span class="breadcrumb-separator">/</span>
+            )}
+          </>
+        ))}
+      </nav>
+    )
+  }
+
+  <div class="header-content">
+    <div class="header-text">
+      <h1 class="header-title">{title}</h1>
+      {description && <p class="header-description">{description}</p>}
+    </div>
+
+    <div class="header-actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .page-header {
+    margin-bottom: 2rem;
+  }
+
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+  }
+
+  .breadcrumb-link {
+    color: #6b7280;
+    text-decoration: none;
+    transition: color 0.2s;
+  }
+
+  .breadcrumb-link:hover {
+    color: #111827;
+  }
+
+  .breadcrumb-current {
+    color: #111827;
+    font-weight: 500;
+  }
+
+  .breadcrumb-separator {
+    color: #d1d5db;
+  }
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2rem;
+  }
+
+  .header-text {
+    flex: 1;
+  }
+
+  .header-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  .header-description {
+    margin-top: 0.5rem;
+    color: #6b7280;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .header-content {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .header-title {
+      font-size: 1.5rem;
+    }
+
+    .header-actions {
+      width: 100%;
+    }
+  }
+</style>