Add team history modal

html/assets/js/api.js

@@ -90,6 +90,13 @@ window.ctf01d_tp_api.service_info = function(service_id) {
     });
 }
 
+window.ctf01d_tp_api.teams_list = function () {
+    return $.ajax({
+        url: '/api/v1/teams',
+        method: 'GET',
+    });
+}
+
 window.ctf01d_tp_api.users_list = function (user_data) {
     return $.ajax({
         url: '/api/v1/users',

html/assets/js/index.js

@@ -121,27 +121,27 @@ function gameCreate() {
 function showLoginForm() {
     $('#sign_error_info').html('')
     $('#sign_error_info').css({"display": "none"});
-    $('#signin_username').focus();
-    $('#signin_username').unbind();
-    $('#signin_username').keypress(function (e) {
+    $('#sign_in_username').focus();
+    $('#sign_in_username').unbind();
+    $('#sign_in_username').keypress(function (e) {
         if (e.which == 13) {
-            $('#signin_password').focus();
+            $('#sign_in_password').focus();
             return false; // <---- Add this line
         }
     });
-    $('#signin_password').unbind();
-    $('#signin_password').keypress(function (e) {
+    $('#sign_in_password').unbind();
+    $('#sign_in_password').keypress(function (e) {
         if (e.which == 13) {
             doSignIn();
             return false; // <---- Add this line
         }
     });
-    $('#modal_signin').modal('show');
+    $('#modal_sign_in').modal('show');
 }
 
 function doSignIn() {
-    var username = $('#signin_username').val();
-    var password = $('#signin_password').val();
+    var username = $('#sign_in_username').val();
+    var password = $('#sign_in_password').val();
     $('#sign_error_info').html('')
     $('#sign_error_info').css({"display": "none"});
     window.ctf01d_tp_api.auth_signin({
@@ -154,7 +154,7 @@ function doSignIn() {
     }).done(function(res) {
         console.log(res);
         showSuccessNotification('Login successful!');
-        $('#modal_signin').modal('hide');
+        $('#modal_sign_in').modal('hide');
         setTimeout(function () {
             window.location.reload();
         }, 1000);
@@ -359,25 +359,102 @@ function renderServicesPage() {
     })
 }
 
+function showCreateUser() {
+    $('#users_page_error').css({ "display": "none" });
+    $('#users_page_error').html("");
+
+    $('#user_update_user_id').val(0);
+    $('#user_create_name').val("");
+    $('#user_create_display_name').val("");
+    $('#user_create_avatar_url').val("");
+    $('#user_create_password').val("");
+    $('#user_create_status').val("");
+    $('#user_create_role').val("guest");
+    $('#user_create_team').empty(); // Clear teams
+
+    loadTeams(); // Load teams into the select element
+
+    $('#btn_user_create_or_update').html("Create");
+    $('#title_user_create_or_update').html("New User");
+    $('#modal_edit_or_create_user').modal('show');
+}
+
+function loadTeams() {
+    window.ctf01d_tp_api.teams_list().done(function (teams) {
+        var teamSelect = $('#user_create_team');
+        teams.forEach(function (team) {
+            teamSelect.append(`<option value="${team.id}">${team.name}</option>`);
+        });
+    }).fail(function () {
+        alert('Error loading teams');
+    });
+}
+
+function userCreateOrUpdate() {
+    $('#users_page_error').css({ "display": "none" });
+    $('#users_page_error').html("");
+
+    var user_id = $('#user_update_user_id').val();
+
+    var userName = $('#user_create_name').val();
+    var userDisplayName = $('#user_create_display_name').val();
+    var userAvatarUrl = $('#user_create_avatar_url').val();
+    var userPassword = $('#user_create_password').val();
+    var userStatus = $('#user_create_status').val();
+    var userRole = $('#user_create_role').val();
+    var userTeams = $('#user_create_team').val().map(function (id) {
+        return id;
+    });
+
+    var userData = {
+        user_name: userName,
+        display_name: userDisplayName,
+        avatar_url: userAvatarUrl,
+        password: userPassword,
+        status: userStatus,
+        role: userRole,
+        team_ids: userTeams
+    };
+
+    if (user_id == 0) {
+        window.ctf01d_tp_api.user_create(userData).fail(function (res) {
+            $('#users_page_error').css({ "display": "block" });
+            $('#users_page_error').html("Error creating user");
+            console.error(res);
+        }).done(function (res) {
+            $('#modal_edit_or_create_user').modal('hide');
+            showSuccessNotification('User created successfully!');
+            renderUsersPage();
+        });
+    } else {
+        window.ctf01d_tp_api.user_update(user_id, userData).fail(function (res) {
+            $('#users_page_error').css({ "display": "block" });
+            $('#users_page_error').html("Error updating user");
+            console.error(res);
+        }).done(function (res) {
+            $('#modal_edit_or_create_user').modal('hide');
+            showSuccessNotification('User updated successfully!');
+            renderUsersPage();
+        });
+    }
+}
+
 function renderUsersPage() {
-    $('.spa-web-page').css({ "display": "" })
-    $('#users_page').css({ "display": "block" })
+    $('.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').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">';
@@ -387,14 +464,14 @@ function renderUsersPage() {
             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-secondary" onclick="showMyTeams(\'' + 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) {
@@ -423,6 +500,28 @@ function renderPage(pathname) {
     }
 }
 
+function showMyTeams(userId) {
+    window.ctf01d_tp_api.user_profile(userId).fail(function (res) {
+        $('#my_teams_content').html('<div class="alert alert-danger">Fail to fetch profile</div>');
+        $('#modal_my_teams').modal('show');
+        console.error("profile", res);
+    }).done(function (data) {
+        var teamHistoryHtml = '<div class="team-history">';
+        for (var i in data.team_history) {
+            var team = data.team_history[i];
+            teamHistoryHtml += '<div class="team">';
+            teamHistoryHtml += '<div class="team-name">' + team.name + '</div>';
+            teamHistoryHtml += '<div class="team-dates">Joined at: ' + new Date(team.join).toLocaleString() +
+                (team.left ? ', Left at: ' + new Date(team.left).toLocaleString() : ', ... ') + '</div>';
+            teamHistoryHtml += '</div>';
+        }
+        teamHistoryHtml += '</div>';
+        var currentTeamHtml = '<div class="current-team"><strong>Current Team: </strong>' + data.team_name + '</div>';
+        $('#my_teams_content').html(currentTeamHtml + teamHistoryHtml);
+        $('#modal_my_teams').modal('show');
+    });
+}
+
 
 $(document).ready(function () {
     console.log("Ready")

html/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>ctf01d training platform</title>
@@ -6,17 +7,17 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <base href="/">
 
-    <link href="./assets/css/bootstrap.min.css?v=1.0" rel="stylesheet" type='text/css' />
+    <link href="./assets/css/vendor/bootstrap.min.css?v=1.0" rel="stylesheet" type='text/css' />
     <link href="./assets/css/index.css?v=1.0" rel="stylesheet" type='text/css' />
 
-    <script src="./assets/js/jquery-3.7.1.min.js?v=1.1"></script>
-    <script src="./assets/js/tooltip.min.js?v=1.1"></script>
-    <script src="./assets/js/popper.min.js?v=1.1"></script>
-    <script src="./assets/js/bootstrap.min.js?v=1.0"></script>
-    <script src="./assets/js/bootstrap-notify.min.js?v=1.0"></script>
+    <script src="./assets/js/vendor/jquery-3.7.1.min.js?v=1.1"></script>
+    <script src="./assets/js/vendor/tooltip.min.js?v=1.1"></script>
+    <script src="./assets/js/vendor/popper.min.js?v=1.1"></script>
+    <script src="./assets/js/vendor/bootstrap.min.js?v=1.0"></script>
+    <script src="./assets/js/vendor/bootstrap-notify.min.js?v=1.0"></script>
     <script src="./assets/js/api.js?v=1.0"></script>
     <script src="./assets/js/index.js?v=1.0"></script>
-</head>
+  </head>
   <body>
     <!-- MENU_BEGIN -->
     <nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_global">
@@ -47,7 +48,7 @@
               User
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <div class="dropdown-item" id="btn_my_teams" onclick="showMyTeams()">My Team(s)</div>
+              <div class="dropdown-item" id="btn_my_teams" onclick="showMyTeams('2d10ba59-4e45-4b05-86e4-9a135b444c50')">My Team(s)</div> <!-- fixme use id from session -->
               <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_sign_out" onclick="doSignOut()">Sign-out</div>
@@ -58,7 +59,8 @@
     </nav>
     <!-- MENU_END -->
 
-    <div class="modal fade" id="modal_signin" tabindex="-1" role="dialog" aria-hidden="true">
+    <!-- MODAL_SIGN_IN -->
+    <div class="modal fade" id="modal_sign_in" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
@@ -70,25 +72,49 @@ <h5 class="modal-title" id="exampleModalLongTitle">Sign-in</h5>
           <div class="modal-body">
             <form>
               <div class="form-group">
-                <!-- label for="signin_username" class="col-form-label">Username:</label-->
-                <input type="text" class="form-control" id="signin_username" placeholder="Username" required>
+                <!-- label for="sign_in_username" class="col-form-label">Username:</label-->
+                <input type="text" class="form-control" id="sign_in_username" placeholder="Username" required>
               </div>
               <div class="form-group">
-                <!-- label for="signin_password" class="col-form-label">Password:</label -->
-                <input type="password" class="form-control" id="signin_password" placeholder="Password" required>
+                <!-- label for="sign_in_password" class="col-form-label">Password:</label -->
+                <input type="password" class="form-control" id="sign_in_password" placeholder="Password" required>
               </div>
             </form>
             <div class="alert alert-danger" role="alert" style="display: none;" id="sign_error_info">
               Something wrong
             </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" onclick="doSignin()">Sign-in</button>
+            <button type="button" class="btn btn-primary" onclick="doSignIn()">Sign-in</button>
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           </div>
         </div>
       </div>
     </div>
+    <!-- MODAL_SIGN_IN_END -->
+
+    <!-- MY TEAMS MODAL -->
+    <div class="modal fade" id="modal_my_teams" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLongTitle">My teams</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div id="my_teams_content">
+              <!-- Team history content will be inserted here -->
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- MY TEAMS MODAL END -->
 
     <!-- WELCOME PAGE -->
     <div class="container spa-web-page" id="root_page">
@@ -99,8 +125,8 @@ <h5 class="modal-title" id="exampleModalLongTitle">Sign-in</h5>
         </div>
         <div class="card-body">
           <div class="card-text">
-            <p>This service can prapare training attack-defence game, based on ctf01d jury system</p>
-            <p>Guthub: <a href="https://github.com/sea-kg/ctf01d-training-platform">https://github.com/sea-kg/ctf01d-training-platform</a></p>
+            <p>This service can prepare training attack-defense game, based on ctf01d jury system</p>
+            <p>Github: <a href="https://github.com/sea-kg/ctf01d-training-platform">https://github.com/sea-kg/ctf01d-training-platform</a></p>
           </div>
         </div>
       </div>
@@ -245,6 +271,66 @@ <h2>Users</h2>
       </div>
       <br>
     </div>
+    <div class="modal fade" id="modal_edit_or_create_user" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="title_user_create_or_update">New User</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form id="add-user-form">
+              <input type="hidden" id="user_update_user_id" value="0" name="user_id">
+              <div class="form-group">
+                <label for="user_create_name" class="col-form-label">Username:</label>
+                <input type="text" class="form-control" id="user_create_name" name="user_name" placeholder="Username"
+                  required>
+              </div>
+              <div class="form-group">
+                <label for="user_create_display_name" class="col-form-label">Display Name:</label>
+                <input type="text" class="form-control" id="user_create_display_name" name="display_name"
+                  placeholder="Display Name">
+              </div>
+              <div class="form-group">
+                <label for="user_create_avatar_url" class="col-form-label">Avatar URL:</label>
+                <input type="text" class="form-control" id="user_create_avatar_url" name="avatar_url"
+                  placeholder="Avatar URL">
+              </div>
+              <div class="form-group">
+                <label for="user_create_password" class="col-form-label">Password:</label>
+                <input type="password" class="form-control" id="user_create_password" name="password" placeholder="Password"
+                  required>
+              </div>
+              <div class="form-group">
+                <label for="user_create_status" class="col-form-label">Status:</label>
+                <input type="text" class="form-control" id="user_create_status" name="status" placeholder="Status">
+              </div>
+              <div class="form-group">
+                <label for="user_create_role" class="col-form-label">Role:</label>
+                <select class="form-control" id="user_create_role" name="role">
+                  <option value="admin">Admin</option>
+                  <option value="player">Player</option>
+                  <option value="guest">Guest</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label for="user_create_team" class="col-form-label">Team:</label>
+                <select class="form-control" id="user_create_team" name="team" multiple>
+                  <!-- Teams will be loaded here -->
+                </select>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" id="btn_user_create_or_update"
+              onclick="userCreateOrUpdate()">Create</button>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- UNKNOWN PAGE -->
     <div class="container spa-web-page" id="unknown_page">