From fbb9baec504731945f389edf6719c8c447cfd8a9 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Wed, 19 Jan 2022 09:39:13 +0100
Subject: [PATCH] Change display of read only field (remove border).

---
 application/views/pages/admins.php      | 50 ++++++++++++-------------
 application/views/pages/categories.php  |  6 +--
 application/views/pages/customers.php   | 40 ++++++++++----------
 application/views/pages/providers.php   | 50 ++++++++++++-------------
 application/views/pages/secretaries.php | 50 ++++++++++++-------------
 application/views/pages/services.php    | 26 ++++++-------
 assets/css/layouts/backend_layout.scss  | 10 +++++
 assets/js/pages/admins.js               |  9 +++--
 assets/js/pages/categories.js           |  3 ++
 assets/js/pages/customers.js            |  3 ++
 assets/js/pages/providers.js            |  3 ++
 assets/js/pages/secretaries.js          |  9 +++--
 assets/js/pages/services.js             |  5 ++-
 13 files changed, 144 insertions(+), 120 deletions(-)

diff --git a/application/views/pages/admins.php b/application/views/pages/admins.php
index 3e755350..7a5327fb 100755
--- a/application/views/pages/admins.php
+++ b/application/views/pages/admins.php
@@ -61,33 +61,33 @@
                     <div class="mb-3">
                         <label class="form-label" for="first-name">
                             <?= lang('first_name') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="first-name" class="form-control required" maxlength="256">
+                        <input id="first-name" class="form-control required" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="last-name">
                             <?= lang('last_name') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="last-name" class="form-control required" maxlength="512">
+                        <input id="last-name" class="form-control required" maxlength="512" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="email">
                             <?= lang('email') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="email" class="form-control required" maxlength="512">
+                        <input id="email" class="form-control required" maxlength="512" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="phone-number">
                             <?= lang('phone_number') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="phone-number" class="form-control required" maxlength="128">
+                        <input id="phone-number" class="form-control required" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
@@ -95,14 +95,14 @@
                             <?= lang('mobile_number') ?>
 
                         </label>
-                        <input id="mobile-number" class="form-control" maxlength="128">
+                        <input id="mobile-number" class="form-control" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="address">
                             <?= lang('address') ?>
                         </label>
-                        <input id="address" class="form-control" maxlength="256">
+                        <input id="address" class="form-control" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
@@ -110,63 +110,63 @@
                             <?= lang('city') ?>
 
                         </label>
-                        <input id="city" class="form-control" maxlength="256">
+                        <input id="city" class="form-control" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="state">
                             <?= lang('state') ?>
                         </label>
-                        <input id="state" class="form-control" maxlength="128">
+                        <input id="state" class="form-control" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="zip-code">
                             <?= lang('zip_code') ?>
                         </label>
-                        <input id="zip-code" class="form-control" maxlength="64">
+                        <input id="zip-code" class="form-control" maxlength="64" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="notes">
                             <?= lang('notes') ?>
                         </label>
-                        <textarea id="notes" class="form-control" rows="3"></textarea>
+                        <textarea id="notes" class="form-control" rows="3" disabled></textarea>
                     </div>
                 </div>
                 <div class="settings col-12 col-md-6">
                     <div class="mb-3">
                         <label class="form-label" for="username">
                             <?= lang('username') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="username" class="form-control required" maxlength="256">
+                        <input id="username" class="form-control required" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="password">
                             <?= lang('password') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <input type="password" id="password" class="form-control required" maxlength="512"
-                               autocomplete="new-password">
+                               autocomplete="new-password" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="password-confirm">
                             <?= lang('retype_password') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <input type="password" id="password-confirm" class="form-control required"
-                               maxlength="512" autocomplete="new-password">
+                               maxlength="512" autocomplete="new-password" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="calendar-view">
                             <?= lang('calendar') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <select id="calendar-view" class="form-control required">
+                        <select id="calendar-view" class="form-control required" disabled>
                             <option value="default">Default</option>
                             <option value="table">Table</option>
                         </select>
@@ -175,10 +175,10 @@
                     <div class="mb-3">
                         <label class="form-label" for="timezone">
                             <?= lang('timezone') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <?php component('timezone_dropdown', [
-                            'attributes' => 'id="timezone" class="form-control required"',
+                            'attributes' => 'id="timezone" class="form-control required" disabled',
                             'timezones' => vars('timezones')
                         ]) ?>
                     </div>
