From 3637edb816f673830b70b05354a5b74909549999 Mon Sep 17 00:00:00 2001
From: Steven Le Rouzic <steven.lerouzic@gmail.com>
Date: Sun, 28 Apr 2024 01:13:27 +0200
Subject: Start work on styling

---
 view/login.templ | 55 +++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 41 insertions(+), 14 deletions(-)

(limited to 'view/login.templ')

diff --git a/view/login.templ b/view/login.templ
index 56e003c..1beb1d6 100644
--- a/view/login.templ
+++ b/view/login.templ
@@ -5,25 +5,52 @@ import (
 )
 
 templ LoginFormError(currentUser *model.User, err string) {
-    <div class="login-form">
     if currentUser == nil {
-        <form hx-post="/login" hx-target-error="closest .login-form">
-            <p>
-                <input type="text" name="user" placeholder="User" />
-                <input type="password" name="password" placeholder="Password" />
-                <button type="submit">Sign in</button>
-                if err != "" {
-                    <span class="error">{ err }</span>
-                }
-            </p>
-        </form>
+        <div class="login-form">
+            <form
+                hx-post="/login"
+                hx-target-error="closest .login-form"
+                class="
+                    w-80
+                    mx-auto
+                    flex flex-col
+                    gap-4
+                "
+            >
+                    @TextField("user", "User name")
+                    @PasswordField("password", "Password")
+                    @Button("submit", "Sign in", templ.Attributes{})
+                    if err != "" {
+                        <span class="text-red-400">{ err }</span>
+                    }
+            </form>
+        </div>
     } else {
-        <p>Signed in as { currentUser.Name } <button type="button" hx-post="/logout" hx-refresh>Sign out</button></p>
+        <div class="
+                flex flex-row items-baseline justify-start
+             "
+        >
+            <h1
+                class="
+                    grow
+                    text-slate-300 text-4xl font-semibold
+                "
+            >Prout prout</h1>
+            <div
+                class="
+                    flex flex-row justify-end items-center gap-4
+                "
+            >
+                <p>Signed in as <b>{ currentUser.Name }</b></p>
+                @SecondaryButton("button", "Sign out", templ.Attributes{
+                    "hx-post": "/logout",
+                    "hx-refresh": true,
+                })
+            </div>
+        </div>
     }
-    </div>
 }
 
 templ LoginForm(currentUser *model.User) {
     @LoginFormError(currentUser, "")
 }
-
-- 
cgit