[GH-15906][MM-22844] Redesign welcome and verify email. (#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,9 +3118,17 @@
     "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",
@@ -3100,19 +3136,27 @@
   },
   {
     "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.info2",
-    "translation": "You can sign in from:"
+    "id": "api.templates.welcome_body.info1",
+    "translation": "If it was not you, you can safely ignore this email."
   },
   {
-    "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.serverURL",
+    "translation": "{{ .ServerURL }}."
+  },
+  {
+    "id": "api.templates.welcome_body.subTitle1",
+    "translation": "Thanks for joining "
+  },
+  {
+    "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 @@
         </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 @@
         </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 @@
         </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 @@
         </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 @@
         </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 @@
         </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 @@
         </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 @@
         </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}}

templates/over_user_limit_workspace_suspended_body.html

@@ -1,5 +1,7 @@
 {{define "over_user_limit_workspace_suspended_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 @@
         </td>
     </tr>
 </table>
+</body>
+</html>
 
 {{end}}

templates/partials/email_footer.mjml

@@ -0,0 +1,8 @@
+<mj-section padding="0px">
+  <mj-column>
+    <mj-text css-class="emailFooter" padding="0px">
+      {{.Props.Organization}}
+      {{.Props.FooterV2}}
+    </mj-text>
+  </mj-column>
+</mj-section>

templates/partials/header.mjml

@@ -0,0 +1,11 @@
+<mj-section padding="0px 24px 40px 24px">
+  <mj-column>
+    <mj-text css-class="title" padding="0px">
+      {{.Props.Title}}
+    </mj-text>
+    <mj-text css-class="subTitle" padding="16px 24px 16px 24px">
+      {{.Props.SubTitle}}
+    </mj-text>
+    <mj-button href="{{.Props.ButtonURL}}" padding="0px" css-class="button">{{.Props.Button}}</mj-button>
+  </mj-column>
+</mj-section>

templates/partials/header_verify.mjml

@@ -0,0 +1,16 @@
+<mj-section padding="0px 24px 40px 24px">
+  <mj-column>
+    <mj-text css-class="title" padding="0px">
+      {{.Props.Title}}
+    </mj-text>
+    <mj-text css-class="subTitle" padding="16px 24px 0px 24px">
+      {{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a>
+    </mj-text>
+    <mj-raw>{{if .Props.ButtonURL}}</mj-raw>
+      <mj-text css-class="subTitle" padding="0px 24px 16px 24px">
+        {{.Props.SubTitle2}}
+      </mj-text>
+      <mj-button href="{{.Props.ButtonURL}}" padding="0px" css-class="button">{{.Props.Button}}</mj-button>
+    <mj-raw>{{end}}</mj-raw>
+  </mj-column>
+</mj-section>

templates/partials/logo.mjml

@@ -0,0 +1,5 @@
+<mj-section padding="0px 0px 40px 0px">
+  <mj-column>
+    <mj-image mj-class="logo" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" />
+  </mj-column>
+</mj-section>

templates/partials/questions_footer.mjml

@@ -0,0 +1,12 @@
+<mj-section padding="16px 0px 40px 0px">
+  <mj-column>
+    <mj-text css-class="footerTitle" padding="0px">
+      {{.Props.QuestionTitle}}
+    </mj-text>
+    <mj-text css-class="footerInfo" padding="0px">
+      {{.Props.QuestionInfo}}
+      <a href='mailto:{{.Props.SupportEmail}}'>
+      {{.Props.SupportEmail}}</a>
+    </mj-text>
+ </mj-column>
+</mj-section>

templates/partials/style.mjml

@@ -0,0 +1,103 @@
+<mj-attributes>
+  <mj-raw><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700" rel="stylesheet" type="text/css"></link></mj-raw>
+  <mj-text font-family="Open Sans, sans-serif" align="center" />
+  <mj-button font-family="Open Sans, sans-serif" background-color="#FFFFFF" border-radius="4px" padding="0px" />
+  <mj-image alt="" align="center" />
+  <mj-class name="email" align="center" padding="24px" background-color="#FFFFFF" border-radius="8px" />
+  <mj-class name="logo" width="132px" height="21.76px" padding="0px" />
+</mj-attributes>
+
+<mj-style>
+  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+  
+  .emailBody {
+    background:#F3F3F3 !important;
+  }
+
+  .emailBody a{
+    text-decoration:none !important;
+    color:#166DE0 !important;
+  }
+
+  .title div {
+    font-weight:600 !important;
+    font-size:28px !important;
+    line-height:36px !important;
+    letter-spacing:-0.02em !important;
+    color:#3D3C40 !important;
+  }
+
+  .subTitle div {
+    font-size:16px !important;
+    line-height:24px !important;
+    color:rgba(61, 60, 64, 0.64) !important;
+  }
+
+  .button a {
+    background-color:#166DE0 !important;
+    font-weight:600 !important;
+    font-size:16px !important;
+    line-height:18px !important;
+    color:#FFFFFF !important;
+    padding:15px 24px !important;
+  }
+
+  .info div {
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:40px 0px !important;
+  }
+
+  .footerTitle div {
+    font-weight:600 !important;
+    font-size:16px !important;
+    line-height:24px !important;
+    color:#3D3C40 !important;
+    padding:0px 0px 4px 0px !important;
+  }
+
+  .footerInfo div {
+    font-size:14px !important;
+    line-height:20px !important;
+    color:#3D3C40 !important;
+    padding:0px !important;
+  }
+
+  .appDownloadButton a{
+    background-color:#FFFFFF !important;
+    border:1px solid #166DE0 !important;
+    box-sizing: border-box !important;
+    color:#166DE0 !important;
+    padding:13px 20px !important;
+    font-weight:600 !important;
+    font-size:14px !important;
+    line-height:14px !important;
+  }
+
+  .emailFooter div {
+    font-size:12px !important;
+    line-height:16px !important;
+    color:rgba(61, 60, 64, 0.56) !important;
+    padding:8px 24px 8px 24px !important;
+  }
+
+  @media all and (min-width: 541px) {
+    .emailBody {
+      padding:32px !important;
+    }
+  }
+
+  @media all and (max-width: 540px) and (min-width: 401px) {
+    .emailBody {
+      padding:16px !important;
+    }
+  }
+
+  @media all and (max-width: 400px) {
+    .emailBody {
+      padding:0px !important;
+    }
+  }
+
+</mj-style>

templates/partials/verify.mjml

@@ -0,0 +1,12 @@
+<mj-section padding="0px">
+  <mj-column>
+    <mj-image src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" width="320px" padding="0px" />
+  </mj-column>
+</mj-section>
+<mj-section padding="0px">
+  <mj-column>
+    <mj-text css-class="info" padding="0px">
+      {{.Props.Info}}<br>{{.Props.Info1}}
+    </mj-text>
+  </mj-column>
+</mj-section>

templates/password_change_body.html

@@ -1,5 +1,6 @@
 {{define "password_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 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}
-
-

templates/payment_failed_body.html

@@ -1,5 +1,6 @@
 {{define "payment_failed_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>
@@ -89,5 +90,6 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/payment_failed_no_card_body.html

@@ -1,5 +1,6 @@
 {{define "payment_failed_no_card_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 +89,6 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/reached_user_limit_body.html

@@ -1,5 +1,6 @@
 {{define "reached_user_limit_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>
@@ -85,5 +86,6 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}

templates/remove_expired_license.html

@@ -1,5 +1,6 @@
 {{define "remove_expired_license"}}
-
+<html>
+<body>
 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
     style="margin-top: 20px; line-height: 1.7; color: #555;">
     <tr>
@@ -46,5 +47,6 @@
         </td>
     </tr>
 </table>
-
-{{end}}
+</body>
+</html>
+{{end}}

templates/reset_body.html

@@ -1,5 +1,6 @@
 {{define "reset_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,7 +41,6 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}
-
-

templates/signin_change_body.html

@@ -1,5 +1,6 @@
 {{define "signin_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 @@
         </td>
     </tr>
 </table>
-
+</body>
+</html>
 {{end}}
-
-

templates/verify_body.html

@@ -1,44 +1,396 @@
 {{define "verify_body"}}
 
-<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
-    <tr>
-        <td>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 660px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background: #FFF;">
-                <tr>
-                    <td style="border: 1px solid #ddd;">
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
-                            <tr>
-                                <td style="padding: 20px 20px 10px; text-align:left;">
-                                    <img src="{{.Props.SiteURL}}/static/images/logo-email.png" width="130px" style="opacity: 0.5" alt="">
+<!-- FILE: verify_body.mjml -->
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }
+
+    p {
+      display: block;
+      margin: 13px 0;
+    }
+  </style>
+  <!--[if mso]>
+        <xml>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG/>
+          <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+        </xml>
+        <![endif]-->
+  <!--[if lte mso 11]>
+        <style type="text/css">
+          .mj-outlook-group-fix { width:100% !important; }
+        </style>
+        <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }
+
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }
+  </style>
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+
+    .emailBody {
+      background: #F3F3F3 !important;
+    }
+
+    .emailBody a {
+      text-decoration: none !important;
+      color: #166DE0 !important;
+    }
+
+    .title div {
+      font-weight: 600 !important;
+      font-size: 28px !important;
+      line-height: 36px !important;
+      letter-spacing: -0.02em !important;
+      color: #3D3C40 !important;
+    }
+
+    .subTitle div {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: rgba(61, 60, 64, 0.64) !important;
+    }
+
+    .button a {
+      background-color: #166DE0 !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 18px !important;
+      color: #FFFFFF !important;
+      padding: 15px 24px !important;
+    }
+
+    .info div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3D3C40 !important;
+      padding: 40px 0px !important;
+    }
+
+    .footerTitle div {
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: #3D3C40 !important;
+      padding: 0px 0px 4px 0px !important;
+    }
+
+    .footerInfo div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3D3C40 !important;
+      padding: 0px !important;
+    }
+
+    .appDownloadButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #166DE0 !important;
+      box-sizing: border-box !important;
+      color: #166DE0 !important;
+      padding: 13px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
+    .emailFooter div {
+      font-size: 12px !important;
+      line-height: 16px !important;
+      color: rgba(61, 60, 64, 0.56) !important;
+      padding: 8px 24px 8px 24px !important;
+    }
+
+    @media all and (min-width: 541px) {
+      .emailBody {
+        padding: 32px !important;
+      }
+    }
+
+    @media all and (max-width: 540px) and (min-width: 401px) {
+      .emailBody {
+        padding: 16px !important;
+      }
+    }
+
+    @media all and (max-width: 400px) {
+      .emailBody {
+        padding: 0px !important;
+      }
+    }
+  </style>
+</head>
+
+<body style="word-spacing:normal;">
+  <div class="emailBody" style="">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="width:132px;">
+                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
                                 </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <table border="0" cellpadding="0" cellspacing="0" style="padding: 20px 50px 0; text-align: center; margin: 0 auto">
-                                        <tr>
-                                            <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
-                                                <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
-                                                <p>{{.Props.Info}}</p>
-                                                <p style="margin: 20px 0 15px">
-                                                    <a href="{{.Props.VerifyUrl}}" style="background: #2389D7; border-radius: 3px; color: #fff; border: none; outline: none; min-width: 200px; padding: 15px 25px; font-size: 14px; font-family: inherit; cursor: pointer; -webkit-appearance: none;text-decoration: none;">{{.Props.Button}}</a>
-                                                </p>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            {{template "email_info" . }}
-                                        </tr>
-                                    </table>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px 24px 40px 24px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
                                 </td>
-                            </tr>
-                            <tr>
-                                {{template "email_footer" . }}
-                            </tr>
-                        </table>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
-</table>
+                              </tr>
+                              <tr>
+                                <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 0px 24px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a></div>
+                                </td>
+                              </tr>
+                              {{if .Props.ButtonURL}}
+                              <tr>
+                                <td align="center" class="subTitle" style="font-size:0px;padding:0px 24px 16px 24px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle2}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                    <tr>
+                                      <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
+                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                          {{.Props.Button}}
+                                        </a>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                              {{end}}
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="width:320px;">
+                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="info" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:16px 0px 40px 0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionTitle}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.QuestionInfo}}
+                                    <a href='mailto:{{.Props.SupportEmail}}'>
+                                      {{.Props.SupportEmail}}</a>
+                                  </div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                    {{.Props.FooterV2}}
+                                  </div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
+</body>
+
+</html>
 
 {{end}}

templates/verify_body.mjml

@@ -0,0 +1,14 @@
+<mjml>
+  <mj-head>
+    <mj-include path="./partials/style.mjml" />
+  </mj-head>
+  <mj-body css-class="emailBody">
+    <mj-wrapper mj-class="email">
+      <mj-include path="./partials/logo.mjml" />
+      <mj-include path="./partials/header_verify.mjml" />
+      <mj-include path="./partials/verify.mjml" />
+      <mj-include path="./partials/questions_footer.mjml" />
+      <mj-include path="./partials/email_footer.mjml" />
+    </mj-wrapper>
+  </mj-body>
+</mjml>

templates/welcome_body.html

@@ -1,62 +1,429 @@
 {{define "welcome_body"}}
 
-<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 20px; line-height: 1.7; color: #555;">
-    <tr>
-        <td>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 660px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background: #FFF;">
-                <tr>
-                    <td style="border: 1px solid #ddd;">
-                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
-                            <tr>
-                                <td style="padding: 20px 20px 10px; text-align:left;">
-                                    <img src="{{.Props.SiteURL}}/static/images/logo-email.png" width="130px" style="opacity: 0.5" alt="">
+<!-- FILE: welcome_body.mjml -->
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <title>
+  </title>
+  <!--[if !mso]><!-->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!--<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style type="text/css">
+    #outlook a {
+      padding: 0;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+    }
+
+    table,
+    td {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
+
+    img {
+      border: 0;
+      height: auto;
+      line-height: 100%;
+      outline: none;
+      text-decoration: none;
+      -ms-interpolation-mode: bicubic;
+    }
+
+    p {
+      display: block;
+      margin: 13px 0;
+    }
+  </style>
+  <!--[if mso]>
+        <xml>
+        <o:OfficeDocumentSettings>
+          <o:AllowPNG/>
+          <o:PixelsPerInch>96</o:PixelsPerInch>
+        </o:OfficeDocumentSettings>
+        </xml>
+        <![endif]-->
+  <!--[if lte mso 11]>
+        <style type="text/css">
+          .mj-outlook-group-fix { width:100% !important; }
+        </style>
+        <![endif]-->
+  <!--[if !mso]><!-->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+  </style>
+  <!--<![endif]-->
+  <style type="text/css">
+    @media only screen and (min-width:480px) {
+      .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    }
+  </style>
+  <style type="text/css">
+    @media only screen and (max-width:480px) {
+      table.mj-full-width-mobile {
+        width: 100% !important;
+      }
+
+      td.mj-full-width-mobile {
+        width: auto !important;
+      }
+    }
+  </style>
+  <style type="text/css">
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
+
+    .emailBody {
+      background: #F3F3F3 !important;
+    }
+
+    .emailBody a {
+      text-decoration: none !important;
+      color: #166DE0 !important;
+    }
+
+    .title div {
+      font-weight: 600 !important;
+      font-size: 28px !important;
+      line-height: 36px !important;
+      letter-spacing: -0.02em !important;
+      color: #3D3C40 !important;
+    }
+
+    .subTitle div {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: rgba(61, 60, 64, 0.64) !important;
+    }
+
+    .button a {
+      background-color: #166DE0 !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 18px !important;
+      color: #FFFFFF !important;
+      padding: 15px 24px !important;
+    }
+
+    .info div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3D3C40 !important;
+      padding: 40px 0px !important;
+    }
+
+    .footerTitle div {
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      color: #3D3C40 !important;
+      padding: 0px 0px 4px 0px !important;
+    }
+
+    .footerInfo div {
+      font-size: 14px !important;
+      line-height: 20px !important;
+      color: #3D3C40 !important;
+      padding: 0px !important;
+    }
+
+    .appDownloadButton a {
+      background-color: #FFFFFF !important;
+      border: 1px solid #166DE0 !important;
+      box-sizing: border-box !important;
+      color: #166DE0 !important;
+      padding: 13px 20px !important;
+      font-weight: 600 !important;
+      font-size: 14px !important;
+      line-height: 14px !important;
+    }
+
+    .emailFooter div {
+      font-size: 12px !important;
+      line-height: 16px !important;
+      color: rgba(61, 60, 64, 0.56) !important;
+      padding: 8px 24px 8px 24px !important;
+    }
+
+    @media all and (min-width: 541px) {
+      .emailBody {
+        padding: 32px !important;
+      }
+    }
+
+    @media all and (max-width: 540px) and (min-width: 401px) {
+      .emailBody {
+        padding: 16px !important;
+      }
+    }
+
+    @media all and (max-width: 400px) {
+      .emailBody {
+        padding: 0px !important;
+      }
+    }
+  </style>
+</head>
+
+<body style="word-spacing:normal;">
+  <div class="emailBody" style="">
+    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:8px;max-width:600px;">
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:8px;">
+        <tbody>
+          <tr>
+            <td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
+              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px 0px 40px 0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="width:132px;">
+                                          <img alt="" height="21" src="{{.Props.SiteURL}}/static/images/logo_email_blue.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132" />
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
                                 </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <table border="0" cellpadding="0" cellspacing="0" style="padding: 20px 50px 0; text-align: center; margin: 0 auto">
-                                        {{if .Props.VerifyUrl }}
-                                        <tr>
-                                            <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
-                                                <h2 style="font-weight: normal; margin-top: 10px;">{{.Props.Title}}</h2>
-                                                <p>{{.Props.Info}}</p>
-                                                <p style="margin: 20px 0 15px">
-                                                    <a href="{{.Props.VerifyUrl}}" style="background: #2389D7; border-radius: 3px; color: #fff; border: none; outline: none; min-width: 200px; padding: 15px 25px; font-size: 14px; font-family: inherit; cursor: pointer; -webkit-appearance: none;text-decoration: none;">{{.Props.Button}}</a>
-                                                </p>
-                                            </td>
-                                        </tr>
-                                        {{end}}
-                                        <tr>
-                                            <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
-                                                <h2 style="font-weight: normal; margin-top: 25px; line-height: 1.5;">{{.Props.Info2}}</h2>
-                                                <a href="{{.Props.SiteURL}}">{{.Props.SiteURL}}</a>
-                                                <p>{{.Props.Info3}}</p>
-                                            </td>
-                                        </tr>
-                                        {{if .Props.AppDownloadLink}}
-                                        <tr>
-                                            <td style="border-bottom: 1px solid #ddd; padding: 0 0 20px;">
-                                                <p>{{.Props.AppDownloadInfo}}</p>
-                                                <a href="{{.Props.AppDownloadLink}}">
-                                                    <p>{{.Props.AppDownloadLink}}</p>
-                                                    <img src="{{.Props.SiteURL}}/static/images/appIcons.png" />
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px 24px 40px 24px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="title" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Title}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" class="subTitle" style="font-size:0px;padding:16px 24px 0px 24px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle1}}<a href="{{.Props.SiteURL}}">{{.Props.ServerURL}}</a></div>
+                                </td>
+                              </tr>
+                              {{if .Props.ButtonURL}}
+                              <tr>
+                                <td align="center" class="subTitle" style="font-size:0px;padding:0px 24px 16px 24px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.SubTitle2}}</div>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td align="center" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                    <tr>
+                                      <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
+                                        <a href="{{.Props.ButtonURL}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                          {{.Props.Button}}
+                                        </a>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                              {{end}}
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="width:320px;">
+                                          <img alt="" height="auto" src="{{.Props.SiteURL}}/static/images/welcome_illustration.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320" />
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="info" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Info}}<br>{{.Props.Info1}}</div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:16px 0px 40px 0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+                            <tbody>
+                              <tr>
+                                <td style="vertical-align:top;padding:0px 24px 0px 24px;">
+                                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
+                                    <tbody>
+                                      {{if .Props.AppDownloadLink}}
+                                      <tr>
+                                        <td align="center" style="font-size:0px;padding:0px 0px 12px 0px;word-break:break-word;">
+                                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                                            <tbody>
+                                              <tr>
+                                                <td style="width:150px;">
+                                                  <img alt="" height="25" src="{{.Props.SiteURL}}/static/images/appIcons.png" style="border:0;display:block;outline:none;text-decoration:none;height:25.5px;width:100%;font-size:13px;" width="150" />
+                                                </td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td align="center" class="footerTitle" style="font-size:0px;padding:0px;word-break:break-word;">
+                                          <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.AppDownloadTitle}}</div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td align="center" class="footerInfo" style="font-size:0px;padding:0px;word-break:break-word;">
+                                          <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.AppDownloadInfo}}</div>
+                                        </td>
+                                      </tr>
+                                      <tr>
+                                        <td align="center" vertical-align="middle" class="appDownloadButton" style="font-size:0px;padding:12px 0px 0px 0px;word-break:break-word;">
+                                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                                            <tr>
+                                              <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
+                                                <a href="{{.Props.AppDownloadLink}}" style="display:inline-block;background:#FFFFFF;color:#ffffff;font-family:Open Sans, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:4px;" target="_blank">
+                                                  {{.Props.AppDownloadButton}}
                                                 </a>
