Every St. Cloud State student has her/his own web space, which is sadly under-utilized. I decided to create a page that allowed them to log in and edit this page, right in the browser!

scsuftp_app.js

$(document).ready(function($, ace) {

    ace.config.set('basePath', '../js/lib/ace');

    var editor = ace.edit("editor");
    editor.$blockScrolling = Infinity;
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/html");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    editor.commands.addCommand({
        name: "save",
        bindKey: {win: "Ctrl-S", mac: "Command-S"},
        exec: saveFile
    });

    var FILENAME = "";

    function openFile(fileName) {
        FILENAME = fileName;
        $.ajax({
            url: "getFile.php",
            method: "GET",
            data: {
                "fileName": fileName,
                "action": "read",
                "user": $("#sid").val(),
                "pass": $("#spass").val()
            },
            dataType: "html"
        }).done(function(data, status) {
            if (status == "success") {
                editor.setValue(data);
            }

            console.log(status);
        });
    }
    window.openFile = openFile;

    function saveFile() {
        if(FILENAME) {
            $.ajax({
                url: "getFile.php",
                method: "POST",
                data: {
                    "fileName": FILENAME || "testing.html",
                    "action": "write",
                    "user": $("#sid").val(),
                    "pass": $("#spass").val(),
                    "data": editor.getValue() || "oops!"
                },
                dataType: "html"
            }).done(function(data, status) {
                if (status == "success") {
                    alert("File saved!");
                    console.log(data);
                } else {
                    alert("Oops! Something went wrong...");
                }
            })
        }
    }
    window.saveFile = saveFile;

}(jQuery, ace));

scsuftp_getFile.php

<?php
    /**
     * Returns decrypted original string
     */
    function decrypt($encrypted_string, $encryption_key) {
        $iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
        $iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
        $decrypted_string = mcrypt_decrypt(MCRYPT_BLOWFISH, $encryption_key, $encrypted_string, MCRYPT_MODE_ECB, $iv);
        return $decrypted_string;
    }

    $action = isset( $_GET['action'] ) ? $_GET['action'] : (isset ($_POST['action']) ? $_POST['action'] : "");

    if ($action == "write") {
        require_once "HTTP/WebDAV/Client.php";

        $client = new HTTP_WebDAV_Client_Stream();

        $user = $_POST['user'];
        $pass = $_POST['pass'];
        $data = $_POST['data'];
        $fileName = $_POST['fileName'];

        $dir = "webdavs://" . $user . ":" . $pass . "@webfs.stcloudstate.edu/main/hcwebdav/FileSpace/WebSpace/";

        $dh = fopen($dir.$fileName, "w");

        if (!$dh) {
            die("Error opening directory :(");
        } else {
            fwrite($dh, $data);
            fclose($dh);
            echo("File write successful!");
        }
    } else if ($action == "read") {

        require_once "HTTP/WebDAV/Client.php";

        $user = $_GET['user'];
        $pass = $_GET['pass'];
        $fileName = $_GET['fileName'];

        $dir = "webdavs://" . $user . ":" . $pass . "@webfs.stcloudstate.edu/main/hcwebdav/FileSpace/WebSpace/";

        $file = fopen($dir.$fileName, "rb");
        //$content;

        if (!$file) {

            die("Error opening file :( $user $pass");

        } else {
            echo file_get_contents($dir.$fileName);

            /*
            while ($line = fread($file, 8192)) {
                $content .= $line;
            }
            echo $content;

            fclose($file);
            */

        }

    } else {
        echo "ERROR: unknown action $action";
        exit;
    }
?>

scsuftp_index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            SCSU WebDav Login Test
        </title>
        <?php include("../include.php") ?>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <form action="test2.php?action=login" method="post">

                        <div class="input-group">
                            <label for="starID">StarID</label>
                            <input type="text" class="form-control" name="starID" placeholder="StarID" required autofocus maxlength="8" />
                        </div>
                        <div class="input-group">
                            <label for="starPass">Pass</label>
                            <input type="password" class="form-control" name="starPass" placeholder="StarID Password" required />
                        </div>
                        <div class="input-group">
                            <div class="buttons">
                                <input type="submit" name="login" value="Login" />
                            </div>
                        </div>

                    </form>
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
    </body>
</html>

scsuftp_test.php

Result: <?php
    $action = isset( $_GET['action'] ) ? $_GET['action'] : "";
    
    if ($action != "login") {
        echo "WRONG";
        exit;
    } else {
        $user = $_POST['starID'];
        $pass = $_POST['starPass'];

        require_once "HTTP/WebDAV/Client.php";

        $name = "webdavs://".$user.":".$pass."@webfs.stcloudstate.edu/main/hcwebdav/FileSpace/WebSpace/";

        $dh = opendir($name);
        if (!$dh) die("nope");

        while (false != ($file = readdir($dh))) {
            echo "$file<br />";
        }

        closedir($dh);
        $user = "";
        $pass = "";
    }

    
