From 9dbc7ae000aa896bcb379390b15d07b8384c8a3b Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Wed, 30 Sep 2020 14:32:42 +0300
Subject: [PATCH] Updated the styling of the required fields

---
 application/views/appointments/book.php |   6 +-
 application/views/backend/calendar.php  |  16 +-
 application/views/backend/customers.php |  47 +++--
 application/views/backend/header.php    |   2 +-
 application/views/backend/services.php  |  93 ++++++----
 application/views/backend/settings.php  |   2 +-
 application/views/backend/users.php     | 227 ++++++++++++++++++------
 7 files changed, 291 insertions(+), 102 deletions(-)

diff --git a/application/views/appointments/book.php b/application/views/appointments/book.php
index e70164ae..fcc572ee 100755
--- a/application/views/appointments/book.php
+++ b/application/views/appointments/book.php
@@ -219,7 +219,7 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-back-2" class="btn button-back btn-secondary"
+                    <button type="button" id="button-back-2" class="btn button-back btn-outline-secondary"
                             data-step_index="2">
                         <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
@@ -330,7 +330,7 @@
                 <?php endif ?>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-back-3" class="btn button-back btn-secondary"
+                    <button type="button" id="button-back-3" class="btn button-back btn-outline-secondary"
                             data-step_index="3">
                         <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
@@ -368,7 +368,7 @@
                 </div>
 
                 <div class="command-buttons">
-                    <button type="button" id="button-back-4" class="btn button-back btn-secondary"
+                    <button type="button" id="button-back-4" class="btn button-back btn-outline-secondary"
                             data-step_index="4">
                         <i class="fas fa-chevron-left mr-2"></i>
                         <?= lang('back') ?>
diff --git a/application/views/backend/calendar.php b/application/views/backend/calendar.php
index 8c786509..e63e78c8 100755
--- a/application/views/backend/calendar.php
+++ b/application/views/backend/calendar.php
@@ -362,7 +362,7 @@
             </div>
 
             <div class="modal-footer">
-                <button id="cancel-appointment" class="btn btn-outline-secondary" data-dismiss="modal">
+                <button class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban"></i>
                     <?= lang('cancel') ?>
                 </button>
@@ -443,7 +443,7 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button id="cancel-unavailable" class="btn btn-outline-secondary" data-dismiss="modal">
+                <button class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban"></i>
                     <?= lang('cancel') ?>
                 </button>
@@ -479,6 +479,14 @@
                             <select id="custom-availability-period-provider" class="form-control"></select>
                         </div>
 
+                        <div class="form-group">
+                            <label for="custom-availability-period-date" class="control-label">
+                                <?= lang('date') ?>
+                                <span class="text-danger">*</span>
+                            </label>
+                            <input id="custom-availability-period-date" class="form-control">
+                        </div>
+
                         <div class="form-group">
                             <label for="custom-availability-period-start" class="control-label">
                                 <?= lang('start') ?>
@@ -519,7 +527,7 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button id="cancel-custom-availability-period" class="btn btn-outline-secondar" data-dismiss="modal">
+                <button class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban mr-2"></i>
                     <?= lang('cancel') ?>
                 </button>
@@ -550,7 +558,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button id="close-calendar" class="btn btn-outline-secondary" data-dismiss="modal">
+                <button class="btn btn-outline-secondary" data-dismiss="modal">
                     <i class="fas fa-ban mr-2"></i>
                     <?= lang('cancel') ?>
                 </button>
diff --git a/application/views/backend/customers.php b/application/views/backend/customers.php
index 1d65f1ea..c5996eab 100755
--- a/application/views/backend/customers.php
+++ b/application/views/backend/customers.php
@@ -96,54 +96,79 @@
                     <div id="form-message" class="alert" style="display:none;"></div>
 
                     <div class="form-group">
