nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-13 10:30:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

xmpp: Introduce simple page to embed JSXC

Browse Source 
Create a simple page based on example provided by Javascript XMPP Client
to embed it.
This commit is contained in:
Sunil Mohan Adapa 2016-09-18 10:40:24 +05:30 committed by James Valleroy
parent 8608bf6f07
commit 08068e60fc
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
8 changed files with 530 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
plinth/modules/xmpp/static/jsxc-plinth.css Normal file
View File

@ -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;
}

263
plinth/modules/xmpp/static/jsxc-plinth.js Normal file
View File

@ -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);
}
});
}

1
plinth/modules/xmpp/static/libjs-jsxc/img Symbolic link
View File

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

1
plinth/modules/xmpp/static/libjs-jsxc/jsxc.css Symbolic link
View File

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

1
plinth/modules/xmpp/static/libjs-jsxc/jsxc.webrtc.css Symbolic link
View File

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

1
plinth/modules/xmpp/static/libjs-jsxc/lib Symbolic link
View File

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

1
plinth/modules/xmpp/static/libjs-jsxc/sound Symbolic link
View File

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

138
plinth/modules/xmpp/templates/jsxc.html Normal file
View File

@ -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>