@quazardous/qdadm 1.19.3

package/src/components/pages/LoginPage.vue

@@ -0,0 +1,334 @@
+<script setup lang="ts">
+/**
+ * LoginPage - Generic login page component
+ *
+ * Uses authAdapter from qdadm context for authentication.
+ * Customizable via props and slots for app branding.
+ *
+ * Usage:
+ *   <LoginPage />
+ *   <LoginPage title="My App" icon="pi pi-lock" />
+ *   <LoginPage :logo="LogoComponent" />
+ *
+ * With slot:
+ *   <LoginPage>
+ *     <template #footer>
+ *       <p>Demo accounts: admin, user</p>
+ *     </template>
+ *   </LoginPage>
+ */
+import { ref, inject, computed, type PropType, type Component } from 'vue'
+import { useRouter } from 'vue-router'
+import Card from 'primevue/card'
+import InputText from 'primevue/inputtext'
+import Password from 'primevue/password'
+import Button from 'primevue/button'
+
+/**
+ * Auth adapter interface
+ */
+interface AuthAdapter {
+  login: (credentials: { username: string; password: string }) => Promise<LoginResult>
+}
+
+/**
+ * Login result from auth adapter
+ */
+interface LoginResult {
+  user?: {
+    username?: string
+    email?: string
+    [key: string]: unknown
+  }
+  [key: string]: unknown
+}
+
+/**
+ * Orchestrator interface
+ */
+interface Orchestrator {
+  toast: {
+    success: (summary: string, detail?: string, emitter?: string) => void
+    error: (summary: string, detail?: string, emitter?: string) => void
+  }
+  signals: {
+    emit: (signal: string, payload: unknown) => void
+  }
+}
+
+/**
+ * App config interface
+ */
+interface AppConfig {
+  name?: string
+  [key: string]: unknown
+}
+
+/**
+ * Axios-like error interface
+ */
+interface AxiosError {
+  response?: {
+    data?: {
+      error?: {
+        message?: string
+      }
+      message?: string
+    }
+    status?: number
+  }
+  message?: string
+}
+
+const props = defineProps({
+  /**
+   * Override app title (defaults to qdadm app.name config)
+   */
+  title: {
+    type: String as PropType<string | null>,
+    default: null
+  },
+  /**
+   * PrimeIcons icon class (e.g., 'pi pi-lock')
+   */
+  icon: {
+    type: String,
+    default: 'pi pi-shield'
+  },
+  /**
+   * Custom logo component (replaces icon)
+   */
+  logo: {
+    type: Object as PropType<Component | null>,
+    default: null
+  },
+  /**
+   * Username field label
+   */
+  usernameLabel: {
+    type: String,
+    default: 'Username'
+  },
+  /**
+   * Password field label
+   */
+  passwordLabel: {
+    type: String,
+    default: 'Password'
+  },
+  /**
+   * Submit button label
+   */
+  submitLabel: {
+    type: String,
+    default: 'Sign In'
+  },
+  /**
+   * Route to redirect after successful login
+   */
+  redirectTo: {
+    type: String,
+    default: '/'
+  },
+  /**
+   * Default username value
+   */
+  defaultUsername: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Default password value
+   */
+  defaultPassword: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Emit auth:login signal on successful login
+   * Required for debug bar auth tracking and other signal listeners
+   */
+  emitSignal: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'login', result: LoginResult): void
+  (e: 'error', error: unknown): void
+}>()
+
+const router = useRouter()
+const authAdapter = inject<AuthAdapter | null>('authAdapter', null)
+const orchestrator = inject<Orchestrator | null>('qdadmOrchestrator', null)
+const appConfig = inject<AppConfig>('qdadmApp', {})
+
+const username = ref<string>(props.defaultUsername)
+const password = ref<string>(props.defaultPassword)
+const loading = ref<boolean>(false)
+
+const displayTitle = computed<string>(() => props.title || appConfig.name || 'Admin')
+
+async function handleLogin(): Promise<void> {
+  if (!authAdapter?.login) {
+    orchestrator?.toast.error('Configuration Error', 'No auth adapter configured', 'LoginPage')
+    return
+  }
+
+  loading.value = true
+  try {
+    const result = await authAdapter.login({
+      username: username.value,
+      password: password.value
+    })
+
+    // Emit auth:login signal for debug bar and other listeners
+    orchestrator?.signals.emit('auth:login', { user: result.user })
+    orchestrator?.toast.success(
+      'Welcome',
+      `Logged in as ${result.user?.username || result.user?.email || username.value}`,
+      'LoginPage'
+    )
+
+    emit('login', result)
+    router.push(props.redirectTo)
+  } catch (error) {
+    password.value = ''
+
+    const axiosError = error as AxiosError
+    const message = axiosError.response?.data?.error?.message
+      || axiosError.response?.data?.message
+      || axiosError.message
+      || 'Invalid credentials'
+
+    orchestrator?.signals.emit('auth:login:error', {
+      username: username.value,
+      error: message,
+      status: axiosError.response?.status
+    })
+    orchestrator?.toast.error('Login Failed', message, 'LoginPage')
+
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="qdadm-login-page">
+    <Card class="qdadm-login-card">
+      <template #title>
+        <div class="qdadm-login-header">
+          <slot name="logo">
+            <component v-if="logo" :is="logo" class="qdadm-login-logo" />
+            <i v-else :class="icon" class="qdadm-login-icon"></i>
+          </slot>
+          <h1>{{ displayTitle }}</h1>
+        </div>
+      </template>
+      <template #content>
+        <form @submit.prevent="handleLogin" class="qdadm-login-form" autocomplete="off">
+          <div class="qdadm-login-field">
+            <label for="qdadm-username">{{ usernameLabel }}</label>
+            <InputText
+              v-model="username"
+              id="qdadm-username"
+              class="w-full"
+              autocomplete="username"
+              :disabled="loading"
+            />
+          </div>
+          <div class="qdadm-login-field">
+            <label for="qdadm-password">{{ passwordLabel }}</label>
+            <Password
+              v-model="password"
+              inputId="qdadm-password"
+              class="w-full"
+              :feedback="false"
+              toggleMask
+              :disabled="loading"
+            />
+          </div>
+          <Button
+            type="submit"
+            :label="submitLabel"
+            icon="pi pi-sign-in"
+            class="w-full"
+            :loading="loading"
+          />
+          <slot name="footer"></slot>
+        </form>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.qdadm-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--p-surface-100);
+}
+
+.qdadm-login-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 1rem;
+}
+
+.qdadm-login-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.qdadm-login-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: var(--p-text-color);
+}
+
+.qdadm-login-icon {
+  font-size: 2rem;
+  color: var(--p-primary-500);
+}
+
+.qdadm-login-logo {
+  height: 2rem;
+  width: auto;
+}
+
+.qdadm-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.qdadm-login-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.qdadm-login-field label {
+  font-weight: 500;
+  color: var(--p-text-color);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .qdadm-login-card {
+    max-width: 100%;
+    margin: 0.5rem;
+  }
+}
+</style>