-                        <label class="control-label" for="first-name"><?= lang('first_name') ?> *</label>
+                        <label class="control-label" for="first-name">
+                            <?= lang('first_name') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="first-name" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="last-name"><?= lang('last_name') ?> *</label>
+                        <label class="control-label" for="last-name">
+                            <?= lang('last_name') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="last-name" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="email"><?= lang('email') ?> *</label>
+                        <label class="control-label" for="email">
+                            <?= lang('email') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="email" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="phone-number"><?= lang('phone_number') ?>
-                            <?= $require_phone_number === '1' ? '*' : ''; ?></label>
+                        <label class="control-label" for="phone-number">
+                            <?= lang('phone_number') ?>
+                            <?= $require_phone_number === '1' ? '<span class="text-danger">*</span>' : ''; ?></label>
                         <input id="phone-number" class="form-control
                             <?= $require_phone_number === '1' ? 'required' : '' ?>">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="address"><?= lang('address') ?></label>
+                        <label class="control-label" for="address">
+                            <?= lang('address') ?>
+                        </label>
                         <input id="address" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="city"><?= lang('city') ?></label>
+                        <label class="control-label" for="city">
+                            <?= lang('city') ?>
+
+                        </label>
                         <input id="city" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="zip-code"><?= lang('zip_code') ?></label>
+                        <label class="control-label" for="zip-code">
+                            <?= lang('zip_code') ?>
+                        </label>
                         <input id="zip-code" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label for="language"><?= lang('language') ?></label>
+                        <label for="language">
+                            <?= lang('language') ?>
+
+                        </label>
                         <select id="language" class="form-control"></select>
                     </div>
 
                     <div class="form-group">
-                        <label for="timezone"><?= lang('timezone') ?></label>
+                        <label for="timezone">
+                            <?= lang('timezone') ?>
+                        </label>
                         <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
                     </div>
 
                     <div class="form-group">
-                        <label class="control-label" for="notes"><?= lang('notes') ?></label>
+                        <label class="control-label" for="notes">
+                            <?= lang('notes') ?>
+
+                        </label>
                         <textarea id="notes" rows="4" class="form-control"></textarea>
                     </div>
                 </div>
diff --git a/application/views/backend/header.php b/application/views/backend/header.php
index d93ee708..1218b818 100755
--- a/application/views/backend/header.php
+++ b/application/views/backend/header.php
@@ -4,7 +4,7 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-	<title>Backend | Easy!Appointments</title>
+	<title><?= isset($page_title) ? $page_title : lang('backend_section') ?> | Easy!Appointments</title>
 
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/bootstrap/css/bootstrap.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/ext/jquery-ui/jquery-ui.min.css') ?>">
diff --git a/application/views/backend/services.php b/application/views/backend/services.php
index 1ebbd40b..741b30c5 100755
--- a/application/views/backend/services.php
+++ b/application/views/backend/services.php
@@ -49,16 +49,16 @@
                         <div class="input-group">
                             <input type="text" class="key form-control">
 
-                            <span class="input-group-addon">
-                        <div>
-                            <button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
-                                <i class="fas fa-search"></i>
-                            </button>
-                            <button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
-                            <i class="fas fa-redo-alt"></i>
-                            </button>
-                        </div>
-                    </span>
+                            <div class="input-group-addon">
+                                <div>
+                                    <button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
+                                        <i class="fas fa-search"></i>
+                                    </button>
+                                    <button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
+                                    <i class="fas fa-redo-alt"></i>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </form>
 
@@ -102,32 +102,49 @@
                     <input type="hidden" id="service-id">
 
                     <div class="form-group">
-                        <label for="service-name"><?= lang('name') ?> *</label>
+                        <label for="service-name">
+                            <?= lang('name') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="service-name" class="form-control required" maxlength="128">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-duration"><?= lang('duration_minutes') ?> *</label>
+                        <label for="service-duration">
+                            <?= lang('duration_minutes') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="service-duration" class="form-control required" type="number" min="15">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-price"><?= lang('price') ?> *</label>
+                        <label for="service-price">
+                            <?= lang('price') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="service-price" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-currency"><?= lang('currency') ?></label>
+                        <label for="service-currency">
+                            <?= lang('currency') ?>
+
+                        </label>
                         <input id="service-currency" class="form-control" maxlength="32">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-category"><?= lang('category') ?></label>
