146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from 'vuestic-ui';
|
|
|
|
definePageMeta({
|
|
middleware: ['guest']
|
|
});
|
|
const { t } = useI18n();
|
|
const { fetch } = useUserSession();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const localePath = useLocalePath();
|
|
const { isValid, resetValidation, validate } = useForm('formRef');
|
|
const validation = useValidation();
|
|
|
|
const form = reactive({
|
|
email: '',
|
|
password: ''
|
|
});
|
|
|
|
const error = ref('');
|
|
|
|
async function submit() {
|
|
if (!validate()) {
|
|
return;
|
|
}
|
|
error.value = '';
|
|
try {
|
|
await $fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
body: form
|
|
});
|
|
form.password = '';
|
|
await fetch();
|
|
form.email = '';
|
|
await router.push(
|
|
localePath(
|
|
(route.query.to
|
|
? typeof route.query.to === 'string'
|
|
? route.query.to
|
|
: route.query.to[0]
|
|
: '/') || '/'
|
|
)
|
|
);
|
|
return;
|
|
} catch (e) {
|
|
if (e instanceof Error && 'statusCode' in e && e.statusCode === 404) {
|
|
error.value = 'auth.invalid';
|
|
} else {
|
|
error.value = parseError(e);
|
|
}
|
|
}
|
|
form.password = '';
|
|
resetValidation();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="mb-4 text-center text-3xl">{{ t('auth.login') }}</h1>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
|
|
<VaForm
|
|
ref="formRef"
|
|
tag="form"
|
|
class="flex flex-col items-baseline gap-6 sm:col-start-2 lg:col-start-3"
|
|
@submit.prevent="submit"
|
|
>
|
|
<VaInput
|
|
v-model="form.email"
|
|
class="w-full"
|
|
type="email"
|
|
:label="t('auth.email')"
|
|
autocomplete="email"
|
|
:rules="[validation.required(t('auth.email'))]"
|
|
:placeholder="t('auth.email')"
|
|
required
|
|
>
|
|
<template #prependInner>
|
|
<VaIcon name="mail_outline" color="secondary" />
|
|
</template>
|
|
</VaInput>
|
|
<VaValue v-slot="isPasswordVisible" :default-value="false">
|
|
<VaInput
|
|
v-model="form.password"
|
|
class="w-full"
|
|
:type="isPasswordVisible.value ? 'text' : 'password'"
|
|
:label="t('auth.password')"
|
|
:placeholder="t('auth.password')"
|
|
:rules="[
|
|
validation.required(t('auth.password')),
|
|
validation.min(t('auth.password'), 8)
|
|
]"
|
|
autocomplete="current-password"
|
|
:minlength="8"
|
|
required
|
|
>
|
|
<template #prependInner>
|
|
<VaIcon name="key" color="secondary" />
|
|
</template>
|
|
|
|
<template #appendInner>
|
|
<VaButton
|
|
v-if="form.password"
|
|
preset="plain"
|
|
:title="
|
|
t(
|
|
isPasswordVisible.value
|
|
? 'auth.hidePassword'
|
|
: 'auth.showPassword'
|
|
)
|
|
"
|
|
@click="isPasswordVisible.value = !isPasswordVisible.value"
|
|
>
|
|
<VaIcon
|
|
:name="
|
|
isPasswordVisible.value ? 'visibility_off' : 'visibility'
|
|
"
|
|
color="primary"
|
|
/>
|
|
</VaButton>
|
|
</template>
|
|
</VaInput>
|
|
</VaValue>
|
|
<VaAlert
|
|
v-if="error.length > 0"
|
|
color="danger"
|
|
class="w-full text-center"
|
|
>{{ t(error) }}</VaAlert
|
|
>
|
|
<VaButtonGroup grow>
|
|
<VaButton color="success" type="submit" :disabled="!isValid">{{
|
|
t('auth.login')
|
|
}}</VaButton>
|
|
<VaButton
|
|
:to="$localePath({ path: '/register', query: route.query })"
|
|
border-color="primary"
|
|
preset="secondary"
|
|
>{{ t('auth.register_instead') }}</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</VaForm>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|