Added more UI elements

api.go

@@ -100,7 +100,10 @@ func initAPIs(targetMux *http.ServeMux) {
 	authRouter.HandleFunc("/api/sso/enable", ssoHandler.HandleSSOEnable)
 	authRouter.HandleFunc("/api/sso/setPort", ssoHandler.HandlePortChange)
 	authRouter.HandleFunc("/api/sso/setAuthURL", ssoHandler.HandleSetAuthURL)
-	//authRouter.HandleFunc("/api/sso/registerApp", ssoHandler.HandleRegisterApp)
+
+	authRouter.HandleFunc("/api/sso/app/register", ssoHandler.HandleRegisterApp)
+	//authRouter.HandleFunc("/api/sso/app/list", ssoHandler.HandleListApp)
+	//authRouter.HandleFunc("/api/sso/app/remove", ssoHandler.HandleRemoveApp)
 
 	authRouter.HandleFunc("/api/sso/user/list", ssoHandler.HandleListUser)
 	authRouter.HandleFunc("/api/sso/user/add", ssoHandler.HandleAddUser)

web/components/sso.html

@@ -47,6 +47,26 @@
                   <div class="sub header">A list of users that are registered with the SSO server</div>
                 </div>
             </h3>
+            <table class="ui celled table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Registered On</th>
+                        <th>Reset Password</th>
+                        <th>Remove</th>
+                    </tr>
+                </thead>
+                <tbody id="registeredSsoUsers">
+                    <tr>
+                        <td>admin</td>
+                        <td>2020-01-01</td>
+                        <td><button class="ui blue basic small icon button"><i class="ui blue key icon"></i></button></td>
+                        <td><button class="ui red basic small icon button"><i class="ui red trash icon"></i></button></td>
+                    </tr>
+                </tbody>
+            </table>
+            <button onclick="handleUserListRefresh();" class="ui basic right floated button"><i class="ui green refresh icon"></i> Refresh</button>
+            <button onclick="openRegisteredUserManager();" class="ui basic button"><i class="ui blue users icon"></i> Manage Registered Users</button>
         </div>
         <div class="ui divider"></div>
         <div>
@@ -57,6 +77,28 @@
                   <div class="sub header">A list of apps that are registered with the SSO server</div>
                 </div>
             </h3>
+            <table class="ui celled table">
+                <thead>
+                    <tr>
+                        <th>App Name</th>
+                        <th>Domain</th>
+                        <th>App ID</th>
+                        <th>Registered On</th>
+                        <th>Remove</th>
+                    </tr>
+                </thead>
+                <tbody id="registeredSsoApps">
+                    <tr>
+                        <td>My App</td>
+                        <td><a href="//example.com" target="_blank">example.com</a></td>
+                        <td>123456</td>
+                        <td>2020-01-01</td>
+                        <td><button class="ui red basic small icon button"><i class="ui red trash icon"></i></button></td>
+                    </tr>
+                </tbody>
+            </table>
+            <button onclick="handleRegisterAppListRefresh();" class="ui basic right floated button"><i class="ui green refresh icon"></i> Refresh</button>
+            <button onclick="openRegisterAppManagementSnippet();" class="ui basic button"><i style="font-size: 1em; margin-top: -0.2em;" class="ui green th large icon"></i> Manage Registered App</button>
             <p></p>
         </div>
     </div>
@@ -198,5 +240,109 @@
         }
     });
     