-                                            </td>
-                                        </tr>
-                                        {{end}}
-                                    </table>
+                                              </td>
+                                            </tr>
+                                          </table>
+                                        </td>
+                                      </tr>
+                                      {{end}}
+                                    </tbody>
+                                  </table>
                                 </td>
-                            </tr>
-                            <tr>
-                                {{template "email_footer" . }}
-                            </tr>
-                        </table>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
-</table>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+              <div style="margin:0px auto;max-width:552px;">
+                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+                  <tbody>
+                    <tr>
+                      <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:552px;" ><![endif]-->
+                        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                            <tbody>
+                              <tr>
+                                <td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
+                                  <div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Props.Organization}}
+                                    {{.Props.FooterV2}}
+                                  </div>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                        <!--[if mso | IE]></td></tr></table><![endif]-->
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!--[if mso | IE]></td></tr></table><![endif]-->
+  </div>
+</body>
+
+</html>
 
 {{end}}
-

templates/welcome_body.mjml

@@ -0,0 +1,29 @@
+<mjml>
+  <mj-head>
+    <mj-include path="./partials/style.mjml" />
+  </mj-head>
+  <mj-body css-class="emailBody">
+    <mj-wrapper mj-class="email">
+      <mj-include path="./partials/logo.mjml" />
+      <mj-include path="./partials/header_verify.mjml" />
+      <mj-include path="./partials/verify.mjml" />
+      <mj-section padding="16px 0px 40px 0px">
+        <mj-column padding="0px 24px 0px 24px">
+          <mj-raw>{{if .Props.AppDownloadLink}}</mj-raw>
+          <mj-image width="150px" height="25.5px" padding="0px 0px 12px 0px" src="{{.Props.SiteURL}}/static/images/appIcons.png" />
+          <mj-text css-class="footerTitle" padding="0px">
+            {{.Props.AppDownloadTitle}}
+          </mj-text>
+          <mj-text css-class="footerInfo" padding="0px">
+            {{.Props.AppDownloadInfo}}
+          </mj-text>
+          <mj-button css-class="appDownloadButton" padding="12px 0px 0px 0px" href="{{.Props.AppDownloadLink}}">
+            {{.Props.AppDownloadButton}}
+          </mj-button>
+          <mj-raw>{{end}}</mj-raw>
+        </mj-column> 
+      </mj-section>
+      <mj-include path="./partials/email_footer.mjml" />
+    </mj-wrapper>
+  </mj-body>
+</mjml>