Refactor frontend components and enhance API integration

- Updated frontend-nuxt.mdc to specify usage of composables for API calls.
- Added new AuthCard and ConfirmModal components for improved UI consistency.
- Introduced UserAvatar component for user profile display, replacing previous Gravatar implementation.
- Implemented useFormSubmit composable for handling form submissions with loading and error states.
- Enhanced vitest.config.ts to include coverage reporting for composables and components.
- Removed deprecated useAdminApi and useAuth composables to streamline API interactions.
- Updated login and setup pages to utilize new components and composables for better user experience.

frontend-nuxt/components/AuthCard.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
+    <div class="card card-app w-full max-w-sm login-card">
+      <div class="card-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

frontend-nuxt/components/ConfirmModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <dialog ref="dialogRef" class="modal" :aria-labelledby="titleId" @close="onClose">
+    <div class="modal-box">
+      <h2 :id="titleId" class="font-bold text-lg mb-2">{{ title }}</h2>
+      <p>{{ message }}</p>
+      <div class="modal-action">
+        <form method="dialog">
+          <button type="button" class="btn" @click="cancel">Cancel</button>
+        </form>
+        <button
+          type="button"
+          :class="danger ? 'btn btn-error' : 'btn btn-primary'"
+          :disabled="loading"
+          @click="confirm"
+        >
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          <span v-else>{{ confirmLabel }}</span>
+        </button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" aria-label="Close" @click="cancel">Close</button>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    message: string
+    confirmLabel?: string
+    danger?: boolean
+    loading?: boolean
+  }>(),
+  { confirmLabel: 'Confirm', danger: false, loading: false }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  confirm: []
+}>()
+
+const titleId = computed(() => `confirm-modal-title-${Math.random().toString(36).slice(2)}`)
+const dialogRef = ref<HTMLDialogElement | null>(null)
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      dialogRef.value?.showModal()
+    } else {
+      dialogRef.value?.close()
+    }
+  }
+)
+
+function cancel() {
+  dialogRef.value?.close()
+  emit('update:modelValue', false)
+}
+
+function onClose() {
+  emit('update:modelValue', false)
+}
+
+function confirm() {
+  emit('confirm')
+}
+</script>

frontend-nuxt/components/UserAvatar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="avatar">
+    <div
+      class="rounded-full overflow-hidden flex items-center justify-center shrink-0"
+      :style="{ width: `${size}px`, height: `${size}px` }"
+    >
+      <img
+        v-if="email && !gravatarError"
+        :src="useGravatarUrl(email, size)"
+        alt=""
+        class="w-full h-full object-cover"
+        @error="gravatarError = true"
+      >
+      <div
+        v-else
+        class="bg-primary text-primary-content rounded-full w-full h-full flex items-center justify-center"
+        :class="initialClass"
+      >
+        <span>{{ (username || '?')[0].toUpperCase() }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    username: string
+    email?: string
+    size?: number
+  }>(),
+  { size: 32 }
+)
+
+const gravatarError = ref(false)
+
+const initialClass = computed(() => {
+  if (props.size <= 32) return 'text-sm'
+  if (props.size <= 40) return 'text-sm'
+  return 'text-2xl font-semibold'
+})
+</script>

frontend-nuxt/components/__tests__/UserAvatar.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UserAvatar from '../UserAvatar.vue'
+
+const useGravatarUrlMock = vi.fn(() => 'https://gravatar.example/avatar')
+vi.stubGlobal('useGravatarUrl', useGravatarUrlMock)
+
+describe('UserAvatar', () => {
+  beforeEach(() => {
+    useGravatarUrlMock.mockReturnValue('https://gravatar.example/avatar')
+  })
+
+  it('renders fallback initial when no email', () => {
+    const wrapper = mount(UserAvatar, {
+      props: { username: 'alice' },
+      global: {
+        stubs: { useGravatarUrl: false },
+      },
+    })
+    const fallback = wrapper.find('.bg-primary')
+    expect(fallback.exists()).toBe(true)
+    expect(fallback.text()).toBe('A')
+  })
+
+  it('renders fallback initial for username', () => {
+    const wrapper = mount(UserAvatar, {
+      props: { username: 'bob' },
+    })
+    expect(wrapper.find('.bg-primary').text()).toBe('B')
+  })
+
+  it('uses size for style', () => {
+    const wrapper = mount(UserAvatar, {
+      props: { username: 'x', size: 40 },
+    })
+    const div = wrapper.find('.rounded-full')
+    expect(div.attributes('style')).toContain('width: 40px')
+    expect(div.attributes('style')).toContain('height: 40px')
+  })
+})

