Fix console warning messages on the login and register pages (#24)

Author: oketafred

resources/js/pages/auth/Login.vue

@@ -44,7 +44,7 @@ const submit = () => {
                         type="email"
                         required
                         autofocus
-                        tabindex="1"
+                        :tabindex="1"
                         autocomplete="email"
                         v-model="form.email"
                         placeholder="[email protected]"
@@ -55,28 +55,28 @@ const submit = () => {
                 <div class="grid gap-2">
                     <div class="flex items-center justify-between">
                         <Label for="password">Password</Label>
-                        <TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" tabindex="5"> Forgot password? </TextLink>
+                        <TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" :tabindex="5"> Forgot password? </TextLink>
                     </div>
                     <Input
                         id="password"
                         type="password"
                         required
-                        tabindex="2"
+                        :tabindex="2"
                         autocomplete="current-password"
                         v-model="form.password"
                         placeholder="Password"
                     />
                     <InputError :message="form.errors.password" />
                 </div>
 
-                <div class="flex items-center justify-between" tabindex="3">
+                <div class="flex items-center justify-between" :tabindex="3">
                     <Label for="remember" class="flex items-center space-x-3">
-                        <Checkbox id="remember" v-model:checked="form.remember" tabindex="4" />
+                        <Checkbox id="remember" v-model:checked="form.remember" :tabindex="4" />
                         <span>Remember me</span>
                     </Label>
                 </div>
 
-                <Button type="submit" class="mt-4 w-full" tabindex="4" :disabled="form.processing">
+                <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="form.processing">
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
                     Log in
                 </Button>

resources/js/pages/auth/Register.vue

@@ -30,13 +30,13 @@ const submit = () => {
             <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" v-model="form.name" placeholder="Full name" />
+                    <Input id="name" type="text" required autofocus :tabindex="1" autocomplete="name" v-model="form.name" placeholder="Full name" />
                     <InputError :message="form.errors.name" />
                 </div>
 
                 <div class="grid gap-2">
                     <Label for="email">Email address</Label>
-                    <Input id="email" type="email" required tabindex="2" autocomplete="email" v-model="form.email" placeholder="[email protected]" />
+                    <Input id="email" type="email" required :tabindex="2" autocomplete="email" v-model="form.email" placeholder="[email protected]" />
                     <InputError :message="form.errors.email" />
                 </div>
 
@@ -46,7 +46,7 @@ const submit = () => {
                         id="password"
                         type="password"
                         required
-                        tabindex="3"
+                        :tabindex="3"
                         autocomplete="new-password"
                         v-model="form.password"
                         placeholder="Password"
@@ -60,7 +60,7 @@ const submit = () => {
                         id="password_confirmation"
                         type="password"
                         required
-                        tabindex="4"
+                        :tabindex="4"
                         autocomplete="new-password"
                         v-model="form.password_confirmation"
                         placeholder="Confirm password"
@@ -76,7 +76,7 @@ const submit = () => {
 
             <div class="text-center text-sm text-muted-foreground">
                 Already have an account?
-                <TextLink :href="route('login')" class="underline underline-offset-4" tabindex="6">Log in</TextLink>
+                <TextLink :href="route('login')" class="underline underline-offset-4" :tabindex="6">Log in</TextLink>
             </div>
         </form>
     </AuthBase>