Refactored the account page functionality and structure

This commit is contained in:
Alex Tselegidis 2021-12-18 18:25:03 +01:00
parent a090b2eba9
commit c53cd000d8
5 changed files with 161 additions and 53 deletions

View file

@ -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'],
'username' => $settings['settings']['username'],
'timezone' => $settings['timezone'],
'user_email' => $account['email'],
'username' => $account['settings']['username'],
'timezone' => $account['timezone'],
]);
response();

View file

@ -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') ?>">

View file

@ -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): ?>
<button type="button" class="save-settings btn btn-primary btn-sm mb-2"
<?php if (can('edit', PRIV_USER_SETTINGS)): ?>
<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">
<label class="custom-form-label" for="user-notifications">
<input type="checkbox" class="custom-control-input" id="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/pages/backend_settings_current_user.js') ?>"></script>
<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>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/http/account_http_client.js') ?>"></script>
<script src="<?= asset_url('assets/js/pages/account.js') ?>"></script>
<?php section('scripts') ?>

View file

@ -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
};
})();

101
assets/js/pages/account.js Normal file
View file

@ -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 {};
})();