From 083bd18bc457e61481ecf663f68820e4a83bde0f Mon Sep 17 00:00:00 2001
From: pablohashescobar <nikhilschacko@gmail.com>
Date: Wed, 29 Nov 2023 22:41:29 +0530
Subject: [PATCH] dev: update magic link email

---
 .../plane/bgtasks/magic_link_code_task.py     |   1 +
 .../templates/emails/auth/magic_signin.html   | 345 ++++++++++++------
 2 files changed, 237 insertions(+), 109 deletions(-)

diff --git a/apiserver/plane/bgtasks/magic_link_code_task.py b/apiserver/plane/bgtasks/magic_link_code_task.py
index d0138c077..a9d58a173 100644
--- a/apiserver/plane/bgtasks/magic_link_code_task.py
+++ b/apiserver/plane/bgtasks/magic_link_code_task.py
@@ -93,6 +93,7 @@ def magic_link(email, key, token, current_site):
         msg.send()
         return
     except Exception as e:
+        print(e)
         capture_exception(e)
         # Print logs if in DEBUG mode
         if settings.DEBUG:
diff --git a/apiserver/templates/emails/auth/magic_signin.html b/apiserver/templates/emails/auth/magic_signin.html
index 2ba6c5463..06fc5e830 100644
--- a/apiserver/templates/emails/auth/magic_signin.html
+++ b/apiserver/templates/emails/auth/magic_signin.html
@@ -9,7 +9,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="format-detection" content="telephone=no" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <title>Your unique Plane login code is code</title>
     <style type="text/css" emogrify="no">
       #outlook a {
         padding: 0;
@@ -132,44 +132,50 @@
           width: 100% !important;
         }
         .r10-i {
+          padding-bottom: 15px !important;
+          padding-left: 15px !important;
+          padding-right: 15px !important;
+          padding-top: 15px !important;
+        }
+        .r11-i {
+          padding-bottom: 10px !important;
+          padding-top: 10px !important;
+          text-align: left !important;
+        }
+        .r12-i {
           padding-bottom: 10px !important;
           padding-left: 0px !important;
           padding-right: 0px !important;
           padding-top: 10px !important;
         }
