TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<html>
    <head>
        <title>Auto Login Mode</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="tv icon"></i>
                    <div class="content">
                        Auto Login Mode
                        <div class="sub header">Allow automatic bot login and interface module displaying</div>
                    </div>
                </div>
                <p>This function allows a given user to login automatically using a given token and display its interface module. Although this is design for billboard purpose, you can also use this function for other purposes like web service demo and more.<br>
                <span style="font-weight: bold; color: red;">Please treat the token of your account as your password</span></p>
            </div>
            <div class="ui divider"></div>
            <div class="ui form">
                <div class="field">
                    <label>Select User Account</label>
                    <div class="ui selection fluid dropdown" autocomplete="false">
                        <input type="hidden" name="username" onchange="updateUserInfo(this.value);" autocomplete="false">
                        <i class="dropdown icon"></i>
                        <div class="default text">Select User Account</div>
                        <div id="userlist" class="menu">
                         
                        </div>
                    </div>
                </div>
                <div id="adminwarning" class="ui yellow segment" style="display:none">
                    <i class="info circle icon"></i> We do not recommend enabling auto login on Administrator accounts due to security issues. Click <a href="../vendor/public/autoLoginForAdmin.html" target="_blank">HERE</a> to learn more.
                </div>
                <button id="ntb" onclick="newToken(event);" class="ui green disabled button" type="submit">New Token</button>
                <button onclick="refreshTokenList();" class="ui blue button"><i class="refresh icon"></i>Refresh List</button>
                <div class="ui green segment" style="display:none;">
                    <h4>Token Created: </h4>
                    <p id="newTokenDisplay"></p>
                </div>
            </div>
            <div class="ui divider"></div>
            <div class="ui bottom attached segment">
                <h4>Selected User's Tokens</h4>
                <div id="tokenlist" class="ui list">
                    <p>Please select a target user</p>
                </div>
            </div>
            <br><br>
        </div>
        
        
        <script>
            var currentSelectedUsername = "";
            var tokenAccessPath = location.protocol + "//" + window.location.host + "/api/auth/login?token=";
            $(document).ready(function(){
                loadUserList();
            });

            function updateUserInfo(userinfo){
                userinfo = JSON.parse(decodeURIComponent(userinfo));
                if (userinfo[3] == true){
                    $("#adminwarning").slideDown("fast");
                }else{
                    $("#adminwarning").slideUp("fast");
                }
                updateTokenList(userinfo[0]);

                $("#ntb").removeClass("disabled");
                currentSelectedUsername = userinfo[0];
                $("#newTokenDisplay").parent().hide();
            }

            function refreshTokenList(){
                updateTokenList(currentSelectedUsername);
            }

            function newToken(){
                event.preventDefault();
                if (currentSelectedUsername == ""){
                    return
                }

                $.get("../../system/autologin/create?username=" + currentSelectedUsername, function(newToken){
                    if (newToken.error !== undefined){
                        $("#newTokenDisplay").text(newToken.error);
                        $("#newTokenDisplay").parent().removeclass("green").addClass("red");
                    }else{
                        $("#newTokenDisplay").text(newToken);
                        $("#newTokenDisplay").parent().addClass("green").removeclass("red");
                    }
                    
                });
                setTimeout(function(){
                    updateTokenList(currentSelectedUsername);
                }, 1000);

                $("#newTokenDisplay").parent().show();
            }

            function updateTokenList(username){
                $("#tokenlist").html("");
                $.get("../../system/autologin/list?username=" + username, function(data){
                    data.forEach(token => {
                        $("#tokenlist").append(`
                    <div class="item">
                        <i class="key icon"></i>
                        <div class="content" style="font-family: monospace;">
                           ${token} <a style="margin-left: 12px; font-family: Arial;" token="${token}" class="copyURL tooltip">
                                <i class="copy icon"></i> Copy URL to Clipboard
                                <span class="tooltiptext"><i class="checkmark icon"></i> Copied</span>
                           </a> 
                           <a style="margin-left: 12px; color: red; font-family: Arial;" token="${token}" onclick="deleteToken(this);">
                                <i class="remove icon"></i> Delete
                           </a>
                        </div>
                    </div>`);
                    });

                    if (data.length == 0){
                        $("#tokenlist").append(`
                        <div class="item">
                            <i class="question icon"></i>
                            <div class="content" style="font-family: monospace;">
                               No Token Found
                            </div>
                        </div>`);
                    }
                  
                });
            }

            new ClipboardJS('.copyURL', {
                text: function(trigger) {
                        var token = $(trigger).attr("token");
                        var url = tokenAccessPath + token;
                        console.log( $(trigger).find(".tooltiptext"));
                        $(trigger).find(".tooltiptext").css({
                            "visibility": "visible",
                            "opacity": 1,
                        });
                        setTimeout(function(){
                            $(trigger).find(".tooltiptext").css({
                                "visibility": "hidden",
                                "opacity": 0,
                            });
                        }, 3000);
                    return url;
                }
            });

            function deleteToken(object){
                if (confirm("This token will be removed permanently. Confirm?")){
                    var token = $(object).attr("token");
                    $.get("../../system/autologin/delete?token=" + token, function(data){
                        updateTokenList(currentSelectedUsername);
                    });
                }
              
                
            }

            function loadUserList(){
                $("#userlist").html("");
                $.get("../../system/users/list", function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        for (var i = 0; i < data.length; i++){
                            let userinfo = data[i];
                            $("#userlist").append(`<div class="item" data-value="${encodeURIComponent(JSON.stringify(userinfo))}" isadmin="${userinfo[3]}">${userinfo[0]}</div>`);
                        }
                    }
                    $("#userlist").parent().dropdown();
                });
            }
        </script>
    </body>
</html>