rustdesk/src/ui/index.tis

if (is_osx) view.windowBlurbehind = #light;
stdout.println("current platform:", OS);

// html min-width, min-height not working on mac, below works for all
view.windowMinSize = (500, 300);

var app;
var tmp = handler.get_connect_status();
var connect_status = tmp[0];
var service_stopped = false;
var software_update_url = "";
var key_confirmed = tmp[1];
var system_error = "";

var svg_menu = <svg #menu viewBox="0 0 512 512">
	<circle cx="256" cy="256" r="64"/>
	<circle cx="256" cy="448" r="64"/>
	<circle cx="256" cy="64" r="64"/>
</svg>;

class ConnectStatus: Reactor.Component {
    function render() {
        return
            <div .connect-status>
                <span class={"connect-status-icon connect-status" + (service_stopped ? 0 : connect_status)} />
                {this.getConnectStatusStr()}
                {service_stopped ? <span class="link">Start Service</span> : ""}
            </div>;
    }

    function getConnectStatusStr() {
        if (service_stopped) {
            return "Service is not running";
        } else if (connect_status == -1) {
            return "Not ready. Please check your connection";
        } else if (connect_status == 0) {
            return "Connecting to the RustDesk network...";
        }
        return "Ready";
    }

    event click $(.connect-status .link) () {
        var options = handler.get_options();
        options["stop-service"] = "";
        handler.set_options(options);
    }
}

class RecentSessions: Reactor.Component {
    function render() {
        var sessions = handler.get_recent_sessions();
        if (sessions.length == 0) return <span />;
        sessions = sessions.map(this.getSession);
        return <div style="width: *">
            <div .recent-sessions-title>RECENT SESSIONS</div>
            <div .recent-sessions-content key={sessions.length}>
                {sessions}
            </div>
        </div>;
    }

    function getSession(s) {
        var id = s[0];
        var username = s[1];
        var hostname = s[2];
        var platform = s[3];
        var alias = s[4];
        return <div .remote-session id={id} platform={platform} style={"background:"+string2RGB(id+platform, 0.5)}>
            <div .platform>
                {platformSvg(platform, "white")}
                <div .username>{username}@{hostname}</div>
            </div>
            <div .text>
                <div #alias>{alias ? alias : formatId(id)}</div>
                {svg_menu}
            </div>
        </div>;
    }

    event dblclick $(div.remote-session) (evt, me) {
        createNewConnect(me.id, "connect");
    }
    
    event click $(#menu) (_, me) {
        var id = me.parent.parent.id;
        var platform = me.parent.parent.attributes["platform"];
        $(#rdp).style.set{
            display: (platform == "Windows" && is_win) ? "block" : "none",
        };
        // https://sciter.com/forums/topic/replacecustomize-context-menu/
        var menu = $(menu#remote-context);
        menu.attributes["remote-id"] = id;
        me.popup(menu);
    }
}

event click $(menu#remote-context li) (evt, me) {
    var action = me.id;
    var id = me.parent.attributes["remote-id"];
    if (action == "connect") {
        createNewConnect(id, "connect");
    } else if (action == "transfer") {
        createNewConnect(id, "file-transfer");
    } else if (action == "remove") {
        handler.remove_peer(id);
        app.recent_sessions.update();
    } else if (action == "shortcut") {
        handler.create_shortcut(id);
    } else if (action == "rdp") {
        createNewConnect(id, "rdp");
    } else if (action == "tunnel") {
        createNewConnect(id, "port-forward");
    } else if (action == "rename") {
        var old_name = handler.get_peer_option(id, "alias");
        handler.msgbox("custom-rename", "Rename", "<div .form> \
            <div><input name='name' style='width: *; height: 23px', value='" + old_name + "' /></div> \
            </div> \
            ", function(res=null) {
                if (!res) return;
                var name = (res.name || "").trim();
                if (name != old_name) handler.set_peer_option(id, "alias", name);
                self.select('#' + id).select('#alias').text = name || id;
            });
    }
}

function createNewConnect(id, type) {
    id = id.replace(/\s/g, "");
    app.remote_id.value = formatId(id);
    if (!id) return;
    if (id == handler.get_id()) {
        handler.msgbox("custom-error", "Error", "You cannot connect to your own computer");
        return;
    }
    handler.set_remote_id(id);
    handler.new_remote(id, type);
}

var myIdMenu;
var audioInputMenu;
var configOptions = {};
class AudioInputs: Reactor.Component {
    function this() {
        audioInputMenu = this;
    }

