frontend/app/components/preferences/developer.vue

<template>
    <Card class="grid gap-3 text-sm">
        <dl class="grid gap-3">
            <div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
                <dt class="text-muted-foreground">
                    {{ key }}
                </dt>
                <dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
                <dd class="font-mono" v-else>
                    <component :is="value" />
                </dd>
            </div>
        </dl>
    </Card>
</template>

<script lang="tsx" setup>
import type { VNode } from "vue";
import { toast } from "vue-sonner";
import { Button } from "../ui/button";
import { Card } from "../ui/card";

const copy = (data: string) => {
    navigator.clipboard.writeText(data);
    toast.success("Copied to clipboard");
};

const authStore = useAuthStore();

const data: [string, string | VNode][] = [
    ["User ID", authStore.account?.id ?? ""],
    ["Instance domain", authStore.instance?.domain ?? ""],
    ["Instance version", authStore.instance?.versia_version ?? ""],
    ["Client ID", authStore.application?.client_id ?? ""],
    [
        "Client secret",
        <Button
            variant="outline"
            class="font-sans"
            size="sm"
            // @ts-expect-error missing onClick types
            onClick={() => copy(authStore.application?.client_secret ?? "")}
        >
            Click to copy
        </Button>,
    ],
    [
        "Access token",
        <Button
            variant="outline"
            class="font-sans"
            size="sm"
            // @ts-expect-error missing onClick types
            onClick={() => copy(authStore.token?.access_token ?? "")}
        >
            Click to copy
        </Button>,
    ],
];
</script>