MAPG-180 standardize form submit with AJAX

public/static/js/account/account.js

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

public/static/js/account/delete.js

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

public/static/js/login/google_signup.js

@@ -1,16 +1,4 @@
 (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';
 

public/static/js/login/login.js

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

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

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

views/account/account.php

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

views/account/delete.php

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

views/admin/map_editor.php

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

views/login/google_signup.php

@@ -7,7 +7,7 @@ $jsFiles = [
 <?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: ?>

views/login/login.php

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

views/login/signup.php

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