49 lines
1.9 KiB
Vue
49 lines
1.9 KiB
Vue
<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.hostUrl + "/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>
|