Update settings page w/ deleting your account. and update translations.

This commit is contained in:
yuanhau 2025-06-03 11:01:20 +08:00
parent 3ebaff5218
commit 45397675f5
6 changed files with 147 additions and 33 deletions

View file

@ -45,12 +45,41 @@ const checkValidApiKey = () => {
}
isCorrect.value = groqApiKeyRegex.test(apiKey);
};
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
const showDeleteDialog = ref(false);
const showLogoutDialog = ref(false);
const confirmDelete = async () => {
await deleteAccount();
showDeleteDialog.value = false;
};
const confirmLogout = async () => {
showLogoutDialog.value = false;
};
const deleteAccount = async () => {
const req = await fetch("/api/user/delete", {
method: "DELETE",
});
};
</script>
<template>
<div class="justify-center align-center text-center">
<div class="">Greetings, {{ user }}</div>
<div class="flex flex-row text-center align-center justify-center">
<span class="text-md p-1 text-nowrap">Your Groq API:&nbsp;</span>
<span class="text-md p-1 text-nowrap"
>{{ t("settings.yourgroqapi") }}:&nbsp;</span
>
<Input
type="text"
class="h-6 m-1 py-3 rounded"
@ -73,13 +102,65 @@ const checkValidApiKey = () => {
class="p-1 text-sm bg-gray-400/60 rounded"
@click="submitCustomApiKey"
>
Submit
{{ t("settings.submit") }}
</button>
</div>
<div class="bg-gray-200/70 p-2 m-2 w-full">
<button @click="logoutAction">Logout</button>
<Dialog v-model:open="showLogoutDialog">
<DialogTrigger asChild>
<Button variant="outline">{{ t("settings.logout") }}</Button>
</DialogTrigger>
<DialogContent class="!border-0 !bg-black !rounded">
<DialogHeader>
<DialogTitle>{{ t("settings.logout") }}</DialogTitle>
<DialogDescription
>Are you sure you want to logout?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button @click="showLogoutDialog = false" variant="outline">
{{ t("popup.cancel") }}
</Button>
<Button @click="confirmLogout" variant="destructive">
{{ t("popup.confirm") }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
<div>
<h3 class="text-red-600">{{ t("settings.dangerzone") }}</h3>
<div class="bg-gray-200/70 p-2 m-2 w-full rounded">
<Dialog v-model:open="showDeleteDialog">
<DialogTrigger asChild>
<Button variant="destructive">
{{ t("settings.deleteaccount") }}
</Button>
</DialogTrigger>
<DialogContent class="!border-0 !bg-black !rounded">
<DialogHeader>
<DialogTitle>{{ t("settings.deleteaccount") }}</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button @click="showDeleteDialog = false" variant="outline">
{{ t("popup.cancel") }}
</Button>
<Button @click="confirmDelete" variant="destructive">
{{ t("settings.deleteaccount") }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</div>
<hr />
<div class="justiy-center align-center text-center">Settings v0.0.1</div>
<div class="justiy-center align-center text-center">
{{ t("app.settings") }} v0.0.2
</div>
</div>
</template>