+                        <label for="service-category">
+                            <?= lang('category') ?>
+                        </label>
                         <select id="service-category" class="form-control"></select>
                     </div>
 
                     <div class="form-group">
-                        <label for="service-availabilities-type"><?= lang('availabilities_type') ?></label>
+                        <label for="service-availabilities-type">
+                            <?= lang('availabilities_type') ?>
+
+                        </label>
                         <select id="service-availabilities-type" class="form-control">
                             <option value="<?= AVAILABILITIES_TYPE_FLEXIBLE ?>">
                                 <?= lang('flexible') ?>
@@ -139,17 +156,25 @@
                     </div>
 
                     <div class="form-group">
-                        <label for="service-attendants-number"><?= lang('attendants_number') ?> *</label>
+                        <label for="service-attendants-number">
+                            <?= lang('attendants_number') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="service-attendants-number" class="form-control required" type="number" min="1">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-location"><?= lang('location') ?></label>
+                        <label for="service-location">
+                            <?= lang('location') ?>
+
+                        </label>
                         <input id="service-location" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label for="service-description"><?= lang('description') ?></label>
+                        <label for="service-description">
+                            <?= lang('description') ?>
+                        </label>
                         <textarea id="service-description" rows="4" class="form-control"></textarea>
                     </div>
                 </div>
@@ -165,16 +190,16 @@
                         <div class="input-group">
                             <input type="text" class="key form-control">
 
-                            <span class="input-group-addon">
-                        <div>
-                            <button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
-                                <i class="fas fa-search"></i>
-                            </button>
-                            <button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
-                                <i class="fas fa-redo-alt"></i>
-                            </button>
-                        </div>
-                    </span>
+                            <div class="input-group-addon">
+                                <div>
+                                    <button class="filter btn btn-outline-secondary" type="submit" title="<?= lang('filter') ?>">
+                                        <i class="fas fa-search"></i>
+                                    </button>
+                                    <button class="clear btn btn-outline-secondary" type="button" title="<?= lang('clear') ?>">
+                                        <i class="fas fa-redo-alt"></i>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </form>
 
@@ -218,12 +243,18 @@
                     <input type="hidden" id="category-id">
 
                     <div class="form-group">
-                        <label for="category-name"><?= lang('name') ?> *</label>
+                        <label for="category-name">
+                            <?= lang('name') ?>
+                            <span class="text-danger">*</span>
+                        </label>
                         <input id="category-name" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="category-description"><?= lang('description') ?></label>
+                        <label for="category-description">
+                            <?= lang('description') ?>
+
+                        </label>
                         <textarea id="category-description" rows="4" class="form-control"></textarea>
                     </div>
                 </div>
diff --git a/application/views/backend/settings.php b/application/views/backend/settings.php
index 7c6ca0fe..56b209c3 100755
--- a/application/views/backend/settings.php
+++ b/application/views/backend/settings.php
@@ -249,7 +249,7 @@
                             </table>
 
                             <div class="text-right">
-                                <button class="btn btn-light" id="apply-global-working-plan" type="button">
+                                <button class="btn btn-outline-secondary" id="apply-global-working-plan" type="button">
                                     <i class="fas fa-check"></i>
                                     <?= lang('apply_to_all_providers') ?>
                                 </button>
diff --git a/application/views/backend/users.php b/application/views/backend/users.php
index ad5b146a..02502604 100755
--- a/application/views/backend/users.php
+++ b/application/views/backend/users.php
@@ -140,76 +140,115 @@
                             <div class="row">
                                 <div class="provider-details col-12 col-md-6">
                                     <div class="form-group">
