Merge lp:~deadlight/canonical-identity-provider/email-template into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Added an HTML email template

QA:
In terminal 1:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run

In terminal 2:
- source env/bin/activate
- make mail-debug

- Visit http://[CONTAINER IP]:8000/
- Create an account
- Check the output of terminal 2 and see the email text
- Copy the HTML email into a file and open it in a browser to view ityo

[Karl Williams (deadlight)]

Example email output: https://pastebin.canonical.com/p/77QvsTF4BY/

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'src/identityprovider/emailutils.py'
--- src/identityprovider/emailutils.py	2018-08-22 22:33:08 +0000
+++ src/identityprovider/emailutils.py	2019-08-29 15:29:29 +0000
@@ -64,22 +64,28 @@
     return formataddr((name, address))
 
 
-def send_templated_email(subject, template, context, email, from_address=None):
+def send_templated_email(subject, template, context, email, from_address=None, title=None):
     msg = render_to_string(template, context=context)
 
     if from_address is None:
         from_address = format_address(settings.NOREPLY_FROM_ADDRESS)
+    if title is None:
+        title = 'Ubuntu One'
+
+    html = render_to_string('email/html/email.html', {'title':title, 'content':msg})
+
     if not isinstance(email, (tuple, list)):
         email = [email]
     return send_mail(
-        subject,
-        msg,
-        from_address,
-        [format_address(e) for e in email]
+        subject = subject,
+        message = msg,
+        from_email = from_address,
+        recipient_list = [format_address(e) for e in email],
+        html_message = html
     )
 
 
-def send_fancy_email(subject, template, context, email, from_address=None):
+def send_fancy_email(subject, template, context, email, from_address=None, title=None):
     if from_address is None:
         from_address = format_address(
             settings.NOREPLY_FROM_ADDRESS,
@@ -87,7 +93,7 @@
         )
     subject = u"%s: %s" % (settings.NOREPLY_FROM_NAME, subject)
     return send_templated_email(subject, template, context, email,
-                                from_address)
+                                from_address, title)
 
 
 def _should_add_invalidation_link(email):
@@ -178,7 +184,7 @@
         template = 'email/desktop-newuser.txt'
 
     send_fancy_email(
-        _('Finish your registration'), template, context, email)
+        _('Finish your registration'), template, context, email, None, 'Finish your registration')
     return token, invalidate_email_token
 
 
@@ -219,7 +225,7 @@
     context, token, invalidate_email_token = _context_for_email_request(
         root_url, account, email, AuthTokenType.PASSWORDRECOVERY,
         redirection_url, requester_email=email)
-    send_fancy_email(subject, template, context, email)
+    send_fancy_email(subject, template, context, email, None, 'Password reset')
     return token, invalidate_email_token
 
 
@@ -236,7 +242,7 @@
     send_fancy_email(
         _("Password change notification"),
         'email/password-changed.txt',
-        context=context, email=email.email)
+        context=context, email=email.email, from_address=None, title='Password changed')
 
 
 def send_printed_codes_renewal_email(root_url, account, devices):
@@ -257,7 +263,7 @@
     send_fancy_email(
         _("Printed list of backup codes is nearly used up"),
         'email/printed-codes-nearly-exhausted-warning.txt',
-        context=context, email=email)
+        context=context, email=email, from_address=None, title='Backup codes')
 
 
 def send_validation_email_request(root_url, account, email,
@@ -281,7 +287,7 @@
         requester_email=preferredemail_email, oid_token=oid_token)
     send_fancy_email(
         _("Validate your email address"), 'email/validate-email.txt',
-        context, email)
+        context, email, None, 'Validate your email address')
     return token, invalidate_email_token
 
 
@@ -300,7 +306,8 @@
     send_fancy_email(
         _("The email address {email} was removed from your account").format(
             email=invalidated_email),
-        'email/email-invalidated.txt', context=context, email=email)
+            'email/email-invalidated.txt', context=context, email=email,
+            from_address=None, title='Email address removed')
 
 
 def send_notification_to_invalidated_email_address(root_url, account,
@@ -315,14 +322,16 @@
         ),
         'email/invalidate_email_confirmation.txt',
         context=context,
-        email=invalidated_email
+        email=invalidated_email,
+        from_address=None,
+        title='Email address invalidated'
     )
 
 
 def send_preferred_changed_notification(email, new_preferred):
     send_fancy_email(
         _('E-mail change notification'), 'email/preferred-changed.txt',
-        {'new_preferred': new_preferred}, email)
+        {'new_preferred': new_preferred}, email, None, 'Preferred email changed')
 
 
 def send_invitation_after_password_reset(root_url, email):
@@ -330,7 +339,7 @@
     url = urljoin(root_url, reverse('new_account'))
     send_fancy_email(
         _("Password reset request"), 'email/invitation.txt',
-        {'email': email, 'signup': url}, email,
+        {'email': email, 'signup': url}, email, None, 'Password reset request'
     )
 
 