@@ -186,7 +186,7 @@
                     <br>
 
                     <div class="form-check form-switch me-4">
-                        <input class="form-check-input" type="checkbox" id="notifications">
+                        <input class="form-check-input" type="checkbox" id="notifications" disabled>
                         <label class="form-check-label" for="notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
diff --git a/application/views/pages/categories.php b/application/views/pages/categories.php
index b66077e8..aa38665f 100755
--- a/application/views/pages/categories.php
+++ b/application/views/pages/categories.php
@@ -59,9 +59,9 @@
             <div class="mb-3">
                 <label class="form-label" for="name">
                     <?= lang('name') ?>
-                    <span class="text-danger">*</span>
+                    <span class="text-danger" hidden>*</span>
                 </label>
-                <input id="name" class="form-control required">
+                <input id="name" class="form-control required" disabled>
             </div>
 
             <div class="mb-3">
@@ -69,7 +69,7 @@
                     <?= lang('description') ?>
 
                 </label>
-                <textarea id="description" rows="4" class="form-control"></textarea>
+                <textarea id="description" rows="4" class="form-control" disabled></textarea>
             </div>
         </div>
     </div>
diff --git a/application/views/pages/customers.php b/application/views/pages/customers.php
index d9ba31d7..e7b381a6 100755
--- a/application/views/pages/customers.php
+++ b/application/views/pages/customers.php
@@ -69,88 +69,88 @@
                         <label for="first-name" class="form-label">
                             <?= lang('first_name') ?>
                             <?php if (vars('require_first_name')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="first-name"
-                               class="<?= vars('require_first_name') ? 'required' : '' ?> form-control" maxlength="100"/>
+                               class="<?= vars('require_first_name') ? 'required' : '' ?> form-control" maxlength="100" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="last-name" class="form-label">
                             <?= lang('last_name') ?>
                             <?php if (vars('require_last_name')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="last-name"
-                               class="<?= vars('require_last_name') ? 'required' : '' ?> form-control" maxlength="120"/>
+                               class="<?= vars('require_last_name') ? 'required' : '' ?> form-control" maxlength="120" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="email" class="form-label">
                             <?= lang('email') ?>
                             <?php if (vars('require_email')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="email"
-                               class="<?= vars('require_email') ? 'required' : '' ?> form-control" maxlength="120"/>
+                               class="<?= vars('require_email') ? 'required' : '' ?> form-control" maxlength="120" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="phone-number" class="form-label">
                             <?= lang('phone_number') ?>
                             <?php if (vars('require_phone_number')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="phone-number" maxlength="60"
-                               class="<?= vars('require_phone_number') ? 'required' : '' ?> form-control"/>
+                               class="<?= vars('require_phone_number') ? 'required' : '' ?> form-control" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="address" class="form-label">
                             <?= lang('address') ?>
                             <?php if (vars('require_address')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="address" class="<?= vars('require_address') ? 'required' : '' ?> form-control"
-                               maxlength="120"/>
+                               maxlength="120" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="city" class="form-label">
                             <?= lang('city') ?>
                             <?php if (vars('require_city')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="city" class="<?= vars('require_city') ? 'required' : '' ?> form-control"
-                               maxlength="120"/>
+                               maxlength="120" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label for="zip-code" class="form-label">
                             <?= lang('zip_code') ?>
                             <?php if (vars('require_zip_code')): ?>
-                                <span class="text-danger">*</span>
+                                <span class="text-danger" hidden>*</span>
                             <?php endif ?>
                         </label>
                         <input type="text" id="zip-code" class="<?= vars('require_zip_code') ? 'required' : '' ?> form-control"
-                               maxlength="120"/>
+                               maxlength="120" disabled/>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="language">
                             <?= lang('language') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <select id="language" class="form-control required">
+                        <select id="language" class="form-control required" disabled>
                             <?php foreach (vars('available_languages') as $available_language): ?>
                                 <option value="<?= $available_language ?>">
-                                    <?= $available_language ?>
+                                    <?= ucfirst($available_language) ?>
                                 </option>
                             <?php endforeach ?>
                         </select>
@@ -159,10 +159,10 @@
                     <div class="mb-3">
                         <label class="form-label" for="timezone">
                             <?= lang('timezone') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <?php component('timezone_dropdown', [
-                            'attributes' => 'id="timezone" class="form-control required"',
+                            'attributes' => 'id="timezone" class="form-control required" disabled',
                             'timezones' => vars('timezones')
                         ]) ?>
                     </div>
@@ -171,7 +171,7 @@
                         <label class="form-label" for="notes">
                             <?= lang('notes') ?>
                         </label>
-                        <textarea id="notes" rows="4" class="form-control"></textarea>
+                        <textarea id="notes" rows="4" class="form-control" disabled></textarea>
                     </div>
                 </div>
 
diff --git a/application/views/pages/providers.php b/application/views/pages/providers.php
index 11cbdafb..6ac43618 100755
--- a/application/views/pages/providers.php
+++ b/application/views/pages/providers.php
@@ -80,33 +80,33 @@
                             <div class="mb-3">
                                 <label class="form-label" for="first-name">
                                     <?= lang('first_name') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <input id="first-name" class="form-control required" maxlength="256">
+                                <input id="first-name" class="form-control required" maxlength="256" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="last-name">
                                     <?= lang('last_name') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <input id="last-name" class="form-control required" maxlength="512">
+                                <input id="last-name" class="form-control required" maxlength="512" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="email">
                                     <?= lang('email') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <input id="email" class="form-control required" max="512">
+                                <input id="email" class="form-control required" max="512" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="phone-number">
                                     <?= lang('phone_number') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <input id="phone-number" class="form-control required" max="128">
+                                <input id="phone-number" class="form-control required" max="128" disabled>
                             </div>
 
                             <div class="mb-3">
@@ -114,14 +114,14 @@
                                     <?= lang('mobile_number') ?>
 
                                 </label>
-                                <input id="mobile-number" class="form-control" maxlength="128">
+                                <input id="mobile-number" class="form-control" maxlength="128" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="address">
                                     <?= lang('address') ?>
                                 </label>
-                                <input id="address" class="form-control" maxlength="256">
+                                <input id="address" class="form-control" maxlength="256" disabled>
                             </div>
 
                             <div class="mb-3">
@@ -129,14 +129,14 @@
                                     <?= lang('city') ?>
 
                                 </label>
-                                <input id="city" class="form-control" maxlength="256">
+                                <input id="city" class="form-control" maxlength="256" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="state">
                                     <?= lang('state') ?>
                                 </label>
-                                <input id="state" class="form-control" maxlength="256">
+                                <input id="state" class="form-control" maxlength="256" disabled>
                             </div>
 
                             <div class="mb-3">
@@ -144,50 +144,50 @@
                                     <?= lang('zip_code') ?>
 
                                 </label>
-                                <input id="zip-code" class="form-control" maxlength="64">
+                                <input id="zip-code" class="form-control" maxlength="64" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="notes">
                                     <?= lang('notes') ?>
                                 </label>
-                                <textarea id="notes" class="form-control" rows="3"></textarea>
+                                <textarea id="notes" class="form-control" rows="3" disabled></textarea>
                             </div>
                         </div>
                         <div class="settings col-12 col-md-6">
                             <div class="mb-3">
                                 <label class="form-label" for="username">
                                     <?= lang('username') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <input id="username" class="form-control required" maxlength="256">
+                                <input id="username" class="form-control required" maxlength="256" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="password">
                                     <?= lang('password') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
                                 <input type="password" id="password" class="form-control required"
-                                       maxlength="512" autocomplete="new-password">
+                                       maxlength="512" autocomplete="new-password" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="password-confirm">
                                     <?= lang('retype_password') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
                                 <input type="password" id="password-confirm"
                                        class="form-control required" maxlength="512"
-                                       autocomplete="new-password">
+                                       autocomplete="new-password" disabled>
                             </div>
 
                             <div class="mb-3">
                                 <label class="form-label" for="calendar-view">
                                     <?= lang('calendar') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
-                                <select id="calendar-view" class="form-control required">
+                                <select id="calendar-view" class="form-control required" disabled>
                                     <option value="default">Default</option>
                                     <option value="table">Table</option>
                                 </select>
@@ -196,10 +196,10 @@
                             <div class="mb-3">
                                 <label class="form-label" for="timezone">
                                     <?= lang('timezone') ?>
-                                    <span class="text-danger">*</span>
+                                    <span class="text-danger" hidden>*</span>
                                 </label>
                                 <?php component('timezone_dropdown', [
-                                    'attributes' => 'id="timezone" class="form-control required"',
+                                    'attributes' => 'id="timezone" class="form-control required" disabled',
                                     'timezones' => vars('timezones')
                                 ]) ?>
                             </div>
@@ -207,7 +207,7 @@
                             <br>
 
                             <div class="form-check form-switch me-4">
-                                <input class="form-check-input" type="checkbox" id="notifications">
+                                <input class="form-check-input" type="checkbox" id="notifications" disabled>
                                 <label class="form-check-label" for="notifications">
                                     <?= lang('receive_notifications') ?>
                                 </label>
diff --git a/application/views/pages/secretaries.php b/application/views/pages/secretaries.php
index 430f40ad..70cf66fe 100755
--- a/application/views/pages/secretaries.php
+++ b/application/views/pages/secretaries.php
@@ -61,33 +61,33 @@
                     <div class="mb-3">
                         <label class="form-label" for="first-name">
                             <?= lang('first_name') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="first-name" class="form-control required" maxlength="256">
+                        <input id="first-name" class="form-control required" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="last-name">
                             <?= lang('last_name') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="last-name" class="form-control required" maxlength="512">
+                        <input id="last-name" class="form-control required" maxlength="512" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="email">
                             <?= lang('email') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="email" class="form-control required" maxlength="512">
+                        <input id="email" class="form-control required" maxlength="512" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="phone-number">
                             <?= lang('phone_number') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="phone-number" class="form-control required" maxlength="128">
+                        <input id="phone-number" class="form-control required" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
@@ -95,77 +95,77 @@
                             <?= lang('mobile_number') ?>
 
                         </label>
-                        <input id="mobile-number" class="form-control" maxlength="128">
+                        <input id="mobile-number" class="form-control" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="address">
                             <?= lang('address') ?>
                         </label>
-                        <input id="address" class="form-control" maxlength="256">
+                        <input id="address" class="form-control" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="city">
                             <?= lang('city') ?>
                         </label>
-                        <input id="city" class="form-control" maxlength="256">
+                        <input id="city" class="form-control" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="state">
                             <?= lang('state') ?>
                         </label>
-                        <input id="state" class="form-control" maxlength="128">
+                        <input id="state" class="form-control" maxlength="128" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="zip-code">
                             <?= lang('zip_code') ?>
                         </label>
-                        <input id="zip-code" class="form-control" maxlength="64">
+                        <input id="zip-code" class="form-control" maxlength="64" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="notes">
                             <?= lang('notes') ?>
                         </label>
-                        <textarea id="notes" class="form-control" rows="3"></textarea>
+                        <textarea id="notes" class="form-control" rows="3" disabled></textarea>
                     </div>
                 </div>
                 <div class="settings col-12 col-md-6">
                     <div class="mb-3">
                         <label class="form-label" for="username">
                             <?= lang('username') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <input id="username" class="form-control required" maxlength="256">
+                        <input id="username" class="form-control required" maxlength="256" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="password">
                             <?= lang('password') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <input type="password" id="password" class="form-control required"
-                               maxlength="512" autocomplete="new-password">
+                               maxlength="512" autocomplete="new-password" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="password-confirm">
                             <?= lang('retype_password') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <input type="password" id="password-confirm" class="form-control required"
-                               maxlength="512" autocomplete="new-password">
+                               maxlength="512" autocomplete="new-password" disabled>
                     </div>
 
                     <div class="mb-3">
                         <label class="form-label" for="calendar-view">
                             <?= lang('calendar') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
-                        <select id="calendar-view" class="form-control required">
+                        <select id="calendar-view" class="form-control required" disabled>
                             <option value="default">Default</option>
                             <option value="table">Table</option>
                         </select>
@@ -174,10 +174,10 @@
                     <div class="mb-3">
                         <label class="form-label" for="timezone">
                             <?= lang('timezone') ?>
-                            <span class="text-danger">*</span>
+                            <span class="text-danger" hidden>*</span>
                         </label>
                         <?php component('timezone_dropdown', [
-                            'attributes' => 'id="timezone" class="form-control required"',
+                            'attributes' => 'id="timezone" class="form-control required" disabled',
                             'timezones' => vars('timezones')
                         ]) ?>
                     </div>
@@ -185,7 +185,7 @@
                     <br>
 
                     <div class="form-check form-switch me-4">
-                        <input class="form-check-input" type="checkbox" id="notifications">
+                        <input class="form-check-input" type="checkbox" id="notifications" disabled>
                         <label class="form-check-label" for="notifications">
                             <?= lang('receive_notifications') ?>
                         </label>
diff --git a/application/views/pages/services.php b/application/views/pages/services.php
index 34eeb3c6..361f594b 100755
--- a/application/views/pages/services.php
+++ b/application/views/pages/services.php
@@ -58,25 +58,25 @@
             <div class="mb-3">
                 <label class="form-label" for="name">
                     <?= lang('name') ?>
-                    <span class="text-danger">*</span>
+                    <span class="text-danger" hidden>*</span>
                 </label>
-                <input id="name" class="form-control required" maxlength="128">
+                <input id="name" class="form-control required" maxlength="128" disabled>
             </div>
 
             <div class="mb-3">
                 <label class="form-label"  for="duration">
                     <?= lang('duration_minutes') ?>
-                    <span class="text-danger">*</span>
+                    <span class="text-danger" hidden>*</span>
                 </label>
-                <input id="duration" class="form-control required" type="number" min="<?= EVENT_MINIMUM_DURATION ?>">
+                <input id="duration" class="form-control required" type="number" min="<?= EVENT_MINIMUM_DURATION ?>" disabled>
             </div>
 
             <div class="mb-3">
                 <label class="form-label"  for="price">
                     <?= lang('price') ?>
-                    <span class="text-danger">*</span>
+                    <span class="text-danger" hidden>*</span>
                 </label>
-                <input id="price" class="form-control required">
+                <input id="price" class="form-control required" disabled>
             </div>
 
             <div class="mb-3">
@@ -84,14 +84,14 @@
                     <?= lang('currency') ?>
 
                 </label>
-                <input id="currency" class="form-control" maxlength="32">
+                <input id="currency" class="form-control" maxlength="32" disabled>
             </div>
 
             <div class="mb-3">
                 <label class="form-label"  for="category">
                     <?= lang('category') ?>
                 </label>
-                <select id="category" class="form-control"></select>
+                <select id="category" class="form-control" disabled></select>
             </div>
 
             <div class="mb-3">
@@ -99,7 +99,7 @@
                     <?= lang('availabilities_type') ?>
 
                 </label>
-                <select id="availabilities-type" class="form-control">
+                <select id="availabilities-type" class="form-control" disabled>
                     <option value="<?= AVAILABILITIES_TYPE_FLEXIBLE ?>">
                         <?= lang('flexible') ?>
                     </option>
@@ -110,9 +110,9 @@
             </div>
 
             <div class="mb-3">
-                <label class="form-label"  for="attendants-number">
+                <label class="form-label" for="attendants-number" disabled>
                     <?= lang('attendants_number') ?>
-                    <span class="text-danger">*</span>
+                    <span class="text-danger" hidden>*</span>
                 </label>
                 <input id="attendants-number" class="form-control required" type="number" min="1">
             </div>
@@ -122,7 +122,7 @@
                     <?= lang('location') ?>
 
                 </label>
-                <input id="location" class="form-control">
+                <input id="location" class="form-control" disabled>
             </div>
             
             <div class="mb-3">
@@ -133,7 +133,7 @@
                 <label class="form-label"  for="description">
                     <?= lang('description') ?>
                 </label>
-                <textarea id="description" rows="4" class="form-control"></textarea>
+                <textarea id="description" rows="4" class="form-control" disabled></textarea>
             </div>
         </div>
     </div>
diff --git a/assets/css/layouts/backend_layout.scss b/assets/css/layouts/backend_layout.scss
index c5fb608e..61fc9f83 100644
--- a/assets/css/layouts/backend_layout.scss
+++ b/assets/css/layouts/backend_layout.scss
@@ -194,6 +194,16 @@ body legend {
     color: #666;
 }
 
+.backend-page .form-control:disabled,
+.backend-page .form-control[readonly] {
+    background-color: #fff;
+    color: #9a9a9a;
+    border-color: #fff;
+    opacity: 1;
+    padding-left: 0;
+    padding-right: 0;
+}
+
 /* BACKEND COMPONENTS
    -------------------------------------------------------------------- */
 
diff --git a/assets/js/pages/admins.js b/assets/js/pages/admins.js
index 8052b804..82656989 100644
--- a/assets/js/pages/admins.js
+++ b/assets/js/pages/admins.js
@@ -123,8 +123,8 @@ App.Pages.Admins = (function () {
             resetForm();
             $admins.find('.add-edit-delete-group').hide();
             $admins.find('.save-cancel-group').show();
-            $admins.find('.record-details').find('input, textarea').prop('disabled', false);
-            $admins.find('.record-details').find('select').prop('disabled', false);
+            $admins.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $admins.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').addClass('required');
             $('#filter-admins button').prop('disabled', true);
             $('#filter-admins .results').css('color', '#AAA');
@@ -136,8 +136,8 @@ App.Pages.Admins = (function () {
         $admins.on('click', '#edit-admin', () => {
             $admins.find('.add-edit-delete-group').hide();
             $admins.find('.save-cancel-group').show();
-            $admins.find('.record-details').find('input, textarea').prop('disabled', false);
-            $admins.find('.record-details').find('select').prop('disabled', false);
+            $admins.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $admins.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').removeClass('required');
             $('#filter-admins button').prop('disabled', true);
             $('#filter-admins .results').css('color', '#AAA');
@@ -316,6 +316,7 @@ App.Pages.Admins = (function () {
         $admins.find('.add-edit-delete-group').show();
         $admins.find('.save-cancel-group').hide();
         $admins.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $admins.find('.record-details .form-label span').prop('hidden', true);
         $admins.find('.record-details #calendar-view').val('default');
         $admins.find('.record-details #timezone').val('UTC');
         $('#edit-admin, #delete-admin').prop('disabled', true);
diff --git a/assets/js/pages/categories.js b/assets/js/pages/categories.js
index 122662f7..fb75fa3e 100644
--- a/assets/js/pages/categories.js
+++ b/assets/js/pages/categories.js
@@ -71,6 +71,7 @@ App.Pages.Categories = (function () {
             $categories.find('.add-edit-delete-group').hide();
             $categories.find('.save-cancel-group').show();
             $categories.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $categories.find('.record-details .form-label span').prop('hidden', false);
             $filterCategories.find('button').prop('disabled', true);
             $filterCategories.find('.results').css('color', '#AAA');
         });
@@ -82,6 +83,7 @@ App.Pages.Categories = (function () {
             $categories.find('.add-edit-delete-group').hide();
             $categories.find('.save-cancel-group').show();
             $categories.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $categories.find('.record-details .form-label span').prop('hidden', false);
             $filterCategories.find('button').prop('disabled', true);
             $filterCategories.find('.results').css('color', '#AAA');
         });
@@ -264,6 +266,7 @@ App.Pages.Categories = (function () {
         $categories.find('.add-edit-delete-group').show();
         $categories.find('.save-cancel-group').hide();
         $categories.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $categories.find('.record-details .form-label span').prop('hidden', true);
         $('#edit-category, #delete-category').prop('disabled', true);
 
         $categories.find('.record-details .is-invalid').removeClass('is-invalid');
diff --git a/assets/js/pages/customers.js b/assets/js/pages/customers.js
index 15b88091..6a9421a0 100644
--- a/assets/js/pages/customers.js
+++ b/assets/js/pages/customers.js
@@ -80,6 +80,7 @@ App.Pages.Customers = (function () {
             $customers.find('#add-edit-delete-group').hide();
             $customers.find('#save-cancel-group').show();
             $customers.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $customers.find('.record-details .form-label span').prop('hidden', false);
             $filterCustomers.find('button').prop('disabled', true);
             $filterCustomers.find('.results').css('color', '#AAA');
         });
@@ -89,6 +90,7 @@ App.Pages.Customers = (function () {
          */
         $customers.on('click', '#edit-customer', () => {
             $customers.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $customers.find('.record-details .form-label span').prop('hidden', false);
             $customers.find('#add-edit-delete-group').hide();
             $customers.find('#save-cancel-group').show();
             $filterCustomers.find('button').prop('disabled', true);
@@ -228,6 +230,7 @@ App.Pages.Customers = (function () {
      */
     function resetForm() {
         $customers.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $customers.find('.record-details .form-label span').prop('hidden', true);
         $customers.find('.record-details #timezone').val('UTC');
 
         $language.val('english');
diff --git a/assets/js/pages/providers.js b/assets/js/pages/providers.js
index f95442a0..b6acf445 100755
--- a/assets/js/pages/providers.js
+++ b/assets/js/pages/providers.js
@@ -87,6 +87,7 @@ App.Pages.Providers = (function () {
             $providers.find('.add-edit-delete-group').hide();
             $providers.find('.save-cancel-group').show();
             $providers.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $providers.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').addClass('required');
             $providers
                 .find(
@@ -110,6 +111,7 @@ App.Pages.Providers = (function () {
             $filterProviders.find('button').prop('disabled', true);
             $filterProviders.find('.results').css('color', '#AAA');
             $providers.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $providers.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').removeClass('required');
             $('#provider-services input:checkbox').prop('disabled', false);
             $providers
@@ -323,6 +325,7 @@ App.Pages.Providers = (function () {
         $providers.find('.save-cancel-group').hide();
         $providers.find('.record-details h3 a').remove();
         $providers.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $providers.find('.record-details .form-label span').prop('hidden', true);
         $providers.find('.record-details #calendar-view').val('default');
         $providers.find('.record-details #timezone').val('UTC');
         $providers.find('.add-break, .add-working-plan-exception, #reset-working-plan').prop('disabled', true);
diff --git a/assets/js/pages/secretaries.js b/assets/js/pages/secretaries.js
index 40a4f6e9..d4928900 100644
--- a/assets/js/pages/secretaries.js
+++ b/assets/js/pages/secretaries.js
@@ -127,8 +127,8 @@ App.Pages.Secretaries = (function () {
 
             $secretaries.find('.add-edit-delete-group').hide();
             $secretaries.find('.save-cancel-group').show();
-            $secretaries.find('.record-details').find('input, textarea').prop('disabled', false);
-            $secretaries.find('.record-details').find('select').prop('disabled', false);
+            $secretaries.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $secretaries.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').addClass('required');
             $('#secretary-providers input:checkbox').prop('disabled', false);
         });
@@ -141,8 +141,8 @@ App.Pages.Secretaries = (function () {
             $filterSecretaries.find('.results').css('color', '#AAA');
             $secretaries.find('.add-edit-delete-group').hide();
             $secretaries.find('.save-cancel-group').show();
-            $secretaries.find('.record-details').find('input, textarea').prop('disabled', false);
-            $secretaries.find('.record-details').find('select').prop('disabled', false);
+            $secretaries.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $secretaries.find('.record-details .form-label span').prop('hidden', false);
             $('#password, #password-confirm').removeClass('required');
             $('#secretary-providers input:checkbox').prop('disabled', false);
         });
@@ -326,6 +326,7 @@ App.Pages.Secretaries = (function () {
         $filterSecretaries.find('button').prop('disabled', false);
         $filterSecretaries.find('.results').css('color', '');
         $secretaries.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $secretaries.find('.record-details .form-label span').prop('hidden', true);
         $secretaries.find('.record-details #calendar-view').val('default');
         $secretaries.find('.record-details #timezone').val('UTC');
         $secretaries.find('.add-edit-delete-group').show();
diff --git a/assets/js/pages/services.js b/assets/js/pages/services.js
index a679f0ac..5e278fd6 100644
--- a/assets/js/pages/services.js
+++ b/assets/js/pages/services.js
@@ -91,6 +91,7 @@ App.Pages.Services = (function () {
             $services.find('.add-edit-delete-group').hide();
             $services.find('.save-cancel-group').show();
             $services.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $services.find('.record-details .form-label span').prop('hidden', false);
             $filterServices.find('button').prop('disabled', true);
             $filterServices.find('.results').css('color', '#AAA');
 
@@ -154,6 +155,7 @@ App.Pages.Services = (function () {
             $services.find('.add-edit-delete-group').hide();
             $services.find('.save-cancel-group').show();
             $services.find('.record-details').find('input, select, textarea').prop('disabled', false);
+            $services.find('.record-details .form-label span').prop('hidden', false);
             $filterServices.find('button').prop('disabled', true);
             $filterServices.find('.results').css('color', '#AAA');
             App.Components.ColorSelection.enable($color);
@@ -258,6 +260,7 @@ App.Pages.Services = (function () {
         $filterServices.find('.results').css('color', '');
 
         $services.find('.record-details').find('input, select, textarea').val('').prop('disabled', true);
+        $services.find('.record-details .form-label span').prop('hidden', true);
         $services.find('.record-details h3 a').remove();
 
         $services.find('.add-edit-delete-group').show();
@@ -397,7 +400,7 @@ App.Pages.Services = (function () {
                 $category.append(new Option(category.name, category.id));
             });
 
-            $category.append(new Option('- ' + lang('no_category') + ' -', '')).val('');
+            $category.append(new Option('', '')).val('');
         });
     }