Add Chevron to show top client collapse

agent/includes/inc_client_top_head.php

@@ -1,9 +1,19 @@
 <?php $show_add_credit = 0; // Remove once credits is added hides the button ?>
+<?php
+    /*
+     * #clientHeader starts open on the client overview and closed everywhere else.
+     * The flag is worked out once because the disclosure chevron needs it too:
+     * Bootstrap only writes aria-expanded onto a data-api trigger after the first
+     * click, so without seeding it here the chevron points the wrong way until
+     * something is clicked.
+     */
+    $client_header_open = basename($_SERVER["PHP_SELF"]) == "client_overview.php";
+?>
 
 <div class="card mb-3 d-print-none">
     <div class="card-header pb-1 pt-2 px-3">
         <div class="card-title">
-            <a href="#" data-bs-toggle="collapse" data-bs-target="#clientHeader"><h4 class="text-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Client ID: <?= $client_id ?>"><strong><?= $client_name ?></strong> <?php if ($client_archived_at) { echo "(archived)"; } ?></h4></a>
+            <a href="#" class="client-header-toggle<?= $client_header_open ? '' : ' collapsed' ?>" data-bs-toggle="collapse" data-bs-target="#clientHeader" aria-controls="clientHeader" aria-expanded="<?= $client_header_open ? 'true' : 'false' ?>"><h4 class="text-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Client ID: <?= $client_id ?>"><i class="fas fa-fw fa-chevron-right client-header-chevron" aria-hidden="true"></i><strong><?= $client_name ?></strong> <?php if ($client_archived_at) { echo "(archived)"; } ?></h4></a>
         </div>
         <?php if (!empty($client_tag_name_display_array)) { ?><div class="card-title ms-2"><?= $client_tags_display ?></div> <?php } ?>
         <?php if (lookupUserPermission("module_client") >= 2) { ?>
@@ -64,7 +74,7 @@
     </div>
 </div>
 
-<div class="collapse <?php if (basename($_SERVER["PHP_SELF"]) == "client_overview.php") { echo "show"; } ?>" id="clientHeader">
+<div class="collapse<?= $client_header_open ? ' show' : '' ?>" id="clientHeader">
 
     <div class="card-group mb-3">
         <div class="card card-body px-3 py-2">

css/itflow_custom.css

@@ -1532,3 +1532,26 @@ html {
     max-width: 100%;
 }
 
+
+/* Client header disclosure - agent/includes/inc_client_top_head.php
+
+   The client name is the collapse trigger for #clientHeader, but links carry no
+   underline in this app and the h4 is text-dark, so nothing said the heading was
+   clickable or that a panel was folded behind it. Bootstrap maintains
+   aria-expanded on the trigger itself, so the chevron reads the real state
+   rather than a second copy of it kept somewhere in JS. */
+.client-header-chevron {
+    font-size: .7em;
+    margin-right: .25rem;
+    vertical-align: middle;
+    color: var(--bs-secondary-color);
+    transition: transform .15s ease-in-out;
+}
+
+.client-header-toggle:hover .client-header-chevron {
+    color: var(--bs-body-color);
+}
+
+.client-header-toggle[aria-expanded="true"] .client-header-chevron {
+    transform: rotate(90deg);
+}

js/app.js

@@ -588,23 +588,49 @@ function itflowInit() {
         }
     });
 
-    // Password reveal. Replaces Show-Hide-Passwords-Bootstrap-4, which has no
+    // Password reveal. Replaces Show-Hide-Passwords-Bootstrap-4, which has no Bootstrap 5
-    // Bootstrap 5 release. Same data-toggle="password" contract as before.
+    // release. The data-toggle="password" contract stays on the INPUT, which is where all
-    document.querySelectorAll('[data-toggle="password"]').forEach(function (btn) {
+    // 15 call sites write it and where the old plugin expected it - but the plugin built
-        btn.addEventListener('click', function () {
+    // its own toggle button, and the click has to land on the eye SPAN beside the field.
-            var group = btn.closest('.input-group');
+    // Binding it to the input instead meant the eye did nothing at all, and clicking into
-            var input = group && group.querySelector('input');
+    // the field to type your password switched it to type="text" while you typed it.
-            if (!input) {
+    itflowStep('password-reveal', function () {
+        document.querySelectorAll('input[data-toggle="password"]').forEach(function (input) {
+            var group = input.closest('.input-group');
+            var icon = group && group.querySelector('.fa-eye, .fa-eye-slash');
+            var toggle = icon && icon.closest('span, button, a');
+
+            // includes/modal_footer.php re-executes this file on every ajax modal open, so
+            // without a marker anything already on the page collects a second handler and
+            // the next click toggles twice, which looks exactly like nothing happening.
+            if (!toggle || toggle.dataset.itflowPasswordToggle) {
                 return;
             }
+            toggle.dataset.itflowPasswordToggle = '1';
+
+            // The eye is a plain <span>, so it needs the role to get a pointer cursor and
+            // the tabindex to be reachable at all without a mouse.
+            toggle.setAttribute('role', 'button');
+            toggle.setAttribute('tabindex', '0');
+            toggle.setAttribute('aria-pressed', 'false');
+            toggle.setAttribute('aria-label', 'Show password');
+
+            function toggleReveal() {
                 var hidden = input.type === 'password';
                 input.type = hidden ? 'text' : 'password';
-            var icon = btn.querySelector('i');
-            if (icon) {
                 icon.classList.toggle('fa-eye', !hidden);
                 icon.classList.toggle('fa-eye-slash', hidden);
+                toggle.setAttribute('aria-pressed', hidden ? 'true' : 'false');
+                toggle.setAttribute('aria-label', hidden ? 'Hide password' : 'Show password');
             }
-            btn.setAttribute('aria-pressed', hidden ? 'true' : 'false');
+
+            toggle.addEventListener('click', toggleReveal);
+            toggle.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggleReveal();
+                }
+            });
         });
     });