MAPG-147 [WIP]

public/static/css/mapguesser.css

@@ -251,7 +251,7 @@ div.modal {
     border-radius: 3px;
     padding: 20px;
     box-sizing: border-box;
-    z-index: 6;
+    z-index: 3;
     visibility: hidden;
 }
 
@@ -263,7 +263,7 @@ div.modal {
     right: 0;
     background-color: #000000;
     opacity: 0.5;
-    z-index: 5;
+    z-index: 2;
     visibility: hidden;
 }
 
@@ -329,7 +329,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/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/maps.php

@@ -63,6 +63,63 @@ $cssFiles = [
         <?php endif; ?>
     </div>
 </div>
+
+<style>
+div.popup {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: 250px;
+}
+div.popup>div.content, div.popup>div.tipContainer>div.tip {
+    background: white;
+    color: #333;
+    border: solid #555 1px;
+}
+
+div.popup>div.content {
+    margin-top: 20px;
+    padding: 20px 10px 8px 10px;
+    border-radius: 3px;
+}
+
+div.popup>div.tipContainer {
+    width: 40px;
+    height: 20px;
+    position: absolute;
+    top: 1px;
+    left: 50%;
+    margin-left: -20px;
+    overflow: hidden;
+}
+
+div.popup>div.tipContainer>div.tip {
+    width: 20px;
+    height: 20px;
+    padding: 1px;
+    margin: 10px auto 0;
+    transform: rotate(45deg);
+}
+
+div.popup>a.closeButton {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    padding: 2px 6px;
+    color: #555;
+}
+</style>
+
+<div class="popup">
+    <div class="tipContainer">
+        <div class="tip"></div>
+    </div>
+    <div class="content">
+        <p>A pretty CSS3 popup.<br>Easily customizable.</p>
+    </div>
+    <a class="closeButton" href="#close">×</a>
+</div>
+
 <?php if ($isAdmin): ?>
 <script>
     (function() {

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>