frontend-nuxt/composables/__tests__/useMapBookmarks.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+
+const stateByKey: Record<string, ReturnType<typeof ref>> = {}
+const useStateMock = vi.fn((key: string, init: () => unknown) => {
+  if (!stateByKey[key]) {
+    stateByKey[key] = ref(init())
+  }
+  return stateByKey[key]
+})
+vi.stubGlobal('useState', useStateMock)
+vi.stubGlobal('onMounted', vi.fn())
+
+const storage: Record<string, string> = {}
+const localStorageMock = {
+  getItem: vi.fn((key: string) => storage[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    storage[key] = value
+  }),
+  clear: vi.fn(() => {
+    for (const k of Object.keys(storage)) delete storage[k]
+  }),
+}
+vi.stubGlobal('localStorage', localStorageMock)
+vi.stubGlobal('import.meta.server', false)
+vi.stubGlobal('import.meta.client', true)
+
+import { useMapBookmarks } from '../useMapBookmarks'
+
+describe('useMapBookmarks', () => {
+  beforeEach(() => {
+    storage['hnh-map-bookmarks'] = '[]'
+    stateByKey['hnh-map-bookmarks-state'] = ref([])
+    localStorageMock.getItem.mockImplementation((key: string) => storage[key] ?? null)
+    localStorageMock.setItem.mockImplementation((key: string, value: string) => {
+      storage[key] = value
+    })
+  })
+
+  it('add adds a bookmark and refresh updates state', () => {
+    const { bookmarks, add, refresh } = useMapBookmarks()
+    refresh()
+    expect(bookmarks.value).toEqual([])
+
+    const id = add({ name: 'Home', mapId: 1, x: 0, y: 0 })
+    expect(id).toBeDefined()
+    expect(bookmarks.value).toHaveLength(1)
+    expect(bookmarks.value[0].name).toBe('Home')
+    expect(bookmarks.value[0].mapId).toBe(1)
+    expect(bookmarks.value[0].id).toBe(id)
+  })
+
+  it('update changes name', () => {
+    const { bookmarks, add, update, refresh } = useMapBookmarks()
+    refresh()
+    const id = add({ name: 'Old', mapId: 1, x: 0, y: 0 })
+    const ok = update(id, { name: 'New' })
+    expect(ok).toBe(true)
+    expect(bookmarks.value[0].name).toBe('New')
+  })
+
+  it('remove deletes bookmark', () => {
+    const { bookmarks, add, remove, refresh } = useMapBookmarks()
+    refresh()
+    const id = add({ name: 'X', mapId: 1, x: 0, y: 0 })
+    expect(bookmarks.value).toHaveLength(1)
+    remove(id)
+    expect(bookmarks.value).toHaveLength(0)
+  })
+
+  it('clear empties bookmarks', () => {
+    const { bookmarks, add, clear, refresh } = useMapBookmarks()
+    refresh()
+    add({ name: 'A', mapId: 1, x: 0, y: 0 })
+    expect(bookmarks.value).toHaveLength(1)
+    clear()
+    expect(bookmarks.value).toHaveLength(0)
+  })
+})

frontend-nuxt/composables/__tests__/useToast.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+
+const stateByKey: Record<string, ReturnType<typeof ref>> = {}
+const useStateMock = vi.fn((key: string, init: () => unknown) => {
+  if (!stateByKey[key]) {
+    stateByKey[key] = ref(init())
+  }
+  return stateByKey[key]
+})
+vi.stubGlobal('useState', useStateMock)
+
+import { useToast } from '../useToast'
+
+describe('useToast', () => {
+  beforeEach(() => {
+    stateByKey['hnh-map-toasts'] = ref([])
+  })
+
+  it('exposes toasts and show/dismiss', () => {
+    const { toasts, success, dismiss } = useToast()
+    expect(toasts.value).toEqual([])
+
+    success('Done!')
+    expect(toasts.value).toHaveLength(1)
+    expect(toasts.value[0].type).toBe('success')
+    expect(toasts.value[0].text).toBe('Done!')
+
+    const id = toasts.value[0].id
+    dismiss(id)
+    expect(toasts.value).toHaveLength(0)
+  })
+
+  it('error and info set type', () => {
+    const { toasts, error, info } = useToast()
+    error('Failed')
+    expect(toasts.value[0].type).toBe('error')
+    info('Note')
+    expect(toasts.value[1].type).toBe('info')
+  })
+
+  it('each toast has unique id', () => {
+    const { toasts, success } = useToast()
+    success('A')
+    success('B')
+    const ids = toasts.value.map((t) => t.id)
+    expect(new Set(ids).size).toBe(2)
+  })
+})

