Refactored the installation page functionality

This commit is contained in:
Alex Tselegidis 2021-12-10 09:07:10 +01:00
parent 037c3037e6
commit bd412eba8e
4 changed files with 73 additions and 65 deletions

View file

@ -46,7 +46,7 @@ class Installation extends EA_Controller {
return; return;
} }
$this->load->view('pages/instance_installation_page', [ $this->load->view('pages/installation', [
'base_url' => config('base_url') 'base_url' => config('base_url')
]); ]);
} }
@ -54,7 +54,7 @@ class Installation extends EA_Controller {
/** /**
* Installs Easy!Appointments on the server. * Installs Easy!Appointments on the server.
*/ */
public function ajax_install() public function perform()
{ {
try try
{ {

View file

@ -5,15 +5,15 @@
<title>Installation | Easy!Appointments</title> <title>Installation | Easy!Appointments</title>
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.css') ?>">
<link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>"> <link rel="icon" type="image/x-icon" href="<?= asset_url('assets/img/favicon.ico') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.css') ?>"> <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/instance_installation_page.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>"> <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/pages/installation.css') ?>">
</head> </head>
<body> <body>
<div id="loading" class="d-none"> <div id="loading" class="d-none">
<img src="<?= base_url('assets/img/loading.gif') ?>"> <img src="<?= base_url('assets/img/loading.gif') ?>" alt="loading">
</div> </div>
<header> <header>
@ -26,15 +26,15 @@
<div class="welcome"> <div class="welcome">
<h3>Welcome to the Easy!Appointments installation page.</h3> <h3>Welcome to the Easy!Appointments installation page.</h3>
<p> <p>
This page will help you set the main settings of your Easy!Appointments installation. This page will help you set the main settings of your Easy!Appointments installation. You will be able to
You will be able to edit these settings and many more in the backend session of your edit these settings and many more in the backend session of your system. Remember to use the
system. Remember to use the <strong class="text-primary"><?= site_url('backend') ?></strong> <strong class="text-primary"><?= site_url('calendar') ?></strong> URL to connect to the backend section
url to connect to the backend section of Easy!Appointments. of Easy!Appointments.
If you face any problems during the usage of Easy!Appointments you can always check the If you face any problems during the usage of Easy!Appointments you can always check the
<a href="http://easyappointments.org/docs.html">Documentation</a> <a href="https://easyappointments.org/docs.html">Documentation</a> and
and <a href="http://groups.google.com/group/easy-appointments">Support Group</a> for getting help. You <a href="https://groups.google.com/group/easy-appointments">Support Group</a> for getting help. You may also
may also submit new issues on submit new issues on
<a href="https://github.com/alextselegidis/easyappointments/issues">GitHub Issues</a> <a href="https://github.com/alextselegidis/easyappointments/issues">GitHub Issues</a>
in order to help our development process. in order to help our development process.
</p> </p>
@ -105,21 +105,19 @@
<br> <br>
<p> <p>
You will be able to set your business logic in the backend settings page You will be able to set your business logic in the backend settings page after the installation is complete.
after the installation is complete.
<br> <br>
Press the following button to complete the installation process. Press the following button to complete the installation process.
</p> </p>
<br> <br>
<p> <div class="mb-2">
<h3>License</h3> <h3>License</h3>
Easy!Appointments is licensed under the <span class="badge bg-secondary">GPL-3.0 license</span>. Easy!Appointments is licensed under the <span class="badge bg-secondary">GPL-3.0 license</span>. By using the code
By using the code of Easy!Appointments in any way <br> you agree with the terms described in the of Easy!Appointments in any way <br> you agree with the terms described in the following url:
following url: <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">https://www.gnu.org/licenses/gpl-3.0.en.html</a>
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html">https://www.gnu.org/licenses/gpl-3.0.en.html</a> </div>
</p>
<br> <br>
@ -134,20 +132,19 @@
</footer> </footer>
<script> <script>
var GlobalVariables = { const GlobalVariables = {
csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>, csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
baseUrl: <?= json_encode(config('base_url')) ?> baseUrl: <?= json_encode(config('base_url')) ?>
}; };
var EALang = <?= json_encode($this->lang->language) ?>; const EALang = <?= json_encode($this->lang->language) ?>;
</script> </script>
<script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/jquery/jquery.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/@popperjs-core/popper.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script> <script src="<?= asset_url('assets/vendor/bootstrap/bootstrap.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/general_functions.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/general_functions.js') ?>"></script>
<script src="<?= asset_url('assets/js/installation.js') ?>"></script> <script src="<?= asset_url('assets/js/pages/installation.js') ?>"></script>
</body> </body>
</html> </html>

View file

@ -9,20 +9,28 @@
* @since v1.0.0 * @since v1.0.0
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
$(function () { (function () {
'use strict'; const MIN_PASSWORD_LENGTH = 7;
const $install = $('#install');
var MIN_PASSWORD_LENGTH = 7; const $alert = $('.alert');
const $loading = $('#loading');
var $install = $('#install'); const $firstName = $('#first-name');
var $alert = $('.alert'); const $lastName = $('#last-name');
const $email = $('#email');
const $phoneNumber = $('#phone-number');
const $username = $('#username');
const $password = $('#password');
const $retypePassword = $('#retype-password');
const $companyName = $('#company-name');
const $companyEmail = $('#company-email');
const $companyLink = $('#company-link');
$(document).ajaxStart(function () { $(document).ajaxStart(function () {
$('#loading').removeClass('d-none'); $loading.removeClass('d-none');
}); });
$(document).ajaxStop(function () { $(document).ajaxStop(function () {
$('#loading').addClass('d-none'); $loading.addClass('d-none');
}); });
/** /**
@ -33,9 +41,9 @@ $(function () {
return; return;
} }
var url = GlobalVariables.baseUrl + '/index.php/installation/ajax_install'; const url = GlobalVariables.baseUrl + '/index.php/installation/perform';
var data = { const data = {
csrfToken: GlobalVariables.csrfToken, csrfToken: GlobalVariables.csrfToken,
admin: getAdminData(), admin: getAdminData(),
company: getCompanyData() company: getCompanyData()
@ -46,14 +54,14 @@ $(function () {
type: 'POST', type: 'POST',
data: data, data: data,
dataType: 'json' dataType: 'json'
}).done(function (response) { }).done(() => {
$alert $alert
.text('Easy!Appointments has been successfully installed!') .text('Easy!Appointments has been successfully installed!')
.addClass('alert-success') .addClass('alert-success')
.prop('hidden', false); .prop('hidden', false);
setTimeout(function () { setTimeout(function () {
window.location.href = GlobalVariables.baseUrl + '/index.php/backend'; window.location.href = GlobalVariables.baseUrl + '/index.php/calendar';
}, 1000); }, 1000);
}); });
}); });
@ -61,18 +69,22 @@ $(function () {
/** /**
* Validates the user input. * Validates the user input.
* *
* Use this before executing the installation procedure. * Use this before executing the installation procedure.
* *
* @return {Boolean} Returns the validation result. * @return {Boolean} Returns the validation result.
*/ */
function validate() { function validate() {
try { try {
const $fields = $('input');
$alert.removeClass('alert-danger').prop('hidden', true); $alert.removeClass('alert-danger').prop('hidden', true);
$('input').removeClass('is-invalid');
$fields.removeClass('is-invalid');
// Check for empty fields. // Check for empty fields.
var missingRequired = false; let missingRequired = false;
$('input').each(function (index, field) {
$fields.each((index, field) => {
if (!$(field).val()) { if (!$(field).val()) {
$(field).addClass('is-invalid'); $(field).addClass('is-invalid');
missingRequired = true; missingRequired = true;
@ -84,26 +96,26 @@ $(function () {
} }
// Validate Passwords // Validate Passwords
if ($('#password').val() !== $('#retype-password').val()) { if ($password.val() !== $retypePassword.val()) {
$('#password').addClass('is-invalid'); $password.addClass('is-invalid');
$('#retype-password').addClass('is-invalid'); $retypePassword.addClass('is-invalid');
throw new Error('Passwords do not match!'); throw new Error('Passwords do not match!');
} }
if ($('#password').val().length < MIN_PASSWORD_LENGTH) { if ($password.val().length < MIN_PASSWORD_LENGTH) {
$('#password').addClass('is-invalid'); $password.addClass('is-invalid');
$('#retype-password').addClass('is-invalid'); $retypePassword.addClass('is-invalid');
throw new Error('The password must be at least ' + MIN_PASSWORD_LENGTH + ' characters long.'); throw new Error(`The password must be at least ${MIN_PASSWORD_LENGTH} characters long.`);
} }
// Validate Email // Validate Email
if (!GeneralFunctions.validateEmail($('#email').val())) { if (!GeneralFunctions.validateEmail($email.val())) {
$('#email').addClass('is-invalid'); $email.addClass('is-invalid');
throw new Error('The email address is invalid!'); throw new Error('The email address is invalid!');
} }
if (!GeneralFunctions.validateEmail($('#company-email').val())) { if (!GeneralFunctions.validateEmail($companyEmail.val())) {
$('#company-email').addClass('is-invalid'); $companyEmail.addClass('is-invalid');
throw new Error('The email address is invalid!'); throw new Error('The email address is invalid!');
} }
@ -122,12 +134,12 @@ $(function () {
*/ */
function getAdminData() { function getAdminData() {
return { return {
first_name: $('#first-name').val(), first_name: $firstName.val(),
last_name: $('#last-name').val(), last_name: $lastName.val(),
email: $('#email').val(), email: $email.val(),
phone_number: $('#phone-number').val(), phone_number: $phoneNumber.val(),
username: $('#username').val(), username: $username.val(),
password: $('#password').val() password: $password.val()
}; };
} }
@ -138,18 +150,17 @@ $(function () {
*/ */
function getCompanyData() { function getCompanyData() {
return { return {
company_name: $('#company-name').val(), company_name: $companyName.val(),
company_email: $('#company-email').val(), company_email: $companyEmail.val(),
company_link: $('#company-link').val() company_link: $companyLink.val()
}; };
} }
// Validate the base URL setting (must not contain any trailing slash). // Validate the base URL setting (must not contain any trailing slash).
if (GlobalVariables.baseUrl.slice(-1) === '/') { if (GlobalVariables.baseUrl.slice(-1) === '/') {
GeneralFunctions.displayMessageBox( GeneralFunctions.displayMessageBox(
'Misconfiguration Detected', 'Invalid Configuration Detected',
'Please remove any trailing ' + 'Please remove any trailing slashes from your "BASE_URL" setting of the root "config.php" file and try again.'
'slashes from your BASE_URL setting of the root config.php file and try again.'
); );
$install.prop('disabled', true).fadeTo('0.4'); $install.prop('disabled', true).fadeTo('0.4');
} }