[mattermostGH-15906][MM-22844] Redesign welcome and verify email. (ma…

…ttermost#16824)

Automatic Merge

.circleci/config.yml

@@ -250,7 +250,8 @@ jobs:
               -v ~/mattermost:/mattermost \
               -w /mattermost/mattermost-server \
               mattermost/mattermost-build-server:20201119_golang-1.15.5 \
-              bash -c "ulimit -n 8096; make test-server BUILD_NUMBER=$CIRCLE_BRANCH-$CIRCLE_PREVIOUS_BUILD_NUM TESTFLAGS= TESTFLAGSEE="
+              bash -c "ulimit -n 8096; make test-server BUILD_NUMBER=$CIRCLE_BRANCH-$CIRCLE_PREVIOUS_BUILD_NUM TESTFLAGS= TESTFLAGSEE=" \
+              bash -c scripts/diff-email-templates.sh
           no_output_timeout: 1h
       - run:
           name: Capture docker logs

Makefile

@@ -92,6 +92,8 @@ TESTS=.
 # Packages lists
 TE_PACKAGES=$(shell $(GO) list ./... | grep -v ./data)
 
+TEMPLATES_DIR=templates
+
 # Plugins Packages
 PLUGIN_PACKAGES ?= mattermost-plugin-antivirus-v0.1.2
 PLUGIN_PACKAGES += mattermost-plugin-autolink-v1.2.1
@@ -433,6 +435,9 @@ validate-go-version: ## Validates the installed version of go against Mattermost
 		exit 1; \
 	fi
 
+build-templates: ## Compile all mjml email templates
+	cd $(TEMPLATES_DIR) && $(MAKE) build
+
 run-server: prepackaged-binaries validate-go-version start-docker ## Starts the server.
 	@echo Running mattermost for development
 

app/email.go

@@ -168,10 +168,16 @@ func (es *EmailService) sendVerifyEmail(userEmail, locale, siteURL, token, redir
 
 	bodyPage := es.newEmailTemplate("verify_body", locale)
 	bodyPage.Props["SiteURL"] = siteURL
-	bodyPage.Props["Title"] = T("api.templates.verify_body.title", map[string]interface{}{"ServerURL": serverURL})
-	bodyPage.Props["Info"] = T("api.templates.verify_body.info")
-	bodyPage.Props["VerifyUrl"] = link
+	bodyPage.Props["Title"] = T("api.templates.verify_body.title")
+	bodyPage.Props["SubTitle1"] = T("api.templates.verify_body.subTitle1")
+	bodyPage.Props["ServerURL"] = T("api.templates.verify_body.serverURL", map[string]interface{}{"ServerURL": serverURL})
+	bodyPage.Props["SubTitle2"] = T("api.templates.verify_body.subTitle2")
+	bodyPage.Props["ButtonURL"] = link
 	bodyPage.Props["Button"] = T("api.templates.verify_body.button")
+	bodyPage.Props["Info"] = T("api.templates.verify_body.info")
+	bodyPage.Props["Info1"] = T("api.templates.verify_body.info1")
+	bodyPage.Props["QuestionTitle"] = T("api.templates.questions_footer.title")
+	bodyPage.Props["QuestionInfo"] = T("api.templates.questions_footer.info")
 
 	if err := es.sendMail(userEmail, subject, bodyPage.Render()); err != nil {
 		return model.NewAppError("SendVerifyEmail", "api.user.send_verify_email_and_forget.failed.error", nil, err.Error(), http.StatusInternalServerError)
@@ -215,15 +221,19 @@ func (es *EmailService) sendWelcomeEmail(userID string, email string, verified b
 
 	bodyPage := es.newEmailTemplate("welcome_body", locale)
 	bodyPage.Props["SiteURL"] = siteURL
-	bodyPage.Props["Title"] = T("api.templates.welcome_body.title", map[string]interface{}{"ServerURL": serverURL})
-	bodyPage.Props["Info"] = T("api.templates.welcome_body.info")
+	bodyPage.Props["Title"] = T("api.templates.welcome_body.title")
+	bodyPage.Props["SubTitle1"] = T("api.templates.welcome_body.subTitle1")
+	bodyPage.Props["ServerURL"] = T("api.templates.welcome_body.serverURL", map[string]interface{}{"ServerURL": serverURL})
+	bodyPage.Props["SubTitle2"] = T("api.templates.welcome_body.subTitle2")
 	bodyPage.Props["Button"] = T("api.templates.welcome_body.button")
-	bodyPage.Props["Info2"] = T("api.templates.welcome_body.info2")
-	bodyPage.Props["Info3"] = T("api.templates.welcome_body.info3")
+	bodyPage.Props["Info"] = T("api.templates.welcome_body.info")
+	bodyPage.Props["Info1"] = T("api.templates.welcome_body.info1")
 	bodyPage.Props["SiteURL"] = siteURL
 
 	if *es.srv.Config().NativeAppSettings.AppDownloadLink != "" {
+		bodyPage.Props["AppDownloadTitle"] = T("api.templates.welcome_body.app_download_title")
 		bodyPage.Props["AppDownloadInfo"] = T("api.templates.welcome_body.app_download_info")
+		bodyPage.Props["AppDownloadButton"] = T("api.templates.welcome_body.app_download_button")
 		bodyPage.Props["AppDownloadLink"] = *es.srv.Config().NativeAppSettings.AppDownloadLink
 	}
 
@@ -236,7 +246,7 @@ func (es *EmailService) sendWelcomeEmail(userID string, email string, verified b
 		if redirect != "" {
 			link += fmt.Sprintf("&redirect_to=%s", redirect)
 		}
-		bodyPage.Props["VerifyUrl"] = link
+		bodyPage.Props["ButtonURL"] = link
 	}
 
 	if err := es.sendMail(email, subject, bodyPage.Render()); err != nil {
@@ -493,6 +503,7 @@ func (es *EmailService) newEmailTemplate(name, locale string) *utils.HTMLTemplat
 	}
 
 	t.Props["Footer"] = localT("api.templates.email_footer")
+	t.Props["FooterV2"] = localT("api.templates.email_footer_v2")
 
 	if *es.srv.Config().EmailSettings.FeedbackOrganization != "" {
 		t.Props["Organization"] = localT("api.templates.email_organization") + *es.srv.Config().EmailSettings.FeedbackOrganization

build/release.mk

@@ -79,6 +79,7 @@ package:
 	OUTPUT_CONFIG=$(PWD)/$(DIST_PATH)/config/config.json go generate ./config
 	cp -RL fonts $(DIST_PATH)
 	cp -RL templates $(DIST_PATH)
+	rm -rf $(DIST_PATH)/templates/*.mjml $(DIST_PATH)/templates/partials/
 	cp -RL i18n $(DIST_PATH)
 
 	@# Disable developer settings

i18n/en.json

@@ -2706,6 +2706,10 @@
     "id": "api.templates.email_footer",
     "translation": "To change your notification preferences, log in to your team site and go to Account Settings > Notifications."
   },
+  {
+    "id": "api.templates.email_footer_v2",
+    "translation": "© 2020 Mattermost, Inc. 855 El Camino Real, 13A-168, Palo Alto, CA, 94301"
+  },
   {
     "id": "api.templates.email_info1",
     "translation": "Any questions at all, mail us any time: "
@@ -2950,6 +2954,14 @@
     "id": "api.templates.post_body.button",
     "translation": "Go To Post"
   },
+  {
+    "id": "api.templates.questions_footer.info",
+    "translation": "Email us any time at "
+  },
+  {
+    "id": "api.templates.questions_footer.title",
+    "translation": "Questions?"
+  },
   {
     "id": "api.templates.remove_expired_license.body.renew_button",
     "translation": "Renew License Now"
@@ -3052,11 +3064,27 @@
   },
   {
     "id": "api.templates.verify_body.info",
-    "translation": "Please verify your email address by clicking below."
+    "translation": "This email address was used to create an account with Mattermost."
+  },
+  {
+    "id": "api.templates.verify_body.info1",
+    "translation": "If it was not you, you can safely ignore this email."
+  },
+  {
+    "id": "api.templates.verify_body.serverURL",
+    "translation": "{{ .ServerURL }}."
+  },
+  {
+    "id": "api.templates.verify_body.subTitle1",
+    "translation": "Thanks for joining "
+  },
+  {
+    "id": "api.templates.verify_body.subTitle2",
+    "translation": "Click below to verify your email address."
   },
   {
     "id": "api.templates.verify_body.title",
-    "translation": "You've joined {{ .ServerURL }}"
+    "translation": "Verify your email address"
   },
   {
     "id": "api.templates.verify_subject",
@@ -3090,29 +3118,45 @@
     "id": "api.templates.warn_metric_ack.subject",
     "translation": "Mattermost Contact Us request"
   },
+  {
+    "id": "api.templates.welcome_body.app_download_button",
+    "translation": "Download"
+  },
   {
     "id": "api.templates.welcome_body.app_download_info",
-    "translation": "For the best experience, download the apps for PC, Mac, iOS and Android from:"
+    "translation": "For the best experience, download the apps for PC, Mac, iOS and Android."
+  },
+  {
+    "id": "api.templates.welcome_body.app_download_title",
+    "translation": "Download the desktop and mobile apps"
   },
   {
     "id": "api.templates.welcome_body.button",
     "translation": "Verify Email"
   },
   {
     "id": "api.templates.welcome_body.info",
-    "translation": "Please verify your email address by clicking below."
+    "translation": "This email address was used to create an account with Mattermost."
+  },
+  {
+    "id": "api.templates.welcome_body.info1",
+    "translation": "If it was not you, you can safely ignore this email."
+  },
+  {
+    "id": "api.templates.welcome_body.serverURL",
+    "translation": "{{ .ServerURL }}."
   },
   {
-    "id": "api.templates.welcome_body.info2",
-    "translation": "You can sign in from:"
+    "id": "api.templates.welcome_body.subTitle1",
+    "translation": "Thanks for joining "
   },
   {
-    "id": "api.templates.welcome_body.info3",
-    "translation": "Mattermost lets you share messages and files from your PC or phone, with instant search and archiving."
+    "id": "api.templates.welcome_body.subTitle2",
+    "translation": "Click below to verify your email address."
   },
   {
     "id": "api.templates.welcome_body.title",
-    "translation": "You've joined {{ .ServerURL }}"
+    "translation": "Welcome to the team"
   },
   {
     "id": "api.templates.welcome_subject",

scripts/diff-email-templates.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+make build-templates
+
+if [[ `git status templates/ --porcelain` ]]; then
+  echo "mjml templates have changed; Please compile and include compiled files"
+  git diff templates/  # show diffs as part of error message
+  exit 1
+else
+  echo "PASS"
+fi

services/mailservice/mail.go

@@ -287,7 +287,7 @@ func sendMailUsingConfigAdvanced(mail mailData, config *SMTPConfig, enableCompli
 func SendMail(c smtpClient, mail mailData, date time.Time) error {
 	mlog.Debug("sending mail", mlog.String("to", mail.smtpTo), mlog.String("subject", mail.subject))
 
-	htmlMessage := "\r\n<html><body>" + mail.htmlBody + "</body></html>"
+	htmlMessage := mail.htmlBody
 
 	txtBody, err := html2text.FromString(mail.htmlBody)
 	if err != nil {

templates/Makefile

@@ -0,0 +1,18 @@
+# Directory containing mjml templates
+OUTPUT_DIR=.
+MJML=mjml
+
+check-prereq: ## check if mjml is installed
+	@if ! [ -x "$$(command -v mjml)" ]; then \
+		echo "mjml is not installed. Installing mjml"; \
+		npm install -g mjml; \
+	fi;
+
+
+build: check-prereq ## Compile all mjml email templates
+	@for f in $(shell ls *.mjml); \
+	do \
+	  echo "{{define \"$${f%.*}\"}}\n" > $(OUTPUT_DIR)/$${f%.*}.html; \
+		$(MJML) $${f} -s >> $(OUTPUT_DIR)/$${f%.*}.html; \
+		echo "\n{{end}}" >> $(OUTPUT_DIR)/$${f%.*}.html; \
+	done

templates/deactivate_body.html

@@ -1,5 +1,6 @@
 {{define "deactivate_body"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
         <td>
@@ -37,5 +38,6 @@ <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/email_change_body.html

@@ -1,5 +1,6 @@
 {{define "email_change_body"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
         <td>
@@ -37,5 +38,6 @@ <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/email_change_verify_body.html

@@ -1,5 +1,6 @@
 {{define "email_change_verify_body"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
         <td>
@@ -40,5 +41,6 @@ <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/invite_body.html

@@ -1,5 +1,6 @@
 {{define "invite_body"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
         <td>
@@ -55,5 +56,6 @@ <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/mfa_change_body.html

@@ -1,5 +1,6 @@
 {{define "mfa_change_body"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
         <td>
@@ -37,7 +38,6 @@ <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}
-
-

templates/over_user_limit_30_days_body.html

@@ -1,5 +1,7 @@
 {{define "over_user_limit_30_days_body"}}
 
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
     style="margin-top: 20px; line-height: 1.7; color: #555;font-family: Arial; font-style: normal; font-weight: bold;">
     <tr>
@@ -102,5 +104,7 @@ <h3 style="margin-bottom: 0;">Questions?</h3>
         </td>
     </tr>
 </table>
+</body>
+</html>
 
 {{end}}

templates/over_user_limit_7_days_body.html

@@ -1,5 +1,7 @@
 {{define "over_user_limit_7_days_body"}}
 
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
     style="margin-top: 20px; line-height: 1.7; color: #555;font-family: Arial; font-style: normal; font-weight: bold;">
     <tr>
@@ -88,5 +90,7 @@ <h3 style="margin-bottom: 0;">Questions?</h3>
         </td>
     </tr>
 </table>
+</body>
+</html>
 
 {{end}}

templates/over_user_limit_90_days_body.html

@@ -1,5 +1,7 @@
 {{define "over_user_limit_90_days_body"}}
 
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
     style="margin-top: 20px; line-height: 1.7; color: #555;font-family: Arial; font-style: normal; font-weight: bold;">
     <tr>
@@ -90,5 +92,7 @@ <h3 style="margin-bottom: 0;">Questions?</h3>
         </td>
     </tr>
 </table>
+</body>
+</html>
 
 {{end}}

templates/over_user_limit_support_body.html

@@ -1,6 +1,10 @@
 {{define "over_user_limit_support_body"}}
-<p>Installation with ID: {{ .Props.InstallationID }} has been in arrears for over 30 days, and is scheduled for suspension on {{ .Props.SuspensionDate }}</p><br>
-<p>Site URL: {{ .Props.SiteURL }}</p><br>
-<p>Subscription ID: {{ .Props.SubscriptionID }}</p><br>
-<p>Number of registered users: {{ .Props.UserCount }}</p>
+<html>
+<body>
+  <p>Installation with ID: {{ .Props.InstallationID }} has been in arrears for over 30 days, and is scheduled for suspension on {{ .Props.SuspensionDate }}</p><br>
+  <p>Site URL: {{ .Props.SiteURL }}</p><br>
+  <p>Subscription ID: {{ .Props.SubscriptionID }}</p><br>
+  <p>Number of registered users: {{ .Props.UserCount }}</p>
+</body>
+</html>
 {{end}}