diff --git a/docs/docs/administration/email-notification.mdx b/docs/docs/administration/email-notification.mdx index 93b105105..2f244f335 100644 --- a/docs/docs/administration/email-notification.mdx +++ b/docs/docs/administration/email-notification.mdx @@ -19,3 +19,9 @@ You can use [this guide](/docs/guides/smtp-gmail) to use Gmail's SMTP server. Users can manage their email notification settings from their account settings page on the web. They can choose to turn email notifications on or off for the following events: + +## Notification templates + +You can override the default notification text with custom templates in HTML format. You can use tags to show dynamic tags in your templates. + + diff --git a/docs/docs/administration/img/user-notifications-templates.png b/docs/docs/administration/img/user-notifications-templates.png new file mode 100644 index 000000000..150d39b7a Binary files /dev/null and b/docs/docs/administration/img/user-notifications-templates.png differ diff --git a/docs/docs/administration/system-settings.md b/docs/docs/administration/system-settings.md index 9f35ed101..59012c99b 100644 --- a/docs/docs/administration/system-settings.md +++ b/docs/docs/administration/system-settings.md @@ -157,6 +157,10 @@ Immich supports [Reverse Geocoding](/docs/features/reverse-geocoding) using data SMTP server setup, for user creation notifications, new albums, etc. More information can be found [here](/docs/administration/email-notification) +## Notification Templates + +Override the default notifications text with notification templates. More information can be found [here](/docs/administration/email-notification) + ## Server Settings ### External Domain diff --git a/i18n/en.json b/i18n/en.json index 907f5df18..9741c10b2 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -252,6 +252,16 @@ "storage_template_user_label": "{label} is the user's Storage Label", "system_settings": "System Settings", "tag_cleanup_job": "Tag cleanup", + "template_email_preview": "Preview", + "template_email_settings": "Email Templates", + "template_email_settings_description": "Manage custom email notification templates", + "template_email_welcome": "Welcome email template", + "template_email_invite_album": "Invite Album Template", + "template_email_update_album": "Update Album Template", + "template_settings": "Notification Templates", + "template_settings_description": "Manage custom templates for notifications.", + "template_email_if_empty": "If the template is empty, the default email will be used.", + "template_email_available_tags": "You can use the following variables in your template: {tags}", "theme_custom_css_settings": "Custom CSS", "theme_custom_css_settings_description": "Cascading Style Sheets allow the design of Immich to be customized.", "theme_settings": "Theme Settings", @@ -1325,4 +1335,4 @@ "zoom_image": "Zoom Image", "timeline": "Timeline", "total": "Total" -} +} \ No newline at end of file diff --git a/i18n/nl.json b/i18n/nl.json index ade7a5092..3420c5d10 100644 --- a/i18n/nl.json +++ b/i18n/nl.json @@ -247,6 +247,16 @@ "storage_template_user_label": "{label} is het opslaglabel van de gebruiker", "system_settings": "Systeeminstellingen", "tag_cleanup_job": "Tag opschoning", + "template_email_settings": "Email", + "template_email_settings_description": "Beheer aangepaste email melding sjablonen", + "template_email_preview": "Voorbeeld", + "template_email_welcome": "Welkom email sjabloon", + "template_email_invite_album": "Uitgenodigd in album sjabloon", + "template_email_update_album": "Update in album sjabloon", + "template_settings": "Melding sjablonen", + "template_settings_description": "Beheer aangepast sjablonen voor meldingen.", + "template_email_if_empty": "Wanneer het sjabloon leeg is, wordt de standaard mail gebruikt.", + "template_email_available_tags": "Je kan de volgende tags gebruiken in een template: {tags}", "theme_custom_css_settings": "Aangepaste CSS", "theme_custom_css_settings_description": "Met Cascading Style Sheets kan het ontwerp van Immich worden aangepast.", "theme_settings": "Thema instellingen", diff --git a/mobile/openapi/README.md b/mobile/openapi/README.md index 778093590..b97ff5411 100644 Binary files a/mobile/openapi/README.md and b/mobile/openapi/README.md differ diff --git a/mobile/openapi/lib/api.dart b/mobile/openapi/lib/api.dart index e1c343ad5..73eb02d89 100644 Binary files a/mobile/openapi/lib/api.dart and b/mobile/openapi/lib/api.dart differ diff --git a/mobile/openapi/lib/api/notifications_api.dart b/mobile/openapi/lib/api/notifications_api.dart index 0681d5824..323fbcc3d 100644 Binary files a/mobile/openapi/lib/api/notifications_api.dart and b/mobile/openapi/lib/api/notifications_api.dart differ diff --git a/mobile/openapi/lib/api_client.dart b/mobile/openapi/lib/api_client.dart index b71e6f45f..a6f8d551d 100644 Binary files a/mobile/openapi/lib/api_client.dart and b/mobile/openapi/lib/api_client.dart differ diff --git a/mobile/openapi/lib/model/system_config_dto.dart b/mobile/openapi/lib/model/system_config_dto.dart index 421595390..59d5f09fc 100644 Binary files a/mobile/openapi/lib/model/system_config_dto.dart and b/mobile/openapi/lib/model/system_config_dto.dart differ diff --git a/mobile/openapi/lib/model/system_config_template_emails_dto.dart b/mobile/openapi/lib/model/system_config_template_emails_dto.dart new file mode 100644 index 000000000..9db85509f Binary files /dev/null and b/mobile/openapi/lib/model/system_config_template_emails_dto.dart differ diff --git a/mobile/openapi/lib/model/system_config_templates_dto.dart b/mobile/openapi/lib/model/system_config_templates_dto.dart new file mode 100644 index 000000000..a5e883497 Binary files /dev/null and b/mobile/openapi/lib/model/system_config_templates_dto.dart differ diff --git a/mobile/openapi/lib/model/template_dto.dart b/mobile/openapi/lib/model/template_dto.dart new file mode 100644 index 000000000..f818e0508 Binary files /dev/null and b/mobile/openapi/lib/model/template_dto.dart differ diff --git a/mobile/openapi/lib/model/template_response_dto.dart b/mobile/openapi/lib/model/template_response_dto.dart new file mode 100644 index 000000000..3c3224a54 Binary files /dev/null and b/mobile/openapi/lib/model/template_response_dto.dart differ diff --git a/open-api/immich-openapi-specs.json b/open-api/immich-openapi-specs.json index bc32a32e0..43985cae8 100644 --- a/open-api/immich-openapi-specs.json +++ b/open-api/immich-openapi-specs.json @@ -3430,6 +3430,57 @@ ] } }, + "/notifications/templates/{name}": { + "post": { + "operationId": "getNotificationTemplate", + "parameters": [ + { + "name": "name", + "required": true, + "in": "path", + "schema": { + "type": "string" + } + } + ], + "requestBody": { + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/TemplateDto" + } + } + }, + "required": true + }, + "responses": { + "200": { + "content": { + "application/json": { + "schema": { + "$ref": "#/components/schemas/TemplateResponseDto" + } + } + }, + "description": "" + } + }, + "security": [ + { + "bearer": [] + }, + { + "cookie": [] + }, + { + "api_key": [] + } + ], + "tags": [ + "Notifications" + ] + } + }, "/notifications/test-email": { "post": { "operationId": "sendTestEmail", @@ -11538,6 +11589,9 @@ "storageTemplate": { "$ref": "#/components/schemas/SystemConfigStorageTemplateDto" }, + "templates": { + "$ref": "#/components/schemas/SystemConfigTemplatesDto" + }, "theme": { "$ref": "#/components/schemas/SystemConfigThemeDto" }, @@ -11565,6 +11619,7 @@ "reverseGeocoding", "server", "storageTemplate", + "templates", "theme", "trash", "user" @@ -12111,6 +12166,25 @@ ], "type": "object" }, + "SystemConfigTemplateEmailsDto": { + "properties": { + "albumInviteTemplate": { + "type": "string" + }, + "albumUpdateTemplate": { + "type": "string" + }, + "welcomeTemplate": { + "type": "string" + } + }, + "required": [ + "albumInviteTemplate", + "albumUpdateTemplate", + "welcomeTemplate" + ], + "type": "object" + }, "SystemConfigTemplateStorageOptionDto": { "properties": { "dayOptions": { @@ -12174,6 +12248,17 @@ ], "type": "object" }, + "SystemConfigTemplatesDto": { + "properties": { + "email": { + "$ref": "#/components/schemas/SystemConfigTemplateEmailsDto" + } + }, + "required": [ + "email" + ], + "type": "object" + }, "SystemConfigThemeDto": { "properties": { "customCss": { @@ -12352,6 +12437,32 @@ }, "type": "object" }, + "TemplateDto": { + "properties": { + "template": { + "type": "string" + } + }, + "required": [ + "template" + ], + "type": "object" + }, + "TemplateResponseDto": { + "properties": { + "html": { + "type": "string" + }, + "name": { + "type": "string" + } + }, + "required": [ + "html", + "name" + ], + "type": "object" + }, "TestEmailResponseDto": { "properties": { "messageId": { diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts index d786139ab..20d0c5715 100644 --- a/open-api/typescript-sdk/src/fetch-client.ts +++ b/open-api/typescript-sdk/src/fetch-client.ts @@ -634,6 +634,13 @@ export type MemoryUpdateDto = { memoryAt?: string; seenAt?: string; }; +export type TemplateDto = { + template: string; +}; +export type TemplateResponseDto = { + html: string; + name: string; +}; export type SystemConfigSmtpTransportDto = { host: string; ignoreCert: boolean; @@ -1232,6 +1239,14 @@ export type SystemConfigStorageTemplateDto = { hashVerificationEnabled: boolean; template: string; }; +export type SystemConfigTemplateEmailsDto = { + albumInviteTemplate: string; + albumUpdateTemplate: string; + welcomeTemplate: string; +}; +export type SystemConfigTemplatesDto = { + email: SystemConfigTemplateEmailsDto; +}; export type SystemConfigThemeDto = { customCss: string; }; @@ -1259,6 +1274,7 @@ export type SystemConfigDto = { reverseGeocoding: SystemConfigReverseGeocodingDto; server: SystemConfigServerDto; storageTemplate: SystemConfigStorageTemplateDto; + templates: SystemConfigTemplatesDto; theme: SystemConfigThemeDto; trash: SystemConfigTrashDto; user: SystemConfigUserDto; @@ -2227,6 +2243,19 @@ export function addMemoryAssets({ id, bulkIdsDto }: { body: bulkIdsDto }))); } +export function getNotificationTemplate({ name, templateDto }: { + name: string; + templateDto: TemplateDto; +}, opts?: Oazapfts.RequestOpts) { + return oazapfts.ok(oazapfts.fetchJson<{ + status: 200; + data: TemplateResponseDto; + }>(`/notifications/templates/${encodeURIComponent(name)}`, oazapfts.json({ + ...opts, + method: "POST", + body: templateDto + }))); +} export function sendTestEmail({ systemConfigSmtpDto }: { systemConfigSmtpDto: SystemConfigSmtpDto; }, opts?: Oazapfts.RequestOpts) { diff --git a/server/src/config.ts b/server/src/config.ts index dd850e063..265897420 100644 --- a/server/src/config.ts +++ b/server/src/config.ts @@ -146,6 +146,13 @@ export interface SystemConfig { }; }; }; + templates: { + email: { + welcomeTemplate: string; + albumInviteTemplate: string; + albumUpdateTemplate: string; + }; + }; server: { externalDomain: string; loginPageMessage: string; @@ -313,6 +320,13 @@ export const defaults = Object.freeze({ }, }, }, + templates: { + email: { + welcomeTemplate: '', + albumInviteTemplate: '', + albumUpdateTemplate: '', + }, + }, user: { deleteDelay: 7, }, diff --git a/server/src/controllers/notification.controller.ts b/server/src/controllers/notification.controller.ts index 3dd72dd73..27034fd63 100644 --- a/server/src/controllers/notification.controller.ts +++ b/server/src/controllers/notification.controller.ts @@ -1,8 +1,9 @@ -import { Body, Controller, HttpCode, HttpStatus, Post } from '@nestjs/common'; +import { Body, Controller, HttpCode, HttpStatus, Param, Post } from '@nestjs/common'; import { ApiTags } from '@nestjs/swagger'; import { AuthDto } from 'src/dtos/auth.dto'; -import { TestEmailResponseDto } from 'src/dtos/notification.dto'; +import { TemplateDto, TemplateResponseDto, TestEmailResponseDto } from 'src/dtos/notification.dto'; import { SystemConfigSmtpDto } from 'src/dtos/system-config.dto'; +import { EmailTemplate } from 'src/interfaces/notification.interface'; import { Auth, Authenticated } from 'src/middleware/auth.guard'; import { NotificationService } from 'src/services/notification.service'; @@ -17,4 +18,15 @@ export class NotificationController { sendTestEmail(@Auth() auth: AuthDto, @Body() dto: SystemConfigSmtpDto): Promise { return this.service.sendTestEmail(auth.user.id, dto); } + + @Post('templates/:name') + @HttpCode(HttpStatus.OK) + @Authenticated({ admin: true }) + getNotificationTemplate( + @Auth() auth: AuthDto, + @Param('name') name: EmailTemplate, + @Body() dto: TemplateDto, + ): Promise { + return this.service.getTemplate(name, dto.template); + } } diff --git a/server/src/dtos/notification.dto.ts b/server/src/dtos/notification.dto.ts index 34b392358..c1a09c801 100644 --- a/server/src/dtos/notification.dto.ts +++ b/server/src/dtos/notification.dto.ts @@ -1,3 +1,13 @@ +import { IsString } from 'class-validator'; + export class TestEmailResponseDto { messageId!: string; } +export class TemplateResponseDto { + name!: string; + html!: string; +} +export class TemplateDto { + @IsString() + template!: string; +} diff --git a/server/src/dtos/system-config.dto.ts b/server/src/dtos/system-config.dto.ts index 894f4c794..350918254 100644 --- a/server/src/dtos/system-config.dto.ts +++ b/server/src/dtos/system-config.dto.ts @@ -465,6 +465,24 @@ class SystemConfigNotificationsDto { smtp!: SystemConfigSmtpDto; } +class SystemConfigTemplateEmailsDto { + @IsString() + albumInviteTemplate!: string; + + @IsString() + welcomeTemplate!: string; + + @IsString() + albumUpdateTemplate!: string; +} + +class SystemConfigTemplatesDto { + @Type(() => SystemConfigTemplateEmailsDto) + @ValidateNested() + @IsObject() + email!: SystemConfigTemplateEmailsDto; +} + class SystemConfigStorageTemplateDto { @ValidateBoolean() enabled!: boolean; @@ -636,6 +654,11 @@ export class SystemConfigDto implements SystemConfig { @IsObject() notifications!: SystemConfigNotificationsDto; + @Type(() => SystemConfigTemplatesDto) + @ValidateNested() + @IsObject() + templates!: SystemConfigTemplatesDto; + @Type(() => SystemConfigServerDto) @ValidateNested() @IsObject() diff --git a/server/src/emails/album-invite.email.tsx b/server/src/emails/album-invite.email.tsx index 232ef5290..0b3819b33 100644 --- a/server/src/emails/album-invite.email.tsx +++ b/server/src/emails/album-invite.email.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { ImmichButton } from 'src/emails/components/button.component'; import ImmichLayout from 'src/emails/components/immich.layout'; import { AlbumInviteEmailProps } from 'src/interfaces/notification.interface'; +import { replaceTemplateTags } from 'src/utils/replace-template-tags'; export const AlbumInviteEmail = ({ baseUrl, @@ -11,39 +12,64 @@ export const AlbumInviteEmail = ({ senderName, albumId, cid, -}: AlbumInviteEmailProps) => ( - - - Hey {recipientName}! - + customTemplate, +}: AlbumInviteEmailProps) => { + const variables = { + albumName, + recipientName, + senderName, + albumId, + baseUrl, + }; - - {senderName} has added you to the album {albumName}. - + const emailContent = customTemplate ? ( + replaceTemplateTags(customTemplate, variables) + ) : ( + <> + + Hey {recipientName}! + - {cid && ( -
- + + {senderName} has added you to the album {albumName}. + + + ); + + return ( + + {customTemplate && ( + +
+
+ )} + + {!customTemplate && emailContent} + + {cid && ( +
+ +
+ )} + +
+ View Album
- )} -
- View Album -
- - - If you cannot click the button use the link below to view the album. -
- {`${baseUrl}/albums/${albumId}`} -
-
-); + + If you cannot click the button use the link below to view the album. +
+ {`${baseUrl}/albums/${albumId}`} +
+ + ); +}; AlbumInviteEmail.PreviewProps = { baseUrl: 'https://demo.immich.app', diff --git a/server/src/emails/album-update.email.tsx b/server/src/emails/album-update.email.tsx index 0fb5ad931..9dcd858e9 100644 --- a/server/src/emails/album-update.email.tsx +++ b/server/src/emails/album-update.email.tsx @@ -3,47 +3,80 @@ import * as React from 'react'; import { ImmichButton } from 'src/emails/components/button.component'; import ImmichLayout from 'src/emails/components/immich.layout'; import { AlbumUpdateEmailProps } from 'src/interfaces/notification.interface'; +import { replaceTemplateTags } from 'src/utils/replace-template-tags'; -export const AlbumUpdateEmail = ({ baseUrl, albumName, recipientName, albumId, cid }: AlbumUpdateEmailProps) => ( - - - Hey {recipientName}! - +export const AlbumUpdateEmail = ({ + baseUrl, + albumName, + recipientName, + albumId, + cid, + customTemplate, +}: AlbumUpdateEmailProps) => { + const usableTemplateVariables = { + albumName, + recipientName, + albumId, + baseUrl, + }; - - New media has been added to {albumName}, -
check it out! -
+ const emailContent = customTemplate ? ( + replaceTemplateTags(customTemplate, usableTemplateVariables) + ) : ( + <> + + Hey {recipientName}! + - {cid && ( -
- + + New media has been added to {albumName}, +
check it out! +
+ + ); + + return ( + + {customTemplate && ( + +
+
+ )} + + {!customTemplate && emailContent} + + {cid && ( +
+ +
+ )} + +
+ View Album
- )} -
- View Album -
- - - If you cannot click the button use the link below to view the album. -
- {`${baseUrl}/albums/${albumId}`} -
-
-); + + If you cannot click the button use the link below to view the album. +
+ {`${baseUrl}/albums/${albumId}`} +
+ + ); +}; AlbumUpdateEmail.PreviewProps = { baseUrl: 'https://demo.immich.app', albumName: 'Trip to Europe', albumId: 'b63f6dae-e1c9-401b-9a85-9dbbf5612539', recipientName: 'Alan Turing', + cid: '', + customTemplate: '', } as AlbumUpdateEmailProps; export default AlbumUpdateEmail; diff --git a/server/src/emails/welcome.email.tsx b/server/src/emails/welcome.email.tsx index e031ac6b9..ced0b7769 100644 --- a/server/src/emails/welcome.email.tsx +++ b/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) => ( - - - Hey {displayName}! - +export const WelcomeEmail = ({ baseUrl, displayName, username, password, customTemplate }: WelcomeEmailProps) => { + const usableTemplateVariables = { + displayName, + username, + password, + baseUrl, + }; - A new account has been created for you. + const emailContent = customTemplate ? ( + replaceTemplateTags(customTemplate, usableTemplateVariables) + ) : ( + <> + + Hey {displayName}! + - - Username: {username} - {password && ( - <> -
- Password: {password} - + A new account has been created for you. + + + Username: {username} + {password && ( + <> +
+ Password: {password} + + )} +
+ + ); + + return ( + + {customTemplate && ( + +
+
)} -
-
- Login -
+ {!customTemplate && emailContent} - - If you cannot click the button use the link below to proceed with first login. -
- {baseUrl} -
-
-); +
+ Login +
+ + + If you cannot click the button use the link below to proceed with first login. +
+ {baseUrl} +
+ + ); +}; WelcomeEmail.PreviewProps = { baseUrl: 'https://demo.immich.app/auth/login', diff --git a/server/src/interfaces/notification.interface.ts b/server/src/interfaces/notification.interface.ts index ec0ecc534..b20b3c50a 100644 --- a/server/src/interfaces/notification.interface.ts +++ b/server/src/interfaces/notification.interface.ts @@ -39,6 +39,7 @@ export enum EmailTemplate { interface BaseEmailProps { baseUrl: string; + customTemplate?: string; } export interface TestEmailProps extends BaseEmailProps { @@ -70,18 +71,22 @@ export type EmailRenderRequest = | { template: EmailTemplate.TEST_EMAIL; data: TestEmailProps; + customTemplate: string; } | { template: EmailTemplate.WELCOME; data: WelcomeEmailProps; + customTemplate: string; } | { template: EmailTemplate.ALBUM_INVITE; data: AlbumInviteEmailProps; + customTemplate: string; } | { template: EmailTemplate.ALBUM_UPDATE; data: AlbumUpdateEmailProps; + customTemplate: string; }; export type SendEmailResponse = { diff --git a/server/src/repositories/notification.repository.spec.ts b/server/src/repositories/notification.repository.spec.ts index 983be21d2..368ba3f0c 100644 --- a/server/src/repositories/notification.repository.spec.ts +++ b/server/src/repositories/notification.repository.spec.ts @@ -21,6 +21,7 @@ describe(NotificationRepository.name, () => { const request: EmailRenderRequest = { template: EmailTemplate.TEST_EMAIL, data: { displayName: 'Alen Turing', baseUrl: 'http://localhost' }, + customTemplate: '', }; const result = await sut.renderEmail(request); @@ -33,6 +34,7 @@ describe(NotificationRepository.name, () => { const request: EmailRenderRequest = { template: EmailTemplate.WELCOME, data: { displayName: 'Alen Turing', username: 'turing', baseUrl: 'http://localhost' }, + customTemplate: '', }; const result = await sut.renderEmail(request); @@ -51,6 +53,7 @@ describe(NotificationRepository.name, () => { recipientName: 'Jane', baseUrl: 'http://localhost', }, + customTemplate: '', }; const result = await sut.renderEmail(request); @@ -63,6 +66,7 @@ describe(NotificationRepository.name, () => { const request: EmailRenderRequest = { template: EmailTemplate.ALBUM_UPDATE, data: { albumName: 'Holiday', albumId: '123', recipientName: 'Jane', baseUrl: 'http://localhost' }, + customTemplate: '', }; const result = await sut.renderEmail(request); diff --git a/server/src/repositories/notification.repository.ts b/server/src/repositories/notification.repository.ts index 293a80576..b2444301e 100644 --- a/server/src/repositories/notification.repository.ts +++ b/server/src/repositories/notification.repository.ts @@ -55,22 +55,22 @@ export class NotificationRepository implements INotificationRepository { } } - private render({ template, data }: EmailRenderRequest): React.FunctionComponentElement { + private render({ template, data, customTemplate }: EmailRenderRequest): React.FunctionComponentElement { switch (template) { case EmailTemplate.TEST_EMAIL: { - return React.createElement(TestEmail, data); + return React.createElement(TestEmail, { ...data, customTemplate }); } case EmailTemplate.WELCOME: { - return React.createElement(WelcomeEmail, data); + return React.createElement(WelcomeEmail, { ...data, customTemplate }); } case EmailTemplate.ALBUM_INVITE: { - return React.createElement(AlbumInviteEmail, data); + return React.createElement(AlbumInviteEmail, { ...data, customTemplate }); } case EmailTemplate.ALBUM_UPDATE: { - return React.createElement(AlbumUpdateEmail, data); + return React.createElement(AlbumUpdateEmail, { ...data, customTemplate }); } } } diff --git a/server/src/services/notification.service.ts b/server/src/services/notification.service.ts index e7c020196..37b265c6a 100644 --- a/server/src/services/notification.service.ts +++ b/server/src/services/notification.service.ts @@ -140,7 +140,7 @@ export class NotificationService extends BaseService { setTimeout(() => this.eventRepository.clientSend('on_session_delete', sessionId, sessionId), 500); } - async sendTestEmail(id: string, dto: SystemConfigSmtpDto) { + async sendTestEmail(id: string, dto: SystemConfigSmtpDto, tempTemplate?: string) { const user = await this.userRepository.get(id, { withDeleted: false }); if (!user) { throw new Error('User not found'); @@ -160,8 +160,8 @@ export class NotificationService extends BaseService { baseUrl: getExternalDomain(server, port), displayName: user.name, }, + customTemplate: tempTemplate!, }); - const { messageId } = await this.notificationRepository.sendEmail({ to: user.email, subject: 'Test email from Immich', @@ -175,6 +175,69 @@ export class NotificationService extends BaseService { return { messageId }; } + async getTemplate(name: EmailTemplate, customTemplate: string) { + const { server, templates } = await this.getConfig({ withCache: false }); + const { port } = this.configRepository.getEnv(); + + let templateResponse = ''; + + switch (name) { + case EmailTemplate.WELCOME: { + const { html: _welcomeHtml } = await this.notificationRepository.renderEmail({ + template: EmailTemplate.WELCOME, + data: { + baseUrl: getExternalDomain(server, port), + displayName: 'John Doe', + username: 'john@doe.com', + password: 'thisIsAPassword123', + }, + customTemplate: customTemplate || templates.email.welcomeTemplate, + }); + + templateResponse = _welcomeHtml; + break; + } + case EmailTemplate.ALBUM_UPDATE: { + const { html: _updateAlbumHtml } = await this.notificationRepository.renderEmail({ + template: EmailTemplate.ALBUM_UPDATE, + data: { + baseUrl: getExternalDomain(server, port), + albumId: '1', + albumName: 'Favorite Photos', + recipientName: 'Jane Doe', + cid: undefined, + }, + customTemplate: customTemplate || templates.email.albumInviteTemplate, + }); + templateResponse = _updateAlbumHtml; + break; + } + + case EmailTemplate.ALBUM_INVITE: { + const { html } = await this.notificationRepository.renderEmail({ + template: EmailTemplate.ALBUM_INVITE, + data: { + baseUrl: getExternalDomain(server, port), + albumId: '1', + albumName: "John Doe's Favorites", + senderName: 'John Doe', + recipientName: 'Jane Doe', + cid: undefined, + }, + customTemplate: customTemplate || templates.email.albumInviteTemplate, + }); + templateResponse = html; + break; + } + default: { + templateResponse = ''; + break; + } + } + + return { name, html: templateResponse }; + } + @OnJob({ name: JobName.NOTIFY_SIGNUP, queue: QueueName.NOTIFICATION }) async handleUserSignup({ id, tempPassword }: JobOf) { const user = await this.userRepository.get(id, { withDeleted: false }); @@ -182,7 +245,7 @@ export class NotificationService extends BaseService { return JobStatus.SKIPPED; } - const { server } = await this.getConfig({ withCache: true }); + const { server, templates } = await this.getConfig({ withCache: true }); const { port } = this.configRepository.getEnv(); const { html, text } = await this.notificationRepository.renderEmail({ template: EmailTemplate.WELCOME, @@ -192,6 +255,7 @@ export class NotificationService extends BaseService { username: user.email, password: tempPassword, }, + customTemplate: templates.email.welcomeTemplate, }); await this.jobRepository.queue({ @@ -227,7 +291,7 @@ export class NotificationService extends BaseService { const attachment = await this.getAlbumThumbnailAttachment(album); - const { server } = await this.getConfig({ withCache: false }); + const { server, templates } = await this.getConfig({ withCache: false }); const { port } = this.configRepository.getEnv(); const { html, text } = await this.notificationRepository.renderEmail({ template: EmailTemplate.ALBUM_INVITE, @@ -239,6 +303,7 @@ export class NotificationService extends BaseService { recipientName: recipient.name, cid: attachment ? attachment.cid : undefined, }, + customTemplate: templates.email.albumInviteTemplate, }); await this.jobRepository.queue({ @@ -273,7 +338,7 @@ export class NotificationService extends BaseService { ); const attachment = await this.getAlbumThumbnailAttachment(album); - const { server } = await this.getConfig({ withCache: false }); + const { server, templates } = await this.getConfig({ withCache: false }); const { port } = this.configRepository.getEnv(); for (const recipient of recipients) { @@ -297,6 +362,7 @@ export class NotificationService extends BaseService { recipientName: recipient.name, cid: attachment ? attachment.cid : undefined, }, + customTemplate: templates.email.albumUpdateTemplate, }); await this.jobRepository.queue({ diff --git a/server/src/services/system-config.service.spec.ts b/server/src/services/system-config.service.spec.ts index 2550c15de..2a20f3293 100644 --- a/server/src/services/system-config.service.spec.ts +++ b/server/src/services/system-config.service.spec.ts @@ -190,6 +190,13 @@ const updatedConfig = Object.freeze({ }, }, }, + templates: { + email: { + albumInviteTemplate: '', + welcomeTemplate: '', + albumUpdateTemplate: '', + }, + }, }); describe(SystemConfigService.name, () => { diff --git a/server/src/utils/replace-template-tags.ts b/server/src/utils/replace-template-tags.ts new file mode 100644 index 000000000..70333d7df --- /dev/null +++ b/server/src/utils/replace-template-tags.ts @@ -0,0 +1,5 @@ +export const replaceTemplateTags = (template: string, variables: Record) => { + return template.replaceAll(/{(.*?)}/g, (_, key) => { + return variables[key] || `{${key}}`; + }); +}; diff --git a/web/package-lock.json b/web/package-lock.json index f06484fe8..15edeb0c2 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -23,7 +23,7 @@ "justified-layout": "^4.1.0", "lodash-es": "^4.17.21", "luxon": "^3.4.4", - "socket.io-client": "^4.7.5", + "socket.io-client": "~4.7.5", "svelte-gestures": "^5.0.4", "svelte-i18n": "^4.0.1", "svelte-local-storage-store": "^0.6.4", diff --git a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte index 28187978f..30a9fbad5 100644 --- a/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte +++ b/web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte @@ -17,6 +17,7 @@ import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte'; import { handleError } from '$lib/utils/handle-error'; import { SettingInputFieldType } from '$lib/constants'; + import TemplateSettings from '$lib/components/admin-page/settings/template-settings/template-settings.svelte'; interface Props { savedConfig: SystemConfigDto; @@ -162,13 +163,14 @@ - - onReset({ ...options, configKeys: ['notifications'] })} - onSave={() => onSave({ notifications: config.notifications })} - showResetToDefault={!isEqual(savedConfig, defaultConfig)} - {disabled} - /> + + + onReset({ ...options, configKeys: ['notifications', 'templates'] })} + onSave={() => onSave({ notifications: config.notifications, templates: config.templates })} + showResetToDefault={!isEqual(savedConfig, defaultConfig)} + {disabled} + /> diff --git a/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte b/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte new file mode 100644 index 000000000..c27df817c --- /dev/null +++ b/web/src/lib/components/admin-page/settings/template-settings/template-settings.svelte @@ -0,0 +1,131 @@ + + +
+
+
+
+ +
+

+ + {$t('admin.template_email_if_empty')} + +

+
+ {#if loadingPreview} + + {/if} + + {#each templateConfigs as { label, templateKey, descriptionTags, templateName }} + +
+ +
+ {/each} +
+
+
+ + {#if htmlPreview} + +
+ +
+
+ {/if} +
+
+