From e4a51c139f7a54cb67fffa025a47306d2418db78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 25 Jun 2020 22:34:32 +0200
Subject: [PATCH] MAPG-180 improve form functionality

---
 public/static/js/mapguesser.js | 43 +++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index c0078e4..73f964c 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -66,7 +66,7 @@ var MapGuesser = {
         }
     },
 
-    setOnsubmitForForm: function (form, redirectOnSuccess) {
+    setOnsubmitForForm: function (form) {
         form.onsubmit = function (e) {
             e.preventDefault();
 
@@ -74,7 +74,7 @@ var MapGuesser = {
 
             var formData = new FormData(form);
             var formError = form.getElementsByClassName('formError')[0];
-            var pageLeaveOnSuccess = typeof redirectOnSuccess === 'string';
+            var pageLeaveOnSuccess = form.dataset.redirectOnSuccess || form.dataset.reloadOnSuccess;
 
             MapGuesser.httpRequest('POST', form.action, function () {
                 if (!pageLeaveOnSuccess) {
@@ -92,14 +92,20 @@ var MapGuesser = {
                     return;
                 }
 
+                if (this.response.redirect) {
+                    window.location.replace(this.response.redirect.target);
+
+                    return;
+                }
+
                 if (!pageLeaveOnSuccess) {
                     formError.style.display = 'none';
                     form.reset();
                 } else {
-                    if (redirectOnSuccess === '') {
+                    if (form.dataset.redirectOnSuccess) {
+                        window.location.replace(form.dataset.redirectOnSuccess);
+                    } else if (form.dataset.reloadOnSuccess) {
                         window.location.reload();
-                    } else {
-                        window.location.replace(redirectOnSuccess);
                     }
                 }
             }, formData);
@@ -176,15 +182,15 @@ var MapGuesser = {
         document.getElementById('cover').style.visibility = 'hidden';
     },
 
-    toggleDisableOnChange: function (input, button) {
+    observeInput: function (input, buttonToToggle) {
         if (input.defaultValue !== input.value) {
-            button.disabled = false;
+            buttonToToggle.disabled = false;
         } else {
-            button.disabled = true;
+            buttonToToggle.disabled = true;
         }
     },
 
-    toggleFormSubmitButtonDisableOnChange: function (form, observedInputs) {
+    observeInputsInForm: function (form, observedInputs) {
         for (var i = 0; i < observedInputs.length; i++) {
             var input = form.elements[observedInputs[i]];
 
@@ -192,12 +198,12 @@ var MapGuesser = {
                 case 'INPUT':
                 case 'TEXTAREA':
                     input.oninput = function () {
-                        MapGuesser.toggleDisableOnChange(this, form.elements.submit);
+                        MapGuesser.observeInput(this, form.elements.submit);
                     };
                     break;
                 case 'SELECT':
                     input.onchange = function () {
-                        MapGuesser.toggleDisableOnChange(this, form.elements.submit);
+                        MapGuesser.observeInput(this, form.elements.submit);
                     };
                     break;
             }
@@ -220,6 +226,21 @@ var MapGuesser = {
         }
     }
 
+    var forms = document.getElementsByTagName('form');
+    for (var i = 0; i < forms.length; i++) {
+        var form = forms[i];
+
+        if (form.dataset.noSubmit) {
+            continue;
+        }
+
+        MapGuesser.setOnsubmitForForm(form);
+
+        if (form.dataset.observeInputs) {
+            MapGuesser.observeInputsInForm(form, form.dataset.observeInputs.split(','));
+        }
+    }
+
     document.getElementById('cover').onclick = function () {
         MapGuesser.hideModal();
     };