Added logging to loginform and added loading feedback for user on submit

handlers/login.go

@@ -11,6 +11,7 @@ import (
 	"projectreshoot/view/page"
 
 	"github.com/pkg/errors"
+	"github.com/rs/zerolog"
 )
 
 // Validates the username matches a user in the database and the password
@@ -18,7 +19,6 @@ import (
 func validateLogin(conn *sql.DB, r *http.Request) (db.User, error) {
 	formUsername := r.FormValue("username")
 	formPassword := r.FormValue("password")
-
 	user, err := db.GetUserFromUsername(conn, formUsername)
 	if err != nil {
 		return db.User{}, errors.Wrap(err, "db.GetUserFromUsername")
@@ -44,13 +44,20 @@ func checkRememberMe(r *http.Request) bool {
 // Handles an attempted login request. On success will return a HTMX redirect
 // and on fail will return the login form again, passing the error to the
 // template for user feedback
-func HandleLoginRequest(conn *sql.DB, secretKey string) http.Handler {
+func HandleLoginRequest(
+	logger *zerolog.Logger,
+	conn *sql.DB,
+	secretKey string,
+) http.Handler {
 	return http.HandlerFunc(
 		func(w http.ResponseWriter, r *http.Request) {
 			r.ParseForm()
 			user, err := validateLogin(conn, r)
 			if err != nil {
 				form.LoginForm(err.Error()).Render(r.Context(), w)
+				if err.Error() != "Username or password incorrect" {
+					logger.Warn().Caller().Err(err).Msg("Login request failed")
+				}
 				return
 			}
 

server/routes.go

@@ -6,11 +6,14 @@ import (
 
 	"projectreshoot/handlers"
 	"projectreshoot/view/page"
+
+	"github.com/rs/zerolog"
 )
 
 // Add all the handled routes to the mux
 func addRoutes(
 	mux *http.ServeMux,
+	logger *zerolog.Logger,
 	config *Config,
 	conn *sql.DB,
 ) {
@@ -25,5 +28,9 @@ func addRoutes(
 
 	// Login page and handlers
 	mux.Handle("GET /login", handlers.HandleLoginPage(config.TrustedHost))
-	mux.Handle("POST /login", handlers.HandleLoginRequest(conn, config.SecretKey))
+	mux.Handle("POST /login", handlers.HandleLoginRequest(
+		logger,
+		conn,
+		config.SecretKey,
+	))
 }

server/server.go

@@ -18,6 +18,7 @@ func NewServer(
 	mux := http.NewServeMux()
 	addRoutes(
 		mux,
+		logger,
 		config,
 		conn,
 	)

view/component/form/loginform.templ

@@ -16,7 +16,11 @@ templ LoginForm(loginError string) {
 	}
 	xdata := fmt.Sprintf("{credentialError: %s, errorMessage: '%s'}", errCreds, loginError)
 	}}
-	<form hx-post="/login">
+	<form
+		hx-post="/login"
+		x-data="{ submitted: false, buttontext: 'Login' }"
+		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
+	>
 		<div
 			class="grid gap-y-4"
 			x-data={ xdata }
@@ -127,11 +131,14 @@ templ LoginForm(loginError string) {
 				</div>
 			</div>
 			<button
+				x-bind:disabled="submitted"
+				x-text="buttontext"
 				type="submit"
 				class="w-full py-3 px-4 inline-flex justify-center items-center 
                     gap-x-2 rounded-lg border border-transparent transition
-                    bg-green hover:bg-green/75 text-mantle hover:cursor-pointer"
+                    bg-green hover:bg-green/75 text-mantle hover:cursor-pointer
-			>Login</button>
+                    disabled:bg-green/60 disabled:cursor-default"
+			></button>
 		</div>
 	</form>
 }