mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-13 16:00:02 +02:00
add page to retrieve user virtual api keys
This commit is contained in:
miloschwartz
@@ -0,0 +1,113 @@
|
||||
import { Layout } from "@app/components/Layout";
|
||||
import UserVirtualApiKeys from "@app/components/UserVirtualApiKeys";
|
||||
import { commandBarNavSections } from "@app/app/navigation";
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { verifySession } from "@app/lib/auth/verifySession";
|
||||
import { pullEnv } from "@app/lib/pullEnv";
|
||||
import UserProvider from "@app/providers/UserProvider";
|
||||
import { ListUserOrgsResponse } from "@server/routers/org";
|
||||
import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
|
||||
import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cache } from "react";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations();
|
||||
return {
|
||||
title: t("myVirtualApiKeysTitle")
|
||||
};
|
||||
}
|
||||
|
||||
type KeysPageProps = {
|
||||
params: Promise<{ orgId: string }>;
|
||||
};
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function KeysPage(props: KeysPageProps) {
|
||||
const params = await props.params;
|
||||
const orgId = params.orgId;
|
||||
|
||||
if (!orgId) {
|
||||
redirect(`/`);
|
||||
}
|
||||
|
||||
const getUser = cache(verifySession);
|
||||
const user = await getUser();
|
||||
|
||||
if (!user) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
const cookieHeader = await authCookieHeader();
|
||||
|
||||
let overview: GetOrgOverviewResponse | undefined;
|
||||
try {
|
||||
const res = await internal.get<AxiosResponse<GetOrgOverviewResponse>>(
|
||||
`/org/${orgId}/overview`,
|
||||
cookieHeader
|
||||
);
|
||||
overview = res.data.data;
|
||||
} catch {
|
||||
// leave undefined
|
||||
}
|
||||
|
||||
let orgs: ListUserOrgsResponse["orgs"] = [];
|
||||
try {
|
||||
const getOrgs = cache(async () =>
|
||||
internal.get<AxiosResponse<ListUserOrgsResponse>>(
|
||||
`/user/${user.userId}/orgs`,
|
||||
cookieHeader
|
||||
)
|
||||
);
|
||||
const res = await getOrgs();
|
||||
if (res && res.data.data.orgs) {
|
||||
orgs = res.data.data.orgs;
|
||||
}
|
||||
} catch {
|
||||
// leave empty
|
||||
}
|
||||
|
||||
if (!orgs.some((org) => org.orgId === orgId)) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
let keysData: ListMyVirtualApiKeysResponse | null = null;
|
||||
try {
|
||||
const res = await internal.get<
|
||||
AxiosResponse<ListMyVirtualApiKeysResponse>
|
||||
>(`/org/${orgId}/my-virtual-api-keys`, cookieHeader);
|
||||
keysData = res.data.data;
|
||||
} catch {
|
||||
redirect(`/${orgId}`);
|
||||
}
|
||||
|
||||
if (!keysData) {
|
||||
redirect(`/${orgId}`);
|
||||
}
|
||||
|
||||
const env = pullEnv();
|
||||
const primaryOrg = orgs.find((o) => o.orgId === orgId)?.isPrimaryOrg;
|
||||
const isAdminOrOwner = Boolean(overview?.isAdmin || overview?.isOwner);
|
||||
|
||||
return (
|
||||
<UserProvider user={user}>
|
||||
<Layout
|
||||
orgId={orgId}
|
||||
orgs={orgs}
|
||||
navItems={[]}
|
||||
commandNavItems={commandBarNavSections(env, {
|
||||
isPrimaryOrg: primaryOrg
|
||||
})}
|
||||
showSidebar={false}
|
||||
showViewAsAdmin={isAdminOrOwner}
|
||||
>
|
||||
<UserVirtualApiKeys orgId={orgId} initialData={keysData} />
|
||||
</Layout>
|
||||
</UserProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { Layout } from "@app/components/Layout";
|
||||
import UserVirtualApiKeys from "@app/components/UserVirtualApiKeys";
|
||||
import { commandBarNavSections } from "@app/app/navigation";
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { verifySession } from "@app/lib/auth/verifySession";
|
||||
import { pullEnv } from "@app/lib/pullEnv";
|
||||
import UserProvider from "@app/providers/UserProvider";
|
||||
import { ListUserOrgsResponse } from "@server/routers/org";
|
||||
import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
|
||||
import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import { AxiosResponse } from "axios";
|
||||
import type { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cache } from "react";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations();
|
||||
return {
|
||||
title: t("myVirtualApiKeysResourceTitle")
|
||||
};
|
||||
}
|
||||
|
||||
type ResourceKeysPageProps = {
|
||||
params: Promise<{ orgId: string; resourceGuid: string }>;
|
||||
};
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ResourceKeysPage(props: ResourceKeysPageProps) {
|
||||
const params = await props.params;
|
||||
const orgId = params.orgId;
|
||||
const resourceGuid = params.resourceGuid;
|
||||
|
||||
if (!orgId || !resourceGuid) {
|
||||
redirect(`/`);
|
||||
}
|
||||
|
||||
const getUser = cache(verifySession);
|
||||
const user = await getUser();
|
||||
|
||||
if (!user) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
const cookieHeader = await authCookieHeader();
|
||||
|
||||
let overview: GetOrgOverviewResponse | undefined;
|
||||
try {
|
||||
const res = await internal.get<AxiosResponse<GetOrgOverviewResponse>>(
|
||||
`/org/${orgId}/overview`,
|
||||
cookieHeader
|
||||
);
|
||||
overview = res.data.data;
|
||||
} catch {
|
||||
// leave undefined
|
||||
}
|
||||
|
||||
let orgs: ListUserOrgsResponse["orgs"] = [];
|
||||
try {
|
||||
const getOrgs = cache(async () =>
|
||||
internal.get<AxiosResponse<ListUserOrgsResponse>>(
|
||||
`/user/${user.userId}/orgs`,
|
||||
cookieHeader
|
||||
)
|
||||
);
|
||||
const res = await getOrgs();
|
||||
if (res && res.data.data.orgs) {
|
||||
orgs = res.data.data.orgs;
|
||||
}
|
||||
} catch {
|
||||
// leave empty
|
||||
}
|
||||
|
||||
if (!orgs.some((org) => org.orgId === orgId)) {
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
let keysData: ListMyVirtualApiKeysResponse | null = null;
|
||||
try {
|
||||
const res = await internal.get<
|
||||
AxiosResponse<ListMyVirtualApiKeysResponse>
|
||||
>(
|
||||
`/org/${orgId}/my-virtual-api-keys?resourceGuid=${encodeURIComponent(resourceGuid)}`,
|
||||
cookieHeader
|
||||
);
|
||||
keysData = res.data.data;
|
||||
} catch {
|
||||
redirect(`/${orgId}/keys`);
|
||||
}
|
||||
|
||||
if (!keysData) {
|
||||
redirect(`/${orgId}/keys`);
|
||||
}
|
||||
|
||||
const env = pullEnv();
|
||||
const primaryOrg = orgs.find((o) => o.orgId === orgId)?.isPrimaryOrg;
|
||||
const isAdminOrOwner = Boolean(overview?.isAdmin || overview?.isOwner);
|
||||
|
||||
return (
|
||||
<UserProvider user={user}>
|
||||
<Layout
|
||||
orgId={orgId}
|
||||
orgs={orgs}
|
||||
navItems={[]}
|
||||
commandNavItems={commandBarNavSections(env, {
|
||||
isPrimaryOrg: primaryOrg
|
||||
})}
|
||||
showSidebar={false}
|
||||
showViewAsAdmin={isAdminOrOwner}
|
||||
>
|
||||
<UserVirtualApiKeys
|
||||
orgId={orgId}
|
||||
resourceGuid={resourceGuid}
|
||||
initialData={keysData}
|
||||
/>
|
||||
</Layout>
|
||||
</UserProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { AxiosResponse } from "axios";
|
||||
import moment from "moment";
|
||||
import { Badge } from "@app/components/ui/badge";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import CopyTextBox from "@app/components/CopyTextBox";
|
||||
import CopyToClipboard from "@app/components/CopyToClipboard";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsFormCell,
|
||||
SettingsFormGrid,
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle as SectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import type {
|
||||
GetMyVirtualApiKeyResponse,
|
||||
ListMyVirtualApiKeysResponse,
|
||||
VirtualApiKeyWithResources
|
||||
} from "@server/routers/virtualApiKey/types";
|
||||
|
||||
type UserVirtualApiKeysProps = {
|
||||
orgId: string;
|
||||
resourceGuid?: string;
|
||||
initialData: ListMyVirtualApiKeysResponse;
|
||||
};
|
||||
|
||||
function keyPreview(virtualApiKeyId: string, lastChars: string): string {
|
||||
return `vk-${virtualApiKeyId}••••${lastChars}`;
|
||||
}
|
||||
|
||||
function useRevealSecret(orgId: string, virtualApiKeyId: string) {
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const [credential, setCredential] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const revealSecret = () => {
|
||||
if (credential || loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
api.get<AxiosResponse<GetMyVirtualApiKeyResponse>>(
|
||||
`/org/${orgId}/my-virtual-api-keys/${virtualApiKeyId}`
|
||||
)
|
||||
.then((res) => {
|
||||
const secret = res.data.data.virtualApiKey.secret;
|
||||
if (secret) {
|
||||
setCredential(`vk-${virtualApiKeyId}.${secret}`);
|
||||
} else {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysErrorFetchSecret"),
|
||||
description: t(
|
||||
"virtualApiKeysErrorFetchSecretDescription"
|
||||
)
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysErrorFetchSecret"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("virtualApiKeysErrorFetchSecretDescription")
|
||||
)
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return { credential, loading, revealSecret };
|
||||
}
|
||||
|
||||
function OwnedKeySecret({
|
||||
orgId,
|
||||
virtualApiKeyId,
|
||||
lastChars
|
||||
}: {
|
||||
orgId: string;
|
||||
virtualApiKeyId: string;
|
||||
lastChars: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const preview = keyPreview(virtualApiKeyId, lastChars);
|
||||
const { credential, loading, revealSecret } = useRevealSecret(
|
||||
orgId,
|
||||
virtualApiKeyId
|
||||
);
|
||||
const displayValue = credential ?? preview;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="min-w-0 flex-1">
|
||||
<CopyToClipboard
|
||||
text={displayValue}
|
||||
displayText={displayValue}
|
||||
/>
|
||||
</div>
|
||||
{!credential ? (
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="shrink-0 px-0 h-auto"
|
||||
loading={loading}
|
||||
onClick={revealSecret}
|
||||
>
|
||||
{t("myVirtualApiKeysRevealSecret")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IdentityKeyCenterpiece({
|
||||
orgId,
|
||||
virtualApiKeyId,
|
||||
lastChars,
|
||||
resourceGuid
|
||||
}: {
|
||||
orgId: string;
|
||||
virtualApiKeyId: string;
|
||||
lastChars: string;
|
||||
resourceGuid?: string;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const preview = keyPreview(virtualApiKeyId, lastChars);
|
||||
const { credential, loading, revealSecret } = useRevealSecret(
|
||||
orgId,
|
||||
virtualApiKeyId
|
||||
);
|
||||
const displayValue = credential ?? preview;
|
||||
const headline = resourceGuid
|
||||
? t("myVirtualApiKeysIdentityResourceHeadline")
|
||||
: t("myVirtualApiKeysIdentityHeadline");
|
||||
const description = resourceGuid
|
||||
? t("myVirtualApiKeysIdentityResourceDescription")
|
||||
: t("myVirtualApiKeysIdentityDescription");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center text-center py-10 md:py-14 px-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight max-w-xl">
|
||||
{headline}
|
||||
</h2>
|
||||
<p className="mt-3 text-muted-foreground max-w-lg text-sm">
|
||||
{description}
|
||||
</p>
|
||||
<div className="mt-8 w-full max-w-2xl">
|
||||
<div className="[&_pre]:text-base [&_code]:font-mono [&_code]:tracking-wide">
|
||||
<CopyTextBox text={displayValue} wrapText={false} />
|
||||
</div>
|
||||
{!credential ? (
|
||||
<div className="mt-3 flex justify-center">
|
||||
<Button
|
||||
variant="link"
|
||||
className="px-0 h-auto"
|
||||
loading={loading}
|
||||
onClick={revealSecret}
|
||||
>
|
||||
{t("myVirtualApiKeysRevealSecret")}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ManualKeyRow({
|
||||
orgId,
|
||||
keyRow
|
||||
}: {
|
||||
orgId: string;
|
||||
keyRow: VirtualApiKeyWithResources;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 border rounded-md p-4">
|
||||
<div className="space-y-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium truncate">
|
||||
{keyRow.name || t("myVirtualApiKeysUnnamed")}
|
||||
</p>
|
||||
</div>
|
||||
{keyRow.description ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{keyRow.description}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="pt-1">
|
||||
<OwnedKeySecret
|
||||
orgId={orgId}
|
||||
virtualApiKeyId={keyRow.virtualApiKeyId}
|
||||
lastChars={keyRow.lastChars}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("created")} {moment(keyRow.createdAt).format("lll")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UserVirtualApiKeys({
|
||||
orgId,
|
||||
resourceGuid,
|
||||
initialData
|
||||
}: UserVirtualApiKeysProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
const title = resourceGuid
|
||||
? t("myVirtualApiKeysResourceTitle")
|
||||
: t("myVirtualApiKeysTitle");
|
||||
const description = resourceGuid
|
||||
? t("myVirtualApiKeysResourceDescription")
|
||||
: t("myVirtualApiKeysDescription");
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsContainer>
|
||||
<IdentityKeyCenterpiece
|
||||
orgId={orgId}
|
||||
virtualApiKeyId={initialData.userKey.virtualApiKeyId}
|
||||
lastChars={initialData.userKey.lastChars}
|
||||
resourceGuid={resourceGuid}
|
||||
/>
|
||||
|
||||
{initialData.manualKeys.length > 0 ? (
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SectionTitle>
|
||||
{t("myVirtualApiKeysManualTitle")}
|
||||
</SectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
{resourceGuid
|
||||
? t(
|
||||
"myVirtualApiKeysManualResourceDescription"
|
||||
)
|
||||
: t("myVirtualApiKeysManualDescription")}
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<SettingsFormGrid>
|
||||
{initialData.manualKeys.map((keyRow) => (
|
||||
<SettingsFormCell
|
||||
key={keyRow.virtualApiKeyId}
|
||||
span="half"
|
||||
>
|
||||
<ManualKeyRow
|
||||
orgId={orgId}
|
||||
keyRow={keyRow}
|
||||
/>
|
||||
</SettingsFormCell>
|
||||
))}
|
||||
</SettingsFormGrid>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
) : null}
|
||||
</SettingsContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user