From 3808185ac94d49dee9c08d9fdf46c5860dbdc4e2 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Tue, 23 Nov 2021 10:06:13 +0100
Subject: [PATCH] Replaced the use of the "hidden" class with the "hidden"
 attribute

---
 .../settings/client_form/client_form_page.php | 28 ++++++-------
 ..._calendar_working_plan_exceptions_modal.js |  6 +--
 assets/js/backend_settings_client_form.js     | 40 ++++++++++++-------
 .../js/backend_settings_client_form_helper.js |  2 +-
 assets/js/installation.js                     |  6 +--
 5 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/application/views/pages/settings/client_form/client_form_page.php b/application/views/pages/settings/client_form/client_form_page.php
index 2b999cbf..8664912a 100755
--- a/application/views/pages/settings/client_form/client_form_page.php
+++ b/application/views/pages/settings/client_form/client_form_page.php
@@ -57,12 +57,12 @@
                 <div class="wrapper row">
                     <div class="col-12 col-sm-3">
                         <div class="mb-3">
-                            <label for="show-phone-number">
+                            <label class="form-label" for="show-phone-number">
                                 <?= lang('phone_number') ?>
                             </label>
                             <button id="show-phone-number" data-field="show_phone_number" type="button"
                                     class="hide-toggle form-control form-sub-button">
-                                <span class="hide-toggle-visible hidden">
+                                <span class="hide-toggle-visible" hidden>
                                     <img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
                                     <?= lang('visible') ?>
                                 </span>
@@ -73,12 +73,12 @@
                             </button>
                         </div>
                         <div class="mb-3">
-                            <label for="show-address">
+                            <label class="form-label" for="show-address">
                                 <?= lang('address') ?>
                             </label>
                             <button id="show-address" data-field="show_address" type="button"
                                     class="hide-toggle form-control form-sub-button">
-                                <span class="hide-toggle-visible hidden">
+                                <span class="hide-toggle-visible" hidden>
                                     <img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
                                     <?= lang('visible') ?>
                                 </span>
@@ -89,12 +89,12 @@
                             </button>
                         </div>
                         <div class="mb-3">
-                            <label for="show-city">
+                            <label class="form-label" for="show-city">
                                 <?= lang('city') ?>
                             </label>
                             <button id="show-city" data-field="show_city" type="button"
                                     class="hide-toggle form-control form-sub-button">
-                                <span class="hide-toggle-visible hidden">
+                                <span class="hide-toggle-visible" hidden>
                                     <img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
                                     <?= lang('visible') ?>
                                 </span>
@@ -105,12 +105,12 @@
                             </button>
                         </div>
                         <div class="mb-3">
-                            <label for="show-zip-code">
+                            <label class="form-label" for="show-zip-code">
                                 <?= lang('zip_code') ?>
                             </label>
                             <button id="show-zip-code" data-field="show_zip_code" type="button"
                                     class="hide-toggle form-control form-sub-button">
-                                <span class="hide-toggle-visible hidden">
+                                <span class="hide-toggle-visible" hidden>
                                     <img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
                                     <?= lang('visible') ?>
                                 </span>
@@ -121,12 +121,12 @@
                             </button>
                         </div>
                         <div class="mb-3">
-                            <label for="show-notes">
+                            <label class="form-label" for="show-notes">
                                 <?= lang('notes') ?>
                             </label>
                             <button id="show-notes" data-field="show_notes" type="button"
                                     class="hide-toggle form-control form-sub-button">
-                                <span class="hide-toggle-visible hidden">
+                                <span class="hide-toggle-visible" hidden>
                                     <img src="<?= base_url('assets/img/eye.svg') ?>" alt="eye"/>
                                     <?= lang('visible') ?>
                                 </span>
@@ -142,7 +142,7 @@
                         <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="customer-notifications">
-                                <label class="custom-form-label" for="customer-notifications">
+                                <label class="form-label" class="custom-form-label" for="customer-notifications">
                                     <?= lang('customer_notifications') ?>
                                 </label>
                             </div>
@@ -153,7 +153,7 @@
                         <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="require-captcha">
-                                <label class="custom-form-label" for="require-captcha">
+                                <label class="form-label" class="custom-form-label" for="require-captcha">
                                     CAPTCHA
                                 </label>
                             </div>
@@ -164,7 +164,7 @@
                         <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="require-phone-number">
-                                <label class="custom-form-label" for="require-phone-number">
+                                <label class="form-label" class="custom-form-label" for="require-phone-number">
                                     <?= lang('phone_number') ?>
                                 </label>
                             </div>
@@ -175,7 +175,7 @@
                         <div class="mb-3">
                             <div class="custom-control custom-switch">
                                 <input type="checkbox" class="custom-control-input" id="display-any-provider">
-                                <label class="custom-form-label" for="display-any-provider">
+                                <label class="form-label" class="custom-form-label" for="display-any-provider">
                                     <?= lang('any_provider') ?>
                                 </label>
                             </div>