-        .r11-i {
-          padding-bottom: 15px !important;
-          padding-top: 15px !important;
+        .r13-i {
+          background-color: #ffffff !important;
+          padding-bottom: 5px !important;
+          padding-top: 5px !important;
           text-align: left !important;
         }
-        .r12-i {
+        .r14-i {
           background-color: #ffffff !important;
           padding-bottom: 15px !important;
           padding-top: 15px !important;
           text-align: left !important;
         }
-        .r13-i {
+        .r15-i {
           padding-bottom: 0px !important;
           padding-left: 15px !important;
           padding-right: 15px !important;
           padding-top: 0px !important;
         }
-        .r14-c {
+        .r16-c {
           box-sizing: border-box !important;
           text-align: center !important;
           width: 100% !important;
         }
-        .r15-i {
+        .r17-i {
           padding-bottom: 5px !important;
           padding-top: 5px !important;
         }
-        .r16-i {
-          padding-bottom: 15px !important;
-          padding-left: 15px !important;
-          padding-right: 15px !important;
-          padding-top: 15px !important;
-        }
-        .r17-o {
+        .r18-o {
           border-bottom-color: #efefef !important;
           border-bottom-width: 2px !important;
           border-left-color: #efefef !important;
@@ -182,45 +188,45 @@
           margin: 0 auto 0 0 !important;
           width: 100% !important;
         }
-        .r18-i {
+        .r19-i {
           padding-bottom: 5px !important;
           padding-left: 5px !important;
           padding-right: 5px !important;
           padding-top: 5px !important;
           text-align: left !important;
         }
-        .r19-i {
+        .r20-i {
           padding-bottom: 5px !important;
           padding-left: 15px !important;
           padding-right: 15px !important;
           padding-top: 5px !important;
         }
-        .r20-c {
+        .r21-c {
           box-sizing: border-box !important;
           width: 100% !important;
         }
-        .r21-i {
+        .r22-i {
           font-size: 0px !important;
           padding-bottom: 10px !important;
           padding-left: 65px !important;
           padding-right: 65px !important;
           padding-top: 10px !important;
         }
-        .r22-c {
+        .r23-c {
           box-sizing: border-box !important;
           width: 32px !important;
         }
-        .r23-o {
-          border-style: solid !important;
-          margin-right: 8px !important;
-          width: 32px !important;
-        }
         .r24-o {
+          border-style: solid !important;
+          margin-right: 8px !important;
+          width: 32px !important;
+        }
+        .r25-o {
           border-style: solid !important;
           margin-right: 0px !important;
           width: 32px !important;
         }
-        .r25-i {
+        .r26-i {
           padding-bottom: 0px !important;
           padding-top: 5px !important;
           text-align: center !important;
@@ -433,11 +439,11 @@
                                           cellpadding="0"
                                           border="0"
                                           role="presentation"
-                                          width="200"
+                                          width="150"
                                           class="r9-o"
                                           style="
                                             table-layout: fixed;
-                                            width: 200px;
+                                            width: 150px;
                                           "
                                         >
                                           <tr>
@@ -449,7 +455,7 @@
                                             >
                                               <img
                                                 src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png"
-                                                width="200"
+                                                width="150"
                                                 border="0"
                                                 style="
                                                   display: block;
@@ -484,7 +490,7 @@
                   <tr>
                     <td
                       class="r10-i"
-                      style="padding-bottom: 10px; padding-top: 10px"
+                      style="padding-bottom: 15px; padding-top: 15px"
                     >
                       <table
                         width="100%"
@@ -548,63 +554,28 @@
                                                 color: #3b3f44;
                                                 font-family: georgia, serif;
                                                 font-size: 16px;
-                                                word-break: break-word;
                                                 line-height: 1.5;
-                                                padding-bottom: 15px;
-                                                padding-top: 15px;
+                                                word-break: break-word;
+                                                padding-bottom: 10px;
+                                                padding-top: 10px;
                                                 text-align: left;
                                               "
                                             >
                                               <div>
-                                                <p style="margin: 0">
-                                                  <span style="font-size: 17px"
-                                                    >The code below is only
-                                                    valid for 10 minutes.</span
-                                                  >
-                                                </p>
-                                              </div>
-                                            </td>
-                                          </tr>
-                                        </table>
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td class="r8-c" align="left">
-                                        <table
-                                          cellspacing="0"
-                                          cellpadding="0"
-                                          border="0"
-                                          role="presentation"
-                                          width="50%"
-                                          class="r9-o"
-                                          style="
-                                            table-layout: fixed;
-                                            width: 50%;
-                                          "
-                                        >
-                                          <tr>
-                                            <td
-                                              align="left"
-                                              valign="top"
-                                              class="r12-i nl2go-default-textstyle"
-                                              style="
-                                                color: #3b3f44;
-                                                font-family: georgia, serif;
-                                                font-size: 16px;
-                                                line-height: 1.5;
-                                                word-break: break-word;
-                                                background-color: #ffffff;
-                                                padding-bottom: 15px;
-                                                padding-top: 15px;
-                                                text-align: left;
-                                              "
-                                            >
-                                              <div>
-                                                <p style="margin: 0">
-                                                  <span style="font-size: 24px"
-                                                    >{{code}}</span
-                                                  >
-                                                </p>
+                                                <h2
+                                                  class="default-heading2"
+                                                  style="
+                                                    margin: 0;
+                                                    color: #1f2d3d;
+                                                    font-family: arial,
+                                                      helvetica, sans-serif;
+                                                    font-size: 32px;
+                                                    word-break: break-word;
+                                                  "
+                                                >
+                                                  The code below is only valid
+                                                  for 10 minutes.
+                                                </h2>
                                               </div>
                                             </td>
                                           </tr>
@@ -632,7 +603,10 @@
                   style="table-layout: fixed; width: 100%"
                 >
                   <tr>
-                    <td class="r13-i">
+                    <td
+                      class="r12-i"
+                      style="padding-bottom: 10px; padding-top: 10px"
+                    >
                       <table
                         width="100%"
                         cellspacing="0"
@@ -673,7 +647,160 @@
                                     role="presentation"
                                   >
                                     <tr>
-                                      <td class="r14-c" align="center">
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="50%"
+                                          class="r9-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 50%;
+                                          "
+                                        >
+                                          <tr>
+                                            <td
+                                              align="left"
+                                              valign="top"
+                                              class="r13-i nl2go-default-textstyle"
+                                              style="
+                                                color: #3b3f44;
+                                                font-family: georgia, serif;
+                                                font-size: 16px;
+                                                line-height: 1.5;
+                                                word-break: break-word;
+                                                background-color: #ffffff;
+                                                padding-bottom: 5px;
+                                                padding-top: 5px;
+                                                text-align: left;
+                                              "
+                                            >
+                                              <div>
+                                                <p style="margin: 0">
+                                                  <span style="font-size: 24px"
+                                                    >{{code}}</span
+                                                  >
+                                                </p>
+                                              </div>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                    <tr>
+                                      <td class="r8-c" align="left">
+                                        <table
+                                          cellspacing="0"
+                                          cellpadding="0"
+                                          border="0"
+                                          role="presentation"
+                                          width="100%"
+                                          class="r9-o"
+                                          style="
+                                            table-layout: fixed;
+                                            width: 100%;
+                                          "
+                                        >
+                                          <tr>
+                                            <td
+                                              align="left"
+                                              valign="top"
+                                              class="r14-i nl2go-default-textstyle"
+                                              style="
+                                                color: #3b3f44;
+                                                font-family: georgia, serif;
+                                                font-size: 16px;
+                                                line-height: 1.5;
+                                                word-break: break-word;
+                                                background-color: #ffffff;
+                                                padding-bottom: 15px;
+                                                padding-top: 15px;
+                                                text-align: left;
+                                              "
+                                            >
+                                              <div>
+                                                <p style="margin: 0">
+                                                  <span
+                                                    style="
+                                                      color: #858588;
+                                                      font-size: 15px;
+                                                    "
+                                                    >Please copy and paste this
+                                                    on the screen where you
+                                                    requested this from.</span
+                                                  >
+                                                </p>
+                                              </div>
+                                            </td>
+                                          </tr>
+                                        </table>
+                                      </td>
+                                    </tr>
+                                  </table>
+                                </td>
+                              </tr>
+                            </table>
+                          </th>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                </table>
+                <table
+                  cellspacing="0"
+                  cellpadding="0"
+                  border="0"
+                  role="presentation"
+                  width="100%"
+                  align="center"
+                  class="r3-o"
+                  style="table-layout: fixed; width: 100%"
+                >
+                  <tr>
+                    <td class="r15-i">
+                      <table
+                        width="100%"
+                        cellspacing="0"
+                        cellpadding="0"
+                        border="0"
+                        role="presentation"
+                      >
+                        <tr>
+                          <th
+                            width="100%"
+                            valign="top"
+                            class="r5-c"
+                            style="font-weight: normal"
+                          >
+                            <table
+                              cellspacing="0"
+                              cellpadding="0"
+                              border="0"
+                              role="presentation"
+                              width="100%"
+                              class="r6-o"
+                              style="table-layout: fixed; width: 100%"
+                            >
+                              <tr>
+                                <td
+                                  valign="top"
+                                  class="r7-i"
+                                  style="
+                                    padding-left: 15px;
+                                    padding-right: 15px;
+                                  "
+                                >
+                                  <table
+                                    width="100%"
+                                    cellspacing="0"
+                                    cellpadding="0"
+                                    border="0"
+                                    role="presentation"
+                                  >
+                                    <tr>
+                                      <td class="r16-c" align="center">
                                         <table
                                           cellspacing="0"
                                           cellpadding="0"
@@ -685,7 +812,7 @@
                                         >
                                           <tr>
                                             <td
-                                              class="r15-i"
+                                              class="r17-i"
                                               style="
                                                 padding-bottom: 5px;
                                                 padding-top: 5px;
@@ -708,7 +835,7 @@
                                                       border="0"
                                                       role="presentation"
                                                       valign=""
-                                                      class="r15-i"
+                                                      class="r17-i"
                                                       height="1"
                                                       style="
                                                         border-top-style: solid;
@@ -761,7 +888,7 @@
                 >
                   <tr>
                     <td
-                      class="r16-i"
+                      class="r10-i"
                       style="padding-bottom: 15px; padding-top: 15px"
                     >
                       <table
@@ -811,7 +938,7 @@
                                           border="0"
                                           role="presentation"
                                           width="100%"
-                                          class="r17-o"
+                                          class="r18-o"
                                           style="
                                             table-layout: fixed;
                                             width: 100%;
@@ -866,7 +993,7 @@
                                             <td
                                               align="left"
                                               valign="top"
-                                              class="r18-i nl2go-default-textstyle"
+                                              class="r19-i nl2go-default-textstyle"
                                               style="
                                                 color: #3b3f44;
                                                 font-family: georgia, serif;
@@ -1023,7 +1150,7 @@
                 >
                   <tr>
                     <td
-                      class="r19-i"
+                      class="r20-i"
                       style="padding-bottom: 5px; padding-top: 5px"
                     >
                       <table
@@ -1066,7 +1193,7 @@
                                     role="presentation"
                                   >
                                     <tr>
-                                      <td class="r14-c" align="center">
+                                      <td class="r16-c" align="center">
                                         <table
                                           cellspacing="0"
                                           cellpadding="0"
@@ -1091,7 +1218,7 @@
                                               >
                                                 <tr>
                                                   <td
-                                                    class="r20-c"
+                                                    class="r21-c"
                                                     style="
                                                       display: inline-block;
                                                     "
@@ -1110,7 +1237,7 @@
                                                     >
                                                       <tr>
                                                         <td
-                                                          class="r21-i"
+                                                          class="r22-i"
                                                           style="
                                                             padding-bottom: 10px;
                                                             padding-left: 209px;
@@ -1128,7 +1255,7 @@
                                                             <tr>
                                                               <th
                                                                 width="40"
-                                                                class="r22-c mobshow resp-table"
+                                                                class="r23-c mobshow resp-table"
                                                                 style="
                                                                   font-weight: normal;
                                                                 "
@@ -1139,7 +1266,7 @@
                                                                   border="0"
                                                                   role="presentation"
                                                                   width="100%"
-                                                                  class="r23-o"
+                                                                  class="r24-o"
                                                                   style="
                                                                     table-layout: fixed;
                                                                     width: 100%;
@@ -1147,7 +1274,7 @@
                                                                 >
                                                                   <tr>
                                                                     <td
-                                                                      class="r15-i"
+                                                                      class="r17-i"
                                                                       style="
                                                                         font-size: 0px;
                                                                         line-height: 0px;
@@ -1188,7 +1315,7 @@
                                                               </th>
                                                               <th
                                                                 width="40"
-                                                                class="r22-c mobshow resp-table"
+                                                                class="r23-c mobshow resp-table"
                                                                 style="
                                                                   font-weight: normal;
                                                                 "
@@ -1199,7 +1326,7 @@
                                                                   border="0"
                                                                   role="presentation"
                                                                   width="100%"
-                                                                  class="r23-o"
+                                                                  class="r24-o"
                                                                   style="
                                                                     table-layout: fixed;
                                                                     width: 100%;
@@ -1207,7 +1334,7 @@
                                                                 >
                                                                   <tr>
                                                                     <td
-                                                                      class="r15-i"
+                                                                      class="r17-i"
                                                                       style="
                                                                         font-size: 0px;
                                                                         line-height: 0px;
@@ -1248,7 +1375,7 @@
                                                               </th>
                                                               <th
                                                                 width="40"
-                                                                class="r22-c mobshow resp-table"
+                                                                class="r23-c mobshow resp-table"
                                                                 style="
                                                                   font-weight: normal;
                                                                 "
@@ -1259,7 +1386,7 @@
                                                                   border="0"
                                                                   role="presentation"
                                                                   width="100%"
-                                                                  class="r23-o"
+                                                                  class="r24-o"
                                                                   style="
                                                                     table-layout: fixed;
                                                                     width: 100%;
@@ -1267,7 +1394,7 @@
                                                                 >
                                                                   <tr>
                                                                     <td
-                                                                      class="r15-i"
+                                                                      class="r17-i"
                                                                       style="
                                                                         font-size: 0px;
                                                                         line-height: 0px;
@@ -1308,7 +1435,7 @@
                                                               </th>
                                                               <th
                                                                 width="32"
-                                                                class="r22-c mobshow resp-table"
+                                                                class="r23-c mobshow resp-table"
                                                                 style="
                                                                   font-weight: normal;
                                                                 "
@@ -1319,7 +1446,7 @@
                                                                   border="0"
                                                                   role="presentation"
                                                                   width="100%"
-                                                                  class="r24-o"
+                                                                  class="r25-o"
                                                                   style="
                                                                     table-layout: fixed;
                                                                     width: 100%;
@@ -1327,7 +1454,7 @@
                                                                 >
                                                                   <tr>
                                                                     <td
-                                                                      class="r15-i"
+                                                                      class="r17-i"
                                                                       style="
                                                                         font-size: 0px;
                                                                         line-height: 0px;
@@ -1391,7 +1518,7 @@
                 >
                   <tr>
                     <td
-                      class="r19-i"
+                      class="r20-i"
                       style="padding-bottom: 5px; padding-top: 5px"
                     >
                       <table
@@ -1451,7 +1578,7 @@
                                             <td
                                               align="center"
                                               valign="top"
-                                              class="r25-i nl2go-default-textstyle"
+                                              class="r26-i nl2go-default-textstyle"
                                               style="
                                                 color: #3b3f44;
                                                 font-family: georgia, serif;
@@ -1471,8 +1598,8 @@
                                                 >
                                                   <span style="font-size: 12px"
                                                     >This email was sent to
-                                                    {{email}}. Please delete this email
-                                                    if you aren't the intended
+                                                    {{email}}. Please delete if
+                                                    you aren't the intended
                                                     recipient.</span
                                                   >
                                                 </p>