From a2bb4e46f764a3be415cb3ffdee83a162fc4fbcc Mon Sep 17 00:00:00 2001
From: fet1sov <august9222@gmail.com>
Date: Wed, 24 Apr 2024 01:58:20 +0500
Subject: [PATCH] User Settings : New frontend part

Settings:
  - Updated the events for the drag and drop image
  - Added the categories for the user settings

Locales:
  - Changed the service for the IP location check

Model (User):
  - Renamed the user model file to user.mdl
---
 www/_styles/_css/styles.css                   |  69 +++++++
 www/backend/models/{user.php => user.mdl.php} |   2 +-
 www/backend/routes/user/user.ctrl.php         |  74 ++++---
 www/backend/routes/user/user.view.php         | 128 ++++++-------
 www/data/locales/en-US.json                   |  23 ++-
 www/data/locales/ru-RU.json                   |  23 ++-
 .../components/settings/settingsBlock.php     | 180 ++++++++++++++++++
 www/includes/wtframework/locales.php          |   2 +-
 8 files changed, 401 insertions(+), 100 deletions(-)
 rename www/backend/models/{user.php => user.mdl.php} (99%)
 create mode 100644 www/frontend/components/settings/settingsBlock.php

diff --git a/www/_styles/_css/styles.css b/www/_styles/_css/styles.css
index 2b2a66b..b92d4bf 100644
--- a/www/_styles/_css/styles.css
+++ b/www/_styles/_css/styles.css
@@ -7,6 +7,7 @@
     --secondary-color-02: #a0a0a0;
     --secondary-color-03: #000000;
     --secondary-color-04: #F0F0F0;
+    --secondary-color-05: #cecece;
 }
 
 @font-face {
@@ -38,6 +39,17 @@
     }
 }
 
