diff --git a/src/web/auth.rs b/src/web/auth.rs index 530551f..185d857 100644 --- a/src/web/auth.rs +++ b/src/web/auth.rs @@ -92,14 +92,21 @@ mod get { } body hx-ext="response-targets" { h1 { "Entretien" } - 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; - label for="password" { "password" } - input name="password" #password type="password" x-model="pass" x-cloak; + 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; + label for="password" { "password" } + input name="password" #password type="password" x-model="pass" x-cloak; - input type="submit" value="login" x-bind:disabled="!(user.length && pass.length && htmx)" hx-disabled-elt; - #error {} + 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!" } + } } } } diff --git a/src/web/mod.rs b/src/web/mod.rs index ed4b4d5..7ab6a68 100644 --- a/src/web/mod.rs +++ b/src/web/mod.rs @@ -65,6 +65,9 @@ impl Layout { } } body { + nav { + a href="/logout" { "logout of " (self.user.username) } + } main { (content) diff --git a/static/home.css b/static/home.css index 4becede..d434d38 100644 --- a/static/home.css +++ b/static/home.css @@ -34,7 +34,6 @@ main { width: 100%; - max-width: 600px; margin: auto; } diff --git a/static/index.css b/static/index.css index b8dbbf2..9c4bc7e 100644 --- a/static/index.css +++ b/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; +} diff --git a/static/login.css b/static/login.css index 3b340b5..3da40f5 100644 --- a/static/login.css +++ b/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%; + } +}