handlers,tmpl: render+log signin better errors

handlers/signin.go

@@ -57,35 +57,67 @@ func SigninPost(client *ent.Client) echo.HandlerFunc {
 
 		username := cu.Username
 		password := cu.Password
+		p := page{
+			AppName:   setting.AppName(),
+			AppVer:    appver,
+			Title:     "Sign in",
+			DevelMode: setting.IsDevel(),
+			Current:   "signin",
+		}
+		data := make(map[string]any)
 
 		if username == "" || password == "" {
 			c.Logger().Error("username or password not set, returning to /signin")
 
-			return c.Redirect(http.StatusFound, "/signin")
+			data["flash"] = "you need to set both the username and the password"
+			data["form"] = cu
+			p.Data = data
+
+			return c.Render(
+				http.StatusBadRequest,
+				"signin.tmpl",
+				p,
+			)
 		}
 
 		ctx := context.WithValue(context.Background(), moduser.CtxKey{}, slogger)
 		if usr, err := moduser.QueryUser(ctx, client, username); err == nil {
-			log.Info("queried user:", &usr.ID)
+			log.Info("attempting login", "user", &usr.ID)
 
 			if !passwd.Compare(usr.Password, password) {
-				log.Warn("wrong user credentials, redirecting to /signin")
+				log.Warn("wrong credentials", "user", &usr.ID)
 
-				return c.Redirect(http.StatusFound, "/signin")
+				data["flash"] = "wrong credentials"
+				data["form"] = cu
+				p.Data = data
+
+				return c.Render(
+					http.StatusBadRequest,
+					"signin.tmpl",
+					p,
+				)
 			}
 		} else {
 			if ent.IsNotFound(err) {
 				c.Logger().Error("user not found")
-				return c.Redirect(http.StatusFound, "/signin")
+			} else {
+				// just log the error instead of returning it to the user and
+				// redirect back to /signin.
+				c.Logger().Error(
+					http.StatusText(http.StatusUnauthorized)+" "+err.Error(),
+					strconv.Itoa(http.StatusUnauthorized)+" "+http.StatusText(http.StatusUnauthorized)+" "+err.Error(),
+				)
 			}
-			// just log the error instead of returning it to the user and
-			// redirect back to /signin.
-			c.Logger().Error(
-				http.StatusText(http.StatusUnauthorized)+" "+err.Error(),
-				strconv.Itoa(http.StatusUnauthorized)+" "+http.StatusText(http.StatusUnauthorized)+" "+err.Error(),
-			)
 
-			return c.Redirect(http.StatusFound, "/signin")
+			data["form"] = cu
+			data["flash"] = "wrong credentials"
+			p.Data = data
+
+			return c.Render(
+				http.StatusBadRequest,
+				"signin.tmpl",
+				p,
+			)
 		}
 
 		secure := c.Request().URL.Scheme == "https" //nolint:goconst

templates/signin.tmpl

@@ -14,19 +14,24 @@
 			</div>
 			<div class="mt-8 lg:w-1/2 lg:mt-0">
 				<form method="post" class="w-full lg:max-w-xl">
+					{{ if and .Data .Data.flash }}
+					<div class="relative flex items-center mb-4">
+						<p class="mt-2 text-md text-rose-800 dark:text-rose-500"><span class="font-medium">Error:</span> {{.Data.flash}}</p>
+					</div>
+					{{- else -}}{{end}}
 					<!-- username field -->
 					<div class="relative flex items-center">
 						<span class="absolute" role="img" aria-label="person outline icon for username">
 							{{ template "svg-user.tmpl" }}
 						</span>
-						<input name="username" type="text" placeholder="Username" required class="block w-full py-3 text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+							<input name="username" type="text" placeholder="Username" {{if and .Data.form .Data.form.Username}}value="{{.Data.form.Username}}"{{end}} required class="block w-full py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg px-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 					<!-- password field -->
 					<div class="relative flex items-center mt-4">
 						<span class="absolute" role="img" aria-label="password lock icon">
 							{{ template "svg-password.tmpl" }}
 						</span>
-						<input name="password" type="password" placeholder="Password" required class="block w-full px-10 py-3 text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
+						<input name="password" type="password" placeholder="Password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}} required class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
 					</div>
 
 					<div class="mt-8 md:flex md:items-center">