+@keyframes appearAnimation-Y {
+    from {
+        margin-top: -20px;
+        opacity: 0;
+    }
+    to {
+        margin-top: 0;
+        opacity: 1;
+    }
+}
+
 * {
     transition: 0.5s all;
     scroll-behavior: smooth;
@@ -298,6 +310,63 @@ img.small-avatar {
     border-radius: 10px;
 }
 
+.small-primary-button {
+    display: flex;
+    justify-content: center;
+
+    background-color: var(--primary-color-01);
+    color: var(--secondary-color-01);
+
+    border-radius: 10px;
+
+    padding: 10px;
+    width: 100%;
+
+    user-select: none;
+    outline: none;
+
+    box-shadow: none;
+    cursor: pointer;
+    border: none;
+}
+
+.small-primary-button:hover {
+    background-color: var(--primary-color-02);
+}
+
+.small-primary-button:focus {
+    outline: none;
+}
+
+.round-button {
+    display: flex;
+    justify-content: center;
+
+    background-color: var(--primary-color-01);
+    color: var(--secondary-color-01);
+
+    border-radius: 50%;
+
+    padding: 10px;
+
+    user-select: none;
+}
+
+.round-button:hover {
+    background-color: var(--primary-color-02);
+}
+
+.primary-link-button {
+    padding: 10px;
+    user-select: none;
+
+    text-align: center;
+}
+
+.primary-link-button:hover {
+    color: var(--primary-color-01);
+}
+
 /* Small Desktop */
 @media (width <= 1024px) {
     body {
diff --git a/www/backend/models/user.php b/www/backend/models/user.mdl.php
similarity index 99%
rename from www/backend/models/user.php
rename to www/backend/models/user.mdl.php
index ac8ceff..825790b 100644
--- a/www/backend/models/user.php
+++ b/www/backend/models/user.mdl.php
@@ -74,7 +74,7 @@ public function saveData() : void
     {
         $stmt = $GLOBALS["dbAdapter"]->prepare("UPDATE `user` SET `username`=?, `password`=?, `company`=?, `email`=? WHERE `id`=?");
         $stmt->bind_param(
-            'ssss',
+            'ssssi',
             $this->username,
             $this->password,
             $this->company,
diff --git a/www/backend/routes/user/user.ctrl.php b/www/backend/routes/user/user.ctrl.php
index c1948c8..4348475 100644
--- a/www/backend/routes/user/user.ctrl.php
+++ b/www/backend/routes/user/user.ctrl.php
@@ -1,36 +1,60 @@
 <?php
 
-if ($_SERVER['REQUEST_METHOD'] == "POST")
-{
-    
-} else {
-    if (isset($params['category']))
-    {
-        switch($params['category'])
-        {
-            case "logout": {
+if (!isset($_SESSION["userData"])) {
+    header('Location: /');
+}
+
+if (isset($params['category'])) {
+    switch ($params['category']) {
+        case "logout": {
                 session_destroy();
                 header('Location: /');
                 break;
             }
 
-            case "settings": {
-                Renderer::includeTemplate("frontend/components/layout.php", [
-                    "layout_path" => ROUTE_ROOT . "user/user.view.php",
-                    "layout_data" => [
-                        "category" => $params['category'],
-                        "footerShow" => false
-                    ]
-                ]);
+        case "settings": {
+                $userData = unserialize($_SESSION["userData"]);
+
+                if ($_SERVER['REQUEST_METHOD'] == "POST") {
+                    $userData->setCompany(isset($_POST["companyName"]) ? $_POST["companyName"] : $userData->getCompany());
+                    $userData->saveData();
+
+                    Renderer::includeTemplate("frontend/components/layout.php", [
+                        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+                        "layout_data" => [
+                            "category" => $params['category'],
+                            "message" => [
+                                "type" => "success"
+                            ],
+                            "footerShow" => false,
+                            "userData" => [
+                                "email" => $userData->getEmail(),
+                                "company" => $userData->getCompany()
+                            ]
+                        ]
+                    ]);
+
+                } else {
+                    Renderer::includeTemplate("frontend/components/layout.php", [
+                        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+                        "layout_data" => [
+                            "category" => $params['category'],
+                            "footerShow" => false,
+                            "userData" => [
+                                "email" => $userData->getEmail(),
+                                "company" => $userData->getCompany()
+                            ]
+                        ]
+                    ]);
+                }
                 break;
             }
-        }
-    } else {
-        Renderer::includeTemplate("frontend/components/layout.php", [
-            "layout_path" => ROUTE_ROOT . "user/user.view.php",
-            "layout_data" => [
-                "footerShow" => false
-            ]
-        ]);
     }
+} else {
+    Renderer::includeTemplate("frontend/components/layout.php", [
+        "layout_path" => ROUTE_ROOT . "user/user.view.php",
+        "layout_data" => [
+            "footerShow" => false
+        ]
+    ]);
 }
diff --git a/www/backend/routes/user/user.view.php b/www/backend/routes/user/user.view.php
index 023fab7..af90c55 100644
--- a/www/backend/routes/user/user.view.php
+++ b/www/backend/routes/user/user.view.php
@@ -1,11 +1,4 @@
-<link href="_styles/_css/user.css" rel="stylesheet"/>
-
-<?php
-    if (!isset($_SESSION["userData"]))
-    {
-        header('Location: /');
-    }
-?>
+<link href="_styles/_css/user.css" rel="stylesheet" />
 
 <style>
     section.user-info {
@@ -57,94 +50,87 @@
         const profileBlock = document.querySelector("div#profileBlock div#profileInfo");
         const welcomeBlock = document.querySelector("div#profileBlock div#welcomeMessage")
 
-        setInterval(() => {
-            profileBlock.style.display = "block";
-            welcomeBlock.remove();
-        }, 2000);
+        if (profileBlock) {
+            setInterval(() => {
+                profileBlock.style.display = "block";
+                welcomeBlock.remove();
+            }, 2000);
+        }
     });
 </script>
 
-<?php if (isset($category)) { 
-        switch($category) { 
-            case "settings": { ?>
-
+<?php if (isset($category)) {
+    switch ($category) {
+        case "settings": { ?>
             <style>
-                .avatars-block {
+                .centerized-block {
                     display: flex;
-                    justify-content: space-between;
-
-                    margin-bottom: auto;
-                    align-items: end;
+                    flex-direction: column;
+                    justify-content: center;
                 }
 
-                .avatar-preview {
-                    border-radius: 10px;
+                .settings-navigation-block {
+                    margin-bottom: 20px;
                 }
-
-                #smallAvatarPic {
-                    width: 48px;
-                    height: 48px;
+                
+                .settings-navigation-block ul {
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: row;
                 }
 
-                #middleAvatarPic {
-                    width: 64px;
-                    height: 64px;
+                .settings-navigation-block ul li {
+                    user-select: none;
+                    margin-right: 10px;
                 }
 
-                #bigAvatarPic {
-                    width: 128px;
-                    height: 128px;
+                .settings-navigation-block ul li:hover {
+                    color: var(--primary-color-03);
                 }
 
-                div.settings-section-block.avatars {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                }
-
-                .small-category-block {
-                    margin-bottom: 10px;
+                section {
+                    height: unset;
+                    padding-top: 100px;
                 }
-
             </style>
 
-            <script>
-
-            </script>
-
-            <section>
-                <form method="post">
-                    <div class="settings-section-block avatars">
-                        <div class="avatars-block">
-                            <img id="smallAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                            <img id="middleAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                            <img id="bigAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
-                        </div>
-
-                        <div class="avatars-block small-category-block">
-                            <p>48px</p>
-                            <p>64px</p>
-                            <p>128px</p>
-                        </div>
-
-                        <p><strong><?= $GLOBALS["locale"]["userPage"]["settings"]["avatar"]["placeholder"] ?></strong></p>
-                        <button class="small-primary-button"><?= $GLOBALS["locale"]["buttons"]["upload"] ?></button>
+            <form method="post">
+                <section class="centerized-block">
+                    <div class="settings-navigation-block">
+                        <ul>
+                            <?php foreach($GLOBALS["locale"]["userPage"]["settings"]["settingsNavigation"] as $settingSection) { ?>
+                                <li>
+                                    <?= $settingSection ?>
+                                </li>
+                            <?php } ?>
+                        </ul>
                     </div>
-                </form>
-            </section>
-        <?php } 
-        }
+
+                    <?php
+                    Renderer::includeTemplate("frontend/components/settings/settingsBlock.php", [
+                        "message" => [
+                            "type" => "success"
+                        ],
+                        "userData" => $userData
+                    ]);
+                    break;
+                    ?>
+                </section>
+            </form>
+        <?php
+        } 
+    }
 } else { ?>
     <section class="user-info">
         <div id="profileBlock">
             <div id="welcomeMessage">
                 <?
-                    $time = date("H");
+                $time = date("H");
                 ?>
 
                 <? if ($time < "12") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodmorning"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
-                <? } else if ($time >= "12" && $time < "17") { ?>
+                <? } else if ($time >= "12" && $time < "19") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodday"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
                 <? } else if ($time >= "19") { ?>
                     <h2><?= $GLOBALS["locale"]["userPage"]["greetings"]["goodnight"] ?><?= unserialize($_SESSION["userData"])->getUsername(); ?></h2>
@@ -162,5 +148,5 @@
                 </div>
             </div>
         </div>
-    <section>
-<?php } ?>
\ No newline at end of file
+        <section>
+        <?php } ?>
\ No newline at end of file
diff --git a/www/data/locales/en-US.json b/www/data/locales/en-US.json
index cb85dac..d910e5b 100644
--- a/www/data/locales/en-US.json
+++ b/www/data/locales/en-US.json
@@ -22,6 +22,11 @@
             }
         }
     },
+    "success": {
+        "settings": {
+            "profileSettings": "Profile information was sucessfully updated"
+        }
+    },
     "titles": {
         "authorization": "Log In",
         "registration": "Registration",
@@ -34,8 +39,22 @@
             "goodnight": "Good night, "
         },
         "settings": {
+            "settingsNavigation": {
+                "profile": "Profile",
+                "security": "Security"
+            },
             "avatar": {
+                "header": "Profile picture",
                 "placeholder": "Upload the avatar less than 5 Mb. Formats: .png, .jpg, .gif"
+            },
+            "personalInfomation": {
+                "header": "Personal information",
+                "email": {
+                    "placeholder": "Contact email"
+                },
+                "companyName": {
+                    "placeholder": "Company name"
+                }
             }
         }
     },
@@ -71,6 +90,8 @@
         "logout": "Log out"
     },
     "buttons": {
-        "upload": "Upload"
+        "upload": "Upload",
+        "saveButton": "Save changes",
+        "discardButton": "Discard changes"
     }
 }
\ No newline at end of file
diff --git a/www/data/locales/ru-RU.json b/www/data/locales/ru-RU.json
index 8704edc..124a39f 100644
--- a/www/data/locales/ru-RU.json
+++ b/www/data/locales/ru-RU.json
@@ -22,6 +22,11 @@
             }
         }
     },
+    "success": {
+        "settings": {
+            "profileSettings": "Информация о профиле была обновлена"
+        }
+    },
     "titles": {
         "authorization": "Авторизация",
         "registration": "Регистрация",
@@ -34,8 +39,22 @@
             "goodnight": "Доброй ночи, "
         },
         "settings": {
+            "settingsNavigation": {
+                "profile": "Профиль",
+                "security": "Безопасность"
+            },
             "avatar": {
+                "header": "Изображение профиля",
                 "placeholder": "Загрузите аватар не более 5 МБ. Формат: .png, .jpg, .gif"
+            },
+            "personalInfomation": {
+                "header": "Персональная информация",
+                "email": {
+                    "placeholder": "Контактная почта"
+                },
+                "companyName": {
+                    "placeholder": "Название компании"
+                }
             }
         }
     },
