Add user configuration management and localization features

.editorconfig

@@ -16,3 +16,62 @@ indent_size = 2
 
 [docker-compose.yml]
 indent_size = 2
+[*]
+cpp_indent_braces=false
+cpp_indent_multi_line_relative_to=innermost_parenthesis
+cpp_indent_within_parentheses=indent
+cpp_indent_preserve_within_parentheses=false
+cpp_indent_case_labels=false
+cpp_indent_case_contents=true
+cpp_indent_case_contents_when_block=false
+cpp_indent_lambda_braces_when_parameter=true
+cpp_indent_goto_labels=one_left
+cpp_indent_preprocessor=leftmost_column
+cpp_indent_access_specifiers=false
+cpp_indent_namespace_contents=true
+cpp_indent_preserve_comments=false
+cpp_new_line_before_open_brace_namespace=ignore
+cpp_new_line_before_open_brace_type=ignore
+cpp_new_line_before_open_brace_function=ignore
+cpp_new_line_before_open_brace_block=ignore
+cpp_new_line_before_open_brace_lambda=ignore
+cpp_new_line_scope_braces_on_separate_lines=false
+cpp_new_line_close_brace_same_line_empty_type=false
+cpp_new_line_close_brace_same_line_empty_function=false
+cpp_new_line_before_catch=true
+cpp_new_line_before_else=true
+cpp_new_line_before_while_in_do_while=false
+cpp_space_before_function_open_parenthesis=remove
+cpp_space_within_parameter_list_parentheses=false
+cpp_space_between_empty_parameter_list_parentheses=false
+cpp_space_after_keywords_in_control_flow_statements=true
+cpp_space_within_control_flow_statement_parentheses=false
+cpp_space_before_lambda_open_parenthesis=false
+cpp_space_within_cast_parentheses=false
+cpp_space_after_cast_close_parenthesis=false
+cpp_space_within_expression_parentheses=false
+cpp_space_before_block_open_brace=true
+cpp_space_between_empty_braces=false
+cpp_space_before_initializer_list_open_brace=false
+cpp_space_within_initializer_list_braces=true
+cpp_space_preserve_in_initializer_list=true
+cpp_space_before_open_square_bracket=false
+cpp_space_within_square_brackets=false
+cpp_space_before_empty_square_brackets=false
+cpp_space_between_empty_square_brackets=false
+cpp_space_group_square_brackets=true
+cpp_space_within_lambda_brackets=false
+cpp_space_between_empty_lambda_brackets=false
+cpp_space_before_comma=false
+cpp_space_after_comma=true
+cpp_space_remove_around_member_operators=true
+cpp_space_before_inheritance_colon=true
+cpp_space_before_constructor_colon=true
+cpp_space_remove_before_semicolon=true
+cpp_space_after_semicolon=false
+cpp_space_remove_around_unary_operator=true
+cpp_space_around_binary_operator=insert
+cpp_space_around_assignment_operator=insert
+cpp_space_pointer_reference_alignment=left
+cpp_space_around_ternary_operator=insert
+cpp_wrap_preserve_blocks=one_liners

app/src/app/Controllers/Admin/AccountController.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Controllers\Admin;
+
+use App\Core\Session;
+use App\Core\View;
+use App\Models\User;
+
+class AccountController
+{
+    public function index($queryParams)
+    {
+
+        $user = User::find(Session::get('user')['id']);
+        View::render([
+            'view' => 'Admin/AccountConfig/AccountConfig',
+            'title' => 'Configuración de cuenta',
+            'layout' => 'Admin/AdminLayout',
+            'data' => [
+                'user' => $user
+            ]
+        ]);
+    }
+
+
+    public function update($id, $postData)
+    {
+        $user = User::find(id: $id);
+
+        if (!$user) {
+            Session::set('error', 'Usuario no encontrado');
+            header('Location: /admin/configuration');
+            exit;
+        }
+
+
+        $user->name = $postData['name'];
+        $user->surname = $postData['surname'];
+
+        // detect password changes
+        if (!empty($postData['password'])) {
+            $user->password = password_hash($postData['password'], PASSWORD_DEFAULT);
+        }
+
+
+        $user->save();
+
+
+        Session::set('user', [
+            'id' => $user->getId(),
+            'name' => $user->name,
+            'surname' => $user->surname,
+            'email' => $user->email,
+            'role' => $user->role,
+        ]);
+
+        Session::set('success', 'Usuario y/o contraseña actualizados correctamente');
+        header('Location: /admin/configuration');
+    }
+}

