From 27115e44b6b2c12b6062d1f594d1773c807b0e9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 25 Jun 2020 20:42:12 +0200 Subject: [PATCH 1/3] MAPG-180 extract all inline JS into separate JS file --- public/static/js/login/google_signup.js | 21 ++++ public/static/js/maps.js | 76 +++++++++++++++ public/static/js/maps_admin.js | 34 +++++++ views/login/google_signup.php | 28 +----- views/maps.php | 124 ++---------------------- views/templates/main_footer.php | 1 + 6 files changed, 143 insertions(+), 141 deletions(-) create mode 100644 public/static/js/login/google_signup.js create mode 100644 public/static/js/maps.js create mode 100644 public/static/js/maps_admin.js diff --git a/public/static/js/login/google_signup.js b/public/static/js/login/google_signup.js new file mode 100644 index 0000000..063f57c --- /dev/null +++ b/public/static/js/login/google_signup.js @@ -0,0 +1,21 @@ +(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'); + }); + }; +})(); diff --git a/public/static/js/maps.js b/public/static/js/maps.js new file mode 100644 index 0000000..394c6c8 --- /dev/null +++ b/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(); + }; +})(); diff --git a/public/static/js/maps_admin.js b/public/static/js/maps_admin.js new file mode 100644 index 0000000..0c64bc2 --- /dev/null +++ b/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); + }; + } +})(); diff --git a/views/login/google_signup.php b/views/login/google_signup.php index b818e3f..2e87d1c 100644 --- a/views/login/google_signup.php +++ b/views/login/google_signup.php @@ -1,3 +1,8 @@ +

Sign up

@@ -22,27 +27,4 @@ - \ No newline at end of file diff --git a/views/maps.php b/views/maps.php index e2086cb..64ec1db 100644 --- a/views/maps.php +++ b/views/maps.php @@ -2,6 +2,12 @@ $cssFiles = [ 'css/maps.css' ]; +$jsFiles = [ + 'js/maps.js', +]; +if ($isAdmin) { + $jsFiles[] = 'js/maps_admin.js'; +} ?> @@ -61,122 +67,4 @@ $cssFiles = [ - - - - \ No newline at end of file diff --git a/views/templates/main_footer.php b/views/templates/main_footer.php index 6c17b6d..378e2ff 100644 --- a/views/templates/main_footer.php +++ b/views/templates/main_footer.php @@ -2,6 +2,7 @@ const STATIC_ROOT = ''; const REVISION = ''; var ANTI_CSRF_TOKEN = 'session()->get('anti_csrf_token') ?>'; + const GOOGLE_MAPS_JS_API_KEY = ''; const GOOGLE_ANALITICS_ID = ''; From e4a51c139f7a54cb67fffa025a47306d2418db78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 25 Jun 2020 22:34:32 +0200 Subject: [PATCH 2/3] 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(); }; From ec969167e487d7501ba1ed907205d5b3bcfa876c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=91cze=20Bence?= Date: Thu, 25 Jun 2020 22:35:04 +0200 Subject: [PATCH 3/3] MAPG-180 standardize form submit with AJAX --- public/static/js/account/account.js | 7 ---- public/static/js/account/delete.js | 5 --- public/static/js/login/google_signup.js | 12 ------- public/static/js/login/login.js | 43 ---------------------- public/static/js/login/signup.js | 48 ------------------------- src/Controller/LoginController.php | 24 ++++++------- views/account/account.php | 7 +--- views/account/delete.php | 7 +--- views/admin/map_editor.php | 2 +- views/login/google_signup.php | 2 +- views/login/login.php | 7 +--- views/login/signup.php | 2 +- 12 files changed, 18 insertions(+), 148 deletions(-) delete mode 100644 public/static/js/account/account.js delete mode 100644 public/static/js/account/delete.js delete mode 100644 public/static/js/login/login.js diff --git a/public/static/js/account/account.js b/public/static/js/account/account.js deleted file mode 100644 index 8ee7b1f..0000000 --- a/public/static/js/account/account.js +++ /dev/null @@ -1,7 +0,0 @@ -(function () { - var form = document.getElementById('accountForm'); - - MapGuesser.toggleFormSubmitButtonDisableOnChange(form, ['password_new', 'password_new_confirm']) - - MapGuesser.setOnsubmitForForm(form); -})(); diff --git a/public/static/js/account/delete.js b/public/static/js/account/delete.js deleted file mode 100644 index 60e9aca..0000000 --- a/public/static/js/account/delete.js +++ /dev/null @@ -1,5 +0,0 @@ -(function () { - var form = document.getElementById('deleteAccountForm'); - - MapGuesser.setOnsubmitForForm(form, '/'); -})(); diff --git a/public/static/js/login/google_signup.js b/public/static/js/login/google_signup.js index 063f57c..6ee6e07 100644 --- a/public/static/js/login/google_signup.js +++ b/public/static/js/login/google_signup.js @@ -1,16 +1,4 @@ (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'; diff --git a/public/static/js/login/login.js b/public/static/js/login/login.js deleted file mode 100644 index cb97b3c..0000000 --- a/public/static/js/login/login.js +++ /dev/null @@ -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); - }; -})(); diff --git a/public/static/js/login/signup.js b/public/static/js/login/signup.js index 89e4209..f130afb 100644 --- a/public/static/js/login/signup.js +++ b/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 () { diff --git a/src/Controller/LoginController.php b/src/Controller/LoginController.php index c0c740f..82592c2 100644 --- a/src/Controller/LoginController.php +++ b/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); } } diff --git a/views/account/account.php b/views/account/account.php index 67469cc..dd3c698 100644 --- a/views/account/account.php +++ b/views/account/account.php @@ -1,13 +1,8 @@ -

Account

-
+
diff --git a/views/account/delete.php b/views/account/delete.php index 461218d..75deec5 100644 --- a/views/account/delete.php +++ b/views/account/delete.php @@ -1,13 +1,8 @@ -

Delete account

- +

Are you sure you want to delete your account? This cannot be undone!

diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php index 5b8d74a..0e58851 100644 --- a/views/admin/map_editor.php +++ b/views/admin/map_editor.php @@ -50,7 +50,7 @@ $jsFiles = [