-                                        <label for="provider-first-name"><?= lang('first_name') ?> *</label>
+                                        <label for="provider-first-name">
+                                            <?= lang('first_name') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input id="provider-first-name" class="form-control required" maxlength="256">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-last-name"><?= lang('last_name') ?> *</label>
+                                        <label for="provider-last-name">
+                                            <?= lang('last_name') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input id="provider-last-name" class="form-control required" maxlength="512">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-email"><?= lang('email') ?> *</label>
+                                        <label for="provider-email">
+                                            <?= lang('email') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input id="provider-email" class="form-control required" max="512">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-phone-number"><?= lang('phone_number') ?> *</label>
+                                        <label for="provider-phone-number">
+                                            <?= lang('phone_number') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input id="provider-phone-number" class="form-control required" max="128">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-mobile-number"><?= lang('mobile_number') ?></label>
+                                        <label for="provider-mobile-number">
+                                            <?= lang('mobile_number') ?>
+
+                                        </label>
                                         <input id="provider-mobile-number" class="form-control" maxlength="128">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-address"><?= lang('address') ?></label>
+                                        <label for="provider-address">
+                                            <?= lang('address') ?>
+                                        </label>
                                         <input id="provider-address" class="form-control" maxlength="256">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-city"><?= lang('city') ?></label>
+                                        <label for="provider-city">
+                                            <?= lang('city') ?>
+
+                                        </label>
                                         <input id="provider-city" class="form-control" maxlength="256">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-state"><?= lang('state') ?></label>
+                                        <label for="provider-state">
+                                            <?= lang('state') ?>
+                                        </label>
                                         <input id="provider-state" class="form-control" maxlength="256">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-zip-code"><?= lang('zip_code') ?></label>
+                                        <label for="provider-zip-code">
+                                            <?= lang('zip_code') ?>
+
+                                        </label>
                                         <input id="provider-zip-code" class="form-control" maxlength="64">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-notes"><?= lang('notes') ?></label>
+                                        <label for="provider-notes">
+                                            <?= lang('notes') ?>
+                                        </label>
                                         <textarea id="provider-notes" class="form-control" rows="3"></textarea>
                                     </div>
                                 </div>
                                 <div class="provider-settings col-12 col-md-6">
                                     <div class="form-group">
-                                        <label for="provider-username"><?= lang('username') ?> *</label>
+                                        <label for="provider-username">
+                                            <?= lang('username') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input id="provider-username" class="form-control required" maxlength="256">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-password"><?= lang('password') ?> *</label>
+                                        <label for="provider-password">
+                                            <?= lang('password') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input type="password" id="provider-password" class="form-control required"
                                                maxlength="512" autocomplete="new-password">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-password-confirm"><?= lang('retype_password') ?> *</label>
+                                        <label for="provider-password-confirm">
+                                            <?= lang('retype_password') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <input type="password" id="provider-password-confirm"
                                                class="form-control required" maxlength="512"
                                                autocomplete="new-password">
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-calendar-view"><?= lang('calendar') ?> *</label>
+                                        <label for="provider-calendar-view">
+                                            <?= lang('calendar') ?>
+                                            <span class="text-danger">*</span>
+                                        </label>
                                         <select id="provider-calendar-view" class="form-control required">
                                             <option value="default">Default</option>
                                             <option value="table">Table</option>
@@ -217,7 +256,10 @@
                                     </div>
 
                                     <div class="form-group">
-                                        <label for="provider-timezone"><?= lang('timezone') ?></label>
+                                        <label for="provider-timezone">
+                                            <?= lang('timezone') ?>
+
+                                        </label>
                                         <?= render_timezone_dropdown('id="provider-timezone" class="form-control"') ?>
                                     </div>
 
@@ -259,9 +301,9 @@
 
                             <h3><?= lang('breaks') ?></h3>
 
