feat(web): send test email button (immich-app#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
ChokunPlayZ · Jun 7, 2024 · 9ac2ac2 · 9ac2ac2
1 parent d5f3d98
commit 9ac2ac2
Show file tree

Hide file tree

Showing 15 changed files with 380 additions and 17 deletions.
diff --git a/docs/static/img/ios-app-store-badge.png b/docs/static/img/ios-app-store-badge.png
diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md
diff --git a/mobile/openapi/lib/api.dart b/mobile/openapi/lib/api.dart
diff --git a/mobile/openapi/lib/api/notifications_api.dart b/mobile/openapi/lib/api/notifications_api.dart
diff --git a/open-api/immich-openapi-specs.json b/open-api/immich-openapi-specs.json
@@ -3466,6 +3466,41 @@
         ]
       }
     },
+    "/notifications/test-email": {
+      "post": {
+        "operationId": "sendTestEmail",
+        "parameters": [],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/SystemConfigSmtpDto"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": ""
+          }
+        },
+        "security": [
+          {
+            "bearer": []
+          },
+          {
+            "cookie": []
+          },
+          {
+            "api_key": []
+          }
+        ],
+        "tags": [
+          "Notifications"
+        ]
+      }
+    },
     "/oauth/authorize": {
       "post": {
         "operationId": "startOAuth",

diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts
@@ -554,6 +554,19 @@ export type MemoryUpdateDto = {
     memoryAt?: string;
     seenAt?: string;
 };
+export type SystemConfigSmtpTransportDto = {
+    host: string;
+    ignoreCert: boolean;
+    password: string;
+    port: number;
+    username: string;
+};
+export type SystemConfigSmtpDto = {
+    enabled: boolean;
+    "from": string;
+    replyTo: string;
+    transport: SystemConfigSmtpTransportDto;
+};
 export type OAuthConfigDto = {
     redirectUri: string;
 };
@@ -990,19 +1003,6 @@ export type SystemConfigMapDto = {
 export type SystemConfigNewVersionCheckDto = {
     enabled: boolean;
 };
-export type SystemConfigSmtpTransportDto = {
-    host: string;
-    ignoreCert: boolean;
-    password: string;
-    port: number;
-    username: string;
-};
-export type SystemConfigSmtpDto = {
-    enabled: boolean;
-    "from": string;
-    replyTo: string;
-    transport: SystemConfigSmtpTransportDto;
-};
 export type SystemConfigNotificationsDto = {
     smtp: SystemConfigSmtpDto;
 };
@@ -2022,6 +2022,15 @@ export function addMemoryAssets({ id, bulkIdsDto }: {
         body: bulkIdsDto
     })));
 }
+export function sendTestEmail({ systemConfigSmtpDto }: {
+    systemConfigSmtpDto: SystemConfigSmtpDto;
+}, opts?: Oazapfts.RequestOpts) {
+    return oazapfts.ok(oazapfts.fetchText("/notifications/test-email", oazapfts.json({
+        ...opts,
+        method: "POST",
+        body: systemConfigSmtpDto
+    })));
+}
 export function startOAuth({ oAuthConfigDto }: {
     oAuthConfigDto: OAuthConfigDto;
 }, opts?: Oazapfts.RequestOpts) {

diff --git a/server/src/controllers/index.ts b/server/src/controllers/index.ts
@@ -14,6 +14,7 @@ import { JobController } from 'src/controllers/job.controller';
 import { LibraryController } from 'src/controllers/library.controller';
 import { MapController } from 'src/controllers/map.controller';
 import { MemoryController } from 'src/controllers/memory.controller';
+import { NotificationController } from 'src/controllers/notification.controller';
 import { OAuthController } from 'src/controllers/oauth.controller';
 import { PartnerController } from 'src/controllers/partner.controller';
 import { PersonController } from 'src/controllers/person.controller';
@@ -46,6 +47,7 @@ export const controllers = [
   LibraryController,
   MapController,
   MemoryController,
+  NotificationController,
   OAuthController,
   PartnerController,
   PersonController,

diff --git a/server/src/controllers/notification.controller.ts b/server/src/controllers/notification.controller.ts
@@ -0,0 +1,19 @@
+import { Body, Controller, HttpCode, Post } from '@nestjs/common';
+import { ApiTags } from '@nestjs/swagger';
+import { AuthDto } from 'src/dtos/auth.dto';
+import { SystemConfigSmtpDto } from 'src/dtos/system-config.dto';
+import { Auth, Authenticated } from 'src/middleware/auth.guard';
+import { NotificationService } from 'src/services/notification.service';
+
+@ApiTags('Notifications')
+@Controller('notifications')
+export class NotificationController {
+  constructor(private service: NotificationService) {}
+
+  @Post('test-email')
+  @HttpCode(200)
+  @Authenticated({ admin: true })
+  sendTestEmail(@Auth() auth: AuthDto, @Body() dto: SystemConfigSmtpDto) {
+    return this.service.sendTestEmail(auth.user.id, dto);
+  }
+}
diff --git a/server/src/dtos/system-config.dto.ts b/server/src/dtos/system-config.dto.ts
@@ -394,7 +394,7 @@ class SystemConfigSmtpTransportDto {
   password!: string;
 }
 
-class SystemConfigSmtpDto {
+export class SystemConfigSmtpDto {
   @IsBoolean()
   enabled!: boolean;
 

diff --git 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',
+};
diff --git a/server/src/interfaces/notification.interface.ts b/server/src/interfaces/notification.interface.ts
@@ -26,6 +26,8 @@ export type SmtpOptions = {
 };
 
 export enum EmailTemplate {
+  TEST_EMAIL = 'test',
+
   // AUTH
   WELCOME = 'welcome',
   RESET_PASSWORD = 'reset-password',
@@ -39,6 +41,10 @@ interface BaseEmailProps {
   baseUrl: string;
 }
 
+export interface TestEmailProps extends BaseEmailProps {
+  displayName: string;
+}
+
 export interface WelcomeEmailProps extends BaseEmailProps {
   displayName: string;
   username: string;
@@ -61,6 +67,10 @@ export interface AlbumUpdateEmailProps extends BaseEmailProps {
 }
 
 export type EmailRenderRequest =
+  | {
+      template: EmailTemplate.TEST_EMAIL;
+      data: TestEmailProps;
+    }
   | {
       template: EmailTemplate.WELCOME;
       data: WelcomeEmailProps;