TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!DOCTYPE html>
<html>
<head>
    <title>Connection Log</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>
    <style>
        a.pageFocus {
            background: #222222;
            color: white !important;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            display: inline-block;
            font-weight: bold;
            line-height: 30px;
            margin-right: 2px;
            text-align: center;
            width: 30px;
        }

        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                        supported by Chrome, Edge, Opera and Firefox */
        }
    </style>
</head>
<body>
    <div class="ui container" style="height: 100% !important;">
        <div>
            <p>Connection Attempts</p>
            <h1 class="ui header">
                <span id="normalStatus">Analysing</span>
                <div class="sub header">
                    <span id="loginAptCount"></span> login request logged this month with <span id="incorrectRatio"></span> incorrect password attempts.
                </div>
            </h1>
            <div class="ui divider"></div>
            <div class="ui fluid selection dropdown">
                <input type="hidden" name="tablekey" onchange="loadRecords(this);">
                <i class="dropdown icon"></i>
                <div class="default text">Date</div>
                <div id="recordTables" class="menu">

                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div>
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th>Accepted</th>
                        <th>Timestamp</th>
                        <th>Requested Account</th>
                        <th>IP Address</th>
                        <th>Connection Type</th>
                        <th>Access Port</th>
                    </tr>
                </thead>
                <tbody id="records">
                
                </tbody>
            </table>
            <div style="width: 100%" align="center">
                <div class="ui breadcrumb" id="pageIndexs">
                </div>
            </div>
        </div>
        <br><br>
    </div>
    
    <script>
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var maxPage = 0;
        var recordPerPage = 20;
        $(".ui.dropdown").dropdown();
        initMonthList();
       
        //Get the table that belongs to today. Put in offset if the current month not found in list
        function getCurrentMonthTable(monOffset = 0){
            const d = new Date();
            return monthNames[d.getMonth() - monOffset] + "-" + d.getFullYear()
        }

        //Get the month list
        function initMonthList(){
            $.ajax({
                url: "../../system/auth/logger/index",
                success: function(data){
                    var currentMonthTable = getCurrentMonthTable();
                    var currentMontHTableExists = false;
                    if (data.error){
                        alert(data.error);
                    }else{
                        $("#recordTables").html("");
                        data.forEach(tableName => {
                            if (tableName == currentMonthTable){
                                currentMontHTableExists = true;
                            }
                            $("#recordTables").append(`<div class="item" data-value="${tableName}">${tableName}</div>`);
                        });

                        if (data.length == 0){
                            //No record
                            $("#normalStatus").parent().attr("class","ui header");
                            $("#normalStatus").text("No Record");
                            $("#incorrectRatio").text("0%");
                            $("#loginAptCount").text("0");
                        }
                    }

                    //Select the current month if it exists
                    if (currentMontHTableExists){
                        setTimeout(function(){
                            $("#recordTables").parent().dropdown("set selected", getCurrentMonthTable());
                        }, 500);
                        loadRecordsByTableName(getCurrentMonthTable());
                    }else{
                        $("#normalStatus").text("No Record");
                    }
              
                    
                }
            });
        }

        function loadRecordsByTableName(tableName){
            $.ajax({
                url: "../../system/auth/logger/list",
                data: {record: tableName},
                success: function(data){
                    $("#records").html("");
                    $("#pageIndexs").html("");
                    if (data.error !== undefined){
                        $("#records").html(`<tr>
                            <td data-label="status" colspan="5"><i class="remove icon"></i> ${data.error}</td>
                        </tr>`);
                    }else{
                        if (data.length == 0){
                            $("#records").html(`<tr>
                                <td data-label="status" colspan="5"><i class="checkmark icon"></i> No login record in this time period.</td>
                            </tr>`);
                        }else{
                            //console.log(data);
                            //Reverse the array so the latest login on top
                            var pageCounter = 1;
                            var recordCounter = 0;
                            var pageIndexs = [`<a class="active section pageLabel page1 noselect" onclick="showPage(1);">1</a>`];
                            data.reverse();
                            data.forEach(entry => {
                                var timestamp = getDatetimeFromTimestamp(entry.Timestamp);
                                var statusIcon = `<i class="green checkmark icon"></i>`;
                                if (entry.LoginSucceed == false){
                                    statusIcon = `<i class="red remove icon"></i>`;
                                }

                                var authType = entry.AuthType;
                                if (authType == ""){
                                    authType = "N/A"
                                }else if (authType == "web"){
                                    authType = `<i class="blue globe icon"></i> Web Interface`
                                }else if (authType == "ftp"){
                                    authType = `<i class="yellow folder icon"></i> FTP`
                                }else if (authType == "webdav"){
                                    authType = `<i class="blue folder icon"></i> WebDAV`
                                }

                                $("#records").append(`<tr class="recordItem page${pageCounter}">
                                    <td data-label="status">${statusIcon}</td>
                                    <td data-label="timestamp">${timestamp}</td>
                                    <td data-label="acc">${entry.TargetUsername}</td>
                                    <td data-label="ip">${entry.IpAddr}</td>
                                    <td data-label="authtype">${authType}</td>
                                    <td data-label="port">${entry.Port}</td>
                                </tr>`);

                                recordCounter++;
                                if (recordCounter % recordPerPage == 0){
                                    //Next page
                                    pageCounter++;
                                    pageIndexs.push(`<a class="section pageLabel page${pageCounter} noselect" onclick="showPage(${pageCounter});">${pageCounter}</a>`);
                                }
                            });

                            $("#pageIndexs").html(pageIndexs.join(`<span class="divider">/</span>`));

                            maxPage = pageCounter;
                            updateSummaryText(data);
                            showPage(1);
                        }
                    }
                }
            });
        }

        function showPage(pageNumber){
            if (pageNumber < 1){
                pageNumber = 1;
            }

            if (pageNumber > maxPage){
                pageNumber = maxPage;
            }

            $(".recordItem").hide();
            $(`.recordItem.page${pageNumber}`).show();
            $(".pageLabel.active").removeClass("active").removeClass("pageFocus");
            $(`.pageLabel.page${pageNumber}`).addClass("active").addClass("pageFocus");
        }

        function loadRecords(object){
            var tableName = object.value;
            loadRecordsByTableName(tableName);
        }

        function updateSummaryText(records){
            if (records.length == 0){
                $("#normalStatus").parent().attr("class","ui header");
                $("#normalStatus").text("No Record");
                $("#loginAptCount").text("No ");
                return;
            }
            var succ = 0;
            var failed = 0;

            //Calculate the risk ratio
            records.forEach(entry => {
                if (entry.LoginSucceed){
                    succ++;
                }else{
                    failed++;
                }
            });

            //Do a quick summary
            var failRatio = (failed) / (succ + failed) * 100;
            if (failRatio > 70){
                $("#normalStatus").parent().attr("class","ui red header");
                $("#normalStatus").text("HIGH RISK");
            }else if (failRatio > 50){
                $("#normalStatus").parent().attr("class","ui yellow header");
                $("#normalStatus").text("LOW RISK");
            }else{
                // No problem
                $("#normalStatus").parent().attr("class","ui green header");
                $("#normalStatus").text("Normal");
                
            }
            $("#incorrectRatio").text(failRatio.toFixed(1) + "%");
            $("#loginAptCount").text(succ + failed);
        }

       function getDatetimeFromTimestamp(timestamp){
            var s = new Date(timestamp * 1000);
            var localOption =Intl.DateTimeFormat().resolvedOptions()
            var options = { timeZone: 'UTC' };
            if (localOption != undefined && localOption.timeZone != undefined){
                options.timeZone = localOption.timeZone;
            }
            
            return s.toLocaleDateString(undefined,options) + " " +  s.toLocaleTimeString(undefined,options);
       }
    </script>
</body>
</html>