+    /* Registered Apps Event Handlers */
+    
+    //Function to initialize the registered app table
+    function initRegisteredAppTable(){
+        $.get("/api/sso/app/list", function(data){
+            if(data.error != undefined){
+                msgbox("Failed to get registered apps: " + data.error, false);
+            }else{
+                var tbody = $("#registeredSsoApps");
+                tbody.empty();
+                for(var i = 0; i < data.length; i++){
+                    var app = data[i];
+                    var tr = $("<tr>");
+                    tr.append($("<td>").text(app.AppName));
+                    tr.append($("<td>").html('<a href="//'+app.Domain+'" target="_blank">'+app.Domain+'</a>'));
+                    tr.append($("<td>").text(app.AppID));
+                    tr.append($("<td>").text(app.RegisteredOn));
+                    var removeBtn = $("<button>").addClass("ui red basic small icon button").html('<i class="ui red trash icon"></i>');
+                    removeBtn.on("click", function(){
+                        removeApp(app.AppID);
+                    });
+                    tr.append($("<td>").append(removeBtn));
+                    tbody.append(tr);
+                }
+
+                if (data.length == 0){
+                    tbody.append($("<tr>").append($("<td>").attr("colspan", 4).html(`<i class="ui green circle check icon"></i> No registered users`)));
+                }
+            }
+        });
+    }
+    initRegisteredAppTable();
+
+    //Also bind the refresh button to the initRegisteredAppTable function
+    function handleRegisterAppListRefresh(){
+        initRegisteredAppTable();
+    }
+
+    function openRegisterAppManagementSnippet(){
+        //Open the register app management snippet
+        showSideWrapper("snippet/sso_app.html");
+    }
+
+
+    //Bind the remove button to the removeApp function
+    function removeApp(appID){
+        $.cjax({
+            url: "/api/sso/removeApp",
+            method: "POST",
+            data: {
+                appID: appID
+            },
+            success: function(data){
+                if(data.error != undefined){
+                    msgbox("Failed to remove app: " + data.error, false);
+                }else{
+                    msgbox("App removed", true);
+                    updateSSOStatus();
+                }
+            }
+        });
+    }
+
+    /* Registered Users Event Handlers */
+    function initUserList(){
+        $.get("/api/sso/user/list", function(data){
+            if(data.error != undefined){
+                msgbox("Failed to get registered users: " + data.error, false);
+            }else{
+                var tbody = $("#registeredSsoUsers");
+                tbody.empty();
+                for(var i = 0; i < data.length; i++){
+                    var user = data[i];
+                    var tr = $("<tr>");
+                    tr.append($("<td>").text(user.Username));
+                    tr.append($("<td>").text(user.RegisteredOn));
+                    var resetBtn = $("<button>").addClass("ui blue basic small icon button").html('<i class="ui blue key icon"></i>');
+                    resetBtn.on("click", function(){
+                        resetPassword(user.Username);
+                    });
+                    tr.append($("<td>").append(resetBtn));
+                    var removeBtn = $("<button>").addClass("ui red basic small icon button").html('<i class="ui red trash icon"></i>');
+                    removeBtn.on("click", function(){
+                        removeUser(user.Username);
+                    });
+                    tr.append($("<td>").append(removeBtn));
+                    tbody.append(tr);
+                }
 
+                if (data.length == 0){
+                    tbody.append($("<tr>").append($("<td>").attr("colspan", 4).html(`<i class="ui green circle check icon"></i> No registered users`)));
+                }
+            }
+        });
+    }
+
+    //Bind the refresh button to the initUserList function
+    function handleUserListRefresh(){
+        initUserList();
+    }
+
+    function openRegisteredUserManager(){
+        //Open the registered user management snippet
+        showSideWrapper("snippet/sso_user.html");
+    }
 </script>

web/snippet/sso_app.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="zoraxy.csrf.Token" content="{{.csrfToken}}">
+        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
+        <script src="../script/jquery-3.6.0.min.js"></script>
+        <script src="../script/semantic/semantic.min.js"></script>
+        <script src="../script/utils.js"></script>
+        <style>
+            body{
+                height: 100%;
+                width: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <br>
+        <div class="ui container">
+            <div class="ui basic segment">
+                <h2 class="ui header">SSO App Management</h2>
+                <div class="ui divider"></div>
+                <h3>Work in progress</h3>
+            </div>
+        </div>
+    </body>
+</html>

web/snippet/sso_user.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="zoraxy.csrf.Token" content="{{.csrfToken}}">
+        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
+        <script src="../script/jquery-3.6.0.min.js"></script>
+        <script src="../script/semantic/semantic.min.js"></script>
+        <script src="../script/utils.js"></script>
+        <style>
+            body{
+                height: 100%;
+                width: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <br>
+        <div class="ui container">
+            <div class="ui basic segment">
+                <h2 class="ui header">SSO User Management</h2>
+                <div class="ui divider"></div>
+                <h3>Work in progress</h3>
+            </div>
+        </div>
+    </body>
+</html>