package/src/components/pages/NotFoundPage.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/**
+ * NotFoundPage - Default 404 page
+ *
+ * Simple page with link to home. Can be replaced via pages.notFound option.
+ */
+import { computed, type ComputedRef } from 'vue'
+import { useRouter, type RouteRecordName } from 'vue-router'
+
+const router = useRouter()
+
+const homeRoute: ComputedRef<RouteRecordName | string> = computed(() => {
+  // Find home route (first route or named 'home'/'dashboard')
+  const routes = router.getRoutes()
+  const home = routes.find(r => r.name === 'home' || r.name === 'dashboard')
+  return home?.name || '/'
+})
+
+function goHome(): void {
+  if (typeof homeRoute.value === 'string' && homeRoute.value.startsWith('/')) {
+    router.push(homeRoute.value)
+  } else {
+    router.push({ name: homeRoute.value })
+  }
+}
+</script>
+
+<template>
+  <div class="not-found-page">
+    <div class="not-found-content">
+      <div class="not-found-code">404</div>
+      <h1>Page not found</h1>
+      <p>The page you're looking for doesn't exist or has been moved.</p>
+      <button class="home-link" @click="goHome">
+        <i class="pi pi-home"></i>
+        Back to Home
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.not-found-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--p-surface-ground, #f8fafc);
+}
+
+.not-found-content {
+  text-align: center;
+  padding: 2rem;
+}
+
+.not-found-code {
+  font-size: 8rem;
+  font-weight: 700;
+  color: var(--p-primary-color, #3b82f6);
+  line-height: 1;
+  margin-bottom: 1rem;
+  opacity: 0.8;
+}
+
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--p-text-color, #1e293b);
+  margin: 0 0 0.5rem 0;
+}
+
+p {
+  color: var(--p-text-muted-color, #64748b);
+  margin: 0 0 2rem 0;
+}
+
+.home-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--p-primary-color, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.home-link:hover {
+  background: var(--p-primary-600, #2563eb);
+}
+</style>