-                            <span class="help-block">
-                            <?= lang('add_breaks_during_each_day') ?>
-                        </span>
+                            <p>
+								<?= lang('add_breaks_during_each_day') ?>
+							</p>
 
                             <div>
                                 <button type="button" class="add-break btn btn-primary">
@@ -288,9 +330,9 @@
 
                             <h3><?= lang('custom_availability_periods') ?></h3>
 
-                            <span class="help-block">
-                            <?= lang('add_custom_availability_periods_during_each_day') ?>
-                        </span>
+                            <p>
+								<?= lang('add_custom_availability_periods_during_each_day') ?>
+							</p>
 
                             <div>
                                 <button type="button" class="add-custom-availability-periods btn btn-primary mr-2">
@@ -383,75 +425,114 @@
                     <div class="row">
                         <div class="secretary-details col-12 col-md-6">
                             <div class="form-group">
-                                <label for="secretary-first-name"><?= lang('first_name') ?> *</label>
+                                <label for="secretary-first-name">
+                                    <?= lang('first_name') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="secretary-first-name" class="form-control required" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-last-name"><?= lang('last_name') ?> *</label>
+                                <label for="secretary-last-name">
+                                    <?= lang('last_name') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="secretary-last-name" class="form-control required" maxlength="512">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-email"><?= lang('email') ?> *</label>
+                                <label for="secretary-email">
+                                    <?= lang('email') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="secretary-email" class="form-control required" maxlength="512">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-phone-number"><?= lang('phone_number') ?> *</label>
+                                <label for="secretary-phone-number">
+                                    <?= lang('phone_number') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="secretary-phone-number" class="form-control required" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-mobile-number"><?= lang('mobile_number') ?></label>
+                                <label for="secretary-mobile-number">
+                                    <?= lang('mobile_number') ?>
+
+                                </label>
                                 <input id="secretary-mobile-number" class="form-control" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-address"><?= lang('address') ?></label>
+                                <label for="secretary-address">
+                                    <?= lang('address') ?>
+                                </label>
                                 <input id="secretary-address" class="form-control" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-city"><?= lang('city') ?></label>
+                                <label for="secretary-city">
+                                    <?= lang('city') ?>
+
+                                </label>
                                 <input id="secretary-city" class="form-control" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-state"><?= lang('state') ?></label>
+                                <label for="secretary-state">
+                                    <?= lang('state') ?>
+                                </label>
                                 <input id="secretary-state" class="form-control" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-zip-code"><?= lang('zip_code') ?></label>
+                                <label for="secretary-zip-code">
+                                    <?= lang('zip_code') ?>
+
+                                </label>
                                 <input id="secretary-zip-code" class="form-control" maxlength="64">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-notes"><?= lang('notes') ?></label>
+                                <label for="secretary-notes">
+                                    <?= lang('notes') ?>
+                                </label>
                                 <textarea id="secretary-notes" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="secretary-settings col-12 col-md-6">
                             <div class="form-group">
-                                <label for="secretary-username"><?= lang('username') ?> *</label>
+                                <label for="secretary-username">
+                                    <?= lang('username') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="secretary-username" class="form-control required" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-password"><?= lang('password') ?> *</label>
+                                <label for="secretary-password">
+                                    <?= lang('password') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input type="password" id="secretary-password" class="form-control required"
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-password-confirm"><?= lang('retype_password') ?> *</label>
+                                <label for="secretary-password-confirm">
+                                    <?= lang('retype_password') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input type="password" id="secretary-password-confirm" class="form-control required"
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-calendar-view"><?= lang('calendar') ?> *</label>
+                                <label for="secretary-calendar-view">
+                                    <?= lang('calendar') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <select id="secretary-calendar-view" class="form-control required">
                                     <option value="default">Default</option>
                                     <option value="table">Table</option>
@@ -459,7 +540,10 @@
                             </div>
 
                             <div class="form-group">
