TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!DOCTYPE html>
<html>
<head>
    <title>Authentication Required</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.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <style>
        .topSlate{
            background-image: url("img/auth_slate.png");
            background-repeat: no-repeat;
            background-repeat: no-repeat !important;
            background-size: 100% auto;
            background-attachment: fixed !important;
            background-color: #1a1a1a;
            height: 70px; 
            margin-bottom: 4px;
        }

        .whitefont{
            color: white !important;
        }
    </style>
</head>
<body>
    <div class="topSlate">
        <div class="ui container">
            <h3 class="ui header" style="padding-top: 12px;">
                <div class="content whitefont">
                    <span id="title">Authentication Required</span>
                    <div id="desc" class="sub header whitefont">in order to proceed this operation</div>
                </div>
            </h3>
        </div>
    </div>
    <div class="ui container">
        <div class="ui left icon small fluid input" style="margin-top: 12px;">
            <input id="username" type="text" placeholder="Username">
            <i class="user icon"></i>
        </div>
        <div class="ui left icon fluid input" style="margin-top: 12px;">
            <input id="password" type="password" placeholder="Password">
            <i class="key icon"></i>
        </div>
        <br>
        <div align="right">
            <button class="ui blue button" onclick="confirm()">Confirm</button>
            <button class="ui button" onclick="cancel()">Cancel</button>
        </div>
        
    </div>
    
    <script>
        /*
            Usage Example:
            var apiObject = {
                api: "/system/myfunction",
                data: {message: "Hello World"},
                title: "<i class='red exclamation triangle icon'></i> Danger Operation <i class='red exclamation triangle icon'></i>",
                desc: "Please enter your password to confirm operation.",
                thisuser: true, //This username as default, set to false for allowing other user name to be entered
                method: "GET"
            }

            ao_module_newfw({
                url: "SystemAO/security/authreq.html#" + encodeURIComponent(JSON.stringify(apiObject)),
                width: 480,
                height: 300,
                appicon: "SystemAO/security/img/lock.svg",
                title: "Authentication Required",
                parent: ao_module_windowID,
                callback: "handleAuthCallback"
            });

        */
       ao_module_setFixedWindowSize();
       ao_module_setWindowSize(420, 260);
       var actionObject = {};
       var method = "GET";
       if (window.location.hash.length > 1){
            var object = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
            console.log(object);

            if (typeof(object.title) != "undefined"){
                $("#title").html(object.title);
            }

            if (typeof(object.desc) != "undefined"){
                $("#desc").html(object.desc);
            }

            if (typeof(object.thisuser) != "undefined" && object.thisuser == true){
                //Load user info from server side
                $.get("../../system/desktop/user", function(data){
                    $("#username").val(data.Username);
                    $("#username").attr("readonly","true");
                    $("#username").parent().addClass("disabled");
                });
            }

            if (typeof(object.method) != "undefined" && object.method != ""){
                method = object.method;
            }

            actionObject = object;
       }else{
           //Invalid usage
       }


       function confirm(){
        $("password").parent().removeClass("error");
            var payload = actionObject.data;
            //Append custom payload to the original payload
            payload.username = $("#username").val();
            payload.password = $("#password").val();
            //Request endpoint
            $.ajax({
                url: "../../" + actionObject.api,
                data: payload,
                method: method,
                success: function(data){
                    if (data.error != undefined){
                        $("#password").parent().addClass("error");
                        if ($("#username").parent().hasClass("disabled") == false){
                            $("#username").parent().addClass("error");
                        }
                    }else{
                        if (ao_module_hasParentCallback()){
                            ao_module_parentCallback(data);
                        }

                        ao_module_close();
                    }
                    
                }
            })
       }

       function cancel(){
            if (ao_module_hasParentCallback()){
                ao_module_parentCallback(false);
            }

            ao_module_close();
       }
    </script>
</body>
</html>