Remove email addresses in settings, move to accounts tab

still a little rough, but it works.
2024-12-22 09:00:10 +00:00 · 2020-09-17 21:23:45 +01:00 · 2020-09-17 21:23:45 +01:00 · 7ac750879f
commit 7ac750879f
parent cd61989495
5 changed files with 116 additions and 119 deletions
--- a/api.go
+++ b/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
 		}
 	}
--- a/data/static/accounts.js
+++ b/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;
-            break;
+            checked++;
        }
    }
-    if (!checked) {
+    if (checked == 0) {
        defaultsButton.classList.add('unfocused');
-    } else if (defaultsButton.classList.contains('unfocused')) {
-        defaultsButton.classList.remove('unfocused');
+        deleteButton.classList.add('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>${username}</td>
-            <td>${email}</td>
-            <td>${lastActive}</td>
-            <td>${isAdmin}</td>
-            <td><i class="fa fa-eye icon-button" id="viewConfig_${id}"></i></td>`;
+            <td class="align-middle" scope="row"><input class="form-check-input" type="checkbox" value="" id="select_${id}" onclick="checkCheckboxes();"></td>
+            <td class="align-middle">${username}</td>
+            <td class="align-middle">${generateEmail(id, name, email)}</td>
+            <td class="align-middle">${lastActive}</td>
+            <td class="align-middle">${isAdmin}</td>
+            <td class="align-middle"><i class="fa fa-eye icon-button" id="viewConfig_${id}"></i></td>`;
    };

    let req = new XMLHttpRequest();
--- a/data/static/admin.js
+++ b/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){
--- a/data/templates/admin.html
+++ b/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">
-                        Accounts
-                        <div class="btn-group d-flex float-right" role="group" aria-label="Account control buttons">
-                            <button type="button" class="btn btn-secondary">Add User</button>
+                    <div class="card-header d-flex" style="align-items: center;">
+                        <div>Accounts</div>
+                        <div class="ml-auto">
+                            <!--<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">
--- a/main.go
+++ b/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)