add web page for users

Author: IgorPolyakov

html/assets/css/index.css

@@ -39,4 +39,12 @@ body,html{
 .services-card .card-img-top {
     width: 286px;
     height: 286px;
-}
+}
+
+.users-card-avatar {
+    object-fit: cover;
+    object-position: top center;
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+}

html/assets/js/api.js

@@ -89,3 +89,49 @@ window.ctf01d_tp_api.service_info = function(service_id) {
         method: 'GET',
     });
 }
+
+window.ctf01d_tp_api.users_list = function (user_data) {
+    return $.ajax({
+        url: '/api/v1/users',
+        method: 'GET',
+    });
+}
+
+window.ctf01d_tp_api.user_create = function (user_data) {
+    return $.ajax({
+        url: '/api/v1/users',
+        method: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify(user_data),
+    });
+}
+
+window.ctf01d_tp_api.user_update = function (user_id, user_data) {
+    return $.ajax({
+        url: '/api/v1/users/' + user_id,
+        method: 'PUT',
+        contentType: 'application/json',
+        data: JSON.stringify(user_data),
+    });
+}
+
+window.ctf01d_tp_api.user_delete = function (user_id) {
+    return $.ajax({
+        url: '/api/v1/users/' + user_id,
+        method: 'DELETE',
+    });
+}
+
+window.ctf01d_tp_api.user_info = function (user_id) {
+    return $.ajax({
+        url: '/api/v1/users/' + user_id,
+        method: 'GET',
+    });
+}
+
+window.ctf01d_tp_api.user_profile = function (user_id) {
+    return $.ajax({
+        url: '/api/v1/users/' + user_id + '/profile',
+        method: 'GET',
+    });
+}

html/assets/js/index.js

@@ -28,10 +28,14 @@ function isServicesPage(pathname) {
     return pathname == "/services" || pathname == "/services/";
 }
 
