use title to show why button is disabled

CONTRIBUTING.md

@@ -18,6 +18,7 @@
   `resources/**/*.php` should throw exceptions instead.
 - all pages under `webroot/admin/` must check for `$USER->getFlag(UserFlag::ADMIN)` and call `UnityHTTPD::forbidden()` if not admin.
 - All these conventions should be enforced with `pre-commit` / github CI if possible
+- If an HTML button or `input[type="submit"]` is disabled, it should have a `title` explaining why, or a `<label>` or some other nearby text
 
 ## Development Environment
 

webroot/panel/account.php

@@ -209,11 +209,13 @@
     ";
     echo $CSRFTokenHiddenFormInput;
     if ($SQL->accDeletionRequestExists($USER->uid)) {
-        echo "<input type='submit' value='Request PI Account' disabled />";
         echo "
-            <label style='margin-left: 10px'>
-                You cannot request PI Account while you have requested account deletion.
-            </label>
+            <input
+                type='submit'
+                value='Request PI Account'
+                title='You cannot request PI Account while you have requested account deletion.'
+                disabled
+            />
         ";
     } else {
         if ($SQL->requestExists($USER->uid, UnitySQL::REQUEST_BECOME_PI)) {
@@ -296,39 +298,32 @@
 ";
 
 if ($hasGroups) {
-    echo "<p>You cannot request to delete your account while you are in a PI group.</p>";
+    $request_account_deletion_disabled = "disabled";
+    $request_account_deletion_title = "You cannot request to delete your account while you are in a PI group.";
 } else {
-    if ($SQL->accDeletionRequestExists($USER->uid)) {
-        echo "
-            <p>Your request has been submitted and is currently pending.</p>
-            <form
-                action=''
-                method='POST'
-                onsubmit='
-                    return confirm(
-                        \"Are you sure you want to cancel your request for account deletion?\"
-                    )
-                '
-            >
-                $CSRFTokenHiddenFormInput
-                <input type='hidden' name='form_type' value='cancel_account_deletion_request' />
-                <input type='submit' value='Cancel Account Deletion Request' />
-            </form>
-        ";
-    } else {
-        echo "
-            <form
-                action=''
-                method='POST'
-                onsubmit='return confirm(\"Are you sure you want to request an account deletion?\")'
-            >
-                $CSRFTokenHiddenFormInput
-                <input type='hidden' name='form_type' value='account_deletion_request' />
-                <input type='submit' value='Request Account Deletion' />
-            </form>
-        ";
-    }
+    $request_account_deletion_disabled = "";
+    $request_account_deletion_title = "";
+}
+if ($SQL->accDeletionRequestExists($USER->uid)) {
+    $request_account_deletion_disabled = "disabled";
+    $request_account_deletion_title = "Your request has been submitted and is currently pending.";
 }
+echo "
+    <form
+        action=''
+        method='POST'
+        onsubmit='return confirm(\"Are you sure you want to request an account deletion?\")'
+    >
+        $CSRFTokenHiddenFormInput
+        <input type='hidden' name='form_type' value='account_deletion_request' />
+        <input
+            type='submit'
+            value='Request Account Deletion'
+            title='$request_account_deletion_title'
+            $request_account_deletion_disabled
+        />
+    </form>
+";
 
 ?>
 
@@ -348,9 +343,9 @@
 
     function enableOrDisableSubmitLoginShell() {
         if ($("#loginSelector").val() == ldapLoginShell) {
-            $("#submitLoginShell").prop("disabled", true);
+            $("#submitLoginShell").prop("disabled", true).prop("title", "Login shell is unchanged");
         } else {
-            $("#submitLoginShell").prop("disabled", false);
+            $("#submitLoginShell").prop("disabled", false).prop("title", "");
         }
     }
     $("#loginSelector").change(enableOrDisableSubmitLoginShell);

webroot/panel/groups.php

@@ -218,11 +218,17 @@
 
 <?php
 if ($SQL->accDeletionRequestExists($USER->uid)) {
-    echo "<button type='button' class='plusBtn btnAddPI' disabled><span>&#43;</span></button>";
-    echo "<label>You cannot join a PI while you have requested account deletion.</label>";
+    $join_pi_disabled = "disabled";
+    $join_pi_title = "You cannot join a PI while you have requested account deletion.";
 } else {
-    echo "<button type='button' class='plusBtn btnAddPI'><span>&#43;</span></button>";
+    $join_pi_disabled = "";
+    $join_pi_title = "";
 }
+echo "
+    <button type='button' class='plusBtn btnAddPI' title='$join_pi_title' $join_pi_disabled>
+        <span>&#43;</span>
+    </button>
+";
 ?>
 
 <style>

webroot/panel/modal/new_pi.php

@@ -45,7 +45,12 @@
             Terms of Service
         </a>.
     </label>
-    <input type="submit" value="Send Request" disabled>
+    <input
+        type="submit"
+        value="Send Request"
+        title="Please enter a GID, owner name, or owner email"
+        disabled
+    >
 </form>
 
 <script>
@@ -62,23 +67,21 @@ function updateSearch() {
                     const results = JSON.parse(data);
                     if (results.length === 0) {
                         wrapper.html("<span>No Results</span>").show();
-                        submit.prop("disabled", true);
+                        submit.prop("disabled", true).prop("title", "no groups found");
                     } else if (results.includes(query)) {
                         // search query exactly matches a PI group GID
                         wrapper.html("").hide();
-                        submit.prop("disabled", false);
+                        submit.prop("disabled", false).prop("title", "");
                     } else {
                         const html = results.map(gid => `<span>${gid}</span>`).join('');
                         wrapper.html(html).show();
-                        submit.prop("disabled", true);
+                        submit.prop("disabled", true).prop("title", "no group found with this GID");
                     }
                 },
                 error: function(result) {
-                    const error_msg_div = $("<div></div>");
-                    error_msg_div.html(result.responseText);
-                    submit.after(error_msg_div);
+                    submit.after($("<div></div>").html(result.responseText));
                     wrapper.html("").hide();
-                    submit.prop("disabled", true);
+                    submit.prop("disabled", true).prop("title", "something went wrong");
                 }
             });
         };

webroot/panel/pi.php

@@ -205,20 +205,24 @@
             <input type='hidden' name='form_type' value='disable'>
 ";
 if (!$user_is_owner) {
-    echo "
-        <input type='submit' value='Disable PI Group' class='danger' disabled>
-        <p>Only the group owner can disable the group.</p>
-    ";
+    $disable_group_disabled = "disabled";
+    $disable_group_title = "Only the group owner can disable the group.";
 } elseif (count($assocs) > 1) {
-    echo "
-        <input type='submit' value='Disable PI Group' class='danger' disabled>
-        <p>You must first remove all members before you can disable.</p>
-    ";
+    $disable_group_disabled = "disabled";
+    $disable_group_title = "You must first remove all members before you can disable.";
 } else {
-    echo "
-        <input type='submit' value='Disable PI Group' class='danger'>
-    ";
+    $disable_group_disabled = "";
+    $disable_group_title = "";
 }
+echo "
+    <input
+        type='submit'
+        value='Disable PI Group'
+        class='danger'
+        title='$disable_group_title'
+        $disable_group_disabled
+    >
+";
 echo "</div></form>";
 
 ?>