-                                <label for="secretary-timezone"><?= lang('timezone') ?></label>
+                                <label for="secretary-timezone">
+                                    <?= lang('timezone') ?>
+
+                                </label>
                                 <?= render_timezone_dropdown('id="secretary-timezone" class="form-control"') ?>
                             </div>
 
@@ -547,75 +631,114 @@
                     <div class="row">
                         <div class="admin-details col-12 col-md-6">
                             <div class="form-group">
-                                <label for="first-name"><?= lang('first_name') ?> *</label>
+                                <label for="first-name">
+                                    <?= lang('first_name') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="admin-first-name" class="form-control required" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-last-name"><?= lang('last_name') ?> *</label>
+                                <label for="admin-last-name">
+                                    <?= lang('last_name') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="admin-last-name" class="form-control required" maxlength="512">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-email"><?= lang('email') ?> *</label>
+                                <label for="admin-email">
+                                    <?= lang('email') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="admin-email" class="form-control required" maxlength="512">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-phone-number"><?= lang('phone_number') ?> *</label>
+                                <label for="admin-phone-number">
+                                    <?= lang('phone_number') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="admin-phone-number" class="form-control required" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-mobile-number"><?= lang('mobile_number') ?></label>
+                                <label for="admin-mobile-number">
+                                    <?= lang('mobile_number') ?>
+
+                                </label>
                                 <input id="admin-mobile-number" class="form-control" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-address"><?= lang('address') ?></label>
+                                <label for="admin-address">
+                                    <?= lang('address') ?>
+                                </label>
                                 <input id="admin-address" class="form-control" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-city"><?= lang('city') ?></label>
+                                <label for="admin-city">
+                                    <?= lang('city') ?>
+
+                                </label>
                                 <input id="admin-city" class="form-control" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-state"><?= lang('state') ?></label>
+                                <label for="admin-state">
+                                    <?= lang('state') ?>
+                                </label>
                                 <input id="admin-state" class="form-control" maxlength="128">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-zip-code"><?= lang('zip_code') ?></label>
+                                <label for="admin-zip-code">
+                                    <?= lang('zip_code') ?>
+
+                                </label>
                                 <input id="admin-zip-code" class="form-control" maxlength="64">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-notes"><?= lang('notes') ?></label>
+                                <label for="admin-notes">
+                                    <?= lang('notes') ?>
+                                </label>
                                 <textarea id="admin-notes" class="form-control" rows="3"></textarea>
                             </div>
                         </div>
                         <div class="admin-settings col-12 col-md-6">
                             <div class="form-group">
-                                <label for="admin-username"><?= lang('username') ?> *</label>
+                                <label for="admin-username">
+                                    <?= lang('username') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input id="admin-username" class="form-control required" maxlength="256">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-password"><?= lang('password') ?> *</label>
+                                <label for="admin-password">
+                                    <?= lang('password') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input type="password" id="admin-password" class="form-control required" maxlength="512"
                                        autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-password-confirm"><?= lang('retype_password') ?> *</label>
+                                <label for="admin-password-confirm">
+                                    <?= lang('retype_password') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <input type="password" id="admin-password-confirm" class="form-control required"
                                        maxlength="512" autocomplete="new-password">
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-calendar-view"><?= lang('calendar') ?> *</label>
+                                <label for="admin-calendar-view">
+                                    <?= lang('calendar') ?>
+                                    <span class="text-danger">*</span>
+                                </label>
                                 <select id="admin-calendar-view" class="form-control required">
                                     <option value="default">Default</option>
                                     <option value="table">Table</option>
@@ -623,7 +746,9 @@
                             </div>
 
                             <div class="form-group">
-                                <label for="admin-timezone"><?= lang('timezone') ?></label>
+                                <label for="admin-timezone">
+                                    <?= lang('timezone') ?>
+                                </label>
                                 <?= render_timezone_dropdown('id="admin-timezone" class="form-control"') ?>
                             </div>