fix observeInput function

database/migrations/data/20230923_1905_username.php

@@ -0,0 +1,13 @@
+<?php
+
+use Faker\Factory;
+use MapGuesser\PersistentData\Model\User;
+use SokoWeb\Database\Query\Select;
+
+$select = new Select(Container::$dbConnection);
+$users = Container::$persistentDataManager->selectMultipleFromDb($select, User::class);
+
+foreach ($users as $user) {
+    $user->setUsername(Factory::create()->userName);
+    Container::$persistentDataManager->saveToDb($user);
+}

database/migrations/structure/20230923_1905_username.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `users`
+  ADD `username` VARCHAR(255) CHARACTER SET ascii COLLATE ascii_bin DEFAULT NULL AFTER `email`,
+  ADD UNIQUE `username` (`username`);

public/static/js/mapguesser.js

@@ -183,12 +183,23 @@ var MapGuesser = {
         document.getElementById('cover').style.visibility = 'hidden';
     },
 
-    observeInput: function (input, buttonToToggle) {
-        if (input.defaultValue !== input.value) {
-            buttonToToggle.disabled = false;
-        } else {
-            buttonToToggle.disabled = true;
+    observeInput: function (form, observedInputs) {
+        var anyChanged = false;
+
+        for (var i = 0; i < observedInputs.length; i++) {
+            var input = form.elements[observedInputs[i]];
+            if (input.type === 'checkbox') {
+                if (input.defaultChecked !== input.checked) {
+                    anyChanged = true;
                 }
+            } else {
+                if (input.defaultValue !== input.value) {
+                    anyChanged = true;
+                }
+            }
+        }
+
+        form.elements['submit_button'].disabled = !anyChanged;
     },
 
     observeInputsInForm: function (form, observedInputs) {
@@ -199,19 +210,19 @@ var MapGuesser = {
                 case 'INPUT':
                 case 'TEXTAREA':
                     input.oninput = function () {
-                        MapGuesser.observeInput(this, form.elements.submit);
+                        MapGuesser.observeInput(form, observedInputs);
                     };
                     break;
                 case 'SELECT':
                     input.onchange = function () {
-                        MapGuesser.observeInput(this, form.elements.submit);
+                        MapGuesser.observeInput(form, observedInputs);
                     };
                     break;
             }
         }
 
         form.onreset = function () {
-            form.elements.submit.disabled = true;
+            form.elements['submit_button'].disabled = true;
         }
     }
 };

src/Controller/LoginController.php

@@ -2,6 +2,7 @@
 
 use DateInterval;
 use DateTime;
+use Faker\Factory;
 use SokoWeb\Http\Request;
 use SokoWeb\Interfaces\Response\IContent;
 use SokoWeb\Interfaces\Response\IRedirect;
@@ -91,6 +92,11 @@ class LoginController
 
     public function getSignupSuccess(): IContent
     {
+        if (\Container::$request->user() !== null) {
+            $this->deleteRedirectUrl();
+            return new Redirect($this->redirectUrl, IRedirect::TEMPORARY);
+        }
+
         return new HtmlContent('login/signup_success');
     }
 
@@ -153,7 +159,7 @@ class LoginController
             return new JsonContent(['success' => true]);
         }
 
