esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

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

Browse Source 
Feature/MAPG-180 unify inline js
This commit is contained in:
Bence Pőcze 2020-06-25 20:41:47 +00:00
commit 532f099ec9
17 changed files with 181 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/static/js/account/account.js
View File

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

5
public/static/js/account/delete.js
View File

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

9
public/static/js/login/google_signup.js Normal file
View File

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

43
public/static/js/login/login.js
View File

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

48
public/static/js/login/signup.js
View File

@ -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 () {

43
public/static/js/mapguesser.js
View File

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

76
public/static/js/maps.js Normal file
View File

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

34
public/static/js/maps_admin.js Normal file
View File

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

24
src/Controller/LoginController.php
View File

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

7
views/account/account.php
View File

@ -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 */ ?>

7
views/account/delete.php
View File

@ -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>

2
views/admin/map_editor.php
View File

@ -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">

30
views/login/google_signup.php
View File

@ -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'; ?>

7
views/login/login.php
View File

@ -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>

2
views/login/signup.php
View File

@ -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>

124
views/maps.php
View File

@ -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'; ?>

1
views/templates/main_footer.php
View File

@ -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; ?>