Merge pull request #220 from connorabbas/develop

Link and form improvements

Author: connorabbas

app/Models/User.php

@@ -2,12 +2,12 @@
 
 namespace App\Models;
 
-// use Illuminate\Contracts\Auth\MustVerifyEmail;
+//use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 
-class User extends Authenticatable
+class User extends Authenticatable //implements MustVerifyEmail
 {
     use HasFactory;
     use Notifiable;

resources/js/layouts/app/HeaderLayout.vue

@@ -72,7 +72,7 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
-            <Toast position="top-center" />
+            <Toast position="bottom-right" />
         </Teleport>
         <div class="min-h-screen">
             <!-- Primary Navigation Menu -->

resources/js/layouts/app/SidebarLayout.vue

@@ -70,7 +70,7 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
-            <Toast position="top-center" />
+            <Toast position="bottom-right" />
         </Teleport>
 
         <!-- Mobile Header -->

resources/js/pages/Welcome.vue

@@ -33,18 +33,33 @@ const page = usePage();
                         </div>
                         <p class="mt-0 mb-4 text-muted-color leading-normal">
                             A starter kit using
-                            <a
+                            <Button
+                                class="p-0 no-underline"
+                                variant="link"
+                                as="a"
+                                label="Laravel"
                                 href="https://laravel.com/docs/master"
-                                class="underline text-primary hover:text-color"
-                            >Laravel</a>,
-                            <a
+                                target="_blank"
+                                rel="noopener"
+                            />,
+                            <Button
+                                class="p-0 no-underline"
+                                variant="link"
+                                as="a"
+                                label="Inertia.js"
                                 href="https://inertiajs.com/"
-                                class="underline text-primary hover:text-color"
-                            >Inertia.js</a>, and
-                            <a
+                                target="_blank"
+                                rel="noopener"
+                            />, and
+                            <Button
+                                class="p-0 no-underline"
+                                variant="link"
+                                as="a"
+                                label="PrimeVue"
                                 href="https://primevue.org/"
-                                class="underline text-primary hover:text-color"
-                            >PrimeVue</a>.
+                                target="_blank"
+                                rel="noopener"
+                            />.
                         </p>
                         <template v-if="page.props.auth.user">
                             <InertiaLink :href="route('dashboard')">

resources/js/pages/auth/ForgotPassword.vue

@@ -11,12 +11,12 @@ defineProps({
 
 const emailInput = useTemplateRef('email-input');
 
-const form = useForm({
+const forgotPasswordForm = useForm({
     email: '',
 });
 
 const submit = () => {
-    form.post(route('password.email'));
+    forgotPasswordForm.post(route('password.email'));
 };
 
 onMounted(() => {
@@ -56,26 +56,26 @@ onMounted(() => {
                 <InputText
                     id="email"
                     ref="email-input"
-                    v-model="form.email"
-                    :invalid="Boolean(form.errors.email)"
+                    v-model="forgotPasswordForm.email"
+                    :invalid="Boolean(forgotPasswordForm.errors.email)"
                     type="email"
                     autocomplete="username"
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.email"
+                    v-if="forgotPasswordForm.errors?.email"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.email }}
+                    {{ forgotPasswordForm.errors?.email }}
                 </Message>
             </div>
 
             <div class="flex justify-end items-center">
                 <Button
-                    :loading="form.processing"
+                    :loading="forgotPasswordForm.processing"
                     type="submit"
                     label="Email Password Reset Link"
                 />

resources/js/pages/auth/Login.vue

@@ -14,15 +14,15 @@ defineProps({
 
 const emailInput = useTemplateRef('email-input');
 
-const form = useForm({
+const loginForm = useForm({
     email: '',
     password: '',
     remember: false,
 });
 
 const submit = () => {
-    form.post(route('login'), {
-        onFinish: () => form.reset('password'),
+    loginForm.post(route('login'), {
+        onFinish: () => loginForm.reset('password'),
     });
 };
 
@@ -57,41 +57,41 @@ onMounted(() => {
                 <InputText
                     id="email"
                     ref="email-input"
-                    v-model="form.email"
-                    :invalid="Boolean(form.errors.email)"
+                    v-model="loginForm.email"
+                    :invalid="Boolean(loginForm.errors.email)"
                     type="email"
                     autocomplete="username"
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.email"
+                    v-if="loginForm.errors?.email"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.email }}
+                    {{ loginForm.errors?.email }}
                 </Message>
             </div>
 
             <div class="flex flex-col gap-2">
                 <label for="password">Password</label>
                 <Password
                     id="password"
-                    v-model="form.password"
-                    :invalid="Boolean(form.errors.password)"
+                    v-model="loginForm.password"
+                    :invalid="Boolean(loginForm.errors.password)"
                     autocomplete="current-password"
                     toggleMask
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.password"
+                    v-if="loginForm.errors?.password"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.password }}
+                    {{ loginForm.errors?.password }}
                 </Message>
             </div>
 
@@ -100,7 +100,7 @@ onMounted(() => {
                     <div class="flex items-center">
                         <Checkbox
                             id="remember"
-                            v-model="form.remember"
+                            v-model="loginForm.remember"
                             class="mr-2"
                             :binary="true"
                         ></Checkbox>
@@ -109,16 +109,19 @@ onMounted(() => {
                 </div>
             </div>
 
-            <div class="flex justify-end items-center pt-2">
+            <div class="flex justify-end items-center gap-4 pt-2">
                 <InertiaLink
                     v-if="canResetPassword"
                     :href="route('password.request')"
-                    class="mr-4 underline text-muted-color hover:text-color"
                 >
-                    Forgot your password?
+                    <Button
+                        class="p-0"
+                        variant="link"
+                        label="Forgot your password?"
+                    />
                 </InertiaLink>
                 <Button
-                    :loading="form.processing"
+                    :loading="loginForm.processing"
                     type="submit"
                     label="Log In"
                 />

resources/js/pages/auth/Register.vue

@@ -3,7 +3,7 @@ import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 
-const form = useForm({
+const registerForm = useForm({
     name: '',
     email: '',
     password: '',
@@ -13,8 +13,8 @@ const form = useForm({
 const nameInput = useTemplateRef('name-input');
 
 const submit = () => {
-    form.post(route('register'), {
-        onFinish: () => form.reset('password', 'password_confirmation'),
+    registerForm.post(route('register'), {
+        onFinish: () => registerForm.reset('password', 'password_confirmation'),
     });
 };
 
@@ -36,96 +36,97 @@ onMounted(() => {
                 <InputText
                     id="name"
                     ref="name-input"
-                    v-model="form.name"
-                    :invalid="Boolean(form.errors.name)"
+                    v-model="registerForm.name"
+                    :invalid="Boolean(registerForm.errors.name)"
                     type="text"
                     autocomplete="name"
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.name"
+                    v-if="registerForm.errors?.name"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.name }}
+                    {{ registerForm.errors?.name }}
                 </Message>
             </div>
 
             <div class="flex flex-col gap-2">
                 <label for="email">Email</label>
                 <InputText
                     id="email"
-                    v-model="form.email"
-                    :invalid="Boolean(form.errors.email)"
+                    v-model="registerForm.email"
+                    :invalid="Boolean(registerForm.errors.email)"
                     type="email"
                     autocomplete="username"
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.email"
+                    v-if="registerForm.errors?.email"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.email }}
+                    {{ registerForm.errors?.email }}
                 </Message>
             </div>
 
             <div class="flex flex-col gap-2">
                 <label for="password">Password</label>
                 <Password
                     id="password"
-                    v-model="form.password"
-                    :invalid="Boolean(form.errors.password)"
+                    v-model="registerForm.password"
+                    :invalid="Boolean(registerForm.errors.password)"
                     autocomplete="new-password"
                     toggleMask
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.password"
+                    v-if="registerForm.errors?.password"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.password }}
+                    {{ registerForm.errors?.password }}
                 </Message>
             </div>
 
             <div class="flex flex-col gap-2">
                 <label for="password_confirmation">Confirm Password</label>
                 <InputText
                     id="password_confirmation"
-                    v-model="form.password_confirmation"
-                    :invalid="Boolean(form.errors.password_confirmation)"
+                    v-model="registerForm.password_confirmation"
+                    :invalid="Boolean(registerForm.errors.password_confirmation)"
                     type="password"
                     autocomplete="new-password"
                     required
                     fluid
                 />
                 <Message
-                    v-if="form.errors?.password_confirmation"
+                    v-if="registerForm.errors?.password_confirmation"
                     severity="error"
                     variant="simple"
                     size="small"
                 >
-                    {{ form.errors?.password_confirmation }}
+                    {{ registerForm.errors?.password_confirmation }}
                 </Message>
             </div>
 
-            <div class="flex justify-end items-center pt-2">
-                <InertiaLink
-                    :href="route('login')"
-                    class="mr-4 underline text-muted-color hover:text-color"
-                >
-                    Already registered?
+            <div class="flex justify-end items-center gap-4 pt-2">
+                <InertiaLink :href="route('login')">
+                    <Button
+                        class="p-0"
+                        variant="link"
+                        label="Already registered?"
+                    />
                 </InertiaLink>
                 <Button
                     type="submit"
-                    :loading="form.processing"
+                    :loading="registerForm.processing"
                     label="Register"
                 />
             </div>