feat: Notification Email Templates (#13940)

server/src/emails/welcome.email.tsx

@@ -3,36 +3,62 @@ import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component';
 import ImmichLayout from 'src/emails/components/immich.layout';
 import { WelcomeEmailProps } from 'src/interfaces/notification.interface';
+import { replaceTemplateTags } from 'src/utils/replace-template-tags';
 
-export const WelcomeEmail = ({ baseUrl, displayName, username, password }: WelcomeEmailProps) => (
-  <ImmichLayout preview="You have been invited to a new Immich instance.">
-    <Text className="m-0">
-      Hey <strong>{displayName}</strong>!
-    </Text>
+export const WelcomeEmail = ({ baseUrl, displayName, username, password, customTemplate }: WelcomeEmailProps) => {
+  const usableTemplateVariables = {
+    displayName,
+    username,
+    password,
+    baseUrl,
+  };
 
-    <Text>A new account has been created for you.</Text>
+  const emailContent = customTemplate ? (
+    replaceTemplateTags(customTemplate, usableTemplateVariables)
+  ) : (
+    <>
+      <Text className="m-0">
+        Hey <strong>{displayName}</strong>!
+      </Text>
 
-    <Text>
-      <strong>Username</strong>: {username}
-      {password && (
-        <>
-          <br />
-          <strong>Password</strong>: {password}
-        </>
+      <Text>A new account has been created for you.</Text>
+
+      <Text>
+        <strong>Username</strong>: {username}
+        {password && (
+          <>
+            <br />
+            <strong>Password</strong>: {password}
+          </>
+        )}
+      </Text>
+    </>
+  );
+
+  return (
+    <ImmichLayout
+      preview={customTemplate ? emailContent.toString() : 'You have been invited to a new Immich instance.'}
+    >
+      {customTemplate && (
+        <Text className="m-0">
+          <div dangerouslySetInnerHTML={{ __html: emailContent }}></div>
+        </Text>
       )}
-    </Text>
 
-    <Section className="flex justify-center my-6">
-      <ImmichButton href={`${baseUrl}/auth/login`}>Login</ImmichButton>
-    </Section>
+      {!customTemplate && emailContent}
 
-    <Text className="text-xs">
-      If you cannot click the button use the link below to proceed with first login.
-      <br />
-      <Link href={baseUrl}>{baseUrl}</Link>
-    </Text>
-  </ImmichLayout>
-);
+      <Section className="flex justify-center my-6">
+        <ImmichButton href={`${baseUrl}/auth/login`}>Login</ImmichButton>
+      </Section>
+
+      <Text className="text-xs">
+        If you cannot click the button use the link below to proceed with first login.
+        <br />
+        <Link href={baseUrl}>{baseUrl}</Link>
+      </Text>
+    </ImmichLayout>
+  );
+};
 
 WelcomeEmail.PreviewProps = {
   baseUrl: 'https://demo.immich.app/auth/login',