Zoraxy/web/components/sso.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Zoraxy SSO / Oauth</h2>
        <p>A centralized authentication system for all your subdomains</p>
        <div class="ui divider"></div>
        <div class="ui basic segment enabled ssoRunningState">
            <h4 class="ui header" id="ssoRunningState">
                <i class="circle check icon"></i>
                <div class="content">
                    <span class="webserv_status">Running</span>
                    <div class="sub header">Listen port :<span class="oauthserv_port">8081</span></div>
                </div>
            </h4>
        </div>
        <div class="ui form">
            <h4 class="ui dividing header">Oauth2 Server</h4>
            <div class="field">
                <div class="ui toggle checkbox">
                    <input type="checkbox" name="enableOauth2">
                    <label>Enable Oauth2 Server<br>
                    <small>Oauth2 server for handling external authentication requests</small></label>
                </div>
            </div>
            <div class="field">
                <label>Oauth2 Server Port</label>
                <div class="ui action input">
                    <input type="number" name="oauth2Port" placeholder="Port" value="5488">
                    <button id="saveOauthServerPortBtn" class="ui basic green button"><i class="ui green circle check icon"></i> Update</button>         
                </div>
                <small>Listening port of the Zoraxy internal Oauth2 Server.You can create a subdomain proxy rule to <code>127.0.0.1:<span class="ssoPort">5488</span></code></small>
            </div>
            <div class="field">
                <label>Auth URL</label>
                <div class="ui action input">
                    <input type="text" name="authURL" placeholder="https://auth.yourdomain.com">
                    <button id="saveAuthURLBtn" class="ui basic blue button"><i class="ui blue save icon"></i> Save</button>
                </div>
                <small>The exposed authentication URL of the Oauth2 server, usually <code>https://auth.example.com</code> or <code>https://sso.yourdomain.com</code>. <b>Remember to include the http:// or https:// in your URL.</b></small>
            </div>
        </div>
        <div class="ui divider"></div>
        <div>
            <h3 class="ui header">
                <i class="ui blue user circle icon"></i>
                <div class="content">
                    Registered Users
                  <div class="sub header">A list of users that are registered with the SSO server</div>
                </div>
            </h3>
        </div>
        <div class="ui divider"></div>
        <div>
            <h3 class="ui header">
                <i class="ui green th icon"></i>
                <div class="content">
                    Registered Apps
                  <div class="sub header">A list of apps that are registered with the SSO server</div>
                </div>
            </h3>
            <p></p>
        </div>
    </div>
</div>

<script>
    $("input[name=oauth2Port]").on("change", function() {
        $(".ssoPort").text($(this).val());
    });

    function updateSSOStatus(){
        $.get("/api/sso/status", function(data){
            if(data.error != undefined){
                //Show error message
                $(".ssoRunningState").removeClass("enabled").addClass("disabled");
                $("#ssoRunningState .webserv_status").html('Error: '+data.error);
            }else{
                if (data.Enabled){
                    $(".ssoRunningState").addClass("enabled");
                    $("#ssoRunningState .webserv_status").html('Running');
                    $(".ssoRunningState i").attr("class", "circle check icon");
                    $("input[name=enableOauth2]").parent().checkbox("set checked");
                }else{
                    $(".ssoRunningState").removeClass("enabled");
                    $("#ssoRunningState .webserv_status").html('Stopped');
                    $(".ssoRunningState i").attr("class", "circle times icon");
                    $("input[name=enableOauth2]").parent().checkbox("set unchecked");
                }
                $("input[name=oauth2Port]").val(data.ListeningPort);
                $(".oauthserv_port").text(data.ListeningPort);
                $("input[name=authURL]").val(data.AuthURL);
            }
        });
    }


    function initSSOStatus(){
        $.get("/api/sso/status", function(data){
            //Update the SSO status from the server
            updateSSOStatus();

            //Bind events to the enable checkbox
            $("input[name=enableOauth2]").off("change").on("change", function(){
                var checked = $(this).prop("checked");
                $.cjax({
                    url: "/api/sso/enable",
                    method: "POST",
                    data: {
                        enable: checked
                    },
                    success: function(data){
                        if(data.error != undefined){
                            msgbox("Failed to toggle SSO: " + data.error, false);
                            //Unbind the event to prevent infinite loop
                            $("input[name=enableOauth2]").off("change");
                        }else{
                            initSSOStatus();
                        }
                    }
                });
            });
        });
    }
    initSSOStatus();

    /* Save the Oauth server port */
    function saveOauthServerPort(){
        var port = $("input[name=oauth2Port]").val();
        //Check if the port is valid
        if (port < 1 || port > 65535){
                msgbox("Invalid port number", false);
                return;
        }
        //Use cjax to send the port to the server with csrf token
        $.cjax({
            url: "/api/sso/setPort",
            method: "POST",
            data: {
                port: port
            },
            success: function(data) {
                if (data.error != undefined) {
                    msgbox("Failed to update Oauth server port: " + data.error, false);
                } else {
                    msgbox("Oauth server port updated", true);
                    
                }
                updateSSOStatus();
            }
        });
    }
    //Bind the save button to the saveOauthServerPort function
    $("#saveOauthServerPortBtn").on("click", function() {
        saveOauthServerPort();
    });
    $("input[name=oauth2Port]").on("keypress", function(e) {
        if (e.which == 13) {
            saveOauthServerPort();
        }
    });

    /* Save the Oauth server URL (aka AuthURL) */
    function saveAuthURL(){
        var url = $("input[name=authURL]").val();
        //Make sure the url contains http:// or https://
        if (!url.startsWith("http://") && !url.startsWith("https://")){
            msgbox("Invalid URL. Make sure to include http:// or https://", false);
            $("input[name=authURL]").parent().parent().addClass("error");
            return;
        }else{
            $("input[name=authURL]").parent().parent().removeClass("error");
        }
        //Use cjax to send the port to the server with csrf token
        $.cjax({
            url: "/api/sso/setAuthURL",
            method: "POST",
            data: {
                "auth_url": url
            },
            success: function(data) {
                if (data.error != undefined) {
                    msgbox("Failed to update Oauth server port: " + data.error, false);
                } else {
                    msgbox("Oauth server port updated", true);
                    
                }
                updateSSOStatus();
            }
        });
    }

    //Bind the save button to the saveAuthURL function
    $("#saveAuthURLBtn").on("click", function() {
        saveAuthURL();
    });
    $("input[name=authURL]").on("keypress", function(e) {
        if (e.which == 13) {
            saveAuthURL();
        }
    });
    

</script>