MAPG-123 [WIP] use MutationObserver

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/game.js

@@ -336,23 +336,34 @@
         },
 
         rewriteGoogleLink: function () {
-            if (!Game.googleLink) {
-                var anchors = document.getElementById('panorama').getElementsByTagName('a');
-                for (var i = 0; i < anchors.length; i++) {
-                    var a = anchors[i];
-                    if (a.href.indexOf('maps.google.com/maps') !== -1) {
-                        Game.googleLink = a;
-                        break;
-                    }
+            if (Game.googleLink) {
+                return;
+            }
+
+            var anchors = document.getElementById('panorama').getElementsByTagName('a');
+            for (var i = 0; i < anchors.length; i++) {
+                var a = anchors[i];
+                if (a.href.indexOf('maps.google.com/maps') !== -1) {
+                    Game.googleLink = a;
+                    break;
                 }
             }
 
-            setTimeout(function () {
-                if (Game.googleLink) {
-                    Game.googleLink.title = 'Google Maps';
-                    Game.googleLink.href = 'https://maps.google.com/maps';
+            if (!Game.googleLink) {
+                return;
+            }
+
+            var observer = new MutationObserver(function(mutationsList, observer) {
+                for (let mutation of mutationsList) {
+                    if (mutation.attributeName === 'href' && Game.googleLink.href !== 'https://maps.google.com/maps') {
+                        console.log(Game.googleLink.href + ' is changed.')
+                        Game.googleLink.title = 'Google Maps';
+                        Game.googleLink.href = 'https://maps.google.com/maps';
+                    }
                 }
-            }, 1);
+            });
+
+            observer.observe(Game.googleLink, { attributes: true });
         }
     };
 
@@ -425,10 +436,6 @@
         Game.rewriteGoogleLink();
     });
 
-    Game.panorama.addListener('pov_changed', function () {
-        Game.rewriteGoogleLink();
-    });
-
     Game.initialize();
 
     document.getElementById('showGuessButton').onclick = function () {

public/static/js/login.js

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

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 marginTop" type="password" name="password" placeholder="Password" required minlength="6">
+            <input class="big fullWidth" type="email" name="email" placeholder="Email address" autofocus>
+            <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_confirm" placeholder="New password confirmation" 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">
+            <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 marginTop" type="password" name="password" placeholder="Password" required minlength="6">
-            <input class="big fullWidth marginTop" type="password" name="password_confirm" placeholder="Password confirmation" required minlength="6">
+            <input class="big fullWidth" type="email" name="email" placeholder="Email address" autofocus>
+            <input class="big fullWidth marginTop" type="password" name="password" placeholder="Password">
+            <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>