ITISFoundation · mergify · Mar 31, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025
diff --git a/packages/notifications-library/src/notifications_library/_models.py b/packages/notifications-library/src/notifications_library/_models.py
@@ -13,9 +13,17 @@ class UserData:
     email: str
 
 
+@dataclass(frozen=True)
+class ProductUIData:
+    logo_url: str
+    strong_color: str
+
+
 @dataclass(frozen=True)
 class ProductData:
     product_name: ProductName
     display_name: str
     vendor_display_inline: str
     support_email: str
+    homepage_url: str
+    product_ui: ProductUIData
diff --git a/packages/notifications-library/src/notifications_library/templates/base.html b/packages/notifications-library/src/notifications_library/templates/base.html
@@ -5,28 +5,102 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{% block title %}{% endblock %}</title>
 <style>
-    body {
-        font-family: Arial, sans-serif;
-        margin: 0;
-        padding: 20px;
-        color: #333;
-    }
-    .container {
-        background-color: #f9f9f9;
-        padding: 20px;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-    a {
-        color: #007bff;
-        text-decoration: none;
-    }
+  body {
+      font-family: Manrope, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+  }
+  .email-container {
+      max-width: 600px;
+      margin: 20px auto;
+      background-color: #ffffff;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  .header {
+      display: flex;
+      align-items: center;
+      border-bottom: 2px solid #ddd;
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+  }
+  .logo {
+      height: 40px;
+  }
+  .content {
+      color: #333;
+      font-size: 16px;
+      line-height: 1.5;
+  }
+  a {
+      color: #007bff;
+      text-decoration: none;
+  }
+  .strong-button {
+      cursor: pointer;
+      background-color: {{ product.product_ui.strong_color }};
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 4px;
+      overflow: hidden;
+      white-space: nowrap;
+      user-select: none;
+      touch-action: none;
+      outline: none;
+  }
+  .strong-button a {
+      font-size: 16px;
+      color: white;
+      text-decoration: none;
+      display: block;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+  }
+  .footer {
+      margin-top: 20px;
+      padding-top: 15px;
+      border-top: 2px solid #ddd;
+      font-size: 14px;
+      text-align: center;
+      color: #666;
+  }
+  .footer a {
+      color: #007bff;
+      text-decoration: none;
+  }
+  .github-logo {
+    height: 20px;
+    vertical-align: bottom;
+  }
 </style>
 </head>
 <body>
-  <div class="container">
-    {% block content %}
-    {% endblock %}
+  <div class="email-container">
+    <div class="header">
+      <a href="{{ product.homepage_url }}" target="_blank" rel="noopener noreferrer">
+        <img src="{{ product.product_ui.logo_url }}" alt="Logo" class="logo">
+      </a>
+    </div>
+
+    <div class="content">
+      {% block content %}
+      {% endblock %}
+    </div>
+
+    <div class="footer">
+      <p>
+        Visit the <a href="{{ product.homepage_url }}" target="_blank" rel="noopener noreferrer">Platform</a> |
+        Need help? <a href="mailto:{{ product.support_email }}">Support</a> |
+        Powered by oSPARC
+        <a href="https://github.com/ITISFoundation/osparc-simcore" target="_blank" rel="noopener noreferrer">
+          <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="github-logo">
+        </a>
+      </p>
+    </div>
   </div>
 </body>
 </html>
diff --git a/...ifications-library/src/notifications_library/templates/on_change_email.email.content.html b/...ifications-library/src/notifications_library/templates/on_change_email.email.content.html
@@ -8,7 +8,10 @@
 </p>
 
 <p>
-  <a href="{{ link }}">{{ link }}</a>
+  <!-- Many email clients strip or ignore certain CSS properties, including them inline -->
+  <button class="strong-button" style="border-radius: 4px;">
+    <a href="{{ link }}" style="color: white;">Change email</a>
+  </button>
 </p>
 
 <p>Please don't hesitate to contact us at {{ product.support_email }} if you need further help.

diff --git a/...ications-library/src/notifications_library/templates/on_new_invitation.email.content.html b/...ications-library/src/notifications_library/templates/on_new_invitation.email.content.html
@@ -3,7 +3,12 @@
 {% block content %}
 <p>Dear {{ user.first_name }},</p>
 <p>Thank you for your interest in {{ product.display_name }}. We are pleased to provide you with a one-time invitation link to register on the platform.</p>
-<p>Click <a href="{{ link }}">here</a> to access the registration page.</p>
+<p>
+  <!-- Many email clients strip or ignore certain CSS properties, including them inline -->
+  <button class="strong-button" style="border-radius: 4px;">
+    <a href="{{ link }}" style="color: white;">Register</a>
+  </button>
+</p>
 <p>Please follow the on-screen information and proceed with your registration.</p>
 <p>If any problem should occur, please feel free to contact us at {{ product.support_email }}.</p>
 <p>Enjoy {{ product.display_name }}!</p>

diff --git a/...otifications-library/src/notifications_library/templates/on_registered.email.content.html b/...otifications-library/src/notifications_library/templates/on_registered.email.content.html
@@ -4,7 +4,11 @@
 <p>Dear {{ user.first_name }},</p>
 <p>Thank you for your interest in {{ product.display_name }}. You have successfully registered for {{ host }}.</p>
 <p>Please activate your account via the link below:</p>
-<p><a href="{{ link }}">{{ link }}</a></p>
+<p>
+  <button class="strong-button" style="border-radius: 4px;">
+    <a href="{{ link }}" style="color: white;">Activate</a>
+  </button>
+</p>
 <p>Please don't hesitate to contact us at {{ product.support_email }} if you need further help.</p>
 <p>Best Regards,</p>
 <p>The <i>{{ product.display_name }}</i> Team</p>

diff --git a/...ications-library/src/notifications_library/templates/on_reset_password.email.content.html b/...ications-library/src/notifications_library/templates/on_reset_password.email.content.html
@@ -7,7 +7,11 @@
 {% if success %}
 
 <p>To complete the process, please click the link below:</p>
-<p><a href="{{ link }}">{{ link }}</a></p>
+<p>
+  <button class="strong-button" style="border-radius: 4px;">
+    <a href="{{ link }}" style="color: white;">Reset Password</a>
+  </button>
+</p>
 
 {% else %}
 
@@ -16,7 +20,7 @@
 
 {% endif %}
 
-<p>If you did not request this, please contact us immediatly at {{ product.support_email }} for security reasons.</p>
+<p>If you did not request this, please contact us immediately at {{ product.support_email }} for security reasons.</p>
 
 <p>Best Regards,</p>
 <p>The <i>{{ product.display_name }}</i> Team</p>

diff --git a/packages/notifications-library/tests/conftest.py b/packages/notifications-library/tests/conftest.py
@@ -10,7 +10,7 @@
 import notifications_library
 import pytest
 from models_library.products import ProductName
-from notifications_library._models import ProductData, UserData
+from notifications_library._models import ProductData, ProductUIData, UserData
 from notifications_library.payments import PaymentData
 from pydantic import EmailStr
 from pytest_simcore.helpers.typing_env import EnvVarsDict
@@ -44,7 +44,7 @@ def external_envfile_dict(external_envfile_dict: EnvVarsDict) -> EnvVarsDict:
 
 
 #
-# mock data for templaes
+# mock data for templates
 #
 
 
@@ -55,11 +55,21 @@ def product_data(
 ) -> ProductData:
     vendor: Vendor = product["vendor"]
 
+    product_ui = ProductUIData(
+        logo_url=vendor.get(
+            "logo",
+            "https://raw.githubusercontent.com/ITISFoundation/osparc-simcore/refs/heads/master/services/static-webserver/client/source/resource/osparc/osparc-black.svg",
+        ),
+        strong_color=vendor.get("strong_color", "rgb(131, 0, 191)"),
+    )
+
     return ProductData(  # type: ignore
         product_name=product_name,
         display_name=product["display_name"],
         vendor_display_inline=f"{vendor.get('name','')}, {vendor.get('address','')}",
         support_email=product["support_email"],
+        homepage_url=vendor.get("url", "https://osparc.io/"),
+        product_ui=product_ui,
     )
 
 

diff --git a/packages/notifications-library/tests/test__render.py b/packages/notifications-library/tests/test__render.py
@@ -2,14 +2,17 @@
 from pathlib import Path
 
 from models_library.products import ProductName
+from notifications_library._models import ProductData
 from notifications_library._render import (
     create_render_env_from_folder,
     create_render_env_from_package,
 )
 from notifications_library._templates import _print_tree, _templates_dir
 
 
-def test_render_env_from_folder(tmp_path: Path, product_name: ProductName):
+def test_render_env_from_folder(
+    tmp_path: Path, product_name: ProductName, product_data: ProductData
+):
 
     pkg_env = create_render_env_from_package()
 
@@ -27,4 +30,5 @@ def test_render_env_from_folder(tmp_path: Path, product_name: ProductName):
     product_template = consolidated_env.get_template(f"{product_name}/base.html")
     common_template = pkg_env.get_template("base.html")
 
-    assert product_template.render() == common_template.render()
+    data = {"product": product_data}
+    assert product_template.render(data) == common_template.render(data)
@@ -41,6 +41,8 @@ class Vendor(TypedDict, total=False):
 
     url: str  # vendor website
     license_url: str  # Which are the license terms? (if applies)
+    logo: str  # vendor logo
+    strong_color: str  # vendor main color
 
     invitation_url: str  # How to request a trial invitation? (if applies)
     invitation_form: bool  # If True, it takes precendence over invitation_url and asks the FE to show the form (if defined)

@@ -253,6 +253,8 @@ def random_product(
             name=fake.company(),
             copyright=fake.company_suffix(),
             url=fake.url(),
+            logo=fake.url(),
+            strong_color=fake.color(),
             license_url=fake.url(),
             invitation_url=fake.url(),
             invitation_form=fake.boolean(),

@@ -219,8 +219,8 @@ qx.Class.define("osparc.auth.LoginWithDecorators", {
       if (urlFragment.nav && urlFragment.nav.length) {
         if (urlFragment.nav[0] === "registration") {
           pages.setSelection([registration]);
-        } else if (urlFragment.nav[0] === "request-account" && requestAccount) {
-          pages.setSelection([requestAccount]);
+        } else if (urlFragment.nav[0] === "request-account") {
+          requestAccount ? pages.setSelection([requestAccount]) : pages.setSelection([registration]);
         } else if (urlFragment.nav[0] === "reset-password") {
           pages.setSelection([resetPassword]);
         }

@@ -149,7 +149,7 @@ class AttachmentTuple(NamedTuple):
     payload: bytearray
 
 
-async def _send_email_with_attachements(
+async def _send_email_with_attachments(
     *,
     settings: SMTPSettings,
     sender: str,
@@ -160,7 +160,7 @@ async def _send_email_with_attachements(
     reply_to: str | None = None,
 ) -> MIMEMessage:
     """
-    Sends an email with a body/subject marked as html with file attachement/s
+    Sends an email with a body/subject marked as html with file attachment/s
     """
     # NOTE: Intentionally separated from send_email to further optimize legacy code
 
@@ -240,7 +240,7 @@ async def send_email_from_template(
     subject, body = _render_template(request, template, context)
 
     if attachments:
-        return await _send_email_with_attachements(
+        return await _send_email_with_attachments(
             settings=settings,
             sender=from_,
             recipient=to,

@@ -239,6 +239,8 @@ def _update_json_schema_extra(schema: JsonDict) -> None:
                         "vendor": {
                             "url": "https://acme.com",
                             "license_url": "https://acme.com/license",
+                            "logo": "https://acme.com/logo",
+                            "strong_color": "#123456",
                             "invitation_form": True,
                             "name": "ACME",
                             "copyright": "© ACME correcaminos",

@@ -60,6 +60,8 @@ def test_product_to_static():
             "url": "https://acme.com",
             "license_url": "https://acme.com/license",
             "invitation_form": True,
+            "logo": "https://acme.com/logo",
+            "strong_color": "#123456",
         },
         "issues": [
             {