Added 'Terms of Service' and 'Privacy policy' pages

app/components/LoginForm.vue

@@ -58,8 +58,8 @@ const doLogin = async () => {
       </CardContent>
     </Card>
     <FieldDescription class="px-6 text-center">
-      <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
-      <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
+      <NuxtLink to="/legal/terms-of-service"><Button variant="link">Terms of Service</Button></NuxtLink>
+      <NuxtLink to="/legal/privacy-policy"><Button variant="link">Privacy Policy</Button></NuxtLink>
     </FieldDescription>
   </div>
 </template>

app/components/SignupForm.vue

@@ -74,8 +74,8 @@ const createAccount = async () => {
       </Card>
     </ClientOnly>
     <FieldDescription class="px-6 text-center">
-      <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
-      <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
+      <NuxtLink to="/legal/terms-of-service"><Button variant="link">Terms of Service</Button></NuxtLink>
+      <NuxtLink to="/legal/privacy-policy"><Button variant="link">Privacy Policy</Button></NuxtLink>
     </FieldDescription>
   </div>
 </template>

app/layouts/Default.vue

@@ -8,12 +8,8 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/s
 
 import { Separator } from "~/components/ui/separator";
 
-import { useRuntimeConfig } from "#app";
-
 const currentYear = new Date().getFullYear();
 
-const config = useRuntimeConfig();
-
 const authStore = useAuthStore();
 await authStore.init();
 </script>
@@ -31,12 +27,8 @@ await authStore.init();
         <slot />
       </main>
       <footer class="flex h-12 shrink-0 items-center gap-2 border-b px-4" data-testid="footer">
-        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
-          Glowing Fiesta 2025 <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
-        </div>
-        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
-          Glowing Fiesta 2025 - {{ currentYear }} <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
-        </div>
+        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025</div>
+        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025 - {{ currentYear }}</div>
       </footer>
     </SidebarInset>
   </SidebarProvider>

app/layouts/default/Sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { BookOpen, ChevronRight, HandCoins, Settings2, SquareTerminal } from "lucide-vue-next";
+import { useRuntimeConfig } from "#app";
+import { BookOpen, BookOpenText, ChevronRight, HandCoins, Settings2, SquareTerminal } from "lucide-vue-next";
 
 import {
   Sidebar,
@@ -53,6 +54,16 @@ const data = {
         { title: "Changelog", url: "#" },
       ],
     },
+    {
+      title: "Legal",
+      url: "#",
+      icon: BookOpenText,
+      isActive: true,
+      items: [
+        { title: "Terms of Service", url: "/legal/terms-of-service" },
+        { title: "Privacy Policy", url: "/legal/privacy-policy" },
+      ],
+    },
     {
       title: "Settings",
       url: "#",
@@ -85,6 +96,8 @@ const props = withDefaults(defineProps<SidebarLayoutProps>(), {
 });
 
 const navMain = computed(() => props.navItems || data.navMain);
+
+const config = useRuntimeConfig();
 </script>
 
 <template>
@@ -101,7 +114,7 @@ const navMain = computed(() => props.navItems || data.navMain);
               </div>
               <div class="flex flex-col gap-0.5 leading-none">
                 <span class="font-bold text-primary">Glowing Fiesta</span>
-                <span>v1.0.0</span>
+                <span>v{{ config.public.appVersion }}</span>
               </div>
             </NuxtLink>
           </SidebarMenuButton>

app/pages/auth/logout.vue

@@ -41,8 +41,8 @@ useSeoMeta({
       </Card>
       <FieldDescription class="px-6 text-center">
         <NuxtLink to="/"><Button variant="link">Home</Button></NuxtLink>
-        <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
-        <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
+        <NuxtLink to="/legal/terms-of-service"><Button variant="link">Terms of Service</Button></NuxtLink>
+        <NuxtLink to="/legal/privacy-policy"><Button variant="link">Privacy Policy</Button></NuxtLink>
       </FieldDescription>
     </div>
   </div>

app/pages/legal/privacy-policy.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Legal" }, { label: "Privacy Policy", to: "/legal/privacy-policy" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Privacy Policy",
+  description: "Privacy Policy page of a very nice all-purpose application",
+  ogTitle: "Privacy Policy",
+  ogDescription: "Privacy Policy page of a very nice all-purpose application",
+  ogImage: config.public.siteUrl + "/images/human.png",
+});
+</script>
+
+<template>
+  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex px-4 py-2 gap-2">
+    <h1 class="text-2xl font-bold text-primary">Privacy Policy</h1>
+  </div>
+</template>

app/pages/legal/terms-of-service.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Legal" }, { label: "Terms of Service", to: "/legal/terms-of-service" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Terms of Service",
+  description: "Terms of Service page of a very nice all-purpose application",
+  ogTitle: "Terms of Service",
+  ogDescription: "Terms of Service page of a very nice all-purpose application",
+  ogImage: config.public.siteUrl + "/images/human.png",
+});
+</script>
+
+<template>
+  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex px-4 py-2 gap-2">
+    <h1 class="text-2xl font-bold text-primary">Terms of Service</h1>
+  </div>
+</template>