100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { Head, useForm, Link } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
import MainLayout from '@/layouts/MainLayout.vue';
|
|
import PageCard from '@/components/PageCard.vue';
|
|
import SectionHeading from '@/components/SectionHeading.vue';
|
|
|
|
defineOptions({ layout: MainLayout });
|
|
|
|
defineProps<{
|
|
status?: string;
|
|
}>();
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = () => {
|
|
form.post(route('login.store'), {
|
|
onFinish: () => form.reset('password'),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Login" />
|
|
|
|
<VContainer class="d-flex justify-center py-8">
|
|
<PageCard max-width="400">
|
|
<template #header>
|
|
<SectionHeading
|
|
title="Sign in"
|
|
subtitle="Welcome back. Enter your details to continue reading."
|
|
/>
|
|
</template>
|
|
|
|
<VAlert
|
|
v-if="status"
|
|
type="success"
|
|
variant="tonal"
|
|
density="compact"
|
|
class="mb-4"
|
|
>
|
|
{{ status }}
|
|
</VAlert>
|
|
|
|
<VForm @submit.prevent="submit">
|
|
<VTextField
|
|
v-model="form.email"
|
|
label="Email address"
|
|
type="email"
|
|
autofocus
|
|
autocomplete="username"
|
|
:error-messages="form.errors.email"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<VTextField
|
|
v-model="form.password"
|
|
label="Password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
:error-messages="form.errors.password"
|
|
class="mb-1"
|
|
/>
|
|
|
|
<VCheckbox
|
|
v-model="form.remember"
|
|
label="Keep me signed in"
|
|
density="compact"
|
|
hide-details
|
|
class="mb-4"
|
|
/>
|
|
|
|
<VBtn
|
|
type="submit"
|
|
block
|
|
size="large"
|
|
color="primary"
|
|
:loading="form.processing"
|
|
>
|
|
Sign in
|
|
</VBtn>
|
|
</VForm>
|
|
|
|
<template #footer>
|
|
New to DredgeNews?
|
|
<Link
|
|
:href="route('register')"
|
|
class="text-primary font-weight-medium"
|
|
>
|
|
Create an account
|
|
</Link>
|
|
</template>
|
|
</PageCard>
|
|
</VContainer>
|
|
</template>
|