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/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>