mgv-backoffice 1.18.0 → 1.20.0

package/src/components/BaseLoginForm.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseLoginForm from './BaseLoginForm.vue'
+
+describe('BaseLoginForm', () => {
+  it('emits submit with the entered credentials', async () => {
+    const wrapper = mount(BaseLoginForm)
+    await wrapper.find('input[type="email"]').setValue('user@example.com')
+    await wrapper.find('input[name="password"]').setValue('hunter2')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(wrapper.emitted('submit')).toEqual([
+      [{ email: 'user@example.com', password: 'hunter2' }],
+    ])
+  })
+
+  it('includes remember when the checkbox is enabled', async () => {
+    const wrapper = mount(BaseLoginForm, { props: { showRemember: true } })
+    await wrapper.find('input[type="email"]').setValue('a@b.com')
+    await wrapper.find('input[name="password"]').setValue('pw')
+    await wrapper.find('input[type="checkbox"]').setValue(true)
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(wrapper.emitted('submit')![0]).toEqual([
+      { email: 'a@b.com', password: 'pw', remember: true },
+    ])
+  })
+
+  it('emits google-sign-in when the Google button is clicked', async () => {
+    const wrapper = mount(BaseLoginForm)
+    // The Google button renders a <button> with the brand label.
+    const googleBtn = wrapper
+      .findAll('button')
+      .find((b) => b.text().includes('Sign in with Google'))
+    expect(googleBtn, 'expected a Google sign-in button').toBeTruthy()
+    await googleBtn!.trigger('click')
+    expect(wrapper.emitted('google-sign-in')).toHaveLength(1)
+  })
+
+  it('does not submit while loading', async () => {
+    const wrapper = mount(BaseLoginForm, { props: { loading: true } })
+    await wrapper.find('form').trigger('submit.prevent')
+    expect(wrapper.emitted('submit')).toBeUndefined()
+  })
+
+  it('renders the error banner', () => {
+    const wrapper = mount(BaseLoginForm, { props: { error: 'Invalid credentials' } })
+    const alert = wrapper.find('[role="alert"]')
+    expect(alert.exists()).toBe(true)
+    expect(alert.text()).toContain('Invalid credentials')
+  })
+})

