zoraxy/src/web/components/sso.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>SSO</h2>
        <p>Single Sign-On (SSO) and authentication providers settings </p>
    </div>

    <div class="ui basic segment">
        <div class="ui yellow message">
            <div class="header">
                Experimental Feature
            </div>
            <p>Please note that this feature is still in development and may not work as expected.</p>
        </div>
    </div>
    <div class="ui divider"></div>
    <div class="ui basic segment">
        <h3>Authelia</h3>
        <p>Configuration settings for Authelia authentication provider.</p>

        <form class="ui form">
            <div class="field">
                <label for="autheliaServerUrl">Authelia Server URL</label>
                <input type="text" id="autheliaServerUrl" name="autheliaServerUrl" placeholder="Enter Authelia Server URL">
                <small>Example: auth.example.com</small>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" id="useHttps" name="useHttps">
                    <label for="useHttps">Use HTTPS</label>
                    <small>Check this if your authelia server uses HTTPS</small>
                </div>
            </div>
            <button class="ui basic button" onclick="event.preventDefault(); updateAutheliaSettings();"><i class="green check icon"></i> Apply Change</button>
        </form>
    </div>
    <div class="ui divider"></div>
    <div class="ui basic segment">
        <h3>Authentik</h3>
        <p>Configuration settings for Authentik authentication provider.</p>

        <form class="ui form">
            <div class="field">
                <label for="authentikServerUrl">Authentik Server URL</label>
                <input type="text" id="authentikServerUrl" name="authentikServerUrl" placeholder="Enter Authentik Server URL">
                <small>Example: auth.example.com</small>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" id="authentikUseHttps" name="useHttps">
                    <label for="authentikUseHttps">Use HTTPS</label>
                    <small>Check this if your Authentik server uses HTTPS</small>
                </div>
            </div>
            <button class="ui basic button" onclick="event.preventDefault(); updateAuthentikSettings();"><i class="green check icon"></i> Apply Change</button>
        </form>
    </div>
    <div class="ui divider"></div>
</div>

<script>
    $(document).ready(function() {
        $.cjax({
            url: '/api/sso/Authelia',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#autheliaServerUrl').val(data.autheliaURL);
                $('#useHttps').prop('checked', data.useHTTPS);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error fetching SSO settings:', textStatus, errorThrown);
            }
        });
        $.cjax({
            url: '/api/sso/Authentik',
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#authentikServerUrl').val(data.authentikURL);
                $('#authentikUseHttps').prop('checked', data.useHTTPS);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error fetching SSO settings:', textStatus, errorThrown);
            }
        });
    });

    function updateAutheliaSettings(){
        var autheliaServerUrl = $('#autheliaServerUrl').val();
        var useHttps = $('#useHttps').prop('checked');

        $.cjax({
            url: '/api/sso/Authelia',
            method: 'POST',
            data: {
                autheliaURL: autheliaServerUrl,
                useHTTPS: useHttps
            },
            success: function(data) {
                if (data.error != undefined) {
                    $.msgbox(data.error, false);
                    return;
                }
                msgbox('Authelia settings updated', true);
                console.log('Authelia settings updated:', data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error updating Authelia settings:', textStatus, errorThrown);
            }
        });
    }
    function updateAuthentikSettings(){
        var authentikServerUrl = $('#authentikServerUrl').val();
        var useHttps = $('#authentikUseHttps').prop('checked');

        $.cjax({
            url: '/api/sso/Authentik',
            method: 'POST',
            data: {
                authentikURL: authentikServerUrl,
                useHTTPS: useHttps
            },
            success: function(data) {
                if (data.error != undefined) {
                    $.msgbox(data.error, false);
                    return;
                }
                msgbox('Authentik settings updated', true);
                console.log('Authentik settings updated:', data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error updating Authentik settings:', textStatus, errorThrown);
            }
        });
    }
</script>