From 254715ddc66f9ef8120a7bef1550473755dbfe3c Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Tue, 4 Jun 2024 14:52:20 -0400
Subject: [PATCH] Rework User client Access Restriction UI for add and edit
 user. Moved from multi Select Box to Individual checkboxs

---
 admin_user_add_modal.php  | 187 ++++++++++++++++-------------
 admin_user_edit_modal.php | 241 ++++++++++++++++++++------------------
 2 files changed, 233 insertions(+), 195 deletions(-)

diff --git a/admin_user_add_modal.php b/admin_user_add_modal.php
index fe41a21f..daeeaf20 100644
--- a/admin_user_add_modal.php
+++ b/admin_user_add_modal.php
@@ -11,107 +11,126 @@
                 <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
                 <div class="modal-body bg-white">
 
-                    <div class="form-group">
-                        <label>Name <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
+                    <ul class="nav nav-pills nav-justified mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="pill" href="#pills-user-details">Details</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-user-access">Access</a>
+                        </li>
+                    </ul>
+
+                    <hr>
+
+                    <div class="tab-content">
+
+                        <div class="tab-pane fade show active" id="pills-user-details">
+
+                            <div class="form-group">
+                                <label>Name <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="name" placeholder="Full Name" required autofocus>
+                                </div>
                             </div>
-                            <input type="text" class="form-control" name="name" placeholder="Full Name" required autofocus>
-                        </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label>Email <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
+                            <div class="form-group">
+                                <label>Email <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
+                                    </div>
+                                    <input type="email" class="form-control" name="email" placeholder="Email Address" required>
+                                </div>
                             </div>
-                            <input type="email" class="form-control" name="email" placeholder="Email Address" required>
-                        </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label>Password <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-lock"></i></span>
+                            <div class="form-group">
+                                <label>Password <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-lock"></i></span>
+                                    </div>
+                                    <input type="password" class="form-control" data-toggle="password" name="password" id="password" placeholder="Enter a Password" autocomplete="new-password" required minlength="8">
+                                    <div class="input-group-append">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-eye"></i></span>
+                                    </div>
+                                    <div class="input-group-append">
+                                        <span class="btn btn-default"><i class="fa fa-fw fa-question" onclick="generatePassword()"></i></span>
+                                    </div>
+                                </div>
                             </div>
-                            <input type="password" class="form-control" data-toggle="password" name="password" id="password" placeholder="Enter a Password" autocomplete="new-password" required minlength="8">
-                            <div class="input-group-append">
-                                <span class="input-group-text"><i class="fa fa-fw fa-eye"></i></span>
+
+                            <div class="form-group">
+                                <label>Role <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="role" required>
+                                        <option value="">- Role -</option>
+                                        <?php
+                                            $sql_user_roles = mysqli_query($mysqli, "SELECT * FROM user_roles WHERE user_role_archived_at IS NULL");
+                                            while ($row = mysqli_fetch_array($sql_user_roles)) {
+                                                $user_role_id = intval($row['user_role_id']);
+                                                $user_role_name = nullable_htmlentities($row['user_role_name']);
+
+                                            ?>
+                                            <option value="<?php echo $user_role_id; ?>"><?php echo $user_role_name; ?></option>
+                                        <?php } ?>
+                                    </select>
+                                </div>
                             </div>
-                            <div class="input-group-append">
-                                <span class="btn btn-default"><i class="fa fa-fw fa-question" onclick="generatePassword()"></i></span>
+
+                            <div class="form-group">
+                                <label>Avatar</label>
+                                <input type="file" class="form-control-file" accept="image/*;capture=camera" name="file">
                             </div>
-                        </div>
-                    </div>
 
-                    <div class="form-group">
-                        <label>Role <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+                            <div class="form-group" <?php if(empty($config_smtp_host)) { echo "hidden"; } ?>>
+                                <div class="custom-control custom-checkbox">
+                                    <input class="custom-control-input" type="checkbox" id="sendEmailCheckBox" name="send_email" value="" checked>
+                                    <label for="sendEmailCheckBox" class="custom-control-label">
+                                        Send user e-mail with login details?
+                                    </label>
+                                </div>
                             </div>
