release: 1.1.1 - session auth and security improvements

web/index.html

@@ -19,28 +19,49 @@
 </head>
 
 <body class="bg-gray-100">
+
     <div class="max-w-6xl mx-auto bg-white min-h-screen shadow-sm">
 
-        <!-- Header -->
-        <header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600">
-            <h1 class="text-2xl font-normal">
-                Fake SMTP Server
-            </h1>
+        <header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600 flex justify-between items-center">
+
+            <div>
+                <h1 class="text-2xl font-normal">
+                    Fake SMTP Server
+                </h1>
+
+                <p class="text-gray-400 text-sm mt-1">
+                    Email storage
+                </p>
+            </div>
+
+		<form
+		    method="post"
+		    action="/logout"
+		>
+		    <input
+		        type="hidden"
+		        name="csrf_token"
+		        value="{{.CSRFToken}}"
+		    >
+
+		    <button
+		        type="submit"
+		        class="text-sm text-gray-300 hover:text-white px-3 py-2 border border-gray-600 hover:border-gray-400"
+		    >
+		        Logout
+		    </button>
+		</form>
 
-            <p class="text-gray-400 text-sm mt-1">
-                Email storage
-            </p>
         </header>
 
-        <!-- Content -->
         <main class="p-4">
 
             {{range .Days}}
 
             <section class="mb-6 border border-gray-200">
 
-                <!-- Day header -->
                 <div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
+
                     <h2 class="text-base font-semibold text-gray-700">
                         {{.Date}}
                     </h2>
@@ -48,9 +69,9 @@
                     <span class="bg-gray-400 text-white px-2 py-0.5 text-xs">
                         {{len .Emails}} emails
                     </span>
+
                 </div>
 
-                <!-- Emails -->
                 <div class="divide-y divide-gray-100">
 
                     {{range .Emails}}
@@ -60,13 +81,13 @@
                         data-id="{{.ID}}"
                     >
 
-                        <!-- Email summary -->
                         <div
                             class="email-summary px-4 py-2 hover:bg-gray-50 cursor-pointer flex justify-between items-center"
                             role="button"
                             tabindex="0"
                             aria-expanded="false"
                         >
+
                             <div class="flex-1 flex flex-wrap gap-4 items-baseline">
 
                                 <div class="font-mono text-sm font-semibold text-gray-700 min-w-[180px]">
@@ -110,20 +131,23 @@
                                 </span>
 
                             </div>
+
                         </div>
 
-                        <!-- Email detail -->
                         <div class="email-detail hidden bg-gray-50 border-t border-gray-200 p-4">
+
                             <div class="email-content-wrapper">
 
                                 <iframe
                                     class="email-content-frame"
                                     title="Email content"
                                     sandbox="allow-same-origin allow-popups"
+                                    referrerpolicy="no-referrer"
                                     srcdoc="<html><body style='margin:0;padding:15px;font-family:monospace;font-size:12px;'>Loading...</body></html>"
                                 ></iframe>
 
                             </div>
+
                         </div>
 
                     </article>
@@ -131,6 +155,7 @@
                     {{end}}
 
                 </div>
+
             </section>
 
             {{else}}
@@ -154,8 +179,10 @@
             {{end}}
 
         </main>
+
     </div>
 
     <script src="/static/app.js"></script>
+
 </body>
 </html>