xmpp: Introduce simple page to embed JSXC

Create a simple page based on example provided by Javascript XMPP Client
to embed it.

plinth/modules/xmpp/static/jsxc-plinth.css

@@ -0,0 +1,124 @@
+/*
+#
+# This file is part of Plinth.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+
+# This file based on example code from Javascript XMPP Client which is
+# licensed as follows.
+#
+# The MIT License (MIT)
+#
+# Copyright (c) 2014 Klaus Herberth <klaus@jsxc.org>
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+*/
+
+/* Elements to hide on page load */
+.logout {
+   display: none;
+}
+
+#content form .alert {
+   display: none;
+}
+
+/* Server connection status message */
+#server-flash {
+   margin: 0;
+   margin-top: 10px;
+}
+
+#server-flash:before {
+   content: "\e031";
+   position: relative;
+   top: 1px;
+   padding-right: 5px;
+   display: inline-block;
+   font-family: 'Glyphicons Halflings';
+   font-style: normal;
+   font-weight: 400;
+   line-height: 1;
+   -webkit-font-smoothing: antialiased;
+}
+
+#server-flash.success:before {
+   content: "\e089";
+   color: green;
+}
+
+#server-flash.fail:before {
+   content: "\e088";
+   color: red;
+}
+
+/* Colorbox popups */
+#cboxOverlay {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: grey;
+}
+
+#colorbox {
+    border-radius: 10px;
+    background: white;
+}
+
+#cboxClose {
+    position: absolute;
+    top: 10px;
+    right: 3px;
+    cursor: pointer;
+    font-size: 0;
+    border: 0;
+    background: white;
+    height: 26px;
+}
+
+#cboxClose:after {
+    content: '\e014';
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    background: white none repeat scroll 0% 0%;
+    border: 1px solid rgb(173, 173, 173);
+    border-radius: 4px;
+    padding: 4px 6px;
+}
+
+/* Don't show options to cancel, depend on close button */
+#jsxc_dialog .jsxc_cancel {
+    display: none;
+}

plinth/modules/xmpp/static/jsxc-plinth.js