-function isTeamPage(pathname) {
+function isTeamsPage(pathname) {
     return pathname == "/teams" || pathname == "/teams/";
 }
 
+function isUsersPage(pathname) {
+    return pathname == "/users" || pathname == "/users/";
+}
+
 function getHumanTimeHasPassed(dt_end) {
     var dt = dt_end.getTime();
     var dt_now = new Date().getTime();
@@ -128,14 +132,14 @@ function showLoginForm() {
     $('#signin_password').unbind();
     $('#signin_password').keypress(function (e) {
         if (e.which == 13) {
-            doSignin();
+            doSignIn();
             return false; // <---- Add this line
         }
     });
     $('#modal_signin').modal('show');
 }
 
-function doSignin() {
+function doSignIn() {
     var username = $('#signin_username').val();
     var password = $('#signin_password').val();
     $('#sign_error_info').html('')
@@ -355,6 +359,43 @@ function renderServicesPage() {
     })
 }
 
+function renderUsersPage() {
+    $('.spa-web-page').css({ "display": "" })
+    $('#users_page').css({ "display": "block" })
+    $('#users_page_error').css({ "display": "none" });
+    $('#users_page_error').html("");
+    if (window.location.pathname != "/users/") {
+        window.location.href = "/users/";
+    }
+    window.ctf01d_tp_api.users_list().fail(function (res) {
+        $('#users_page_error').css({
+            "display": "block"
+        });
+        $('#users_page_error').html("Error loading users");
+        console.error("users_list", res);
+    }).done(function (res) {
+        var usersHtml = ""
+        for (var i in res) {
+            var user_info = res[i];
+            console.log("user_info", user_info);
+            usersHtml += '<div class="card services-card" style="width: 20rem;">';
+            usersHtml += '  <img class="users-card-avatar" src="' + user_info.avatar_url + '" alt="Image of user">';
+            usersHtml += '  <div class="card-body">';
+            usersHtml += '    <h5 class="card-title">@' + user_info.user_name + ' - ' + escapeHtml(user_info.display_name) + '</h5>';
+            usersHtml += '    <p class="card-text"> ' + escapeHtml(user_info.id) + '</p>';
+            usersHtml += '    <p class="card-subtitle mb-2 text-muted"> role ' + escapeHtml(user_info.role) + '</p>';
+            usersHtml += '    <p class="card-text"> state ' + escapeHtml(user_info.status) + '</p>';
+            usersHtml += '  </div>';
+            usersHtml += '  <div class="card-body">';
+            usersHtml += '    <button class="btn btn-secondary" onclick="showProfileUser(\'' + user_info.id + '\');">Profile</button>';
+            usersHtml += '    <button class="btn btn-primary" onclick="showUpdateUser(\'' + user_info.id + '\');">Update</button>';
+            usersHtml += '    <button class="btn btn-danger" onclick="deleteUser(\'' + user_info.id + '\');">Delete</button>';
+            usersHtml += '  </div>';
+            usersHtml += '</div>';
+        }
+        $('#users_page_list').html(usersHtml);
+    })
+}
 
 function renderPage(pathname) {
     console.log("pathname", pathname)
@@ -367,7 +408,9 @@ function renderPage(pathname) {
         renderGamesPage();
     } else if (isServicesPage(pathname)) {
         renderServicesPage();
-    } else if (isTeamPage(pathname)) {
+    } else if (isUsersPage(pathname)) {
+        renderUsersPage();
+    } else if (isTeamsPage(pathname)) {
         $('#teams_page').css({"display": "block"})
         $('.spa-web-page').css({
             "display": ""
@@ -387,12 +430,12 @@ $(document).ready(function () {
 
     window.ctf01d_tp_api.auth_session().fail(function(res) {
         console.error(res);
-        $('#btn_signin').css({"display": "inline-block"});
-        $('#btn_signout').css({"display": "none"});
+        $('#btn_sign_in').css({"display": "inline-block"});
+        $('#btn_sign_out').css({"display": "none"});
         $('#btn_profile').css({"display": "none"});
     }).done(function(res) {
-        $('#btn_signin').css({"display": "none"});
-        $('#btn_signout').css({"display": "inline-block"});
+        $('#btn_sign_in').css({"display": "none"});
+        $('#btn_sign_out').css({"display": "inline-block"});
         $('#btn_profile').css({"display": "inline-block"});
         $('#btn_profile').html(res.name + " (" + res.role + ")");
     })

html/index.html

@@ -41,7 +41,7 @@
           </li>
         </ul>
         <div class="form-inline my-2 my-lg-0">
-          <button id="btn_signin" class="btn-menu-top-left btn btn-outline-success my-2 my-sm-0" style="display: none" onclick="showLoginForm()">Sign-in</button>
+          <button id="btn_sign_in" class="btn-menu-top-left btn btn-outline-success my-2 my-sm-0" style="display: none" onclick="showLoginForm()">Sign-in</button>
           <div class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="btn_profile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               User
@@ -50,7 +50,7 @@
               <div class="dropdown-item" id="btn_my_teams" onclick="showMyTeams()">My Team(s)</div>
               <div class="dropdown-item" id="btn_my_services" onclick="showMyServices()">My Service(s)</div>
               <div class="dropdown-divider"></div>
-              <div class="dropdown-item" id="btn_signout" onclick="doSignOut()">Sign-out</div>
+              <div class="dropdown-item" id="btn_sign_out" onclick="doSignOut()">Sign-out</div>
             </div>
           </div>
         </div>
@@ -230,6 +230,22 @@ <h5 class="modal-title" id="title_service_create_or_update">New Service</h5>
       <br>
     </div>
 
+    <!-- USERS PAGE -->
+    <div class="container spa-web-page" id="users_page">
+      <br>
+      <h2>Users</h2>
+      <button type="button" class="btn btn-primary" onclick="showCreateUser()">
+        New User
+      </button>
+      <br><br>
+      <div class="alert alert-danger" role="alert" style="display: none;" id="services_page_error">
+        Something wrong
+      </div>
+      <div id="users_page_list">
+      </div>
+      <br>
+    </div>
+
     <!-- UNKNOWN PAGE -->
     <div class="container spa-web-page" id="unknown_page">
       <br>