connorabbas · connorabbas · May 27, 2025 · May 27, 2025
diff --git a/src/components/DeleteUserModal.vue b/src/components/DeleteUserModal.vue
@@ -92,7 +92,7 @@ const deleteAccount = () => {
             />
             <Button
                 :loading="deleting"
-                label="Delete Account"
+                label="Delete account"
                 severity="danger"
                 @click="deleteAccount"
             />

diff --git a/src/components/primevue/menu/Breadcrumb.vue b/src/components/primevue/menu/Breadcrumb.vue
@@ -2,11 +2,11 @@
 import { ref, useTemplateRef } from 'vue';
 import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
 import { ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model?: MenuItem[] | undefined;
 }
 const componentProps = defineProps<ExtendedBreadcrumbProps>();
 

diff --git a/src/components/primevue/menu/Menu.vue b/src/components/primevue/menu/Menu.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
 import Menu, { type MenuProps } from 'primevue/menu';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model?: MenuItem[] | undefined;
 }
 const componentProps = defineProps<ExtendedMenuProps>();
 

diff --git a/src/components/primevue/menu/MenuBar.vue b/src/components/primevue/menu/MenuBar.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import Menubar, { type MenubarProps } from 'primevue/menubar';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model?: MenuItem[] | undefined;
 }
 const componentProps = withDefaults(
     defineProps<ExtendedMenubarProps>(),

diff --git a/src/components/primevue/menu/PanelMenu.vue b/src/components/primevue/menu/PanelMenu.vue
@@ -2,11 +2,11 @@
 import { useTemplateRef } from 'vue';
 import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import type { ExtendedMenuItem } from '@/types';
+import type { MenuItem } from '@/types';
 import { ptViewMerge } from '@/utils';
 
 interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
-    model: ExtendedMenuItem[];
+    model?: MenuItem[] | undefined;
 }
 const componentProps = defineProps<ExtendedPanelMenuProps>();
 

diff --git a/src/composables/useAppLayout.js b/src/composables/useAppLayout.js
@@ -58,7 +58,7 @@ export function useAppLayout() {
             separator: true,
         },
         {
-            label: 'Log Out',
+            label: 'Log out',
             lucideIcon: LogOut,
             command: () => authStore.logout(),
         },

diff --git a/src/layouts/GuestAuthLayout.vue b/src/layouts/GuestAuthLayout.vue
@@ -3,26 +3,51 @@ import ApplicationLogo from '@/components/ApplicationLogo.vue';
 </script>
 
 <template>
-    <Container>
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
-            <div>
-                <RouterLink to="/">
-                    <ApplicationLogo class="w-15 h-15 fill-current text-surface-900 dark:text-surface-0" />
-                </RouterLink>
-            </div>
-            <div
-                v-if="$slots.message"
-                class="w-full sm:max-w-md mt-6 px-4 sm:px-0"
+    <Container class="min-h-svh flex flex-col justify-center items-center">
+        <div>
+            <RouterLink to="/">
+                <ApplicationLogo class="w-12 h-12 fill-current text-surface-900 dark:text-surface-0" />
+            </RouterLink>
+        </div>
+        <div
+            v-if="$slots.message"
+            class="w-full sm:max-w-lg mt-6 px-4 sm:px-0"
+        >
+            <slot name="message" />
+        </div>
+        <div class="w-full sm:max-w-lg mt-6">
+            <Card
+                pt:caption:class="space-y-2"
+                pt:body:class="p-6 sm:p-8 space-y-6"
             >
