Files
hnh-map/frontend-nuxt/pages/setup.vue
Nikolay Tatarinov fd624c2357 Refactor frontend components for improved functionality and accessibility
- Consolidated global error handling in app.vue to redirect users to the login page on API authentication failure.
- Enhanced MapView component by reintroducing event listeners for selected map and marker updates, improving interactivity.
- Updated PasswordInput and various modal components to ensure proper input handling and accessibility compliance.
- Refactored MapControls and MapControlsContent to streamline prop management and enhance user experience.
- Improved error handling in local storage operations within useMapBookmarks and useRecentLocations composables.
- Standardized input elements across forms for consistency in user interaction.
2026-03-04 14:06:27 +03:00

56 lines
1.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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">
<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 class="flex flex-col gap-4" @submit.prevent="submit">
<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="btn btn-ghost btn-sm mt-4">Map</NuxtLink>
</div>
</template>
<script setup lang="ts">
// No auth required; auth.global skips this path
useHead({ title: 'Setup HnH Map' })
const pass = ref('')
const router = useRouter()
const api = useMapApi()
const { loading, error, run } = useFormSubmit('Setup failed')
onMounted(async () => {
try {
const { setupRequired: required } = await api.setupRequired()
if (!required) await navigateTo('/login')
} catch {
// If API fails, stay on page
}
})
async function submit() {
const ok = await run(async () => {
await api.login('admin', pass.value)
await router.push('/profile')
})
if (!ok && error.value === 'Unauthorized') {
error.value = 'Invalid bootstrap password.'
}
}
</script>