Merged in feature/MAPG-180-unify-inline-js (pull request #154)

Feature/MAPG-180 unify inline js

public/static/js/account/account.js

@@ -1,7 +0,0 @@
-(function () {
-    var form = document.getElementById('accountForm');
-
-    MapGuesser.toggleFormSubmitButtonDisableOnChange(form, ['password_new', 'password_new_confirm'])
-
-    MapGuesser.setOnsubmitForForm(form);
-})();

public/static/js/account/delete.js

@@ -1,5 +0,0 @@
-(function () {
-    var form = document.getElementById('deleteAccountForm');
-
-    MapGuesser.setOnsubmitForForm(form, '/');
-})();

public/static/js/login/google_signup.js

@@ -0,0 +1,9 @@
+(function () {
+    document.getElementById('cancelGoogleSignupButton').onclick = function () {
+        document.getElementById('loading').style.visibility = 'visible';
+
+        MapGuesser.httpRequest('POST', '/signup/google/reset', function () {
+            window.location.replace('/signup');
+        });
+    };
+})();

public/static/js/login/login.js

@@ -1,43 +0,0 @@
-(function () {
-    var form = document.getElementById('loginForm');
-
-    form.onsubmit = function (e) {
-        document.getElementById('loading').style.visibility = 'visible';
-
-        e.preventDefault();
-
-        var formData = new FormData(form);
-
-        MapGuesser.httpRequest('POST', form.action, function () {
-            if (this.response.error) {
-                if (this.response.error === 'user_not_found') {
-                    window.location.replace('/signup');
-                    return;
-                }
-
-                var errorText;
-                switch (this.response.error) {
-                    case 'password_too_short':
-                        errorText = 'The given password is too short. Please choose a password that is at least 6 characters long!'
-                        break;
-                    case 'user_not_active':
-                        errorText = 'User found with the given email address, but the account is not activated. Please check your email and click on the activation link!';
-                        break;
-                    case 'password_not_match':
-                        errorText = 'The given password is wrong.'
-                        break;
-                }
-
-                document.getElementById('loading').style.visibility = 'hidden';
-
-                var loginFormError = document.getElementById('loginFormError');
-                loginFormError.style.display = 'block';
-                loginFormError.innerHTML = errorText;
-
-                return;
-            }
-
-            window.location.replace('/');
-        }, formData);
-    };
-})();

public/static/js/login/signup.js

@@ -1,52 +1,4 @@
 (function () {
-    var form = document.getElementById('signupForm');
-
-    form.onsubmit = function (e) {
-        document.getElementById('loading').style.visibility = 'visible';
-
-        e.preventDefault();
-
-        var formData = new FormData(form);
-
-        MapGuesser.httpRequest('POST', form.action, function () {
-            if (this.response.error) {
-                if (this.response.error === 'user_found') {
-                    window.location.replace('/');
-                    return;
-                }
-
-                var errorText;
-                switch (this.response.error) {
-                    case 'email_not_valid':
-                        errorText = 'The given email address is not valid.'
-                        break;
-                    case 'password_too_short':
-                        errorText = 'The given password is too short. Please choose a password that is at least 6 characters long!'
-                        break;
-                    case 'passwords_not_match':
-                        errorText = 'The given passwords do not match.'
-                        break;
-                    case 'user_found_user_not_active':
-                        errorText = 'There is a user already registered with the given email address. Please check your email and click on the activation link!';
-                        break;
-                    case 'user_found_password_not_match':
-                        errorText = 'There is a user already registered with the given email address, but the given password is wrong.'
-                        break;
-                }
-
-                document.getElementById('loading').style.visibility = 'hidden';
-
-                var signupFormError = document.getElementById('signupFormError');
-                signupFormError.style.display = 'block';
-                signupFormError.innerHTML = errorText;
-
-                return;
-            }
-
-            window.location.replace('/signup/success');
-        }, formData);
-    };
-
     var resetSignupButton = document.getElementById('resetSignupButton');
     if (resetSignupButton) {
         resetSignupButton.onclick = function () {

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();
     };

public/static/js/maps.js

@@ -0,0 +1,76 @@
+(function () {
+    var Maps = {
+        descriptionDivs: null,
+
+        addStaticMaps: function () {
+            var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
+            for (var i = 0; i < imgContainers.length; i++) {
+                var imgContainer = imgContainers[i];
+
+                var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
+                    'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
+                    'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
+                    imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
+                    '&key=' + GOOGLE_MAPS_JS_API_KEY;
+
+                imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
+            }
+        },
+
+        initializeDescriptionDivs: function () {
+            Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');
+
+            for (var i = 0; i < Maps.descriptionDivs.length; i++) {
+                var description = Maps.descriptionDivs[i];
+                var boundingClientRect = description.getBoundingClientRect();
+
+                description.defaultHeight = boundingClientRect.height;
+            }
+        },
+
+        calculateDescriptionDivHeights: function () {
+            var currentY;
+            var rows = [];
+            for (var i = 0; i < Maps.descriptionDivs.length; i++) {
+                var description = Maps.descriptionDivs[i];
+                var boundingClientRect = description.getBoundingClientRect();
+
+                if (currentY !== boundingClientRect.y) {
+                    rows.push([]);
+                }
+
+                rows[rows.length - 1].push(description);
+
+                currentY = boundingClientRect.y;
+            }
+
+            for (var i = 0; i < rows.length; i++) {
+                var row = rows[i];
+
+                var maxHeight = 0;
+                for (var j = 0; j < row.length; j++) {
+                    var description = row[j];
+
+                    if (description.defaultHeight > maxHeight) {
+                        maxHeight = description.defaultHeight;
+                    }
+                }
+
+                for (var j = 0; j < row.length; j++) {
+                    var description = row[j];
+
+                    description.style.height = maxHeight + 'px';
+                }
+            }
+        }
+    };
+
+    Maps.addStaticMaps();
+
+    Maps.initializeDescriptionDivs();
+    Maps.calculateDescriptionDivHeights();
+
+    window.onresize = function () {
+        Maps.calculateDescriptionDivHeights();
+    };
+})();

public/static/js/maps_admin.js

@@ -0,0 +1,34 @@
+(function () {
+    Maps = {
+        deleteMap: function (mapId, mapName) {
+            MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + mapName + '\'?', [{
+                type: 'button',
+                classNames: ['red'],
+                text: 'Delete',
+                onclick: function () {
+                    document.getElementById('loading').style.visibility = 'visible';
+
+                    MapGuesser.httpRequest('POST', '/admin/deleteMap/' + mapId, function () {
+                        if (this.response.error) {
+                            document.getElementById('loading').style.visibility = 'hidden';
+
+                            //TODO: handle this error
+                            return;
+                        }
+
+                        window.location.reload();
+                    });
+                }
+            }]);
+        }
+    };
+
+    var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton');
+    for (var i = 0; i < buttons.length; i++) {
+        var button = buttons[i];
+
+        button.onclick = function () {
+            Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
+        };
+    }
+})();

src/Controller/LoginController.php

@@ -107,7 +107,7 @@ class LoginController
 
         if ($user === null) {
             if (strlen($this->request->post('password')) < 6) {
-                $data = ['error' => 'password_too_short'];
+                $data = ['error' => ['errorText' => 'The given password is too short. Please choose a password that is at least 6 characters long!']];
                 return new JsonContent($data);
             }
 
@@ -116,17 +116,17 @@ class LoginController
 
             $this->request->session()->set('tmp_user_data', ['email' => $this->request->post('email'), 'password_hashed' => $tmpUser->getPassword()]);
 
-            $data = ['error' => 'user_not_found'];
+            $data = ['redirect' => ['target' => '/' . \Container::$routeCollection->getRoute('signup')->generateLink()]];
             return new JsonContent($data);
         }
 
         if (!$user->getActive()) {
-            $data = ['error' => 'user_not_active'];
+            $data = ['error' => ['errorText' => 'User found with the given email address, but the account is not activated. Please check your email and click on the activation link!']];
             return new JsonContent($data);
         }
 
         if (!$user->checkPassword($this->request->post('password'))) {
-            $data = ['error' => 'password_not_match'];
+            $data = ['error' => ['errorText' => 'The given password is wrong.']];
             return new JsonContent($data);
         }
 
@@ -186,7 +186,7 @@ class LoginController
     public function signup(): IContent
     {
         if ($this->request->user() !== null) {
-            $data = ['error' => 'logged_in'];
+            $data = ['redirect' => ['target' => '/' . \Container::$routeCollection->getRoute('home')->generateLink()]];
             return new JsonContent($data);
         }
 
@@ -195,21 +195,21 @@ class LoginController
         if ($user !== null) {
             if ($user->getActive()) {
                 if (!$user->checkPassword($this->request->post('password'))) {
-                    $data = ['error' => 'user_found_password_not_match'];
+                    $data = ['error' => ['errorText' => 'There is a user already registered with the given email address, but the given password is wrong.']];
                     return new JsonContent($data);
                 }
 
                 $this->request->setUser($user);
 
-                $data = ['error' => 'user_found'];
+                $data = ['redirect' => ['target' => '/' . \Container::$routeCollection->getRoute('index')->generateLink()]];
             } else {
-                $data = ['error' => 'user_found_user_not_active'];
+                $data = ['error' => ['errorText' => 'There is a user already registered with the given email address. Please check your email and click on the activation link!']];
             }
             return new JsonContent($data);
         }
 
         if (filter_var($this->request->post('email'), FILTER_VALIDATE_EMAIL) === false) {
-            $data = ['error' => 'email_not_valid'];
+            $data = ['error' => ['errorText' => 'The given email address is not valid.']];
             return new JsonContent($data);
         }
 
@@ -220,17 +220,17 @@ class LoginController
             $tmpUser->setPassword($tmpUserData['password_hashed']);
 
             if (!$tmpUser->checkPassword($this->request->post('password'))) {
-                $data = ['error' => 'passwords_not_match'];
+                $data = ['error' => ['errorText' => 'The given passwords do not match.']];
                 return new JsonContent($data);
             }
         } else {
             if (strlen($this->request->post('password')) < 6) {
-                $data = ['error' => 'password_too_short'];
+                $data = ['error' => ['errorText' => 'The given password is too short. Please choose a password that is at least 6 characters long!']];
                 return new JsonContent($data);
             }
 
             if ($this->request->post('password') !== $this->request->post('password_confirm')) {
-                $data = ['error' => 'passwords_not_match'];
+                $data = ['error' => ['errorText' => 'The given passwords do not match.']];
                 return new JsonContent($data);
             }
         }

views/account/account.php

@@ -1,13 +1,8 @@
-<?php
-$jsFiles = [
-    'js/account/account.js',
-];
-?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>Account</h2>
     <div class="box">
-        <form id="accountForm" action="/account" method="post">
+        <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
             <input class="big fullWidth" type="password" name="password" placeholder="Current password" required minlength="6" autofocus>
             <hr>
             <?php /* TODO: disabled for the time being, email modification should be implemented */ ?>

views/account/delete.php

@@ -1,13 +1,8 @@
-<?php
-$jsFiles = [
-    'js/account/delete.js',
-];
-?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>Delete account</h2>
     <div class="box">
-        <form id="deleteAccountForm" action="/account/delete" method="post">
+        <form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/">
             <p class="justify">Are you sure you want to delete your account? This cannot be undone!</p>
             <input class="big fullWidth marginTop" type="password" name="password" placeholder="Current password" required minlength="6" autofocus>
             <p id="deleteAccountFormError" class="formError justify marginTop"></p>

views/admin/map_editor.php

@@ -50,7 +50,7 @@ $jsFiles = [
 </header>
 <div id="metadata" class="modal">
     <h2>Edit map data</h2>
-    <form id="metadataForm" class="marginTop">
+    <form id="metadataForm" class="marginTop" data-no-submit="true">
         <input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map">
         <textarea  class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea>
         <div class="right">

views/login/google_signup.php

@@ -1,8 +1,13 @@
+<?php
+$jsFiles = [
+    'js/login/google_signup.js',
+];
+?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>Sign up</h2>
     <div class="box">
-        <form id="googleSignupForm" action="/signup/google" method="post">
+        <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/">
             <?php if ($found): ?>
                 <p class="justify">Please confirm that you link your account to your Google account.</p>
             <?php else: ?>
@@ -22,27 +27,4 @@
         </form>
     </div>
 <?php require ROOT . '/views/templates/footer.php'; ?>
-<script>
-    (function () {
-        var form = document.getElementById('googleSignupForm');
-
-        form.onsubmit = function (e) {
-            document.getElementById('loading').style.visibility = 'visible';
-
-            e.preventDefault();
-
-            MapGuesser.httpRequest('POST', form.action, function () {
-                window.location.replace('/');
-            });
-        };
-
-        document.getElementById('cancelGoogleSignupButton').onclick = function () {
-            document.getElementById('loading').style.visibility = 'visible';
-
-            MapGuesser.httpRequest('POST', '/signup/google/reset', function () {
-                window.location.replace('/signup');
-            });
-        };
-    })();
-</script>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/login/login.php

@@ -1,13 +1,8 @@
-<?php
-$jsFiles = [
-    'js/login/login.js',
-];
-?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>Login</h2>
     <div class="box">
-        <form id="loginForm" action="/login" method="post">
+        <form id="loginForm" action="/login" method="post" data-redirect-on-success="/">
             <input class="big fullWidth" type="email" name="email" placeholder="Email address" required autofocus>
             <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password" required minlength="6">
             <p id="loginFormError" class="formError justify marginTop"></p>

views/login/signup.php

@@ -7,7 +7,7 @@ $jsFiles = [
 <?php require ROOT . '/views/templates/header.php'; ?>
     <h2>Sign up</h2>
     <div class="box">
-        <form id="signupForm" action="/signup" method="post">
+        <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
             <?php if (isset($email)): ?>
                 <p class="justify">No user found with the given email address. Sign up with one click!</p>
                 <input class="big fullWidth marginTop" type="email" name="email" placeholder="Email address" value="<?= $email ?>" required>

views/maps.php

@@ -2,6 +2,12 @@
 $cssFiles = [
     'css/maps.css'
 ];
+$jsFiles = [
+    'js/maps.js',
+];
+if ($isAdmin) {
+    $jsFiles[] = 'js/maps_admin.js';
+}
 ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
@@ -61,122 +67,4 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 <?php require ROOT . '/views/templates/footer.php'; ?>
-<script>
-    (function () {
-        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
-
-        var Maps = {
-            descriptionDivs: null,
-
-            addStaticMaps: function () {
-                var imgContainers = document.getElementById('mapContainer').getElementsByClassName('imgContainer');
-                for (var i = 0; i < imgContainers.length; i++) {
-                    var imgContainer = imgContainers[i];
-
-                    var imgSrc = 'https://maps.googleapis.com/maps/api/staticmap?size=350x175&' +
-                        'scale=' + (window.devicePixelRatio >= 2 ? 2 : 1) + '&' +
-                        'visible=' + imgContainer.dataset.boundSouthLat + ',' + imgContainer.dataset.boundWestLng + '|' +
-                        imgContainer.dataset.boundNorthLat + ',' + imgContainer.dataset.boundEastLng +
-                        '&key=' + GOOGLE_MAPS_JS_API_KEY;
-
-                    imgContainer.style.backgroundImage = 'url("' + imgSrc + '")';
-                }
-            },
-
-            initializeDescriptionDivs: function () {
-                Maps.descriptionDivs = document.getElementById('mapContainer').getElementsByClassName('description');
-
-                for (var i = 0; i < Maps.descriptionDivs.length; i++) {
-                    var description = Maps.descriptionDivs[i];
-                    var boundingClientRect = description.getBoundingClientRect();
-
-                    description.defaultHeight = boundingClientRect.height;
-                }
-            },
-
-            calculateDescriptionDivHeights: function () {
-                var currentY;
-                var rows = [];
-                for (var i = 0; i < Maps.descriptionDivs.length; i++) {
-                    var description = Maps.descriptionDivs[i];
-                    var boundingClientRect = description.getBoundingClientRect();
-
-                    if (currentY !== boundingClientRect.y) {
-                        rows.push([]);
-                    }
-
-                    rows[rows.length - 1].push(description);
-
-                    currentY = boundingClientRect.y;
-                }
-
-                for (var i = 0; i < rows.length; i++) {
-                    var row = rows[i];
-
-                    var maxHeight = 0;
-                    for (var j = 0; j < row.length; j++) {
-                        var description = row[j];
-
-                        if (description.defaultHeight > maxHeight) {
-                            maxHeight = description.defaultHeight;
-                        }
-                    }
-
-                    for (var j = 0; j < row.length; j++) {
-                        var description = row[j];
-
-                        description.style.height = maxHeight + 'px';
-                    }
-                }
-            }
-        };
-
-        Maps.addStaticMaps();
-
-        Maps.initializeDescriptionDivs();
-        Maps.calculateDescriptionDivHeights();
-
-        window.onresize = function () {
-            Maps.calculateDescriptionDivHeights();
-        };
-    })();
-</script>
-<?php if ($isAdmin): ?>
-<script>
-    (function () {
-        Maps = {
-            deleteMap: function(mapId, mapName) {
-                MapGuesser.showModalWithContent('Delete map', 'Are you sure you want to delete map \'' + mapName + '\'?', [{
-                    type: 'button',
-                    classNames: ['red'],
-                    text: 'Delete',
-                    onclick: function () {
-                        document.getElementById('loading').style.visibility = 'visible';
-
-                        MapGuesser.httpRequest('POST', '/admin/deleteMap/' + mapId, function () {
-                            if (this.response.error) {
-                                document.getElementById('loading').style.visibility = 'hidden';
-
-                                //TODO: handle this error
-                                return;
-                            }
-
-                            window.location.reload();
-                        });
-                    }
-                }]);
-            }
-        };
-
-        var buttons = document.getElementById('mapContainer').getElementsByClassName('deleteButton');
-        for (var i = 0; i < buttons.length; i++) {
-            var button = buttons[i];
-
-            button.onclick = function() {
-                Maps.deleteMap(this.dataset.mapId, this.dataset.mapName);
-            };
-        }
-    })();
-</script>
-<?php endif; ?>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>

views/templates/main_footer.php

@@ -2,6 +2,7 @@
         const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
         const REVISION = '<?= REVISION ?>';
         var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
+        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
         <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
             const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
         <?php endif; ?>