@@ -0,0 +1,263 @@
+/*
+#
+# This file is part of Plinth.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+
+# This file based on example code from Javascript XMPP Client which is
+# licensed as follows.
+#
+# The MIT License (MIT)
+#
+# Copyright (c) 2014 Klaus Herberth <klaus@jsxc.org>
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+*/
+
+$(function() {
+    var settings = {
+        url: '/http-bind/',
+        domain: plinth_settings.domainname
+    };
+
+    jsxc.init({
+        loginForm: {
+            form: '#jsxc-login-form',
+            jid: '#jsxc-username',
+            pass: '#jsxc-password'
+        },
+        checkFlash: false,
+        rosterAppend: 'body',
+        root: plinth_settings.jsxc_root,
+        displayRosterMinimized: function() {
+            return true;
+        },
+        otr: {
+            debug: true,
+            SEND_WHITESPACE_TAG: true,
+            WHITESPACE_START_AKE: true
+        },
+        loadSettings: function(username, password) {
+            return {
+                xmpp: {
+                    url: settings.url,
+                    domain: settings.domain,
+                    resource: 'jsxc',
+                    overwrite: true,
+                    onlogin: true
+                }
+            };
+        }
+    });
+
+    // Form elements which needs to be enabled/disabled
+    var formElements = $('#jsxc-login-form').find('input');
+
+    // Click on logout button to logout
+    $('.logout').on('click', function() {
+        jsxc.triggeredFromElement = true;
+        return jsxc.xmpp.logout();
+    });
+
+    var logged_in_state = function() {
+        formElements.prop('disabled', true);
+        $('.submit').hide();
+        $('.logout').show();
+    }
+    var logged_out_state = function() {
+        formElements.prop('disabled', false);
+        $('.submit').show();
+        $('.logout').hide();
+    }
+
+    $(document).on('close.dialog.jsxc', function() {
+        jsxc.debug('Event triggered close.dialog.jsxc');
+    });
+
+    $(document).on('connecting.jsxc', function() {
+        jsxc.debug('Event triggered connecting.jsxc');
+        formElements.prop('disabled', true);
+    });
+
+    $(document).on('restoreCompleted.jsxc', function() {
+        jsxc.debug('Event triggered restoreCompleted.jsxc');
+        logged_in_state();
+    });
+
+    $(document).on('connected.jsxc', function() {
+        jsxc.debug('Event triggered connected.jsxc');
+        logged_in_state();
+    });
+
+    $(document).on('authfail.jsxc', function() {
+        jsxc.debug('Event triggered authfail.jsxc');
+        logged_out_state();
+        $('#jsxc-login-form').find('.submit').button('reset');
+    });
+
+    $(document).on('attached.jsxc', function() {
+        jsxc.debug('Event triggered attached.jsxc');
+        logged_in_state();
+    });
+
+    $(document).on('disconnected.jsxc', function() {
+        $('#jsxc-login-form').find('button').button('reset');
+        logged_out_state();
+    });
+
+    // Load xmpp domain from storage
+    if (typeof localStorage.getItem('xmpp-domain') === 'string') {
+        $('#xmpp-domain').val(localStorage.getItem('xmpp-domain'));
+    } else {
+        $('#xmpp-domain').val(settings.domain);
+    }
+
+    // Check bosh url, if input changed
+    $('#xmpp-domain').on('input', function(){
+        var self = $(this);
+
+        var timeout = self.data('timeout');
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+
+        var domain = $('#xmpp-domain').val();
+        if (!domain) {
+            // we need domain to test BOSH server
+            return;
+        }
+
+        localStorage.setItem('xmpp-domain', domain);
+        settings.domain = domain;
+
+        $('#server-flash').removeClass('success fail').text('Testing...');
+
+        // test only every 2 seconds
+        timeout = setTimeout(function() {
+            testBoshServer(settings.url, $('#xmpp-domain').val(), function(result) {
+                $('#server-flash').removeClass('success fail').addClass(result.status).html(result.msg);
+            });
+        }, 2000);
+
+        self.data('timeout', timeout);
+    });
+
+    // check initial bosh url
+    $('#xmpp-domain').trigger('input');
+});
+
+/**
+* Test if bosh server is up and running.
+*
+* @param  {string}   url    BOSH url
+* @param  {string}   domain host domain for BOSH server
+* @param  {Function} cb     called if test is done
+*/
+function testBoshServer(url, domain, cb) {
+    var rid = jsxc.storage.getItem('rid') || '123456';
+
+    function fail(m) {
+        var msg = 'BOSH server NOT reachable or misconfigured.';
+
+        if (typeof m === 'string') {
+            msg += '<br /><br />' + m;
+        }
+
+        cb({
+            status: 'fail',
+            msg: msg
+        });
+    }
+
+    $.ajax({
+        type: 'POST',
+        url: url,
+        data: "<body rid='" + rid + "' xmlns='http://jabber.org/protocol/httpbind' to='" + domain + "' xml:lang='en' wait='60' hold='1' content='text/xml; charset=utf-8' ver='1.6' xmpp:version='1.0' xmlns:xmpp='urn:xmpp:xbosh'/>",
+        global: false,
+        dataType: 'xml'
+    }).done(function(stanza) {
+        if (typeof stanza === 'string') {
+            // shouldn't be needed anymore, because of dataType
+            stanza = $.parseXML(stanza);
+        }
+
+        var body = $(stanza).find('body[xmlns="http://jabber.org/protocol/httpbind"]');
+        var condition = (body) ? body.attr('condition') : null;
+        var type = (body) ? body.attr('type') : null;
+
+        // we got a valid xml response, but we have test for errors
+
+        if (body.length > 0 && type !== 'terminate') {
+            cb({
+                status: 'success',
+                msg: 'BOSH Server reachable.'
+            });
+        } else {
+            if (condition === 'internal-server-error') {
+                fail('Internal server error: ' + body.text());
+            } else if (condition === 'host-unknown') {
+                if (url) {
+                    fail('Host unknown: ' + domain + ' is unknown to your XMPP server.');
+                } else {
+                    fail('Host unknown: Please provide a XMPP domain.');
+                }
+            } else {
+                fail(condition);
+            }
+        }
+    }).fail(function(xhr, textStatus) {
+        // no valid xml, not found or csp issue
+
+        var fullurl;
+        if (url.match(/^https?:\/\//)) {
+            fullurl = url;
+        } else {
+            fullurl = window.location.protocol + '//' + window.location.host;
+            if (url.match(/^\//)) {
+                fullurl += url;
+            } else {
+                fullurl += window.location.pathname.replace(/[^/]+$/, "") + url;
+            }
+        }
+
+        if(xhr.status === 0) {
+            // cross-side
+            fail('Cross domain request was not possible.');
+        } else if (xhr.status === 404) {
+            // not found
+            fail('Your server responded with "404 Not Found". Please check if your BOSH server is running and reachable via ' + fullurl + '.');
+        } else if (textStatus === 'parsererror') {
+            fail('Invalid XML received. Maybe ' + fullurl + ' was redirected. You should use an absolute url.');
+        } else {
+            fail(xhr.status + ' ' + xhr.statusText);
+        }
+    });
+}

plinth/modules/xmpp/static/libjs-jsxc/img

@@ -0,0 +1 @@
+/usr/share/libjs-jsxc/img/

plinth/modules/xmpp/static/libjs-jsxc/jsxc.css

@@ -0,0 +1 @@
+/usr/share/libjs-jsxc/jsxc.css

plinth/modules/xmpp/static/libjs-jsxc/jsxc.webrtc.css

@@ -0,0 +1 @@
+/usr/share/libjs-jsxc/jsxc.webrtc.css

plinth/modules/xmpp/static/libjs-jsxc/lib

@@ -0,0 +1 @@
+/usr/share/javascript/jsxc/lib

plinth/modules/xmpp/static/libjs-jsxc/sound

@@ -0,0 +1 @@
+/usr/share/libjs-jsxc/sound/

plinth/modules/xmpp/templates/jsxc.html

@@ -0,0 +1,138 @@
+{% comment %}
+#
+# This file is part of Plinth.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+
+# This file based on example code from Javascript XMPP Client which is
+# licensed as follows.
+#
+# The MIT License (MIT)
+#
+# Copyright (c) 2014 Klaus Herberth <klaus@jsxc.org>
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+{% endcomment %}
+
+{% load static %}
+{% load i18n %}
+
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Jabber Chat (JSXC)</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="/javascript/bootstrap/css/bootstrap.min.css" media="all"
+          rel="stylesheet" type="text/css" />
+    <link href="/javascript/jquery-ui/css/smoothness/jquery-ui.min.css"
+          media="all" rel="stylesheet" type="text/css" />
+    <link href="{% static 'xmpp/libjs-jsxc/jsxc.css' %}" media="all"
+          rel="stylesheet" type="text/css" />
+    <link href="{% static 'xmpp/jsxc-plinth.css' %}" media="all"
+          rel="stylesheet" type="text/css" />
+
+    <script src="/javascript/jquery/jquery.min.js"></script>
+    <script src="/javascript/jquery-ui/jquery-ui.min.js"></script>
+    <script src="/javascript/jquery-slimscroll/jquery.slimscroll.min.js"></script>
+    <script src="/javascript/jquery-fullscreen/jquery.fullscreen.js"></script>
+    <script src="/javascript/jquery-colorbox/jquery.colorbox-min.js"></script>
+    <script src="/javascript/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/javascript/jsxc/lib/jsxc.dep.js"></script>
+    <script src="/javascript/jsxc/jsxc.js"></script>
+
+    <script lang="text/javascript">
+      var plinth_settings = {
+          "domainname": "{{ domainname }}",
+          "jsxc_root": "{% static 'xmpp/libjs-jsxc' %}"
+      };
+    </script>
+    <script src="{% static 'xmpp/jsxc-plinth.js' %}"></script>
+  </head>
+
+  <body>
+    <div class="container" id="content" role="main">
+      <div class="row">
+        <div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2">
+          <h1 class="page-header text-center">Jabber Chat</h1>
+
+          <div class="form form-horizontal">
+            <div class="form-group">
+              <label for="xmpp-domain" class="col-xs-4 control-label">
+                Domain:
+              </label>
+              <div class="col-xs-8">
+                <input type="text" id="xmpp-domain" name="xmpp-domain"
+                       class="form-control" />
+                <p id="server-flash"></p>
+              </div>
+            </div>
+
+            <form id="jsxc-login-form" class="form form-horizontal">
+              <fieldset>
+                <div class="form-group row">
+                  <label for="jsxc-username" class="col-xs-4 control-label">
+                    Username:
+                  </label>
+                  <div class="col-xs-8">
+                    <input type="text" id="jsxc-username"
+                           class="form-control" />
+                  </div>
+                </div>
+
+                <div class="form-group row">
+                  <label for="jsxc-password" class="col-xs-4 control-label">
+                    Password:
+                  </label>
+                  <div class="col-xs-8">
+                    <input type="password" id="jsxc-password"
+                           class="form-control" />
+                  </div>
+                </div>
+
+                <div class="form-group row">
+                  <div class="col-xs-offset-4 col-xs-8">
+                    <button type="submit" id="jsxc-submit"
+                            class="submit btn btn-primary"
+                            data-loading-text="Logging in...">Log in</button>
+                    <button class="logout btn btn-default">Log out</button>
+                  </div>
+                </div>
+              </fieldset>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+
+</html>