diff --git a/assets/js/backend_calendar_working_plan_exceptions_modal.js b/assets/js/backend_calendar_working_plan_exceptions_modal.js
index a5dbbdbb..233737be 100644
--- a/assets/js/backend_calendar_working_plan_exceptions_modal.js
+++ b/assets/js/backend_calendar_working_plan_exceptions_modal.js
@@ -28,7 +28,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
          * Stores the working plan exception changes or inserts a new record.
          */
         $('#manage-working-plan-exceptions #save-working-plan-exception').on('click', function () {
-            $('#manage-working-plan-exceptions .modal-message').addClass('hidden');
+            $('#manage-working-plan-exceptions .modal-message').prop('hidden', true);
 
             $('#manage-working-plan-exceptions').find('.has-error').removeClass('has-error');
 
@@ -58,7 +58,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
                 $('#manage-working-plan-exceptions .modal-message')
                     .text(EALang.start_date_before_end_error)
                     .addClass('alert-danger')
-                    .removeClass('hidden');
+                    .prop('hidden', false);
 
                 $('#working-plan-exception-start').addClass('has-error');
                 $('#working-plan-exception-end').addClass('has-error');
@@ -76,7 +76,7 @@ window.BackendCalendarWorkingPlanExceptionsModal = window.BackendCalendarWorking
                 Backend.displayNotification(EALang.working_plan_exception_saved);
 
                 // Close the modal modal and update the local provider.
-                $('#manage-working-plan-exceptions .modal-message').addClass('hidden');
+                $('#manage-working-plan-exceptions .modal-message').prop('hidden', true);
                 $('#manage-working-plan-exceptions').modal('hide');
 
                 var providerId = $('#working-plan-exception-provider').val();
diff --git a/assets/js/backend_settings_client_form.js b/assets/js/backend_settings_client_form.js
index a519fe94..42966209 100644
--- a/assets/js/backend_settings_client_form.js
+++ b/assets/js/backend_settings_client_form.js
@@ -99,33 +99,45 @@ window.BackendSettingsClientForm = window.BackendSettingsClientForm || {};
          * Change the state of the Visible/Hidden button
          */
         $('.hide-toggle').on('click', function () {
-            var $input = $(this);
-            $input.find('span').toggleClass('hidden');
+            var $target = $(this);
+            
+            $target.find('span').each(function (index, span) {
+                var $span = $(span); 
+                
+                var isHidden = $span.prop('hidden');
+
+                $span.prop('hidden', !isHidden);
+            });
         });
 
         /**
-         * set a Visible/Hidden toggle button to a certain state
-         *
-         * @argument $element for which jquery element to set the state for
-         * @argument isVisible a boolean which is true if the button should display 'visible' and false when the button should display 'hidden'
+         * Set a Visible/Hidden toggle button to a certain state. 
          *
+         * @param {jQuery} $target Target element selector. 
+         * @param {Boolean} isVisible a boolean which is true if the button should display 'visible' and false when the button should display 'hidden'
          */
-        function setShowToggleValue($element, isVisible) {
-            if (getShowToggleValue($element) !== isVisible) {
-                $element.find('span').toggleClass('hidden');
+        function setShowToggleValue($target, isVisible) {
+            if (getShowToggleValue($target) !== isVisible) {
+                $target.find('span').each(function (index, span) {
+                    var $span = $(span);
+
+                    var isHidden = $span.prop('hidden');
+
+                    $span.prop('hidden', !isHidden);
+                });
             }
         }
 
         /**
-         * get the Visible/Hidden toggle button
+         * Get the Visible/Hidden toggle button
          *
-         * @argument $element for which jquery element to set the state for
+         * @param {jQuery} $target Target element selector. 
          *
          * @return the state of the button. True for visible, false for hidden.
          */
-        function getShowToggleValue($element) {
-            var visiblePartArray = $element.find('.hide-toggle-visible');
-            return !visiblePartArray.hasClass('hidden');
+        function getShowToggleValue($target) {
+            var visiblePartArray = $target.find('.hide-toggle-visible');
+            return !visiblePartArray.prop('hidden');
         }
 
         /**
diff --git a/assets/js/backend_settings_client_form_helper.js b/assets/js/backend_settings_client_form_helper.js
index bc59f3de..b07a9e24 100644
--- a/assets/js/backend_settings_client_form_helper.js
+++ b/assets/js/backend_settings_client_form_helper.js
@@ -57,7 +57,7 @@
         var visiblePartArray = $element.find('.hide-toggle-visible');
         var invisiblePartArray = $element.find('.hide-toggle-hidden');
         if (!(visiblePartArray.length === 0 || invisiblePartArray.length === 0)) {
-            if (visiblePartArray.hasClass('hidden')) {
+            if (visiblePartArray.prop('hidden')) {
                 //our button is currently invisible
                 return '0'; //invisible
             } else {
diff --git a/assets/js/installation.js b/assets/js/installation.js
index 4488b75e..2dfb0a5d 100644
--- a/assets/js/installation.js
+++ b/assets/js/installation.js
@@ -50,7 +50,7 @@ $(function () {
             $alert
                 .text('Easy!Appointments has been successfully installed!')
                 .addClass('alert-success')
-                .removeClass('hidden');
+                .prop('hidden', false);
 
             setTimeout(function () {
                 window.location.href = GlobalVariables.baseUrl + '/index.php/backend';
@@ -67,7 +67,7 @@ $(function () {
      */
     function validate() {
         try {
-            $alert.removeClass('alert-danger').addClass('hidden');
+            $alert.removeClass('alert-danger').prop('hidden', true);
             $('input').closest('.form-group').removeClass('has-error');
 
             // Check for empty fields.
@@ -109,7 +109,7 @@ $(function () {
 
             return true;
         } catch (error) {
-            $alert.addClass('alert-danger').text(error.message).removeClass('hidden');
+            $alert.addClass('alert-danger').text(error.message).prop('hidden', false);
 
             return false;
         }