From 8092f511ec77f4e52d41faa724e24970e573cc98 Mon Sep 17 00:00:00 2001
From: Seb Kay <seb@fhoke.com>
Date: Thu, 27 Mar 2025 09:57:47 +0000
Subject: [PATCH 1/2] Apply guest layout

---
 resources/js/Layouts/Guest.vue                | 64 +++++++++++++++++++
 resources/js/Pages/EmailVerification/Show.vue | 13 +++-
 resources/js/Pages/Login/Show.vue             | 11 +++-
 resources/js/Pages/Register/Show.vue          |  8 +++
 resources/js/Pages/ResetPassword/Edit.vue     | 13 +++-
 resources/js/Pages/ResetPassword/Show.vue     |  8 +++
 6 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/Layouts/Guest.vue
diff --git a/resources/js/Layouts/Guest.vue b/resources/js/Layouts/Guest.vue
new file mode 100644
index 0000000..bb2c3e7
--- /dev/null
+++ b/resources/js/Layouts/Guest.vue
@@ -0,0 +1,64 @@
+<template>
+
+    <Head>
+        <title></title>
+    </Head>
+
+    <div class="min-h-full flex flex-col">
+        <main class="xl:py-16 py-8 px-4 sm:px-6 xl:px-8">
+            <div class="mx-auto max-w-7xl">
+                <slot />
+            </div>
+        </main>
+    </div>
+
+    <Notice />
+</template>
+
+<script setup>
+    import { computed, defineAsyncComponent } from "vue";
+    import { usePage } from '@inertiajs/vue3'
+
+    const page = usePage();
+
+    const menu = computed(() => {
+        if (page.props.auth.loggedIn) {
+            return [
+                {
+                    label: "Dashboard",
+                    route: route("home"),
+                    condition: true,
+                    components: ['Dashboard/Index'],
+                },
+                {
+                    label: "Account",
+                    route: route("account.edit"),
+                    condition: true,
+                    components: ['Account/Edit', 'EmailVerification/Show'],
+                },
+                {
+                    label: "Logout",
+                    route: route("logout"),
+                    method: "post",
+                    condition: true,
+                    components: [],
+                },
+            ];
+        }
+
+        return [
+            {
+                label: "Login",
+                route: route("login"),
+                condition: true,
+                components: ['Login/Show'],
+            },
+            {
+                label: "Register",
+                route: route("register"),
+                condition: true,
+                components: ['Register/Show'],
+            },
+        ];
+    });
+</script>
diff --git a/resources/js/Pages/EmailVerification/Show.vue b/resources/js/Pages/EmailVerification/Show.vue
index d98040c..631385b 100644
--- a/resources/js/Pages/EmailVerification/Show.vue
+++ b/resources/js/Pages/EmailVerification/Show.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <div class="text-center">
@@ -21,6 +24,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { router } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
index 2fb588a..cde9546 100644
--- a/resources/js/Pages/Login/Show.vue
+++ b/resources/js/Pages/Login/Show.vue
@@ -55,8 +55,7 @@
                                 type="checkbox"
                                 v-model="loginForm.remember"
                             />
-                            <div
-                                class="peer">
+                            <div class="peer">
                             </div>
                             <span>
                                 Remember me
@@ -89,6 +88,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/Register/Show.vue b/resources/js/Pages/Register/Show.vue
index 94365c4..9123225 100644
--- a/resources/js/Pages/Register/Show.vue
+++ b/resources/js/Pages/Register/Show.vue
@@ -100,6 +100,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/ResetPassword/Edit.vue b/resources/js/Pages/ResetPassword/Edit.vue
index 6da6d06..fb877bd 100644
--- a/resources/js/Pages/ResetPassword/Edit.vue
+++ b/resources/js/Pages/ResetPassword/Edit.vue
@@ -3,7 +3,10 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <PageTitle class="mb-4 xl:mb-8" :text="title" />
+        <PageTitle
+            class="mb-4 xl:mb-8"
+            :text="title"
+        />
 
         <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