@@ -71,6 +90,8 @@
         "logout": "Выйти"
     },
     "buttons": {
-        "upload": "Загрузить"
+        "upload": "Загрузить",
+        "saveButton": "Сохранить изменения",
+        "discardButton": "Отменить изменения"
     }
 }
\ No newline at end of file
diff --git a/www/frontend/components/settings/settingsBlock.php b/www/frontend/components/settings/settingsBlock.php
new file mode 100644
index 0000000..6579ddc
--- /dev/null
+++ b/www/frontend/components/settings/settingsBlock.php
@@ -0,0 +1,180 @@
+<style>
+    .settings-component {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .settings-component .avatar-preview {
+        border-radius: 10px;
+    }
+
+    .settings-component #smallAvatarPic {
+        width: 48px;
+        height: 48px;
+    }
+
+    .settings-component #middleAvatarPic {
+        width: 64px;
+        height: 64px;
+    }
+
+    .settings-component #bigAvatarPic {
+        width: 128px;
+        height: 128px;
+    }
+
+    .settings-component .small-category-block {
+        margin-bottom: 10px;
+    }
+
+    .settings-component .small-primary-button {
+        width: 50%;
+    }
+
+    .settings-component .avatar-block {
+        display: flex;
+        justify-content: center;
+
+        position: relative;
+    }
+
+    .settings-component .upload-button {
+        position: absolute;
+
+        width: 48px;
+        height: 48px;
+
+        top: 65%;
+        margin-left: 100px;
+    }
+
+    .settings-component .settings-row {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        margin-top: 10px;
+    }
+
+    .settings-component .settings-row input {
+        background-color: var(--secondary-color-05);
+        outline: none;
+    }
+    
+    .settings-component .settings-row input::placeholder {
+        color: var(--secondary-color-02);
+    }
+
+    .settings-component .settings-buttons-block {
+        margin-top: 30px;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .settings-component .message-success {
+        animation-name: appearAnimation-X;
+        animation-duration: 0.5s;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        color: #00d92f;
+        font-weight: bold;
+    }
+</style>
+
+<script>
+    let avatarPreviews = {
+        big: null,
+    };
+
+    function previewProfilePicture() {
+        event.stopPropagation();
+        event.preventDefault();
+        const fileList = event.dataTransfer.files;
+
+        let reader = new FileReader();
+
+        if (fileList[0].type === "image/png" ||
+            fileList[0].type === "image/jpeg" ||
+            fileList[0].type === "image/gif") {
+            avatarFile = fileList[0];
+
+            avatarPreviews.big.src = URL.createObjectURL(fileList[0]);
+        }
+    }
+
+    window.addEventListener("DOMContentLoaded", function() {
+        avatarPreviews.big = document.querySelector("img#bigAvatarPic");
+
+        const avatarDragZone = document.querySelector("div#avatarDragZone");
+        avatarDragZone.addEventListener('dragover', (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'copy';
+        });
+
+        avatarDragZone.addEventListener('drop', this.previewProfilePicture);
+
+        const avatarUploadButton = document.querySelector("div#avatarUploadButton");
+        avatarUploadButton.addEventListener("click", function() {
+            let input = document.createElement('input');
+            input.type = 'file';
+            input.onchange = _this => {
+                let files = Array.from(input.files);
+                if (files[0].type === "image/png" ||
+                    files[0].type === "image/jpeg" ||
+                    files[0].type === "image/gif") {
+                    avatarFile = files[0];
+
+                    avatarPreviews.big.src = URL.createObjectURL(files[0]);
+                }
+            };
+            input.click();
+        });
+    });
+</script>
+
+<div class="settings-component">
+    <div class="settings-section-block">
+        <div>
+            <div id="avatarDragZone" class="avatar-block">
+                <img id="bigAvatarPic" alt="Small avatar preview" class="avatar-preview" src="../../api/avatar?userid=<?= unserialize($_SESSION["userData"])->getId(); ?>">
+                <div id="avatarUploadButton" class="round-button upload-button">
+                    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd"> <path d="m0 0h32v32h-32z"></path> <path d="m13.4972619-.65685425h4c1.1045695 0 2 .8954305 2 2v23.66314045c0 .6440327-.1555097 1.2785431-.4533088 1.8495895l-3.0006899 5.7539905c-.153225.2938175-.5156245.4077902-.8094421.2545652-.1127518-.0587998-.2039066-.1519019-.2603101-.2658713l-3.0612398-6.1855586c-.2729885-.5516022-.4150093-1.1587586-.4150093-1.7742159v-23.29563985c0-1.1045695.8954305-2 2-2z" fill="#ffffff" transform="matrix(.70710678 .70710678 -.70710678 .70710678 16.206305 -6.125481)"></path> </g> </g></svg>
+                </div>
+            </div>
+
+            <p><strong><?= $GLOBALS["locale"]["userPage"]["settings"]["avatar"]["placeholder"] ?></strong></p>
+        </div>
+
+        <div style="margin-top: 20px;">
+            <h2>Персональная информация</h2>
+
+            <div class="settings-row">
+                <label for="email"><?= $GLOBALS["locale"]["userPage"]["settings"]["personalInfomation"]["email"]["placeholder"] ?></label>
+                <input id="email" placeholder="<?= $GLOBALS["locale"]["userPage"]["settings"]["personalInfomation"]["email"]["placeholder"] ?>" name="email" value="<?= $userData["email"] ?>">
+            </div>
+
+            <div class="settings-row">
+                <label for="company"><?= $GLOBALS["locale"]["userPage"]["settings"]["personalInfomation"]["companyName"]["placeholder"] ?></label>
+                <input id="company" placeholder="<?= $GLOBALS["locale"]["userPage"]["settings"]["personalInfomation"]["companyName"]["placeholder"] ?>" name="company" value="<?= $userData["company"] ?>">
+            </div>
+
+        </div>
+
+        <?php if (isset($message) &&
+        $message["type"] == "success") { ?>
+            <p class="message-success"><?= $GLOBALS["locale"]["success"]["settings"]["profileSettings"] ?></p>
+        <? } ?>
+
+        <div class="settings-buttons-block">
+            <button class="small-primary-button"><?= $GLOBALS["locale"]["buttons"]["saveButton"] ?></button>
+            <div class="primary-link-button"><?= $GLOBALS["locale"]["buttons"]["discardButton"] ?></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/www/includes/wtframework/locales.php b/www/includes/wtframework/locales.php
index 4e39cda..8514f82 100644
--- a/www/includes/wtframework/locales.php
+++ b/www/includes/wtframework/locales.php
@@ -3,7 +3,7 @@
 
 if (!in_array($ip, ["localhost", "127.0.0.1"]))
 {
-    $geoDetails = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
+    $geoDetails = json_decode(file_get_contents("http://ip-api.com/json/{$ip}"));
 
     $regionLocales = array(
         "Russian" => array(