feat: logout button

src/web/auth.rs

@@ -92,6 +92,7 @@ mod get {
             }
             body hx-ext="response-targets" {
                 h1 { "Entretien" }
+                main {
                     form hx-post=(post_url) hx-target-error="#error" x-data=(json!({"user": state.autologin_user, "pass": state.autologin_pass, "htmx": false})) "x-on:htmx:load.document"="htmx = true" hx-trigger=(if state.autologin_pass.is_empty() { "submit" } else { "load" }) {
                         label for="username" { "username" }
                         input name="username" #username autofocus x-model="user" x-cloak;
@@ -101,6 +102,12 @@ mod get {
                         input type="submit" value="login" x-bind:disabled="!(user.length && pass.length && htmx)" hx-disabled-elt;
                         #error {}
                     }
+                    #blurb {
+                        p { "Task manager for repeating tasks like home maintenance." }
+                        p { "Try " code { "demo" } " for both username and password to try it out." }
+                        p { "Contact me if you want an account!" }
+                    }
+                }
             }
             }
         }

src/web/mod.rs

@@ -65,6 +65,9 @@ impl Layout {
                     }
                 }
                 body {
+                    nav {
+                        a href="/logout" { "logout of " (self.user.username) }
+                    }
                     main {
                         (content)
 

static/home.css

@@ -34,7 +34,6 @@
 
 main {
   width: 100%;
-  max-width: 600px;
   margin: auto;
 }
 

static/index.css

@@ -16,6 +16,8 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
 
 body {
   width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -58,3 +60,12 @@ form label {
   display: flex;
   flex-direction: column;
 }
+
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 1em;
+  width: 100%;
+  margin-bottom: 0.5em;
+}

static/login.css

@@ -6,6 +6,9 @@ body {
 form {
   display: flex;
   flex-direction: column;
+  height: fit-content;
+  padding: 1em;
+  width: 60%;
 
 }
 
@@ -18,3 +21,30 @@ h1 {
   font-weight: bold;
   margin-bottom: 2em;
 }
+
+main {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+
+  height: fit-content;
+}
+
+#blurb {
+  border: 1px solid var(--line-color);
+  border-radius: var(--input-border-radius);
+  padding: 1em;
+
+  display: flex;
+  flex-direction: column;
+
+  justify-content: space-between;
+  gap: 1.5em;
+  height: fit-content;
+  width: 40%;
+
+  code {
+    font-family: monospace;
+    font-size: 115%;
+  }
+}