Add New registered user

resources/js/pages/auth/Register.vue

@@ -1,17 +1,19 @@
-<script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
+<script lang="ts" setup>
+import {Form, Head} from '@inertiajs/vue3';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import TextLink from '@/components/TextLink.vue';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import { login } from '@/routes';
-import { store } from '@/routes/register';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Spinner} from '@/components/ui/spinner';
+import {login} from '@/routes';
+import {store} from '@/routes/register';
 
 defineProps<{
   passwordRules: string;
+  inviteToken?: string;
+  email?: string;
 }>();
 
 defineOptions({
@@ -26,23 +28,23 @@ defineOptions({
   <Head title="Register" />
 
   <Form
-    v-bind="store.form()"
-    :reset-on-success="['password', 'password_confirmation']"
     v-slot="{ errors, processing }"
+    :reset-on-success="['password', 'password_confirmation']"
     class="flex flex-col gap-6"
+    v-bind="store.form()"
   >
     <div class="grid gap-6">
       <div class="grid gap-2">
         <Label for="name">Name</Label>
         <Input
           id="name"
-          type="text"
-          required
-          autofocus
           :tabindex="1"
           autocomplete="name"
+          autofocus
           name="name"
           placeholder="Full name"
+          required
+          type="text"
         />
         <InputError :message="errors.name" />
       </div>
@@ -51,12 +53,14 @@ defineOptions({
         <Label for="email">Email address</Label>
         <Input
           id="email"
-          type="email"
-          required
+          :model-value="email"
+          :readonly="email !== null"
           :tabindex="2"
           autocomplete="email"
           name="email"
           placeholder="email@example.com"
+          required
+          type="email"
         />
         <InputError :message="errors.email" />
       </div>
@@ -65,12 +69,12 @@ defineOptions({
         <Label for="password">Password</Label>
         <PasswordInput
           id="password"
-          required
+          :passwordrules="passwordRules"
           :tabindex="3"
           autocomplete="new-password"
           name="password"
           placeholder="Password"
-          :passwordrules="passwordRules"
+          required
         />
         <InputError :message="errors.password" />
       </div>
@@ -79,22 +83,32 @@ defineOptions({
         <Label for="password_confirmation">Confirm password</Label>
         <PasswordInput
           id="password_confirmation"
-          required
+          :passwordrules="passwordRules"
           :tabindex="4"
           autocomplete="new-password"
           name="password_confirmation"
           placeholder="Confirm password"
-          :passwordrules="passwordRules"
+          required
         />
         <InputError :message="errors.password_confirmation" />
       </div>
 
+      <div class="grid gap-2">
+        <PasswordInput
+          id="invite_token"
+          :model-value="inviteToken"
+          name="invite_token"
+          type="hidden"
+        />
+        <InputError :message="errors.invite_token" />
+      </div>
+
       <Button
-        type="submit"
-        class="mt-2 w-full"
-        tabindex="5"
         :disabled="processing"
+        class="mt-2 w-full"
         data-test="register-user-button"
+        tabindex="5"
+        type="submit"
       >
         <Spinner v-if="processing" />
         Create account
@@ -105,8 +119,8 @@ defineOptions({
       Already have an account?
       <TextLink
         :href="login()"
-        class="underline underline-offset-4"
         :tabindex="6"
+        class="underline underline-offset-4"
         >Log in</TextLink
       >
     </div>