fix bs4 compatibility, small ui tweaks

data/static/accounts.js

@@ -53,12 +53,16 @@ document.getElementById('accountsTabDelete').onclick = function() {
         }
     }
     let title = " user";
+    let msg = "Notify user";
     if (selected.length > 1) {
         title += "s";
+        msg += "s";
     }
     title = "Delete " + selected.length + title;
+    msg += " of account deletion";
     document.getElementById('deleteModalTitle').textContent = title;
     document.getElementById('deleteModalNotify').checked = false;
+    document.getElementById('deleteModalNotifyLabel').textContent = msg;
     document.getElementById('deleteModalReason').value = '';
     document.getElementById('deleteModalReasonBox').classList.add('unfocused');
     document.getElementById('deleteModalSend').textContent = 'Delete';
@@ -200,8 +204,12 @@ function populateUsers() {
         if (admin) {
             isAdmin = "Yes";
         }
+        let fci = "form-check-input";
+        if (bsVersion != 5) {
+            fci = "";
+        }
         return `
-            <td nowrap="nowrap" class="align-middle" scope="row"><input class="form-check-input" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
+            <td nowrap="nowrap" class="align-middle" scope="row"><input class="${fci}" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
             <td nowrap="nowrap" class="align-middle">${username}</td>
             <td nowrap="nowrap" class="align-middle">${generateEmail(id, name, email)}</td>
             <td nowrap="nowrap" class="align-middle">${lastActive}</td>
@@ -246,22 +254,7 @@ document.getElementById('accountsTabSetDefaults').onclick = function() {
     if (userIDs.length == 0) {
         return;
     }
-    let radioList = document.getElementById('defaultUserRadios');
+    populateRadios();
-    radioList.textContent = '';
-    let first = true;
-    for (user of jfUsers) {
-        let radio = document.createElement('div');
-        radio.classList.add('radio');
-        let checked = 'checked';
-        if (first) {
-            first = false;
-        } else {
-            checked = '';
-        }
-        radio.innerHTML = `
-        <label><input type="radio" name="defaultRadios" id="default_${user['id']}" style="margin-right: 1rem;" ${checked}>${user['name']}</label>`;
-        radioList.appendChild(radio);
-    }
     let userstring = 'user';
     if (userIDs.length > 1) {
         userstring += 's';

data/static/admin.js

@@ -647,6 +647,28 @@ document.getElementById('openAbout').onclick = function() {
     aboutModal.show();
 };
 
+function populateRadios() {
+    let radioList = document.getElementById('defaultUserRadios');
+    radioList.textContent = '';
+    let first = true;
+    for (user of jfUsers) {
+        let radio = document.createElement('div');
+        radio.classList.add('form-check');
+        let checked = 'checked';
+        if (first) {
+            first = false;
+        } else {
+            checked = '';
+        }
+        // radio.innerHTML =
+        //     `<label><input type="radio" name="defaultRadios" id="default_${user['id']}" style="margin-right: 1rem;" ${checked}>${user['name']}</label>`;
+        radio.innerHTML = `
+        <input class="form-check-input" type="radio" name="defaultRadios" id="default_${user['id']}" ${checked}>
+        <label class="form-check-label" for="default_${user['id']}">${user['name']}</label>`;
+        radioList.appendChild(radio);
+    }
+}
+
 document.getElementById('openDefaultsWizard').onclick = function() {
     this.disabled = true
     this.innerHTML =
@@ -659,23 +681,8 @@ document.getElementById('openDefaultsWizard').onclick = function() {
     req.onreadystatechange = function() {
         if (this.readyState == 4) {
             if (this.status == 200) {
-                let users = req.response['users'];
+                jfUsers = req.response['users'];
-                let radioList = document.getElementById('defaultUserRadios');
+                populateRadios();
-                radioList.textContent = '';
-                let first = true;
-                for (user of users) {
-                    let radio = document.createElement('div');
-                    radio.classList.add('radio');
-                    let checked = 'checked';
-                    if (first) {
-                        first = false;
-                    } else {
-                        checked = '';
-                    }
-                    radio.innerHTML =
-                        `<label><input type="radio" name="defaultRadios" id="default_${user['id']}" style="margin-right: 1rem;" ${checked}>${user['name']}</label>`;
-                    radioList.appendChild(radio);
-                }
                 let button = document.getElementById('openDefaultsWizard');
                 button.disabled = false;
                 button.innerHTML = 'New User Defaults <i class="fa fa-user settingIcon"></i>';

data/templates/admin.html

@@ -162,9 +162,9 @@
                             </select>
                         </div>
                         <div id="defaultUserRadios"></div>
-                        <div class="checkbox">
+                        <div class="form-check" style="margin-top: 1rem;">
-                            <input type="checkbox" value="" style="margin-right: 1rem;" id="storeDefaultHomescreen" checked>
+                            <input class="form-check-input" type="checkbox" value="" id="storeDefaultHomescreen" checked>
-                            <label for="storeDefaultHomescreen" id="storeHomescreenLabel"></label>
+                            <label class="form-check-label" for="storeDefaultHomescreen" id="storeHomescreenLabel"></label>
                         </div>
                     </div>
                     <div class="modal-footer" id="defaultsFooter">
@@ -256,7 +256,7 @@
                     <div class="modal-body">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" value="" id="deleteModalNotify">
-                            <label class="form-check-label" for="deleteModalNotify">Notify users of account deletion</label>
+                            <label class="form-check-label" for="deleteModalNotify" id="deleteModalNotifyLabel">Notify users of account deletion</label>
                         </div>
                         <div class="mb-3 unfocused" id="deleteModalReasonBox">
                             <label for="deleteModalReason" class="form-label">Reason for deletion</label>
@@ -408,7 +408,11 @@
                         <table class="table table-hover table-striped table-borderless">
                             <thead>
                                 <tr>
+                                    {{ if .bs5 }}
                                     <th scope="col"><input class="form-check-input" type="checkbox" value="" id="selectAll"></th>
+                                    {{ else }}
+                                    <th scope="col"><input type="checkbox" value="" id="selectAll"></th>
+                                    {{ end }}
                                     <th scope="col">Username</th>
                                     <th scope="col">Email Address</th>
                                     <th scope="col">Last Active</th>