frontend-nuxt/composables/useAdminApi.ts

@@ -1,23 +0,0 @@
-/** Admin API composable. Uses useMapApi internally. */
-export function useAdminApi() {
-  const api = useMapApi()
-
-  return {
-    adminUsers: api.adminUsers,
-    adminUserByName: api.adminUserByName,
-    adminUserPost: api.adminUserPost,
-    adminUserDelete: api.adminUserDelete,
-    adminSettings: api.adminSettings,
-    adminSettingsPost: api.adminSettingsPost,
-    adminMaps: api.adminMaps,
-    adminMapPost: api.adminMapPost,
-    adminMapToggleHidden: api.adminMapToggleHidden,
-    adminWipe: api.adminWipe,
-    adminRebuildZooms: api.adminRebuildZooms,
-    adminExportUrl: api.adminExportUrl,
-    adminMerge: api.adminMerge,
-    adminWipeTile: api.adminWipeTile,
-    adminSetCoords: api.adminSetCoords,
-    adminHideMarker: api.adminHideMarker,
-  }
-}

frontend-nuxt/composables/useAuth.ts

@@ -1,15 +0,0 @@
-import type { MeResponse } from '~/types/api'
-
-/** Auth composable: login, logout, me, OAuth, setup. Uses useMapApi internally. */
-export function useAuth() {
-  const api = useMapApi()
-
-  return {
-    login: api.login,
-    logout: api.logout,
-    me: api.me,
-    oauthLoginUrl: api.oauthLoginUrl,
-    oauthProviders: api.oauthProviders,
-    setupRequired: api.setupRequired,
-  }
-}

frontend-nuxt/composables/useFormSubmit.ts

