Nikolay Tatarinov
8f769543f4
- 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.
68 lines
2.1 KiB
Vue
68 lines
2.1 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 @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">
|
|
// No auth required; auth.global skips this path
|
|
|
|
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) || '')
|
|
|
|
onMounted(async () => {
|
|
oauthProviders.value = await api.oauthProviders()
|
|
})
|
|
|
|
async function submit() {
|
|
await run(async () => {
|
|
await api.login(user.value, pass.value)
|
|
await router.push(redirect.value || '/')
|
|
})
|
|
}
|
|
</script>
|