-                            <select class="form-control select2" name="role" required>
-                                <option value="">- Role -</option>
-                                <?php
-                                    $sql_user_roles = mysqli_query($mysqli, "SELECT * FROM user_roles WHERE user_role_archived_at IS NULL");
-                                    while ($row = mysqli_fetch_array($sql_user_roles)) {
-                                        $user_role_id = intval($row['user_role_id']);
-                                        $user_role_name = nullable_htmlentities($row['user_role_name']);
 
-                                    ?>
-                                    <option value="<?php echo $user_role_id; ?>"><?php echo $user_role_name; ?></option>
-                                <?php } ?>
-                            </select>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Restrict Client Access</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-users"></i></span>
+                            <div class="form-group">
+                                <div class="custom-control custom-checkbox">
+                                    <input class="custom-control-input" type="checkbox" id="forceMFACheckBox" name="force_mfa" value=1>
+                                    <label for="forceMFACheckBox" class="custom-control-label">
+                                        Force MFA
+                                    </label>
+                                </div>
                             </div>
-                            <select class="form-control select2" name="clients[]" data-placeholder="Restrict Client Access" multiple>
-                                <?php
 
-                                $sql_client_select = mysqli_query($mysqli, "SELECT * FROM clients WHERE client_archived_at IS NULL ORDER BY client_name ASC");
-                                while ($row = mysqli_fetch_array($sql_client_select)) {
-                                    $client_id = intval($row['client_id']);
-                                    $client_name = nullable_htmlentities($row['client_name']);
-
-                                    ?>
-                                    <option value="<?php echo $client_id; ?>"><?php echo $client_name; ?></option>
-
-                                <?php } ?>
-                            </select>
                         </div>
-                        <small class="text-muted">Leave Blank for Full access to all clients, no affect on users with the admin role.</small>
-                    </div>
 
-                    <div class="form-group">
-                        <label>Avatar</label>
-                        <input type="file" class="form-control-file" accept="image/*;capture=camera" name="file">
-                    </div>
+                        <div class="tab-pane fade" id="pills-user-access">
+                            
+                            <h5>Restrict Client Access</h5>
+                            <small class="text-muted">Leave Blank for Full access to all clients, no affect on users with the admin role.</small>
+
+                            <?php
+
+                            $sql_client_select = mysqli_query($mysqli, "SELECT * FROM clients WHERE client_archived_at IS NULL ORDER BY client_name ASC");
+                            while ($row = mysqli_fetch_array($sql_client_select)) {
+                                $client_id = intval($row['client_id']);
+                                $client_name = nullable_htmlentities($row['client_name']);
+
+                            ?>
+
+                            <div class="form-group form-check">
+                                <input type="checkbox" class="form-check-input" name="clients[]" value="<?php echo $client_id; ?>">
+                                <label class="form-check-label ml-2"><?php echo $client_name; ?></label>
+                            </div>
+
+                            <?php } ?>
 
-                    <div class="form-group" <?php if(empty($config_smtp_host)) { echo "hidden"; } ?>>
-                        <div class="custom-control custom-checkbox">
-                            <input class="custom-control-input" type="checkbox" id="sendEmailCheckBox" name="send_email" value="" checked>
-                            <label for="sendEmailCheckBox" class="custom-control-label">
-                                Send user e-mail with login details?
-                            </label>
                         </div>
-                    </div>
 
-                    <div class="form-group">
-                        <div class="custom-control custom-checkbox">
-                            <input class="custom-control-input" type="checkbox" id="forceMFACheckBox" name="force_mfa" value=1>
-                            <label for="forceMFACheckBox" class="custom-control-label">
-                                Force MFA
-                            </label>
-                        </div>
                     </div>
 
                 </div>
diff --git a/admin_user_edit_modal.php b/admin_user_edit_modal.php
index 188d4974..7115c652 100644
--- a/admin_user_edit_modal.php
+++ b/admin_user_edit_modal.php
@@ -13,127 +13,146 @@
                 <input type="hidden" name="user_id" value="<?php echo $user_id; ?>">
                 <div class="modal-body bg-white">
 