@@ -363,7 +372,8 @@
     else:
         subject = _('Account to be deleted - action required')
     send_fancy_email(
-        subject, 'email/account-action-required.txt', context, email,
+        subject, 'email/account-action-required.txt', context, email, None,
+        'Action required'
     )
     return token, invalidate_email_token
 
 
=== added directory 'src/webui/templates/email/html'
=== added file 'src/webui/templates/email/html/email.html'
--- src/webui/templates/email/html/email.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/email/html/email.html	2019-08-29 15:29:29 +0000
@@ -0,0 +1,247 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+xmlns:v="urn:schemas-microsoft-com:vml"
+xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <!--[if gte mso 9]><xml>
+  <o:OfficeDocumentSettings>
+  <o:AllowPNG/>
+  <o:PixelsPerInch>96</o:PixelsPerInch>
+  </o:OfficeDocumentSettings>
+  </xml><![endif]-->
+
+  <!-- Define Charset -->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+  <!-- Responsive Meta Tag -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+
+  <link href="https://fonts.googleapis.com/css?family=Ubuntu:100,300,400,500,700" rel="stylesheet">
+
+  <title>{{ title }}</title>
+
+  <!-- Responsive Styles and Valid Styles -->
+
+  <style type="text/css">
+    /* iOS BLUE LINKS */
+    a[x-apple-data-detectors] {
+      color: inherit !important;
+      text-decoration: none !important;
+      font-size: inherit !important;
+      font-family: inherit !important;
+      font-weight: inherit !important;
+      line-height: inherit !important;
+    }
+
+    body{
+      width: 100%;
+      background-color: #E1E1E1;
+      margin:0;
+      padding:0;
+      -webkit-font-smoothing: antialiased;
+      mso-margin-top-alt:0px;
+      mso-margin-bottom-alt:0px;
+      mso-padding-alt: 0px 0px 0px 0px;
+      -webkit-text-size-adjust:none;
+    }
+
+    p,h1,h2,h3,h4{
+      margin-top:0;
+      margin-bottom:0;
+      padding-top:0;
+      padding-bottom:0;
+    }
+
+    p {
+      margin-bottom: 1em;
+    }
+
+    [style*="Ubuntu"] {
+      font-family: Ubuntu, Sans Serif, Arial, Helvetica !important;
+    }
+
+    span.Preheader{display: none; font-size: 1px;}
+
+    html{
+      width: 100%;
+    }
+
+    .ZedFix {
+      display:none;
+      display:none!important;
+    }
+
+    /* ----------- responsivity ----------- */
+    @media only screen and (max-width: 640px){
+      /*-------- Table --------*/
+      *[class=Table800] {width: 100% !important;}
+      *[class=Table799] {width: 90% !important;}
+      *[class=Table740] {width: 100% !important;}
+      *[class=Tds200] {width: 150px !important; padding-left:0 !important;}
+      *[class=Tds540] {width: 610px !important;}
+
+      /*----- Image -------*/
+      *[class=Inbox] img{width: 50% !important; height: auto !important;}
+
+      /*----- Others -------*/
+      *[class=Zwidth] {min-width:100% !important;}
+      *[class=MobileHide] {display:none !important;}
+      *[class=TextC] {text-align:center !important;}
+    }
+
+    @media only screen and (max-width: 479px){
+      /*-------- Table --------*/
+      *[class=Table800] {width: 100% !important; min-width:360px !important;}
+      *[class=Tds200] {width: 110px !important; padding-left:0 !important;}
+      *[class=Tds540] {width: 210px !important;}
+
+      /*----- Image -------*/
+      *[class=Inbox] img{width: 50% !important; height: auto !important;}
+
+      /*----- Others -------*/
+      *[class=Zwidth] {min-width:100% !important;}
+      *[class=MobileHide] {display:none !important;}
+      *[class=TextC] {text-align:center !important;}
+      *[class=Fonts48] {font-size:35.65px !important; line-height:48px !important;}
+    }
+  </style>
+</head>
+
+<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+  <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#E1E1E1">
+    <tr>
+      <td align="center" class="Zwidth" style="min-width:800px;">
+        <div class="mktEditable" id="Header">
+          <table align="center" width="800" border="0" cellspacing="0" cellpadding="0" bgcolor="#380426" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:800px;" class="Table800">
+            <tr>
+              <td background="https://assets.ubuntu.com/v1/1d8ce799-email-hero-background.png?w=800" bgcolor="#380426" width="800" height="289" valign="top" style="background-image:url(https://assets.ubuntu.com/v1/1d8ce799-email-hero-background.png?w=800); background-position:top center; background-size:cover;">
+                <!--[if gte mso 9]>
+                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:289px;">
+                <v:fill type="tile" src="https://assets.ubuntu.com/v1/1d8ce799-email-hero-background.png?w=800" color="#7D335B" />
+                <v:textbox inset="0,0,0,0">
+                <![endif]-->
+                <div>
+                  <table align="center" width="800" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:800px;" class="Table799">
+                    <tr>
+                      <td align="center">
+                        <table align="center" width="740" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:740px;" class="Table740">
+                          <tr>
+                            <td align="left" valign="bottom" style="padding: 65px 0 0;">
+                              <img height="55" width="120" src="https://assets.ubuntu.com/v1/d738f754-Ubuntu_One_Mono_Logo.svg" />
+                            </td>
+                          </tr>
+                          <tr>
+                            <td align="left" valign="bottom" class="Fonts48" style="color:#FFFFFF; font-family: Arial, Sans Serif, Ubuntu; font-size:46.5667px; line-height:56px; font-weight:100; font-style:normal; padding:30px 0 50px 0;">
+                              {{ title }}
+                            </td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </div>
+                <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+          </td>
+        </tr>
+      </table>
+    </div>
+  </td>
+</tr>
+
+<tr>
+  <td align="center" class="Zwidth" style="min-width:800px;">
+    <div class="mktEditable" id="Primary_talking">
+      <table align="center" width="800" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:800px;" class="Table800">
+        <tr>
+          <td align="center" style="padding:54px 20px">
+            <table align="center" width="740" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:740px;" class="Table740">
+              <tr>
+                <td align="left" style="color:#0E0E0E; font-family: Arial, Sans Serif, Ubuntu; font-size:16px; line-height:24px; font-weight:300; font-style:normal; padding:16px 0 0 0">
+                  {{ content|linebreaks|urlize }}
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </td>
+</tr>
+
+<tr>
+  <td align="center" class="Zwidth" style="min-width:800px;">
+    <div class="mktEditable" id="Footer">
+      <table align="center" width="800" cellpadding="0" bgcolor="#F7F7F7" border="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:800px;" class="Table800">
+        <tr>
+          <td align="center" style="padding:40px 20px 0 20px;">
+            <table align="center" width="740" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:740px;" class="Table740">
+              <tr>
+                <td align="left">
+                  <table align="left" width="167" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:167px;" class="Table740">
+                    <tr>
+                      <td align="center">
+                        <table align="center" width="167" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
+                          <tr>
+                            <td align="left" valign="middle" width="32">
+                              <a href="https://www.linkedin.com/company/ubuntu/" target="_blank"> <img src="https://assets.ubuntu.com/v1/885320bd-social-linkedin.png" width="32" height="32" border="0" style="display:block; width:32px; height:32px" alt="" /> </a>
+                            </td>
+                            <td align="left" valign="middle" width="13">&nbsp;</td>
+                            <td align="left" valign="middle" width="32">
+                              <a href="https://twitter.com/ubuntu" target="_blank"> <img src="https://assets.ubuntu.com/v1/28569fb0-social-twitter.png" width="32" height="32" border="0" style="display:block; width:32px; height:32px" alt="" /> </a>
+                            </td>
+                            <td align="left" valign="middle" width="13">&nbsp;</td>
+                            <td align="left" valign="middle" width="32">
+                              <a href="https://www.facebook.com/ubuntulinux/" target="_blank"> <img src="https://assets.ubuntu.com/v1/63b1275f-social-facebook.png" width="32" height="32" border="0" style="display:block; width:32px; height:32px" alt="" /> </a>
+                            </td>
+                          </tr>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td align="left" class="TextC" style="color:#000000; font-family: Arial, Sans Serif, Ubuntu; font-size:16px; line-height:24px; font-weight:300; font-style:normal; padding:20px 0 5px 0">
+                  <a style="color:#000000; text-decoration:none" href="http://www.canonical.com" target="_blank">www.canonical.com</a> &nbsp; | &nbsp; <a style="color:#000000; text-decoration:none" href="http://www.ubuntu.com" target="_blank">www.ubuntu.com</a>
+                </td>
+              </tr>
+              <tr>
+                <td align="left" class="TextC" style="color:#000000; font-family: Arial, Sans Serif, Ubuntu; font-size:14px; line-height:22px; font-weight:300; font-style:normal; padding:0 0 50px 0">
+                  © 2019 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </td>
+</tr>
+
+<tr>
+  <td align="center" class="Zwidth" style="min-width:800px">
+    <table align="center" width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:800px;" class="Table800">
+      <tr>
+        <td align="left" class="Inbox" valign="top" width="50%">
+          <img src="https://assets.ubuntu.com/v1/99e75450-inbox.png" width="400" height="1" border="0" style="display:block; width:400px; height:1px;" alt="" />
+        </td>
+        <td align="right" class="Inbox" valign="top" width="50%">
+          <img src="https://assets.ubuntu.com/v1/99e75450-inbox.png" width="400" height="1" border="0" style="display:block; width:400px; height:1px;" alt="" />
+        </td>
+      </tr>
+    </table>
+  </td>
+</tr>
+</table>
+<div class="ZedFix" style="white-space:nowrap; font:15px courier; line-height:0;">
+  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+</div>
+
+</body>
+</html>