-        $user = $this->userRepository->getByEmail(\Container::$request->post('email'));
+        $user = $this->userRepository->getByEmailOrUsername(\Container::$request->post('email'));
 
         if ($user === null) {
             if (strlen(\Container::$request->post('password')) < 6) {
@@ -184,7 +190,7 @@ class LoginController
 
             return new JsonContent([
                 'error' => [
-                    'errorText' => 'User found with the given email address, but the account is not activated. ' .
+                    'errorText' => 'User found with the given email address / username, but the account is not activated. ' .
                         'Please check your email and click on the activation link!'
                 ]
             ]);
@@ -265,14 +271,32 @@ class LoginController
             return new JsonContent(['redirect' => ['target' => $this->redirectUrl]]);
         }
 
-        $user = $this->userRepository->getByEmail(\Container::$request->post('email'));
+        $googleUserData = \Container::$request->session()->get('google_user_data');
+        if ($googleUserData !== null) {
+            $user = $this->userRepository->getByEmail($googleUserData['email']);
+
+            if ($user !== null) {
+                return new JsonContent([
+                    'error' => [
+                        'errorText' => 'There is a user already registered with the email address of this Google account, ' .
+                            'but Google account is not linked to the user. Please <a href="/login?email=' .
+                            urlencode($googleUserData['email']) . '" title="Login">login</a> first to link your Google account!'
+                    ]
+                ]);
+            }
+
+            $active = true;
+            $email = $googleUserData['email'];
+            $googleSub = $googleUserData['sub'];
+        } else {
+            $user = $this->userRepository->getByEmailOrUsername(\Container::$request->post('email'));
 
             if ($user !== null) {
                 if ($user->getActive()) {
                     if (!$user->checkPassword(\Container::$request->post('password'))) {
                         return new JsonContent([
                             'error' => [
-                            'errorText' => 'There is a user already registered with the given email address, ' .
+                                'errorText' => 'There is a user already registered with the given email address / username, ' .
                                     'but the given password is wrong. You can <a href="/password/requestReset?email=' .
                                     urlencode($user->getEmail()) . '" title="Request password reset">request password reset</a>!'
                             ]
@@ -286,7 +310,7 @@ class LoginController
                 } else {
                     $data = [
                         'error' => [
-                        'errorText' => 'There is a user already registered with the given email address. ' .
+                            'errorText' => 'There is a user already registered with the given email address / username. ' .
                                 'Please check your email and click on the activation link!'
                         ]
                     ];
@@ -333,13 +357,26 @@ class LoginController
                 }
             }
 
+            $active = false;
+            $email = \Container::$request->post('email');
+            $googleSub = null;
+        }
+
         $user = new User();
-        $user->setEmail(\Container::$request->post('email'));
+        $user->setActive($active);
+        $user->setEmail($email);
+        $user->setUsername(strlen(\Container::$request->post('username')) > 0 ? \Container::$request->post('username') : Factory::create()->userName);
         $user->setPlainPassword(\Container::$request->post('password'));
+        $user->setGoogleSub($googleSub);
         $user->setCreatedDate(new DateTime());
 
         \Container::$persistentDataManager->saveToDb($user);
 
+        if ($active) {
+            $this->sendWelcomeEmail($user->getEmail());
+
+            \Container::$request->setUser($user);
+        } else {
             $token = bin2hex(random_bytes(16));
 
             $confirmation = new UserConfirmation();
@@ -350,46 +387,11 @@ class LoginController
             \Container::$persistentDataManager->saveToDb($confirmation);
 
             $this->sendConfirmationEmail($user->getEmail(), $token, $user->getCreatedDate());
+        }
 
         \Container::$request->session()->delete('tmp_user_data');
-
-        return new JsonContent(['success' => true]);
-    }
-
-    public function signupWithGoogle(): IContent
-    {
-        if (\Container::$request->user() !== null) {
-            $this->deleteRedirectUrl();
-            return new JsonContent(['success' => true]);
-        }
-
-        $userData = \Container::$request->session()->get('google_user_data');
-
-        $user = $this->userRepository->getByEmail($userData['email']);
-
-        if ($user === null) {
-            $sendWelcomeEmail = true;
-
-            $user = new User();
-            $user->setEmail($userData['email']);
-            $user->setCreatedDate(new DateTime());
-        } else {
-            $sendWelcomeEmail = false;
-        }
-
-        $user->setActive(true);
-        $user->setGoogleSub($userData['sub']);
-
-        \Container::$persistentDataManager->saveToDb($user);
-
-        if ($sendWelcomeEmail) {
-            $this->sendWelcomeEmail($user->getEmail());
-        }
-
         \Container::$request->session()->delete('google_user_data');
-        \Container::$request->setUser($user);
 
-        $this->deleteRedirectUrl();
         return new JsonContent(['success' => true]);
     }
 
@@ -482,12 +484,12 @@ class LoginController
             }
         }
 
-        $user = $this->userRepository->getByEmail(\Container::$request->post('email'));
+        $user = $this->userRepository->getByEmailOrUsername(\Container::$request->post('email'));
 
         if ($user === null) {
             return new JsonContent([
                 'error' => [
-                    'errorText' => 'No user found with the given email address. You can <a href="/signup" title="Sign up">sign up</a>!'
+                    'errorText' => 'No user found with the given email address / username. You can <a href="/signup" title="Sign up">sign up</a>!'
                 ]
             ]);
         }
@@ -497,7 +499,7 @@ class LoginController
 
             return new JsonContent([
                 'error' => [
-                    'errorText' => 'User found with the given email address, but the account is not activated. ' .
+                    'errorText' => 'User found with the given email address / username, but the account is not activated. ' .
                         'Please check your email and click on the activation link!'
                 ]
             ]);

src/Controller/UserController.php

@@ -8,6 +8,7 @@ use SokoWeb\Interfaces\Response\IRedirect;
 use SokoWeb\OAuth\GoogleOAuth;
 use MapGuesser\PersistentData\Model\User;
 use MapGuesser\Repository\GuessRepository;
+use MapGuesser\Repository\UserRepository;
 use MapGuesser\Repository\UserConfirmationRepository;
 use MapGuesser\Repository\UserInChallengeRepository;
 use MapGuesser\Repository\UserPasswordResetterRepository;
@@ -19,6 +20,8 @@ use SokoWeb\Util\JwtParser;
 
 class UserController implements IAuthenticationRequired
 {
+    private UserRepository $userRepository;
+
     private UserConfirmationRepository $userConfirmationRepository;
 
     private UserPasswordResetterRepository $userPasswordResetterRepository;
@@ -31,6 +34,7 @@ class UserController implements IAuthenticationRequired
 
     public function __construct()
     {
+        $this->userRepository = new UserRepository();
         $this->userConfirmationRepository = new UserConfirmationRepository();
         $this->userPasswordResetterRepository = new UserPasswordResetterRepository();
         $this->userPlayedPlaceRepository = new UserPlayedPlaceRepository();
@@ -148,6 +152,32 @@ class UserController implements IAuthenticationRequired
             return new JsonContent(['error' => ['errorText' => $error]]);
         }
 
+        $newEmail = \Container::$request->post('email');
+        if ($newEmail !== $user->getEmail()) {
+            if (!filter_var($newEmail, FILTER_VALIDATE_EMAIL)) {
+                return new JsonContent(['error' => ['errorText' => 'The given email address is not valid.']]);
+            }
+
+            if ($this->userRepository->getByEmail($newEmail) !== null) {
+                return new JsonContent(['error' => ['errorText' => 'The given email address belongs to another account.']]);
+            }
+
+            $user->setEmail($newEmail);
+        }
+
+        $newUsername = \Container::$request->post('username');
+        if (strlen($newUsername) > 0 && $newUsername !== $user->getUsername()) {
+            if (filter_var($newUsername, FILTER_VALIDATE_EMAIL)) {
+                return new JsonContent(['error' => ['errorText' => 'Please select a username that is not a valid email address.']]);
+            }
+
+            if ($this->userRepository->getByUsername($newUsername) !== null) {
+                return new JsonContent(['error' => ['errorText' => 'The given username is already taken.']]);
+            }
+
+            $user->setUsername($newUsername);
+        }
+
         if (strlen(\Container::$request->post('password_new')) > 0) {
             if (strlen(\Container::$request->post('password_new')) < 6) {
                 return new JsonContent([

src/PersistentData/Model/User.php

@@ -8,12 +8,14 @@ class User extends Model implements IUser
 {
     protected static string $table = 'users';
 
-    protected static array $fields = ['email', 'password', 'type', 'active', 'google_sub', 'created'];
+    protected static array $fields = ['email', 'username', 'password', 'type', 'active', 'google_sub', 'created'];
 
     private static array $types = ['user', 'admin'];
 
     private string $email = '';
 
+    private string $username = '';
+
     private ?string $password = null;
 
     private string $type = 'user';
@@ -29,6 +31,11 @@ class User extends Model implements IUser
         $this->email = $email;
     }
 
+    public function setUsername(string $username): void
+    {
+        $this->username = $username;
+    }
+
     public function setPassword(?string $hashedPassword): void
     {
         $this->password = $hashedPassword;
@@ -71,6 +78,11 @@ class User extends Model implements IUser
         return $this->email;
     }
 
+    public function getUsername(): string
+    {
+        return $this->username;
+    }
+
     public function getPassword(): ?string
     {
         return $this->password;

src/Repository/UserRepository.php

@@ -22,6 +22,23 @@ class UserRepository implements IUserRepository
         return \Container::$persistentDataManager->selectFromDb($select, User::class);
     }
 
+    public function getByUsername(string $username): ?User
+    {
+        $select = new Select(\Container::$dbConnection);
+        $select->where('username', '=', $username);
+
+        return \Container::$persistentDataManager->selectFromDb($select, User::class);
+    }
+
+    public function getByEmailOrUsername(string $emailOrUsername): ?User
+    {
+        if (filter_var($emailOrUsername, FILTER_VALIDATE_EMAIL)) {
+            return $this->getByEmail($emailOrUsername);
+        }
+
+        return $this->getByUsername($emailOrUsername);
+    }
+
     public function getByGoogleSub(string $sub): ?User
     {
         $select = new Select(\Container::$dbConnection);

views/account/account.php

@@ -5,11 +5,11 @@
 @section(main)
     <h2>Account</h2>
     <div class="box">
-        <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
+        <form id="accountForm" action="/account" method="post" data-reload-on-success="true" data-observe-inputs="email,username,password_new,password_new_confirm">
             <?php if ($user['password'] !== null && $user['google_sub'] !== null): ?>
                 <p class="justify small">Please confirm your identity with your password or with Google to modify your account.</p>
                 <div class="inputWithButton">
-                    <input type="password" class="text name="password" placeholder="Current password" autocomplete="current-password" required minlength="6" autofocus><!--
+                    <input type="password" class="text" name="password" placeholder="Current password" autocomplete="current-password" required minlength="6" autofocus><!--
                  --><button id="authenticateWithGoogleButton" class="yellow" type="button">Google</button>
                 </div>
             <?php elseif ($user['password'] !== null): ?>
@@ -23,13 +23,13 @@
                 </div>
             <?php endif; ?>
             <hr>
-            <?php /* TODO: disabled for the time being, email modification should be implemented */ ?>
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" value="<?= $user['email'] ?>" disabled>
+            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" value="<?= $user['email'] ?>">
+            <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username" value="<?= $user['username'] ?>">
             <input type="password" class="text big fullWidth marginTop" name="password_new" placeholder="New password" autocomplete="new-password" minlength="6">
             <input type="password" class="text big fullWidth marginTop" name="password_new_confirm" placeholder="New password confirmation" autocomplete="new-password" minlength="6">
             <p id="accountFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button type="submit" name="submit" disabled>Save</button>
+                <button type="submit" name="submit_button" disabled>Save</button>
             </div>
             <hr>
             <div class="center">

views/account/delete.php

@@ -26,7 +26,7 @@
             <?php endif; ?>
             <p id="deleteAccountFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">
-                <button class="red marginRight" type="submit" name="submit">Delete account</button><!--
+                <button class="red marginRight" type="submit" name="submit_button">Delete account</button><!--
              --><a class="button gray marginTop" href="/account" title="Back to account">Cancel</a>
             </div>
         </form>

views/login/google_signup.php

@@ -5,21 +5,12 @@
 @section(main)
     <h2>Sign up</h2>
     <div class="box">
-        <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="<?= $redirectUrl ?>">
-            <?php if ($found): ?>
-                <p class="justify">Please confirm that you link your account to your Google account.</p>
-            <?php else: ?>
+        <form id="googleSignupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
             <p class="justify">Please confirm your sign up request. Your account will be linked to your Google account.</p>
-            <?php endif; ?>
             <input type="email" class="text big fullWidth marginTop" name="email" placeholder="Email address" value="<?= $email ?>" disabled>
+            <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username">
             <div class="right">
-                <button class="marginTop marginRight" type="submit">
-                    <?php if ($found): ?>
-                        Link
-                    <?php else: ?>
-                        Sign up
-                    <?php endif; ?>
-                </button><!--
+                <button class="marginTop marginRight" type="submit">Sign up</button><!--
              --><button id="cancelGoogleSignupButton" class="gray marginTop" type="button">Cancel</button>
             </div>
         </form>

views/login/login.php

@@ -4,7 +4,7 @@
     <h2>Login</h2>
     <div class="box">
         <form id="loginForm" action="/login" method="post" data-redirect-on-success="<?= $redirectUrl ?>">
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" required autofocus>
+            <input type="email" class="text big fullWidth" name="email" placeholder="Email address / username" autocomplete="username" required autofocus>
             <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password" autocomplete="current-password" required minlength="6">
             <p id="loginFormError" class="formError justify marginTop"></p>
             <div class="right marginTop">

views/login/password_reset_request.php

@@ -6,7 +6,7 @@
     <h2>Request password reset</h2>
     <div class="box">
         <form id="passwordResetForm" action="/password/requestReset" method="post" data-redirect-on-success="/password/requestReset/success">
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" value="<?= isset($email) ? $email : '' ?>" required autofocus>
+            <input type="email" class="text big fullWidth" name="email" placeholder="Email address / username" autocomplete="username" value="<?= isset($email) ? $email : '' ?>" required autofocus>
             <?php if (!empty($_ENV['RECAPTCHA_SITEKEY'])): ?>
                 <div class="marginTop">
                     <div class="g-recaptcha" data-sitekey="<?= $_ENV['RECAPTCHA_SITEKEY'] ?>"></div>

views/login/signup.php

@@ -8,7 +8,7 @@
     <div class="box">
         <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>
+                <p class="justify">No user found with the given email address / username. Sign up with one click!</p>
                 <input type="email" class="text big fullWidth marginTop" name="email" placeholder="Email address" autocomplete="username" value="<?= $email ?>" required>
                 <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password confirmation" autocomplete="new-password" required minlength="6" autofocus>
             <?php else: ?>
@@ -16,6 +16,7 @@
                 <input type="password" class="text big fullWidth marginTop" name="password" placeholder="Password" autocomplete="new-password" required minlength="6">
                 <input type="password" class="text big fullWidth marginTop" name="password_confirm" placeholder="Password confirmation" autocomplete="new-password" minlength="6">
             <?php endif; ?>
+            <input type="username" class="text big fullWidth marginTop" name="username" placeholder="Username">
             <?php if (!empty($_ENV['RECAPTCHA_SITEKEY'])): ?>
                 <div class="marginTop">
                     <div class="g-recaptcha" data-sitekey="<?= $_ENV['RECAPTCHA_SITEKEY'] ?>"></div>

web.php

@@ -38,7 +38,6 @@ Container::$routeCollection->group('signup', function (RouteCollection $routeCol
     $routeCollection->get('signup', '', [LoginController::class, 'getSignupForm']);
     $routeCollection->post('signup-action', '', [LoginController::class, 'signup']);
     $routeCollection->get('signup-google', 'google', [LoginController::class, 'getSignupWithGoogleForm']);
-    $routeCollection->post('signup-google-action', 'google', [LoginController::class, 'signupWithGoogle']);
     $routeCollection->post('signup.reset', 'reset', [LoginController::class, 'resetSignup']);
     $routeCollection->post('signup-google.reset', 'google/reset', [LoginController::class, 'resetGoogleSignup']);
     $routeCollection->get('signup.success', 'success', [LoginController::class, 'getSignupSuccess']);