Merge pull request #230 from sartography/pretty-emails-160

Pretty emails 160

.sonarcloud.properties

@@ -1,7 +1,7 @@
 sonar.organization=sartography
 sonar.projectKey=sartography_cr-connect-workflow
 sonar.host.url=https://sonarcloud.io
-sonar.exclusions=docs/**,config/**,instance/**,migrations/**,postgres/**,readme_images/**,schema/**,templates/**
+sonar.exclusions=crc/templates/*.html,docs/**,config/**,instance/**,migrations/**,postgres/**,readme_images/**,schema/**,templates/**
 sonar.sources=crc
 sonar.test.inclusions=tests
 sonar.python.coverage.reportPaths=coverage.xml

config/default.py

@@ -15,7 +15,8 @@ JSON_SORT_KEYS = False  # CRITICAL.  Do not sort the data when returning values
 API_TOKEN = environ.get('API_TOKEN', default = 'af95596f327c9ecc007b60414fc84b61')
 
 NAME = "CR Connect Workflow"
-FLASK_PORT = environ.get('PORT0') or environ.get('FLASK_PORT', default="5000")
+DEFAULT_PORT = "5000"
+FLASK_PORT = environ.get('PORT0') or environ.get('FLASK_PORT', default=DEFAULT_PORT)
 CORS_ALLOW_ORIGINS = re.split(r',\s*', environ.get('CORS_ALLOW_ORIGINS', default="localhost:4200, localhost:5002"))
 TESTING = environ.get('TESTING', default="false") == "true"
 PRODUCTION = (environ.get('PRODUCTION', default="false") == "true")

config/testing.py

@@ -27,3 +27,6 @@ ADMIN_UIDS = ['dhf8r']
 print('### USING TESTING CONFIG: ###')
 print('SQLALCHEMY_DATABASE_URI = ', SQLALCHEMY_DATABASE_URI)
 print('TESTING = ', TESTING)
+
+from config.default import DEFAULT_PORT
+SERVER_NAME = f'localhost:{DEFAULT_PORT}'

crc/scripts/email.py

@@ -7,7 +7,9 @@ from crc import app
 from crc.api.common import ApiError
 from crc.scripts.script import Script
 from crc.services.ldap_service import LdapService
-from crc.services.mails import send_mail
+from crc.services.email_service import EmailService
+
+from flask import render_template, request
 
 
 class Email(Script):
@@ -25,25 +27,27 @@ email ("My Subject", "dhf8r@virginia.edu", pi.email)
 """
 
     def do_task_validate_only(self, task, *args, **kwargs):
-        self.get_subject(task, args)
+        self.get_subject(args)
         self.get_email_recipients(task, args)
         self.get_content(task)
 
     def do_task(self, task, study_id, workflow_id, *args, **kwargs):
 
-        if len(args) < 1:
+        if len(args) < 2:
             raise ApiError(code="missing_argument",
                            message="Email script requires a subject and at least one email address as arguments")
-        subject = args[0]
+        subject = self.get_subject(args)
         recipients = self.get_email_recipients(task, args)
-        content, content_html = self.get_content(task)
+
         if recipients:
-            send_mail(
+            content, content_html = self.get_content(task)
+            EmailService.add_email(
                 subject=subject,
                 sender=app.config['DEFAULT_SENDER'],
                 recipients=recipients,
                 content=content,
-                content_html=content_html
+                content_html=content_html,
+                study_id=study_id
             )
 
     def check_valid_email(self, email):
@@ -82,7 +86,8 @@ email ("My Subject", "dhf8r@virginia.edu", pi.email)
 
         return emails
 
-    def get_subject(self, task, args):
+    @staticmethod
+    def get_subject(args):
         # subject = ''
         if len(args[0]) < 1:
             raise ApiError(code="missing_argument",
@@ -101,4 +106,10 @@ email ("My Subject", "dhf8r@virginia.edu", pi.email)
         template = Template(content)
         rendered = template.render(task.data)
         rendered_markdown = markdown.markdown(rendered).replace('\n', '<br>')
-        return rendered, rendered_markdown
+        wrapped = self.get_cr_connect_wrapper(rendered_markdown)
+
+        return rendered, wrapped
+
+    @staticmethod
+    def get_cr_connect_wrapper(email_body):
+        return render_template('mail_content_template.html', email_body=email_body, base_url=request.base_url)

crc/static/uva_rotunda.svg

@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="43.79221"
+   width="43.330002"
+   version="1.1"
+   viewBox="0 0 43.330002 43.79221"
+   data-name="Layer 1"
+   id="Layer_1"
+   sodipodi:docname="uva_rotunda.svg"
+   inkscape:version="0.92.4 (f8dce91, 2019-08-02)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="705"
+     inkscape:window-height="480"
+     id="namedview21"
+     showgrid="false"
+     fit-margin-top="8"
+     fit-margin-left="8"
+     fit-margin-right="8"
+     fit-margin-bottom="8"
+     inkscape:zoom="7.9215345"
+     inkscape:cx="21.665"
+     inkscape:cy="21.896104"
+     inkscape:window-x="912"
+     inkscape:window-y="253"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" />
+  <metadata
+     id="metadata107">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Artboard 1</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1,.cls-2{fill:#e57200;}.cls-2,.cls-3{fill-rule:evenodd;}.cls-3,.cls-4{fill:#232d4b;}</style>
+  </defs>
+  <title
+     id="title6">Artboard 1</title>
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon8"
+     points="22.87,30.46 22.87,19.25 25.23,19.25 25.23,30.46 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon10"
+     points="10.16,30.46 10.16,19.25 12.44,19.25 12.44,30.46 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon12"
+     points="13.23,30.46 13.23,19.25 15.66,19.25 15.66,30.46 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon14"
+     points="16.44,30.46 16.44,19.25 18.87,19.25 18.87,30.46 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon16"
+     points="22.09,19.25 22.09,30.46 19.66,30.46 19.66,19.25 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon18"
+     points="11.13,18.46 17.84,14.33 24.22,18.46 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon20"
+     points="9.62,18.46 4.01,18.46 4.01,14.29 16.41,14.29 "
+     class="cls-1" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200"
+     id="polygon22"
+     points="19.23,14.29 31.31,14.29 31.31,18.46 25.67,18.46 "
+     class="cls-1" />
+  <path
+     style="fill:#e57200"
+     id="path24"
+     d="M 33.58,15.052206 H 9.74 a 13.6,13.6 0 0 1 23.84,0 z"
+     class="cls-1"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:#e57200;fill-rule:evenodd"
+     id="path26"
+     d="m 8,22.752206 v -0.65 l 0.16,0.11 -0.11,0.35 v 0.19 z m 4.64,9.27 H 11.6 l 0.53,-0.38 0.52,0.38 z m 0.73,0 h -0.71 l -0.2,-0.62 0.54,-0.39 h -0.67 l -0.2,-0.63 -0.21,0.63 h -0.66 l 0.54,0.39 -0.21,0.62 H 8 v -9.19 l 0.5,-0.37 0.53,0.39 -0.2,-0.63 0.53,-0.38 H 8.71 l -0.2,-0.63 -0.09,0.28 -0.13,0.35 H 8 v -1 h 5.38 v 11.18 z m -5.37,-6.76 0.53,0.39 -0.2,0.63 0.53,-0.39 0.53,0.39 -0.2,-0.63 0.53,-0.39 H 9.07 l -0.2,-0.62 -0.2,0.62 z m 1.84,3.57 -0.21,0.63 0.53,-0.39 0.54,0.39 -0.21,-0.63 0.51,-0.39 h -0.62 l -0.21,-0.63 -0.2,0.63 H 9.31 l 0.54,0.39 z"
+     class="cls-2"
+     inkscape:connector-curvature="0" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200;fill-rule:evenodd"
+     id="polygon28"
+     points="9.38,31.25 9.38,34.23 4.01,34.23 4.01,31.25 "
+     class="cls-2" />
+  <polygon
+     transform="translate(4,1.562208)"
+     style="fill:#e57200;fill-rule:evenodd"
+     id="polygon30"
+     points="26.01,31.25 31.31,31.25 31.31,34.23 26.01,34.23 "
+     class="cls-2" />
+  <path
+     style="fill:#e57200;fill-rule:evenodd"
+     id="path32"
+     d="m 22,35.792206 h -0.6 l 0.3,-0.22 z m -4.06,-0.87 -0.21,0.62 0.54,-0.38 0.53,0.38 -0.2,-0.62 0.53,-0.39 h -0.66 l -0.2,-0.63 -0.27,0.66 h -0.66 l 0.54,0.39 z m 3.43,0.41 -0.15,0.46 h -7 v -3 H 15 l -0.15,0.46 h -0.66 l 0.54,0.39 -0.21,0.63 0.54,-0.39 0.53,0.39 -0.2,-0.63 0.53,-0.39 h -0.66 l -0.15,-0.46 h 13.11 l -0.16,0.46 H 27.4 l 0.54,0.39 -0.21,0.63 0.54,-0.39 0.53,0.39 -0.2,-0.63 0.53,-0.39 h -0.66 l -0.15,-0.46 h 0.91 v 3 h -7.07 l -0.16,-0.46 0.54,-0.38 h -0.66 l -0.21,-0.63 -0.2,0.63 h -0.66 l 0.53,0.38 z m 4,-0.41 0.54,-0.39 h -0.66 l -0.25,-0.63 -0.2,0.63 h -0.66 l 0.53,0.39 -0.2,0.62 0.53,-0.38 0.54,0.38 -0.21,-0.62 z"
+     class="cls-2"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:#e57200;fill-rule:evenodd"
+     id="path34"
+     d="m 35.31,22.132206 v 0.51 l -0.14,-0.42 z m 0,9.89 H 30 v -11.21 h 5.3 v 1 h -0.26 l -0.21,-0.63 -0.2,0.63 H 34 l 0.53,0.38 -0.2,0.63 0.53,-0.39 0.47,0.34 v 2.49 h -0.62 l -0.21,-0.62 -0.2,0.62 h -0.66 l 0.53,0.39 -0.2,0.63 0.53,-0.39 0.54,0.39 -0.21,-0.63 0.5,-0.36 v 6.73 z m -3.55,0 -0.2,-0.62 0.53,-0.39 h -0.66 l -0.2,-0.63 -0.21,0.63 h -0.66 l 0.54,0.39 -0.2,0.62 0.53,-0.38 z m 1.75,-3.19 0.53,-0.39 h -0.66 l -0.2,-0.63 -0.2,0.63 h -0.66 l 0.53,0.39 -0.2,0.63 0.53,-0.39 0.53,0.39 z"
+     class="cls-2"
+     inkscape:connector-curvature="0" />
+</svg>

crc/templates/mail_content_template.html

@@ -0,0 +1,10 @@
+{% extends "mail_main_template.html" %}
+{% block content %}
+    <div>
+        {{ email_body | safe }}
+    </div>
+{% endblock %}
+{% block footer %}
+  {{ super() }}
+  <span>Ramp-Up Toolkit Configurator - University of Virginia</span>
+{% endblock %}}

crc/templates/mail_main_template.html

@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- This is all stolen from https://github.com/leemunroe/responsive-html-email-template -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>CR-Connect Email</title>
+    <style>
+      /* -------------------------------------
+          GLOBAL RESETS
+      ------------------------------------- */
+
+      /*All the styling goes here*/
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #f6f6f6;
+        font-family: sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        width: 100%; }
+        table td {
+          font-family: sans-serif;
+          font-size: 14px;
+          vertical-align: top;
+      }
+
+      /* -------------------------------------
+          BODY & CONTAINER
+      ------------------------------------- */
+
+      .body {
+        background-color: #f6f6f6;
+        width: 100%;
+      }
+
+      /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+      .container {
+        display: block;
+        margin: 0 auto !important;
+        /* makes it centered */
+        max-width: 580px;
+        padding: 10px;
+        width: 580px;
+      }
+
+      /* This should also be a block element, so that it will fill 100% of the .container */
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        max-width: 580px;
+        padding: 10px;
+      }
+
+      /* -------------------------------------
+          HEADER, FOOTER, MAIN
+      ------------------------------------- */
+      .main {
+        background: #ffffff;
+        border-radius: 3px;
+        width: 100%;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 20px;
+      }
+
+      .content-block {
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      .footer, .header {
+        clear: both;
+        margin-top: 10px;
+        text-align: center;
+        width: 100%;
+        background-color: #232D48;
+        color:white;
+      }
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+          color: #999999;
+          font-size: 12px;
+          text-align: center;
+      }
+
+      div.header td.content-block {
+        display: inline-table;
+      }
+
+      div.header td.content-block span {
+        font-size: large;
+      }
+
+      /* -------------------------------------
+          TYPOGRAPHY
+      ------------------------------------- */
+      h1,
+      h2,
+      h3,
+      h4 {
+        color: #000000;
+        font-family: sans-serif;
+        font-weight: 400;
+        line-height: 1.4;
+        margin: 0;
+        margin-bottom: 30px;
+      }
+
+      h1 {
+        font-size: 35px;
+        font-weight: 300;
+        text-align: center;
+        text-transform: capitalize;
+      }
+
+      p,
+      ul,
+      ol {
+        font-family: sans-serif;
+        font-size: 14px;
+        font-weight: normal;
+        margin: 0;
+        margin-bottom: 15px;
+      }
+        p li,
+        ul li,
+        ol li {
+          list-style-position: inside;
+          margin-left: 5px;
+      }
+
+      a {
+        color: #3498db;
+        text-decoration: underline;
+      }
+
+      /* -------------------------------------
+          BUTTONS
+      ------------------------------------- */
+      .btn {
+        box-sizing: border-box;
+        width: 100%; }
+        .btn > tbody > tr > td {
+          padding-bottom: 15px; }
+        .btn table {
+          width: auto;
+      }
+        .btn table td {
+          background-color: #ffffff;
+          border-radius: 5px;
+          text-align: center;
+      }
+        .btn a {
+          background-color: #ffffff;
+          border: solid 1px #3498db;
+          border-radius: 5px;
+          box-sizing: border-box;
+          color: #3498db;
+          cursor: pointer;
+          display: inline-block;
+          font-size: 14px;
+          font-weight: bold;
+          margin: 0;
+          padding: 12px 25px;
+          text-decoration: none;
+          text-transform: capitalize;
+      }
+
+      .btn-primary table td {
+        background-color: #3498db;
+      }
+
+      .btn-primary a {
+        background-color: #3498db;
+        border-color: #3498db;
+        color: #ffffff;
+      }
+
+      /* -------------------------------------
+          OTHER STYLES THAT MIGHT BE USEFUL
+      ------------------------------------- */
+      .last {
+        margin-bottom: 0;
+      }
+
+      .first {
+        margin-top: 0;
+      }
+
+      .align-center {
+        text-align: center;
+      }
+
+      .align-right {
+        text-align: right;
+      }
+
+      .align-left {
+        text-align: left;
+      }
+
+      .clear {
+        clear: both;
+      }
+
+      .mt0 {
+        margin-top: 0;
+      }
+
+      .mb0 {
+        margin-bottom: 0;
+      }
+
+      .preheader {
+        color: transparent;
+        display: none;
+        height: 0;
+        max-height: 0;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        mso-hide: all;
+        visibility: hidden;
+        width: 0;
+      }
+
+      .powered-by a {
+        text-decoration: none;
+      }
+
+      hr {
+        border: 0;
+        border-bottom: 1px solid #f6f6f6;
+        margin: 20px 0;
+      }
+
+      /* -------------------------------------
+          RESPONSIVE AND MOBILE FRIENDLY STYLES
+      ------------------------------------- */
+      @media only screen and (max-width: 620px) {
+        table[class=body] h1 {
+          font-size: 28px !important;
+          margin-bottom: 10px !important;
+        }
+        table[class=body] p,
+        table[class=body] ul,
+        table[class=body] ol,
+        table[class=body] td,
+        table[class=body] span,
+        table[class=body] a {
+          font-size: 16px !important;
+        }
+        table[class=body] .wrapper,
+        table[class=body] .article {
+          padding: 10px !important;
+        }
+        table[class=body] .content {
+          padding: 0 !important;
+        }
+        table[class=body] .container {
+          padding: 0 !important;
+          width: 100% !important;
+        }
+        table[class=body] .main {
+          border-left-width: 0 !important;
+          border-radius: 0 !important;
+          border-right-width: 0 !important;
+        }
+        table[class=body] .btn table {
+          width: 100% !important;
+        }
+        table[class=body] .btn a {
+          width: 100% !important;
+        }
+        table[class=body] .img-responsive {
+          height: auto !important;
+          max-width: 100% !important;
+          width: auto !important;
+        }
+      }
+
+      /* -------------------------------------
+          PRESERVE THESE STYLES IN THE HEAD
+      ------------------------------------- */
+      @media all {
+        .ExternalClass {
+          width: 100%;
+        }
+        .ExternalClass,
+        .ExternalClass p,
+        .ExternalClass span,
+        .ExternalClass font,
+        .ExternalClass td,
+        .ExternalClass div {
+          line-height: 100%;
+        }
+        .apple-link a {
+          color: inherit !important;
+          font-family: inherit !important;
+          font-size: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+          text-decoration: none !important;
+        }
+        #MessageViewBody a {
+          color: inherit;
+          text-decoration: none;
+          font-size: inherit;
+          font-family: inherit;
+          font-weight: inherit;
+          line-height: inherit;
+        }
+        .btn-primary table td:hover {
+          background-color: #34495e !important;
+        }
+        .btn-primary a:hover {
+          background-color: #34495e !important;
+          border-color: #34495e !important;
+        }
+      }
+
+    </style>
+    <title>Research Ramp-Up Toolkit</title>
+</head>
+  <body class="">
+    <span class="preheader"></span>
+    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+      <tr>
+        <td>&nbsp;</td>
+        <td class="container">
+          <div class="content">
+
+            <!-- START HEADER -->
+            <div class="header">
+              <table role="presentation">
+                <tr>
+                    <td class="container">
+                      <div>
+                        <table role="presentation">
+                            <tr>
+                              <th role="presentation"></th>
+                              <td>
+                                  <img class="logo"
+                                       src="{{ url_for('static', filename='uva_rotunda.svg', _external=True) }}"
+                                       alt="University of Virginia">
+                              </td>
+                              <th role="presentation"></th>
+                              <td class="content-block">
+                                  <span>Research Ramp-Up Toolkit Configurator</span>
+                              </td>
+                            </tr>
+                        </table>
+                      </div>
+                    </td>
+                </tr>
+              </table>
+            </div>
+            <!-- END HEADER -->
+
+
+            <!-- START CENTERED WHITE CONTAINER -->
+            <table role="presentation" class="main">
+
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td class="wrapper">
+                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                    <tr>
+                      <td>{% block content %}{% endblock %}
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+            </table>
+            <!-- END CENTERED WHITE CONTAINER -->
+
+            <!-- START FOOTER -->
+            <div class="footer">
+              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td class="content-block">
+                    <span class="apple-link">Ramp-Up Toolkit Configurator - University of Virginia</span>
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <!-- END FOOTER -->
+
+          </div>
+        </td>
+        <td>&nbsp;</td>
+      </tr>
+    </table>
+  </body>
+</html>