Project import from github

app/pages/auth/create-account.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+import SignupForm from "@/components/SignupForm.vue";
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Create Account", to: "/auth/create-account" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Glowing Fiesta - Create Account",
+  ogTitle: "Glowing Fiesta - Create Account",
+  description: "This is the create account page of a very nice all-purpose application",
+  ogDescription: "This is the create account 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 items-center justify-center gap-2">
+    <div class="flex w-full max-w-sm flex-col gap-6">
+      <SignupForm />
+    </div>
+  </div>
+</template>

app/pages/auth/login.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+import LoginForm from "~/components/LoginForm.vue";
+
+const config = useRuntimeConfig();
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Login", to: "/auth/login" }]);
+
+useSeoMeta({
+  title: "Glowing Fiesta - Login",
+  ogTitle: "Glowing Fiesta - Login",
+  description: "This is the login page of a very nice all-purpose application",
+  ogDescription: "This is the login 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 items-center justify-center gap-2">
+    <div class="flex w-full max-w-sm flex-col gap-6">
+      <LoginForm />
+    </div>
+  </div>
+</template>

app/pages/auth/logout.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldDescription } from "@/components/ui/field";
+
+import { useAuthStore } from "~/stores/auth";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+
+const authStore = useAuthStore();
+await authStore.init();
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Logout", to: "/auth/logout" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Glowing Fiesta - Logout",
+  ogTitle: "Glowing Fiesta - Logout",
+  description: "This is the logout page of a very nice all-purpose application",
+  ogDescription: "This is the logout 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 items-center justify-center gap-2">
+    <div class="flex w-full max-w-sm flex-col gap-6">
+      <Card>
+        <CardHeader class="text-center">
+          <CardTitle class="text-xl">Logout</CardTitle>
+          <CardDescription>Are you sure you want to logout?</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form autocomplete="off" @submit.prevent="authStore.signOut()">
+            <Field>
+              <Button type="submit" variant="destructive">Logout</Button>
+            </Field>
+          </form>
+        </CardContent>
+      </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>
+      </FieldDescription>
+    </div>
+  </div>
+</template>

app/pages/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+import { Button } from "@/components/ui/button";
+
+import { useRuntimeConfig, useSeoMeta } from "#app";
+
+const config = useRuntimeConfig();
+
+const lastClicked = ref<string>("None");
+
+const buttonClicked = (variant: string) => {
+  lastClicked.value = variant;
+};
+
+const breadcrumbStore = useBreadcrumbStore();
+breadcrumbStore.setBreadcrumbs([{ label: "Homepage", to: "/" }]);
+
+useSeoMeta({
+  title: "Glowing Fiesta - Homepage",
+  ogTitle: "Glowing Fiesta - Homepage",
+  description: "This is the homepage of a very nice all-purpose application",
+  ogDescription: "This is the homepage of a very nice all-purpose application",
+  ogImage: config.public.siteUrl + "/images/human.png",
+});
+</script>
+
+<template>
+  <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+    <div class="bg-muted/50 aspect-video rounded-xl" />
+    <div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2">
+      <span class="text-primary">Last clicked button:</span>
+      <span class="font-bold text-lime-500">{{ lastClicked }}</span>
+    </div>
+    <div class="bg-muted/50 aspect-video rounded-xl" />
+  </div>
+  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
+    <Button variant="default" @click="buttonClicked('default')">Default</Button>
+    <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
+    <Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
+    <Button variant="link" @click="buttonClicked('link')">Link</Button>
+    <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
+    <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
+  </div>
+</template>