calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-16 01:09:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

send email upon generate virtual api key

Browse Source
This commit is contained in:
miloschwartz
2026-08-14 16:51:10 -04:00
parent 111d4b1b8c
commit a3dfb30a42
10 changed files with 689 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
messages/en-US.json
+12
View File
@@ -1725,6 +1725,18 @@
"virtualApiKeysFilterUnassigned": "Unassigned", "virtualApiKeysFilterUnassigned": "Unassigned",
"virtualApiKeysInferenceBudget": "Budget", "virtualApiKeysInferenceBudget": "Budget",
"virtualApiKeysInferenceBudgetDescription": "Configure how this key restricts AI usage based on spending or token limits", "virtualApiKeysInferenceBudgetDescription": "Configure how this key restricts AI usage based on spending or token limits",
"virtualApiKeysEmailOnGenerate": "Email key upon generation",
"virtualApiKeysEmailThisKey": "Email this key",
"virtualApiKeysEmailOnGenerateDescription": "Send the key to the associated user and additional addresses after it is created",
"virtualApiKeysEmailThisKeyDescription": "Send the current key to the associated user and additional addresses",
"virtualApiKeysEmailSmtpRequired": "Email is not configured on this server",
"virtualApiKeysEmailSmtpRequiredDescription": "Configure SMTP to email virtual API keys.",
"virtualApiKeysEmailSendToUser": "Send to associated user",
"virtualApiKeysEmailSendToUserDescription": "Email the key to the associated user's account email",
"virtualApiKeysEmailSendToUserDisabled": "Associate a user to send the key to that user",
"virtualApiKeysEmailAdditional": "Additional emails",
"virtualApiKeysEmailAdditionalPlaceholder": "Add email and press Enter",
"virtualApiKeysEmailRecipientsRequired": "Select the associated user or add at least one email address",
"myVirtualApiKeysTitle": "Your API Keys", "myVirtualApiKeysTitle": "Your API Keys",
"myVirtualApiKeysDescription": "View your identity key and any virtual API keys attributed to you in this organization", "myVirtualApiKeysDescription": "View your identity key and any virtual API keys attributed to you in this organization",
"myVirtualApiKeysResourceTitle": "Your API Keys for {resourceName}", "myVirtualApiKeysResourceTitle": "Your API Keys for {resourceName}",
package.json
+2 -2
View File
@@ -166,7 +166,7 @@
"@types/yargs": "17.0.35", "@types/yargs": "17.0.35",
"babel-plugin-react-compiler": "1.0.0", "babel-plugin-react-compiler": "1.0.0",
"drizzle-kit": "0.31.10", "drizzle-kit": "0.31.10",
"esbuild": "0.28.1", "esbuild": "0.28.0",
"esbuild-node-externals": "1.22.0", "esbuild-node-externals": "1.22.0",
"eslint": "10.4.0", "eslint": "10.4.0",
"eslint-config-next": "16.2.6", "eslint-config-next": "16.2.6",
@@ -180,7 +180,7 @@
"typescript-eslint": "8.60.0" "typescript-eslint": "8.60.0"
}, },
"overrides": { "overrides": {
"esbuild": "0.28.1", "esbuild": "0.28.0",
"dompurify": "3.4.0", "dompurify": "3.4.0",
"postcss": "8.5.15" "postcss": "8.5.15"
} }
server/emails/templates/VirtualApiKeyGenerated.tsx
+118
View File
@@ -0,0 +1,118 @@
import React from "react";
import { Body, Head, Html, Preview, Tailwind } from "@react-email/components";
import { themeColors } from "./lib/theme";
import {
EmailContainer,
EmailFooter,
EmailGreeting,
EmailInfoSection,
EmailLetterHead,
EmailSection,
EmailSignature,
EmailText
} from "./components/Email";
type VirtualApiKeyGeneratedProps = {
orgName: string;
keyName: string | null;
credential: string;
resourceUrls: string[];
hasMoreResources: boolean;
};
export const VirtualApiKeyGenerated = ({
orgName,
keyName,
credential,
resourceUrls,
hasMoreResources
}: VirtualApiKeyGeneratedProps) => {
const previewText = `A virtual API key for ${orgName} has been shared with you`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind config={themeColors}>
<Body className="font-sans bg-gray-50">
<EmailContainer>
<EmailLetterHead />
<EmailGreeting>Hi there,</EmailGreeting>
<EmailText>
A virtual API key for <strong>{orgName}</strong> has
been shared with you. Treat this key like a password
and do not share it.
</EmailText>
<EmailSection>
<EmailText>Your virtual API key:</EmailText>
<div className="inline-block max-w-full">
<div className="bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 mx-auto text-left">
<span className="text-sm font-mono text-gray-900 break-all">
{credential}
</span>
</div>
</div>
</EmailSection>
<EmailInfoSection
title="Key details"
items={[
{
label: "Organization",
value: orgName
},
...(keyName
? [
{
label: "Name",
value: keyName
}
]
: [])
]}
/>
{resourceUrls.length > 0 && (
<>
<EmailText>
This key can be used to authenticate to the
following AI gateway resources:
</EmailText>
<div className="px-6 pb-2">
{resourceUrls.map((url) => (
<p
key={url}
className="text-base text-gray-700 leading-relaxed"
>
<a
href={url}
className="text-primary font-medium break-all"
>
{url}
</a>
</p>
))}
</div>
{hasMoreResources && (
<EmailText>
Contact your administrator to get the
full list.
</EmailText>
)}
</>
)}
<EmailFooter>
<EmailSignature />
</EmailFooter>
</EmailContainer>
</Body>
</Tailwind>
</Html>
);
};
export default VirtualApiKeyGenerated;
server/lib/sendVirtualApiKeyEmail.ts
+161
View File
@@ -0,0 +1,161 @@
import { db, resources, users, virtualApiKeyResources } from "@server/db";
import { and, asc, eq } from "drizzle-orm";
import config from "@server/lib/config";
import { sendEmail } from "@server/emails";
import VirtualApiKeyGenerated from "@server/emails/templates/VirtualApiKeyGenerated";
import { formatVirtualApiKeyCredential } from "@server/lib/virtualApiKey";
const EMAIL_GATEWAY_URL_LIMIT = 5;
async function listVirtualApiKeyGatewayUrls(params: {
orgId: string;
allResources: boolean;
virtualApiKeyId: string;
}): Promise<{ urls: string[]; hasMore: boolean }> {
const rows = params.allResources
? await db
.select({
fullDomain: resources.fullDomain,
ssl: resources.ssl
})
.from(resources)
.where(
and(
eq(resources.orgId, params.orgId),
eq(resources.mode, "inference")
)
)
.orderBy(asc(resources.name))
.limit(EMAIL_GATEWAY_URL_LIMIT + 1)
: await db
.select({
fullDomain: resources.fullDomain,
ssl: resources.ssl
})
.from(virtualApiKeyResources)
.innerJoin(
resources,
eq(virtualApiKeyResources.resourceId, resources.resourceId)
)
.where(
eq(
virtualApiKeyResources.virtualApiKeyId,
params.virtualApiKeyId
)
)
.orderBy(asc(resources.name))
.limit(EMAIL_GATEWAY_URL_LIMIT + 1);
const urls = rows
.map((row) =>
row.fullDomain
? `${row.ssl ? "https" : "http"}://${row.fullDomain}`
: null
)
.filter((url): url is string => Boolean(url));
return {
urls: urls.slice(0, EMAIL_GATEWAY_URL_LIMIT),
hasMore: rows.length > EMAIL_GATEWAY_URL_LIMIT
};
}
export async function resolveVirtualApiKeyEmailRecipients(params: {
sendEmail: boolean;
sendToAttributedUser: boolean;
userId: string | null | undefined;
emails: string[];
}): Promise<
{ ok: true; recipients: string[] } | { ok: false; message: string }
> {
if (!params.sendEmail) {
return { ok: true, recipients: [] };
}
if (!config.getRawConfig().email) {
return {
ok: false,
message: "Email is not configured on this server"
};
}
const recipients = new Set(
params.emails.map((email) => email.trim().toLowerCase()).filter(Boolean)
);
if (params.sendToAttributedUser) {
if (!params.userId) {
return {
ok: false,
message: "Associate a user to email the key to that user"
};
}
const [user] = await db
.select({ email: users.email })
.from(users)
.where(eq(users.userId, params.userId))
.limit(1);
if (!user?.email) {
return {
ok: false,
message: "The associated user does not have an email address"
};
}
recipients.add(user.email.toLowerCase());
}
if (recipients.size === 0) {
return {
ok: false,
message: "Select at least one email recipient"
};
}
return { ok: true, recipients: [...recipients] };
}
export async function sendVirtualApiKeyEmails(params: {
recipients: string[];
orgName: string;
orgId: string;
keyName: string | null;
virtualApiKeyId: string;
secret: string;
allResources: boolean;
}): Promise<void> {
if (params.recipients.length === 0) {
return;
}
const credential = formatVirtualApiKeyCredential(
params.virtualApiKeyId,
params.secret
);
const { urls, hasMore } = await listVirtualApiKeyGatewayUrls({
orgId: params.orgId,
allResources: params.allResources,
virtualApiKeyId: params.virtualApiKeyId
});
const from = config.getNoReplyEmail();
const subject = `Virtual API key for ${params.orgName}`;
for (const to of params.recipients) {
await sendEmail(
VirtualApiKeyGenerated({
orgName: params.orgName,
keyName: params.keyName,
credential,
resourceUrls: urls,
hasMoreResources: hasMore
}),
{
to,
from,
subject
}
);
}
}
server/routers/virtualApiKey/createVirtualApiKey.ts
+39 -2
View File
@@ -1,6 +1,6 @@
import { Request, Response, NextFunction } from "express"; import { Request, Response, NextFunction } from "express";
import { z } from "zod"; import { z } from "zod";
import { db, userOrgs, virtualApiKeys } from "@server/db"; import { db, orgs, userOrgs, virtualApiKeys } from "@server/db";
import response from "@server/lib/response"; import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode"; import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors"; import createHttpError from "http-errors";
@@ -18,6 +18,10 @@ import {
} from "@server/lib/virtualApiKey"; } from "@server/lib/virtualApiKey";
import type { CreateOrEditVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types"; import type { CreateOrEditVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types";
import { createVirtualApiKeyBodySchema } from "@server/routers/virtualApiKey/validation"; import { createVirtualApiKeyBodySchema } from "@server/routers/virtualApiKey/validation";
import {
resolveVirtualApiKeyEmailRecipients,
sendVirtualApiKeyEmails
} from "@server/lib/sendVirtualApiKeyEmail";
const paramsSchema = z.strictObject({ const paramsSchema = z.strictObject({
orgId: z.string().nonempty() orgId: z.string().nonempty()
@@ -78,7 +82,10 @@ export async function createVirtualApiKey(
userId, userId,
allResources, allResources,
resourceIds, resourceIds,
validForSeconds validForSeconds,
sendEmail: doEmail,
sendToAttributedUser,
emails
} = parsedBody.data; } = parsedBody.data;
if (req.user && orgId && orgId !== req.userOrgId) { if (req.user && orgId && orgId !== req.userOrgId) {
@@ -121,6 +128,18 @@ export async function createVirtualApiKey(
); );
} }
const emailRecipients = await resolveVirtualApiKeyEmailRecipients({
sendEmail: doEmail,
sendToAttributedUser,
userId,
emails
});
if (!emailRecipients.ok) {
return next(
createHttpError(HttpCode.BAD_REQUEST, emailRecipients.message)
);
}
const minted = mintVirtualApiKeySecret(); const minted = mintVirtualApiKeySecret();
const expiresAt = validForSeconds const expiresAt = validForSeconds
? createDate(new TimeSpan(validForSeconds, "s")).getTime() ? createDate(new TimeSpan(validForSeconds, "s")).getTime()
@@ -156,6 +175,24 @@ export async function createVirtualApiKey(
return row; return row;
}); });
if (emailRecipients.recipients.length > 0) {
const [org] = await db
.select()
.from(orgs)
.where(eq(orgs.orgId, orgId))
.limit(1);
await sendVirtualApiKeyEmails({
recipients: emailRecipients.recipients,
orgName: org?.name || orgId,
orgId,
keyName: created.name,
virtualApiKeyId: created.virtualApiKeyId,
secret: minted.secret,
allResources: created.allResources
});
}
return response<CreateOrEditVirtualApiKeyResponse>(res, { return response<CreateOrEditVirtualApiKeyResponse>(res, {
data: { data: {
virtualApiKey: { virtualApiKey: {
server/routers/virtualApiKey/updateVirtualApiKey.ts
+38
View File
@@ -2,6 +2,7 @@ import { Request, Response, NextFunction } from "express";
import { z } from "zod"; import { z } from "zod";
import { import {
db, db,
orgs,
userOrgs, userOrgs,
virtualApiKeyResources, virtualApiKeyResources,
virtualApiKeys virtualApiKeys
@@ -16,11 +17,16 @@ import { and, eq } from "drizzle-orm";
import { createDate, TimeSpan } from "oslo"; import { createDate, TimeSpan } from "oslo";
import { import {
assertManualKeyResourcesInOrg, assertManualKeyResourcesInOrg,
decryptVirtualApiKeyToken,
replaceVirtualApiKeyResources, replaceVirtualApiKeyResources,
toPublicVirtualApiKey toPublicVirtualApiKey
} from "@server/lib/virtualApiKey"; } from "@server/lib/virtualApiKey";
import type { CreateOrEditVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types"; import type { CreateOrEditVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types";
import { updateVirtualApiKeyBodySchema } from "@server/routers/virtualApiKey/validation"; import { updateVirtualApiKeyBodySchema } from "@server/routers/virtualApiKey/validation";
import {
resolveVirtualApiKeyEmailRecipients,
sendVirtualApiKeyEmails
} from "@server/lib/sendVirtualApiKeyEmail";
const paramsSchema = z.strictObject({ const paramsSchema = z.strictObject({
virtualApiKeyId: z.string().nonempty() virtualApiKeyId: z.string().nonempty()
@@ -146,6 +152,20 @@ export async function updateVirtualApiKey(
} }
} }
const nextUserId =
body.userId !== undefined ? body.userId : existing.userId;
const emailRecipients = await resolveVirtualApiKeyEmailRecipients({
sendEmail: body.sendEmail,
sendToAttributedUser: body.sendToAttributedUser,
userId: nextUserId,
emails: body.emails
});
if (!emailRecipients.ok) {
return next(
createHttpError(HttpCode.BAD_REQUEST, emailRecipients.message)
);
}
const updates: Partial<typeof virtualApiKeys.$inferInsert> = {}; const updates: Partial<typeof virtualApiKeys.$inferInsert> = {};
if (body.name !== undefined) { if (body.name !== undefined) {
@@ -192,6 +212,24 @@ export async function updateVirtualApiKey(
return row; return row;
}); });
if (emailRecipients.recipients.length > 0) {
const [org] = await db
.select()
.from(orgs)
.where(eq(orgs.orgId, existing.orgId))
.limit(1);
await sendVirtualApiKeyEmails({
recipients: emailRecipients.recipients,
orgName: org?.name || existing.orgId,
orgId: existing.orgId,
keyName: updated.name,
virtualApiKeyId: updated.virtualApiKeyId,
secret: decryptVirtualApiKeyToken(updated.token),
allResources: updated.allResources
});
}
const resourceRows = await db const resourceRows = await db
.select({ resourceId: virtualApiKeyResources.resourceId }) .select({ resourceId: virtualApiKeyResources.resourceId })
.from(virtualApiKeyResources) .from(virtualApiKeyResources)
server/routers/virtualApiKey/validation.ts
+65 -10
View File
@@ -4,6 +4,43 @@ export const virtualApiKeyResourceIdsSchema = z
.array(z.coerce.number().int().positive()) .array(z.coerce.number().int().positive())
.optional(); .optional();
const virtualApiKeyEmailFieldsSchema = {
sendEmail: z.boolean().optional().default(false),
sendToAttributedUser: z.boolean().optional().default(false),
emails: z.array(z.email().toLowerCase()).max(20).optional().default([])
};
function refineVirtualApiKeyEmailFields(
data: {
sendEmail: boolean;
sendToAttributedUser: boolean;
emails: string[];
userId?: string | null;
},
ctx: z.RefinementCtx
) {
if (!data.sendEmail) {
return;
}
if (!data.sendToAttributedUser && data.emails.length === 0) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message:
"Select the associated user or add at least one email address",
path: ["sendEmail"]
});
}
if (data.sendToAttributedUser && !data.userId) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Associate a user to email the key to that user",
path: ["sendToAttributedUser"]
});
}
}
export const createVirtualApiKeyBodySchema = z export const createVirtualApiKeyBodySchema = z
.strictObject({ .strictObject({
name: z.string().nonempty(), name: z.string().nonempty(),
@@ -11,7 +48,8 @@ export const createVirtualApiKeyBodySchema = z
userId: z.string().optional().nullable(), userId: z.string().optional().nullable(),
allResources: z.boolean().optional().default(false), allResources: z.boolean().optional().default(false),
resourceIds: virtualApiKeyResourceIdsSchema, resourceIds: virtualApiKeyResourceIdsSchema,
validForSeconds: z.int().positive().optional() validForSeconds: z.int().positive().optional(),
...virtualApiKeyEmailFieldsSchema
}) })
.refine( .refine(
(data) => data.allResources || (data.resourceIds?.length ?? 0) > 0, (data) => data.allResources || (data.resourceIds?.length ?? 0) > 0,
@@ -20,13 +58,30 @@ export const createVirtualApiKeyBodySchema = z
"Select at least one public inference resource, or enable all public inference resources", "Select at least one public inference resource, or enable all public inference resources",
path: ["resourceIds"] path: ["resourceIds"]
} }
); )
.superRefine(refineVirtualApiKeyEmailFields);
export const updateVirtualApiKeyBodySchema = z.strictObject({ export const updateVirtualApiKeyBodySchema = z
name: z.string().nonempty().optional(), .strictObject({
description: z.string().optional().nullable(), name: z.string().nonempty().optional(),
userId: z.string().optional().nullable(), description: z.string().optional().nullable(),
allResources: z.boolean().optional(), userId: z.string().optional().nullable(),
resourceIds: virtualApiKeyResourceIdsSchema, allResources: z.boolean().optional(),
validForSeconds: z.int().positive().optional().nullable() resourceIds: virtualApiKeyResourceIdsSchema,
}); validForSeconds: z.int().positive().optional().nullable(),
...virtualApiKeyEmailFieldsSchema
})
.superRefine((data, ctx) => {
if (!data.sendEmail) {
return;
}
if (!data.sendToAttributedUser && data.emails.length === 0) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message:
"Select the associated user or add at least one email address",
path: ["sendEmail"]
});
}
});
src/components/CreateVirtualApiKeyForm.tsx
+53 -2
View File
@@ -54,6 +54,8 @@ import {
getBudgetRowsErrors, getBudgetRowsErrors,
type BudgetRow type BudgetRow
} from "@app/components/BudgetsEditor"; } from "@app/components/BudgetsEditor";
import VirtualApiKeyEmailSection from "@app/components/VirtualApiKeyEmailSection";
import type { Tag } from "@app/components/tags/tag-input";
export type CreatedVirtualApiKey = { export type CreatedVirtualApiKey = {
virtualApiKeyId: string; virtualApiKeyId: string;
@@ -101,6 +103,9 @@ export default function CreateVirtualApiKeyForm({
>([]); >([]);
const [pendingBudgetRows, setPendingBudgetRows] = useState<BudgetRow[]>([]); const [pendingBudgetRows, setPendingBudgetRows] = useState<BudgetRow[]>([]);
const [attemptedBudgetsSave, setAttemptedBudgetsSave] = useState(false); const [attemptedBudgetsSave, setAttemptedBudgetsSave] = useState(false);
const [sendEmail, setSendEmail] = useState(false);
const [sendToAttributedUser, setSendToAttributedUser] = useState(false);
const [emailTags, setEmailTags] = useState<Tag[]>([]);
const formSchema = z.object({ const formSchema = z.object({
name: z.string().min(1), name: z.string().min(1),
@@ -123,6 +128,9 @@ export default function CreateVirtualApiKeyForm({
setSelectedResources([]); setSelectedResources([]);
setPendingBudgetRows([]); setPendingBudgetRows([]);
setAttemptedBudgetsSave(false); setAttemptedBudgetsSave(false);
setSendEmail(false);
setSendToAttributedUser(false);
setEmailTags([]);
form.reset(); form.reset();
} }
@@ -141,6 +149,20 @@ export default function CreateVirtualApiKeyForm({
return; return;
} }
if (
env.email.emailEnabled &&
sendEmail &&
!sendToAttributedUser &&
emailTags.length === 0
) {
toast({
variant: "destructive",
title: t("virtualApiKeysEmailRecipientsRequired"),
description: t("virtualApiKeysEmailRecipientsRequired")
});
return;
}
return onSubmit(values); return onSubmit(values);
} }
@@ -157,7 +179,16 @@ export default function CreateVirtualApiKeyForm({
allResources, allResources,
resourceIds: allResources resourceIds: allResources
? [] ? []
: selectedResources.map((r) => r.resourceId) : selectedResources.map((r) => r.resourceId),
sendEmail: env.email.emailEnabled && sendEmail,
sendToAttributedUser:
env.email.emailEnabled &&
sendEmail &&
sendToAttributedUser,
emails:
env.email.emailEnabled && sendEmail
? emailTags.map((tag) => tag.text)
: []
} }
) )
.catch((e) => { .catch((e) => {
@@ -473,6 +504,26 @@ export default function CreateVirtualApiKeyForm({
</div> </div>
)} )}
</div> </div>
<VirtualApiKeyEmailSection
emailEnabled={
env.email.emailEnabled
}
mode="create"
sendEmail={sendEmail}
onSendEmailChange={setSendEmail}
sendToAttributedUser={
sendToAttributedUser
}
onSendToAttributedUserChange={
setSendToAttributedUser
}
hasAssociatedUser={
!!selectedUser
}
emailTags={emailTags}
onEmailTagsChange={setEmailTags}
/>
</div> </div>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
@@ -505,7 +556,7 @@ export default function CreateVirtualApiKeyForm({
</CredenzaClose> </CredenzaClose>
<Button <Button
type="button" type="button"
onClick={form.handleSubmit(onSubmit)} onClick={form.handleSubmit(handleFormSubmit)}
loading={loading} loading={loading}
disabled={credential !== null || loading} disabled={credential !== null || loading}
> >
src/components/EditVirtualApiKeyForm.tsx
+50 -1
View File
@@ -60,6 +60,8 @@ import {
} from "@app/components/BudgetsEditor"; } from "@app/components/BudgetsEditor";
import { aiBudgetQueries } from "@app/lib/queries"; import { aiBudgetQueries } from "@app/lib/queries";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import VirtualApiKeyEmailSection from "@app/components/VirtualApiKeyEmailSection";
import type { Tag } from "@app/components/tags/tag-input";
type FormProps = { type FormProps = {
open: boolean; open: boolean;
@@ -114,6 +116,9 @@ export default function EditVirtualApiKeyForm({
const [credentialLoading, setCredentialLoading] = useState(false); const [credentialLoading, setCredentialLoading] = useState(false);
const [pendingBudgetRows, setPendingBudgetRows] = useState<BudgetRow[]>([]); const [pendingBudgetRows, setPendingBudgetRows] = useState<BudgetRow[]>([]);
const [attemptedBudgetsSave, setAttemptedBudgetsSave] = useState(false); const [attemptedBudgetsSave, setAttemptedBudgetsSave] = useState(false);
const [sendEmail, setSendEmail] = useState(false);
const [sendToAttributedUser, setSendToAttributedUser] = useState(false);
const [emailTags, setEmailTags] = useState<Tag[]>([]);
const budgetScope = { const budgetScope = {
type: "virtualApiKey" as const, type: "virtualApiKey" as const,
@@ -156,6 +161,9 @@ export default function EditVirtualApiKeyForm({
setSelectedResources( setSelectedResources(
virtualApiKey.allResources ? [] : resourcesFromRow(virtualApiKey) virtualApiKey.allResources ? [] : resourcesFromRow(virtualApiKey)
); );
setSendEmail(false);
setSendToAttributedUser(false);
setEmailTags([]);
form.reset({ form.reset({
allResources: virtualApiKey.allResources allResources: virtualApiKey.allResources
}); });
@@ -236,6 +244,20 @@ export default function EditVirtualApiKeyForm({
return; return;
} }
if (
env.email.emailEnabled &&
sendEmail &&
!sendToAttributedUser &&
emailTags.length === 0
) {
toast({
variant: "destructive",
title: t("virtualApiKeysEmailRecipientsRequired"),
description: t("virtualApiKeysEmailRecipientsRequired")
});
return;
}
return onSubmit(values); return onSubmit(values);
} }
@@ -254,7 +276,16 @@ export default function EditVirtualApiKeyForm({
allResources: values.allResources, allResources: values.allResources,
resourceIds: values.allResources resourceIds: values.allResources
? [] ? []
: selectedResources.map((r) => r.resourceId) : selectedResources.map((r) => r.resourceId),
sendEmail: env.email.emailEnabled && sendEmail,
sendToAttributedUser:
env.email.emailEnabled &&
sendEmail &&
sendToAttributedUser,
emails:
env.email.emailEnabled && sendEmail
? emailTags.map((tag) => tag.text)
: []
} }
) )
.catch((e) => { .catch((e) => {
@@ -521,6 +552,24 @@ export default function EditVirtualApiKeyForm({
</div> </div>
)} )}
</div> </div>
<VirtualApiKeyEmailSection
emailEnabled={
env.email.emailEnabled
}
mode="edit"
sendEmail={sendEmail}
onSendEmailChange={setSendEmail}
sendToAttributedUser={
sendToAttributedUser
}
onSendToAttributedUserChange={
setSendToAttributedUser
}
hasAssociatedUser={!!selectedUser}
emailTags={emailTags}
onEmailTagsChange={setEmailTags}
/>
</div> </div>
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
src/components/VirtualApiKeyEmailSection.tsx
+151
View File
@@ -0,0 +1,151 @@
"use client";
import { useEffect, useState } from "react";
import { Checkbox } from "@app/components/ui/checkbox";
import { FormLabel } from "@app/components/ui/form";
import { TagInput, type Tag } from "@app/components/tags/tag-input";
import { useTranslations } from "next-intl";
type VirtualApiKeyEmailSectionProps = {
emailEnabled: boolean;
mode: "create" | "edit";
sendEmail: boolean;
onSendEmailChange: (value: boolean) => void;
sendToAttributedUser: boolean;
onSendToAttributedUserChange: (value: boolean) => void;
hasAssociatedUser: boolean;
emailTags: Tag[];
onEmailTagsChange: (tags: Tag[]) => void;
};
export default function VirtualApiKeyEmailSection({
emailEnabled,
mode,
sendEmail,
onSendEmailChange,
sendToAttributedUser,
onSendToAttributedUserChange,
hasAssociatedUser,
emailTags,
onEmailTagsChange
}: VirtualApiKeyEmailSectionProps) {
const t = useTranslations();
const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
number | null
>(null);
useEffect(() => {
if (!hasAssociatedUser && sendToAttributedUser) {
onSendToAttributedUserChange(false);
}
}, [hasAssociatedUser, sendToAttributedUser, onSendToAttributedUserChange]);
const checkboxId =
mode === "create"
? "virtual-api-key-send-email"
: "edit-virtual-api-key-send-email";
const sendToUserId =
mode === "create"
? "virtual-api-key-send-to-user"
: "edit-virtual-api-key-send-to-user";
return (
<div className="space-y-3">
<div className="flex items-start space-x-2">
<Checkbox
id={checkboxId}
checked={emailEnabled ? sendEmail : false}
disabled={!emailEnabled}
onCheckedChange={(val) => {
if (emailEnabled) {
onSendEmailChange(val === true);
}
}}
className="mt-0.5"
/>
<div className="space-y-1">
<label
htmlFor={checkboxId}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t(
mode === "create"
? "virtualApiKeysEmailOnGenerate"
: "virtualApiKeysEmailThisKey"
)}
</label>
<p className="text-sm text-muted-foreground">
{emailEnabled
? t(
mode === "create"
? "virtualApiKeysEmailOnGenerateDescription"
: "virtualApiKeysEmailThisKeyDescription"
)
: t("virtualApiKeysEmailSmtpRequiredDescription")}
</p>
</div>
</div>
{emailEnabled && sendEmail && (
<div className="space-y-4 pl-6">
<div className="flex items-start space-x-2">
<Checkbox
id={sendToUserId}
checked={sendToAttributedUser}
disabled={!hasAssociatedUser}
onCheckedChange={(val) =>
onSendToAttributedUserChange(val === true)
}
className="mt-0.5"
/>
<div className="space-y-1">
<label
htmlFor={sendToUserId}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{t("virtualApiKeysEmailSendToUser")}
</label>
<p className="text-sm text-muted-foreground">
{hasAssociatedUser
? t(
"virtualApiKeysEmailSendToUserDescription"
)
: t(
"virtualApiKeysEmailSendToUserDisabled"
)}
</p>
</div>
</div>
<div className="space-y-2">
<FormLabel>
{t("virtualApiKeysEmailAdditional")}
</FormLabel>
<TagInput
activeTagIndex={activeEmailTagIndex}
setActiveTagIndex={setActiveEmailTagIndex}
placeholder={t(
"virtualApiKeysEmailAdditionalPlaceholder"
)}
size="sm"
tags={emailTags}
setTags={(newTags) => {
const next =
typeof newTags === "function"
? newTags(emailTags)
: newTags;
onEmailTagsChange(next as Tag[]);
}}
allowDuplicates={false}
sortTags
validateTag={(tag) =>
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag)
}
delimiterList={[",", "Enter"]}
/>
</div>
</div>
)}
</div>
);
}