Remove email addresses in settings, move to accounts tab

still a little rough, but it works.

api.go

@@ -541,6 +541,7 @@ func (app *appContext) OmbiUsers(gc *gin.Context) {
 func (app *appContext) ModifyEmails(gc *gin.Context) {
 	var req map[string]string
 	gc.BindJSON(&req)
+	fmt.Println(req)
 	app.debug.Println("Email modification requested")
 	users, status, err := app.jf.getUsers(false)
 	if !(status == 200 || status == 204) || err != nil {
@@ -550,7 +551,7 @@ func (app *appContext) ModifyEmails(gc *gin.Context) {
 		return
 	}
 	for _, jfUser := range users {
-		if address, ok := req[jfUser["Name"].(string)]; ok {
+		if address, ok := req[jfUser["Id"].(string)]; ok {
 			app.storage.emails[jfUser["Id"].(string)] = address
 		}
 	}

data/static/accounts.js

@@ -8,23 +8,105 @@ document.getElementById('selectAll').onclick = function() {
 
 function checkCheckboxes() {
     const defaultsButton = document.getElementById('accountsTabSetDefaults');
+    const deleteButton = document.getElementById('accountsTabDelete');
     const checkboxes = document.getElementById('accountsList').querySelectorAll('input[type=checkbox]');
-    let checked = false;
+    let checked = 0;
     for (check of checkboxes) {
         if (check.checked) {
-            checked = true;
+            checked++;
-            break;
         }
     }
-    if (!checked) {
+    if (checked == 0) {
         defaultsButton.classList.add('unfocused');
-    } else if (defaultsButton.classList.contains('unfocused')) {
+        deleteButton.classList.add('unfocused');
-        defaultsButton.classList.remove('unfocused');
+    } else {
+        if (defaultsButton.classList.contains('unfocused')) {
+            defaultsButton.classList.remove('unfocused');
+        }
+        if (deleteButton.classList.contains('unfocused')) {
+            deleteButton.classList.remove('unfocused');
+        }
+        if (checked == 1) {
+            deleteButton.textContent = 'Delete User';
+        } else {
+            deleteButton.textContent = 'Delete Users';
+        }
     }
 }
 
 var jfUsers = [];
 
+function validEmail(email) {
+    const re = /\S+@\S+\.\S+/;
+    return re.test(email);
+}
+
+function changeEmail(icon, id) {
+    const iconContent = icon.outerHTML;
+    icon.setAttribute("class", "");
+    const entry = icon.nextElementSibling;
+    const ogEmail = entry.value;
+    entry.readOnly = false;
+    entry.classList.remove('form-control-plaintext');
+    entry.classList.add('form-control');
+    if (entry.value == "") {
+        entry.placeholder = 'Address';
+    }
+    const tick = document.createElement('i');
+    tick.classList.add("fa", "fa-check", "d-inline-block", "icon-button", "text-success");
+    tick.setAttribute('style', 'margin-left: 0.5rem; margin-right: 0.5rem;');
+    tick.onclick = function() {
+        const newEmail = entry.value;
+        if (!validEmail(newEmail) || newEmail == ogEmail) {
+            return
+        }
+        cross.remove();
+        this.outerHTML = `
+        <div class="spinner-border spinner-border-sm" role="status" style="width: 1rem; height: 1rem; margin-left: 0.5rem;">
+            <span class="sr-only">Saving...</span>
+        </div>`;
+        //this.remove();
+        let send = {};
+        send[id] = newEmail;
+        console.log(send);
+        let req = new XMLHttpRequest();
+        req.open("POST", "/modifyEmails", true);
+        req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
+        req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+        req.onreadystatechange = function() {
+            if (this.readyState == 4) {
+                if (this.status == 200 || this.status == 204) {
+                    entry.nextElementSibling.remove();
+                } else {
+                    entry.value = ogEmail;
+                }
+            }
+        };
+        req.send(JSON.stringify(send));
+        icon.outerHTML = iconContent;
+        entry.readOnly = true;
+        entry.classList.remove('form-control');
+        entry.classList.add('form-control-plaintext');
+        entry.placeholder = '';
+    };
+    const cross = document.createElement('i');
+    cross.classList.add("fa", "fa-close", "d-inline-block", "icon-button", "text-danger");
+    cross.onclick = function() {
+        tick.remove();
+        this.remove();
+        icon.outerHTML = iconContent;
+        entry.readOnly = true;
+        entry.classList.remove('form-control');
+        entry.classList.add('form-control-plaintext');
+        entry.placeholder = '';
+        entry.value = ogEmail;
+    };
+    icon.parentNode.appendChild(tick);
+    icon.parentNode.appendChild(cross);
+}
+
+
+
 function populateUsers() {
     const acList = document.getElementById('accountsList');
     acList.innerHTML = `
@@ -35,18 +117,32 @@ function populateUsers() {
     acList.parentNode.querySelector('thead').classList.add('unfocused');
     const accountsList = document.createElement('tbody');
     accountsList.id = 'accountsList';
+    const generateEmail = function(id, name, email) {
+        let entry = document.createElement('div');
+        // entry.classList.add('py-1');
+        entry.id = 'email_' + id;
+        let emailValue = email;
+        if (email === undefined) {
+            emailValue = "";
+        }
+        entry.innerHTML = `
+        <i class="fa fa-edit d-inline-block icon-button" style="margin-right: 2%;" onclick="changeEmail(this, '${id}')"></i>
+        <input type="email" class="form-control-plaintext form-control-sm text-muted d-inline-block addressText" id="address_${id}" style="width: auto;" value="${emailValue}" readonly>
+        `;
+        return entry.outerHTML
+    };
     const template = function(id, username, email, lastActive, admin) {
         let isAdmin = "No";
         if (admin) {
             isAdmin = "Yes";
         }
         return `
-            <td scope="row"><input class="form-check-input" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
+            <td class="align-middle" scope="row"><input class="form-check-input" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
-            <td>${username}</td>
+            <td class="align-middle">${username}</td>
-            <td>${email}</td>
+            <td class="align-middle">${generateEmail(id, name, email)}</td>
-            <td>${lastActive}</td>
+            <td class="align-middle">${lastActive}</td>
-            <td>${isAdmin}</td>
+            <td class="align-middle">${isAdmin}</td>
-            <td><i class="fa fa-eye icon-button" id="viewConfig_${id}"></i></td>`;
+            <td class="align-middle"><i class="fa fa-eye icon-button" id="viewConfig_${id}"></i></td>`;
     };
 
     let req = new XMLHttpRequest();

data/static/admin.js

@@ -886,104 +886,6 @@ if (ombiEnabled) {
     };
 }
 
-document.getElementById('openUsers').onclick = function () {
-    this.disabled = true;
-    this.innerHTML =
-        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
-        'Loading...';
-    let req = new XMLHttpRequest();
-    req.open("GET", "/getUsers", true);
-    req.responseType = 'json';
-    req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
-    req.onreadystatechange = function() {
-        if (this.readyState == 4) {
-            if (this.status == 200) {
-                let list = document.getElementById('userList');
-                list.textContent = '';
-                if (document.getElementById('saveUsers')) {
-                    document.getElementById('saveUsers').remove();
-                }
-                let users = req.response['users'];
-                for (let user of users) {
-                    let entry = document.createElement('div');
-                    entry.classList.add('form-group', 'list-group-item', 'py-1');
-                    entry.id = 'user_' + user['name'];
-                    let label = document.createElement('label');
-                    label.classList.add('d-inline-block');
-                    label.setAttribute('for', 'address_' + user['email']);
-                    label.textContent = user['name'];
-                    entry.appendChild(label);
-                    let address = document.createElement('input');
-                    address.setAttribute('type', 'email');
-                    address.readOnly = true;
-                    address.classList.add('form-control-plaintext', 'text-muted', 'd-inline-block', 'addressText');
-                    address.id = 'address_' + user['name'];
-                    address.setAttribute('style', 'width: auto; margin-left: 2%;');
-                    if (typeof(user['email']) != 'undefined') {
-                        address.value = user['email'];
-                    }
-                    let editButton = document.createElement('i');
-                    editButton.classList.add('fa', 'fa-edit', 'd-inline-block', 'icon-button');
-                    editButton.setAttribute('style', 'margin-left: 2%;');
-                    editButton.onclick = function() {
-                        this.classList.remove('fa', 'fa-edit');
-                        let addressElement = this.parentNode.getElementsByClassName('form-control-plaintext')[0];
-                        addressElement.classList.remove('form-control-plaintext', 'text-muted');
-                        addressElement.classList.add('form-control');
-                        addressElement.readOnly = false;
-                        if (addressElement.value == '') {
-                            addressElement.placeholder = 'Email Address';
-                            address.setAttribute('style', 'width: auto; margin-left: 2%;');
-                        }
-                        if (document.getElementById('saveUsers') == null) {
-                            let footer = document.getElementById('userFooter')
-                            let saveUsers = document.createElement('input');
-                            saveUsers.classList.add('btn', 'btn-primary');
-                            saveUsers.setAttribute('type', 'button');
-                            saveUsers.value = 'Save Changes';
-                            saveUsers.id = 'saveUsers';
-                            saveUsers.onclick = function() {
-                                let send = {}
-                                let entries = document.getElementById('userList').children;
-                                for (let entry of entries) {
-                                    if (typeof(entry.getElementsByTagName('input')[0]) != 'undefined') {
-                                        const name = entry.id.replace(/user_/g, '');
-                                        const address = entry.getElementsByTagName('input')[0].value;
-                                        send[name] = address;
-                                    }
-                                }
-                                send = JSON.stringify(send);
-                                let req = new XMLHttpRequest();
-                                req.open("POST", "/modifyUsers", true);
-                                req.setRequestHeader("Authorization", "Basic " + btoa(window.token + ":"));
-                                req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-                                req.onreadystatechange = function() {
-                                    if (this.readyState == 4) {
-                                        if (this.status == 200 || this.status == 204) {
-                                            usersModal.hide();
-                                        }
-                                    }
-                                };
-                                req.send(send);
-                            };
-                            footer.appendChild(saveUsers);
-                        }
-                    };
-                    entry.appendChild(editButton);
-                    entry.appendChild(address);
-                    list.appendChild(entry);
-                };
-                let button = document.getElementById('openUsers');
-                button.disabled = false;
-                button.innerHTML = 'Users <i class="fa fa-user"></i>';
-                settingsModal.hide();
-                usersModal.show();
-            }
-        }
-    };
-    req.send();
-};
-
 generateInvites(empty = true);
 
 tryLogin("", "", false, callback = function(code){

data/templates/admin.html

@@ -105,9 +105,6 @@
                             <button type="button" class="list-group-item list-group-item-action" id="openAbout">
                             About <i class="fa fa-info-circle settingIcon"></i>
                             </button>
-                            <button type="button" class="list-group-item list-group-item-action" id="openUsers">
-                                Email Addresses <i class="fa fa-envelope settingIcon"></i>
-                            </button>
                             <button type="button" class="list-group-item list-group-item-action" id="openDefaultsWizard">
                                 New User Defaults <i class="fa fa-user settingIcon"></i>
                             </button>
@@ -334,11 +331,12 @@
             </div>
             <div id="accountsTab" class="unfocused">
                 <div class="card mb-3 tabGroup">
-                    <div class="card-header">
+                    <div class="card-header d-flex" style="align-items: center;">
-                        Accounts
+                        <div>Accounts</div>
-                        <div class="btn-group d-flex float-right" role="group" aria-label="Account control buttons">
+                        <div class="ml-auto">
-                            <button type="button" class="btn btn-secondary">Add User</button>
+                            <!--<button type="button" class="btn btn-secondary">Add User</button>-->
                             <button type="button" class="btn btn-primary unfocused" id="accountsTabSetDefaults">Set Defaults</button>
+                            <button type="button" class="btn btn-danger unfocused" id="accountsTabDelete"></button>
                         </div>
                     </div>
                     <div class="card-body">

main.go

@@ -440,7 +440,7 @@ func start(asDaemon, firstCall bool) {
 		api.POST("/setNotify", app.SetNotify)
 		api.POST("/deleteInvite", app.DeleteInvite)
 		api.GET("/getUsers", app.GetUsers)
-		api.POST("/modifyUsers", app.ModifyEmails)
+		api.POST("/modifyEmails", app.ModifyEmails)
 		api.POST("/setDefaults", app.SetDefaults)
 		api.POST("/applySettings", app.ApplySettings)
 		api.GET("/getConfig", app.GetConfig)