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 new file mode 100644 index 0000000..6ee6e07 --- /dev/null +++ b/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'); + }); + }; +})(); 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/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(); }; 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/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 @@ -