Add emaiing mechanism

.gitignore

@@ -26,6 +26,12 @@ src/magnify/static/magnify/
 # Settings
 local.py
 
+# Npm
+node_modules
+
+# Email
+src/magnify/apps/core/templates/email/
+
 # Unit test / coverage reports
 htmlcov/
 .coverage

Dockerfile

@@ -74,6 +74,17 @@ RUN DJANGO_CONFIGURATION=Build python manage.py collectstatic --noinput
 # final image
 RUN rdfind -makesymlinks true -followsymlinks true -makeresultsfile false ${MAGNIFY_STATIC_ROOT}
 
+# ---- Email builder image ----
+FROM node:18 as email-builder
+RUN mkdir -p /app/magnify/apps/core/templates/email && \
+    mkdir -p /app/email
+COPY ./src/email /app/email
+
+WORKDIR /app/email
+
+RUN yarn install --frozen-lockfile && \
+    yarn build-email
+
 # ---- Core application image ----
 FROM base as core
 
@@ -153,5 +164,8 @@ WORKDIR /app/sandbox
 # Copy statics
 COPY --from=link-collector ${MAGNIFY_STATIC_ROOT} ${MAGNIFY_STATIC_ROOT}
 
+# Copy generated emails
+COPY --from=email-builder /app/magnify/apps/core/templates/email /app/src/magnify/apps/core/templates/email
+
 # The default command runs gunicorn WSGI server in the sandbox
 CMD gunicorn -c /usr/local/etc/gunicorn/magnify.py wsgi:application

Makefile

@@ -46,9 +46,10 @@ COMPOSE              = DOCKER_USER=$(DOCKER_USER) DB_HOST=$(DB_HOST) DB_PORT=$(D
 COMPOSE_RUN          = $(COMPOSE) run --rm
 COMPOSE_EXEC         = $(COMPOSE) exec
 COMPOSE_EXEC_APP     = $(COMPOSE_EXEC) app
-COMPOSE_EXEC_NODE    = $(COMPOSE_EXEC) node
+COMPOSE_EXEC_NODE    = $(COMPOSE_EXEC) --workdir="/app/src/frontend" node
 COMPOSE_RUN_APP      = $(COMPOSE_RUN) app
 COMPOSE_RUN_CROWDIN  = $(COMPOSE_RUN) crowdin crowdin
+COMPOSE_RUN_EMAIL    = $(COMPOSE_RUN) --workdir="/app/src/email" node
 COMPOSE_TEST_RUN     = $(COMPOSE) run --rm -e DJANGO_CONFIGURATION=Test
 COMPOSE_TEST_RUN_APP = $(COMPOSE_TEST_RUN) app
 
@@ -73,6 +74,8 @@ bootstrap: \
   data/smedia/.keep \
   data/static/.keep \
   build \
+  install-email \
+  build-email \
   run \
   migrate \
   superuser
@@ -251,6 +254,24 @@ i18n-generate-front: ## Extract strings to be translated from the code of all fr
 	@$(COMPOSE_RUN) -e HOME="/tmp" -w /app/src/frontend node yarn extract-translations
 .PHONY: i18n-generate-front
 
+# -- Email
+
+build-email: ## Convert mjml files to html and text
+	@$(COMPOSE_RUN_EMAIL) yarn build-email
+.PHONY: build-email
+
+build-email-html-to-plain-text: ## Convert html files to text
+	@$(COMPOSE_RUN_EMAIL) yarn build-email-html-to-plain-text
+.PHONY: build-email-html-to-plain-text
+
+build-mjml-to-html:	## Convert mjml files to html and text
+	@$(COMPOSE_RUN_EMAIL) yarn build-mjml-to-html
+.PHONY: build-mjml-to-html
+
+install-email: ## mail-generator yarn install
+	@$(COMPOSE_RUN_EMAIL) yarn install
+.PHONY: install-email
+
 # -- Misc
 clean: ## restore repository state as it was freshly cloned
 	git clean -idx

docker-compose.yml

@@ -36,6 +36,7 @@ services:
       - .:/app
     depends_on:
       - "${DB_HOST:-postgresql}"
+      - mailcatcher
     stdin_open: true
     tty: true
 
@@ -68,8 +69,7 @@ services:
       - app-production
 
   node:
-    image: node:16.15
-    working_dir: /app/src/frontend
+    image: node:18
     user: "${DOCKER_USER:-1000}"
     volumes:
       - .:/app
@@ -117,6 +117,11 @@ services:
     depends_on:
       - redis-primary
 
+  mailcatcher:
+    image: sj26/mailcatcher:latest
+    ports:
+      - "1081:1080"
+
   dockerize:
     image: jwilder/dockerize
     platform: linux/amd64

env.d/development/common

@@ -24,3 +24,7 @@ JITSI_XMPP_DOMAIN="meet.jitsi"
 JITSI_SECRET_KEY="ThisIsAnExampleKeyForDevPurposeOnly"
 JITSI_APP_ID="app_id"
 JITSI_TOKEN_EXPIRATION_SECONDS=300
+
+# Email
+EMAIL_HOST="mailcatcher"
+EMAIL_FROM="[email protected]"

sandbox/settings.py

@@ -292,6 +292,15 @@ class Base(MagnifyCoreConfigurationMixin, Configuration):
     # when their preferred language, whatever it is, is unavailable
     LANGUAGES = (("en", _("English")), ("fr", _("French")))
 
+    # Email
+    EMAIL_BACKEND = values.Value("django.core.mail.backends.smtp.EmailBackend")
+    EMAIL_HOST = values.Value(None)
+    EMAIL_HOST_USER = values.Value(None)
+    EMAIL_HOST_PASSWORD = values.Value(None)
+    EMAIL_PORT = values.PositiveIntegerValue(1025)
+    EMAIL_USE_TLS = values.BooleanValue(False)
+    EMAIL_FROM = values.Value(None)
+
     # Logging
     LOGGING = {
         "version": 1,

sandbox/urls.py

@@ -9,6 +9,7 @@
 from django.views.static import serve
 
 from magnify.apps.core.urls import urlpatterns as core_urlpatterns
+from magnify.apps.core.views import SignupEmailDebugView
 
 # For now, we use URLPathVersioning to be consistent with fonzie. Fonzie uses it
 # because DRF OpenAPI only supports URLPathVersioning for now.
@@ -35,7 +36,12 @@
                 r"media/<path:path>",
                 serve,
                 {"document_root": settings.MEDIA_ROOT, "show_indexes": True},
-            )
+            ),
+            path(
+                r"__debug__/email/signup.<str:extension>",
+                SignupEmailDebugView.as_view(),
+                name="debug_email_signup",
+            ),
         ]
         + staticfiles_urlpatterns()
         + urlpatterns

