TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
							<!DOCTYPE html>
<html>
<head>
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script src="../../script/jquery.min.js"></script>
	<script src="../../script/semantic/semantic.min.js"></script>
    <style>
        .hidden{
            display:none;
        }

        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <br>
   <div class="ui container">
        <div class="ui header">
            FTP Server
            <div class="sub header">Access your arozos virtual file system with File Transfer Protocol.</div>
        </div>
        <div id="ok" class="ui secondary inverted green segment" style="display:none;">
            <i class="checkmark icon"></i> Setting Applied
        </div>
        <div id="error" class="ui secondary inverted red segment" style="display:none;">
            <i class="remove icon"></i> <span class="msg">Something went wrong</span>
        </div>
        <div class="ui blue message windowsonly" style="display:none;">
            <h4 class="ui header">
                <i class="windows icon"></i>
                <div class="content">
                    FTP Server Endpoint
                    <div class="sub header">ftp://<span class="hostname"></span>:<span class="port"></span></div>
                </div>
            </h4>
            <p>To connect your File Explorer to the ArozOS FTP server, enter the link above into the address bar of your file explorer window.</p>
            <p>If you <b><a href="https://superuser.com/questions/1309756/not-able-to-access-ftp-server-from-other-machines-in-same-lan-when-windows-firew">cannot access the FTP without turning off the Windows Firewall</a></b>, execute this command in cmd as administrator<br>
            <code>netsh advfirewall set global StatefulFTP disable</code></p>
        </div>
        <div class="ui basic message maconly" style="display:none;">
            <h4 class="ui header">
                <i class="apple icon"></i>
                <div class="content">
                    FTP Server Endpoint
                    <div class="sub header">ftp://<span class="hostname"></span>:<span class="port"></span></div>
                </div>
            </h4>
            <p>To connect your Finder to the ArozOS FTP server, select <code>Go</code> <i class="arrow right icon"></i> <code>Connect to Server</code> and enter the link above into the address bar</p>
        </div>
        <div class="ui form">
            <div class="field">
                <div class="ui toggle checkbox">
                    <input id="enabled" type="checkbox" name="enable" onchange="toggleFTPServer(this.checked);">
                    <label>Enable FTP Server</label>
                </div>
            </div>
            <div class="field">
                <div class="ui toggle checkbox">
                    <input id="useUPNP" type="checkbox" name="upnp" onchange="toggleUPNP(this.checked);">
                    <label>Enable UPnP on FTP Server Port</label>
                    <small>Aka Auto Port Forwarding. Disable this option if you are connecting within Local Area Network</small>
                </div>
            </div>
            <div class="field">
                <label>Listening Port</label>
                <div class="ui labeled input">
                    <input id="listeningPort" type="number" placeholder="21" min="21" onchange="updateFTPPort(this.value)">
                </div>
            </div>
           
            <div class="field">
                <label>Enable FTP access to the following user groups: </label>
                <select id="grouplist" name="groups" multiple="" class="ui fluid dropdown">
                    <option value="">User Groups</option>
                 
                </select>
                <small><a href="../vendor/public/ftpForAdmin.html" target="_blank">Why enable FTP on administrator account is not a good idea?</a></small>
            </div>
            <div class="field">
                <button onclick="updateGroupAccess();" class="ui secondary right floated button">Update Access Policy</button>
            </div>
            <br><br>
            <div class="ui divider"></div>
            <h4>Advance Options</h4>
            <div class="ui message">
                <h4><i class="info circle icon"></i>FTP Usage under UPnP Mode</h4>
                <p>When UPnP Mode is enabled, the FTP Server must be run under force passive mode and it is only accessible outside of your NAT network (aka access from the internet).</p>
            </div>
            <br>
            <div class="field">
                <div class="ui toggle checkbox">
                    <input id="passiveMode" type="checkbox" name="passivemode" onchange="handlePassiveModeChange(this.checked);">
                    <label>Force Passive Mode</label>
                    <small>Enable this option if your server is hosted behind a NAT router, require manual port forwarding in router.</small>
                </div>
            </div>
            <div class="field">
                <label>Passive Mode Public IP Address</label>
                <div class="ui labeled input">
                    <input id="publicip" type="text">
                </div>
                <small>The public IP address of your NAT router. Currently only support IP address.</small>
            </div>
            <div class="field">
                <button onclick="updatePublicIPSetting();" class="ui secondary right floated button">Update Public IP Setting</button>
            </div>
        </div>
        <br><br>
    </div>
    <script>
        var serverAllowUPNP = false;
        var isMac = navigator.platform.indexOf('Mac') > -1;
        var isWindows = navigator.platform.indexOf('Win') > -1;

        if (isMac){
            $(".maconly").show();
        }else if (isWindows){
            $(".windowsonly").show();
        }
        $(document).ready(function(){
            //Load usergroups
            $.get("../../system/permission/listgroup", function(data){
                if (data.error !== undefined){
                    console.log(data.error);
                }else{
                    data.forEach(group => {
                        $("#grouplist").append(` <option value="${group}">${group}</option>`);
                    });
                    
                }
                $(".ui.dropdown").dropdown();

                //Init server status
                initFTPServerStatus();
            });

            
        });

        function initFTPServerStatus(){
            //Load current system status
            $.get("../../system/storage/ftp/status", function(data){
                if (data.error !== undefined){
                    console.log(data.error);
                }else{
                    if (data.Enabled == true){
                        $("#enabled")[0].checked = true;
                        $("#useUPNP").parent().removeClass("disabled");
                    }else{
                        $("#listeningPort").parent().addClass("disabled");
                        $("#useUPNP").parent().addClass("disabled");
                    }

                    $("#listeningPort").val(data.Port);
                    $(".port").text(data.Port);

                    if (data.AllowUPNP == false){
                        $("#useUPNP").parent().addClass("disabled");
                        serverAllowUPNP = false;
                    }else{
                        $("#useUPNP").parent().removeClass("disabled");
                        serverAllowUPNP = true;
                    }

                    if (data.FTPUpnpEnabled == true){
                        $("#useUPNP")[0].checked = true;

                        //Disable the chnage of force passive mode and public ip address
                        $("#passiveMode")[0].checked = true;
                        $("#passiveMode").parent().addClass("disabled");
                        $("#publicip").val(data.PublicAddr);
                        $("#publicip").parent().addClass("disabled");
                    }else{
                        $("#useUPNP")[0].checked = false;

                       //Restore to non UPnP passive mode setting
                        $("#passiveMode")[0].checked = data.PassiveMode;
                        $("#passiveMode").parent().removeClass("disabled");
                        $("#publicip").val(data.PublicAddr);
                        $("#publicip").parent().removeClass("disabled");
                    }

                    if (data.UserGroups !== undefined){
                        $('#grouplist').dropdown('set selected', data.UserGroups);
                    }

                    if (data.PassiveMode){
                        $("#passiveMode")[0].checked = true;
                    }else{
                        $("#passiveMode")[0].checked = false;
                    }

                    if (data.PublicAddr != ""){
                        $("#publicip").val(data.PublicAddr);
                    }else{
                        $("#publicip").val("");
                    }

                }

                //Update tutorial information
                $(".hostname").text(window.location.hostname);
            });
        }

        function toggleFTPServer(enabled){
            if (enabled == true){
                $.get("../../system/storage/ftp/start", function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        showOK();
                        if (serverAllowUPNP){
                            $("#useUPNP").parent().removeClass("disabled");
                        }
                        
                        $("#listeningPort").parent().removeClass("disabled");
                    }
                });
            }else{
                $.get("../../system/storage/ftp/stop", function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        showOK();
                        $("#useUPNP").parent().addClass("disabled");
                        $("#listeningPort").parent().addClass("disabled");
                    }
                });
            }
        }

        function toggleUPNP(enabled){
            if (enabled){
                $.get("../../system/storage/ftp/upnp?enable=true", function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        setTimeout(function(){
                            handleUpnpStateCheck(true);
                        }, 1000);
                    }
                });
            }else{
                $.get("../../system/storage/ftp/upnp?enable=false", function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        setTimeout(function(){
                            handleUpnpStateCheck(false);
                        }, 1000);
                    }
                });
            }
        }

        function handleUpnpStateCheck(expectedUPnPState){
            console.log("Checking UPNP Enabling State")
            $.get("../../system/storage/ftp/status",function(data){
                if (data.FTPUpnpEnabled == expectedUPnPState){
                    //OK
                    showOK();
                }else{
                    //Show error
                    showError("UPnP Port Forward Request Failed");
                    $("#useUPNP")[0].checked = false;
                }

                initFTPServerStatus();
            });
        }

        function updateGroupAccess(){
            var groups = $("#grouplist").dropdown("get value");
            groups = JSON.stringify(groups)
            $.ajax({
                url: "../../system/storage/ftp/updateGroups",
                method: "POST",
                data: {"groups": groups},
                success: function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        showOK();
                    }
                }
            })
        }

        function updatePublicIPSetting(){
            var newip = $("#publicip").val();
            $.ajax({
                url: "../../system/storage/ftp/passivemode",
                data: {set: "ip", "ip": newip},
                success: function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        showOK();
                    }
                }
            })
        }

        function handlePassiveModeChange(value){
            $.ajax({
                url: "../../system/storage/ftp/passivemode",
                data: {set: "mode", "passive": value},
                success: function(data){
                    if (data.error != undefined){
                        showError(data.error);
                    }else{
                        showOK();
                    }
                    initFTPServerStatus();
                }
            })
        }


        function updateFTPPort(portNumber){
            if (portNumber < 21){
                showError("Port number must be > 21")
                return
            }
            $.ajax({
                url: "../../system/storage/ftp/setPort",
                data: {port: portNumber},
                success: function(data){
                    if (data.error !== undefined){
                        showError(data.error);
                    }else{
                        showOK();
                    }
                }
            })
        }

        function showOK(){
            $("#ok").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
        }

        function showError(msg){
            $("#error").find(".msg").text(msg);
            $("#error").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
        }

        //Update examples
        $(".thisAddr").text(window.location.hostname.replace('www.',''));

       
    </script>
</body>
</html>