@@ -0,0 +1,24 @@
+/**
+ * Composable for form submit with loading and error state.
+ * Use run(fn) to execute an async action; loading and error are updated automatically.
+ */
+export function useFormSubmit(defaultError = 'Something went wrong') {
+  const loading = ref(false)
+  const error = ref('')
+
+  async function run<T>(fn: () => Promise<T>): Promise<T | undefined> {
+    error.value = ''
+    loading.value = true
+    try {
+      const result = await fn()
+      return result
+    } catch (e: unknown) {
+      error.value = e instanceof Error ? e.message : defaultError
+      return undefined
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { loading, error, run }
+}

frontend-nuxt/layouts/default.vue

@@ -37,23 +37,7 @@
             <div class="dropdown dropdown-end flex items-center">
               <details ref="userDropdownRef" class="dropdown group">
                 <summary class="btn btn-ghost btn-sm gap-2 flex items-center min-h-9 h-9 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
-                  <div class="avatar">
-                    <div class="rounded-full w-8 h-8 overflow-hidden flex items-center justify-center">
-                      <img
-                        v-if="me.email && !gravatarErrorDesktop"
-                        :src="useGravatarUrl(me.email, 32)"
-                        alt=""
-                        class="w-full h-full object-cover"
-                        @error="gravatarErrorDesktop = true"
-                      >
-                      <div
-                        v-else
-                        class="bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center"
-                      >
-                        <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
-                      </div>
-                    </div>
-                  </div>
+                  <UserAvatar :username="me.username" :email="me.email" :size="32" />
                   <span class="max-w-[8rem] truncate font-medium">{{ me.username }}</span>
                   <svg class="size-4 opacity-70 shrink-0 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -128,23 +112,7 @@
       <aside class="bg-base-200/95 backdrop-blur-xl min-h-full w-72 p-4 flex flex-col">
         <!-- Mobile: user + live when logged in -->
         <div v-if="!isLogin && me" class="flex items-center gap-3 pb-4 mb-2 border-b border-base-300/50">
-          <div class="avatar">
-            <div class="rounded-full w-10 h-10 overflow-hidden flex items-center justify-center">
-              <img
-                v-if="me.email && !gravatarErrorDrawer"
-                :src="useGravatarUrl(me.email, 40)"
-                alt=""
-                class="w-full h-full object-cover"
-                @error="gravatarErrorDrawer = true"
-              >
-              <div
-                v-else
-                class="bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center"
-              >
-                <span class="text-sm font-medium">{{ (me.username || '?')[0].toUpperCase() }}</span>
-              </div>
-            </div>
-          </div>
+          <UserAvatar :username="me.username" :email="me.email" :size="40" />
           <div class="flex-1 min-w-0">
             <p class="font-medium truncate">{{ me.username }}</p>
             <p class="text-xs flex items-center gap-1.5" :class="live ? 'text-success' : 'text-base-content/60'">
@@ -227,8 +195,6 @@ const dark = ref(false)
 /** Live when at least one of current user's characters is on the map (set by MapView). */
 const live = useState<boolean>('mapLive', () => false)
 const me = useState<MeResponse | null>('me', () => null)
-const gravatarErrorDesktop = ref(false)
-const gravatarErrorDrawer = ref(false)
 const userDropdownRef = ref<HTMLDetailsElement | null>(null)
 const drawerCheckboxRef = ref<HTMLInputElement | null>(null)
 
@@ -281,14 +247,6 @@ watch(
   { immediate: true }
 )
 
-watch(
-  () => me.value?.email,
-  () => {
-    gravatarErrorDesktop.value = false
-    gravatarErrorDrawer.value = false
-  }
-)
-
 function onThemeToggle() {
   dark.value = !dark.value
   applyTheme()

frontend-nuxt/pages/admin/index.vue

@@ -253,44 +253,37 @@
       </div>
     </div>
 
-    <dialog ref="wipeModalRef" class="modal" aria-labelledby="wipe-modal-title">
-      <div class="modal-box">
-        <h2 id="wipe-modal-title" class="font-bold text-lg mb-2">Confirm wipe</h2>
-        <p>Wipe all grids, markers, tiles and maps? This cannot be undone.</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Cancel</button>
-          </form>
-          <button class="btn btn-error" :disabled="wiping" @click="doWipe">Wipe</button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
-    </dialog>
+    <ConfirmModal
+      v-model="showWipeModal"
+      title="Confirm wipe"
+      message="Wipe all grids, markers, tiles and maps? This cannot be undone."
+      confirm-label="Wipe"
+      :danger="true"
+      :loading="wiping"
+      @confirm="doWipe"
+    />
 
-    <dialog ref="rebuildModalRef" class="modal" aria-labelledby="rebuild-modal-title">
-      <div class="modal-box">
-        <h2 id="rebuild-modal-title" class="font-bold text-lg mb-2">Rebuild zooms</h2>
-        <p>Rebuild tile zoom levels for all maps? This may take a while.</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Cancel</button>
-          </form>
-          <button class="btn btn-primary" :disabled="rebuilding" @click="doRebuildZooms">Rebuild</button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
-    </dialog>
+    <ConfirmModal
+      v-model="showRebuildModal"
+      title="Rebuild zooms"
+      message="Rebuild tile zoom levels for all maps? This may take a while."
+      confirm-label="Rebuild"
+      :loading="rebuilding"
+      @confirm="doRebuildZooms"
+    />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { MapInfoAdmin } from '~/types/api'
+
 definePageMeta({ middleware: 'admin' })
 
 const api = useMapApi()
 const toast = useToast()
 const users = ref<string[]>([])
-const maps = ref<Array<{ ID: number; Name: string; Hidden: boolean; Priority: boolean }>>([])
+const maps = ref<MapInfoAdmin[]>([])
 const settings = ref({ prefix: '', defaultHide: false, title: '' })
 const savingSettings = ref(false)
 const rebuilding = ref(false)
@@ -298,8 +291,8 @@ const wiping = ref(false)
 const merging = ref(false)
 const mergeFile = ref<File | null>(null)
 const mergeFileRef = ref<HTMLInputElement | null>(null)
-const wipeModalRef = ref<HTMLDialogElement | null>(null)
-const rebuildModalRef = ref<HTMLDialogElement | null>(null)
+const showWipeModal = ref(false)
+const showRebuildModal = ref(false)
 const loading = ref(true)
 const userSearch = ref('')
 const mapSearch = ref('')
@@ -386,17 +379,17 @@ async function saveSettings() {
 }
 
 function confirmRebuildZooms() {
-  rebuildModalRef.value?.showModal()
+  showRebuildModal.value = true
 }
 
 const { markRebuildDone } = useRebuildZoomsInvalidation()
 
 async function doRebuildZooms() {
-  rebuildModalRef.value?.close()
   rebuilding.value = true
   try {
     await api.adminRebuildZooms()
     markRebuildDone()
+    showRebuildModal.value = false
     toast.success('Zooms rebuilt.')
   } catch (e) {
     toast.error((e as Error)?.message ?? 'Failed to rebuild zooms.')
@@ -406,14 +399,14 @@ async function doRebuildZooms() {
 }
 
 function confirmWipe() {
-  wipeModalRef.value?.showModal()
+  showWipeModal.value = true
 }
 
 async function doWipe() {
   wiping.value = true
   try {
     await api.adminWipe()
-    wipeModalRef.value?.close()
+    showWipeModal.value = false
     await loadMaps()
     toast.success('All data wiped.')
   } catch (e) {

frontend-nuxt/pages/admin/maps/[id].vue

@@ -37,13 +37,15 @@
 </template>
 
 <script setup lang="ts">
+import type { MapInfoAdmin } from '~/types/api'
+
 definePageMeta({ middleware: 'admin' })
 
 const route = useRoute()
 const router = useRouter()
 const api = useMapApi()
 const id = computed(() => parseInt(route.params.id as string, 10))
-const map = ref<{ ID: number; Name: string; Hidden: boolean; Priority: boolean } | null>(null)
+const map = ref<MapInfoAdmin | null>(null)
 const mapsLoaded = ref(false)
 const form = ref({ name: '', hidden: false, priority: false })
 const loading = ref(false)

frontend-nuxt/pages/admin/users/[username].vue

@@ -47,18 +47,15 @@
       </div>
     </form>
 
-    <dialog ref="deleteModalRef" class="modal">
-      <div class="modal-box">
-        <p>Delete user {{ form.user }}?</p>
-        <div class="modal-action">
-          <form method="dialog">
-            <button class="btn">Cancel</button>
-          </form>
-          <button class="btn btn-error" :disabled="deleting" @click="doDelete">Delete</button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form>
-    </dialog>
+    <ConfirmModal
+      v-model="showDeleteModal"
+      title="Delete user"
+      :message="`Delete user ${form.user}?`"
+      confirm-label="Delete"
+      :danger="true"
+      :loading="deleting"
+      @confirm="doDelete"
+    />
   </div>
 </template>
 
@@ -76,7 +73,7 @@ const authOptions = ['admin', 'map', 'markers', 'upload']
 const loading = ref(false)
 const deleting = ref(false)
 const error = ref('')
-const deleteModalRef = ref<HTMLDialogElement | null>(null)
+const showDeleteModal = ref(false)
 
 onMounted(async () => {
   if (!isNew.value) {
@@ -108,14 +105,14 @@ async function submit() {
 }
 
 function confirmDelete() {
-  deleteModalRef.value?.showModal()
+  showDeleteModal.value = true
 }
 
 async function doDelete() {
   deleting.value = true
   try {
     await api.adminUserDelete(form.value.user)
-    deleteModalRef.value?.close()
+    showDeleteModal.value = false
     await router.push('/admin')
   } catch (e: unknown) {
     error.value = e instanceof Error ? e.message : 'Delete failed'

frontend-nuxt/pages/login.vue

@@ -1,48 +1,44 @@
 <template>
-  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
-    <div class="card card-app w-full max-w-sm login-card">
-      <div class="card-body">
-        <h1 class="card-title justify-center text-2xl">HnH Map</h1>
-        <p class="text-center text-base-content/70 text-sm">Log in to continue</p>
-        <div v-if="(oauthProviders ?? []).length" class="flex flex-col gap-2">
-          <a
-            v-for="p in (oauthProviders ?? [])"
-            :key="p"
-            :href="api.oauthLoginUrl(p, redirect || undefined)"
-            class="btn btn-outline gap-2"
-          >
-            <span v-if="p === 'google'">Login with Google</span>
-            <span v-else>Login with {{ p }}</span>
-          </a>
-          <div class="divider text-sm">or</div>
-        </div>
-        <form @submit.prevent="submit" class="flex flex-col gap-4">
-          <fieldset class="fieldset">
-            <label class="label" for="user">User</label>
-            <input
-              id="user"
-              v-model="user"
-              type="text"
-              class="input min-h-11 touch-manipulation"
-              required
-              autocomplete="username"
-            />
-          </fieldset>
-          <PasswordInput
-            v-model="pass"
-            label="Password"
-            required
-            autocomplete="current-password"
-          />
-          <p v-if="error" class="text-error text-sm">{{ error }}</p>
-          <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
-            <span v-if="loading" class="loading loading-spinner loading-sm" />
-            <span v-else>Log in</span>
-          </button>
-        </form>
-      </div>
+  <AuthCard>
+    <h1 class="card-title justify-center text-2xl">HnH Map</h1>
+    <p class="text-center text-base-content/70 text-sm">Log in to continue</p>
+    <div v-if="(oauthProviders ?? []).length" class="flex flex-col gap-2">
+      <a
+        v-for="p in (oauthProviders ?? [])"
+        :key="p"
+        :href="api.oauthLoginUrl(p, redirect || undefined)"
+        class="btn btn-outline gap-2"
+      >
+        <span v-if="p === 'google'">Login with Google</span>
+        <span v-else>Login with {{ p }}</span>
+      </a>
+      <div class="divider text-sm">or</div>
     </div>
-  </div>
+    <form @submit.prevent="submit" class="flex flex-col gap-4">
+      <fieldset class="fieldset">
+        <label class="label" for="user">User</label>
+        <input
+          id="user"
+          v-model="user"
+          type="text"
+          class="input min-h-11 touch-manipulation"
+          required
+          autocomplete="username"
+        />
+      </fieldset>
+      <PasswordInput
+        v-model="pass"
+        label="Password"
+        required
+        autocomplete="current-password"
+      />
+      <p v-if="error" class="text-error text-sm">{{ error }}</p>
+      <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
+        <span v-if="loading" class="loading loading-spinner loading-sm" />
+        <span v-else>Log in</span>
+      </button>
+    </form>
+  </AuthCard>
 </template>
 
 <script setup lang="ts">
@@ -50,12 +46,11 @@
 
 const user = ref('')
 const pass = ref('')
-const error = ref('')
-const loading = ref(false)
 const oauthProviders = ref<string[]>([])
 const router = useRouter()
 const route = useRoute()
 const api = useMapApi()
+const { loading, error, run } = useFormSubmit('Login failed')
 
 const redirect = computed(() => (route.query.redirect as string) || '')
 
@@ -64,15 +59,9 @@ onMounted(async () => {
 })
 
 async function submit() {
-  error.value = ''
-  loading.value = true
-  try {
+  await run(async () => {
     await api.login(user.value, pass.value)
     await router.push(redirect.value || '/')
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : 'Login failed'
-  } finally {
-    loading.value = false
-  }
+  })
 }
 </script>

frontend-nuxt/pages/profile.vue

@@ -16,23 +16,7 @@
         </template>
         <template v-else-if="me">
           <div class="flex flex-wrap items-center gap-4">
-            <div class="avatar">
-              <div class="rounded-full w-14 h-14 overflow-hidden flex items-center justify-center">
-                <img
-                  v-if="me.email && !gravatarError"
-                  :src="useGravatarUrl(me.email, 80)"
-                  alt=""
-                  class="w-full h-full object-cover"
-                  @error="gravatarError = true"
-                >
-                <div
-                  v-else
-                  class="bg-primary text-primary-content rounded-full w-14 h-14 flex items-center justify-center"
-                >
-                  <span class="text-2xl font-semibold">{{ (me.username || '?')[0].toUpperCase() }}</span>
-                </div>
-              </div>
-            </div>
+            <UserAvatar :username="me.username" :email="me.email" :size="56" />
             <div class="flex flex-col gap-1">
               <h2 class="text-lg font-semibold">{{ me.username }}</h2>
               <div class="flex flex-wrap gap-1.5">
@@ -159,7 +143,6 @@ const passMsg = ref('')
 const passOk = ref(false)
 const tokenError = ref('')
 const copiedToken = ref<string | null>(null)
-const gravatarError = ref(false)
 const emailEditing = ref(false)
 const emailEdit = ref('')
 const loadingEmail = ref(false)
@@ -185,7 +168,6 @@ async function saveEmail() {
     const data = await api.me()
     me.value = data
     emailEditing.value = false
-    gravatarError.value = false
     toast.success('Email updated')
   } catch (e: unknown) {
     emailError.value = e instanceof Error ? e.message : 'Failed to update email'

frontend-nuxt/pages/setup.vue

@@ -1,27 +1,25 @@
 <template>
   <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-base-200 via-base-300 to-primary/10 p-4 overflow-hidden">
-    <div class="card card-app w-full max-w-sm login-card">
-      <div class="card-body">
-        <h1 class="card-title justify-center">First-time setup</h1>
-        <p class="text-sm text-base-content/80">
-          This is the first run. Create the administrator account using the bootstrap password
-          from the server configuration (e.g. <code class="text-xs">HNHMAP_BOOTSTRAP_PASSWORD</code>).
-        </p>
-        <form @submit.prevent="submit" class="flex flex-col gap-4">
-          <PasswordInput
-            v-model="pass"
-            label="Bootstrap password"
-            required
-            autocomplete="current-password"
-          />
-          <p v-if="error" class="text-error text-sm">{{ error }}</p>
-          <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
-            <span v-if="loading" class="loading loading-spinner loading-sm" />
-            <span v-else>Create and log in</span>
-          </button>
-        </form>
-      </div>
-    </div>
+    <AuthCard>
+      <h1 class="card-title justify-center">First-time setup</h1>
+      <p class="text-sm text-base-content/80">
+        This is the first run. Create the administrator account using the bootstrap password
+        from the server configuration (e.g. <code class="text-xs">HNHMAP_BOOTSTRAP_PASSWORD</code>).
+      </p>
+      <form @submit.prevent="submit" class="flex flex-col gap-4">
+        <PasswordInput
+          v-model="pass"
+          label="Bootstrap password"
+          required
+          autocomplete="current-password"
+        />
+        <p v-if="error" class="text-error text-sm">{{ error }}</p>
+        <button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
+          <span v-if="loading" class="loading loading-spinner loading-sm" />
+          <span v-else>Create and log in</span>
+        </button>
+      </form>
+    </AuthCard>
     <NuxtLink to="/" class="link link-hover underline underline-offset-2 mt-4 text-primary">Map</NuxtLink>
   </div>
 </template>
@@ -30,10 +28,9 @@
 // No auth required; auth.global skips this path
 
 const pass = ref('')
-const error = ref('')
-const loading = ref(false)
 const router = useRouter()
 const api = useMapApi()
+const { loading, error, run } = useFormSubmit('Setup failed')
 
 onMounted(async () => {
   try {
@@ -45,17 +42,12 @@ onMounted(async () => {
 })
 
 async function submit() {
-  error.value = ''
-  loading.value = true
-  try {
+  const ok = await run(async () => {
     await api.login('admin', pass.value)
     await router.push('/profile')
-  } catch (e: unknown) {
-    error.value = (e as Error)?.message === 'Unauthorized'
-      ? 'Invalid bootstrap password.'
-      : (e as Error)?.message || 'Setup failed'
-  } finally {
-    loading.value = false
+  })
+  if (!ok && error.value === 'Unauthorized') {
+    error.value = 'Invalid bootstrap password.'
   }
 }
 </script>

frontend-nuxt/vitest.config.ts

@@ -6,6 +6,12 @@ export default defineConfig({
     environment: 'happy-dom',
     include: ['**/__tests__/**/*.test.ts', '**/*.test.ts'],
     globals: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'html'],
+      include: ['composables/**/*.ts', 'components/**/*.vue', 'lib/**/*.ts'],
+      exclude: ['**/*.test.ts', '**/__tests__/**', '**/__mocks__/**'],
+    },
   },
   resolve: {
     alias: {