-                <slot name="message" />
-            </div>
-            <div class="w-full sm:max-w-md mt-6">
-                <Card>
-                    <template #content>
-                        <slot />
-                    </template>
-                </Card>
-            </div>
+                <template
+                    v-if="$slots.header"
+                    #header
+                >
+                    <slot name="header" />
+                </template>
+                <template
+                    v-if="$slots.title"
+                    #title
+                >
+                    <slot name="title" />
+                </template>
+                <template
+                    v-if="$slots.subtitle"
+                    #subtitle
+                >
+                    <slot name="subtitle" />
+                </template>
+                <template #content>
+                    <slot />
+                </template>
+                <template
+                    v-if="$slots.footer"
+                    #footer
+                >
+                    <slot name="footer" />
+                </template>
+            </Card>
         </div>
     </Container>
 </template>
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -1,5 +1,5 @@
 import { DataTableFilterMetaData } from 'primevue';
-import { MenuItem } from 'primevue/menuitem';
+import { MenuItem as PrimeVueMenuItem } from 'primevue/menuitem';
 import type { LucideIcon } from 'lucide-vue-next';
 
 export interface User {
@@ -13,7 +13,7 @@ export type PrimeVueDataFilters = {
     [key: string]: DataTableFilterMetaData;
 };
 
-export interface ExtendedMenuItem extends MenuItem {
+export interface MenuItem extends PrimeVueMenuItem {
     route?: string;
     lucideIcon?: LucideIcon;
 }
diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Container from '@/components/Container.vue';
 import { useAuthStore } from '@/stores/auth';
 import { LayoutGrid, LogIn, Settings, UserPlus } from 'lucide-vue-next';
 
@@ -7,14 +8,14 @@ await authStore.fetchUser();
 </script>
 
 <template>
-    <main>
-        <div class="h-screen flex items-center justify-center">
+    <Container fluid>
+        <div class="min-h-svh flex items-center justify-center">
             <Card pt:body:class="p-4 py-6 sm:p-12">
                 <template #content>
                     <div class="text-center md:text-left">
                         <section>
-                            <span class="block text-6xl font-bold mb-1">Laravel API</span>
-                            <div class="text-6xl text-primary font-bold mb-4">
+                            <span class="block text-6xl font-bold text-red-500 dark:text-red-400 mb-1">Laravel API</span>
+                            <div class="text-6xl text-primary font-bold text-green-500 dark:text-green-400 mb-4">
                                 + PrimeVue
                             </div>
                             <p class="mt-0 mb-2 text-muted-color leading-normal">
@@ -83,5 +84,5 @@ await authStore.fetchUser();
                 </template>
             </Card>
         </div>
-    </main>
+    </COntainer>
 </template>
diff --git a/src/views/auth/ForgotPassword.vue b/src/views/auth/ForgotPassword.vue
@@ -53,17 +53,24 @@ onMounted(() => {
             </Message>
         </template>
 
-        <div class="mb-6 text-sm text-muted-color">
-            Forgot your password? No problem. Just let us know your email address and we will email you a password reset
-            link that will allow you to choose a new one.
-        </div>
+        <template #title>
+            <div class="text-center">
+                Forgot password
+            </div>
+        </template>
+
+        <template #subtitle>
+            <div class="text-center">
+                Enter your email address to receive a password reset link
+            </div>
+        </template>
 
         <form
-            class="space-y-6"
+            class="space-y-6 sm:space-y-8"
             @submit.prevent="submit"
         >
             <div class="flex flex-col gap-2">
-                <label for="email">Email</label>
+                <label for="email">Email address</label>
                 <InputText
                     id="email"
                     ref="email-input"
@@ -77,13 +84,25 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.email" />
             </div>
 
-            <div class="flex justify-end items-center">
+            <div>
                 <Button
                     type="submit"
-                    label="Email Password Reset Link"
+                    label="Email password reset link"
                     :loading="loading"
+                    fluid
                 />
             </div>
+
+            <div class="text-center">
+                <span class="text-muted-color mr-1">Or, return to</span>
+                <RouterLink :to="{ name: 'login' }">
+                    <Button
+                        class="p-0"
+                        variant="link"
+                        label="log in"
+                    />
+                </RouterLink>
+            </div>
         </form>
     </GuestAuthLayout>
 </template>
diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
@@ -65,12 +65,25 @@ onMounted(() => {
                 {{ flashMessages.success }}
             </Message>
         </template>
+
+        <template #title>
+            <div class="text-center">
+                Log in to your account
+            </div>
+        </template>
+
+        <template #subtitle>
+            <div class="text-center">
+                Enter your email and password below to log in
+            </div>
+        </template>
+
         <form
-            class="space-y-6"
+            class="space-y-6 sm:space-y-8"
             @submit.prevent="submit"
         >
             <div class="flex flex-col gap-2">
-                <label for="email">Email</label>
+                <label for="email">Email address</label>
                 <InputText
                     id="email"
                     ref="email-input"
@@ -85,7 +98,16 @@ onMounted(() => {
             </div>
 
             <div class="flex flex-col gap-2">
-                <label for="password">Password</label>
+                <div class="flex items-center justify-between">
+                    <label for="password">Password</label>
+                    <RouterLink :to="{ name: 'forgotPassword' }">
+                        <Button
+                            class="p-0"
+                            variant="link"
+                            label="Forgot your password?"
+                        />
+                    </RouterLink>
+                </div>
                 <Password
                     v-model="formData.password"
                     :invalid="Boolean(validationErrors?.password)"
@@ -113,19 +135,25 @@ onMounted(() => {
                 </div>
             </div>
 
-            <div class="flex justify-end items-center pt-2">
-                <RouterLink
-                    :to="{ name: 'forgotPassword' }"
-                    class="mr-4 underline text-muted-color hover:text-color"
-                >
-                    Forgot your password?
-                </RouterLink>
+            <div>
                 <Button
-                    type="submit"
-                    label="Log In"
                     :loading="loading"
+                    type="submit"
+                    label="Log in"
+                    fluid
                 />
             </div>
+
+            <div class="text-center">
+                <span class="text-muted-color mr-1">Don't have an account?</span>
+                <RouterLink :to="{ name: 'register' }">
+                    <Button
+                        class="p-0"
+                        variant="link"
+                        label="Sign up"
+                    />
+                </RouterLink>
+            </div>
         </form>
     </GuestAuthLayout>
 </template>
diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
@@ -43,8 +43,20 @@ onMounted(() => {
 
 <template>
     <GuestAuthLayout>
+        <template #title>
+            <div class="text-center">
+                Create an account
+            </div>
+        </template>
+
+        <template #subtitle>
+            <div class="text-center">
+                Enter your details below to create your account
+            </div>
+        </template>
+
         <form
-            class="space-y-6"
+            class="space-y-6 sm:space-y-8"
             @submit.prevent="submit"
         >
             <div class="flex flex-col gap-2">
@@ -63,7 +75,7 @@ onMounted(() => {
             </div>
 
             <div class="flex flex-col gap-2">
-                <label for="email">Email</label>
+                <label for="email">Email address</label>
                 <InputText
                     id="email"
                     v-model="formData.email"
@@ -105,19 +117,25 @@ onMounted(() => {
                 <InputErrors :errors="validationErrors?.password_confirmation" />
             </div>
 
-            <div class="flex justify-end items-center pt-2">
-                <RouterLink
-                    :to="{ name: 'login' }"
-                    class="mr-4 underline text-muted-color hover:text-color"
-                >
-                    Already registered?
-                </RouterLink>
+            <div>
                 <Button
                     type="submit"
-                    label="Register"
+                    label="Create Account"
                     :loading="loading"
+                    fluid
                 />
             </div>
+
+            <div class="text-center">
+                <span class="text-muted-color mr-1">Already have an account?</span>
+                <RouterLink :to="{ name: 'login' }">
+                    <Button
+                        class="p-0"
+                        variant="link"
+                        label="Log in"
+                    />
+                </RouterLink>
+            </div>
         </form>
     </GuestAuthLayout>
 </template>