1- <script setup lang="ts">
1+ <script lang="ts" setup >
22import { Head , useForm } from " @inertiajs/vue3" ;
33import { LoaderCircle } from " lucide-vue-next" ;
44import InputError from " @/components/InputError.vue" ;
@@ -9,7 +9,8 @@ import { Label } from "@/components/ui/label";
99import AuthBase from " @/layouts/AuthLayout.vue" ;
1010
1111const form = useForm ({
12- name: " " ,
12+ first_name: " " ,
13+ last_name: " " ,
1314 email: " " ,
1415 password: " " ,
1516 password_confirmation: " " ,
@@ -23,20 +24,44 @@ function submit() {
2324 </script >
2425
2526<template >
26- <AuthBase title = " Create an account " description =" Enter your details below to create your account" >
27+ <AuthBase description =" Enter your details below to create your account " title = " Create an account" >
2728 <Head title =" Register" />
2829
2930 <form class =" flex flex-col gap-6" @submit.prevent =" submit" >
3031 <div class =" grid gap-6" >
3132 <div class =" grid gap-2" >
32- <Label for =" name" >Name</Label >
33- <Input id =" name" v-model =" form.name" type =" text" required autofocus :tabindex =" 1" autocomplete =" name" placeholder =" Full name" />
34- <InputError :message =" form.errors.name" />
33+ <Label for =" first_name" >First name</Label >
34+ <Input
35+ id =" first_name" v-model =" form.first_name"
36+ :tabindex =" 1"
37+ autocomplete =" first_name"
38+ autofocus
39+ placeholder =" First name"
40+ required type =" text"
41+ />
42+ <InputError :message =" form.errors.first_name" />
43+ </div >
44+
45+ <div class =" grid gap-2" >
46+ <Label for =" last_name" >Last name</Label >
47+ <Input
48+ id =" last_name" v-model =" form.last_name"
49+ :tabindex =" 1"
50+ autocomplete =" last_name"
51+ autofocus
52+ placeholder =" Last name"
53+ required type =" text"
54+ />
55+ <InputError :message =" form.errors.last_name" />
3556 </div >
3657
3758 <div class =" grid gap-2" >
3859 <Label for =" email" >Email address</Label >
39- <
Input id =
" email" v-model =
" form.email" type =
" email" required :tabindex =
" 2" autocomplete =
" email" placeholder =
" [email protected] " />
60+ <Input
61+ id =" email" v-model =" form.email" :tabindex =" 2" autocomplete =" email"
62+ placeholder =
" [email protected] " required 63+ type =" email"
64+ />
4065 <InputError :message =" form.errors.email" />
4166 </div >
4267
@@ -45,11 +70,11 @@ function submit() {
4570 <Input
4671 id =" password"
4772 v-model =" form.password"
48- type =" password"
49- required
5073 :tabindex =" 3"
5174 autocomplete =" new-password"
5275 placeholder =" Password"
76+ required
77+ type =" password"
5378 />
5479 <InputError :message =" form.errors.password" />
5580 </div >
@@ -59,24 +84,24 @@ function submit() {
5984 <Input
6085 id =" password_confirmation"
6186 v-model =" form.password_confirmation"
62- type =" password"
63- required
6487 :tabindex =" 4"
6588 autocomplete =" new-password"
6689 placeholder =" Confirm password"
90+ required
91+ type =" password"
6792 />
6893 <InputError :message =" form.errors.password_confirmation" />
6994 </div >
7095
71- <Button type = " submit " class =" mt-2 w-full" tabindex =" 5" :disabled = " form.processing " >
96+ <Button :disabled = " form.processing " class =" mt-2 w-full" tabindex =" 5" type = " submit " >
7297 <LoaderCircle v-if =" form.processing" class =" h-4 w-4 animate-spin" />
7398 Create account
7499 </Button >
75100 </div >
76101
77102 <div class =" text-muted-foreground text-center text-sm" >
78103 Already have an account?
79- <TextLink :href =" route('login')" class =" underline underline-offset-4" :tabindex = " 6 " >
104+ <TextLink :href =" route('login')" :tabindex = " 6 " class =" underline underline-offset-4" >
80105 Log in
81106 </TextLink >
82107 </div >
0 commit comments