MAPG-146 [WIP]

public/static/css/mapguesser.css

@@ -17,11 +17,6 @@ button::-moz-focus-inner, input::-moz-focus-inner {
     border: 0;
 }
 
-::selection {
-    background-color: #28a745;
-    color: #ffffff;
-}
-
 p, h1, h2, input, textarea, select, button, a {
     font-family: 'Roboto', sans-serif;
 }
@@ -251,7 +246,7 @@ div.modal {
     border-radius: 3px;
     padding: 20px;
     box-sizing: border-box;
-    z-index: 6;
+    z-index: 3;
     visibility: hidden;
 }
 
@@ -263,7 +258,7 @@ div.modal {
     right: 0;
     background-color: #000000;
     opacity: 0.5;
-    z-index: 5;
+    z-index: 2;
     visibility: hidden;
 }
 
@@ -329,7 +324,7 @@ div.buttonContainer>button {
     left: 50%;
     margin-top: -32px;
     margin-left: -32px;
-    z-index: 7;
+    z-index: 5;
     visibility: hidden;
 }
 

public/static/js/login.js

@@ -29,6 +29,8 @@
                 loginFormError.style.display = 'block';
                 loginFormError.innerHTML = errorText;
 
+                form.elements.email.select();
+
                 return;
             }
 

public/static/js/map_editor.js

@@ -13,6 +13,7 @@
         added: {},
         edited: {},
         deleted: {},
+        saved: true,
 
         editMetadata: function () {
             var form = document.getElementById('metadataForm');
@@ -24,6 +25,7 @@
 
             MapGuesser.hideModal();
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -210,6 +212,7 @@
 
             MapEditor.selectedMarker.setLatLng({ lat: places[placeId].lat, lng: places[placeId].lng });
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -243,6 +246,7 @@
             document.getElementById('added').innerHTML = String(Object.keys(MapEditor.added).length);
             document.getElementById('edited').innerHTML = String(Object.keys(MapEditor.edited).length);
 
+            MapEditor.saved = false;
             document.getElementById('saveButton').disabled = false;
         },
 
@@ -300,6 +304,7 @@
                 document.getElementById('edited').innerHTML = '0';
                 document.getElementById('deleted').innerHTML = '0';
 
+                MapEditor.saved = true;
                 document.getElementById('saveButton').disabled = true;
             }, data);
         },
@@ -440,4 +445,13 @@
     document.getElementById('deleteButton').onclick = function () {
         MapEditor.deletePlace();
     };
+
+    window.addEventListener('beforeunload', function (e) {
+        if (MapEditor.saved) {
+            return;
+        }
+
+        e.preventDefault();
+        e.returnValue = '';
+    });
 })();

public/static/js/mapguesser.js

@@ -2,12 +2,11 @@ var MapGuesser = {
     httpRequest: function (method, url, callback, data) {
         var xhr = new XMLHttpRequest();
 
+        xhr.responseType = 'json';
         xhr.onload = callback;
 
         xhr.open(method, url, true);
 
-        xhr.responseType = 'json';
-
         if (method === 'POST') {
             if (typeof data === 'undefined') {
                 data = new FormData();

public/static/js/profile.js

@@ -37,12 +37,15 @@
                 profileFormError.style.display = 'block';
                 profileFormError.innerHTML = errorText;
 
+                form.elements.password_new.select();
+
                 return;
             }
 
             document.getElementById('profileFormError').style.display = 'none';
             form.reset();
             form.elements.save.disabled = true;
+            form.elements.password_new.focus();
         }, formData);
     };
 })();

public/static/js/signup.js

@@ -14,9 +14,6 @@
             if (this.response.error) {
                 var errorText;
                 switch (this.response.error) {
-                    case 'email_not_valid':
-                        errorText = 'The given email address is not valid.'
-                        break;
                     case 'passwords_too_short':
                         errorText = 'The given password is too short. Please choose a password that is at least 6 characters long!'
                         break;
@@ -35,11 +32,14 @@
                 signupFormError.style.display = 'block';
                 signupFormError.innerHTML = errorText;
 
+                form.elements.email.select();
+
                 return;
             }
 
             document.getElementById('signupFormError').style.display = 'none';
             form.reset();
+            form.elements.email.focus();
 
             MapGuesser.showModalWithContent('Sign up successful', 'Sign up was successful. Please check your email and click on the activation link to activate your account!');
         }, formData);

src/Controller/SignupController.php

@@ -43,11 +43,6 @@ class SignupController
             return new JsonContent($data);
         }
 
-        if (filter_var($this->request->post('email'), FILTER_VALIDATE_EMAIL) === false) {
-            $data = ['error' => 'email_not_valid'];
-            return new JsonContent($data);
-        }
-
         $select = new Select(\Container::$dbConnection, 'users');
         $select->columns(User::getFields());
         $select->where('email', '=', $this->request->post('email'));

src/Controller/UserController.php

@@ -58,8 +58,6 @@ class UserController implements ISecured
         $modify->fill($user->toArray());
         $modify->save();
 
-        $this->request->session()->set('user', $user);
-
         $data = ['success' => true];
         return new JsonContent($data);
     }

views/login.php

@@ -9,8 +9,8 @@ $jsFiles = [
     <h2>Login</h2>
     <div class="box">
         <form id="loginForm" action="/login" method="post">
-            <input class="big fullWidth" type="email" name="email" placeholder="Email address" required autofocus>
+            <input class="big fullWidth" type="email" name="email" placeholder="Email address" autofocus>
-            <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password" required minlength="6">
+            <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password">
             <p id="loginFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
                 <button type="submit">Login</button>

views/profile.php

@@ -9,12 +9,12 @@ $jsFiles = [
     <h2>Profile</h2>
     <div class="box">
         <form id="profileForm" action="/profile" method="post">
-            <input class="big fullWidth" type="password" name="password" placeholder="Current password" autofocus>
-            <hr>
             <?php /* TODO: disabled for the time being, email modification should be implemented */ ?>
             <input class="big fullWidth" type="email" name="email" placeholder="Email address" value="<?= $user['email'] ?>" disabled>
-            <input class="big fullWidth marginTop" type="password" name="password_new" placeholder="New password" minlength="6">
+            <input class="big fullWidth marginTop" type="password" name="password_new" placeholder="New password" autofocus>
-            <input class="big fullWidth marginTop" type="password" name="password_new_confirm" placeholder="New password confirmation" minlength="6">
+            <input class="big fullWidth marginTop" type="password" name="password_new_confirm" placeholder="New password confirmation">
+            <hr>
+            <input class="big fullWidth" type="password" name="password" placeholder="Current password">
             <p id="profileFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
                 <button type="submit" name="save" disabled>Save</button>

views/signup/signup.php

@@ -9,9 +9,9 @@ $jsFiles = [
     <h2>Sign up</h2>
     <div class="box">
         <form id="signupForm" action="/signup" method="post">
-            <input class="big fullWidth" type="email" name="email" placeholder="Email address" required autofocus>
+            <input class="big fullWidth" type="email" name="email" placeholder="Email address" autofocus>
-            <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password" required minlength="6">
+            <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password">
-            <input class="big fullWidth marginTop" type="password" name="password_confirm" placeholder="Password confirmation" required minlength="6">
+            <input class="big fullWidth marginTop" type="password" name="password_confirm" placeholder="Password confirmation">
             <p id="signupFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
                 <button type="submit">Sign up</button>