diff --git a/assets/v2/email/gradient.png b/assets/v2/email/gradient.png new file mode 100644 index 0000000..9893d89 Binary files /dev/null and b/assets/v2/email/gradient.png differ diff --git a/assets/v2/email/logo.png b/assets/v2/email/logo.png new file mode 100644 index 0000000..0138ba6 Binary files /dev/null and b/assets/v2/email/logo.png differ diff --git a/build.gradle.kts b/build.gradle.kts index 8ba36b0..b72ee86 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -70,6 +70,7 @@ dependencies { // Notifications implementation("org.springframework.boot:spring-boot-starter-mail") + implementation("ch.digitalfondue.mjml4j:mjml4j:1.0.3") // Development developmentOnly("org.springframework.boot:spring-boot-devtools") diff --git a/src/main/frontend/components/administration/NotificationManagement.tsx b/src/main/frontend/components/administration/NotificationManagement.tsx index f3c6e51..799e151 100644 --- a/src/main/frontend/components/administration/NotificationManagement.tsx +++ b/src/main/frontend/components/administration/NotificationManagement.tsx @@ -7,6 +7,7 @@ import { Button, Card, Chip, + Link, Modal, ModalBody, ModalContent, @@ -19,6 +20,7 @@ import {MessageTemplateEndpoint, NotificationEndpoint} from "Frontend/generated/ import {toast} from "sonner"; import {Pencil} from "@phosphor-icons/react"; import MessageTemplateDto from "Frontend/generated/de/grimsi/gameyfin/notifications/templates/MessageTemplateDto"; +import TemplateType from "Frontend/generated/de/grimsi/gameyfin/notifications/templates/TemplateType"; function NotificationManagementLayout({getConfig, getConfigs, formik}: any) { @@ -26,6 +28,7 @@ function NotificationManagementLayout({getConfig, getConfigs, formik}: any) { const [availableTemplates, setAvailableTemplates] = useState([]); const [selectedTemplate, setSelectedTemplate] = useState(null); const [templateContent, setTemplateContent] = useState(""); + const [defaultPlaceholders, setDefaultPlaceholders] = useState([]); useEffect(() => { MessageTemplateEndpoint.getAll().then((response: any) => { @@ -53,7 +56,9 @@ function NotificationManagementLayout({getConfig, getConfigs, formik}: any) { async function openModal(template: MessageTemplateDto) { setSelectedTemplate(template); - let templateContent = await MessageTemplateEndpoint.read(template.key); + let templateContent = await MessageTemplateEndpoint.read(template.key, TemplateType.MJML); + let defaultPlaceholders = await MessageTemplateEndpoint.getDefaultPlaceholders(TemplateType.MJML); + setDefaultPlaceholders(defaultPlaceholders ? defaultPlaceholders as string[] : []); if (templateContent === undefined) { toast.error("Can't read template content"); @@ -65,7 +70,7 @@ function NotificationManagementLayout({getConfig, getConfigs, formik}: any) { } async function saveTemplate(template: MessageTemplateDto) { - await MessageTemplateEndpoint.save(template.key, templateContent); + await MessageTemplateEndpoint.save(template.key, TemplateType.MJML, templateContent); } return ( @@ -119,14 +124,40 @@ function NotificationManagementLayout({getConfig, getConfigs, formik}: any) { Edit {selectedTemplate?.name} Template -
-

Available placeholders:

- {selectedTemplate?.availablePlaceholders?.map((placeholder) => - {placeholder} - )} +
+ + + + + + + + + + + +
Required placeholders: +
+ {selectedTemplate?.availablePlaceholders?.map((placeholder) => + {placeholder} + )} +
+
Optional placeholders: +
+ {defaultPlaceholders.map((placeholder) => + {placeholder} + )} +
+
+ Powered by mjml.io +