package/src/components/BaseLoginForm.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import BaseGoogleSignInButton from './BaseGoogleSignInButton.vue'
+import type { LoginCredentials } from '../types/auth'
+
+interface Props {
+  /** Card heading. Defaults to "Sign in". */
+  title?: string
+  /** Optional muted line under the heading. */
+  subtitle?: string
+  /** Submit button label. Defaults to "Sign in". */
+  submitLabel?: string
+  /** Disables the form and shows a spinner on the submit button. */
+  loading?: boolean
+  /** Disables the form and shows a spinner on the Google button. */
+  googleLoading?: boolean
+  /** Error message rendered above the form (e.g. "Invalid credentials"). */
+  error?: string
+  /** Render the "Sign in with Google" button + divider. Defaults to true. */
+  showGoogle?: boolean
+  /** Render the "Remember me" checkbox. Defaults to false. */
+  showRemember?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Sign in',
+  subtitle: '',
+  submitLabel: 'Sign in',
+  loading: false,
+  googleLoading: false,
+  error: '',
+  showGoogle: true,
+  showRemember: false,
+})
+
+const emit = defineEmits<{
+  /** Email/password submit. */
+  submit: [credentials: LoginCredentials]
+  /** User chose "Sign in with Google". */
+  'google-sign-in': []
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+const email = ref('')
+const password = ref('')
+const remember = ref(false)
+const showPassword = ref(false)
+
+const busy = computed(() => props.loading || props.googleLoading)
+
+function onSubmit() {
+  if (busy.value) return
+  emit('submit', {
+    email: email.value,
+    password: password.value,
+    ...(props.showRemember ? { remember: remember.value } : {}),
+  })
+}
+</script>
+
+<template>
+  <!--
+    Presentational sign-in card. Owns its own input state and emits
+    `submit` (with credentials) / `google-sign-in`. It runs no auth
+    itself — the consuming app handles the actual request and feeds back
+    `loading` / `error`.
+  -->
+  <div
+    class="w-full max-w-sm mx-auto rounded-xl border shadow-sm p-6 sm:p-8"
+    :class="t.card"
+  >
+    <!-- Brand / logo slot above the heading. -->
+    <div v-if="$slots.logo" class="flex justify-center mb-6">
+      <slot name="logo" />
+    </div>
+
+    <div class="mb-6 text-center">
+      <h1 class="text-xl font-semibold" :class="t.primaryText">{{ title }}</h1>
+      <p v-if="subtitle" class="mt-1 text-sm" :class="t.mutedText">{{ subtitle }}</p>
+    </div>
+
+    <!-- Error banner -->
+    <div
+      v-if="error"
+      role="alert"
+      class="mb-4 rounded-lg border px-3 py-2 text-sm"
+      :class="isDark
+        ? 'bg-red-500/10 border-red-500/30 text-red-300'
+        : 'bg-red-50 border-red-200 text-red-700'"
+    >
+      {{ error }}
+    </div>
+
+    <!-- Google sign-in + divider -->
+    <template v-if="showGoogle">
+      <BaseGoogleSignInButton
+        :loading="googleLoading"
+        :disabled="loading"
+        @click="emit('google-sign-in')"
+      />
+      <div class="flex items-center gap-3 my-5">
+        <span class="h-px flex-1" :class="isDark ? 'bg-gray-700' : 'bg-gray-200'" />
+        <span class="text-xs uppercase tracking-wider" :class="t.dimTextAlt">or</span>
+        <span class="h-px flex-1" :class="isDark ? 'bg-gray-700' : 'bg-gray-200'" />
+      </div>
+    </template>
+
+    <form class="space-y-4" @submit.prevent="onSubmit">
+      <div>
+        <label for="login-email" class="block mb-1.5 text-sm font-medium" :class="t.label">
+          Email
+        </label>
+        <input
+          id="login-email"
+          v-model="email"
+          type="email"
+          name="email"
+          autocomplete="email"
+          required
+          :disabled="busy"
+          placeholder="you@example.com"
+          class="w-full h-11 px-3 rounded-lg border text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60"
+          :class="t.inputWithPlaceholder"
+        />
+      </div>
+
+      <div>
+        <div class="flex items-center justify-between mb-1.5">
+          <label for="login-password" class="block text-sm font-medium" :class="t.label">
+            Password
+          </label>
+          <!-- `forgot` slot: drop a "Forgot password?" link here. -->
+          <slot name="forgot" />
+        </div>
+        <div class="relative">
+          <input
+            id="login-password"
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            name="password"
+            autocomplete="current-password"
+            required
+            :disabled="busy"
+            placeholder="••••••••"
+            class="w-full h-11 pl-3 pr-16 rounded-lg border text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60"
+            :class="t.inputWithPlaceholder"
+          />
+          <button
+            type="button"
+            @click="showPassword = !showPassword"
+            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            :aria-pressed="showPassword"
+            class="absolute inset-y-0 right-0 px-3 text-xs font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 rounded-r-lg"
+            :class="t.mutedText"
+          >
+            {{ showPassword ? 'Hide' : 'Show' }}
+          </button>
+        </div>
+      </div>
+
+      <label
+        v-if="showRemember"
+        class="flex items-center gap-2 text-sm cursor-pointer select-none"
+        :class="t.bodyText"
+      >
+        <input
+          v-model="remember"
+          type="checkbox"
+          :disabled="busy"
+          class="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+        />
+        Remember me
+      </label>
+
+      <button
+        type="submit"
+        :disabled="busy"
+        :aria-busy="loading"
+        class="inline-flex items-center justify-center gap-2 w-full h-11 px-4 rounded-lg text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        <svg
+          v-if="loading"
+          class="w-4 h-4 animate-spin"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4z" />
+        </svg>
+        {{ submitLabel }}
+      </button>
+    </form>
+
+    <!-- `footer` slot: e.g. "Don't have an account? Sign up". -->
+    <div v-if="$slots.footer" class="mt-6 text-center text-sm" :class="t.mutedText">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/BaseNotificationPanel.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import { useEscapeKey } from '../composables/useEscapeKey'
+import { useNotifications } from '../composables/useNotifications'
+
+interface Props {
+  /** Panel heading. Defaults to "Notifications". */
+  title?: string
+  /** Shown when there are no notifications. */
+  emptyText?: string
+  /** Render the "Mark all read" action when there are unread items. */
+  showMarkAllRead?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Notifications',
+  emptyText: 'You have no notifications.',
+  showMarkAllRead: true,
+})
+
+const emit = defineEmits<{
+  /** A notification row was clicked (e.g. to navigate to its target). */
+  select: [id: import('../types/notification').NotificationItem['id']]
+}>()
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+const {
+  notifications,
+  unreadCount,
+  open,
+  closePanel,
+  markAllRead,
+  markRead,
+} = useNotifications()
+
+const dotClass: Record<string, string> = {
+  info: 'bg-sky-500',
+  success: 'bg-emerald-500',
+  warning: 'bg-amber-500',
+  error: 'bg-red-500',
+}
+
+const total = computed(() => notifications.value.length)
+
+function onSelect(id: import('../types/notification').NotificationItem['id']) {
+  markRead(id)
+  emit('select', id)
+}
+
+useEscapeKey(() => {
+  if (open.value) closePanel()
+})
+</script>
+
+<template>
+  <!--
+    Left-anchored notification drawer. Open/close state and the list live
+    in `useNotifications()`, so the sidebar bell and this panel stay in
+    sync. Teleported to <body> with a backdrop; slides in from the left.
+  -->
+  <Teleport to="body">
+    <!-- Backdrop -->
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-200"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[60] bg-black/50"
+        aria-hidden="true"
+        @click="closePanel"
+      />
+    </Transition>
+
+    <!-- Drawer -->
+    <Transition
+      enter-active-class="transition-transform duration-300 ease-out"
+      enter-from-class="-translate-x-full"
+      leave-active-class="transition-transform duration-300 ease-in"
+      leave-to-class="-translate-x-full"
+    >
+      <aside
+        v-if="open"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+        class="fixed top-0 left-0 z-[70] h-screen w-full max-w-sm flex flex-col border-r shadow-xl"
+        :class="isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200'"
+      >
+        <!-- Header -->
+        <div
+          class="flex items-center justify-between gap-3 px-5 py-4 border-b shrink-0"
+          :class="t.border"
+        >
+          <h2 class="text-lg font-semibold flex items-center gap-2" :class="t.primaryText">
+            {{ title }}
+            <span class="text-sm font-normal" :class="t.dimTextAlt">— {{ total }}</span>
+          </h2>
+          <button
+            type="button"
+            @click="closePanel"
+            aria-label="Close notifications"
+            class="p-1.5 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="isDark ? 'text-gray-400 hover:bg-gray-800' : 'text-gray-500 hover:bg-gray-100'"
+          >
+            <XMarkIcon class="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <!-- Mark all read -->
+        <div
+          v-if="showMarkAllRead && unreadCount > 0"
+          class="px-5 py-2 border-b shrink-0 flex justify-end"
+          :class="t.border"
+        >
+          <button
+            type="button"
+            @click="markAllRead"
+            class="text-xs font-medium cursor-pointer transition-colors focus:outline-none focus-visible:underline"
+            :class="t.emeraldText"
+          >
+            Mark all as read
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="flex-1 overflow-y-auto">
+          <!-- Empty state -->
+          <div
+            v-if="total === 0"
+            class="flex flex-col items-center justify-center text-center px-6 py-16 gap-3"
+          >
+            <BellIcon class="w-10 h-10" :class="t.illustration" aria-hidden="true" />
+            <p class="text-sm" :class="t.mutedText">{{ emptyText }}</p>
+          </div>
+
+          <!-- List -->
+          <ul v-else class="divide-y" :class="isDark ? 'divide-gray-800' : 'divide-gray-100'">
+            <li v-for="n in notifications" :key="n.id">
+              <button
+                type="button"
+                @click="onSelect(n.id)"
+                class="w-full text-left px-5 py-4 flex gap-3 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
+                :class="[
+                  !n.read
+                    ? (isDark ? 'bg-emerald-500/5' : 'bg-emerald-50/60')
+                    : '',
+                  isDark ? 'hover:bg-gray-800' : 'hover:bg-gray-50',
+                ]"
+              >
+                <span
+                  class="mt-1.5 w-2 h-2 rounded-full shrink-0"
+                  :class="n.read ? (isDark ? 'bg-gray-700' : 'bg-gray-300') : (dotClass[n.type ?? 'info'])"
+                  aria-hidden="true"
+                />
+                <span class="min-w-0 flex-1">
+                  <span class="flex items-baseline justify-between gap-2">
+                    <span
+                      class="text-sm truncate"
+                      :class="[n.read ? 'font-medium' : 'font-semibold', t.primaryTextSoft]"
+                    >
+                      {{ n.title }}
+                    </span>
+                    <span v-if="n.time" class="text-xs shrink-0" :class="t.dimText">{{ n.time }}</span>
+                  </span>
+                  <span v-if="n.message" class="mt-0.5 block text-sm" :class="t.mutedText">
+                    {{ n.message }}
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    </Transition>
+  </Teleport>
+</template>