option to send identity keys in email

2026-08-15 08:49:59 +02:00 · 2026-08-14 17:37:17 -04:00
parent a3dfb30a42
commit 53b1d8a9f3
17 changed files with 942 additions and 205 deletions
@@ -0,0 +1,78 @@
+import React from "react";
+import { Body, Head, Html, Preview, Tailwind } from "@react-email/components";
+import { themeColors } from "./lib/theme";
+import {
+    EmailContainer,
+    EmailFooter,
+    EmailGreeting,
+    EmailHeading,
+    EmailInfoSection,
+    EmailLetterHead,
+    EmailSection,
+    EmailSignature,
+    EmailText
+} from "./components/Email";
+
+type IdentityApiKeyGeneratedProps = {
+    orgName: string;
+    accountLabel?: string | null;
+    credential: string;
+    resourceUrls: string[];
+    hasMoreResources: boolean;
+};
+
+export const IdentityApiKeyGenerated = ({
+    orgName,
+    accountLabel,
+    credential,
+    resourceUrls,
+    hasMoreResources
+}: IdentityApiKeyGeneratedProps) => {
+    const previewText = `Your personal identity key for ${orgName}`;
+
+    return (
+        <Html>
+            <Head />
+            <Preview>{previewText}</Preview>
+            <Tailwind config={themeColors}>
+                <Body className="font-sans bg-gray-50">
+                    <EmailContainer>
+                        <EmailLetterHead />
+
+                        <EmailGreeting>Hi there,</EmailGreeting>
+
+                        <EmailText>
+                            This is your personal identity key for{" "}
+                            <strong>{orgName}</strong>. It belongs to your
+                            account and identifies you when you use public AI
+                            gateways.
+                        </EmailText>
+
+                        <EmailText>
+                            Use it with resources your administrator has granted
+                            you, or that your role has access to. Treat this key
+                            like a password and do not share it.
+                        </EmailText>
+
+                        <EmailSection>
+                            <EmailText>Your identity 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>
+
+                        <EmailFooter>
+                            <EmailSignature />
+                        </EmailFooter>
+                    </EmailContainer>
+                </Body>
+            </Tailwind>
+        </Html>
+    );
+};
+
+export default IdentityApiKeyGenerated;
@@ -42,8 +42,9 @@ export const VirtualApiKeyGenerated = ({

                        <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.
+                            been shared with you. This key grants access to the
+                            public AI gateways it was created for. Treat this
+                            key like a password and do not share it.
                        </EmailText>

                        <EmailSection>
@@ -18,7 +18,7 @@ export function EmailLetterHead() {
            <Img
                src="https://fossorial-public-assets.s3.us-east-1.amazonaws.com/word_mark_black.png"
                alt="Pangolin Logo"
-                width="180"
+                width="135"
                height="auto"
                className="mx-auto"
            />