-                    <center class="mb-3">
-                        <?php if (!empty($user_avatar)) { ?>
-                            <img class="img-fluid" src="<?php echo "uploads/users/$user_id/$user_avatar"; ?>">
-                        <?php } else { ?>
-                            <span class="fa-stack fa-4x">
-              <i class="fa fa-circle fa-stack-2x text-secondary"></i>
-              <span class="fa fa-stack-1x text-white"><?php echo $user_initials; ?></span>
-            </span>
-                        <?php } ?>
-                    </center>
+                    <ul class="nav nav-pills nav-justified mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" data-toggle="pill" href="#pills-user-details<?php echo $user_id; ?>">Details</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="pill" href="#pills-user-access<?php echo $user_id; ?>">Access</a>
+                        </li>
+                    </ul>
 
-                    <div class="form-group">
-                        <label>Name <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
-                            </div>
-                            <input type="text" class="form-control" name="name" placeholder="Full Name"
-                                   value="<?php echo $user_name; ?>" required>
-                        </div>
-                    </div>
+                    <hr>
 
-                    <div class="form-group">
-                        <label>Email <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
-                            </div>
-                            <input type="email" class="form-control" name="email" placeholder="Email Address"
-                                   value="<?php echo $user_email; ?>" required>
-                        </div>
-                    </div>
+                    <div class="tab-content">
 
-                    <div class="form-group">
-                        <label>New Password</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-lock"></i></span>
-                            </div>
-                            <input type="password" class="form-control" data-toggle="password" name="new_password"
-                                   placeholder="Leave Blank For No Password Change" autocomplete="new-password">
-                            <div class="input-group-append">
-                                <span class="input-group-text"><i class="fa fa-fw fa-eye"></i></span>
-                            </div>
-                        </div>
-                    </div>
+                        <div class="tab-pane fade show active" id="pills-user-details<?php echo $user_id; ?>">
 
