ShelterTechSF · richardxia · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/auth0/README.md b/auth0/README.md
@@ -0,0 +1,50 @@
+# Auth0
+
+This directory contains files that are not directly used by this app but that
+correspond to Auth0 settings that are configured through the Auth0 web portal.
+This is just to allow us to have some form of version control, especially across
+the different tenants we have.
+
+An Auth0 _tenant_ is a self-contained environment that has a store of users, a
+registry of applications and APIs, and configuration settings. An email address
+may have a user account on multiple tenants, but their Auth0 ID ("external ID"
+in our app) will be different. We have separate tenants for our development,
+staging, and production environments.
+
+An Auth0 tenant also contains email templates that are used for any action where
+Auth0 needs to send an email to a user. We store those templates here so that we
+can easily track changes to them. The email templates support variables using
+the Liquid templating language. Documentation on available variables is located
+at https://auth0.com/docs/customize/email/email-templates#common-variables
+
+## Warning
+
+Although email has supported HTML and CSS for decades, email clients have
+terrible support for modern HTML/CSS features, and so you need to write HTML and
+CSS like it's 1999. Yes, this means you should be using tables for layout. Yes,
+this means you should not use SVGs at all.
+
+## Passwordless Login Email
+
+We currently only use the Passwordless Login flow. Confusingly, the email
+template for it is not located in the same place in the Auth0 portal as all
+other email templates. The Passwordless Login template may be configured under
+Authentication -> Passwordless -> Email.
+
+The following are the values of the fields in this form:
+
+From:
+
+```
+{{ application.name }} <[email protected]>
+```
+
+Subject:
+
+```
+Welcome to {{ application.name }}
+```
+
+Body:
+
+See [./passwordless-email-template.liquid](./passwordless-email-template.liquid)
diff --git a/auth0/passwordless-email-template.liquid b/auth0/passwordless-email-template.liquid
@@ -0,0 +1,63 @@
+<!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">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <style type="text/css">.ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td,img{line-height:100%}#outlook a{padding:0}.ExternalClass,.ReadMsgBody{width:100%}a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;height:auto;outline:0;text-decoration:none}table{border-collapse:collapse!important}#bodyCell,#bodyTable,body{height:100%!important;margin:0;padding:0;font-family:ProximaNova,sans-serif}#bodyCell{padding:20px}#bodyTable{width:600px}@font-face{font-family:ProximaNova;src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:ProximaNova;src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);src:url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix) format('embedded-opentype'),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format('woff');font-weight:600;font-style:normal}@media only screen and (max-width:480px){#bodyTable,body{width:100%!important}a,blockquote,body,li,p,table,td{-webkit-text-size-adjust:none!important}body{min-width:100%!important}#bodyTable{max-width:600px!important}#signIn{max-width:280px!important}}
+</style>
+  </head>
+  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;font-family: &quot;ProximaNova&quot;, sans-serif;height: 100% !important;"><center>
+  <table style="width: 600px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;font-family: &quot;ProximaNova&quot;, sans-serif;border-collapse: collapse !important;height: 100% !important;" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
+    <tr>
+      <td align="center" valign="top" id="bodyCell" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 20px;font-family: &quot;ProximaNova&quot;, sans-serif;height: 100% !important;">
+      <div class="main">
+        <p style="text-align: center;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; margin-bottom: 30px;">
+          <img src="https://sfserviceguide.org/dist/sf-service-be140613b0ee317e3748.svg" width="50" alt="Your logo goes here" style="-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;">
+        </p>
+
+        <!-- Email change content -->
+        {% if operation == 'change_email' %}
+
+          <p style="font-size: 1.2em;line-height: 1.3;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Your email address has been updated.</p>
+
+        {% else %}
+
+          <!-- Signup email content -->
+          {% if send == 'link' or send == 'link_ios' or send == 'link_android' %}
+
+            <p style="font-size: 1.2em;line-height: 1.3;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Click and confirm that you want to sign in to {{ application.name }}. This link will expire in three minutes.</p>
+
+            <div style="text-align:center">
+            <a id="signIn" style="text-transform: uppercase;letter-spacing: 1px;color: #ffffff;text-decoration: none;display: inline-block;min-height: 48px;line-height: 48px;padding-top: 0;padding-right: 26px;padding-bottom: 0;margin: 20px 0;padding-left: 26px;border: 0;outline: 0;background: #eb5424;font-size: 14px;font-style: normal;font-weight: 400;text-align: center;white-space: nowrap;border-radius: 3px;text-overflow: ellipsis;max-width: 280px;overflow: hidden;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="{{ link }}">Sign in to {{ application.name }}</a>
+            </div>
+
+            <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">Or sign in using this link:</p>
+            <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;"><a style="font-size: 12px; color: #A9B3BC; text-decoration: none;word-break: break-all;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;" href="{{ link }}">{{ link }}</a></p>
+
+            {% elsif send == 'code' %}
+
+            <p style="font-size: 1.4em; line-height: 1.3;">Your verification code is: <b>{{ code }}</b></p>
+
+          {% endif %}
+
+        {% endif %}
+
+        <p style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">If you are having any issues with your account, please don't hesitate to contact us by replying to this mail.</p>
+
+        <br>
+        Thanks!
+        <br>
+
+        <strong>{{ application.name }}</strong>
+
+        <br><br>
+        <hr style="border: 2px solid #EAEEF3; border-bottom: 0; margin: 20px 0;">
+        <p style="text-align: center;color: #A9B3BC;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
+          If you did not make this request, please contact us by replying to this mail.
+        </p>
+      </div>
+      </td>
+    </tr>
+  </table>
+</center>
+</body>
+</html>