chore: added password inline validation

Author: TobiasGleiter

cmd/web/handlers:login.go

@@ -10,6 +10,7 @@ import (
 	"github.com/bit8bytes/gearberg/internal/httperr"
 	"github.com/bit8bytes/gearberg/internal/locale"
 	"github.com/bit8bytes/gearberg/internal/orgs/settings"
+	"github.com/bit8bytes/gearberg/internal/templates/fragments"
 	"github.com/bit8bytes/gearberg/internal/templates/pages"
 	"github.com/bit8bytes/gearberg/pkg/htmx"
 	"github.com/segmentio/ksuid"
@@ -213,6 +214,15 @@ func (app *application) postResetPassword(w http.ResponseWriter, r *http.Request
 	return nil
 }
 
+func (app *application) postValidatePassword(w http.ResponseWriter, r *http.Request) *httperr.Error {
+	if err := r.ParseForm(); err != nil {
+		return nil
+	}
+	data := app.html.TemplateData(r)
+	data.Form = accounts.ValidatePassword(r.PostForm.Get("password"))
+	return app.html.RenderFragment(w, r, http.StatusOK, fragments.PasswordValidation, data)
+}
+
 func (app *application) postSignOut(w http.ResponseWriter, r *http.Request) *httperr.Error {
 	if err := app.session.Destroy(r.Context()); err != nil {
 		tmplData := app.html.TemplateData(r)

cmd/web/routes.go

@@ -32,6 +32,7 @@ func (app *application) routes() (http.Handler, error) {
 	mux.Handle("GET /forgot-password/success", app.withGuest(app.html.Handle(app.getForgotPasswordSuccess)))
 	mux.Handle("GET /reset-password", app.withGuest(app.html.Handle(app.getResetPassword)))
 	mux.Handle("POST /reset-password", app.withGuest(app.html.Handle(app.postResetPassword)))
+	mux.Handle("POST /validate/password", app.html.Handle(app.postValidatePassword))
 
 	// TODO: withLogin needs to be replaced with api specific bearer tokens.
 	mux.Handle("/api/v1/", app.withLogin(apiServer))

internal/accounts/form.go

@@ -138,6 +138,29 @@ func ParseResetPasswordForm(r *http.Request) (ResetPasswordForm, error) {
 	}, nil
 }
 
+// PasswordValidationForm is used by the HTMX inline password validation endpoint.
+// It has the same Password and Errors fields as SignUpForm and ResetPasswordForm,
+// so the password-validation fragment template works with all three.
+type PasswordValidationForm struct {
+	Password string
+	validator.Validator
+}
+
+// ValidatePassword validates a single password value and returns a form with any errors set.
+func ValidatePassword(password string) *PasswordValidationForm {
+	f := &PasswordValidationForm{Password: password}
+	if password == "" {
+		return f
+	}
+	f.Check(validator.MinChars(password, passwordMinLength), "password",
+		fmt.Sprintf("Must be at least %d characters long", passwordMinLength))
+	f.Check(validator.MaxChars(password, passwordMaxLength), "password",
+		fmt.Sprintf("Must be less than %d characters long", passwordMaxLength))
+	result := zxcvbn.PasswordStrength(password, nil)
+	f.Check(result.Score >= passwordMinStrengthScore, "password", "Password is too weak or common")
+	return f
+}
+
 // PasswordMinLength returns the minimum allowed password length for use in templates.
 func (f *ResetPasswordForm) PasswordMinLength() int { return passwordMinLength }
 

internal/assets/dist/index.css

@@ -8279,9 +8279,6 @@
   .text-center {
     text-align: center;
   }
-  .text-left {
-    text-align: left;
-  }
   .text-right {
     text-align: right;
   }

internal/templates/components/login.tmpl

@@ -9,4 +9,5 @@ const (
 	EquipmentPartOf        = "equipment-part-of"
 	WarehouseLocations     = "warehouse-locations"
 	OrgCurrency            = "org-currency"
+	PasswordValidation     = "password-validation"
 )

internal/templates/fragments/fragments.go

@@ -0,0 +1,40 @@
+{{ define "password-validation" }}
+{{ $valid := and .Form.Password (not .Form.Errors.password) }}
+<div id="password-validation" class="flex flex-col gap-1">
+  <div class="relative">
+    <label class="floating-label w-full">
+      <input
+        id="password"
+        name="password"
+        type="password"
+        class="input w-full {{ if .Form.Errors.password }}input-error{{ else if $valid }}input-success{{ end }}"
+        placeholder="Password"
+        {{ if .Form.Password }}value="{{ .Form.Password }}"{{ end }}
+        autocomplete="new-password"
+        hx-post="/validate/password"
+        hx-target="#password-validation"
+        hx-swap="outerHTML"
+        hx-trigger="input changed delay:500ms"
+        {{ if .Form.Errors.password }}aria-describedby="password-error" aria-invalid="true"{{ end }}
+      />
+      <span>Password</span>
+    </label>
+    <button
+      type="button"
+      data-pw-toggle="password"
+      class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs text-secondary-content"
+      aria-label="Show password"
+      aria-pressed="false"
+    >Show</button>
+  </div>
+  {{ if .Form.Errors.password }}
+  <div class="label">
+    <span id="password-error" class="label-text-alt text-error">{{ .Form.Errors.password }}</span>
+  </div>
+  {{ else if $valid }}
+  <div class="label">
+    <span class="label-text-alt text-success">Password looks good</span>
+  </div>
+  {{ end }}
+</div>
+{{ end }}

internal/templates/fragments/password.tmpl

@@ -12,7 +12,7 @@
       <input type="hidden" name="token" value="{{ .Form.Token }}" />
 
       <div class="flex flex-col gap-4">
-        {{ template "password-input" . }}
+        {{ template "password-validation" . }}
 
         <div class="flex flex-col gap-1">
           <label class="floating-label w-full">

internal/templates/pages/login/reset-password.tmpl

@@ -31,7 +31,7 @@
           {{ end }}
         </div>
 
-        {{ template "password-input" . }}
+        {{ template "password-validation" . }}
 
         <div class="flex flex-col gap-1">
           <label class="floating-label w-full">