Issue umputun#31: Replace separate UI with the embedded HTMX based

- updated PIN inputs for show message view
oneils · Oct 1, 2023 · 2d64e32 · 2d64e32
1 parent 00bceb6
commit 2d64e32
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/backend/app/server/templates.go b/backend/app/server/templates.go
@@ -163,6 +163,8 @@ func (s Server) showMessageView(w http.ResponseWriter, r *http.Request) {
 		PinSize: s.PinSize,
 	}
 
+	w.Header().Add("HX-Trigger-After-Swap", "setUpPinInputListeners")
+
 	s.render(w, http.StatusOK, "show-message.tmpl.html", baseTmpl, data)
 }
 
@@ -183,16 +185,21 @@ func (s Server) loadMessage(w http.ResponseWriter, r *http.Request) {
 		Pin: r.PostForm.Get("pin"),
 	}
 
-	form.CheckField(validator.NotBlank(form.Pin), "pin", "Pin can't be empty")
-	form.CheckField(validator.MinChars(form.Pin, s.PinSize), "pin", fmt.Sprintf("Pin must be %d digits long", s.PinSize))
-	form.CheckField(validator.MaxChars(form.Pin, s.PinSize), "pin", fmt.Sprintf("Pin must be %d digits long", s.PinSize))
+	pinValues := r.Form["pin"]
+	for _, p := range pinValues {
+		if validator.Blank(p) || !validator.IsNumber(p) {
+			form.AddFieldError(pinKey, fmt.Sprintf("Pin must be %d digits long without empty values", s.PinSize))
+			break
+		}
+	}
 
 	if !form.Valid() {
 		data := templateData{
 			Form:    form,
 			PinSize: s.PinSize,
 		}
 
+		w.Header().Add("HX-Trigger-After-Swap", "setUpPinInputListeners")
 		s.render(w, http.StatusOK, "show-message.tmpl.html", mainTmpl, data)
 		return
 	}

diff --git a/backend/ui/html/pages/show-message.tmpl.html b/backend/ui/html/pages/show-message.tmpl.html
@@ -4,26 +4,34 @@
 
 <div id="show-msg" class="show-msg">
     <form hx-post="/load-message" hx-swap="outerHTML" hx-target="#show-msg" id="load-msg-form" class="load-msg-form">
-        <input type="hidden" name="key" id="key" value={{.Form.Key}} />
+        <input type="hidden" name="key" id="key" value={{.Form.Key}}/>
 
-        <label for="pin">Enter PIN to see content</label>
-        {{with .Form.FieldErrors.pin}}
+        <div class="pin-container">
+            <label for="pin-0">Enter PIN to see content</label>
+            {{with .Form.FieldErrors.pin}}
             <label class='error' style="display: none"></label>
-        {{end}}
-        <input type="password"
-               name="pin"
-               id="pin"
-               required
-               placeholder="12345"
-               minlength={{.PinSize}}
-               maxlength={{.PinSize}} />
+            {{end}}
+            <div>
+                {{range $i := until .PinSize}}
+                <input type="password"
+                       name="pin"
+                       id="pin-{{$i}}"
+                       minlength=1
+                       maxlength=1
+                       pattern="[0-9]+"
+                       title="PIN must be a digit"
+                       {{if $.Form.FieldErrors.pin }}class="error-input" {{end}}/>
+                {{end}}
+            </div>
 
-        {{with .Form.FieldErrors.pin}}
-        <label class='error'>{{.}}</label>
-        {{end}}
+            {{with .Form.FieldErrors.pin}}
+            <label class='error'>{{.}}</label>
+            {{end}}
+        </div>
         <button class="main-btn decode-btn"
                 type="submit"
-                role="button">Decode message</button>
+                role="button">Decode message
+        </button>
     </form>
     <br/>