use username for multi games

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

@@ -231,17 +231,6 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
 
         prepare: function () {
             var data = new FormData();
-            var userNames;
-
-            if (roomId) {
-                var userNames = localStorage.userNames ? JSON.parse(localStorage.userNames) : {};
-                if (!userNames.hasOwnProperty(roomId)) {
-                    userNames[roomId] = prompt('Your name: ');
-                    localStorage.userNames = JSON.stringify(userNames);
-                }
-
-                data.append('userName', userNames[roomId]);
-            }
 
             document.getElementById('loading').style.visibility = 'visible';
             var url = Game.getGameIdentifier() + '/prepare.json';
@@ -618,7 +607,7 @@ const GameType = Object.freeze({ 'SINGLE': 0, 'MULTI': 1, 'CHALLENGE': 2 });
                     break;
 
                 case 'anonymous_user':
-                    MapGuesser.showModalWithContent('Error', 'You have to login to join a challenge!');
+                    MapGuesser.showModalWithContent('Error', 'You have to login to join this game!');
                     break;
 
                 default:

public/static/js/mapguesser.js

@@ -183,12 +183,23 @@ var MapGuesser = {
         document.getElementById('cover').style.visibility = 'hidden';
     },
 
-    observeInput: function (input, buttonToToggle) {
+    observeInput: function (form, observedInputs) {
-        if (input.defaultValue !== input.value) {
+        var anyChanged = false;
-            buttonToToggle.disabled = false;
+
-        } else {
+        for (var i = 0; i < observedInputs.length; i++) {
-            buttonToToggle.disabled = true;
+            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;
         }
     }
 };

public/static/js/maps.js

@@ -131,12 +131,14 @@
         }, formData);
     };
 
+    if (document.getElementById('multiButton')) {
         document.getElementById('multiButton').onclick = function () {
             MapGuesser.showModal('multi');
             document.getElementById('createNewRoomButton').href = '/multiGame/new/' + this.dataset.mapId;
             document.getElementById('multiForm').elements.roomId.select();
             document.getElementById('playMode').style.visibility = 'hidden';
         }
+    }
 
     if (document.getElementById('challengeButton')) {
         document.getElementById('challengeButton').onclick = function () {

src/Controller/GameController.php

@@ -190,13 +190,17 @@ class GameController implements IAuthenticationRequired
 
     public function prepareMultiGame(): IContent
     {
-        $roomId = \Container::$request->query('roomId');
+        /**
-        $userName = \Container::$request->post('userName');
+         * @var User $user
-        if (empty($userName)) {
+         */
-            $faker = Factory::create();
+        $user = \Container::$request->user();
-            $userName = $faker->userName;
+        if ($user === null)
+        {
+            return new JsonContent(['error' => 'anonymous_user']);
         }
 
+        $roomId = \Container::$request->query('roomId');
+
         $room = $this->multiRoomRepository->getByRoomId($roomId);
 
         if (!isset($room)) {
@@ -225,7 +229,7 @@ class GameController implements IAuthenticationRequired
         $this->multiConnector->sendMessage('join_room', [
             'roomId' => $roomId,
             'token' => $token,
-            'userName' => $userName
+            'userName' => $user->getUsername()
         ]);
 
         return new JsonContent([

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;
@@ -89,8 +90,13 @@ class LoginController
         return new HtmlContent('login/signup', $data);
     }
 
-    public function getSignupSuccess(): IContent
+    public function getSignupSuccess()
     {
+        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,34 @@ class LoginController
             return new JsonContent(['redirect' => ['target' => $this->redirectUrl]]);
         }
 
-        $user = $this->userRepository->getByEmail(\Container::$request->post('email'));
+        $newUser = new User();
+
+        $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!'
+                    ]
+                ]);
+            }
+
+            $newUser->setActive(true);
+            $newUser->setEmail($googleUserData['email']);
+            $newUser->setGoogleSub($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 +312,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,63 +359,40 @@ class LoginController
                 }
             }
 
