<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登入 | 全方位監控系統</title>

    <!-- base css -->
    <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
    <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
    <link id="mytheme" rel="stylesheet" media="screen, print" href="lib/themes/cust-theme-15.css">
    <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="stylesheet" media="screen, print" href="lib/page-login-alt.css">
    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />

    <!-- Font Awesome -->
    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
    <!-- icheck bootstrap -->
    <link href="lib/icheck-bootstrap/icheck-bootstrap.min.css" rel="stylesheet" />
    <!-- Theme style -->
</head>
<body>
    <div class="blankpage-form-field">
        <div class="page-logo m-0 w-100 align-items-center justify-content-center rounded border-bottom-left-radius-0 border-bottom-right-radius-0 px-4">
            <div class="page-logo-link press-scale-down d-flex align-items-center">
                <img name="webLogo" src="img/logo.png" aria-roledescription="logo">
                <span class="page-logo-text mr-1">全方位監控系統</span>
            </div>
        </div>
        <div class="card p-4 border-top-left-radius-0 border-top-right-radius-0">

            <p class="alert alert-danger errMsg" hidden></p>
            <form id="login-form" method="post">
                <div class="form-group">
                    <label class="form-label" for="account">帳號</label>
                    <input type="text" id="account" name="account" class="form-control" placeholder="請輸入帳號">
                    <span class="help-block">
                        您的帳號
                    </span>
                </div>
                <div class="form-group">
                    <label class="form-label" for="password">密碼</label>
                    <input type="password" id="password" name="password" class="form-control" placeholder="請輸入密碼" autocomplete="off">
                    <span class="text-danger"></span>
                    <span class="help-block">
                        您的密碼
                    </span>
                </div>
                <div class="form-group text-left">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="rememberme">
                        <label class="custom-control-label" for="rememberme"> 記住我</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-default float-right" onclick="Login(null,event)">登入</button>
            </form>
        </div>
        <div class="blankpage-footer text-center">
            <a asp-controller="Login" asp-action="ForgotPassword"><strong>忘記密碼</strong></a>
        </div>
    </div>

    <video poster="img/backgrounds/clouds.png" id="bgvid" playsinline autoplay muted loop>
        <source src="media/video/cc.webm" type="video/webm">
        <source src="media/video/cc.mp4" type="video/mp4">
    </video>
    <!--Base JS-->
    <!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>-->
    <script src="lib/vendors.bundle.js"></script>
    <!-- JQuery Validate -->
    <!--<script src="lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="lib/jquery-validation/dist/additional-methods.min.js"></script>
    <script src="lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
    <script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>-->
    <script src="lib/notifications/toastr/toastr.min.js"></script>
    <script src="js/toast.js"></script>


    <!--Bajascript-->
    <script src="js/bajascript/bscriptReq.js"></script>
    <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
    <script src='js/bajascript/require.js'></script>

    <script src="js/n4js/bajatest.js"></script>
    <script src="js/bajascript/require.config.js"></script>
</body>
</html>

<script>
    var cookies = null;
    var remember = false;
    var myBaja = null;
    $(function () {
        require(["jquery"], loadedBasePack);
    });
    /**
    * jquery.js 二次引用後 Callback,載入第三方套件
    * */
    function loadedBasePack() {
        require(
            [
                "lib/app.bundle",
                "lib/app.menu",
                "lib/jquery-validation/dist/jquery.validate",
                "lib/jquery-validation/dist/additional-methods.min",
                "lib/jquery-validation/dist/localization/messages_zh_TW",
                /*"lib/notifications/sweetalert2/sweetalert2.bundle",*/
            ], loadedMasterPack);
    }
    /**
    * 第三方套件引用後 Callback,載入額外套件
    * */
    function loadedMasterPack() {
        require(
            [
                "yourteam/yourteam.utility.class",
                "init",
            ], loadedJsPack);
    }

    function loadedJsPack() {
       
        if (localStorage.getItem('mitsubishi-t') == 'true') {
            document.getElementById("rememberme").checked = true;
            remember = true;
            $("#account").val(atob(localStorage.getItem('mitsubishi-a')));
            $("#password").val(atob(localStorage.getItem('mitsubishi-p')));
        }
        else {
            document.getElementById("rememberme").checked = false;
        }

        var loginValidate = $("#login-form").validate({
            rules: {
                account: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                },
                password: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                }
            }
        });

        //驗證是否為空白
        jQuery.validator.addMethod("filterspace", function (value, element) {
            var str = value;
            var result = false;
            if (str.length > 0) {
                if ($.trim(str) != '') {
                    result = true;
                }
                else {
                    result = false;
                }
            }
            return result;
        }, "不可填入空白");

        $("#rememberme").click(function () {
            if (remember) {
                localStorage.setItem('mitsubishi-t', 'false');
                localStorage.removeItem('mitsubishi-a');
                localStorage.removeItem('mitsubishi-p');
                remember = false;
            } else {
                localStorage.setItem('mitsubishi-t', 'true');
                localStorage.setItem('mitsubishi-a', btoa($("#account").val()));
                localStorage.setItem('mitsubishi-p', btoa($("#password").val()));
                remember = true;
            }
        });

        $("#account").change(function () {
            if (remember) {
                localStorage.setItem('mitsubishi-a', btoa($("#account").val()));
            } else {
                localStorage.removeItem('mitsubishi-a');
            }
        });

        $("#password").change(function () {
            if (remember) {
                localStorage.setItem('mitsubishi-p', btoa($("#password").val()));
            } else {
                localStorage.removeItem('mitsubishi-p');
            }
        });

        $("#login-form").on("submit", function (e) {
            e.preventDefault();
        })

        getLogo();
    }

    function Login(account, e) {
        cookies = new YourTeam.Utility.Cookie();
        e ? e.preventDefault() : "";
        /*if ($("#login-form").valid()) {*/
        var url = baseApiUrl + "/api/Login/";
        var send_data = {
            account: account,
            password: "rJ2T5Kkj"
        }
        if (location.href.indexOf("localhost:5966") != -1) {
            send_data = {
                account: $("#account").val(),
                password: $("#password").val()
            }
        }
        $.ajax({
            method: "post",
            url: url,
            data: JSON.stringify(send_data),
            async: false,
            contentType: "application/json; charset=UTF-8",
            dataType: 'json',
            success: function (rel) {
                console.log(rel)

                //rel = JSON.stringify(rel);
                if (rel.code != "0000") {
                    toast_error(rel.msg || "系統內部發生錯誤,請聯絡系統管理員");
                    return;
                }
                else {
                    toast_ok(rel.msg);
                    cookies.create("JWT-Authorization", rel.data.token, 12 * 60 * 60 * 1000);
                    location.href = "index.html";
                    return;
                }
            },
            error: function (xhr, textStatus, thrownError) {
                alert(textStatus);
            }
        });

    }

    function getLogo() {
        $.ajax({
            method: "post",
            url: 'api/GetLogo',
            async: false,
            success: function (rel) {
                $('[name=webLogo]').attr('src', 'img/' + rel);
			}
        })
	}

</script>

<script type="text/javascript">
    //#region 登入表單驗證

    //#endregion


</script>