app/src/app/Controllers/Auth/AuthController.php

@@ -52,6 +52,7 @@ public function login($postData)
             'surname' => $user->surname[0],
             'email' => $user->email,
             'role' => $user->role,
+
         ]);
         if ($user->role === 0) {
             header('Location: /customer');

app/src/app/Layouts/Admin/AdminLayout.php

@@ -72,7 +72,7 @@
                             class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
                             role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                             <div class="py-1" role="none">
-                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
+                                <a href="/admin/configuration" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
                                     role="menuitem" tabindex="-1" id="menu-item-0">Configuración de la cuenta</a>
                                 <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
                                     id="menu-item-1">Soporte</a>

app/src/app/Views/Admin/AccountConfig/AccountConfig.php

@@ -0,0 +1,122 @@
+<div class="mt-8">
+    <h1 class="text-5xl font-semibold">Configuración</h1>
+    <p class="text-md text-gray-600 mt-3">Aquí podrás configurar tu cuenta.</p>
+    <article class="mb-10">
+        <h2 class="text-3xl font-semibold col-span-4 mb-5 mt-8">Informacíon personal</h2>
+
+        <form action="/admin/configuration/<?= $user->getId() ?>/update" method="POST" class="grid grid-cols-4 gap-4">
+            <!-- user info -->
+            <div class="flex flex-col justify-between h-full">
+                <div class="flex flex-col gap-4">
+                    <div class="flex flex-col">
+                        <label for="first-name" class="text-sm font-semibold text-gray-700">First Name</label>
+                        <input
+                            type="text"
+                            id="first-name"
+                            class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100"
+                            value="<?= $user->name ?>"
+                            data-original-value="<?= $user->name ?>"
+                            name="name"
+                            oninput="checkChanges()">
+                    </div>
+
+                    <div class="flex flex-col">
+                        <label for="dni" class="text-sm font-semibold text-gray-700">DNI</label>
+                        <input
+                            type="text"
+                            id="dni"
+                            class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100 cursor-not-allowed"
+                            value="<?= $user->dni ?>"
+                            data-original-value="<?= $user->dni ?>"
+                            oninput="checkChanges()"
+                            disabled>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col justify-between h-full">
+                <div class="flex flex-col gap-4">
+                    <div class="flex flex-col">
+                        <label for="surname" class="text-sm font-semibold text-gray-700">Surname</label>
+                        <input
+                            type="text"
+                            id="surname"
+                            class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100"
+                            value="<?= $user->surname ?>"
+                            data-original-value="<?= $user->surname ?>"
+                            name="surname"
+                            oninput="checkChanges()">
+                    </div>
+
+                    <div class="flex flex-col">
+                        <label for="email" class="text-sm font-semibold text-gray-700">Email</label>
+                        <input
+                            type="text"
+                            id="email"
+                            class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100 cursor-not-allowed"
+                            value="<?= $user->email ?>"
+                            data-original-value="<?= $user->email ?>"
+                            oninput="checkChanges()"
+                            disabled>
+                    </div>
+                </div>
+            </div>
+
+            <!-- avatar info -->
+            <div class="flex flex-col justify-between h-full justify-center items-center">
+                <img class="h-20 w-20 rounded-full" src="/assets/images/avatar.png" alt="User Avatar">
+                <div class="flex flex-col items-center mt-3">
+                    <button type="button" class="px-3 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">
+                        Cambiar imagen
+                    </button>
+                    <p class="text-xs text-gray-600 mt-1.5">JPG or PNG. 1MB max.</p>
+                </div>
+            </div>
+
+            <!-- password change info -->
+            <h3 class="text-3xl font-semibold col-span-4 mt-12">Cambiar contraseña</h3>
+            <div class="mt-4 mb-10 grid grid-cols-2 gap-4">
+                <div class="flex flex-col">
+                    <label for="current-password" class="text-sm font-semibold text-gray-700">Contraseña actual</label>
+                    <input
+                        type="password"
+                        id="current-password"
+                        name="current_password"
+                        class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100"
+                        oninput="checkChanges()">
+                </div>
+                <div class="flex flex-col">
+                    <label for="new-password" class="text-sm font-semibold text-gray-700">Nueva contraseña</label>
+                    <input
+                        type="password"
+                        id="new-password"
+                        name="password"
+                        class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100"
+                        oninput="checkChanges()">
+                </div>
+                <div class="flex flex-col">
+                    <label for="confirm-password" class="text-sm font-semibold text-gray-700">Confirmar contraseña</label>
+                    <input
+                        type="password"
+                        id="confirm-password"
+                        name="password_confirmation"
+                        class="mt-1 px-3 py-2 border rounded-md text-gray-600 bg-gray-100"
+                        oninput="checkChanges()">
+                </div>
+            </div>
+
+
+
+            <!-- save button -->
+            <div class="col-span-4 flex justify-end">
+                <button
+                    id="button-save"
+                    type="submit"
+                    class="bg-gray-400 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed disabled:bg-gray-400 disabled:text-white"
+                    disabled>
+                    Guardar cambios
+                </button>
+            </div>
+        </form>
+    </article>
+</div>

app/src/public/assets/js/app.js

@@ -379,3 +379,44 @@ function applySelection() {
     // Cierra el modal
     closeModal();
 }
+
+// func to active the button if detect changes in the form
+function checkChanges() {
+    const inputs = document.querySelectorAll("input");
+    const button = document.getElementById("button-save");
+
+    let changesDetected = false;
+
+    inputs.forEach((input) => {
+        const originalValue = input.getAttribute("data-original-value");
+        if (input.value !== originalValue) {
+            changesDetected = true;
+        }
+    });
+
+    if (changesDetected) {
+        button.disabled = false;
+        button.classList.remove(
+            "bg-gray-400",
+            "cursor-not-allowed",
+            "text-gray-500"
+        );
+        button.classList.add(
+            "bg-green-500",
+            "hover:bg-green-600",
+            "text-white"
+        );
+    } else {
+        button.disabled = true;
+        button.classList.add(
+            "bg-gray-400",
+            "cursor-not-allowed",
+            "text-gray-500"
+        );
+        button.classList.remove(
+            "bg-green-500",
+            "hover:bg-green-600",
+            "text-white"
+        );
+    }
+}

app/src/routes/admin.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Controllers\Admin\AccountController;
 use App\Controllers\Admin\ContractController;
 use App\Controllers\Admin\DashboardController;
 use App\Controllers\Admin\ElementController;
@@ -26,6 +27,11 @@
             'method' => 'index',
             'middlewares' => [AdminMiddleware::class],
         ],
+        '/admin/configuration' => [
+            'controller' => AccountController::class,
+            'method' => 'index',
+            'middlewares' => [AdminMiddleware::class],
+        ],
         // === Users GET Routes
         '/admin/users' => [
             'controller' => UserController::class,
@@ -296,5 +302,13 @@
             'method' => 'update',
             'middlewares' => [AdminMiddleware::class],
         ],
+
+        // === Config POST Routes
+
+        '/admin/configuration/:id/update' => [
+            'controller' => AccountController::class,
+            'method' => 'update',
+            'middlewares' => [AdminMiddleware::class],
+        ],
     ],
 ];