    function render() {
        if (!this.show) return <li />;
        var inputs = handler.get_sound_inputs();
        if (is_win) inputs = ["System Sound"].concat(inputs);
        if (!inputs.length) return <li style="display:hidden" />;
        inputs = ["Mute"].concat(inputs);
        var me = this;
        self.timer(1ms, function() { me.toggleMenuState() });
        return <li>Audio Input
            <menu #audio-input key={inputs.length}>
                {inputs.map(function(name) {
                return <li id={name}><span>{svg_checkmark}</span>{name}</li>;
                })}
            </menu>
        </li>;
    }

    function get_default() {
        if (is_win) return "System Sound";
        return "";
    }

    function get_value() {
        return configOptions["audio-input"] || this.get_default();
    }

    function toggleMenuState() {
        var v = this.get_value();
        for (var el in $$(menu#audio-input>li)) {
            var selected = el.id == v;
            el.attributes.toggleClass("selected", selected);
        }
    }

    event click $(menu#audio-input>li) (_, me) {
        var v = me.id;
        if (v == this.get_value()) return;
        if (v == this.get_default()) v = "";
        configOptions["audio-input"] = v;
        handler.set_options(configOptions);
        this.toggleMenuState();
    }
}

class MyIdMenu: Reactor.Component {
    function this() {
        myIdMenu = this;
    }

    function render() {
        var me = this;
        return <div #myid>
            {this.renderPop()}
            ID{svg_menu}
        </div>;
    }

    function renderPop() {
        return <popup>
            <menu.context #config-options>
                <li #enable-keyboard><span>{svg_checkmark}</span>Enable Keyboard/Mouse</li>
                <li #enable-clipboard><span>{svg_checkmark}</span>Enable Clipboard</li>
                <li #enable-file-transfer><span>{svg_checkmark}</span>Enable File Transfer</li> 
                <li #enable-tunnel><span>{svg_checkmark}</span>Enable TCP Tunneling</li>
                <AudioInputs />
                <div .separator />
                <li #whitelist title="Only whitelisted IP can access me">IP Whitelisting</li>
                <li #custom-server>ID/Relay Server</li>
                <div .separator />
                <li #stop-service>{service_stopped ? "Start service" : "Stop service"}</li>
                <div .separator />
                <li #forum>Forum</li>
                <li #about>About {handler.get_app_name()}</li>
            </menu>
        </popup>;
    }