-                    <div class="form-group">
-                        <label>Role <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
-                            </div>
-                            <select class="form-control select2" name="role" required>
-                                <?php
-                                $sql_user_roles = mysqli_query($mysqli, "SELECT * FROM user_roles WHERE user_role_archived_at IS NULL");
-                                while ($row = mysqli_fetch_array($sql_user_roles)) {
-                                    $user_role_id = intval($row['user_role_id']);
-                                    $user_role_name = nullable_htmlentities($row['user_role_name']);
-
-                                    ?>
-                                    <option <?php if ($user_role == $user_role_id) {echo "selected";} ?> value="<?php echo $user_role_id; ?>"><?php echo $user_role_name; ?></option>
+                            <center class="mb-3">
+                                <?php if (!empty($user_avatar)) { ?>
+                                    <img class="img-fluid" src="<?php echo "uploads/users/$user_id/$user_avatar"; ?>">
+                                <?php } else { ?>
+                                    <span class="fa-stack fa-4x">
+                                        <i class="fa fa-circle fa-stack-2x text-secondary"></i>
+                                        <span class="fa fa-stack-1x text-white"><?php echo $user_initials; ?></span>
+                                    </span>
                                 <?php } ?>
+                            </center>
 
-                            </select>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Restrict Client Access</label>
-                        <div class="input-group">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text"><i class="fa fa-fw fa-users"></i></span>
-                            </div>
-                            <select class="form-control select2" name="clients[]" data-placeholder="Restrict Client Access" multiple>
-                                <?php
-
-                                $sql_client_select = mysqli_query($mysqli, "SELECT * FROM clients WHERE client_archived_at IS NULL ORDER BY client_name ASC");
-                                while ($row = mysqli_fetch_array($sql_client_select)) {
-                                    $client_id_select = intval($row['client_id']);
-                                    $client_name_select = nullable_htmlentities($row['client_name']);
-
-                                    ?>
-                                    <option <?php if (in_array($client_id_select, $client_access_array)) { echo "selected"; } ?> value="<?php echo $client_id_select; ?>"><?php echo $client_name_select; ?></option>
-
-                                <?php } ?>
-                            </select>
-                        </div>
-                        <small class="text-muted">Leave Blank for Full access to all clients, no affect on users with the admin role.</small>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Avatar</label>
-                        <input type="file" class="form-control-file" accept="image/*;capture=camera" name="file">
-                    </div>
-
-                    <div class="form-group">
-                        <div class="custom-control custom-checkbox">
-                            <input class="custom-control-input" type="checkbox" id="forceMFACheckBox<?php echo $user_id; ?>" name="force_mfa" value="1" <?php if($user_config_force_mfa == 1){ echo "checked"; } ?>>
-                            <label for="forceMFACheckBox<?php echo $user_id; ?>" class="custom-control-label">
-                                Force MFA
-                            </label>
-                        </div>
-                    </div>
-
-                    <?php if (!empty($user_token)) { ?>
-
-                        <div class="form-group">
-                            <label>2FA</label>
-                            <div class="input-group">
-                                <div class="input-group-prepend">
-                                    <span class="input-group-text"><i class="fa fa-fw fa-id-card"></i></span>
+                            <div class="form-group">
+                                <label>Name <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" name="name" placeholder="Full Name"
+                                           value="<?php echo $user_name; ?>" required>
                                 </div>
-                                <select class="form-control" name="2fa">
-                                    <option value="">Keep enabled</option>
-                                    <option value="disable">Disable</option>
-                                </select>
                             </div>
+
+                            <div class="form-group">
+                                <label>Email <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
+                                    </div>
+                                    <input type="email" class="form-control" name="email" placeholder="Email Address"
+                                           value="<?php echo $user_email; ?>" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label>New Password</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-lock"></i></span>
+                                    </div>
+                                    <input type="password" class="form-control" data-toggle="password" name="new_password"
+                                           placeholder="Leave Blank For No Password Change" autocomplete="new-password">
+                                    <div class="input-group-append">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-eye"></i></span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label>Role <strong class="text-danger">*</strong></label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+                                    </div>
+                                    <select class="form-control select2" name="role" required>
+                                        <?php
+                                        $sql_user_roles = mysqli_query($mysqli, "SELECT * FROM user_roles WHERE user_role_archived_at IS NULL");
+                                        while ($row = mysqli_fetch_array($sql_user_roles)) {
+                                            $user_role_id = intval($row['user_role_id']);
+                                            $user_role_name = nullable_htmlentities($row['user_role_name']);
+
+                                            ?>
+                                            <option <?php if ($user_role == $user_role_id) {echo "selected";} ?> value="<?php echo $user_role_id; ?>"><?php echo $user_role_name; ?></option>
+                                        <?php } ?>
+
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label>Avatar</label>
+                                <input type="file" class="form-control-file" accept="image/*;capture=camera" name="file">
+                            </div>
+
+                            <div class="form-group">
+                                <div class="custom-control custom-checkbox">
+                                    <input class="custom-control-input" type="checkbox" id="forceMFACheckBox<?php echo $user_id; ?>" name="force_mfa" value="1" <?php if($user_config_force_mfa == 1){ echo "checked"; } ?>>
+                                    <label for="forceMFACheckBox<?php echo $user_id; ?>" class="custom-control-label">
+                                        Force MFA
+                                    </label>
+                                </div>
+                            </div>
+
+                            <?php if (!empty($user_token)) { ?>
+
+                                <div class="form-group">
+                                    <label>2FA</label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text"><i class="fa fa-fw fa-id-card"></i></span>
+                                        </div>
+                                        <select class="form-control" name="2fa">
+                                            <option value="">Keep enabled</option>
+                                            <option value="disable">Disable</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                            <?php } ?>
                         </div>
 
-                    <?php } ?>
+                        <div class="tab-pane fade" id="pills-user-access<?php echo $user_id; ?>">
+
+                            <h6>Restrict Client Access To<br><small class="text-muted">Leave Blank for Full access to all clients, no affect on users with the admin role.</small></h6>
+
+                            <hr>
+
+                            <?php
+
+                            $sql_client_select = mysqli_query($mysqli, "SELECT * FROM clients WHERE client_archived_at IS NULL ORDER BY client_name ASC");
+                            while ($row = mysqli_fetch_array($sql_client_select)) {
+                                $client_id_select = intval($row['client_id']);
+                                $client_name_select = nullable_htmlentities($row['client_name']);
+
+                            ?>
+
+                            <div class="form-group form-check">
+                                <input type="checkbox" class="form-check-input" name="clients[]" value="<?php echo $client_id_select; ?>" <?php if (in_array($client_id_select, $client_access_array)) { echo "checked"; } ?>>
+                                <label class="form-check-label ml-2"><?php echo $client_name_select; ?></label>
+                            </div>
+
+                            <?php } ?>
+
+                        </div>
+
+                    </div>
 
                 </div>
                 <div class="modal-footer bg-white">