create-zhx-monorepo 0.2.2 → 2.0.0

package/templates/monorepo-starter/packages/templates/src/email/auth/index.ts

@@ -0,0 +1,10 @@
+export { Signin } from "./signin";
+export { Signup } from "./signup";
+export { VerifyMfa } from "./verifyMfa";
+export { UpdateMfa } from "./updateMfa";
+export { DisableMfa } from "./disableMfa";
+export { VerifyIdentifier } from "./verifyIdentifier";
+export { UpdateIdentifier } from "./updateIdentifier";
+export { SetPassword } from "./setPassword";
+export { ResetPassword } from "./resetPassword";
+export { SecurityAlert } from "./securityAlert";

package/templates/monorepo-starter/packages/templates/src/email/auth/resetPassword.tsx

@@ -0,0 +1,41 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { ActionBlock } from "../components/actionBlock";
+
+export const ResetPassword: EmailTemplateComponent = ({
+  user,
+  otp,
+  identifier,
+  clientUrl,
+}) => {
+  if (otp) {
+    const link = `${clientUrl}/auth/reset-password?identifier=${identifier}&purpose=${otp.purpose}&secret=${otp.secret}&type=${otp.type}`;
+    return (
+      <Layout previewText="Reset your password">
+        <Header title="Reset Your Password" />
+        <Greeting name={user?.displayName} />
+        <Text className="text-base text-gray-900">
+          Use the code below to reset your password.
+        </Text>
+        <ActionBlock link={link} label="Reset password" otp={otp} />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout previewText="Password reset successful">
+      <Header title="Password Reset Successful" />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Your password has been updated.
+      </Text>
+    </Layout>
+  );
+};
+
+ResetPassword.subject = (props) =>
+  props.otp ? "Reset your password" : "Password reset successful";
+ResetPassword.message = (props) =>
+  props.otp ? `Reset code: ${props.otp.secret}` : "Password reset.";

package/templates/monorepo-starter/packages/templates/src/email/auth/securityAlert.tsx

@@ -0,0 +1,21 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+
+export const SecurityAlert: EmailTemplateComponent = ({ user, message }) => (
+  <Layout previewText="Security alert">
+    <Header title="Security Alert" />
+    <Greeting name={user?.displayName} />
+    <table className="w-full bg-red-50 rounded-lg my-4">
+      <tr>
+        <td className="p-4">
+          <Text className="m-0 text-red-800 font-semibold">{message}</Text>
+        </td>
+      </tr>
+    </table>
+  </Layout>
+);
+
+SecurityAlert.subject = () => "Security alert";
+SecurityAlert.message = (props) => `Security alert: ${props.message}`;

package/templates/monorepo-starter/packages/templates/src/email/auth/setPassword.tsx

@@ -0,0 +1,42 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { appName } from "@workspace/shared/constants";
+import { ActionBlock } from "../components/actionBlock";
+
+export const SetPassword: EmailTemplateComponent = ({
+  user,
+  otp,
+  identifier,
+  clientUrl,
+}) => {
+  if (otp) {
+    const link = `${clientUrl}/auth/set-password?identifier=${identifier}&purpose=${otp.purpose}&secret=${otp.secret}&type=${otp.type}`;
+    return (
+      <Layout previewText="Set your password">
+        <Header title="Set Your Password" />
+        <Greeting name={user?.displayName} />
+        <Text className="text-base text-gray-900">
+          Create a password to access your {appName.default} travel account.
+        </Text>
+        <ActionBlock link={link} label="Set password" otp={otp} />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout previewText="Password set successfully">
+      <Header title="Password Set Successfully" />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Your password has been created successfully.
+      </Text>
+    </Layout>
+  );
+};
+
+SetPassword.subject = (props) =>
+  props.otp ? "Set your password" : "Password set successfully";
+SetPassword.message = (props) =>
+  props.otp ? `Your setup code is ${props.otp.secret}` : "Password set.";

package/templates/monorepo-starter/packages/templates/src/email/auth/signin.tsx

@@ -0,0 +1,19 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+
+export const Signin: EmailTemplateComponent = ({ user }) => (
+  <Layout previewText="New sign-in detected">
+    <Header title="New Sign-in Detected" />
+    <Greeting name={user?.displayName} />
+    <Text className="text-base text-gray-900">
+      A sign-in to your travel account was detected.
+    </Text>
+    <Text className="text-base text-gray-900">
+      If this wasn't you, please secure your account immediately.
+    </Text>
+  </Layout>
+);
+Signin.subject = () => "New sign-in detected";
+Signin.message = () => "New sign-in detected.";

package/templates/monorepo-starter/packages/templates/src/email/auth/signup.tsx

@@ -0,0 +1,24 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { appName } from "@workspace/shared/constants";
+
+export const Signup: EmailTemplateComponent = ({ user }) => (
+  <Layout previewText={`Welcome to ${appName.default}`}>
+    <Header
+      title={`Welcome to ${appName.default}`}
+      subtitle="Your travel account is ready"
+    />
+    <Greeting name={user?.displayName} />
+    <Text className="text-base text-gray-900">
+      Your travel agency account has been successfully created.
+    </Text>
+    <Text className="text-base text-gray-900">
+      You can now sign in and start planning your next adventure.
+    </Text>
+  </Layout>
+);
+
+Signup.subject = () => `Welcome to ${appName.default}`;
+Signup.message = () => `Welcome to ${appName.default}. Your account is ready.`;

package/templates/monorepo-starter/packages/templates/src/email/auth/updateIdentifier.tsx

@@ -0,0 +1,79 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { ActionBlock } from "../components/actionBlock";
+
+export const UpdateIdentifier: EmailTemplateComponent = ({
+  user,
+  otp,
+  identifier,
+  newIdentifier,
+  clientUrl,
+}) => {
+  const type = identifier?.includes("@") ? "email" : "phone number";
+  const subjectType = type === "email" ? "Email" : "Phone";
+
+  if (otp) {
+    const link = `${clientUrl}/auth/verify?identifier=${identifier}&newIdentifier=${newIdentifier}&purpose=${otp.purpose}&secret=${otp.secret}&type=${otp.type}`;
+    return (
+      <Layout previewText={`${subjectType} change request`}>
+        <Header
+          title={`${type === "email" ? "Email" : "Phone Number"} Change Request`}
+          subtitle={`Confirm your new ${type}`}
+        />
+        <Greeting name={user?.displayName} />
+        <Text className="text-base text-gray-900">
+          A request was made to change your {type}.
+        </Text>
+        {newIdentifier && (
+          <>
+            <Text className="text-base text-gray-900">
+              Current {subjectType}: <strong>{identifier}</strong>
+            </Text>
+            <Text className="text-base text-gray-900">
+              New {subjectType}: <strong>{newIdentifier}</strong>
+            </Text>
+          </>
+        )}
+        <ActionBlock
+          link={link}
+          label={`Confirm ${subjectType} Change`}
+          otp={otp}
+        />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout previewText={`${subjectType} updated`}>
+      <Header
+        title={`${type === "email" ? "Email Address" : "Phone Number"} Updated`}
+      />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Your {type} has been successfully updated.
+      </Text>
+      {newIdentifier && (
+        <>
+          <Text className="text-base text-gray-900">
+            Previous {subjectType}: <strong>{identifier}</strong>
+          </Text>
+          <Text className="text-base text-gray-900">
+            New {subjectType}: <strong>{newIdentifier}</strong>
+          </Text>
+        </>
+      )}
+    </Layout>
+  );
+};
+
+UpdateIdentifier.subject = (props) => {
+  const type = props.identifier?.includes("@") ? "email" : "phone number";
+  const subjectType = type === "email" ? "Email" : "Phone";
+  return props.otp ? `${subjectType} change request` : `${subjectType} updated`;
+};
+UpdateIdentifier.message = (props) => {
+  const type = props.identifier?.includes("@") ? "email" : "phone number";
+  return props.otp ? `Confirm ${type} change.` : `${type} updated.`;
+};

package/templates/monorepo-starter/packages/templates/src/email/auth/updateMfa.tsx

@@ -0,0 +1,40 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { NumericCode } from "../components/numericCode";
+
+export const UpdateMfa: EmailTemplateComponent = ({ user, otp }) => {
+  if (otp) {
+    return (
+      <Layout previewText="Enable two-factor authentication">
+        <Header title="Enable Two-Factor Authentication" />
+        <Greeting name={user?.displayName} />
+        <Text className="text-base text-gray-900">
+          Use the code below to enable 2FA for your travel account.
+        </Text>
+        <NumericCode code={otp.secret} />
+        <Text className="text-xs text-gray-500 text-center">
+          This code expires in 15 minutes.
+        </Text>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout previewText="Two-factor authentication enabled">
+      <Header title="2FA Enabled Successfully" />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Two-factor authentication is now active on your account.
+      </Text>
+    </Layout>
+  );
+};
+
+UpdateMfa.subject = (props) =>
+  props.otp
+    ? "Enable two-factor authentication"
+    : "Two-factor authentication enabled";
+UpdateMfa.message = (props) =>
+  props.otp ? `Your 2FA setup code is ${props.otp.secret}.` : "2FA enabled.";

package/templates/monorepo-starter/packages/templates/src/email/auth/verifyIdentifier.tsx

@@ -0,0 +1,42 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { ActionBlock } from "../components/actionBlock";
+
+export const VerifyIdentifier: EmailTemplateComponent = ({
+  user,
+  otp,
+  identifier,
+  clientUrl,
+}) => {
+  const type = identifier?.includes("@") ? "email" : "phone number";
+  const typeLabel = type === "email" ? "Email Address" : "Phone Number";
+  const link = `${clientUrl}/auth/verify?identifier=${identifier}&purpose=${otp?.purpose}&secret=${otp?.secret}&type=${otp?.type}`;
+
+  return (
+    <Layout previewText={`Verify your ${type}`}>
+      <Header title={`Verify Your ${typeLabel}`} />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Please verify your {type} to activate your travel account.
+      </Text>
+      {otp ? (
+        <ActionBlock link={link} label={`Verify ${type}`} otp={otp} />
+      ) : (
+        <Text className="text-base text-gray-900">
+          Your {type} has been verified successfully.
+        </Text>
+      )}
+    </Layout>
+  );
+};
+
+VerifyIdentifier.subject = (props) => {
+  const type = props.identifier?.includes("@") ? "email" : "phone number";
+  return `Verify your ${type}`;
+};
+VerifyIdentifier.message = (props) =>
+  props.otp
+    ? `Verification code: ${props.otp.secret}`
+    : "Your identifier has been verified.";

package/templates/monorepo-starter/packages/templates/src/email/auth/verifyMfa.tsx

@@ -0,0 +1,23 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { NumericCode } from "../components/numericCode";
+
+export const VerifyMfa: EmailTemplateComponent = ({ user, otp }) => (
+  <Layout previewText="Your security code">
+    <Header title="Security Code" />
+    <Greeting name={user?.displayName} />
+    <Text className="text-base text-gray-900">
+      Use the code below to complete your sign-in.
+    </Text>
+    {otp && <NumericCode code={otp.secret} />}
+    <Text className="text-xs text-gray-500 text-center">
+      This code expires in 15 minutes.
+    </Text>
+  </Layout>
+);
+
+VerifyMfa.subject = () => "Your security code";
+VerifyMfa.message = (props) =>
+  props.otp ? `Your security code is ${props.otp.secret}.` : "";

package/templates/monorepo-starter/packages/templates/src/email/components/actionBlock.tsx

@@ -0,0 +1,39 @@
+import { Section, Text, Button } from "@react-email/components";
+import { NumericCode } from "./numericCode";
+import type { Otp } from "@workspace/contracts";
+import { diffInMinutes } from "@workspace/shared/utils";
+
+interface ActionBlockProps {
+  link: string;
+  label: string;
+  otp?: Otp;
+}
+
+export const ActionBlock = ({ link, label, otp }: ActionBlockProps) => (
+  <Section className="my-7 text-center">
+    {otp?.type === "numericCode" ? (
+      <>
+        <Text className="text-sm text-gray-500">
+          Use the verification code below
+        </Text>
+        <NumericCode code={otp.secret} />
+        <Text className="text-xs text-gray-500 text-center">
+          This code expires in {diffInMinutes(otp.expiresAt)} minutes.
+        </Text>
+        <Button
+          href={link}
+          className="inline-block px-5 py-3 bg-rose-600 text-white rounded-lg font-semibold no-underline"
+        >
+          {label}
+        </Button>
+      </>
+    ) : (
+      <Button
+        href={link}
+        className="inline-block px-5 py-3 bg-rose-600 text-white rounded-lg font-semibold no-underline"
+      >
+        {label}
+      </Button>
+    )}
+  </Section>
+);

package/templates/monorepo-starter/packages/templates/src/email/components/greeting.tsx

@@ -0,0 +1,11 @@
+import { Text } from "@react-email/components";
+
+interface GreetingProps {
+  name?: string | null;
+}
+
+export const Greeting = ({ name }: GreetingProps) => (
+  <Text className="text-base text-gray-900">
+    Hello <strong>{name ?? "there"}</strong>,
+  </Text>
+);

package/templates/monorepo-starter/packages/templates/src/email/components/header.tsx

@@ -0,0 +1,15 @@
+import { Heading, Text } from "@react-email/components";
+
+interface HeaderProps {
+  title: string;
+  subtitle?: string;
+}
+
+export const Header = ({ title, subtitle }: HeaderProps) => (
+  <>
+    <Heading className="text-xl font-semibold text-gray-900 mb-1">
+      {title}
+    </Heading>
+    {subtitle && <Text className="text-sm text-gray-500 mb-6">{subtitle}</Text>}
+  </>
+);

package/templates/monorepo-starter/packages/templates/src/email/components/layout.tsx

@@ -0,0 +1,33 @@
+import {
+  Html,
+  Body,
+  Container,
+  Hr,
+  Text,
+  Preview,
+  Tailwind,
+} from "@react-email/components";
+import { appName } from "@workspace/shared/constants";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  previewText?: string;
+}
+
+export const Layout = ({ children, previewText }: LayoutProps) => (
+  <Html>
+    {previewText && <Preview>{previewText}</Preview>}
+    <Tailwind>
+      <Body className="bg-gray-50 font-sans">
+        <Container className="mx-auto max-w-150 bg-white rounded-lg border border-gray-200 p-8 my-8">
+          {children}
+          <Hr className="my-8 border-gray-200" />
+          <Text className="text-xs text-gray-500">
+            Sent by <strong>{appName.default}</strong>
+            <br />© {new Date().getFullYear()} {appName.default}
+          </Text>
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+);

package/templates/monorepo-starter/packages/templates/src/email/components/numericCode.tsx

@@ -0,0 +1,16 @@
+interface NumericCodeProps {
+  code: string;
+}
+
+export const NumericCode = ({ code }: NumericCodeProps) => (
+  <div className="my-5 text-center">
+    {code.split("").map((digit, i) => (
+      <span
+        key={i}
+        className="inline-block min-w-11 py-3 mx-1 bg-gray-50 border border-gray-200 rounded-lg text-xl font-mono font-bold text-gray-900"
+      >
+        {digit}
+      </span>
+    ))}
+  </div>
+);

package/templates/monorepo-starter/packages/templates/src/email/index.ts

@@ -0,0 +1,2 @@
+export * from "./auth";
+export * from "./service";

package/templates/monorepo-starter/packages/templates/src/email/service/accountReactivated.tsx

@@ -0,0 +1,31 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { appName } from "@workspace/shared/constants";
+
+export const AccountReactivated: EmailTemplateComponent = ({ user }) => {
+  return (
+    <Layout previewText="Your account has been reactivated">
+      <Header
+        title="Account Reactivated"
+        subtitle={`Welcome back to ${appName.default}`}
+      />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Great news! Your {appName.default} travel account has been successfully
+        reactivated.
+      </Text>
+      <Text className="text-base text-gray-900">
+        You can now sign in and continue planning your trips without any
+        restrictions.
+      </Text>
+    </Layout>
+  );
+};
+
+AccountReactivated.subject = () =>
+  `Your ${appName.default} account has been reactivated`;
+
+AccountReactivated.message = () =>
+  `Your ${appName.default} account has been successfully reactivated.`;

package/templates/monorepo-starter/packages/templates/src/email/service/accountSuspended.tsx

@@ -0,0 +1,37 @@
+import { Layout } from "../components/layout";
+import { Header } from "../components/header";
+import { Greeting } from "../components/greeting";
+import { Text } from "@react-email/components";
+import { appName } from "@workspace/shared/constants";
+
+export const AccountSuspended: EmailTemplateComponent = ({ user, message }) => {
+  return (
+    <Layout previewText="Your account has been suspended">
+      <Header
+        title="Account Suspended"
+        subtitle={`${appName.default} Travel Account Notice`}
+      />
+      <Greeting name={user?.displayName} />
+      <Text className="text-base text-gray-900">
+        Your {appName.default} account has been temporarily suspended.
+      </Text>
+
+      {message && (
+        <Text className="text-base text-gray-900">Reason: {message}</Text>
+      )}
+
+      <Text className="text-base text-gray-900">
+        If you believe this is a mistake or need further assistance, please
+        contact our support team.
+      </Text>
+    </Layout>
+  );
+};
+
+AccountSuspended.subject = () =>
+  `Your ${appName.default} account has been suspended`;
+
+AccountSuspended.message = (props) =>
+  `Your ${appName.default} account has been suspended${
+    props.message ? `. Reason: ${props.message}` : "."
+  }`;

package/templates/monorepo-starter/packages/templates/src/email/service/index.ts

@@ -0,0 +1,2 @@
+export { AccountSuspended } from "./accountSuspended";
+export { AccountReactivated } from "./accountReactivated";