Mfa code email reformat (#743)

* Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * video intro * Update README.md * Update README.md * Update README.md * center Date section & Copyright * add name into email context * change link to client download page * cargo fmt * fix bugs * add span * del <b> tag from EMAIL_CODE_REGEX in test auth.rs * try b tag * Update templates/mail_email_mfa_code.tera Co-authored-by: Aleksander <[email protected]> * Update src/templates.rs Co-authored-by: Aleksander <[email protected]> * Update src/templates.rs Co-authored-by: Aleksander <[email protected]> --------- Co-authored-by: Aleksander <[email protected]> Co-authored-by: Robert Olejnik <[email protected]>
DefGuard · Aug 26, 2024 · 58efdff · 58efdff
1 parent afa822a
commit 58efdff
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,18 @@
 
 See below [full list of features](https://github.com/defguard/defguard#features)
 
+#### Video introduction
+
+Baring in mind we are no youtubers - just engineers - here is a video introduction to defguard:
+
+<div align="center">
+ <p align="center">
+
+[![Introduction to defguard](https://img.youtube.com/vi/4PF7edMGBwk/hqdefault.jpg)](https://www.youtube.com/watch?v=4PF7edMGBwk)
+
+</p>
+</div>
+
 ### Control plane management (this video is few versions behind... - a lot has changed!)
 
 ![](https://defguard.net/images/product/core/hero-image.png)
@@ -53,13 +65,21 @@ Better quality video can [be found here to download](https://github.com/DefGuard
 ## Quick start
 
 The easiest way to run your own defguard instance is to use Docker and our [one-line install script](https://defguard.gitbook.io/defguard/features/setting-up-your-instance/one-line-install).
-
 Just run the command below in your shell and follow the prompts:
 
 ```bash
 curl --proto '=https' --tlsv1.2 -sSf -L https://raw.githubusercontent.com/DefGuard/deployment/main/docker-compose/setup.sh -O && bash setup.sh
 ```
 
+Here is a step-by-step video about this process:
+<div align="center">
+ <p align="center">
+
+[![Quickly deploy defguard](https://img.youtube.com/vi/MqlE6ZTn0bg/hqdefault.jpg)](https://www.youtube.com/watch?v=MqlE6ZTn0bg)
+
+</p>
+</div>
+
 To learn more about the script and available options please see the [documentation](https://defguard.gitbook.io/defguard/features/setting-up-your-instance/one-line-install).
 
 ### Setup a VPN server under 5min!?
@@ -136,7 +156,7 @@ Please review the [Contributing guide](https://defguard.gitbook.io/defguard/for-
 # Built and sponsored by
 
 <p align="center">
-      <a href="https://teonite.com" target="_blank"><img src="https://drive.google.com/uc?export=view&id=1z0fxSsZztoaeVWxHw2MbPbuOHMe3OsqN" alt="build by teonite" /></a>
+      <a href="https://teonite.com/services/rust/" target="_blank"><img src="https://drive.google.com/uc?export=view&id=1z0fxSsZztoaeVWxHw2MbPbuOHMe3OsqN" alt="build by teonite" /></a>
 </p>
 
 # Legal

diff --git a/src/handlers/mail.rs b/src/handlers/mail.rs
@@ -356,7 +356,7 @@ pub fn send_email_mfa_activation_email(
     let mail = Mail {
         to: user.email.clone(),
         subject: EMAIL_MFA_ACTIVATION_EMAIL_SUBJECT.into(),
-        content: templates::email_mfa_activation_mail(&code, session)?,
+        content: templates::email_mfa_activation_mail(user, &code, session)?,
         attachments: Vec::new(),
         result_tx: None,
     };
@@ -391,7 +391,7 @@ pub fn send_email_mfa_code_email(
     let mail = Mail {
         to: user.email.clone(),
         subject: EMAIL_MFA_CODE_EMAIL_SUBJECT.into(),
-        content: templates::email_mfa_code_mail(&code, session)?,
+        content: templates::email_mfa_code_mail(user, &code, session)?,
         attachments: Vec::new(),
         result_tx: None,
     };

diff --git a/src/templates.rs b/src/templates.rs
@@ -254,21 +254,31 @@ pub fn gateway_disconnected_mail(
     Ok(tera.render("mail_gateway_disconnected", &context)?)
 }
 
-pub fn email_mfa_activation_mail(code: &str, session: &Session) -> Result<String, TemplateError> {
+pub fn email_mfa_activation_mail(
+    user: &User,
+    code: &str,
+    session: &Session,
+) -> Result<String, TemplateError> {
     let (mut tera, mut context) = get_base_tera(None, Some(session), None, None)?;
     let timeout = server_config().mfa_code_timeout;
     context.insert("code", code);
     context.insert("timeout", &timeout.to_string());
+    context.insert("name", &user.first_name);
     tera.add_raw_template("mail_email_mfa_activation", MAIL_EMAIL_MFA_ACTIVATION)?;
 
     Ok(tera.render("mail_email_mfa_activation", &context)?)
 }
 
-pub fn email_mfa_code_mail(code: &str, session: Option<&Session>) -> Result<String, TemplateError> {
+pub fn email_mfa_code_mail(
+    user: &User,
+    code: &str,
+    session: Option<&Session>,
+) -> Result<String, TemplateError> {
     let (mut tera, mut context) = get_base_tera(None, session, None, None)?;
     let timeout = server_config().mfa_code_timeout;
     context.insert("code", code);
     context.insert("timeout", &timeout.to_string());
+    context.insert("name", &user.first_name);
     tera.add_raw_template("mail_email_mfa_code", MAIL_EMAIL_MFA_CODE)?;
 
     Ok(tera.render("mail_email_mfa_code", &context)?)

diff --git a/templates/base.tera b/templates/base.tera
@@ -236,7 +236,7 @@
                             width="100%">
                             <tbody>
                               <tr>
-                                <td align="left" style="
+                                <td align="center" style="
                                   font-size: 0px;
                                   padding: 10px 25px;
                                   word-break: break-word;
@@ -246,22 +246,22 @@
                                     font-size: 12px;
                                     font-weight: 400;
                                     line-height: 120%;
-                                    text-align: left;
+                                    text-align: center;
                                     color: #222222;
                                   ">
                                     {% if date_now %}
                                       <p style="margin: auto;">
-                                        <span style="font-weight: 700;">Date:</span> {{ date_now | safe }}
+                                        <span>Date:</span> {{ date_now | safe }}
                                       </p>
                                     {% endif %}
                                     {% if ip_address %}
-                                      <p style="margin: auto;">
-                                        <span style="font-weight: 700;">IP Address:</span> {{ ip_address | safe }}
+                                      < style="margin: auto;">
+                                        <span>IP Address:</span> {{ ip_address | safe }}
                                       </p>
                                     {% endif %}
                                     {% if device_type %}
                                       <p style="margin: auto;">
-                                        <span style="font-weight: 700;">Device type:</span> {{ device_type | safe }}
+                                        <span>Device type:</span> {{ device_type | safe }}
                                       </p>
                                     {% endif %}
                                   </div>
@@ -483,7 +483,7 @@
           <tr>
             <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
-              <div class="mj-column-per-100 mj-outlook-group-fix"
+              <div class="mj-column-per-100 mj-outlook-group-fix; display: flex; justify-content: center; align-items: center; gap: 10px;"
                 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>
@@ -494,10 +494,11 @@
                             <tr>
                               <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                                 <div
-                                  style="font-family:Poppins, Arial;font-size:10px;font-weight:300;line-height:120%;text-align:center;color:#899CA8;">
-                                  Copyright © {{ current_year }} <a href="https://teonite.com" target="_blank"
-                                    style="text-decoration: none; color: #899CA8;">teonite</a></br> Sent by Defguard
-                                  v.{{ application_version }}</div>
+                                  style="font-family:Poppins, Arial;font-size:12px;font-weight:400;line-height:normal;color:#899CA8; text-align: center;">
+                                    <div>Copyright © {{ current_year }} <a href="https://teonite.com" target="_blank"
+                                    style="text-decoration: none; color: #899CA8;">teonite</a></div>
+                                    <div>Sent by Defguard v.{{ application_version }}</div>
+                                </div>
                               </td>
                             </tr>
                           </tbody>

diff --git a/templates/macros.tera b/templates/macros.tera
@@ -53,13 +53,14 @@
 </div>
 {% endmacro text_section %}
 
-{% macro paragraph(content="", color="#222", font_size="12px", align="left", line_height="120%") %}
+{% macro paragraph(content="", color="#222", font_size="12px", align="left", line_height="120%", font_weight="400") %}
 <p style="
   font-family: Roboto, Arial;
   font-size: {{ font_size }};
   color: {{ color }};
   line-height: {{ line_height }};
   text-align: {{ align }};
+  font-weight: {{ font_weight }};
   ">
     {{ content | safe }}
 </p>
@@ -128,7 +129,7 @@ size="12px", line_height="120%", weight="400") %}
 </a>
 {% endmacro link %}
 
-{% macro title(content="") %}
+{% macro title(content="", font_size="28px") %}
 <div style="margin: 0px auto; max-width: 600px">
     <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%">
         <tbody>
@@ -162,7 +163,7 @@ size="12px", line_height="120%", weight="400") %}
                             ">
                                                         <div style="
                                 font-family: Poppins, Arial;
-                                font-size: 28px;
+                                font-size: {{ font_size }};
                                 font-weight: 600;
                                 line-height: 120%;
                                 text-align: center;

diff --git a/templates/mail_email_mfa_activation.tera b/templates/mail_email_mfa_activation.tera
@@ -6,13 +6,15 @@ code -> 6-digit zero-padded verification code
 {% import "macros.tera" as macros %}
 {% block mail_content %}
 {% set section_content = [
-  macros::paragraph(content="You are activating Multi-Factor Authentication using email verification codes."),
+  macros::title(content="Hello, " ~ name),
+  macros::paragraph(content="You are activating Multi-Factor Authentication using email verification codes.", align="center"),
 ] %}
 {{ macros::text_section(content_array=section_content) }}
-{{ macros::spacer(height="10px") }}
+{{ macros::spacer(height="40px") }}
 {% set section_content = [
-  macros::paragraph(content="Your code is: <b>" ~ code ~ "</b> - use this code to complete MFA setup."),
-  macros::paragraph(content="The code is valid for " ~ timeout ~ "."),
+  macros::title(content="<b>" ~ code ~ "</b>", font_size="45px"),
+  macros::spacer(height="40px"),
+  macros::paragraph(content="The code is valid for " ~ timeout ~ ".", align="center", font_size="15px"),
 ] %}
 {{ macros::text_section(content_array=section_content) }}
 {{ macros::spacer(height="10px") }}

diff --git a/templates/mail_email_mfa_code.tera b/templates/mail_email_mfa_code.tera
@@ -6,8 +6,16 @@ code -> 6-digit zero-padded verification code
 {% import "macros.tera" as macros %}
 {% block mail_content %}
 {% set section_content = [
-  macros::paragraph(content="Your code is: <b>" ~ code ~ "</b> - use this code to complete logging in with defguard"),
-  macros::paragraph(content="The code is valid for " ~ timeout ~ "."),
+  macros::title(content="Hello, " ~ name),
+  macros::paragraph(content="It seems like you are trying to login to defguard.", line_height="0%", align="center"),
+  macros::paragraph(content="Here is the code you need to access your account:", align="center"),
+] %}
+{{ macros::text_section(content_array=section_content) }}
+{{ macros::spacer(height="40px") }}
+{% set section_content = [
+  macros::title(content="<b>" ~ code ~ "</b>", font_size="45px"),
+  macros::spacer(height="40px"),
+  macros::paragraph(content="The code is valid for " ~ timeout ~ ".", align="center", font_size="15px"),
 ] %}
 {{ macros::text_section(content_array=section_content) }}
 {{ macros::spacer(height="10px") }}

diff --git a/templates/mail_enrollment_start.tera b/templates/mail_enrollment_start.tera
@@ -9,7 +9,7 @@ token -> enrollment token
 {% block mail_content %}
 {% set client_docs_url="https://defguard.gitbook.io/defguard/features/desktop-client" %}
 {% set client_docs_link=macros::link(content=client_docs_url, href=client_docs_url) %}
-{% set release_url="https://github.com/DefGuard/client/releases/latest" %}
+{% set release_url="https://defguard.net/download/" %}
 {% set release_link=macros::link(content=release_url, href=release_url) %}
 {# intro #}
 {% set section_content = [
@@ -21,7 +21,7 @@ macros::paragraph(content="In order to start the enrollment process please choos
 {% set enrollment_link=macros::link(content=enrollment_url, href=enrollment_url) %}
 {% set section_content = [
 macros::paragraph(content="<b>1. Enrollment by desktop client</b>"),
-macros::paragraph(content="Download the official defguard desktop client for macOS or Linux from the release page: " ~ release_link),
+macros::paragraph(content="Download the official defguard desktop client for Windows, macOS or Linux: " ~ release_link),
 macros::paragraph(content="After installation, please add a defguard instance by entering:"),
 macros::paragraph(content="<ul><li>Instance URL: " ~ enrollment_link ~ "</li><li>Enrollment token: <b>" ~ token ~ "</b></li></ul>"),
 macros::paragraph(content="<b>Please note that: the token is only valid for 24 hours after receiving this email. When the enrollment process starts user will have 10 minutes to complete the process.</b>"),