?>

scsuftp_test2.php

<!DOCTYPE HTML>
<?php

    $action = isset( $_GET['action'] ) ? $_GET['action'] : "";
    
    if ($action != "login") {
        echo "WRONG";
        exit;
    } else {
        require_once "HTTP/WebDAV/Client.php";

        $client = new HTTP_WebDAV_Client_Stream();

        $user = $_POST['starID'];
        $pass = $_POST['starPass'];
        
        $path = "webdavs://".$user.":".$pass."@webfs.stcloudstate.edu/main/hcwebdav/FileSpace/WebSpace/";

        @$dir = opendir($path);

        $fileList = array();
        $dirList = array();

        if (!$dir) {
            $error = "Error opening directory";
        } else {

            while (false !== ($file = readdir($dir))) {
                $file = trim($file);
                if ($file != "") {
                    if (strpos($file, '.')) {
                        array_push($fileList, $file);
                    } else {
                        array_push($dirList, $file);
                    }
                }
            }

            closedir($dir);

        }

        /**
         * Returns an encrypted & utf8-encoded
         */
        function encrypt($pure_string, $encryption_key) {
            $iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
            $iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
            $encrypted_string = mcrypt_encrypt(MCRYPT_BLOWFISH, $encryption_key, utf8_encode($pure_string), MCRYPT_MODE_ECB, $iv);
            return $encrypted_string;
        }
    }
?>
<html>
    <head>
        <title>SCSU Mini-IDE</title>

        <?php include("../include.php"); ?>

        <script type="text/javascript" src="../js/lib/ace/ace.js"></script>
        <script type="text/javascript" src="../js/lib/ace/ext-language_tools.js"></script>
        <script type="text/javascript" src="../js/lib/ace/ext-settings_menu.js"></script>
        <script type="text/javascript" src="../js/lib/ace/ext-statusbar.js"></script>
        <script type="text/javascript" src="../js/lib/ace/ext-keybinding_menu.js"></script>
        <script type="text/javascript" src="../js/lib/ace/worker-javascript.js"></script>
        <script type="text/javascript" src="../js/lib/ace/worker-html.js"></script>

        <style type="text/css">
            html, body, .container-fluid {
                height: 100%;
                background-color: #000;
            }

            .container-fluid {
                display: table;
                width: 100%;
                margin-top: -50px;
                padding-top: 50px;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            header {
                max-height: 50px;
            }

            .row {
                height: 100%;
                display: table-row;
            }

            .no-float {
                float: none;
            }

            .dropdown-submenu {
                position: relative;
            }

            .dropdown-submenu>.dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px;
                border-radius: 0 6px 6px 6px;
            }

            .dropdown-submenu:hover>.dropdown-menu {
                display: block;
            }

            .dropdown-submenu>a:after {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #ccc;
                margin-top: 5px;
                margin-right: -10px;
            }

            .dropdown-submenu:hover>a:after {
                border-left-color: #fff;
            }

            .dropdown-submenu.pull-left {
                float: none;
            }

            .dropdown-submenu.pull-left>.dropdown-menu {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }
        </style>
    </head>
    <body>
        <?php
            echo "<input type='hidden' id='sid' value=\"" . $user . "\" />";
            echo "<input type='hidden' id='spass' value=\"" . $pass . "\" />";

            $user = "";
            $pass = "";
        ?>
        <header>
            <div class="dropdown">
                <a role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#">
                    Load <span class="caret"></span>
                </a>
                <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                    <?php
                    if ($error) {
                    } else {
                        foreach ($fileList as $theFile) {?>
                        <li><a onclick="openFile('<?php echo $theFile ?>')"><?php echo $theFile ?></a></li>
                        <?php }

                        foreach ($dirList as $theDir) {

                            @$subDir = opendir($path.$theDir);

                            if ($subDir) { ?>
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#"><?php echo $theDir ?></a>
                            <ul class="dropdown-menu">
                        <?php
                                while (false !== ($subFile = readdir($subDir))) {

                                    $subFile = trim($subFile);

                                    if ($subFile != "") {
                                        if (strpos($subFile, '.')) { ?>


                                <li><a href="#" onclick="openFile('<?php echo $theDir."/".$subFile; ?>')"><?php echo $subFile ?></a></li>


                                        <?php }
                                    }
                                }
                        ?>

                            </ul>
                        </li>

                        <?php


                            } else {

                            }

                        }
                    }
                    ?>
                </ul>
            </div>
        </header>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 no-float" style="height:100%;" id="editor">
                </div>
            </div>
        </div>


        <script src="app.js" type="text/javascript"></script>

    </body>
</html>