feat(server): email notifications (#8447)

* feat(server): add `react-mail` as mail template engine and `nodemailer`

* feat(server): add `smtp` related configs to `SystemConfig`

* feat(web): add page for SMTP settings

* feat(server): add `react-email.adapter`

This adapter render the React-Email into HTML and plain/text email.
The output is set as the body of the email.

* feat(server): add `MailRepository` and `MailService`

Allow to use the NestJS-modules-mailer module to send SMTP emails.
This is the base transport for the `NotificationRepository`

* feat(server): register the job dispatcher and Job for async email

This allows to queue email sending jobs for the `EmailService`.

* feat(server): add `NotificationRepository` and `NotificationService`

This act as a middleware to properly route the notification to the right transport.
As POC I've only implemented a simple SMTP transport.

* feat(server): add `welcome` email template

* feat(server): add the first notification on `createUser` in `UserService`

This trigger an event for the `NotificationRepository` that once processes
by using the global config and per-user config will carry the payload to the right notification transport.

* chore: clean up

* chore: clean up web

* fix: type errors"

* fix package lock

* fix mail sending, option to ignore certs

* chore: open api

* chore: clean up

* remove unused import

* feat: email feature flag

* chore: remove unused interface

* small styling

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

server/src/repositories/index.ts

@@ -19,6 +19,7 @@ import { IMemoryRepository } from 'src/interfaces/memory.interface';
 import { IMetadataRepository } from 'src/interfaces/metadata.interface';
 import { IMetricRepository } from 'src/interfaces/metric.interface';
 import { IMoveRepository } from 'src/interfaces/move.interface';
+import { INotificationRepository } from 'src/interfaces/notification.interface';
 import { IPartnerRepository } from 'src/interfaces/partner.interface';
 import { IPersonRepository } from 'src/interfaces/person.interface';
 import { ISearchRepository } from 'src/interfaces/search.interface';
@@ -51,6 +52,7 @@ import { MemoryRepository } from 'src/repositories/memory.repository';
 import { MetadataRepository } from 'src/repositories/metadata.repository';
 import { MetricRepository } from 'src/repositories/metric.repository';
 import { MoveRepository } from 'src/repositories/move.repository';
+import { NotificationRepository } from 'src/repositories/notification.repository';
 import { PartnerRepository } from 'src/repositories/partner.repository';
 import { PersonRepository } from 'src/repositories/person.repository';
 import { SearchRepository } from 'src/repositories/search.repository';
@@ -84,6 +86,7 @@ export const repositories = [
   { provide: IMetadataRepository, useClass: MetadataRepository },
   { provide: IMetricRepository, useClass: MetricRepository },
   { provide: IMoveRepository, useClass: MoveRepository },
+  { provide: INotificationRepository, useClass: NotificationRepository },
   { provide: IPartnerRepository, useClass: PartnerRepository },
   { provide: IPersonRepository, useClass: PersonRepository },
   { provide: IServerInfoRepository, useClass: ServerInfoRepository },

server/src/repositories/job.repository.ts

@@ -78,6 +78,10 @@ export const JOBS_TO_QUEUE: Record<JobName, QueueName> = {
   [JobName.LIBRARY_REMOVE_OFFLINE]: QueueName.LIBRARY,
   [JobName.LIBRARY_QUEUE_SCAN_ALL]: QueueName.LIBRARY,
   [JobName.LIBRARY_QUEUE_CLEANUP]: QueueName.LIBRARY,
+
+  // Notification
+  [JobName.SEND_EMAIL]: QueueName.NOTIFICATION,
+  [JobName.NOTIFY_SIGNUP]: QueueName.NOTIFICATION,
 };
 
 @Instrumentation()

server/src/repositories/notification.repository.ts

@@ -0,0 +1,72 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { render } from '@react-email/render';
+import { createTransport } from 'nodemailer';
+import React from 'react';
+import { WelcomeEmail } from 'src/emails/welcome.email';
+import { ILoggerRepository } from 'src/interfaces/logger.interface';
+import {
+  EmailRenderRequest,
+  EmailTemplate,
+  INotificationRepository,
+  SendEmailOptions,
+  SendEmailResponse,
+  SmtpOptions,
+} from 'src/interfaces/notification.interface';
+import { Instrumentation } from 'src/utils/instrumentation';
+
+@Instrumentation()
+@Injectable()
+export class NotificationRepository implements INotificationRepository {
+  constructor(@Inject(ILoggerRepository) private logger: ILoggerRepository) {
+    this.logger.setContext(NotificationRepository.name);
+  }
+
+  verifySmtp(options: SmtpOptions): Promise<true> {
+    const transport = this.createTransport(options);
+    try {
+      return transport.verify();
+    } finally {
+      transport.close();
+    }
+  }
+
+  renderEmail(request: EmailRenderRequest): { html: string; text: string } {
+    const component = this.render(request);
+    const html = render(component, { pretty: true });
+    const text = render(component, { plainText: true });
+    return { html, text };
+  }
+
+  sendEmail({ to, from, subject, html, text, smtp }: SendEmailOptions): Promise<SendEmailResponse> {
+    this.logger.debug(`Sending email to ${to} with subject: ${subject}`);
+    const transport = this.createTransport(smtp);
+    try {
+      return transport.sendMail({ to, from, subject, html, text });
+    } finally {
+      transport.close();
+    }
+  }
+
+  private render({ template, data }: EmailRenderRequest): React.FunctionComponentElement<any> {
+    switch (template) {
+      case EmailTemplate.WELCOME: {
+        return React.createElement(WelcomeEmail, data);
+      }
+    }
+  }
+
+  private createTransport(options: SmtpOptions) {
+    return createTransport({
+      host: options.host,
+      port: options.port,
+      tls: { rejectUnauthorized: options.ignoreCert },
+      auth:
+        options.username || options.password
+          ? {
+              user: options.username,
+              pass: options.password,
+            }
+          : undefined,
+    });
+  }
+}