Files
dredgenews/resources/js/pages/Auth/Register.vue
T
dredgy 439139a057
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled
Done
2026-07-04 23:09:00 +10:00

96 lines
2.8 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 });
const form = useForm({
name: '',
email: '',
password: '',
password_confirmation: '',
});
const submit = () => {
form.post(route('register.store'), {
onFinish: () => form.reset('password', 'password_confirmation'),
});
};
</script>
<template>
<Head title="Register" />
<VContainer class="d-flex justify-center py-8">
<PageCard max-width="400">
<template #header>
<SectionHeading
eyebrow="Join DredgeNews"
title="Create your account"
subtitle="Unlimited stories, straight reporting, no noise."
/>
</template>
<VForm @submit.prevent="submit">
<VTextField
v-model="form.name"
label="Full name"
autofocus
autocomplete="name"
:error-messages="form.errors.name"
class="mb-4"
/>
<VTextField
v-model="form.email"
label="Email address"
type="email"
autocomplete="username"
:error-messages="form.errors.email"
class="mb-4"
/>
<VTextField
v-model="form.password"
label="Password"
type="password"
autocomplete="new-password"
:error-messages="form.errors.password"
class="mb-4"
/>
<VTextField
v-model="form.password_confirmation"
label="Confirm password"
type="password"
autocomplete="new-password"
:error-messages="form.errors.password_confirmation"
class="mb-4"
/>
<VBtn
type="submit"
block
size="large"
color="primary"
:loading="form.processing"
>
Create account
</VBtn>
</VForm>
<template #footer>
Already have an account?
<Link
:href="route('login')"
class="text-primary font-weight-medium"
>Sign in</Link
>
</template>
</PageCard>
</VContainer>
</template>