Files
hnh-map/frontend-nuxt/pages/setup.vue
Nikolay Tatarinov adfdfd01c4 Update frontend components for accessibility and functionality improvements
- Modified docker-compose.dev.yml to conditionally run npm install based on the presence of package-lock.json.
- Upgraded Nuxt version in package-lock.json from 3.21.1 to 4.3.1 for enhanced features.
- Enhanced ConfirmModal component with aria-modal attribute for better accessibility.
- Updated MapErrorBoundary component's error message for clarity.
- Added role and aria-label attributes to MapView and MapSearch components for improved screen reader support.
- Refactored various components to manage focus behavior on modal close, enhancing user experience.
- Improved ToastContainer styling for better responsiveness and visibility.
- Updated layout components to include skip navigation links for improved accessibility.
2026-03-04 01:00:56 +03:00

56 lines
1.9 KiB
Vue
Raw 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 @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="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>