List of roles in the users

pages/public/users.html

@@ -4,11 +4,7 @@
 
 <input type="email"		id="form-email"		placeholder="Email" required > <br>
 <input type="text"		id="form-username"  placeholder="Username (Optional)" > <br>
-<div id="lister-roles">
-  <!-- hardcoded -->
-  <label><input type="checkbox" name="roles" value="2">Admin</label>
-  <label><input type="checkbox" name="roles" value="3">Member</label>
-</div>
+<div id="lister-roles"></div>
 
 <hr>
 <p>You need to insert your password for confirm the invitation</p>

static/js/roles.js

@@ -9,9 +9,9 @@ sendHttpRequest("/api/auth/roles/list", "POST", null,
             const ls = JSON.parse(response);
 
             ls.data.forEach(data => {
-                const postElement = document.createElement("div");
+                const itemElement = document.createElement("div");
                 postElement.innerHTML = `<li>[${data.id}] ${data.name}: ${data.count} User(s)</li>`;
-                lister.appendChild(postElement);
+                lister.appendChild(itemElement);
             });
         }
     }, "application/json", `Bearer ${token}`

static/js/users.js

@@ -34,6 +34,22 @@ sendHttpRequest("/api/auth/users/list", "POST", null,
     }, "application/json", `Bearer ${token}`
 );
 
+sendHttpRequest("/api/auth/roles/list", "POST", null,
+    function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            console.log("JSON Response:", response);
+            const ls = JSON.parse(response);
+
+            ls.data.forEach(row => {
+                const itemElement = document.createElement("div");
+                itemElement.innerHTML = `<label><input type="checkbox" name="roles" value="${row.id}">${row.name}</label>`;
+                listerRoles.appendChild(itemElement);
+            });
+        }
+    }, "application/json", `Bearer ${token}`
+);
+
 function invite() {
     const checkedRoles = Array
           .from(document.querySelectorAll('input[name="roles"]:checked'))