Commit d0bc1b0f authored by Thibaut Frain's avatar Thibaut Frain

jabberclient login + contactlist works, chatbox and logger in progress

parent c50738ce
......@@ -100,12 +100,14 @@ module.exports = function (grunt) {
"<%= global_config.src %>/presentation_editor/presentation_editor.css",
"<%= global_config.dest %>/presentation_viewer/presentation_viewer.css":
"<%= global_config.src %>/presentation_viewer/presentation_viewer.css",
"<%= global_config.dest %>/jabber_login/jabber_login.css":
"<%= global_config.src %>/jabber_login/jabber_login.css",
"<%= global_config.dest %>/jabber_contactlist/jabber_contactlist.css":
"<%= global_config.src %>/jabber_contactlist/jabber_contactlist.css",
"<%= global_config.dest %>/jabber_chatbox/jabber_chatbox.css":
"<%= global_config.src %>/jabber_chatbox/jabber_chatbox.css"
"<%= global_config.dest %>/jabberclient/jabberclient.css":
"<%= global_config.src %>/jabberclient/jabberclient.css",
"<%= global_config.dest %>/jabberclient_login/jabberclient_login.css":
"<%= global_config.src %>/jabberclient_login/jabberclient_login.css",
"<%= global_config.dest %>/jabberclient_contactlist/jabberclient_contactlist.css":
"<%= global_config.src %>/jabberclient_contactlist/jabberclient_contactlist.css",
"<%= global_config.dest %>/jabberclient_chatbox/jabberclient_chatbox.css":
"<%= global_config.src %>/jabberclient_chatbox/jabberclient_chatbox.css"
}
}
},
......
/*global window, rJS, Strophe, $, $iq, XMLSerializer, DOMParser*/
(function ($, Strophe, rJS) {
"use strict";
var serializeXML = function (xml) {
return (new XMLSerializer()).serializeToString(xml);
},
parseXML = function (xmlString) {
return new DOMParser()
.parseFromString(xmlString, 'text/xml')
.children[0];
};
rJS(window)
.declareAcquiredMethod('connected', 'connected')
.declareAcquiredMethod('disconnected', 'disconnected')
.declareAcquiredMethod('receive', 'receive')
.declareMethod('getJID', function () {
return Strophe.getBareJidFromJid(this.connection.jid);
})
.declareMethod('send', function (xmlString) {
return this.connection.send(parseXML(xmlString));
})
.declareMethod('disconnect', function () {
if (this.connection) {
return this.connection.disconnect();
}
})
.ready(function (g) {
function initInputs() {
g.connection.xmlInput = function (body) {
[].forEach.call(body.children, function (child) {
g.receive(serializeXML(child));
});
};
}
function initConnection(params) {
g.connection = new Strophe.Connection(params.server);
g.connection.connect(params.jid, params.passwd, function (status) {
if (status === Strophe.Status.CONNECTED) {
initInputs();
g.connected();
} else if (status === Strophe.Status.DISCONNECTED) {
g.disconnected();
}
});
window.connection = g.connection; // for debug purpose
}
$(document).on('submit', 'form.login-form', function (e) {
var params = {};
$(this).serializeArray().forEach(function (elem) {
params[elem.name] = elem.value;
});
initConnection(params);
return false;
});
});
}($, Strophe, rJS));
- improve navigation between the different views (aka sub gadgets) in jabberclient (add buttons to close a chatbox, show the
contactlist, show the logout page of login gadget, ,..)
- show bad credentials
- add logger gadget
- make chatbox gadget working with the main gadget by correct methods "openChat", "processReceivedDatas"..
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jabber Client</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jabberclient.css">
<script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="jabberclient.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a"><h1>Jabber Client</h1></div>
<div data-role="page" class="login-page">
<div role="main" class="ui-content"></div>
</div>
<div data-role="page" class="contactlist-page">
<div role="main" class="ui-content"></div>
</div>
<div data-role="page" class="chatboxes-page">
<div role="main" class="ui-content"></div>
</div>
</body>
</html>
iframe {
width: inherit;
height: inherit;
}
/*globals window, document, $, RSVP, rJS, DOMParser,
XMLSerializer, Strophe, console, Handlebars, $iq*/
(function (window, document, $, RSVP, rJS) {
"use strict";
var serializeXML = function (xml) {
return (new XMLSerializer()).serializeToString(xml);
},
parseXML = function (xmlString) {
return new DOMParser()
.parseFromString(xmlString, 'text/xml')
.children[0];
};
rJS(window)
.declareMethod('send', function (datas) {
console.log('--jabberclient gadget (output)--');
console.log(datas);
console.log('--------------------------------');
return this.login_gadget.send(datas);
})
.allowPublicAcquisition('send', function (datas) {
return this.send(datas);
})
.declareMethod('receive', function (datas) {
console.log('--jabberclient gadget (input)--');
console.log(datas);
console.log('-------------------------------');
var xmlInput = parseXML(datas),
from;
if (this.isRoster(xmlInput)) {
return this.contactlist_gadget.receiveRoster(datas);
}
if (this.isPresence(xmlInput)) {
return this.contactlist_gadget.receivePresence(datas);
}
if (this.isMessage(xmlInput)) {
from = Strophe.getBareJidFromJid($(xmlInput).attr('from'));
if (!this.chatbox_gadget[from]) {
return this.openChat(from)
.then(function (chatGadget) {
return this.chatbox_gadget.receive(datas);
});
}
return this.chatbox_gadget[from].receive(datas);
}
})
.allowPublicAcquisition('receive', function (datas) {
return this.receive(datas);
})
.allowPublicAcquisition('connected', function () {
console.log("connected !");
var iq = $iq({type: 'get'})
.c('query', {xmlns: 'jabber:iq:roster'}).tree();
$.mobile.pageContainer.content('change', $('.contactlist-page'));
return this.send(serializeXML(iq));
})
.declareMethod('setUserJID', function (jid) {
this.userJID = Strophe.getBareJidFromJid(jid);
})
.declareMethod('getUserJID', function () {
return this.userJID;
})
.declareMethod('openChat', function (jid) {
var container = document.createElement('div');
$('.chatboxes-page .ui-content').append(container);
return this.declareGadget("../jabberclient_chatbox/", {
element: container
})
.then(function (chatbox_gadget) {
this.chatbox_gadgets[jid] = chatbox_gadget;
$.mobile.pageContainer.content('change', $('.chatboxes-page'));
return chatbox_gadget.initContact(jid);
});
})
.allowPublicAcquisition('getJID', function () {
return this.login_gadget.getJID();
})
.allowPublicAcquisition('openChat', function (jid) {
return this.openChat(jid[0]);
})
.ready(function (g) {
g.chatbox_gadgets = {};
g.isRoster = function (input) {
var selector = 'iq > query[xmlns="jabber:iq:roster"]';
return $(input).find(selector).length !== 0;
};
g.isPresence = function (input) {
return input.nodeName === 'presence';
};
g.isMessage = function (input) {
return input.nodeName === "message";
};
g.processReceivedDatas = function (input) {
var xmlInput = parseXML(input),
from;
if (g.isRoster(xmlInput)) {
return g.contactlist_gadget.receiveRoster(input);
}
if (g.isPresence(xmlInput)) {
return g.contactlist_gadget.receivePresence(input);
}
if (g.isMessage(xmlInput)) {
from = Strophe.getBareJidFromJid($(xmlInput).attr('from'));
if (!g.chatboxes_gadget[from]) {
return g.openChat(from)
.then(function (chatGadget) {
return chatGadget.receive(input);
});
}
}
};
// Initialize header toolbar
$("[data-role='header']").toolbar();
// Initialize login gadget
g.declareGadget("../jabberclient_login/", {
element: $(document).find('.login-page .ui-content')[0],
scope: 'login'
})
.then(function (login_gadget) {
g.login_gadget = login_gadget;
console.log('couscous');
return g.login_gadget.getElement();
})
.then(function (element) {
console.log(element);
$(element).enhanceWithin();
})
.fail(function (e) {
// XXX Replace with proper method
console.log(e);
console.log("Can't initialize login gadget");
});
// Initialize contactlist gadget
g.declareGadget("../jabberclient_contactlist/", {
element: $(document).find('.contactlist-page .ui-content')[0],
scope: "contactlist"
})
.then(function (contactlist_gadget) {
g.contactlist_gadget = contactlist_gadget;
return g.contactlist_gadget.getElement();
})
.then(function (element) {
$(element).enhanceWithin();
})
.fail(function (e) {
// XXX Replace with proper method
console.log("Can't initialize contactlist gadget");
});
});
}(window, document, $, RSVP, rJS));
......@@ -4,14 +4,14 @@
<meta charset="utf-8">
<title>Chatbox</title>
<link rel="stylesheet" href="jabber_chatbox.css">
<link rel="stylesheet" href="jabberclient_chatbox.css">
<script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="jabber_chatbox.js"></script>
<script src="jabberclient_chatbox.js"></script>
</head>
<body>
<div id="contact"></div>
......
......@@ -5,7 +5,7 @@
<title>Jabber client</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jabber_contactlist.css">
<link rel="stylesheet" href="jabberclient_contactlist.css">
<script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
......@@ -14,7 +14,7 @@
<script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"></script>
<script src="jabber_contactlist.js"></script>
<script src="jabberclient_contactlist.js"></script>
</head>
<body>
......@@ -22,12 +22,12 @@
<script id="contact-template" type="text/x-handlebars-template">
<li>
{{#if offline}}
<img src="images/offline.png">
<img src="../jabberclient_contactlist/images/offline.png">
{{else}}
{{#if status}}
<img src="images/misc.png">
<img src="../jabberclient_contactlist/images/misc.png">
{{else}}
<img src="images/online.png">
<img src="../jabberclient_contactlist/images/online.png">
{{/if}}
{{/if}}
<h2>{{name}}&nbsp&nbsp{{#if status}}({{status}}){{/if}}</h2>
......
......@@ -69,7 +69,6 @@
});
main.send($pres().toString());
}
ContactList.prototype.update = function (presence) {
var jid = Strophe.getBareJidFromJid($(presence).attr('from')),
contact = this.list[jid];
......@@ -118,7 +117,12 @@
.ready(function (g) {
main = g;
contactTemplate = Handlebars.compile($('#contact-template').html());
g.getElement()
.then(function (element) {
contactTemplate = Handlebars.compile(
$(element).find('#contact-template').html()
);
});
});
}($, Strophe, rJS(window)));
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Logger</title>
<link rel="stylesheet" href="../css/jquery.mobile.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery.mobile.js"></script>
<script src="../lib/rsvp.js"></script>
<script src="../lib/renderjs.js"></script>
<script src="../lib/strophe.js"></script>
<script src="../lib/xmlserialization.js"></script>
<script src="../lib/sha256.amd.js"></script>
<script src="../lib/jio.js"></script>
<script src="../lib/localstorage.js"></script>
<script src="logger.js"></script>
</head>
<body></body>
</html>
/*globals window, document, RSVP, rJS, $, DOMParser, Strophe, $msg, jIO*/
(function ($, rJS) {
"use strict";
var jio_instance,
hist = {},
hist_id = {};
function getHistoryString(jid, sourceJID, message) {
var date = new Date(),
timestamp = date.getFullYear() +
"-" + (date.getMonth() + 1) + "-" + date.getDate() + " ",
result;
timestamp += date.toTimeString();
result = "[" + timestamp + "]: ";
result += sourceJID + ": ";
result += message;
return result + "\n";
}
rJS(window)
.declareMethod('setJIOConfig', function (jioConf) {
var rows;
jio_instance = jIO.createJIO(JSON.parse(jioConf));
return jio_instance.allDocs()
.then(function (response) {
rows = response.data.rows;
})
.then(function () {
var queue = new RSVP.Queue();
rows.forEach(function (row) {
queue
.push(function () {
return jio_instance.get({
"_id": row.id
});
})
.push(function (response) {
var data = response.data;
hist_id[data.jid] = row.id;
hist[data.jid] = data.history;
});
});
return queue;
});
})
.declareMethod('addLog', function (jid, sourceJID, message) {
var history = getHistoryString(jid, sourceJID, message);
if (!hist_id[jid]) {
hist[jid] = history;
return jio_instance.post({
'jid': jid,
'history': hist[jid]
})
.then(function (response) {
hist_id[jid] = response.data.id;
});
}
hist[jid] += history;
return jio_instance.put({
'_id': hist_id[jid],
'jid': jid,
'history': hist[jid]
});
})
.declareMethod('getLogs', function (jid) {
return jio_instance.get({
'_id': hist_id[jid]
})
.then(function (response) {
return response.data.history;
})
.fail(function (e) {
throw new Error(e);
});
})
.ready(function (g) {
window.g = g;
});
}($, rJS));
th@archzen.3014:1401434551
\ No newline at end of file
......@@ -5,33 +5,46 @@
<title>Jabber login gadget</title>
<link rel="stylesheet" href="../<%= curl.jquerymobilecss.relative_dest %>">
<link rel="stylesheet" href="jabber_login.css">
<link rel="stylesheet" href="jabberclient_login.css">
<script src="../<%= curl.jquery.relative_dest %>"></script>
<script src="../<%= curl.jquerymobilejs.relative_dest %>"></script>
<script src="../<%= copy.rsvp.relative_dest %>"></script>
<script src="../<%= copy.renderjs.relative_dest %>"></script>
<script src="../<%= curl.strophejs.relative_dest %>"></script>
<script src="../<%= copy.handlebars.relative_dest %>"></script>
<script src="jabber_login.js"></script>
<script src="jabberclient_login.js"></script>
</head>
<body>
<div class="login-box ui-corner-all ui-shadow">
<h3 class="title">Log in to your jabber account:&nbsp</h3><br/>
<h3>Status: Not connected</h3><br/>
<form class="login-form" data-ajax="false">
<div class="ui-field-contain">
<input type="url" name="server" placeholder="Jabber server url" value="https://mail.tiolive.com/chat/http-bind/" required>
</div>
<div class="ui-field-contain">
<input type="text" name="jid" placeholder="Jabber ID" required>
<input type="text" name="jid" placeholder="Jabber ID" value="thibaut.frain@tiolive.com" required>
</div>
<div class="ui-field-contain">
<input type="password" name="passwd" placeholder="Password" required>
<input type="password" name="passwd" placeholder="Password" value="&Cg8)Rl9" required>
</div>
<fieldset class="ui-btn-inline">
<input type="submit" value="Log In">
</fieldset>
</form>
</div>
<div class="logout-box ui-corner-all ui-shadow" style="display: none;">
<h3>Status: Authenticated</h3>
<div class="ui-grid-a">
<div class="ui-block-a"><h4>Server URL</h4></div>
<div class="ui-block-b"><h5 class="server"></h5></div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"><h4>Jabber ID</h4></div>
<div class="ui-block-b"><h5 class="jid"></h5></div>
</div>
<button class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Logout</button>
</div>
</body>
</html>
.login-box {
.login-box, .logout-box {
margin: 0 auto;
max-width: 35ch !important;
text-align: center;
......
/*global window, rJS, Strophe, $, $iq,
XMLSerializer, DOMParser, RSVP, localStorage*/
(function ($, Strophe, rJS) {
"use strict";
rJS(window)
.declareAcquiredMethod('connected', 'connected')
.declareAcquiredMethod('disconnected', 'disconnected')
.declareAcquiredMethod('receive', 'receive')
.declareMethod('getJID', function () {
return Strophe.getBareJidFromJid(this.connection.jid);
})
.declareMethod('send', function (xmlString) {
return this.connection.send(this.parseXML(xmlString));
})
.declareMethod('disconnect', function () {
if (this.connection && this.connection.connected) {
return this.connection.disconnect();
}
this.disconnected();
})
.ready(function (g) {
g.serializeXML = function (domElement) {
return new XMLSerializer()
.serializeToString(domElement);
};
g.parseXML = function (xmlString) {
return new DOMParser()
.parseFromString(xmlString, 'text/xml')
.children[0];
};
g.showLogin = function (params) {
$(document).find('.login-box input[name="server"]').val(params.server);
$(document).find('.login-box input[name="jid"]').val(params.jid);
$(document).find('.login-box input[name="passwd"]').val(params.passwd);
$(document).find('.logout-box').hide();
$(document).find('.login-box').show();
};
g.showLogout = function (params) {
$(document).find('.logout-box .server').html(params.server);
$(document).find('.logout-box .jid').html(params.jid);
$(document).find('.login-box').hide();
$(document).find('.logout-box').show();
};
g.login = function (params) {
g.connection = new Strophe.Connection(params.server);
g.connection.connect(params.jid, params.passwd, function (status) {
if (status === Strophe.Status.CONNECTED) {
// init jabber inputs
g.connection.xmlInput = function (domElement) {
[].forEach.call(domElement.children, function (child) {
g.receive(g.serializeXML(child));
});
};
// inform parent gadget
g.connected();
// show logout box
g.showLogout(params);
// register params in localStorage
localStorage.setItem('jabberclient_login', JSON.stringify(params));
} else if (status === Strophe.Status.DISCONNECTED) {
// Destroy connection object
g.connection = null;
// Inform parent gadget
g.disconnected();
// Show login box
g.showLogin(params);
// remove params in localStorage
g.params = null;
localStorage.removeItem('jabberclient_login');
}
});
};
g.submitLoginCallback = function (e) {
g.params = {};
$(this).serializeArray().forEach(function (elem) {
g.params[elem.name] = elem.value;
});
g.login(g.params);
return false;
};
g.submitLogoutCallback = function (e) {
g.connection.disconnect();
g.disconnected();
};
g.params = JSON.parse(localStorage.getItem('jabberclient_login'));
if (g.params !== null &&
typeof g.params === 'object' &&
Object.keys(g.params).length === 3) {
g.login(g.params);
}
// DEBUG
window.g = g;
return new RSVP.Promise(function (resolve) {
$(document).on('submit', 'form.login-form', g.submitLoginCallback);
$(document).on('click', '.logout-box button', g.submitLogoutCallback);
resolve();
}, function () {
$(document).off('submit', 'form.login-form', g.submitLoginCallback);
$(document).off('click', '.logout-box button', g.submitLogoutCallback);
});
});
}($, Strophe, rJS));
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment