marek преди 1 месец
родител
ревизия
f2de14fb36
променени са 5 файла, в които са добавени 125 реда и са изтрити 101 реда
  1. 5 1
      assets/css/style.css
  2. 1 1
      routes/include/auth.js
  3. 59 49
      templates/en/email/auth.eta
  4. 59 49
      templates/sk/email/auth.eta
  5. 1 1
      utils/auth.js

+ 5 - 1
assets/css/style.css

@@ -73,6 +73,7 @@ body {
 
 p.messageText, a, button, h1, h2, h3 {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 0.5em;
 }
@@ -112,7 +113,6 @@ header .links {
     color: initial;
     border: none;
     width: max-content;
-    cursor: pointer;
     display: flex;
     align-items: center;
     gap: 0.5em;
@@ -121,6 +121,10 @@ header .links {
     font-family: inherit;
 }
 
+button {
+    cursor: pointer;
+}
+
 [role="button"].danger, button.danger {
     color: #eee;
     background-color: rgb(255, 50, 50);

+ 1 - 1
routes/include/auth.js

@@ -104,7 +104,7 @@ export default (langName, lang) => new Elysia({ prefix: "/auth" })
     cookie.session.set({
       value: session.token,
       expires: new Date(2147483647 * 1000),
-      maxAge: new Date(2147483647 * 1000),
+      maxAge: 2147483647,
       domain: process.env.BASE_URL.replace(/^https?:\/\/(www\.)?|:\d+/gi, ''),
       httpOnly: true
     })

+ 59 - 49
templates/en/email/auth.eta

@@ -3,62 +3,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <style>
-        body {
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            padding-inline: 10%;
-            font-family: sans-serif;
-            line-height: 1.3;
-            background-color: #eee;
-            gap: 0.5em;
-        }
-
-        h2, p {
-            margin-block: 0.5em;
-        }
-
-        [role="button"] {
-            background-color: rgba(0, 0, 0, 0.1);
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            text-decoration: none;
-            color: initial;
-            border: none;
-            width: max-content;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 0.5em;
-            font-size: 1em;
-            height: max-content;
-        }
-
-        [role="button"].primary {
-            color: #eee;
-            background-color: rgb(50, 50, 255);
-        }
-    </style>
+    <title>auth verification</title>
 </head>
-<body>
-    <h2><%= process.env.APP_NAME %></h2>
+<body style="margin: 0; padding: 0; background-color: #eeeeee; font-family: sans-serif;">
+    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="background-color: #eeeeee;">
+        <tr>
+            <td align="center" style="padding: 20px 10%;">
+                <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                    
+                    <tr>
+                        <td style="padding-top: 10px; padding-bottom: 10px;">
+                            <h2 style="margin: 0; font-size: 24px; color: #000000;"><%= process.env.APP_NAME %></h2>
+                        </td>
+                    </tr>
 
-    <p>hi,</p>
+                    <tr>
+                        <td style="padding-bottom: 10px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">hi,</p>
+                        </td>
+                    </tr>
 
-    <p>to login click on the button below.</p>
+                    <tr>
+                        <td style="padding-bottom: 10px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">to login click on the button below.</p>
+                        </td>
+                    </tr>
 
-    <a role="button" class="primary" href="<%= it.link %>">click here</a>
+                    <tr>
+                        <td style="padding-bottom: 15px;">
+                            <table border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                    <td align="center" bgcolor="#3232ff" style="border-radius: 8px; background-color: #3232ff;">
+                                        <a href="<%= it.link %>" target="_blank" style="padding: 10px 20px; font-size: 16px; color: #eeeeee; text-decoration: none; display: inline-block; font-weight: normal;">
+                                            click here
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
 
-    <p>or enter this code: <strong><%= it.code %></strong></p>
+                    <tr>
+                        <td style="padding-bottom: 15px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">
+                                or enter this code: <strong><%= it.code %></strong>
+                            </p>
+                        </td>
+                    </tr>
 
+                    <tr>
+                        <td style="padding-bottom: 30px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">
+                                cannot click on the link? copy it: <span style="word-break: break-all;"><%= it.link %></span>
+                            </p>
+                        </td>
+                    </tr>
 
-    <p>cannot click on the link? copy it: <%= it.link %></p>
+                    <tr>
+                        <td style="border-top: 1px solid #cccccc; padding-top: 20px;">
+                            <p style="margin: 0; margin-bottom: 10px;"><small style="font-size: 12px; color: #666666;">if you did not request this email, you can safely ignore it.</small></p>
+                            <p style="margin: 0;"><small style="font-size: 12px; color: #666666;"><%= process.env.APP_NAME %> <%= new Date().getFullYear() %></small></p>
+                        </td>
+                    </tr>
 
-    <footer>
-        <p><small>if you did not request this email, you can safely ignore it.</small></p>
-        <p><small><%= process.env.APP_NAME %> <%= new Date().getFullYear() %></small></p>
-    </footer>
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>

+ 59 - 49
templates/sk/email/auth.eta

@@ -3,62 +3,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <style>
-        body {
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            padding-inline: 10%;
-            font-family: sans-serif;
-            line-height: 1.3;
-            background-color: #eee;
-            gap: 0.5em;
-        }
-
-        h2, p {
-            margin-block: 0.5em;
-        }
-
-        [role="button"] {
-            background-color: rgba(0, 0, 0, 0.1);
-            border-radius: 0.5em;
-            padding: 0.5em 1em;
-            text-decoration: none;
-            color: initial;
-            border: none;
-            width: max-content;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 0.5em;
-            font-size: 1em;
-            height: max-content;
-        }
-
-        [role="button"].primary {
-            color: #eee;
-            background-color: rgb(50, 50, 255);
-        }
-    </style>
+    <title>auth verifikácia</title>
 </head>
-<body>
-    <h2><%= process.env.APP_NAME %></h2>
+<body style="margin: 0; padding: 0; background-color: #eeeeee; font-family: sans-serif;">
+    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#eeeeee" style="background-color: #eeeeee;">
+        <tr>
+            <td align="center" style="padding: 20px 10%;">
+                <table width="100%" border="0" cellspacing="0" cellpadding="0">
+                    
+                    <tr>
+                        <td style="padding-top: 10px; padding-bottom: 10px;">
+                            <h2 style="margin: 0; font-size: 24px; color: #000000;"><%= process.env.APP_NAME %></h2>
+                        </td>
+                    </tr>
 
-    <p>dobrý deň,</p>
+                    <tr>
+                        <td style="padding-bottom: 10px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">dobrý deň,</p>
+                        </td>
+                    </tr>
 
-    <p>pre prihlásenie kliknite na tlačidlo nižšie.</p>
+                    <tr>
+                        <td style="padding-bottom: 10px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">pre prihlásenie kliknite na tlačidlo nižšie.</p>
+                        </td>
+                    </tr>
 
-    <a role="button" class="primary" href="<%= it.link %>">kliknite sem</a>
+                    <tr>
+                        <td style="padding-bottom: 15px;">
+                            <table border="0" cellspacing="0" cellpadding="0">
+                                <tr>
+                                    <td align="center" bgcolor="#3232ff" style="border-radius: 8px; background-color: #3232ff;">
+                                        <a href="<%= it.link %>" target="_blank" style="padding: 10px 20px; font-size: 16px; color: #eeeeee; text-decoration: none; display: inline-block; font-weight: normal;">
+                                            kliknite sem
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
 
-    <p>alebo zadajte tento kód: <strong><%= it.code %></strong></p>
+                    <tr>
+                        <td style="padding-bottom: 15px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">
+                                alebo zadajte tento kód: <strong><%= it.code %></strong>
+                            </p>
+                        </td>
+                    </tr>
 
+                    <tr>
+                        <td style="padding-bottom: 30px;">
+                            <p style="margin: 0; font-size: 16px; line-height: 1.3; color: #000000;">
+                                nemôžete kliknúť na link? skopírujte si ho: <span style="word-break: break-all;"><%= it.link %></span>
+                            </p>
+                        </td>
+                    </tr>
 
-    <p>nemôžete kliknúť na link? skopírujte si ho: <%= it.link %></p>
+                    <tr>
+                        <td style="border-top: 1px solid #cccccc; padding-top: 20px;">
+                            <p style="margin: 0; margin-bottom: 10px;"><small style="font-size: 12px; color: #666666;">ak ste si tento email nevyžiadali, môžete ho kľudne ignorovať.</small></p>
+                            <p style="margin: 0;"><small style="font-size: 12px; color: #666666;"><%= process.env.APP_NAME %> <%= new Date().getFullYear() %></small></p>
+                        </td>
+                    </tr>
 
-    <footer>
-        <p><small>ak ste si tento email nevyžiadali, môžete ho kľudne ignorovať.</small></p>
-        <p><small><%= process.env.APP_NAME %> <%= new Date().getFullYear() %></small></p>
-    </footer>
+                </table>
+            </td>
+        </tr>
+    </table>
 </body>
 </html>

+ 1 - 1
utils/auth.js

@@ -19,7 +19,7 @@ authDB.run(`create table if not exists sessions (
     secretHash text not null,
     email text not null,
     timestamp datetime default current_timestamp,
-    lastAccessed datetime default current_timestamp,
+    lastAccessed datetime default current_timestamp
 );`)
 
 import nodemailer from "nodemailer"