Merge pull request #437 from goinvo/fermion/update-sign-in-email

Updates to sign in email
goinvo · Dec 31, 2024 · 05ad25b · 05ad25b
2 parents 593549f + d6dbf7a
commit 05ad25b
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 13 deletions.
diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
@@ -1,13 +1,45 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <style>
-      /* Email styles need to be inline */
-    </style>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
+<head>
+  <meta charset="utf-8">
+  <meta name="x-apple-disable-message-reformatting">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
+  <meta name="color-scheme" content="light dark">
+  <meta name="supported-color-schemes" content="light dark">
+  <!--[if mso]>
+  <noscript>
+    <xml>
+      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+    </xml>
+  </noscript>
+  <style>
+    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
+  </style>
+  <![endif]-->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
+  <style>
+      .hover-bg-slate-800:hover {
+          background-color: #1e293b !important
+      }
+      @media (max-width: 600px) {
+          .sm-p-6 {
+              padding: 24px !important
+          }
+          .sm-px-4 {
+              padding-left: 16px !important;
+              padding-right: 16px !important
+          }
+          .sm-px-6 {
+              padding-left: 24px !important;
+              padding-right: 24px !important
+          }
+      }
+  </style>
+</head>
+  <%= yield %>
 </html>
diff --git a/app/views/passwordless/mailer/sign_in.html.erb b/app/views/passwordless/mailer/sign_in.html.erb
@@ -0,0 +1,57 @@
+<body style="margin: 0; width: 100%; background-color: #f8fafc; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
+<div role="article" aria-roledescription="email" aria-label lang="en">
+  <div class="sm-px-4" style="background-color: #f8fafc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
+    <table align="center" style="margin: 0 auto" cellpadding="0" cellspacing="0" role="none">
+      <tr>
+        <td style="width: 552px; max-width: 100%">
+          <div role="separator" style="line-height: 24px">&zwj;</div>
+          <table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
+            <tr>
+              <td class="sm-p-6" style="border-radius: 8px; background-color: #fffffe; padding: 24px 36px; border: 1px solid #e2e8f0">
+                <a href="https://app.staffplan.com">
+                  <img src="https://app.staffplan.com/assets/staffplan-logo-notext-568affe9b8becd2bc88fd2fed64d0c42075d02916b900ec4a04ac651b5788431.png" width="70" alt="StaffPlan" style="max-width: 100%; vertical-align: middle">
+                </a>
+                <div role="separator" style="line-height: 24px">&zwj;</div>
+                <h1 style="margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 600; color: #0f172a">
+                  Hello there!
+                </h1>
+                <p style="margin: 0 0 24px; font-size: 16px; line-height: 24px; color: #475569">
+                  Please use this token to complete your sign in to your StaffPlan account:
+                </p>
+                <p style="margin: 0 0 24px; font-size: 24px; line-height: 32px; color: #475569">
+                  <%= @token %>
+                </p>
+                <p style="margin: 0 0 24px; font-size: 16px; line-height: 24px; color: #475569">
+                  or sign in directly using the link below.
+                </p>
+                <div>
+                  <a href="<%= @magic_link %>" style="display: inline-block; text-decoration: none; padding: 16px 24px; font-size: 16px; line-height: 1; border-radius: 4px; color: #fffffe; background-color: #020617" class="hover-bg-slate-800">
+                    <!--[if mso]><i style="mso-font-width: 150%; mso-text-raise: 31px" hidden>&emsp;</i><![endif]-->
+                    <span style="mso-text-raise: 16px">Sign in to StaffPlan</span>
+                    <!--[if mso]><i hidden style="mso-font-width: 150%">&emsp;&#8203;</i><![endif]-->
+                  </a>
+                </div>
+                <div role="separator" style="line-height: 24px">&zwj;</div>
+                <p style="margin: 0; font-size: 16px; line-height: 24px; color: #475569">
+                  Thanks,
+                  <br>
+                  <span style="font-weight: 600">StaffPlan</span>
+                </p>
+              </td>
+            </tr>
+          </table>
+          <table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
+            <tr>
+              <td class="sm-px-6" style="padding: 24px 36px">
+                <p style="margin: 0; font-size: 12px; color: #64748b">
+                  &copy; <%= Date.today.year %> StaffPlan. All rights reserved.
+                </p>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>
+</body>
diff --git a/app/views/passwordless/mailer/sign_in.text.erb b/app/views/passwordless/mailer/sign_in.text.erb
@@ -1 +1,7 @@
-<%= t("passwordless.mailer.sign_in.body", token: @token, magic_link: @magic_link) %>
+Use this token to complete your sign in:
+
+<%= @token %>
+
+Alternatively you can use this link to sign in directly: <%= @magic_link %>
+
+StaffPlan
diff --git a/app/views/passwordless/sessions/show.html.erb b/app/views/passwordless/sessions/show.html.erb
@@ -12,7 +12,10 @@
           <div>
             <%= f.label :token, "Please enter the token we've sent you via e-mail", autocomplete: "off", class: "block text-sm font-medium leading-6 text-gray-900" %>
             <div class="mt-2">
-              <%= f.text_field :token, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+              <%= f.text_field :token,
+                class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+                autocomplete: 'one-time-code'
+              %>
             </div>
           </div>
           <div>

diff --git a/config/locales/passwordless.yml b/config/locales/passwordless.yml
@@ -0,0 +1,5 @@
+en:
+  passwordless:
+    mailer:
+      sign_in:
+        subject: Sign in token for StaffPlan