MAPG-69 implement password modification

public/static/css/mapguesser.css

@@ -69,6 +69,11 @@ sub {
     bottom: -0.4em;
 }
 
+hr {
+    border: solid #bbbbbb 1px;
+    margin: 10px 0;
+}
+
 .bold {
     font-weight: 500;
 }

public/static/js/mapguesser.js

@@ -88,6 +88,14 @@ var MapGuesser = {
         }
 
         document.getElementById('cover').style.visibility = 'hidden';
+    },
+
+    toggleDisableOnChange: function (input, button) {
+        if (input.defaultValue !== input.value) {
+            button.disabled = false;
+        } else {
+            button.disabled = true;
+        }
     }
 };
 

public/static/js/profile.js

@@ -0,0 +1,51 @@
+(function () {
+    var form = document.getElementById('profileForm');
+
+    form.elements.password_new.onkeyup = function () {
+        MapGuesser.toggleDisableOnChange(this, form.elements.save);
+    };
+
+    form.elements.password_new_confirm.onkeyup = function () {
+        MapGuesser.toggleDisableOnChange(this, form.elements.save);
+    };
+
+    form.onsubmit = function (e) {
+        document.getElementById('loading').style.visibility = 'visible';
+
+        e.preventDefault();
+
+        var formData = new FormData(form);
+
+        MapGuesser.httpRequest('POST', form.action, function () {
+            document.getElementById('loading').style.visibility = 'hidden';
+
+            if (this.response.error) {
+                var errorText;
+                switch (this.response.error) {
+                    case 'password_not_match':
+                        errorText = 'The given current password is wrong.'
+                        break;
+                    case 'passwords_too_short':
+                        errorText = 'The given new password is too short. Please choose a password that is at least 6 characters long!'
+                        break;
+                    case 'passwords_not_match':
+                        errorText = 'The given new passwords do not match.'
+                        break;
+                }
+
+                var profileFormError = document.getElementById('profileFormError');
+                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);
+    };
+})();

src/Controller/UserController.php

@@ -0,0 +1,56 @@
+<?php namespace MapGuesser\Controller;
+
+use MapGuesser\Database\Query\Modify;
+use MapGuesser\Interfaces\Request\IRequest;
+use MapGuesser\Interfaces\Response\IContent;
+use MapGuesser\Response\HtmlContent;
+use MapGuesser\Response\JsonContent;
+
+class UserController
+{
+    private IRequest $request;
+
+    public function __construct(IRequest $request)
+    {
+        $this->request = $request;
+    }
+
+    public function getProfile(): IContent
+    {
+        $user = $this->request->user();
+
+        $data = ['user' => $user->toArray()];
+        return new HtmlContent('profile', $data);
+    }
+
+    public function saveProfile(): IContent
+    {
+        $user = $this->request->user();
+
+        if (!$user->checkPassword($this->request->post('password'))) {
+            $data = ['error' => 'password_not_match'];
+            return new JsonContent($data);
+        }
+
+        if (strlen($this->request->post('password_new')) > 0) {
+            if (strlen($this->request->post('password_new')) < 6) {
+                $data = ['error' => 'passwords_too_short'];
+                return new JsonContent($data);
+            }
+
+            if ($this->request->post('password_new') !== $this->request->post('password_new_confirm')) {
+                $data = ['error' => 'passwords_not_match'];
+                return new JsonContent($data);
+            }
+
+            $user->setPlainPassword($this->request->post('password_new'));
+        }
+
+        $modify = new Modify(\Container::$dbConnection, 'users');
+        $modify->fill($user->toArray());
+        $modify->save();
+
+        $data = ['success' => true];
+        return new JsonContent($data);
+    }
+}

views/profile.php

@@ -0,0 +1,25 @@
+<?php
+$jsFiles = [
+    'js/profile.js',
+];
+?>
+<?php require ROOT . '/views/templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/header.php'; ?>
+<div class="main">
+    <h2>Profile</h2>
+    <div class="box">
+        <form id="profileForm" action="/profile" method="post">
+            <?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" 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>
+            </div>
+        </form>
+    </div>
+</div>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

web.php

@@ -20,6 +20,8 @@ Container::$routeCollection->post('signup-action', 'signup', [MapGuesser\Control
 Container::$routeCollection->get('signup.activate', 'signup/activate/{token}', [MapGuesser\Controller\SignupController::class, 'activate']);
 Container::$routeCollection->get('signup.cancel', 'signup/cancel/{token}', [MapGuesser\Controller\SignupController::class, 'cancel']);
 Container::$routeCollection->get('logout', 'logout', [MapGuesser\Controller\LoginController::class, 'logout']);
+Container::$routeCollection->get('profile', 'profile', [MapGuesser\Controller\UserController::class, 'getProfile']);
+Container::$routeCollection->post('profile-action', 'profile', [MapGuesser\Controller\UserController::class, 'saveProfile']);
 Container::$routeCollection->get('maps', 'maps', [MapGuesser\Controller\MapsController::class, 'getMaps']);
 Container::$routeCollection->group('game', function (MapGuesser\Routing\RouteCollection $routeCollection) {
     $routeCollection->get('game', '{mapId}', [MapGuesser\Controller\GameController::class, 'getGame']);