https://soundcloud.com/logout

public/style.css

@@ -39,6 +39,10 @@ body {
   margin: 2rem;
 }
 
+button, input {
+  font-family: inherit;
+}
+
 a {
   color: var(--accent-color);
   transition: 0.1s color;
@@ -166,4 +170,19 @@ pre {
   flex-direction: row;
   gap: 0.5em;
   align-items: center;
+}
+
+.inline-post {
+  display: inline;
+}
+.inline-post-button {
+  display: inline;
+  background: none;
+  outline: none;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  text-decoration: underline;
+  cursor: pointer;
 }

public/template/account_management.ecr

@@ -119,7 +119,12 @@
             </div>
           </div>
           <div class="greeting-bottom">
-            <a href="/accounts/settings">Settings</a> &middot; <a>Log out</a>
+            <a href="/accounts/settings">Settings</a> &middot;
+            <form action="/accounts/logout" method="POST" class="inline-post">
+              <button type="submit" class="inline-post-button">
+                Log out
+              </button>
+            </form>
           </div>
         </div>
       </div>

src/template_endpoints/logout.cr

@@ -0,0 +1,17 @@
+require "uri"
+require "http-session"
+
+include CrystalGauntlet
+
+CrystalGauntlet.template_endpoints["/accounts/logout"] = ->(context : HTTP::Server::Context) {
+  if context.request.method != "POST"
+    context.response.respond_with_status 405
+    return
+  end
+
+  CrystalGauntlet.sessions.delete(context)
+
+  context.response.headers.add("Location", "/")
+  context.response.status = HTTP::Status::SEE_OTHER
+  return
+}