    event click $(svg#menu) (_, me) {
        audioInputMenu.update({ show: true });
        configOptions = handler.get_options();
        this.toggleMenuState();
        var menu = $(menu#config-options);
        me.popup(menu);
    }

    function toggleMenuState() {
        for (var el in $$(menu#config-options>li)) {
            if (el.id && el.id.indexOf("enable-") == 0) {
                var enabled = configOptions[el.id] != "N";
                el.attributes.toggleClass("selected", enabled);
            }
        }
    }

    event click $(menu#config-options>li) (_, me) {
        if (me.id && me.id.indexOf("enable-") == 0) {
            configOptions[me.id] = configOptions[me.id] == "N" ? "" : "N";
            handler.set_options(configOptions);
            this.toggleMenuState();
        }
        if (me.id == "whitelist") {
            var old_value = (configOptions["whitelist"] || "").split(",").join("\n");
            handler.msgbox("custom-whitelist", "IP Whitelisting", "<div .form> \
            <textarea spellcheck=\"false\" name=\"text\" novalue=\"0.0.0.0\" style=\"overflow: scroll-indicator; height: 160px; font-size: 1.2em; padding: 0.5em;\">" + old_value + "</textarea>\
            </div> \
            ", function(res=null) {
                if (!res) return;
                var value = (res.text || "").trim();
                if (value) {
                    var values = value.split(/[\s,;]+/g);
                    for (var ip in values) {
                        if (!ip.match(/^\d+\.\d+\.\d+\.\d+$/)) {
                            return "Invalid ip: " + ip;
                        }
                    }
                    value = values.join("\n");
                }
                if (value == old_value) return;
                configOptions["whitelist"] = value.replace("\n", ",");
                stdout.println("whitelist updated");
                handler.set_options(configOptions);
            }, 300);
        } else if (me.id == "custom-server") {
            var old_relay = configOptions["relay-server"] || "";
            var old_id = configOptions["custom-rendezvous-server"] || "";
            handler.msgbox("custom-server", "ID/Relay Server", "<div .form> \
            <div><span style='width: 100px; display:inline-block'>ID Server: </span><input style='width: 250px' name='id' value='" + old_id + "' /></div> \
            <div><span style='width: 100px; display:inline-block'>Relay Server: </span><input style='width: 250px' name='relay' value='" + old_relay + "' /></div> \
            </div> \
            ", function(res=null) {
                if (!res) return;
                var id = (res.id || "").trim();
                var relay = (res.relay || "").trim();
                if (id == old_id && relay == old_relay) return;
                if (id) {
                    var err = handler.test_if_valid_server(id);
                    if (err) return "ID Server: " + err;
                }
                if (relay) {
                    var err = handler.test_if_valid_server(relay);
                    if (err) return "Relay Server: " + err;
                }
                configOptions["custom-rendezvous-server"] = id;
                configOptions["relay-server"] = relay;
                handler.set_options(configOptions);
            });
        } else if (me.id == "forum") {
            handler.open_url("https:://forum.rustdesk.com");
        } else if (me.id == "stop-service") {
            configOptions["stop-service"] = service_stopped ? "" : "Y";
            handler.set_options(configOptions);
        } else if (me.id == "about") {
            var name = handler.get_app_name();
            handler.msgbox("custom-nocancel-nook-hasclose", "About " + name, "<div style='line-height: 2em'> \
                <div>Version: " + handler.get_version() + " \
                <div .link .custom-event url='http://rustdesk.com/privacy'>Privacy Statement</div> \
                <div .link .custom-event url='http://forum.rustdesk.com'>Forum</div> \
                <div style='background: #2c8cff; color: white; padding: 1em; margin-top: 1em;'>Copyright &copy; 2020 CarrieZ Studio \
                <br /> Author: Carrie \
                <p style='font-weight: bold'>Made with heart in this chaotic world!</p>\
                </div>\
            </div>", function(el) {
                if (el && el.attributes) {
                    handler.open_url(el.attributes['url']);
                };
            }, 400);
        }
    }
}

class App: Reactor.Component
{
    function this() {
        app = this;
    }

    function render() {
        var is_can_screen_recording = handler.is_can_screen_recording(false);
        return
            <div .app>
              <popup>
              <menu.context #remote-context>
                <li #connect>Connect</li>
                <li #transfer>Transfer File</li>
                <li #tunnel>TCP Tunneling</li>
                <li #rdp>RDP</li>
                <li #rename>Rename</li>
                <li #remove>Remove</li>
                {is_win && <li #shortcut>Create Desktop Shortcut</li>}
              </menu>
              </popup>
              <popup>
              <menu.context #edit-password-context>
                <li #refresh-password>Refresh random password</li>
                <li #set-password>Set your own password</li>
              </menu>
              </popup>
                <div .left-pane>
                    <div>
                        <div .title>Your Desktop</div>
                        <div .lighter-text>Your desktop can be accessed with this ID and password.</div>
                        <div .your-desktop>
                        <MyIdMenu />
                          {key_confirmed ? <input type="text" readonly value={formatId(handler.get_id())}/> : "Generating ..."}
                        </div>
                        <div .your-desktop>
                            <div>Password</div>
                            <Password />
                        </div>
                    </div>
                    {handler.is_installed() ? "": <InstalllMe />}
                    {handler.is_installed() && software_update_url ? <UpdateMe /> : ""}
                    {handler.is_installed() && !software_update_url && handler.is_installed_lower_version() ? <UpgradeMe /> : ""}
                    {is_can_screen_recording ? "": <CanScreenRecording />}
                    {is_can_screen_recording && !handler.is_process_trusted(false) ? <TrustMe /> : ""}
                    {system_error ? <SystemError /> : ""}
                    {!system_error && handler.is_login_wayland() ? <FixWayland /> : ""}
                </div>
                <div .right-pane>
                    <div .right-content>
                        <div .card-connect>
                            <div .title>Control Remote Desktop</div>
                            <ID @{this.remote_id} />
                            <div .right-buttons>
                                <button .button .outline #file-transfer>Transfer File</button>
                                <button .button #connect>Connect</button>
                            </div>
                        </div>
                        <RecentSessions @{this.recent_sessions} />
                    </div>
                    <ConnectStatus @{this.connect_status} />
                </div>
            </div>;
    }

    event click $(button#connect) {
        this.newRemote("connect");
    }

    event click $(button#file-transfer) {
        this.newRemote("file-transfer");
    }

    function newRemote(type) {
        createNewConnect(this.remote_id.value, type);
    }
}

class InstalllMe: Reactor.Component {
    function render() {
        return <div .install-me>
            <div>Install RustDesk</div>
            <div #install-me .link>Install RustDesk on this computer ...</div>
        </div>;
    }

    event click $(#install-me) {
        handler.goto_install();
    }
}

const http = function() { 
  
  function makeRequest(httpverb) {
    return function( params ) {
      params.type = httpverb;
      view.request(params);
    };
  }
  
  function download(from, to, args..) 
  {
      var rqp = { type:#get, url: from, toFile: to };
      var fn = 0;
      var on = 0;
      for( var p in args )
        if( p instanceof Function )
        {
          switch(++fn) {
            case 1: rqp.success = p; break;
            case 2: rqp.error = p; break;
            case 3: rqp.progress = p; break;
          }
        } else if( p instanceof Object )
        {
          switch(++on) {
            case 1: rqp.params = p; break;
            case 2: rqp.headers = p; break;
          }
        }  
      view.request(rqp);
  }
  
  return {
    get:  makeRequest(#get),
    post: makeRequest(#post),
    put:  makeRequest(#put),
    del:  makeRequest(#delete),
    download: download
  };

}();

class UpgradeMe: Reactor.Component {
    function render() {
        var update_or_download = is_osx ? "download" : "update";
        return <div .install-me>
            <div>{handler.get_app_name()} Status</div>
            <div>An update is available for RustDesk.</div>
            <div #install-me .link style="padding-top: 1em">Click to upgrade</div>
        </div>;
    }

    event click $(#install-me) {
        handler.update_me("");
    }
}

class UpdateMe: Reactor.Component {
    function render() {
        var update_or_download = is_osx ? "download" : "update";
        return <div .install-me>
            <div>{handler.get_app_name()} Status</div>
            <div>There is a newer version of {handler.get_app_name()} ({handler.get_new_version()}) available.</div>
            <div #install-me .link style="padding-top: 1em">Click to {update_or_download}</div>
            <div #download-percent style="display:hidden; padding-top: 1em;" />
        </div>;
    }

    event click $(#install-me) {
        if (is_osx) {
            handler.open_url("https://rustdesk.com");
            return;
        }
        var url = software_update_url + '.' + handler.get_software_ext();
        var path = handler.get_software_store_path();
        var onsuccess = function(md5) {
            $(#download-percent).content("Installing ...");
            handler.update_me(path);
        };
        var onerror = function(err) {
            handler.msgbox("custom-error", "Download Error", "Failed to download"); 
        };
        var onprogress = function(loaded, total) {
            if (!total) total = 5 * 1024 * 1024;
            var el = $(#download-percent);
            el.style.set{display: "block"};
            el.content("Downloading %" + (loaded * 100 / total));
        };
        stdout.println("Downloading " + url + " to " + path);
        http.download(
            url,
            self.url(path),
            onsuccess, onerror, onprogress);
    }
}

class SystemError: Reactor.Component {
    function render() {
        return <div .install-me>
            <div>{system_error}</div>
        </div>;
    }
}

class TrustMe: Reactor.Component {
    function render() {
        return <div .trust-me>
            <div>Configuration Permissions</div>
            <div>In order to control your Desktop remotely, you need to grant RustDesk "Accessibility" permissions</div>
            <div #trust-me .link>Configure</div>
        </div>;
    }

    event click $(#trust-me) {
        handler.is_process_trusted(true);
        watch_trust();
    }
}

class CanScreenRecording: Reactor.Component {
    function render() {
        return <div .trust-me>
            <div>Configuration Permissions</div>
            <div>In order to access your Desktop remotely, you need to grant RustDesk "Screen Recording" permissions</div>
            <div #screen-recording .link>Configure</div>
        </div>;
    }

    event click $(#screen-recording) {
        handler.is_can_screen_recording(true);
        watch_trust();
    }
}

class FixWayland: Reactor.Component {
    function render() {
        return <div .trust-me>
            <div>Warning</div>
            <div>Login screen using Wayland is not supported</div>
            <div #fix-wayland .link>Fix it</div>
        </div>;
    }

    event click $(#fix-wayland) {
        handler.fix_login_wayland();
        app.update();
    }
}

function watch_trust() {
    // not use TrustMe::update, because it is buggy
    var trusted = handler.is_process_trusted(false);
    var el = $(div.trust-me);
    if (el) {
        el.style.set {
            display: trusted ? "none" : "block",
        };
    }
    // if (trusted) return;
    self.timer(1s, watch_trust);
}

class PasswordEyeArea : Reactor.Component {
    render() {
        return
            <div .eye-area style="width: *">
                <input|text @{this.input} readonly value="******" />
                {svg_eye}
            </div>;
    }
    
    event mouseenter {
        var me = this;
        me.leaved = false;
        me.timer(300ms, function() {
            if (me.leaved) return;
            me.input.value = handler.get_password();
        });
    }

    event mouseleave {
        this.leaved = true;
        this.input.value = "******";
    }
}

class Password: Reactor.Component {
    function render() {
        return <div .password style="flow:horizontal">
            <PasswordEyeArea />
            {svg_edit}
        </div>;
    }

    event click $(svg#edit) (_, me) {
        var menu = $(menu#edit-password-context);
        me.popup(menu);
    }

    event click $(li#refresh-password) {
        handler.update_password("");
        this.update();
    }

    event click $(li#set-password) {
        var me = this;
        handler.msgbox("custom-password", "Set Password", "<div .form .set-password> \
            <div><span>Password:</span><input|password(password) /></div> \
            <div><span>Confirmation:</span><input|password(confirmation) /></div> \
        </div> \
        ", function(res=null) {
            if (!res) return;
            var p0 = (res.password || "").trim();
            var p1 = (res.confirmation || "").trim();
            if (p0.length < 6) {
                return "Too short, at least 6 characters.";
            }
            if (p0 != p1) {
                return "The confirmation is not identical.";
            }
            handler.update_password(p0);
            me.update();
        });
    }
}

class ID: Reactor.Component {
    function render() {
        return <input type="text" #remote_id .outline-focus novalue="Enter Remote ID" maxlength="13"
        value={formatId(handler.get_remote_id())} />;
    }

    // https://github.com/c-smile/sciter-sdk/blob/master/doc/content/sciter/Event.htm
    event change {
        var fid = formatId(this.value);
        var d = this.value.length - (this.old_value || "").length;
        this.old_value = this.value;
        var start = this.xcall(#selectionStart) || 0;
        var end = this.xcall(#selectionEnd);
        if (fid == this.value || d <= 0 || start != end) {
            return;
        }
        // fix Caret position
        this.value = fid;
        var text_after_caret = this.old_value.substr(start);
        var n = fid.length - formatId(text_after_caret).length;
        this.xcall(#setSelection, n, n);
    }
}

var reg = /^\d+$/;
function formatId(id) {
    id = id.replace(/\s/g, "");
    if (reg.test(id) && id.length > 3) {
        var n = id.length;
        var a = n % 3 || 3;
        var new_id = id.substr(0, a);
        for (var i = a; i < n; i += 3) {
            new_id += " " + id.substr(i, 3);
        }
        return new_id;
    }
    return id;
}

event keydown (evt) {
    if (!evt.shortcutKey) {
        if (evt.keyCode == Event.VK_ENTER ||
            (is_osx && evt.keyCode == 0x4C) ||
            (is_linux && evt.keyCode == 65421)) {
            var el = $(button#connect);
            view.focus = el;
            el.sendEvent("click");
            // simulate button click effect, windows does not have this issue
            el.attributes.toggleClass("active", true);
            self.timer(0.3s, function() {
                el.attributes.toggleClass("active", false);
            });
        }
    }
}

$(body).content(<App />);

function self.closing() {
    // return false; // can prevent window close
    var (x, y, w, h) = view.box(#rectw, #border, #screen);
    handler.save_size(x, y, w, h);
}

function self.ready() {
    var r = handler.get_size();
    if (r[2] == 0) {
        centerize(800, 600);
    } else {
        view.move(r[0], r[1], r[2], r[3]);
    }
    if (!handler.get_remote_id()) {
        view.focus = $(#remote_id);
    }
}

function checkConnectStatus() {
    self.timer(1s, function() {
        var tmp = !!handler.get_option("stop-service");
        if (tmp != service_stopped) {
            service_stopped = tmp;
            app.connect_status.update();
            myIdMenu.update();
        }
        tmp = handler.get_connect_status();
        if (tmp[0] != connect_status) {
            connect_status = tmp[0];
            app.connect_status.update();
        }
        if (tmp[1] != key_confirmed) {
            key_confirmed = tmp[1];
            app.update();
        }
        tmp = handler.get_error();
        if (system_error != tmp) {
            system_error = tmp;
            app.update();
        }
        tmp = handler.get_software_update_url();
        if (tmp != software_update_url) {
            software_update_url = tmp;
            app.update();
        }
        if (handler.recent_sessions_updated()) {
            stdout.println("recent sessions updated");
            app.recent_sessions.update();
        }
        checkConnectStatus();
    });
}

checkConnectStatus();