TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<html>

<head>
    <title>OAuth Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" href="../../script/semantic/semantic.css">
    <script type="application/javascript" src="../../script/jquery.min.js"></script>
    <script type="application/javascript" src="../../script/clipboard.min.js"></script>
    <script type="application/javascript" src="../../script/semantic/semantic.js"></script>
    <style>
        /* Tooltip container */
        
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
            /* If you want dots under the hoverable text */
        }
        /* Tooltip text */
        
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
        }
        /* Tooltip arrow */
        
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }
    </style>
</head>

<body>
    <div class="ui container">
        <div class="ui basic segment">
            <div class="ui header">
                <i class="key icon"></i>
                <div class="content">
                    OAuth Access
                    <div class="sub header">Allow external account to access ArozOS with OAuth 2.0</div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div class="ui green inverted segment" style="display:none;" id="updateSet">
            <h5 class="ui header">
                <i class="checkmark icon"></i>
                <div class="content">
                    Setting Updated
                </div>
            </h5>
        </div>
        <div class="ui form">
            <div class="field">
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="enable" name="public">
                    <label>Enable OAuth</label>
                </div>
            </div>
            <div class="field">
                <label>Select OAuth IdP (aka Service provider)</label>
                <div class="ui selection fluid dropdown" autocomplete="false">
                    <input type="hidden" id="idp" name="idp" autocomplete="false">
                    <i class="dropdown icon"></i>
                    <div class="default text">Select service provider</div>
                    <div id="idplist" class="menu">

                    </div>
                </div>
            </div>
            <div class="field">
                <label>Redirect URL (you have to provide <span id="redirectspan">https://YOUR_DOMAIN/system/auth/oauth/authorize</span> at the 3rd auth rely)</label>
                <div class="ui fluid input">
                    <input type="text" id="redirecturl" placeholder="https://YOUR_DOMAIN/">
                </div>
            </div>
            <div class="field" id="server" style="display: none;">
                <label>Server URL</label>
                <div class="ui fluid input">
                    <input type="text" id="serverurl" placeholder="http://YOUR_DOMAIN/">
                </div>
            </div>
            <div class="field">
                <label>Client ID</label>
                <div class="ui fluid input">
                    <input type="text" id="clientid" placeholder="Client ID">
                </div>
            </div>
            <div class="field">
                <label>Client Secret</label>
                <div class="ui fluid input">
                    <input type="text" id="clientsecret" placeholder="Client Secret">
                </div>
            </div>
            <button id="ntb" onclick="update();" class="ui green button" type="submit">Update</button>
        </div>
        <div class="ui divider"></div>
        <br><br>
    </div>


    <script>
        $(document).ready(function() {
            loadIdpList();
            read();
            initPlaceholder();
        });

        $("#idp").change(function() {
            if ($("#idp").val() == "Gitlab") {
                $("#server").removeAttr("style");
            } else {
                $("#server").attr("style", "display:none;");
            }
        });

        $("#redirecturl").on('input propertychange', function() {
            if ($("#redirecturl").val() == "") {
                $("#redirectspan").text(window.location.origin + "/system/auth/oauth/authorize");
            } else {
                $("#redirectspan").text($("#redirecturl").val() + "/system/auth/oauth/authorize");
            }
        });

        function read() {
            $.getJSON("../../system/auth/oauth/config/read", function(data) {
                if (data.enabled) {
                    $("#enable").parent().checkbox("check")
                }
                $("#idp").parent().dropdown("set selected", data.idp);
                $("#serverurl").val(data.server_url);
                $("#redirecturl").val(data.redirect_url);
                $("#clientid").val(data.client_id);
                $("#clientsecret").val(data.client_secret);
            });
        }

        function update() {
            $.post("../../system/auth/oauth/config/write", {
                    enabled: $("#enable").parent().checkbox("is checked"),
                    idp: $("#idp").val(),
                    redirecturl: $("#redirecturl").val(),
                    clientid: $("#clientid").val(),
                    clientsecret: $("#clientsecret").val(),
                    serverurl: $("#serverurl").val()
                })
                .done(function(data) {
                    if (data.error != undefined) {
                        alert(data.error);
                    } else {
                        //OK!
                        $("#updateSet").stop().finish().slideDown("fast").delay(3000).slideUp('fast');
                    }
                });
        }

        function loadIdpList() {
            $("#idplist").html("");
            var data = ["Google", "Microsoft", "Github", "Gitlab"];
            if (data.error !== undefined) {
                alert(data.error);
            } else {
                for (var i = 0; i < data.length; i++) {
                    let idpinfo = data[i];
                    $("#idplist").append(`<div class="item" data-value="${idpinfo}">${idpinfo}</div>`);
                }
            }
            $("#idplist").parent().dropdown();
        }

        function initPlaceholder() {
            $("#redirectspan").text(window.location.origin + "/system/auth/oauth/authorize");
            $("#redirecturl").attr("placeholder", window.location.origin);
            $("#serverurl").attr("placeholder", "https://gitlab.com");
        }
    </script>
</body>

</html>