webvirtcloud/console/templates/console-vnc-lite.html

{% extends "console-base.html" %}
{% load i18n %}
{% load static %}

{% block head %}
<!--
    noVNC example: lightweight example using minimal UI and features
    This is a self-contained file which doesn't import WebUtil or external CSS.
    Copyright (C) 2019 The noVNC Authors
    noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
    This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
    Connect parameters are provided in query string:
        http://example.com/?scale=true (the proxy host, port and path come from the server)
-->
<title>WebVirtCloud - noVNC - Lite</title>

<meta charset="utf-8">

<!-- Always force latest IE rendering engine (even in intranet) &
                Chrome Frame. Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- Stylesheets -->
<link rel="stylesheet" href='{% static "js/novnc/app/styles/lite.css" %}'>

<!-- actual script modules -->
<script type="module" crossorigin="anonymous">
    // RFB holds the API to connect and communicate with a VNC server
    import RFB from '{% static "js/novnc/core/rfb.js" %}';
    import { bindKeyAction, bindSendKeys } from '{% static "js/console_keys.js" %}';

    let rfb;
    let desktopName;

    // When this function is called we have
    // successfully connected to a server
    function connectedToServer(e) {
        status("Connected to " + desktopName);
    }

    // This function is called when we are disconnected
    function disconnectedFromServer(e) {
        if (e.detail.clean) {
            status("Disconnected");
        } else {
            status("Something went wrong, connection is closed");
        }
    }

    // When this function is called, the server requires
    // credentials to authenticate
    function credentialsAreRequired(e) {
        const password = prompt("Password Required:");
        rfb.sendCredentials({ password: password });
    }

    // When this function is called we have received
    // a desktop name from the server
    function updateDesktopName(e) {
        desktopName = e.detail.name;
    }

    function fullscreen() {
        if (document.fullscreenElement || // alternative standard method
            document.mozFullScreenElement || // currently working methods
            document.webkitFullscreenElement ||
            document.msFullscreenElement) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            const el = document.documentElement;
            const request = el.requestFullscreen ||
                el.mozRequestFullScreen ||
                el.webkitRequestFullscreen ||
                el.msRequestFullscreen;
            if (request) {
                request.call(el).catch(() => {});
            }
        }
        return false;
    }

    document.addEventListener('fullscreenchange', () => {
        if (document.fullscreenElement) {
            if ('keyboard' in navigator && typeof navigator.keyboard.lock === 'function') {
                navigator.keyboard.lock(['AltLeft', 'AltRight', 'Tab', 'Escape']).catch(() => {});
            }
        } else {
            if ('keyboard' in navigator && typeof navigator.keyboard.unlock === 'function') {
                navigator.keyboard.unlock();
            }
        }
    });

    function machineShutdown() {
        rfb.machineShutdown();
    }
    function machineReboot() {
        rfb.machineReboot();
    }
    function machineReset() {
        rfb.machineReset();
    }

    // Show a status text in the top bar
    function status(text) {
        document.getElementById('noVNC_status').textContent = text;
    }

    // This function extracts the value of one variable from the
    // query string. If the variable isn't defined in the URL
    // it returns the default value instead.
    function readQueryVariable(name, defaultValue) {
        // A URL with a query parameter can look like this:
        // https://www.example.com?myqueryparam=myvalue
        //
        // Note that we use location.href instead of location.search
        // because Firefox < 53 has a bug w.r.t location.search
        const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
            match = document.location.href.match(re);

        if (match) {
            // We have to decode the URL since want the cleartext value
            return decodeURIComponent(match[1]);
        }

        return defaultValue;
    }

    bindKeyAction('machineShutdownButton', machineShutdown);
    bindKeyAction('machineRebootButton', machineReboot);
    bindKeyAction('machineResetButton', machineReset);
    bindKeyAction('fullscreen_button', fullscreen);
    // fit the remote screen to the window, or show it 1:1 with scrollbars
    bindKeyAction('scale_button', () => {
        rfb.scaleViewport = !rfb.scaleViewport;
        const link = document.querySelector('#scale_button a');
        link.classList.toggle('active', rfb.scaleViewport);
        link.setAttribute('aria-pressed', rfb.scaleViewport);
    });

    bindSendKeys(() => rfb);

    // novncd behind the panel's own address (nginx's /novncd/), never a host
    // from the link: the page sends it a console token. A VM with a QEMU
    // websocket port is reached on that port of the panel's host name.
    const host = window.location.hostname;
    let port = '{{ console_websocket_port|default_if_none:""|escapejs }}' || window.location.port;

    {% if perms.instances.passwordless_console and console_passwd %}
        const password = '{{ console_passwd|escapejs }}';
    {% else %}
        const password = readQueryVariable('password');
    {% endif %}

    const path = 'novncd/';

    // | | |         | | |
    // | | | Connect | | |
    // v v v         v v v

    status("Connecting");

    // Build the websocket URL used to connect
    let url;
    if (window.location.protocol === "https:") {
        url = 'wss';
    } else {
        url = 'ws';
    }
    url += '://' + host;
    if (port) {
        url += ':' + port;
    }
    if (path) {
        url += path.startsWith('/') ? path : ('/' + path);
    } else {
        url += '/';
    }
    const token = '{{ token|escapejs }}';
    if (token) {
        url += (url.includes('?') ? '&' : '?') + 'token=' + encodeURIComponent(token);
    }

    // Creating a new RFB object will start a new connection
    rfb = new RFB(document.getElementById('noVNC_container'), url,
        { credentials: { password: password } });

    // Add listeners to important events from the RFB module
    rfb.addEventListener("connect", connectedToServer);
    rfb.addEventListener("disconnect", disconnectedFromServer);
    rfb.addEventListener("credentialsrequired", credentialsAreRequired);
    rfb.addEventListener("desktopname", updateDesktopName);

    // Set parameters that can be changed on an active connection
    rfb.scaleViewport = {{ scale|yesno:"true,false" }};
    rfb.viewOnly = {{ view_only|yesno:"true,false" }};
    rfb.resizeSession = {{ resize_session|yesno:"true,false" }};
    rfb.clipViewport = {{ clip_viewport|yesno:"true,false" }};

</script>
{% endblock %}

{% block navbarmenu %}
<li class="nav-item" id="scale_button">
    <a class="nav-link{% if scale %} active{% endif %}" href="#" role="button" aria-pressed="{{ scale|yesno:"true,false" }}">{% trans "Scale" %}</a>
</li>
{% endblock %}

{% block content %}
<div id="noVNC_status_bar">
    <div id="noVNC_left_dummy_elem"></div>
    <div id="noVNC_status">{% trans 'Loading' %}</div>
    <div id="noVNC_buttons">
        <input type="button" value="Send CtrlAltDel" id="sendCtrlAltDelButton" class="noVNC_shown">
        <span id="noVNC_power_buttons" class="noVNC_hidden">
            <input type="button" value="Shutdown" id="machineShutdownButton">
            <input type="button" value="Reboot" id="machineRebootButton">
            <input type="button" value="Reset" id="machineResetButton">
        </span>
    </div>
</div>
<div id="noVNC_container">
    <!-- This is where the remote screen will appear -->
</div>
{% endblock %}