109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
|
|
import type * as v from 'valibot'
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import { computed, ref } from 'vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import AuthLayout from '@/layouts/AuthLayout.vue'
|
|
import { loginSchema } from '@/validation/auth'
|
|
|
|
const { config, flash } = useAuth()
|
|
|
|
const form = useForm('LoginForm', {
|
|
login: '',
|
|
password: '',
|
|
remember: false,
|
|
})
|
|
|
|
const rememberMe = ref(false)
|
|
|
|
const fields: AuthFormField[] = [
|
|
{
|
|
name: 'login',
|
|
type: 'text',
|
|
label: 'Email or Username',
|
|
placeholder: 'Enter your email or username',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'password',
|
|
type: 'password',
|
|
label: 'Password',
|
|
placeholder: 'Enter your password',
|
|
required: true,
|
|
},
|
|
]
|
|
|
|
const providers = computed(() =>
|
|
config.value.providers.map(provider => ({
|
|
label: provider.label,
|
|
icon: provider.icon,
|
|
to: `/auth/${provider.key}`,
|
|
})),
|
|
)
|
|
|
|
const schema = loginSchema
|
|
|
|
type Schema = v.InferOutput<typeof schema>
|
|
|
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
form.login = event.data.login
|
|
form.password = event.data.password
|
|
form.remember = rememberMe.value
|
|
|
|
form.post('/login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AuthLayout>
|
|
<UAuthForm
|
|
:schema="schema"
|
|
:fields="fields"
|
|
:providers="providers"
|
|
:submit="{ label: config.login.submit_label, loading: form.processing }"
|
|
:disabled="form.processing"
|
|
:ui="{ header: 'hidden' }"
|
|
@submit="onSubmit"
|
|
>
|
|
<template v-if="config.features.password_reset" #password-hint>
|
|
<ULink to="/forgot-password" class="text-primary font-medium" tabindex="-1">
|
|
Forgot password?
|
|
</ULink>
|
|
</template>
|
|
|
|
<template v-if="form.errors.login || flash.status" #validation>
|
|
<UAlert
|
|
v-if="form.errors.login"
|
|
color="error"
|
|
icon="i-lucide-alert-circle"
|
|
:title="form.errors.login"
|
|
/>
|
|
<UAlert
|
|
v-if="flash.status"
|
|
color="success"
|
|
icon="i-lucide-check-circle"
|
|
:title="flash.status"
|
|
/>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<UCheckbox
|
|
v-if="config.features.remember_me"
|
|
v-model="rememberMe"
|
|
label="Remember me"
|
|
/>
|
|
<span v-else />
|
|
<span v-if="config.features.registration" class="text-sm text-muted">
|
|
Don't have an account?
|
|
<ULink to="/register" class="text-primary font-medium">
|
|
Sign up
|
|
</ULink>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</UAuthForm>
|
|
</AuthLayout>
|
|
</template>
|