src/email/bin/html-to-plain-text

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+set -eo pipefail
+# Run html-to-text to convert all html files to text files
+DIR_MAILS="../magnify/apps/core/templates/email"
+
+if [ ! -d "${DIR_MAILS}" ]; then
+  mkdir -p "${DIR_MAILS}";
+fi
+
+for file in "${DIR_MAILS}"/*.html; 
+    # we don't want unexpected words wrap, we set it to 600 chars
+    do html-to-text --wordwrap=600 < "$file" > "${file%.html}".txt; done; 

src/email/bin/mjml-to-html

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+# Run mjml command to convert all mjml templates to html files
+DIR_MAILS="../magnify/apps/core/templates/email"
+
+if [ ! -d "${DIR_MAILS}" ]; then
+  mkdir -p "${DIR_MAILS}";
+fi
+mjml mjml/*.mjml -o "${DIR_MAILS}";

src/email/mjml/partial/footer.mjml

@@ -0,0 +1,9 @@
+<mj-include path="./course_greetings.mjml" />
+
+<mj-section background-color="#000000" padding="15px">
+  <mj-column vertical-align="top" width="100%">
+    <mj-text align="center" color="#FFFFFF" font-size="12px" padding="5px 25px">
+      {% blocktrans %}This email has been sent to {{ user_email }} by {{ site_name }}{% endblocktrans %}
+    </mj-text>
+  </mj-column>
+</mj-section>

src/email/mjml/partial/header.mjml

@@ -0,0 +1,7 @@
+<mj-head>
+  <mj-attributes>
+    <mj-all padding="0px"></mj-all>
+    <mj-class name="preheader" color="#000000" font-family="Helvetica, Arial, sans-serif" padding="0px"></mj-class>
+  </mj-attributes>
+  <mj-style inline="inline">a { text-decoration: none; color: inherit; }</mj-style>
+</mj-head>

src/email/mjml/partial/hello.mjml

@@ -0,0 +1,4 @@
+<mj-text align="center" font-size="18px" padding="20px 25px">
+  {% if user_name %} {% trans "Hello" %} {{user_name}}, {% else %}
+  {% trans "Hello," %} {% endif %}
+</mj-text>

src/email/mjml/signup.mjml

@@ -0,0 +1,22 @@
+<mjml>
+  <mj-include path="./partial/header.mjml" />
+  <mj-body background-color="#FFFFFF">
+    <mj-section background-color="#2a5cab" padding="10px 0">
+      <mj-column background-color="#008000">
+        <mj-text>{% load i18n %}</mj-text>
+        <mj-text align="center" color="#FFFFFF" font-size="15px" padding="8px 8px">
+          {% trans "Thank you for signing up" %}
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section background-color="#FFFFFF" padding="0px 50px">
+      <mj-column width="100%">
+        <mj-include path="./partial/hello.mjml" />
+        <mj-text align="center" font-size="18px" padding="10px 50px">
+          {% trans "Thank you for signing up." %} 
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-include path="./partial/footer.mjml" />
+  </mj-body>
+</mjml>

src/email/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "mjml",
+  "version": "1.0.0",
+  "description": "An util to generate html and text templates from mjml templates",
+  "dependencies": {
+    "html-to-text": "8.2.1",
+    "mjml": "4.13.0"
+  },
+  "private": true,
+  "scripts": {
+    "build-mjml-to-html": "./bin/mjml-to-html",
+    "build-email-html-to-plain-text": "./bin/html-to-plain-text",
+    "build-email": "yarn build-mjml-to-html; yarn build-email-html-to-plain-text;"
+  },
+  "volta": {
+    "node": "18.11.0"
+  },
+  "repository": "https://github.com/openfun/jitsi-magnify",
+  "author": "France Université Numérique",
+  "license": "MIT"
+}