Invitation user interface preparation

pages/public/users.html

@@ -1,5 +1,30 @@
 <input type="hidden" id="form-token" value="${token}">
-<ul id="lister"></ul>
+
+<h2>Invitation</h2>
+
+<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>
+
+<hr>
+<p>You need to insert your password for confirm the invitation</p>
+<input type="password"	id="form-password"  placeholder="Password" > <br>
+<hr>
+
+<button type="button" onclick="invite()">Invite</button> <br>
+
+<div id="alert-response" role="alert">
+  <b id="alert-status">Loading...</b> <span id="alert-desc">Please wait...</span>
+</div>
+
+<h2>User List</h2>
+
+<ul id="lister-user"></ul>
+<br><br>
 
 <script type="text/javascript" src="/js/carrack.js"></script>
 <script type="text/javascript" src="/js/users.js"></script>

static/js/users.js

@@ -1,5 +1,6 @@
 var token    		= document.getElementById("form-token"      ).value;
-const lister = document.getElementById("lister");
+const listerUser	= document.getElementById("lister-user"		);
+const listerRoles	= document.getElementById("lister-roles"	);
 
 sendHttpRequest("/api/auth/users/list", "POST", null,
     function (error, response) {
@@ -27,9 +28,27 @@ sendHttpRequest("/api/auth/users/list", "POST", null,
                         </ul>
                     </li>
                 `;
-                lister.appendChild(itemElement);
+                listerUser.appendChild(itemElement);
             });
         }
     }, "application/json", `Bearer ${token}`
 );
 
+function invite() {
+    const checkedRoles = Array
+          .from(document.querySelectorAll('input[name="roles"]:checked'))
+          .map(cb => Number(cb.value)); // Convert into number
+    const email    = document.getElementById('form-email').value;
+    const username = document.getElementById('form-username').value;
+    const password = document.getElementById('form-password').value;
+
+    console.log({
+        email,
+        username,
+        password,
+        roles: checkedRoles // Example: [2, 3]
+    });
+
+    // Next command here
+}
+