Complete JavaScript for Invite function

pages/public/users.html

@@ -1,4 +1,5 @@
 <input type="hidden" id="form-token" value="${token}">
+<input type="hidden" id="form-allow" value="${allow}">
 
 <h2>Invitation</h2>
 

static/js/users.js

@@ -1,4 +1,30 @@
+function flushResponse() {
+  document.getElementById("alert-response"  ).style.display = 'none';
+  document.getElementById("alert-response"  ).classList.remove('alert-success'  );
+  document.getElementById("alert-response"  ).classList.remove('alert-danger'   );
+  document.getElementById("alert-response"  ).classList.remove('alert-primary'  );
+}
+
+function loadingResponse() {
+  flushResponse();
+  document.getElementById("alert-status"  ).innerHTML = "Loading...";
+  document.getElementById("alert-desc"    ).innerHTML = "Please wait...";
+  document.getElementById("alert-response").classList.add('alert-primary');
+  document.getElementById("alert-response").style.display = 'block';
+}
+
+function responseAlert(response) {
+  flushResponse();
+  const obj = JSON.parse(response);
+  if (obj.status == "success" ) document.getElementById("alert-response").classList.add('alert-success' );
+  if (obj.status == "failed"  ) document.getElementById("alert-response").classList.add('alert-danger'  );
+  document.getElementById("alert-status"  ).innerHTML     = obj.status;
+  document.getElementById("alert-desc"    ).innerHTML     = obj.desc;
+  document.getElementById("alert-response").style.display = 'block';
+}
+
 var token    		= document.getElementById("form-token"      ).value;
+var allow    		= document.getElementById("form-allow"      ).value;
 const listerUser	= document.getElementById("lister-user"		);
 const listerRoles	= document.getElementById("lister-roles"	);
 
@@ -43,28 +69,39 @@ sendHttpRequest("/api/auth/roles/list", "POST", null,
 
             ls.data.forEach(row => {
                 const itemElement = document.createElement("div");
-                itemElement.innerHTML = `<label><input type="checkbox" name="roles" value="${row.id}">${row.name}</label>`;
+                if (allow.includes(row.id)) {
-                listerRoles.appendChild(itemElement);
+                    itemElement.innerHTML = `<label><input type="checkbox" name="roles" value="${row.id}">${row.name}</label>`;
+                    listerRoles.appendChild(itemElement);
+                } else {}
             });
         }
     }, "application/json", `Bearer ${token}`
 );
 
 function invite() {
-    const checkedRoles = Array
+    const 	roles 		= Array
           .from(document.querySelectorAll('input[name="roles"]:checked'))
-          .map(cb => Number(cb.value)); // Convert into number
+          .map(row => Number(row.value)); // Convert into number. Output example: [2, 3]
-    const email    = document.getElementById('form-email').value;
+    const 	email    	= document.getElementById('form-email').value;
-    const username = document.getElementById('form-username').value;
+    const 	username	= document.getElementById('form-username').value;
-    const password = document.getElementById('form-password').value;
+    const 	password	= document.getElementById('form-password').value;
-
+    var 	url     	= "/api/auth/invite";
-    console.log({
+    var 	payload 	= {
-        email,
+        "roles"		: roles,
-        username,
+        "email"		: email,
-        password,
+        "username"	: username,
-        roles: checkedRoles // Example: [2, 3]
+        "password"	: password
-    });
+    };
-
+    // console.log(payload);
-    // Next command here
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) {
+            // console.error("Error:", error);
+            responseAlert({"status" : "failed", "desc" : error});
+        }
+        else {
+            // console.log("JSON Response:", response);
+            responseAlert(response);
+        }
+    }, "application/json", `Bearer ${token}`);
 }