feat(web): send test email button (#10011)

* feat(web): test email button * openapi * UI button * Show notification * pr feedback * remove jobs * send email directly from repository and add feedback * avoid sending many emails * linter * pr feedback * lint * lint * lint
2025-12-28 17:24:56 +03:00 · 2024-06-07 11:34:09 -05:00
parent d5f3d98dfc
commit 9ac2ac2fcb
15 changed files with 380 additions and 17 deletions
--- a/server/src/emails/test.email.tsx
+++ b/server/src/emails/test.email.tsx
@@ -0,0 +1,134 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from '@react-email/components';
+import * as CSS from 'csstype';
+import * as React from 'react';
+import { TestEmailProps } from 'src/interfaces/notification.interface';
+
+export const TestEmail = ({ baseUrl, displayName }: TestEmailProps) => (
+  <Html>
+    <Head />
+    <Preview>This is a test email from Immich</Preview>
+    <Body
+      style={{
+        margin: 0,
+        padding: 0,
+        backgroundColor: '#ffffff',
+        color: 'rgb(66, 80, 175)',
+        fontFamily: 'Overpass, sans-serif',
+        fontSize: '18px',
+        lineHeight: '24px',
+      }}
+    >
+      <Container
+        style={{
+          width: '480px',
+          maxWidth: '100%',
+          padding: '10px',
+          margin: '0 auto',
+        }}
+      >
+        <Section
+          style={{
+            padding: '36px',
+            tableLayout: 'fixed',
+            backgroundColor: 'rgb(226, 232, 240)',
+            border: 'solid 0px rgb(248 113 113)',
+            borderRadius: '50px',
+            textAlign: 'center' as const,
+          }}
+        >
+          <Img
+            src="https://immich.app/img/immich-logo-inline-light.png"
+            alt="Immich"
+            style={{
+              height: 'auto',
+              margin: '0 auto 48px auto',
+              width: '50%',
+              alignSelf: 'center',
+              color: 'white',
+            }}
+          />
+
+          <Text style={text}>
+            Hey <strong>{displayName}</strong>, this is the test email from your Immich Instance
+          </Text>
+
+          <Row>
+            <Link style={{ marginTop: '50px' }} href={baseUrl}>
+              {baseUrl}
+            </Link>
+          </Row>
+        </Section>
+
+        <Hr style={{ color: 'rgb(66, 80, 175)', marginTop: '24px' }} />
+
+        <Section style={{ textAlign: 'center' }}>
+          <Row>
+            <Column align="center">
+              <Link href="https://play.google.com/store/apps/details?id=app.alextran.immich">
+                <Img src={`https://immich.app/img/google-play-badge.png`} height="96px" alt="Immich" />
+              </Link>
+              <Link href="https://apps.apple.com/sg/app/immich/id1613945652">
+                <Img
+                  src={`https://immich.app/img/ios-app-store-badge.png`}
+                  alt="Immich"
+                  style={{ height: '72px', padding: '14px' }}
+                />
+              </Link>
+            </Column>
+          </Row>
+        </Section>
+
+        <Text
+          style={{
+            color: '#6a737d',
+            fontSize: '0.8rem',
+            textAlign: 'center' as const,
+            marginTop: '12px',
+          }}
+        >
+          <Link href="https://immich.app">Immich</Link> project is available under GNU AGPL v3 license.
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+TestEmail.PreviewProps = {
+  baseUrl: 'https://demo.immich.app/auth/login',
+  displayName: 'Alan Turing',
+} as TestEmailProps;
+
+export default TestEmail;
+
+const text = {
+  margin: '0 0 24px 0',
+  textAlign: 'left' as const,
+  fontSize: '18px',
+  lineHeight: '24px',
+};
+
+const button: CSS.Properties = {
+  backgroundColor: 'rgb(66, 80, 175)',
+  margin: '1em 0',
+  padding: '0.75em 3em',
+  color: '#fff',
+  fontSize: '1em',
+  fontWeight: 700,
+  lineHeight: 1.5,
+  textTransform: 'uppercase',
+  borderRadius: '9999px',
+};