feat(server): new email template (#9528)

use `yarn af server dev:mail` to preview all mail template
fix CLOUD-93

packages/backend/server/src/mails/users/email-change-notification.tsx

@@ -0,0 +1,25 @@
+import { Content, Name, P, Template, Title } from '../components';
+
+export type ChangeEmailNotificationProps = {
+  to: string;
+};
+
+export default function ChangeEmailNotification(
+  props: ChangeEmailNotificationProps
+) {
+  return (
+    <Template>
+      <Title>Verify your current email for AFFiNE</Title>
+      <Content>
+        <P>
+          As per your request, we have changed your email. Please make sure
+          you&apos;re using <Name>{props.to}</Name> to log in the next time.
+        </P>
+      </Content>
+    </Template>
+  );
+}
+
+ChangeEmailNotification.PreviewProps = {
+  to: 'test@affine.pro',
+};

packages/backend/server/src/mails/users/email-change-verify.tsx

@@ -0,0 +1,25 @@
+import { Button, Content, P, Template, Title } from '../components';
+
+export type VerifyChangeEmailProps = {
+  url: string;
+};
+
+export default function VerifyChangeEmail(props: VerifyChangeEmailProps) {
+  return (
+    <Template>
+      <Title>Verify your new email address</Title>
+      <Content>
+        <P>
+          You recently requested to change the email address associated with
+          your AFFiNE account. To complete this process, please click on the
+          verification link below. This magic link will expire in 30 minutes.
+        </P>
+        <Button href={props.url}>Verify your new email address</Button>
+      </Content>
+    </Template>
+  );
+}
+
+VerifyChangeEmail.PreviewProps = {
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/users/email-change.tsx

@@ -0,0 +1,29 @@
+import { Bold, Button, Content, P, Template, Title } from '../components';
+
+export type ChangeEmailProps = {
+  url: string;
+};
+
+export default function ChangeEmail(props: ChangeEmailProps) {
+  return (
+    <Template>
+      <Title>Verify your current email for AFFiNE</Title>
+      <Content>
+        <P>
+          You recently requested to change the email address associated with
+          your AFFiNE account.
+          <br />
+          To complete this process, please click on the verification link below.
+        </P>
+        <P>
+          This magic link will expire in <Bold>30 minutes</Bold>.
+        </P>
+        <Button href={props.url}>Verify and set up a new email address</Button>
+      </Content>
+    </Template>
+  );
+}
+
+ChangeEmail.PreviewProps = {
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/users/email-verify.tsx

@@ -0,0 +1,29 @@
+import { Bold, Button, Content, P, Template, Title } from '../components';
+
+export type VerifyEmailProps = {
+  url: string;
+};
+
+export default function VerifyEmail(props: VerifyEmailProps) {
+  return (
+    <Template>
+      <Title>Verify your email address</Title>
+      <Content>
+        <P>
+          You recently requested to verify the email address associated with
+          your AFFiNE account.
+          <br />
+          To complete this process, please click on the verification link below.
+        </P>
+        <P>
+          This magic link will expire in <Bold>30 minutes</Bold>.
+        </P>
+        <Button href={props.url}>Verify your email address</Button>
+      </Content>
+    </Template>
+  );
+}
+
+VerifyEmail.PreviewProps = {
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/users/index.ts

@@ -0,0 +1,17 @@
+export { default as ChangeEmail, type ChangeEmailProps } from './email-change';
+export {
+  default as ChangeEmailNotification,
+  type ChangeEmailNotificationProps,
+} from './email-change-notification';
+export {
+  default as VerifyChangeEmail,
+  type VerifyChangeEmailProps,
+} from './email-change-verify';
+export { default as VerifyEmail, type VerifyEmailProps } from './email-verify';
+export {
+  default as ChangePassword,
+  type ChangePasswordProps,
+} from './password-change';
+export { default as SetPassword, type SetPasswordProps } from './password-set';
+export { default as SignIn, type SignInProps } from './sign-in';
+export { default as SignUp, type SignUpProps } from './sign-up';

packages/backend/server/src/mails/users/password-change.tsx

@@ -0,0 +1,24 @@
+import { Bold, Button, Content, P, Template, Title } from '../components';
+
+export type ChangePasswordProps = {
+  url: string;
+};
+
+export default function ChangePassword(props: ChangePasswordProps) {
+  return (
+    <Template>
+      <Title>Modify your AFFiNE password</Title>
+      <Content>
+        <P>
+          Click the button below to reset your password. The magic link will
+          expire in <Bold>30 minutes</Bold>.
+        </P>
+        <Button href={props.url}>Set new password</Button>
+      </Content>
+    </Template>
+  );
+}
+
+ChangePassword.PreviewProps = {
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/users/password-set.tsx

@@ -0,0 +1,24 @@
+import { Bold, Button, Content, P, Template, Title } from '../components';
+
+export type SetPasswordProps = {
+  url: string;
+};
+
+export default function SetPassword(props: SetPasswordProps) {
+  return (
+    <Template>
+      <Title>Set your AFFiNE password</Title>
+      <Content>
+        <P>
+          Click the button below to set your password. The magic link will
+          expire in <Bold>30 minutes</Bold>.
+        </P>
+        <Button href={props.url}>Sign in to AFFiNE</Button>
+      </Content>
+    </Template>
+  );
+}
+
+SetPassword.PreviewProps = {
+  url: 'https://app.affine.pro',
+};

packages/backend/server/src/mails/users/sign-in.tsx

@@ -0,0 +1,20 @@
+import { Button, Content, P, Template, Title } from '../components';
+
+export type SignInProps = {
+  url: string;
+};
+
+export default function SignUp(props: SignInProps) {
+  return (
+    <Template>
+      <Title>Sign in to AFFiNE</Title>
+      <Content>
+        <P>
+          Click the button below to securely sign in. The magic link will expire
+          in 30 minutes.
+        </P>
+        <Button href={props.url}>Sign in to AFFiNE</Button>
+      </Content>
+    </Template>
+  );
+}

packages/backend/server/src/mails/users/sign-up.tsx

@@ -0,0 +1,24 @@
+import { Bold, Button, Content, P, Template, Title } from '../components';
+
+export type SignUpProps = {
+  url: string;
+};
+
+export default function SignUp(props: SignUpProps) {
+  return (
+    <Template>
+      <Title>Create AFFiNE Account</Title>
+      <Content>
+        <P>
+          Click the button below to complete your account creation and sign in.
+          This magic link will expire in <Bold>30 minutes</Bold>.
+        </P>
+        <Button href={props.url}>Create account and sign in</Button>
+      </Content>
+    </Template>
+  );
+}
+
+SignUp.PreviewProps = {
+  url: 'https://app.affine.pro',
+};