calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-19 10:42:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

option to send identity keys in email

Browse Source
This commit is contained in:
miloschwartz
2026-08-14 17:37:17 -04:00
parent a3dfb30a42
commit 53b1d8a9f3
17 changed files with 942 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/EmailIdentityKeysForm.tsx
+192
View File
@@ -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>
);
}
src/components/IdentityKeysSplash.tsx
+117
View File
@@ -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}
/>
</>
);
}
src/components/VirtualApiKeysBanner.tsx
-45
View File
@@ -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;