mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-18 10:12:55 +02:00
option to send identity keys in email
This commit is contained in:
miloschwartz
@@ -0,0 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import IdentityKeysSplash from "@app/components/IdentityKeysSplash";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Identity Keys"
|
||||
};
|
||||
|
||||
type IdentityKeysPageProps = {
|
||||
params: Promise<{ orgId: string }>;
|
||||
};
|
||||
|
||||
export default async function IdentityKeysPage(props: IdentityKeysPageProps) {
|
||||
const params = await props.params;
|
||||
|
||||
return <IdentityKeysSplash orgId={params.orgId} />;
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cache } from "react";
|
||||
import { GetOrgResponse } from "@server/routers/org";
|
||||
import OrgProvider from "@app/providers/OrgProvider";
|
||||
import VirtualApiKeysTable, {
|
||||
type VirtualApiKeyRow
|
||||
} from "@app/components/VirtualApiKeysTable";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import type { Metadata } from "next";
|
||||
import type { ListVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import type { ListUsersResponse } from "@server/routers/user";
|
||||
import type { ListResourcesResponse } from "@server/routers/resource";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Virtual Keys"
|
||||
};
|
||||
|
||||
type VirtualApiKeysTablePageProps = {
|
||||
params: Promise<{ orgId: string }>;
|
||||
};
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function VirtualApiKeysTablePage(
|
||||
props: VirtualApiKeysTablePageProps
|
||||
) {
|
||||
const params = await props.params;
|
||||
const cookieHeader = await authCookieHeader();
|
||||
const t = await getTranslations();
|
||||
|
||||
let keys: ListVirtualApiKeysResponse["virtualApiKeys"] = [];
|
||||
let users: {
|
||||
userId: string;
|
||||
email: string | null;
|
||||
name: string | null;
|
||||
username: string | null;
|
||||
}[] = [];
|
||||
let resources: {
|
||||
resourceId: number;
|
||||
name: string;
|
||||
niceId: string;
|
||||
}[] = [];
|
||||
|
||||
try {
|
||||
const [keysRes, usersRes, resourcesRes] = await Promise.all([
|
||||
internal.get<AxiosResponse<ListVirtualApiKeysResponse>>(
|
||||
`/org/${params.orgId}/virtual-api-keys?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
),
|
||||
internal.get<AxiosResponse<ListUsersResponse>>(
|
||||
`/org/${params.orgId}/users?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
),
|
||||
internal.get<AxiosResponse<ListResourcesResponse>>(
|
||||
`/org/${params.orgId}/resources?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
)
|
||||
]);
|
||||
|
||||
keys = keysRes.data.data.virtualApiKeys ?? [];
|
||||
users = (usersRes.data.data.users ?? []).map((u) => ({
|
||||
userId: u.id,
|
||||
email: u.email ?? null,
|
||||
name: u.name ?? null,
|
||||
username: u.username ?? null
|
||||
}));
|
||||
resources = (resourcesRes.data.data.resources ?? []).map((r) => ({
|
||||
resourceId: r.resourceId,
|
||||
name: r.name,
|
||||
niceId: r.niceId
|
||||
}));
|
||||
} catch {
|
||||
// leave empty; page still renders
|
||||
}
|
||||
|
||||
let org = null;
|
||||
try {
|
||||
const getOrg = cache(async () =>
|
||||
internal.get<AxiosResponse<GetOrgResponse>>(
|
||||
`/org/${params.orgId}`,
|
||||
cookieHeader
|
||||
)
|
||||
);
|
||||
const res = await getOrg();
|
||||
org = res.data.data;
|
||||
} catch {
|
||||
redirect(`/${params.orgId}/settings/resources`);
|
||||
}
|
||||
|
||||
if (!org) {
|
||||
redirect(`/${params.orgId}/settings/resources`);
|
||||
}
|
||||
|
||||
const userById = new Map(users.map((u) => [u.userId, u]));
|
||||
const resourceById = new Map(resources.map((r) => [r.resourceId, r]));
|
||||
|
||||
const rows: VirtualApiKeyRow[] = keys.map((key) => {
|
||||
const user = key.userId ? userById.get(key.userId) : undefined;
|
||||
const keyResources = key.resourceIds
|
||||
.map((id) => resourceById.get(id))
|
||||
.filter(Boolean) as {
|
||||
resourceId: number;
|
||||
name: string;
|
||||
niceId: string;
|
||||
}[];
|
||||
|
||||
const resourceNames = key.allResources
|
||||
? t("virtualApiKeysAllResources")
|
||||
: keyResources.map((r) => r.name).join(", ") ||
|
||||
t("virtualApiKeysNoResources");
|
||||
|
||||
return {
|
||||
virtualApiKeyId: key.virtualApiKeyId,
|
||||
orgId: key.orgId,
|
||||
kind: key.kind,
|
||||
userId: key.userId,
|
||||
name: key.name,
|
||||
description: key.description,
|
||||
lastChars: key.lastChars,
|
||||
allResources: key.allResources,
|
||||
expiresAt: key.expiresAt,
|
||||
lastUsedAt: key.lastUsedAt,
|
||||
createdAt: key.createdAt,
|
||||
createdByUserId: key.createdByUserId,
|
||||
resourceIds: key.resourceIds,
|
||||
userName: user?.name ?? null,
|
||||
username: user?.username ?? null,
|
||||
userEmail: user?.email ?? null,
|
||||
resourceNames,
|
||||
resources: keyResources
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<OrgProvider org={org}>
|
||||
<VirtualApiKeysTable virtualApiKeys={rows} orgId={params.orgId} />
|
||||
</OrgProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
type VirtualApiKeysListLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ orgId: string }>;
|
||||
};
|
||||
|
||||
export default async function VirtualApiKeysListLayout({
|
||||
children,
|
||||
params
|
||||
}: VirtualApiKeysListLayoutProps) {
|
||||
const { orgId } = await params;
|
||||
const t = await getTranslations();
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
title: t("virtualApiKeysTabIdentity"),
|
||||
href: `/${orgId}/settings/virtual-api-keys/identity`
|
||||
},
|
||||
{
|
||||
title: t("virtualApiKeysTabVirtual"),
|
||||
href: `/${orgId}/settings/virtual-api-keys/keys`
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSectionTitle
|
||||
title={t("virtualApiKeysTitle")}
|
||||
description={t("virtualApiKeysDescription")}
|
||||
/>
|
||||
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,156 +1,17 @@
|
||||
import { internal } from "@app/lib/api";
|
||||
import { authCookieHeader } from "@app/lib/api/cookies";
|
||||
import { AxiosResponse } from "axios";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cache } from "react";
|
||||
import { GetOrgResponse } from "@server/routers/org";
|
||||
import OrgProvider from "@app/providers/OrgProvider";
|
||||
import VirtualApiKeysBanner from "@app/components/VirtualApiKeysBanner";
|
||||
import VirtualApiKeysTable, {
|
||||
type VirtualApiKeyRow
|
||||
} from "@app/components/VirtualApiKeysTable";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import type { Metadata } from "next";
|
||||
import type { ListVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import type { ListUsersResponse } from "@server/routers/user";
|
||||
import type { ListResourcesResponse } from "@server/routers/resource";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Virtual API Keys"
|
||||
};
|
||||
|
||||
type VirtualApiKeysPageProps = {
|
||||
type VirtualApiKeysIndexPageProps = {
|
||||
params: Promise<{ orgId: string }>;
|
||||
};
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function VirtualApiKeysPage(
|
||||
props: VirtualApiKeysPageProps
|
||||
export default async function VirtualApiKeysIndexPage(
|
||||
props: VirtualApiKeysIndexPageProps
|
||||
) {
|
||||
const params = await props.params;
|
||||
const cookieHeader = await authCookieHeader();
|
||||
const t = await getTranslations();
|
||||
|
||||
let keys: ListVirtualApiKeysResponse["virtualApiKeys"] = [];
|
||||
let users: {
|
||||
userId: string;
|
||||
email: string | null;
|
||||
name: string | null;
|
||||
username: string | null;
|
||||
}[] = [];
|
||||
let resources: {
|
||||
resourceId: number;
|
||||
name: string;
|
||||
niceId: string;
|
||||
}[] = [];
|
||||
|
||||
try {
|
||||
const [keysRes, usersRes, resourcesRes] = await Promise.all([
|
||||
internal.get<AxiosResponse<ListVirtualApiKeysResponse>>(
|
||||
`/org/${params.orgId}/virtual-api-keys?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
),
|
||||
internal.get<AxiosResponse<ListUsersResponse>>(
|
||||
`/org/${params.orgId}/users?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
),
|
||||
internal.get<AxiosResponse<ListResourcesResponse>>(
|
||||
`/org/${params.orgId}/resources?page=1&pageSize=1000`,
|
||||
cookieHeader
|
||||
)
|
||||
]);
|
||||
|
||||
keys = keysRes.data.data.virtualApiKeys ?? [];
|
||||
users = (usersRes.data.data.users ?? []).map((u) => ({
|
||||
userId: u.id,
|
||||
email: u.email ?? null,
|
||||
name: u.name ?? null,
|
||||
username: u.username ?? null
|
||||
}));
|
||||
resources = (resourcesRes.data.data.resources ?? []).map((r) => ({
|
||||
resourceId: r.resourceId,
|
||||
name: r.name,
|
||||
niceId: r.niceId
|
||||
}));
|
||||
} catch {
|
||||
// leave empty; page still renders
|
||||
}
|
||||
|
||||
let org = null;
|
||||
try {
|
||||
const getOrg = cache(async () =>
|
||||
internal.get<AxiosResponse<GetOrgResponse>>(
|
||||
`/org/${params.orgId}`,
|
||||
cookieHeader
|
||||
)
|
||||
);
|
||||
const res = await getOrg();
|
||||
org = res.data.data;
|
||||
} catch {
|
||||
redirect(`/${params.orgId}/settings/resources`);
|
||||
}
|
||||
|
||||
if (!org) {
|
||||
redirect(`/${params.orgId}/settings/resources`);
|
||||
}
|
||||
|
||||
const userById = new Map(users.map((u) => [u.userId, u]));
|
||||
const resourceById = new Map(resources.map((r) => [r.resourceId, r]));
|
||||
|
||||
const rows: VirtualApiKeyRow[] = keys.map((key) => {
|
||||
const user = key.userId ? userById.get(key.userId) : undefined;
|
||||
const keyResources = key.resourceIds
|
||||
.map((id) => resourceById.get(id))
|
||||
.filter(Boolean) as {
|
||||
resourceId: number;
|
||||
name: string;
|
||||
niceId: string;
|
||||
}[];
|
||||
|
||||
const resourceNames = key.allResources
|
||||
? t("virtualApiKeysAllResources")
|
||||
: keyResources.map((r) => r.name).join(", ") ||
|
||||
t("virtualApiKeysNoResources");
|
||||
|
||||
return {
|
||||
virtualApiKeyId: key.virtualApiKeyId,
|
||||
orgId: key.orgId,
|
||||
kind: key.kind,
|
||||
userId: key.userId,
|
||||
name: key.name,
|
||||
description: key.description,
|
||||
lastChars: key.lastChars,
|
||||
allResources: key.allResources,
|
||||
expiresAt: key.expiresAt,
|
||||
lastUsedAt: key.lastUsedAt,
|
||||
createdAt: key.createdAt,
|
||||
createdByUserId: key.createdByUserId,
|
||||
resourceIds: key.resourceIds,
|
||||
userName: user?.name ?? null,
|
||||
username: user?.username ?? null,
|
||||
userEmail: user?.email ?? null,
|
||||
resourceNames,
|
||||
resources: keyResources
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSectionTitle
|
||||
title={t("virtualApiKeysTitle")}
|
||||
description={t("virtualApiKeysDescription")}
|
||||
/>
|
||||
|
||||
<VirtualApiKeysBanner orgId={params.orgId} />
|
||||
|
||||
<OrgProvider org={org}>
|
||||
<VirtualApiKeysTable
|
||||
virtualApiKeys={rows}
|
||||
orgId={params.orgId}
|
||||
/>
|
||||
</OrgProvider>
|
||||
</>
|
||||
);
|
||||
redirect(`/${params.orgId}/settings/virtual-api-keys/identity`);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Checkbox } from "@app/components/ui/checkbox";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import { Label } from "@app/components/ui/label";
|
||||
import {
|
||||
RolesSelector,
|
||||
type SelectedRole
|
||||
} from "@app/components/roles-selector";
|
||||
import {
|
||||
UsersSelector,
|
||||
type SelectedUser
|
||||
} from "@app/components/users-selector";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import type { EmailIdentityKeysResponse } from "@server/routers/virtualApiKey/types";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type EmailIdentityKeysFormProps = {
|
||||
orgId: string;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export default function EmailIdentityKeysForm({
|
||||
orgId,
|
||||
open,
|
||||
setOpen
|
||||
}: EmailIdentityKeysFormProps) {
|
||||
const t = useTranslations();
|
||||
const api = createApiClient(useEnvContext());
|
||||
const [sendToAll, setSendToAll] = useState(false);
|
||||
const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
|
||||
const [selectedRoles, setSelectedRoles] = useState<SelectedRole[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
function resetState() {
|
||||
setSendToAll(false);
|
||||
setSelectedUsers([]);
|
||||
setSelectedRoles([]);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (
|
||||
!sendToAll &&
|
||||
selectedUsers.length === 0 &&
|
||||
selectedRoles.length === 0
|
||||
) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysEmailIdentityRecipientsRequired"),
|
||||
description: t("virtualApiKeysEmailIdentityRecipientsRequired")
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.post<
|
||||
AxiosResponse<EmailIdentityKeysResponse>
|
||||
>(`/org/${orgId}/virtual-api-keys/email-identity-keys`, {
|
||||
sendToAll,
|
||||
userIds: sendToAll ? [] : selectedUsers.map((user) => user.id),
|
||||
roleIds: sendToAll
|
||||
? []
|
||||
: selectedRoles.map((role) => Number(role.id))
|
||||
});
|
||||
|
||||
const { sent, skipped } = res.data.data;
|
||||
toast({
|
||||
title: t("virtualApiKeysEmailIdentitySuccess"),
|
||||
description:
|
||||
skipped > 0
|
||||
? `${t("virtualApiKeysEmailIdentitySuccessDescription", { sent })} ${t("virtualApiKeysEmailIdentitySkipped", { skipped })}`
|
||||
: t("virtualApiKeysEmailIdentitySuccessDescription", {
|
||||
sent
|
||||
})
|
||||
});
|
||||
setOpen(false);
|
||||
resetState();
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: t("virtualApiKeysEmailIdentityError"),
|
||||
description: formatAxiosError(
|
||||
e,
|
||||
t("virtualApiKeysEmailIdentityErrorDescription")
|
||||
)
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Credenza
|
||||
open={open}
|
||||
onOpenChange={(val) => {
|
||||
setOpen(val);
|
||||
if (!val) {
|
||||
resetState();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CredenzaContent>
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>
|
||||
{t("virtualApiKeysEmailIdentity")}
|
||||
</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{t("virtualApiKeysEmailIdentityDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-2">
|
||||
<Checkbox
|
||||
id="email-identity-send-all"
|
||||
checked={sendToAll}
|
||||
onCheckedChange={(val) =>
|
||||
setSendToAll(val === true)
|
||||
}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<label
|
||||
htmlFor="email-identity-send-all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{t("virtualApiKeysEmailIdentitySendAll")}
|
||||
</label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(
|
||||
"virtualApiKeysEmailIdentitySendAllDescription"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
{t("virtualApiKeysEmailIdentitySelectUsers")}
|
||||
</Label>
|
||||
<UsersSelector
|
||||
orgId={orgId}
|
||||
selectedUsers={selectedUsers}
|
||||
onSelectUsers={setSelectedUsers}
|
||||
disabled={sendToAll}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
{t("virtualApiKeysEmailIdentitySelectRoles")}
|
||||
</Label>
|
||||
<RolesSelector
|
||||
orgId={orgId}
|
||||
selectedRoles={selectedRoles}
|
||||
onSelectRoles={setSelectedRoles}
|
||||
disabled={sendToAll}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button variant="outline">{t("close")}</Button>
|
||||
</CredenzaClose>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onSubmit}
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
{t("virtualApiKeysEmailIdentitySubmit")}
|
||||
</Button>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionFooter
|
||||
} from "@app/components/Settings";
|
||||
import EmailIdentityKeysForm from "@app/components/EmailIdentityKeysForm";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { formatVirtualApiKeyCredential } from "@app/lib/virtualApiKeyFormat";
|
||||
import { ArrowRight, ExternalLink, Globe, KeyRound, Mail } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
const EXAMPLE_IDENTITY_KEY = formatVirtualApiKeyCredential(
|
||||
"k7m2n9qx",
|
||||
"a8f3c1e0b5d24791"
|
||||
);
|
||||
|
||||
type IdentityKeysSplashProps = {
|
||||
orgId: string;
|
||||
};
|
||||
|
||||
export default function IdentityKeysSplash({ orgId }: IdentityKeysSplashProps) {
|
||||
const t = useTranslations();
|
||||
const { env } = useEnvContext();
|
||||
const [emailOpen, setEmailOpen] = useState(false);
|
||||
const emailEnabled = env.email.emailEnabled;
|
||||
|
||||
const dashboardUrl = env.app.dashboardUrl?.replace(/\/$/, "") ?? "";
|
||||
const keysPath = `/${orgId}/keys`;
|
||||
const keysUrl = dashboardUrl ? `${dashboardUrl}${keysPath}` : keysPath;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSection>
|
||||
<SettingsSectionBody>
|
||||
<div className="flex flex-col items-center text-center py-6 md:py-10 px-2">
|
||||
<KeyRound className="h-8 w-8 text-primary" />
|
||||
<h2 className="mt-4 text-2xl font-semibold tracking-tight max-w-xl">
|
||||
{t("virtualApiKeysIdentitySplashTitle")}
|
||||
</h2>
|
||||
<p className="mt-3 text-sm text-muted-foreground max-w-lg">
|
||||
{t("virtualApiKeysIdentitySplashDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-8 w-full max-w-lg text-left space-y-3">
|
||||
<p className="text-sm font-medium text-center">
|
||||
{t("virtualApiKeysIdentitySplashRetrieveTitle")}
|
||||
</p>
|
||||
<ul className="text-sm text-muted-foreground space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<Globe className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||||
<span>
|
||||
{t(
|
||||
"virtualApiKeysIdentitySplashRetrieveResource"
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ExternalLink className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
||||
<span>
|
||||
{t.rich(
|
||||
"virtualApiKeysIdentitySplashRetrievePage",
|
||||
{
|
||||
url: () => (
|
||||
<Link
|
||||
href={keysPath}
|
||||
className="font-medium text-foreground underline underline-offset-4 break-all"
|
||||
>
|
||||
{keysUrl}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-sm text-muted-foreground max-w-lg">
|
||||
{t("virtualApiKeysIdentitySplashManual")}
|
||||
</p>
|
||||
{!emailEnabled && (
|
||||
<p className="mt-3 text-sm text-muted-foreground max-w-lg">
|
||||
{t(
|
||||
"virtualApiKeysEmailSmtpRequiredDescription"
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</SettingsSectionBody>
|
||||
<SettingsSectionFooter className="justify-center md:justify-center">
|
||||
<Button
|
||||
disabled={!emailEnabled}
|
||||
onClick={() => setEmailOpen(true)}
|
||||
>
|
||||
{t("virtualApiKeysEmailIdentity")}
|
||||
</Button>
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/${orgId}/settings/virtual-api-keys/keys`}>
|
||||
{t("virtualApiKeysIdentitySplashGoToVirtual")}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</SettingsSectionFooter>
|
||||
</SettingsSection>
|
||||
<EmailIdentityKeysForm
|
||||
orgId={orgId}
|
||||
open={emailOpen}
|
||||
setOpen={setEmailOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { ArrowRight, KeyRound } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import DismissableBanner from "./DismissableBanner";
|
||||
|
||||
type VirtualApiKeysBannerProps = {
|
||||
orgId: string;
|
||||
};
|
||||
|
||||
export const VirtualApiKeysBanner = ({ orgId }: VirtualApiKeysBannerProps) => {
|
||||
const t = useTranslations();
|
||||
const { env } = useEnvContext();
|
||||
|
||||
const dashboardUrl = env.app.dashboardUrl?.replace(/\/$/, "") ?? "";
|
||||
const keysUrl = dashboardUrl
|
||||
? `${dashboardUrl}/${orgId}/keys`
|
||||
: `/${orgId}/keys`;
|
||||
|
||||
return (
|
||||
<DismissableBanner
|
||||
storageKey="virtual-api-keys-banner-dismissed"
|
||||
version={1}
|
||||
title={t("virtualApiKeysBannerTitle")}
|
||||
titleIcon={<KeyRound className="w-5 h-5 text-primary" />}
|
||||
description={t("virtualApiKeysBannerDescription", { keysUrl })}
|
||||
>
|
||||
<Link href={`/${orgId}/keys`}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
|
||||
>
|
||||
{t("virtualApiKeysBannerButtonText")}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</DismissableBanner>
|
||||
);
|
||||
};
|
||||
|
||||
export default VirtualApiKeysBanner;
|
||||
Reference in New Issue
Block a user