Refactored the account page functionality and structure

application/controllers/Account.php

@@ -12,15 +12,15 @@
  * ---------------------------------------------------------------------------- */
 
 /**
- * Account settings controller.
+ * Account controller.
  *
- * Handles current user settings related operations.
+ * Handles current account related operations.
  *
  * @package Controllers
  */
-class Account_settings extends EA_Controller {
+class Account extends EA_Controller {
     /**
-     * Current_user constructor.
+     * Account constructor.
      */
     public function __construct()
     {
@@ -45,27 +45,32 @@ class Account_settings extends EA_Controller {
      */
     public function index()
     {
-        session(['dest_url' => site_url('account_settings')]);
+        session(['dest_url' => site_url('account')]);
 
         if (cannot('view', PRIV_USER_SETTINGS))
         {
-            abort(403,'Forbidden');
+            abort(403, 'Forbidden');
         }
 
         $user_id = session('user_id');
 
         $role_slug = session('role_slug');
 
+        $account = $this->users_model->find($user_id);
+
+        script_vars([
+            'account' => $account,
+        ]);
+
         html_vars([
             'page_title' => lang('settings'),
             'active_menu' => PRIV_SYSTEM_SETTINGS,
             'user_display_name' => $this->accounts->get_user_display_name($user_id),
             'timezones' => $this->timezones->to_array(),
             'privileges' => $this->roles_model->get_permissions_by_slug($role_slug),
-            'user_settings' => $this->users_model->find($user_id),
         ]);
 
-        $this->load->view('pages/account_settings', html_vars());
+        $this->load->view('pages/account', html_vars());
     }
 
     /**
@@ -80,14 +85,14 @@ class Account_settings extends EA_Controller {
                 throw new Exception('You do not have the required permissions for this task.');
             }
 
-            $settings = json_decode(request('settings'), TRUE);
+            $account = request('account');
 
-            $this->users_model->save($settings);
+            $this->users_model->save($account);
 
             session([
-                'user_email' => $settings['email'],
+                'user_email' => $account['email'],
-                'username' => $settings['settings']['username'],
+                'username' => $account['settings']['username'],
-                'timezone' => $settings['timezone'],
+                'timezone' => $account['timezone'],
             ]);
 
             response();

application/views/components/backend_header.php

@@ -101,7 +101,7 @@
                             <?= lang('legal_contents') ?>
                         </a>
                     <?php endif ?>
-                    <a class="dropdown-item" href="<?= site_url('account_settings') ?>">
+                    <a class="dropdown-item" href="<?= site_url('account') ?>">
                         <?= lang('current_user') ?>
                     </a>
                     <a class="dropdown-item" href="<?= site_url('about') ?>">

application/views/pages/account.php

@@ -1,12 +1,3 @@
-<?php
-/**
- * @var array $system_settings
- * @var array $user_settings
- * @var string $timezones
- * @var array $privileges
- */
-?>
-
 <?php extend('layouts/backend_layout') ?>
 
 <?php section('content') ?>
@@ -18,8 +9,8 @@
                 <fieldset class="col-12 col-sm-6 personal-info-wrapper">
                     <legend class="border-bottom mb-4">
                         <?= lang('personal_information') ?>
-                        <?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
+                        <?php if (can('edit', PRIV_USER_SETTINGS)): ?>
-                            <button type="button" class="save-settings btn btn-primary btn-sm mb-2"
+                            <button type="button" id="save-settings" class="btn btn-primary btn-sm mb-2"
                                     data-tippy-content="<?= lang('save') ?>">
                                 <i class="fas fa-check-square me-2"></i>
                                 <?= lang('save') ?>
@@ -150,8 +141,8 @@
                     </div>
 
                     <div class="custom-control custom-switch">
-                        <input type="checkbox" class="custom-control-input" id="user-notifications">
+                        <input type="checkbox" class="custom-control-input" id="notifications">
-                        <label class="custom-form-label" for="user-notifications">
+                        <label class="custom-form-label" for="notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
                     </div>
@@ -165,31 +156,8 @@
 
 <?php section('scripts') ?>
 
-<script src="<?= asset_url('assets/js/pages/backend_settings_current_user_helper.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
-<script src="<?= asset_url('assets/js/pages/backend_settings_current_user.js') ?>"></script>
+<script src="<?= asset_url('assets/js/http/account_http_client.js') ?>"></script>
-<script>
+<script src="<?= asset_url('assets/js/pages/account.js') ?>"></script>
-    var GlobalVariables = {
-        csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
-        baseUrl: <?= json_encode(config('base_url')) ?>,
-        dateFormat: <?= json_encode(setting('date_format')) ?>,
-        timeFormat: <?= json_encode(setting('time_format')) ?>,
-        firstWeekday: <?= json_encode(setting('first_weekday')) ?>,
-        timezones: <?= json_encode($timezones) ?>,
-        settings: {
-            user: <?= json_encode($user_settings) ?>,
-        },
-        user: {
-            id: <?= session('user_id') ?>,
-            email: <?= json_encode(session('user_email')) ?>,
-            timezone: <?= json_encode(session('timezone')) ?>,
-            role_slug: <?= json_encode(session('role_slug')) ?>,
-            privileges: <?= json_encode($privileges) ?>
-        }
-    };
-
-    $(function () {
-        BackendSettingsCurrentUser.initialize(true);
-    });
-</script>
 
 <?php section('scripts') ?>

assets/js/http/account_http_client.js

@@ -0,0 +1,34 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Open Source Web Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.5.0
+ * ---------------------------------------------------------------------------- */
+
+App.Http.Account = (function () {
+    /**
+     * Save account.
+     *
+     * @param {Object} account
+     *
+     * @return {jQuery.Deferred}
+     */
+    function save(account) {
+        const url = App.Utils.Url.siteUrl('account/save');
+
+        const data = {
+            csrf_token: App.Vars.csrf_token,
+            account
+        };
+
+        return $.post(url, data);
+    }
+
+    return {
+        save
+    };
+})();

assets/js/pages/account.js

@@ -0,0 +1,101 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Open Source Web Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.0.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Account
+ *
+ * Contains the functionality of the account page.
+ */
+App.Pages.Account = (function () {
+    const $userId = $('#user-id');
+    const $firstName = $('#first-name');
+    const $lastName = $('#last-name');
+    const $email = $('#email');
+    const $mobileNumber = $('#mobile-number');
+    const $phoneNumber = $('#phone-number');
+    const $address = $('#address');
+    const $city = $('#city');
+    const $state = $('#state');
+    const $zipCode = $('#zip-code');
+    const $notes = $('#notes');
+    const $timezones = $('#timezone');
+    const $username = $('#username');
+    const $password = $('#password');
+    const $retypePassword = $('#retype-password');
+    const $calendarView = $('#calendar-view');
+    const notifications = $('#notifications');
+    const $saveSettings = $('#save-settings');
+
+    function deserialize(account) {
+        $userId.val(account.id);
+        $firstName.val(account.first_name);
+        $lastName.val(account.last_name);
+        $email.val(account.email);
+        $mobileNumber.val(account.mobile_number);
+        $phoneNumber.val(account.phone_number);
+        $address.val(account.address);
+        $city.val(account.city);
+        $state.val(account.state);
+        $zipCode.val(account.zip_code);
+        $notes.val(account.notes);
+        $timezones.val(account.timezone);
+        $username.val(account.settings.username);
+        $password.val('');
+        $retypePassword.val('');
+        $calendarView.val(account.settings.calendar_view);
+        notifications.prop('checked', Boolean(Number(account.settings.notifications)));
+    }
+
+    function serialize() {
+        return {
+            id: $userId.val(),
+            first_name: $firstName.val(),
+            last_name: $lastName.val(),
+            email: $email.val(),
+            mobile_number: $mobileNumber.val(),
+            phone_number: $phoneNumber.val(),
+            address: $address.val(),
+            city: $city.val(),
+            state: $state.val(),
+            zip_code: $zipCode.val(),
+            notes: $notes.val(),
+            timezone: $timezones.val(),
+            settings: {
+                username: $username.val(),
+                password: $password.val(),
+                calendar_view: $calendarView.val(),
+                notifications: Number(notifications.prop('checked'))
+            }
+        };
+    }
+
+    function onSaveSettingsClick() {
+        const account = serialize();
+
+        App.Http.Account.save(account).done(function () {
+            Backend.displayNotification(App.Lang.account_saved);
+        });
+    }
+
+    function init() {
+        const account = App.Vars.account;
+
+        deserialize(account);
+
+        $saveSettings.on('click', onSaveSettingsClick);
+
+        Backend.placeFooterToBottom();
+    }
+
+    document.addEventListener('DOMContentLoaded', init);
+
+    return {};
+})();