From c6451548366c4db6fa053eee1e0a8bb93e1bade7 Mon Sep 17 00:00:00 2001
From: vinchent <vinchent@vinchent.xyz>
Date: Sun, 4 Aug 2024 15:06:41 +0200
Subject: [PATCH] Client side validation

---
 cmd/web/templates/terminal.page.gohtml | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/cmd/web/templates/terminal.page.gohtml b/cmd/web/templates/terminal.page.gohtml
index e1c63af..7570a4a 100644
--- a/cmd/web/templates/terminal.page.gohtml
+++ b/cmd/web/templates/terminal.page.gohtml
@@ -5,6 +5,7 @@ Virtual Terminal
 {{ define "content" }}
 <h2 class="mt-3 text-center">Virtual Terminal</h2>
 <hr>
+<div class="alert alert-danger text-center d-none" id="card-messages"></div>
 <form action="/payment-succecded"
       method="post"
       name="charge_form"
@@ -47,10 +48,15 @@ Virtual Terminal
         <div class="alert-success text-center" id="card-success" role="alert"></div>
     </div>
     <hr>
-    <a href="javastript:void(0)"
+    <a href="javascript:void(0)"
        id="pay-button"
        class="btn btn-primary"
        onclick="val()">Charge Card</a>
+    <div class="text-center d-none" id="processing-payment">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
 </form>
 {{ end }}
 {{ define "js" }}
@@ -59,11 +65,22 @@ Virtual Terminal
 
 let card;
 let stripe;
+const cardMessages = document.getElementById("card-messages");
+const payButton = document.getElementById("pay-button");
+const processing = document.getElementById("processing-payment");
 
 stripe = Stripe(''); // TODO: Publish key to be added
 
 function val() {
+    let form = document.getElementById("charge_form");
 
+    if (form.checkValidity() === false) {
+        this.event.preventDefault();
+        this.event.stopPropagation();
+        form.classList.add("was-validated");
+        return;
+    }
+    form.classList.add("was-validated");
 }
 
 (function () {