@@ -54,6 +57,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/ResetPassword/Show.vue b/resources/js/Pages/ResetPassword/Show.vue
index d0c3012..2b66d90 100644
--- a/resources/js/Pages/ResetPassword/Show.vue
+++ b/resources/js/Pages/ResetPassword/Show.vue
@@ -52,6 +52,14 @@
     </div>
 </template>
 
+<script>
+    import Layout from '@js/Layouts/Guest.vue';
+
+    export default {
+        layout: Layout,
+    }
+</script>
+
 <script setup>
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";

From 31255694ec6840311bdf77f29423368613911d82 Mon Sep 17 00:00:00 2001
From: Seb Kay <seb@fhoke.com>
Date: Thu, 27 Mar 2025 10:03:31 +0000
Subject: [PATCH 2/2] Adjust guest layout

---
 resources/js/Components/Header.vue |  9 ++++--
 resources/js/Layouts/Guest.vue     | 49 ++----------------------------
 2 files changed, 9 insertions(+), 49 deletions(-)

diff --git a/resources/js/Components/Header.vue b/resources/js/Components/Header.vue
index ed33a52..7bfb630 100644
--- a/resources/js/Components/Header.vue
+++ b/resources/js/Components/Header.vue
@@ -4,8 +4,11 @@
             <div class="mx-auto max-w-7xl">
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
-                        <Link :href="route('home')">
-                        <SparklesIcon class="size-7 shrink-0 text-brand-800" />
+                        <Link
+                            class="shrink-0 text-brand-800"
+                            :href="route('home')"
+                        >
+                        <SparklesIcon class="size-7" />
                         </Link>
                     </div>
 
@@ -80,7 +83,7 @@
 
 <script setup>
     import { ref, onMounted } from "vue";
-    import { router } from '@inertiajs/vue3'
+    import { router } from '@inertiajs/vue3';
 
     import {
         Sparkles as SparklesIcon,
diff --git a/resources/js/Layouts/Guest.vue b/resources/js/Layouts/Guest.vue
index bb2c3e7..ebf5acb 100644
--- a/resources/js/Layouts/Guest.vue
+++ b/resources/js/Layouts/Guest.vue
@@ -4,9 +4,10 @@
         <title></title>
     </Head>
 
-    <div class="min-h-full flex flex-col">
+    <div class="min-h-full flex flex-col justify-center">
         <main class="xl:py-16 py-8 px-4 sm:px-6 xl:px-8">
             <div class="mx-auto max-w-7xl">
+                <SparklesIcon class="size-10 mx-auto text-brand-800 block mb-4 xl:mb-8" />
                 <slot />
             </div>
         </main>
@@ -16,49 +17,5 @@
 </template>
 
 <script setup>
-    import { computed, defineAsyncComponent } from "vue";
-    import { usePage } from '@inertiajs/vue3'
-
-    const page = usePage();
-
-    const menu = computed(() => {
-        if (page.props.auth.loggedIn) {
-            return [
-                {
-                    label: "Dashboard",
-                    route: route("home"),
-                    condition: true,
-                    components: ['Dashboard/Index'],
-                },
-                {
-                    label: "Account",
-                    route: route("account.edit"),
-                    condition: true,
-                    components: ['Account/Edit', 'EmailVerification/Show'],
-                },
-                {
-                    label: "Logout",
-                    route: route("logout"),
-                    method: "post",
-                    condition: true,
-                    components: [],
-                },
-            ];
-        }
-
-        return [
-            {
-                label: "Login",
-                route: route("login"),
-                condition: true,
-                components: ['Login/Show'],
-            },
-            {
-                label: "Register",
-                route: route("register"),
-                condition: true,
-                components: ['Register/Show'],
-            },
-        ];
-    });
+    import { Sparkles as SparklesIcon } from 'lucide-vue-next';
 </script>
