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