-        $user = new User();
+            $newUser->setActive(false);
-        $user->setEmail(\Container::$request->post('email'));
+            $newUser->setEmail(\Container::$request->post('email'));
-        $user->setPlainPassword(\Container::$request->post('password'));
+            $newUser->setPlainPassword(\Container::$request->post('password'));
-        $user->setCreatedDate(new DateTime());
+        }
 
-        \Container::$persistentDataManager->saveToDb($user);
+        if (strlen(\Container::$request->post('username')) > 0 && preg_match('/^[a-zA-Z0-9_\-\.]+$/', \Container::$request->post('username')) !== 1) {
+            return new JsonContent(['error' => ['errorText' => 'Username can contain only english letters, digits, - (hyphen), . (dot), _ (underscore).']]);
+        }
 
+        $newUser->setUsername(strlen(\Container::$request->post('username')) > 0 ? \Container::$request->post('username') : Factory::create()->userName);
+        $newUser->setCreatedDate(new DateTime());
+
+        \Container::$persistentDataManager->saveToDb($newUser);
+
+        if ($googleUserData !== null) {
+            $this->sendWelcomeEmail($newUser->getEmail());
+
+            \Container::$request->setUser($newUser);
+        } else {
             $token = bin2hex(random_bytes(16));
 
             $confirmation = new UserConfirmation();
-        $confirmation->setUser($user);
+            $confirmation->setUser($newUser);
             $confirmation->setToken($token);
             $confirmation->setLastSentDate(new DateTime());
 
             \Container::$persistentDataManager->saveToDb($confirmation);
 
-        $this->sendConfirmationEmail($user->getEmail(), $token, $user->getCreatedDate());
+            $this->sendConfirmationEmail($newUser->getEmail(), $token, $newUser->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 +485,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 +500,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();
@@ -53,6 +57,130 @@ class UserController implements IAuthenticationRequired
         return new HtmlContent('account/account', ['user' => $user->toArray()]);
     }
 
+    public function getGoogleConnectRedirect(): IRedirect
+    {
+        /**
+         * @var User $user
+         */
+        $user = \Container::$request->user();
+
+        $state = bin2hex(random_bytes(16));
+        $nonce = bin2hex(random_bytes(16));
+
+        \Container::$request->session()->set('oauth_state', $state);
+        \Container::$request->session()->set('oauth_nonce', $nonce);
+
+        $oAuth = new GoogleOAuth(new Request());
+
+        $url = $oAuth->getDialogUrl(
+            $state,
+            \Container::$request->getBase() . \Container::$routeCollection->getRoute('account.googleConnect-confirm')->generateLink(),
+            $nonce,
+            $user->getEmail()
+        );
+
+        return new Redirect($url, IRedirect::TEMPORARY);
+    }
+
+    public function getGoogleConnectConfirm(): IContent
+    {
+        $defaultError = 'Authentication with Google failed. Please <a href="' . \Container::$routeCollection->getRoute('account.googleConnect')->generateLink() . '" title="Connect with Google">try again</a>!';
+
+        if (\Container::$request->query('state') !== \Container::$request->session()->get('oauth_state')) {
+            return new HtmlContent('account/google_connect', ['success' => false, 'error' => $defaultError]);
+        }
+
+        $oAuth = new GoogleOAuth(new Request());
+        $tokenData = $oAuth->getToken(
+            \Container::$request->query('code'),
+            \Container::$request->getBase() . \Container::$routeCollection->getRoute('account.googleConnect-confirm')->generateLink()
+        );
+        if (!isset($tokenData['id_token'])) {
+            return new HtmlContent('account/google_connect', ['success' => false, 'error' => $defaultError]);
+        }
+
+        $jwtParser = new JwtParser($tokenData['id_token']);
+        $idToken = $jwtParser->getPayload();
+        if ($idToken['nonce'] !== \Container::$request->session()->get('oauth_nonce')) {
+            return new HtmlContent('account/google_connect', ['success' => false, 'error' => $defaultError]);
+        }
+
+        $anotherUser = $this->userRepository->getByGoogleSub($idToken['sub']);
+        if ($anotherUser !== null) {
+            return new HtmlContent('account/google_connect', [
+                'success' => false,
+                'error' => 'This Google account is linked to another account.'
+            ]);
+        }
+
+        \Container::$request->session()->set('google_user_data', $idToken);
+
+        /**
+         * @var User $user
+         */
+        $user = \Container::$request->user();
+
+        return new HtmlContent('account/google_connect', [
+            'success' => true,
+            'googleAccount' => $idToken['email'],
+            'userEmail' => $user->getEmail()
+        ]);
+    }
+
+    public function connectGoogle(): IContent
+    {
+        /**
+         * @var User $user
+         */
+        $user = \Container::$request->user();
+        if (!$user->checkPassword(\Container::$request->post('password'))) {
+            return new JsonContent([
+                'error' => [
+                    'errorText' => 'The given password is wrong.'
+                ]
+            ]);
+        }
+
+        $googleUserData = \Container::$request->session()->get('google_user_data');
+        $user->setGoogleSub($googleUserData['sub']);
+        \Container::$persistentDataManager->saveToDb($user);
+
+        return new JsonContent(['success' => true]);
+    }
+
+    public function getGoogleDisconnectConfirm(): IContent
+    {
+        /**
+         * @var User $user
+         */
+        $user = \Container::$request->user();
+
+        return new HtmlContent('account/google_disconnect', [
+            'success' => true,
+            'userEmail' => $user->getEmail()
+        ]);
+    }
+
+    public function disconnectGoogle(): IContent
+    {
+        /**
+         * @var User $user
+         */
+        $user = \Container::$request->user();
+        if (!$user->checkPassword(\Container::$request->post('password'))) {
+            return new JsonContent([
+                'error' => [
+                    'errorText' => 'The given password is wrong.'
+                ]
+            ]);
+        }
+
+        $user->setGoogleSub(null);
+        \Container::$persistentDataManager->saveToDb($user);
+
+        return new JsonContent(['success' => true]);
+    }
+
     public function getGoogleAuthenticateRedirect(): IRedirect
     {
         /**
@@ -148,6 +276,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 (preg_match('/^[a-zA-Z0-9_\-\.]+$/', $newUsername) !== 1) {
+                return new JsonContent(['error' => ['errorText' => 'Username can contain only english letters, digits, - (hyphen), . (dot), _ (underscore).']]);
+            }
+
+            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/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,16 +23,23 @@
                 </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'] ?>">
-            <input type="email" class="text big fullWidth" name="email" placeholder="Email address" autocomplete="username" value="<?= $user['email'] ?>" disabled>
+            <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">
+            <div class="center" style="font-size: 0;">
+                <?php if ($user['google_sub'] === null): ?>
+                    <a class="button yellow marginRight" href="<?= Container::$routeCollection->getRoute('account.googleConnect')->generateLink() ?>" title="Connect with Google">Connect with Google</a>
+                <?php else: ?>
+                    <?php if ($user['password'] !== null): ?>
+                        <a class="button yellow marginRight" href="<?= Container::$routeCollection->getRoute('account.googleDisconnect')->generateLink() ?>" title="Disconnect from Google">Disconnect from Google</a>
+                    <?php endif; ?>
+                <?php endif; ?>
                 <a class="button red" href="/account/delete" title="Delete account">Delete account</a>
             </div>
         </form>

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/account/google_connect.php

@@ -0,0 +1,22 @@
+@extends(templates/layout_normal)
+
+@section(main)
+    <h2>Connect with Google</h2>
+    <div class="box compactBox">
+        <?php if (!$success): ?>
+            <p class="error justify"><?= $error ?></p>
+        <?php else: ?>
+            <form id="connectGoogleForm" action="<?= Container::$routeCollection->getRoute('account.googleConnect-action')->generateLink() ?>" method="post" data-redirect-on-success="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>">
+                <p class="justify marginBottom">Your account will be connected with the following Google account: <b><?= $googleAccount ?></b></p>
+                <input type="email" style="display: none;" name="email" autocomplete="username" value="<?= $userEmail ?>">
+                <p class="formLabel marginTop">Password</p>
+                <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
+                <p class="formError justify marginTop"></p>
+                <div class="right marginTop">
+                    <button class="marginRight" type="submit" name="submit"><i class="fa-solid fa-link"></i> Connect</button><!--
+                 --><a class="button gray" href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Back to account">Cancel</a>
+                </div>
+            </form>
+        <?php endif; ?>
+    </div>
+@endsection

views/account/google_disconnect.php

@@ -0,0 +1,18 @@
+@extends(templates/layout_normal)
+
+@section(main)
+    <h2>Disconnect from Google</h2>
+    <div class="box compactBox">
+        <form id="connectGoogleForm" action="<?= Container::$routeCollection->getRoute('account.googleDisconnect-action')->generateLink() ?>" method="post" data-redirect-on-success="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>">
+            <p class="justify marginBottom">Your account will be disconnected from the currently set Google account.</p>
+            <input type="email" style="display: none;" name="email" autocomplete="username" value="<?= $userEmail ?>">
+            <p class="formLabel marginTop">Password</p>
+            <input type="password" class="text big fullWidth" name="password" autocomplete="current-password" required minlength="6" autofocus>
+            <p class="formError justify marginTop"></p>
+            <div class="right marginTop">
+                <button class="red marginRight" type="submit" name="submit"><i class="fa-solid fa-link-slash"></i> Disconnect</button><!--
+             --><a class="button gray" href="<?= Container::$routeCollection->getRoute('account')->generateLink() ?>" title="Back to account">Cancel</a>
+            </div>
+        </form>
+    </div>
+@endsection

views/login/google_signup.php

@@ -5,21 +5,13 @@
 @section(main)
     <h2>Sign up</h2>
     <div class="box">
-        <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="<?= $redirectUrl ?>">
+        <form id="googleSignupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
-            <?php if ($found): ?>
-                <p class="justify">Please confirm that you link your account to your Google account.</p>
-            <?php else: ?>
             <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">
+            <p id="googleSignupFormError" class="formError justify marginTop"></p>
             <div class="right">
-                <button class="marginTop marginRight" type="submit">
+                <button class="marginTop marginRight" type="submit">Sign up</button><!--
-                    <?php if ($found): ?>
-                        Link
-                    <?php else: ?>
-                        Sign up
-                    <?php endif; ?>
-                </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>

views/maps.php

@@ -9,9 +9,9 @@ TODO: condition!
 <div id="playMode" class="modal">
     <h2>Play map</h2>
     <a id="singleButton" class="button fullWidth marginTop" href="" title="Single player">Single player</a>
+    <?php if ($isLoggedIn): ?>
         <p class="bold center marginTop marginBottom">OR</p>
         <button id="multiButton" class="fullWidth green" data-map-id="">Multiplayer (beta)</button>
-    <?php if ($isLoggedIn): ?>
         <p class="bold center marginTop marginBottom">OR</p>
         <button id="challengeButton" class="fullWidth yellow" data-map-id="" data-timer="">Challenge (gamma)</button>
     <?php endif; ?>

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']);
@@ -58,6 +57,11 @@ Container::$routeCollection->group('account', function (RouteCollection $routeCo
     $routeCollection->post('account-action', '', [UserController::class, 'saveAccount']);
     $routeCollection->get('account.delete', 'delete', [UserController::class, 'getDeleteAccount']);
     $routeCollection->post('account.delete-action', 'delete', [UserController::class, 'deleteAccount']);
+    $routeCollection->get('account.googleConnect', 'googleConnect', [UserController::class, 'getGoogleConnectRedirect']);
+    $routeCollection->get('account.googleConnect-confirm', 'googleConnect/code', [UserController::class, 'getGoogleConnectConfirm']);
+    $routeCollection->post('account.googleConnect-action', 'googleConnect', [UserController::class, 'connectGoogle']);
+    $routeCollection->get('account.googleDisconnect', 'googleDisconnect', [UserController::class, 'getGoogleDisconnectConfirm']);
+    $routeCollection->post('account.googleDisconnect-action', 'googleDisconnect', [UserController::class, 'disconnectGoogle']);
     $routeCollection->get('account.googleAuthenticate', 'googleAuthenticate', [UserController::class, 'getGoogleAuthenticateRedirect']);
     $routeCollection->get('account.googleAuthenticate-action', 'googleAuthenticate/code', [UserController::class, 'authenticateWithGoogle']);
 });