awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 13:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4284 from Infisical/simplify-email-design

Browse Source 
improvement(email-templates): simplify email design, refactor link/button to re-usable components and improve design
This commit is contained in:
Scott Wilson
2025-08-01 18:48:53 -07:00
committed by GitHub
parent 24004084f2 9fbdede82c
commit ff5dbe74fd
28 changed files with 184 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/services/smtp/emails/AccessApprovalRequestTemplate.tsx
+9 -15
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface AccessApprovalRequestTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface AccessApprovalRequestTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
projectName: string; projectName: string;
@@ -38,18 +40,15 @@ export const AccessApprovalRequestTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
You have a new access approval request pending review for the project <strong>{projectName}</strong> You have a new access approval request pending review for the project <strong>{projectName}</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
<strong>{requesterFullName}</strong> ( <strong>{requesterFullName}</strong> (<BaseLink href={`mailto:${requesterEmail}`}>{requesterEmail}</BaseLink>)
<Link href={`mailto:${requesterEmail}`} className="text-slate-700 no-underline"> has requested {isTemporary ? "temporary" : "permanent"} access to <strong>{secretPath}</strong> in the{" "}
{requesterEmail}
</Link>
) has requested {isTemporary ? "temporary" : "permanent"} access to <strong>{secretPath}</strong> in the{" "}
<strong>{environment}</strong> environment. <strong>{environment}</strong> environment.
</Text> </Text>
{isTemporary && ( {isTemporary && (
<Text className="text-[14px] text-red-500 leading-[24px]"> <Text className="text-[14px] text-red-600 leading-[24px]">
<strong>This access will expire {expiresIn} after approval.</strong> <strong>This access will expire {expiresIn} after approval.</strong>
</Text> </Text>
)} )}
@@ -67,13 +66,8 @@ export const AccessApprovalRequestTemplate = ({
</Text> </Text>
)} )}
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={approvalUrl}>Review Request</BaseButton>
href={approvalUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Review Request
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/BaseButton.tsx
+17
View File
@@ -0,0 +1,17 @@
import { Button } from "@react-email/components";
type Props = {
href: string;
children: string;
};
export const BaseButton = ({ href, children }: Props) => {
return (
<Button
href={href}
className="rounded-[8px] py-[12px] px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
{children}
</Button>
);
};
backend/src/services/smtp/emails/BaseEmailWrapper.tsx
+9 -11
View File
@@ -16,23 +16,21 @@ export const BaseEmailWrapper = ({ title, preview, children, siteUrl }: BaseEmai
<Body className="bg-gray-300 my-auto mx-auto font-sans px-[8px] py-[4px]"> <Body className="bg-gray-300 my-auto mx-auto font-sans px-[8px] py-[4px]">
<Preview>{preview}</Preview> <Preview>{preview}</Preview>
<Container className="bg-white rounded-xl my-[40px] mx-auto pb-[0px] max-w-[500px]"> <Container className="bg-white rounded-xl my-[40px] mx-auto pb-[0px] max-w-[500px]">
<Section className="border-0 border-b border-[#d1e309] border-solid bg-[#EBF852] mb-[44px] h-[10px] rounded-t-xl" /> <Section className="mb-[24px] px-[24px] mt-[24px]">
<Section className="px-[32px] mb-[18px]"> <Img
<Section className="w-[48px] h-[48px] border border-solid border-gray-300 rounded-full bg-gray-100 mx-auto"> src="https://infisical.com/_next/image?url=%2Fimages%2Flogo-black.png&w=64&q=75"
<Img width="36"
src={`https://infisical.com/_next/image?url=%2Fimages%2Flogo-black.png&w=64&q=75`} alt="Infisical Logo"
width="32" className="mx-auto"
alt="Infisical Logo" />
className="mx-auto"
/>
</Section>
</Section> </Section>
<Hr className=" mb-[32px] mt-[0px] h-[1px]" />
<Section className="px-[28px]">{children}</Section> <Section className="px-[28px]">{children}</Section>
<Hr className=" mt-[32px] mb-[0px] h-[1px]" /> <Hr className=" mt-[32px] mb-[0px] h-[1px]" />
<Section className="px-[24px] text-center"> <Section className="px-[24px] text-center">
<Text className="text-gray-500 text-[12px]"> <Text className="text-gray-500 text-[12px]">
Email sent via{" "} Email sent via{" "}
<Link href={siteUrl} className="text-slate-700 no-underline"> <Link href={siteUrl} className="text-slate-700 underline decoration-slate-700">
Infisical Infisical
</Link> </Link>
</Text> </Text>
backend/src/services/smtp/emails/BaseLink.tsx
+15
View File
@@ -0,0 +1,15 @@
import { Link } from "@react-email/components";
import React from "react";
type Props = {
href: string;
children: string;
};
export const BaseLink = ({ href, children }: Props) => {
return (
<Link href={href} className="text-slate-700 underline decoration-slate-700">
{children}
</Link>
);
};
backend/src/services/smtp/emails/EmailMfaTemplate.tsx
+3 -6
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface EmailMfaTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface EmailMfaTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
code: string; code: string;
@@ -25,11 +26,7 @@ export const EmailMfaTemplate = ({ code, siteUrl, isCloud }: EmailMfaTemplatePro
<strong>Not you?</strong>{" "} <strong>Not you?</strong>{" "}
{isCloud ? ( {isCloud ? (
<> <>
Contact us at{" "} Contact us at <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink> immediately
<Link href="mailto:[email protected]" className="text-slate-700 no-underline">
support@infisical.com
</Link>{" "}
immediately
</> </>
) : ( ) : (
"Contact your administrator immediately" "Contact your administrator immediately"
backend/src/services/smtp/emails/EmailVerificationTemplate.tsx
+3 -5
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface EmailVerificationTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface EmailVerificationTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
code: string; code: string;
@@ -29,10 +30,7 @@ export const EmailVerificationTemplate = ({ code, siteUrl, isCloud }: EmailVerif
<strong>Questions about Infisical?</strong>{" "} <strong>Questions about Infisical?</strong>{" "}
{isCloud ? ( {isCloud ? (
<> <>
Email us at{" "} Email us at <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>
<Link href="mailto:[email protected]" className="text-slate-700 no-underline">
support@infisical.com
</Link>
</> </>
) : ( ) : (
"Contact your administrator" "Contact your administrator"
backend/src/services/smtp/emails/ExternalImportFailedTemplate.tsx
+4 -6
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface ExternalImportFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface ExternalImportFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
error: string; error: string;
@@ -21,12 +22,9 @@ export const ExternalImportFailedTemplate = ({ error, siteUrl, provider }: Exter
</Text> </Text>
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
If your issue persists, you can contact the Infisical team at{" "} If your issue persists, you can contact the Infisical team at{" "}
<Link href="mailto:[email protected]" className="text-slate-700 no-underline"> <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>.
support@infisical.com
</Link>
.
</Text> </Text>
<Text className="text-[14px] text-red-500 leading-[24px]"> <Text className="text-[14px] text-red-600 leading-[24px]">
<strong>Error:</strong> "{error}" <strong>Error:</strong> "{error}"
</Text> </Text>
</Section> </Section>
backend/src/services/smtp/emails/IntegrationSyncFailedTemplate.tsx
+6 -10
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface IntegrationSyncFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface IntegrationSyncFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -30,7 +31,7 @@ export const IntegrationSyncFailedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>{count}</strong> integration(s) failed to sync <strong>{count}</strong> integration(s) failed to sync
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<strong>Project</strong> <strong>Project</strong>
<Text className="text-[14px] mt-[4px]">{projectName}</Text> <Text className="text-[14px] mt-[4px]">{projectName}</Text>
<strong>Environment</strong> <strong>Environment</strong>
@@ -38,15 +39,10 @@ export const IntegrationSyncFailedTemplate = ({
<strong>Secret Path</strong> <strong>Secret Path</strong>
<Text className="text-[14px] mt-[4px]">{secretPath}</Text> <Text className="text-[14px] mt-[4px]">{secretPath}</Text>
<strong className="text-black">Failure Reason:</strong> <strong className="text-black">Failure Reason:</strong>
<Text className="text-[14px] mt-[4px] text-red-500 leading-[24px]">"{syncMessage}"</Text> <Text className="text-[14px] mt-[4px] text-red-600 leading-[24px]">"{syncMessage}"</Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={integrationUrl}>View Integrations</BaseButton>
href={integrationUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View Integrations
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/NewDeviceLoginTemplate.tsx
+3 -4
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface NewDeviceLoginTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface NewDeviceLoginTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
email: string; email: string;
@@ -42,9 +43,7 @@ export const NewDeviceLoginTemplate = ({
<Text className="mb-[0px]"> <Text className="mb-[0px]">
If you believe that this login is suspicious, please contact{" "} If you believe that this login is suspicious, please contact{" "}
{isCloud ? ( {isCloud ? (
<Link href="mailto:[email protected]" className="text-slate-700 no-underline"> <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>
support@infisical.com
</Link>
) : ( ) : (
"your administrator" "your administrator"
)}{" "} )}{" "}
backend/src/services/smtp/emails/OrgAdminBreakglassAccessTemplate.tsx
+3 -5
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface OrgAdminBreakglassAccessTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface OrgAdminBreakglassAccessTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
email: string; email: string;
@@ -35,10 +36,7 @@ export const OrgAdminBreakglassAccessTemplate = ({
<Text className="text-[14px] mt-[4px]">{userAgent}</Text> <Text className="text-[14px] mt-[4px]">{userAgent}</Text>
<Text className="text-[14px]"> <Text className="text-[14px]">
If you'd like to disable Admin SSO Bypass, please visit{" "} If you'd like to disable Admin SSO Bypass, please visit{" "}
<Link href={`${siteUrl}/organization/settings`} className="text-slate-700 no-underline"> <BaseLink href={`${siteUrl}/organization/settings`}>Organization Security Settings</BaseLink>.
Organization Security Settings
</Link>
.
</Text> </Text>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
backend/src/services/smtp/emails/OrgAdminProjectGrantAccessTemplate.tsx
+3 -2
View File
@@ -2,6 +2,7 @@ import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface OrgAdminProjectGrantAccessTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview"> { interface OrgAdminProjectGrantAccessTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview"> {
email: string; email: string;
@@ -24,8 +25,8 @@ export const OrgAdminProjectGrantAccessTemplate = ({
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[24px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mt-[36px] pt-[24px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px] mt-[4px]"> <Text className="text-[14px] mt-[4px]">
The organization admin <strong>{email}</strong> has self-issued direct access to the project{" "} The organization admin <BaseLink href={`mailto:${email}`}>{email}</BaseLink> has self-issued direct access to
<strong>{projectName}</strong>. the project <strong>{projectName}</strong>.
</Text> </Text>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
backend/src/services/smtp/emails/OrganizationInvitationTemplate.tsx
+9 -10
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface OrganizationInvitationTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> { interface OrganizationInvitationTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> {
metadata?: string; metadata?: string;
@@ -36,15 +38,13 @@ export const OrganizationInvitationTemplate = ({
<br /> <br />
<strong>{organizationName}</strong> on <strong>Infisical</strong> <strong>{organizationName}</strong> on <strong>Infisical</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
{inviterFirstName && inviterUsername ? ( {inviterFirstName && inviterUsername ? (
<> <>
<strong>{inviterFirstName}</strong> ( <strong>{inviterFirstName}</strong> (
<Link href={`mailto:${inviterUsername}`} className="text-slate-700 no-underline"> <BaseLink href={`mailto:${inviterUsername}`}>{inviterUsername}</BaseLink>) has invited you to collaborate
{inviterUsername} on <strong>{organizationName}</strong>.
</Link>
) has invited you to collaborate on <strong>{organizationName}</strong>.
</> </>
) : ( ) : (
<> <>
@@ -53,13 +53,12 @@ export const OrganizationInvitationTemplate = ({
)} )}
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton
href={`${callback_url}?token=${token}${metadata ? `&metadata=${metadata}` : ""}&to=${encodeURIComponent(email)}&organization_id=${organizationId}`} href={`${callback_url}?token=${token}${metadata ? `&metadata=${metadata}` : ""}&to=${encodeURIComponent(email)}&organization_id=${organizationId}`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
> >
Accept Invite Accept Invite
</Button> </BaseButton>
</Section> </Section>
<Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800"> <Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800">
<Text className="mb-[0px]"> <Text className="mb-[0px]">
backend/src/services/smtp/emails/PasswordResetTemplate.tsx
+7 -13
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface PasswordResetTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface PasswordResetTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
email: string; email: string;
@@ -20,16 +22,13 @@ export const PasswordResetTemplate = ({ email, isCloud, siteUrl, callback_url, t
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>Account Recovery</strong> <strong>Account Recovery</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]">A password reset was requested for your Infisical account.</Text> <Text className="text-[14px]">A password reset was requested for your Infisical account.</Text>
<Text className="text-[14px]"> <Text className="text-[14px]">
If you did not initiate this request, please contact{" "} If you did not initiate this request, please contact{" "}
{isCloud ? ( {isCloud ? (
<> <>
us immediately at{" "} us immediately at <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>
<Link href="mailto:[email protected]" className="text-slate-700 no-underline">
support@infisical.com
</Link>
</> </>
) : ( ) : (
"your administrator immediately" "your administrator immediately"
@@ -37,13 +36,8 @@ export const PasswordResetTemplate = ({ email, isCloud, siteUrl, callback_url, t
. .
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={`${callback_url}?token=${token}&to=${encodeURIComponent(email)}`}>Reset Password</BaseButton>
href={`${callback_url}?token=${token}&to=${encodeURIComponent(email)}`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Reset Password
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/PasswordSetupTemplate.tsx
+7 -8
View File
@@ -1,6 +1,8 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Button, Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseLink } from "@app/services/smtp/emails/BaseLink";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface PasswordSetupTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface PasswordSetupTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -16,19 +18,16 @@ export const PasswordSetupTemplate = ({ email, isCloud, siteUrl, callback_url, t
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>Password Setup</strong> <strong>Password Setup</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]">Someone requested to set up a password for your Infisical account.</Text> <Text className="text-[14px]">Someone requested to set up a password for your Infisical account.</Text>
<Text className="text-[14px] text-red-500"> <Text className="text-[14px] text-red-600">
Make sure you are already logged in to Infisical in the current browser before clicking the link below. Make sure you are already logged in to Infisical in the current browser before clicking the link below.
</Text> </Text>
<Text className="text-[14px]"> <Text className="text-[14px]">
If you did not initiate this request, please contact{" "} If you did not initiate this request, please contact{" "}
{isCloud ? ( {isCloud ? (
<> <>
us immediately at{" "} us immediately at <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>
<Link href="mailto:[email protected]" className="text-slate-700 no-underline">
support@infisical.com
</Link>
</> </>
) : ( ) : (
"your administrator immediately" "your administrator immediately"
@@ -36,7 +35,7 @@ export const PasswordSetupTemplate = ({ email, isCloud, siteUrl, callback_url, t
. .
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <Button
href={`${callback_url}?token=${token}&to=${encodeURIComponent(email)}`} href={`${callback_url}?token=${token}&to=${encodeURIComponent(email)}`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium" className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
backend/src/services/smtp/emails/ProjectAccessRequestTemplate.tsx
+8 -15
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface ProjectAccessRequestTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface ProjectAccessRequestTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
projectName: string; projectName: string;
@@ -30,26 +32,17 @@ export const ProjectAccessRequestTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
A user has requested access to the project <strong>{projectName}</strong> A user has requested access to the project <strong>{projectName}</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
<strong>{requesterName}</strong> ( <strong>{requesterName}</strong> (<BaseLink href={`mailto:${requesterEmail}`}>{requesterEmail}</BaseLink>) has
<Link href={`mailto:${requesterEmail}`} className="text-slate-700 no-underline"> requested access to the project <strong>{projectName}</strong> in the organization <strong>{orgName}</strong>.
{requesterEmail}
</Link>
) has requested access to the project <strong>{projectName}</strong> in the organization{" "}
<strong>{orgName}</strong>.
</Text> </Text>
<Text className="text-[14px] text-slate-700 leading-[24px]"> <Text className="text-[14px] text-slate-700 leading-[24px]">
<strong className="text-black">User note:</strong> "{note}" <strong className="text-black">User note:</strong> "{note}"
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={callback_url}>Grant Access</BaseButton>
href={callback_url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Grant Access
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/ProjectInvitationTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface ProjectInvitationTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> { interface ProjectInvitationTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> {
@@ -18,18 +19,13 @@ export const ProjectInvitationTemplate = ({ callback_url, workspaceName, siteUrl
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
You've been invited to join a project on Infisical You've been invited to join a project on Infisical
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
You've been invited to join the project <strong>{workspaceName}</strong>. You've been invited to join the project <strong>{workspaceName}</strong>.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={callback_url}>Join Project</BaseButton>
href={callback_url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Join Project
</Button>
</Section> </Section>
<Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800"> <Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800">
<Text className="mb-[0px]"> <Text className="mb-[0px]">
backend/src/services/smtp/emails/ScimUserProvisionedTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface ScimUserProvisionedTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> { interface ScimUserProvisionedTemplateProps extends Omit<BaseEmailWrapperProps, "preview" | "title"> {
@@ -24,18 +25,13 @@ export const ScimUserProvisionedTemplate = ({
<br /> <br />
<strong>{organizationName}</strong> on <strong>Infisical</strong> <strong>{organizationName}</strong> on <strong>Infisical</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border text-center border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
You've been invited to collaborate on <strong>{organizationName}</strong>. You've been invited to collaborate on <strong>{organizationName}</strong>.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={callback_url}>Accept Invite</BaseButton>
href={callback_url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Accept Invite
</Button>
</Section> </Section>
<Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800"> <Section className="mt-[24px] bg-gray-50 pt-[2px] pb-[16px] border border-solid border-gray-200 px-[24px] rounded-md text-gray-800">
<Text className="mb-[0px]"> <Text className="mb-[0px]">
backend/src/services/smtp/emails/SecretApprovalRequestBypassedTemplate.tsx
+8 -14
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface SecretApprovalRequestBypassedTemplateProps interface SecretApprovalRequestBypassedTemplateProps
extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -35,13 +37,10 @@ export const SecretApprovalRequestBypassedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
A secret approval request has been bypassed in the project <strong>{projectName}</strong> A secret approval request has been bypassed in the project <strong>{projectName}</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
<strong>{requesterFullName}</strong> ( <strong>{requesterFullName}</strong> (<BaseLink href={`mailto:${requesterEmail}`}>{requesterEmail}</BaseLink>)
<Link href={`mailto:${requesterEmail}`} className="text-slate-700 no-underline"> has {requestType === "change" ? "merged" : "accessed"} a secret {requestType === "change" ? "to" : "in"}{" "}
{requesterEmail}
</Link>
) has {requestType === "change" ? "merged" : "accessed"} a secret {requestType === "change" ? "to" : "in"}{" "}
<strong>{secretPath}</strong> in the <strong>{environment}</strong> environment without obtaining the required <strong>{secretPath}</strong> in the <strong>{environment}</strong> environment without obtaining the required
approval. approval.
</Text> </Text>
@@ -50,13 +49,8 @@ export const SecretApprovalRequestBypassedTemplate = ({
{bypassReason}" {bypassReason}"
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={approvalUrl}>Review Bypass</BaseButton>
href={approvalUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Review Bypass
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretApprovalRequestNeedsReviewTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface SecretApprovalRequestNeedsReviewTemplateProps interface SecretApprovalRequestNeedsReviewTemplateProps
@@ -27,20 +28,15 @@ export const SecretApprovalRequestNeedsReviewTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
A secret approval request for the project <strong>{projectName}</strong> requires review A secret approval request for the project <strong>{projectName}</strong> requires review
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]">Hello {firstName},</Text> <Text className="text-[14px]">Hello {firstName},</Text>
<Text className="text-black text-[14px] leading-[24px]"> <Text className="text-black text-[14px] leading-[24px]">
You have a new secret change request pending your review for the project <strong>{projectName}</strong> in the You have a new secret change request pending your review for the project <strong>{projectName}</strong> in the
organization <strong>{organizationName}</strong>. organization <strong>{organizationName}</strong>.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={approvalUrl}>Review Changes</BaseButton>
href={approvalUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Review Changes
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretLeakIncidentTemplate.tsx
+9 -19
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface SecretLeakIncidentTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SecretLeakIncidentTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
numberOfSecrets: number; numberOfSecrets: number;
@@ -24,7 +26,7 @@ export const SecretLeakIncidentTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
Infisical has uncovered <strong>{numberOfSecrets}</strong> secret(s) from a recent commit Infisical has uncovered <strong>{numberOfSecrets}</strong> secret(s) from a recent commit
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[8px] pb-[8px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[8px] pb-[8px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]"> <Text className="text-[14px]">
You are receiving this notification because one or more leaked secrets have been detected in a recent commit You are receiving this notification because one or more leaked secrets have been detected in a recent commit
{(pusher_email || pusher_name) && ( {(pusher_email || pusher_name) && (
@@ -33,11 +35,7 @@ export const SecretLeakIncidentTemplate = ({
pushed by <strong>{pusher_name ?? "Unknown Pusher"}</strong>{" "} pushed by <strong>{pusher_name ?? "Unknown Pusher"}</strong>{" "}
{pusher_email && ( {pusher_email && (
<> <>
( (<BaseLink href={`mailto:${pusher_email}`}>{pusher_email}</BaseLink>)
<Link href={`mailto:${pusher_email}`} className="text-slate-700 no-underline">
{pusher_email}
</Link>
)
</> </>
)} )}
</> </>
@@ -49,24 +47,16 @@ export const SecretLeakIncidentTemplate = ({
a comment in the given programming language. This will prevent future notifications from being sent out for a comment in the given programming language. This will prevent future notifications from being sent out for
these secrets. these secrets.
</Text> </Text>
<Text className="text-[14px] text-red-500"> <Text className="text-[14px] text-red-600">
If these are production secrets, please rotate them immediately. If these are production secrets, please rotate them immediately.
</Text> </Text>
<Text className="text-[14px]"> <Text className="text-[14px]">
Once you have taken action, be sure to update the status of the risk in the{" "} Once you have taken action, be sure to update the status of the risk in the{" "}
<Link href={`${siteUrl}/organization/secret-scanning`} className="text-slate-700 no-underline"> <BaseLink href={`${siteUrl}/organization/secret-scanning`}>Infisical Dashboard</BaseLink>.
Infisical Dashboard
</Link>
.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={`${siteUrl}/organization/secret-scanning`}>View Leaked Secrets</BaseButton>
href={`${siteUrl}/organization/secret-scanning`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View Leaked Secrets
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretRequestCompletedTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface SecretRequestCompletedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SecretRequestCompletedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -20,7 +21,7 @@ export const SecretRequestCompletedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>A secret has been shared with you</strong> <strong>A secret has been shared with you</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] text-center pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] text-center pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]"> <Text className="text-[14px]">
{respondentUsername ? <strong>{respondentUsername}</strong> : "Someone"} shared a secret{" "} {respondentUsername ? <strong>{respondentUsername}</strong> : "Someone"} shared a secret{" "}
{name && ( {name && (
@@ -31,13 +32,8 @@ export const SecretRequestCompletedTemplate = ({
with you. with you.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={secretRequestUrl}>View Secret</BaseButton>
href={secretRequestUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View Secret
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretRotationFailedTemplate.tsx
+7 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface SecretRotationFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SecretRotationFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -28,7 +29,7 @@ export const SecretRotationFailedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
Your <strong>{rotationType}</strong> rotation <strong>{rotationName}</strong> failed to rotate Your <strong>{rotationType}</strong> rotation <strong>{rotationName}</strong> failed to rotate
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<strong>Name</strong> <strong>Name</strong>
<Text className="text-[14px] mt-[4px]">{rotationName}</Text> <Text className="text-[14px] mt-[4px]">{rotationName}</Text>
<strong>Type</strong> <strong>Type</strong>
@@ -40,15 +41,12 @@ export const SecretRotationFailedTemplate = ({
<strong>Secret Path</strong> <strong>Secret Path</strong>
<Text className="text-[14px] mt-[4px]">{secretPath}</Text> <Text className="text-[14px] mt-[4px]">{secretPath}</Text>
<strong>Reason:</strong> <strong>Reason:</strong>
<Text className="text-[14px] text-red-500 mt-[4px]">{content}</Text> <Text className="text-[14px] text-red-600 mt-[4px]">{content}</Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={`${rotationUrl}?search=${rotationName}&secretPath=${secretPath}`}>
href={`${rotationUrl}?search=${rotationName}&secretPath=${secretPath}`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View in Infisical View in Infisical
</Button> </BaseButton>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretScanningScanFailedTemplate.tsx
+6 -10
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface SecretScanningScanFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SecretScanningScanFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -30,7 +31,7 @@ export const SecretScanningScanFailedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
Infisical encountered an error while attempting to scan the resource <strong>{resourceName}</strong> Infisical encountered an error while attempting to scan the resource <strong>{resourceName}</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<strong>Resource</strong> <strong>Resource</strong>
<Text className="text-[14px] mt-[4px]">{resourceName}</Text> <Text className="text-[14px] mt-[4px]">{resourceName}</Text>
<strong>Data Source</strong> <strong>Data Source</strong>
@@ -40,15 +41,10 @@ export const SecretScanningScanFailedTemplate = ({
<strong>Timestamp</strong> <strong>Timestamp</strong>
<Text className="text-[14px] mt-[4px]">{timestamp}</Text> <Text className="text-[14px] mt-[4px]">{timestamp}</Text>
<strong>Error</strong> <strong>Error</strong>
<Text className="text-[14px] text-red-500 mt-[4px]">{errorMessage}</Text> <Text className="text-[14px] text-red-600 mt-[4px]">{errorMessage}</Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={url}>View in Infisical</BaseButton>
href={url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View in Infisical
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretScanningSecretsDetectedTemplate.tsx
+9 -19
View File
@@ -1,7 +1,9 @@
import { Button, Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface SecretScanningSecretsDetectedTemplateProps interface SecretScanningSecretsDetectedTemplateProps
extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -32,7 +34,7 @@ export const SecretScanningSecretsDetectedTemplate = ({
Infisical has uncovered <strong>{numberOfSecrets}</strong> secret(s) Infisical has uncovered <strong>{numberOfSecrets}</strong> secret(s)
{isDiffScan ? " from a recent commit to" : " in"} <strong>{resourceName}</strong> {isDiffScan ? " from a recent commit to" : " in"} <strong>{resourceName}</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[8px] pb-[8px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[8px] pb-[8px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]"> <Text className="text-[14px]">
You are receiving this notification because one or more leaked secrets have been detected You are receiving this notification because one or more leaked secrets have been detected
{isDiffScan && " in a recent commit"} {isDiffScan && " in a recent commit"}
@@ -43,11 +45,7 @@ export const SecretScanningSecretsDetectedTemplate = ({
pushed by <strong>{authorName ?? "Unknown Pusher"}</strong>{" "} pushed by <strong>{authorName ?? "Unknown Pusher"}</strong>{" "}
{authorEmail && ( {authorEmail && (
<> <>
( (<BaseLink href={`mailto:${authorEmail}`}>{authorEmail}</BaseLink>)
<Link href={`mailto:${authorEmail}`} className="text-slate-700 no-underline">
{authorEmail}
</Link>
)
</> </>
)} )}
</> </>
@@ -65,24 +63,16 @@ export const SecretScanningSecretsDetectedTemplate = ({
a comment in the given programming language. This will prevent future notifications from being sent out for a comment in the given programming language. This will prevent future notifications from being sent out for
these secrets. these secrets.
</Text> </Text>
<Text className="text-[14px] text-red-500"> <Text className="text-[14px] text-red-600">
If these are production secrets, please rotate them immediately. If these are production secrets, please rotate them immediately.
</Text> </Text>
<Text className="text-[14px]"> <Text className="text-[14px]">
Once you have taken action, be sure to update the finding status in the{" "} Once you have taken action, be sure to update the finding status in the{" "}
<Link href={url} className="text-slate-700 no-underline"> <BaseLink href={url}>Infisical Dashboard</BaseLink>.
Infisical Dashboard
</Link>
.
</Text> </Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={url}>View Leaked Secrets</BaseButton>
href={url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View Leaked Secrets
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SecretSyncFailedTemplate.tsx
+6 -10
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface SecretSyncFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SecretSyncFailedTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -28,7 +29,7 @@ export const SecretSyncFailedTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
Your <strong>{syncDestination}</strong> sync <strong>{syncName}</strong> failed to complete Your <strong>{syncDestination}</strong> sync <strong>{syncName}</strong> failed to complete
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[26px] pb-[4px] text-[14px] border border-solid border-gray-200 rounded-md bg-gray-50">
<strong>Name</strong> <strong>Name</strong>
<Text className="text-[14px] mt-[4px]">{syncName}</Text> <Text className="text-[14px] mt-[4px]">{syncName}</Text>
<strong>Destination</strong> <strong>Destination</strong>
@@ -50,17 +51,12 @@ export const SecretSyncFailedTemplate = ({
{failureMessage && ( {failureMessage && (
<> <>
<strong>Reason:</strong> <strong>Reason:</strong>
<Text className="text-[14px] text-red-500 mt-[4px]">{failureMessage}</Text> <Text className="text-[14px] text-red-600 mt-[4px]">{failureMessage}</Text>
</> </>
)} )}
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={syncUrl}>View in Infisical</BaseButton>
href={syncUrl}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
View in Infisical
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/ServiceTokenExpiryNoticeTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface ServiceTokenExpiryNoticeTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface ServiceTokenExpiryNoticeTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -24,20 +25,15 @@ export const ServiceTokenExpiryNoticeTemplate = ({
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>Service token expiry notice</strong> <strong>Service token expiry notice</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]"> <Text className="text-[14px]">
Your service token <strong>{tokenName}</strong> for the project <strong>{projectName}</strong> will expire Your service token <strong>{tokenName}</strong> for the project <strong>{projectName}</strong> will expire
within 24 hours. within 24 hours.
</Text> </Text>
<Text>If this token is still needed for your workflow, please create a new one before it expires.</Text> <Text>If this token is still needed for your workflow, please create a new one before it expires.</Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={url}>Create New Token</BaseButton>
href={url}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Create New Token
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );
backend/src/services/smtp/emails/SignupEmailVerificationTemplate.tsx
+3 -5
View File
@@ -1,7 +1,8 @@
import { Heading, Link, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
import { BaseLink } from "./BaseLink";
interface SignupEmailVerificationTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface SignupEmailVerificationTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
code: string; code: string;
@@ -29,10 +30,7 @@ export const SignupEmailVerificationTemplate = ({ code, siteUrl, isCloud }: Sign
<strong>Questions about setting up Infisical?</strong>{" "} <strong>Questions about setting up Infisical?</strong>{" "}
{isCloud ? ( {isCloud ? (
<> <>
Email us at{" "} Email us at <BaseLink href="mailto:[email protected]">support@infisical.com</BaseLink>
<Link href="mailto:[email protected]" className="text-slate-700 no-underline">
support@infisical.com
</Link>
</> </>
) : ( ) : (
"Contact your administrator" "Contact your administrator"
backend/src/services/smtp/emails/UnlockAccountTemplate.tsx
+5 -9
View File
@@ -1,6 +1,7 @@
import { Button, Heading, Section, Text } from "@react-email/components"; import { Heading, Section, Text } from "@react-email/components";
import React from "react"; import React from "react";
import { BaseButton } from "./BaseButton";
import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper"; import { BaseEmailWrapper, BaseEmailWrapperProps } from "./BaseEmailWrapper";
interface UnlockAccountTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> { interface UnlockAccountTemplateProps extends Omit<BaseEmailWrapperProps, "title" | "preview" | "children"> {
@@ -18,19 +19,14 @@ export const UnlockAccountTemplate = ({ token, siteUrl, callback_url }: UnlockAc
<Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0"> <Heading className="text-black text-[18px] leading-[28px] text-center font-normal p-0 mx-0">
<strong>Unlock your Infisical account</strong> <strong>Unlock your Infisical account</strong>
</Heading> </Heading>
<Section className="px-[24px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50"> <Section className="px-[24px] mb-[28px] mt-[36px] pt-[12px] pb-[8px] border border-solid border-gray-200 rounded-md bg-gray-50">
<Text className="text-[14px]"> <Text className="text-[14px]">
Your account has been temporarily locked due to multiple failed login attempts. Your account has been temporarily locked due to multiple failed login attempts.
</Text> </Text>
<Text>If these attempts were not made by you, reset your password immediately.</Text> <Text>If these attempts were not made by you, reset your password immediately.</Text>
</Section> </Section>
<Section className="text-center mt-[28px]"> <Section className="text-center">
<Button <BaseButton href={`${callback_url}?token=${token}`}>Unlock Account</BaseButton>
href={`${callback_url}?token=${token}`}
className="rounded-md p-3 px-[28px] my-[8px] text-center text-[16px] bg-[#EBF852] border-solid border border-[#d1e309] text-black font-medium"
>
Unlock Account
</Button>
</Section> </Section>
</BaseEmailWrapper> </BaseEmailWrapper>
); );