feat(core): support one time password (#9798)

packages/backend/server/src/mails/components/template.tsx

@@ -46,6 +46,21 @@ export function Text(props: PropsWithChildren) {
   return <span style={BasicTextStyle}>{props.children}</span>;
 }
 
+export function SecondaryText(props: PropsWithChildren) {
+  return (
+    <span
+      style={{
+        ...BasicTextStyle,
+        color: '#7A7A7A',
+        fontSize: '14px',
+        lineHeight: '22px',
+      }}
+    >
+      {props.children}
+    </span>
+  );
+}
+
 export function Bold(props: PropsWithChildren) {
   return <span style={{ fontWeight: 600 }}>{props.children}</span>;
 }
@@ -70,6 +85,23 @@ export const Avatar = (props: {
   );
 };
 
+export const OnelineCodeBlock = (props: PropsWithChildren) => {
+  return (
+    <pre
+      style={{
+        ...BasicTextStyle,
+        whiteSpace: 'nowrap',
+        border: '1px solid rgba(0,0,0,.1)',
+        padding: '8px 10px',
+        borderRadius: '4px',
+        backgroundColor: '#F5F5F5',
+      }}
+    >
+      {props.children}
+    </pre>
+  );
+};
+
 export const Name = (props: PropsWithChildren) => {
   return <Bold>{props.children}</Bold>;
 };

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

@@ -1,20 +1,41 @@
-import { Button, Content, P, Template, Title } from '../components';
+import {
+  Button,
+  Content,
+  OnelineCodeBlock,
+  P,
+  SecondaryText,
+  Template,
+  Title,
+} from '../components';
 
 export type SignInProps = {
   url: string;
+  otp: string;
 };
 
-export default function SignUp(props: SignInProps) {
+export default function SignIn(props: SignInProps) {
   return (
     <Template>
-      <Title>Sign in to AFFiNE</Title>
+      <Title>Sign in to AFFiNE Cloud</Title>
       <Content>
+        <P>You are signing in to AFFiNE. Here is your code:</P>
+        <OnelineCodeBlock>{props.otp}</OnelineCodeBlock>
         <P>
-          Click the button below to securely sign in. The magic link will expire
-          in 30 minutes.
+          Alternatively, you can sign in directly by clicking the magic link
+          below:
+        </P>
+        <Button href={props.url}>Sign in with Magic Link</Button>
+        <P>
+          <SecondaryText>
+            This code and link will expire in 30 minutes.
+          </SecondaryText>
         </P>
-        <Button href={props.url}>Sign in to AFFiNE</Button>
       </Content>
     </Template>
   );
 }
+
+SignIn.PreviewProps = {
+  url: 'https://app.affine.pro/magic-link?token=123456&email=test@test.com',
+  otp: '123456',
+};

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

@@ -1,24 +1,41 @@
-import { Bold, Button, Content, P, Template, Title } from '../components';
+import {
+  Button,
+  Content,
+  OnelineCodeBlock,
+  P,
+  SecondaryText,
+  Template,
+  Title,
+} from '../components';
 
 export type SignUpProps = {
   url: string;
+  otp: string;
 };
 
 export default function SignUp(props: SignUpProps) {
   return (
     <Template>
-      <Title>Create AFFiNE Account</Title>
+      <Title>Sign up to AFFiNE Cloud</Title>
       <Content>
+        <P>You are signing up to AFFiNE. Here is your code:</P>
+        <OnelineCodeBlock>{props.otp}</OnelineCodeBlock>
         <P>
-          Click the button below to complete your account creation and sign in.
-          This magic link will expire in <Bold>30 minutes</Bold>.
+          Alternatively, you can sign up directly by clicking the magic link
+          below:
+        </P>
+        <Button href={props.url}>Sign up with Magic Link</Button>
+        <P>
+          <SecondaryText>
+            This code and link will expire in 30 minutes.
+          </SecondaryText>
         </P>
-        <Button href={props.url}>Create account and sign in</Button>
       </Content>
     </Template>
   );
 }
 
 SignUp.PreviewProps = {
-  url: 'https://app.affine.pro',
+  url: 'https://app.affine.pro/magic-link?token=123456&email=test@test.com',
+  otp: '123456',
 };