Nikolay Tatarinov
fd624c2357
- 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.
76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<template>
|
||
<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>
|
||
<form class="flex flex-col gap-4" @submit.prevent="submit">
|
||
<fieldset class="fieldset">
|
||
<label class="label" for="user">User</label>
|
||
<input
|
||
id="user"
|
||
ref="userInputRef"
|
||
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">
|
||
// No auth required; auth.global skips this path
|
||
|
||
useHead({ title: 'Login – HnH Map' })
|
||
|
||
const user = ref('')
|
||
const pass = ref('')
|
||
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) || '')
|
||
|
||
const userInputRef = ref<HTMLInputElement | null>(null)
|
||
|
||
onMounted(async () => {
|
||
oauthProviders.value = await api.oauthProviders()
|
||
if (import.meta.client && window.matchMedia('(pointer: fine)').matches) {
|
||
nextTick(() => userInputRef.value?.focus())
|
||
}
|
||
})
|
||
|
||
async function submit() {
|
||
await run(async () => {
|
||
await api.login(user.value, pass.value)
|
||
await router.push(redirect.value || '/')
|
||
})
|
||
}
|
||
</script>
|