Fix #1: disable form input after send button is clicked

CorySanin · Jan 15, 2024 · c4326c4 · c4326c4
1 parent 803a6f2
commit c4326c4
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "seance-for-ghost",
   "module": "index.ts",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "dependencies": {
     "body-parser": "1.20.2",
     "ejs": "3.1.9",

diff --git a/scripts/form.js b/scripts/form.js
@@ -1,4 +1,28 @@
-window.unblockSend = function() {
-    let sendBtn = document.getElementById('sendBtn');
-    sendBtn.disabled = false;
-}
+(function () {
+    let sendBtn, form;
+
+    function blockInput(element) {
+        element.readOnly = true;
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+        sendBtn = document.getElementById('sendBtn');
+        form = document.getElementById('contactForm');
+
+        form.addEventListener("submit", function(ev) {
+            let el;
+            for(el of form.getElementsByTagName('input')) {
+                blockInput(el);
+            }
+            for(el of form.getElementsByTagName('textarea')) {
+                blockInput(el);
+            }
+            sendBtn.disabled = true;
+            form.classList.add('processing');
+        });
+    });
+
+    window.unblockSend = function () {
+        sendBtn.disabled = false;
+    }
+})();
diff --git a/styles/01-layout.scss b/styles/01-layout.scss
@@ -20,13 +20,23 @@ body {
     grid-template-columns: auto 1fr;
     gap: .5em;
 
+    &.processing {
+        cursor: wait;
+
+        label,
+        input,
+        textarea {
+            cursor: inherit;
+        }
+    }
+
     &>label {
         text-align: right;
     }
 
     &>textarea {
         width: 100%;
-        min-height: 6em;
+        min-height: 8em;
         max-height: 30em;
         resize: vertical;
     }
@@ -62,18 +72,18 @@ button,
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-
-    &:disabled,
-    &[disabled] {
-        cursor: not-allowed;
-    }
 }
 
 input,
 textarea,
 button,
 .button {
     padding: 5px 10px;
+
+    &:disabled,
+    &[disabled] {
+        cursor: not-allowed;
+    }
 }
 
 body label {
@@ -99,7 +109,7 @@ button,
     .fullwidth {
         grid-column: span 1;
     }
-    
+
     .second-col {
         grid-column: 1;
     }

diff --git a/styles/03-colors.scss b/styles/03-colors.scss
@@ -37,7 +37,8 @@ button,
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[readonly] {
         color: var(--inputborder);
 
         &:hover {

diff --git a/views/index.ejs b/views/index.ejs
@@ -12,7 +12,7 @@
 <body <% if (locals.dark) { echo('class="dark"') }%>>
     <div id="main">
         <div class="container" class="panel">
-            <form class="form" method="post">
+            <form class="form" id="contactForm" method="post">
                 <label for="nameTxt">Name</label>
                 <input name="name" id="nameTxt" type="text" required />
                 <label for="emailTxt">Email</label>

diff --git a/web.ts b/web.ts
@@ -77,7 +77,7 @@ export default class Web {
                 {
                     nonce,
                     recaptcha: recaptchaKey,
-                    dark: !!req.query.dark
+                    dark: req?.query?.dark && req.query.dark != 'false'
                 },
                 function (err, html) {
                     if (!err) {
@@ -106,7 +106,7 @@ export default class Web {
 
         let sendMail = async (req: express.Request, res: express.Response, next?: express.NextFunction) => {
             const renderPage = createPageRenderer(res);
-
+            let dark = req?.query?.dark && req.query.dark != 'false';
             if (req?.body?.email && req.body.name && req.body.message && emailValidator.test(req.body.email)) {
                 try {
                     console.log(await emailTransport.sendMail({
@@ -118,7 +118,7 @@ export default class Web {
                     }));
                     res.render('result',
                         {
-                            dark: !!req.query.dark,
+                            dark,
                             header: 'Message sent',
                             text: 'Your message has been received. Thank you!'
                         },
@@ -130,7 +130,7 @@ export default class Web {
                     res.status(500);
                     res.render('result',
                         {
-                            dark: !!req.query.dark,
+                            dark,
                             header: 'Error',
                             text: 'An error occurred while attempting to deliver your message. Try again later.'
                         },
@@ -142,7 +142,7 @@ export default class Web {
                 res.status(400);
                 res.render('result',
                     {
-                        dark: !!req.query.dark,
+                        dark,
                         header: 'Error',
                         text: 'There was something wrong with the form you submitted. Go back and try again.'
                     },