Commit f886585d authored by Corentin Mors's avatar Corentin Mors
Browse files

Change assets files

parent 8fa36c23
......@@ -2372,476 +2372,47 @@ function config (name) {
 
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],13:[function(require,module,exports){
var userPositions = [];
$(function() {
var FADE_TIME = 150; // ms
var TYPING_TIMER_LENGTH = 400; // ms
var COLORS = [
'#e21400', '#91580f', '#f8a700', '#f78b00',
'#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
'#3b88eb', '#3824aa', '#a700ff', '#d300e7'
];
var socket = io();
// Initialize variables
var $window = $(window);
var $usernameInput = $('.usernameInput'); // Input for username
var $messages = $('.messages'); // Messages area
var $inputMessage = $('.inputMessage'); // Input message input box
var $chatPage = $('.chat.page'); // The chatroom page
// Prompt for setting a username
var connected = false;
var typing = false;
var lastTypingTime;
var $currentInput = $usernameInput.focus();
const addParticipantsMessage = (data) => {
var message = '';
if (data.numUsers === 1) {
message += "there's 1 participant";
} else {
message += "there are " + data.numUsers + " participants";
}
log(message);
}
// Sends a chat message
const sendMessage = () => {
var message = encrypt($inputMessage.val(), password);
// Prevent markup from being injected into the message
message = cleanInput(message);
// if there is a non-empty message and a socket connection
if (message && connected) {
$inputMessage.val('');
addChatMessage({
username: username,
message: message
});
// tell server to execute 'new message' and send along one parameter
socket.emit('new message', message);
}
}
// Log a message
const log = (message, options) => {
var $el = $('<li>').addClass('log').text(message);
addMessageElement($el, options);
}
// Adds the visual chat message to the message list
const addChatMessage = (data, options) => {
// Don't fade the message in if there is an 'X was typing'
var $typingMessages = getTypingMessages(data);
options = options || {};
if ($typingMessages.length !== 0) {
options.fade = false;
$typingMessages.remove();
}
var $usernameDiv = $('<span class="username"/>')
.text(data.username)
.css('color', getUsernameColor(data.username));
var $messageBodyDiv = $('<span class="messageBody">');
if(data.typing){
$messageBodyDiv.text(data.message);
}
else{
$messageBodyDiv.text(decrypt(data.message, password));
}
// Crypto functions
 
var typingClass = data.typing ? 'typing' : '';
var $messageDiv = $('<li class="message"/>')
.data('username', data.username)
.addClass(typingClass)
.append($usernameDiv, $messageBodyDiv);
addMessageElement($messageDiv, options);
}
// Adds the visual chat typing message
const addChatTyping = (data) => {
data.typing = true;
data.message = 'is typing';
addChatMessage(data);
}
// Removes the visual chat typing message
const removeChatTyping = (data) => {
getTypingMessages(data).fadeOut(function () {
$(this).remove();
});
}
// Adds a message element to the messages and scrolls to the bottom
// el - The element to add as a message
// options.fade - If the element should fade-in (default = true)
// options.prepend - If the element should prepend
// all other messages (default = false)
const addMessageElement = (el, options) => {
var $el = $(el);
// Setup default options
if (!options) {
options = {};
}
if (typeof options.fade === 'undefined') {
options.fade = true;
}
if (typeof options.prepend === 'undefined') {
options.prepend = false;
}
// Apply options
if (options.fade) {
$el.hide().fadeIn(FADE_TIME);
}
if (options.prepend) {
$messages.prepend($el);
} else {
$messages.append($el);
}
$messages[0].scrollTop = $messages[0].scrollHeight;
}
// Prevents input from having injected markup
const cleanInput = (input) => {
return $('<div/>').text(input).html();
}
// Updates the typing event
const updateTyping = () => {
if (connected) {
if (!typing) {
typing = true;
socket.emit('typing');
}
lastTypingTime = (new Date()).getTime();
setTimeout(() => {
var typingTimer = (new Date()).getTime();
var timeDiff = typingTimer - lastTypingTime;
if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
socket.emit('stop typing');
typing = false;
}
}, TYPING_TIMER_LENGTH);
}
}
// Gets the 'X is typing' messages of a user
const getTypingMessages = (data) => {
return $('.typing.message').filter(function (i) {
return $(this).data('username') === data.username;
});
}
// Gets the color of a username through our hash function
const getUsernameColor = (username) => {
// Compute hash code
var hash = 7;
for (var i = 0; i < username.length; i++) {
hash = username.charCodeAt(i) + (hash << 5) - hash;
}
// Calculate color
var index = Math.abs(hash % COLORS.length);
return COLORS[index];
}
// Keyboard events
$window.keydown(event => {
// Auto-focus the current input when a key is typed
if (!(event.ctrlKey || event.metaKey || event.altKey)) {
$currentInput.focus();
}
// When the client hits ENTER on their keyboard
if (event.which === 13) {
if (username) {
sendMessage();
socket.emit('stop typing');
typing = false;
} else {
setUsername();
}
}
});
$inputMessage.on('input', () => {
updateTyping();
});
// Click events
// Focus input when clicking on the message input's border
$inputMessage.click(() => {
$inputMessage.focus();
});
// Socket events
// Whenever the server emits 'login', log the login message
socket.on('login', (data) => {
connected = true;
// Display the welcome message
var message = " – Welcome to onMap Chat – ";
log(message, {
prepend: true
});
addParticipantsMessage(data);
});
// Whenever the server emits 'new message', update the chat body
socket.on('new message', (data) => {
addChatMessage(data);
});
socket.on('geoloc', (data) => {
moveParticipantPoint(data);
});
// Whenever the server emits 'user joined', log it in the chat body
socket.on('user joined', (data) => {
log(data.username + ' joined');
addParticipantsMessage(data);
});
var cryptoLib = require('@skavinvarnan/cryptlib');
var iv = "1234123412341234";
 
// Whenever the server emits 'user left', log it in the chat body
socket.on('user left', (data) => {
log(data.username + ' left');
addParticipantsMessage(data);
removeChatTyping(data);
removeParticipantPoint(data);
});
// Whenever the server emits 'typing', show the typing message
socket.on('typing', (data) => {
addChatTyping(data);
});
// Whenever the server emits 'stop typing', kill the typing message
socket.on('stop typing', (data) => {
removeChatTyping(data);
});
socket.on('disconnect', () => {
log('you have been disconnected');
});
socket.on('reconnect', () => {
log('you have been reconnected');
if (username) {
socket.emit('add user', username);
}
});
socket.on('reconnect_error', () => {
log('attempt to reconnect has failed');
});
// Crypto functions
var cryptoLib = require('@skavinvarnan/cryptlib');
var iv = "1234123412341234";
function encrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
function decrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.decrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
function oencrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(JSON.stringify(data), shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
window.encrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
 
function odecrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
var ostring = cryptoLib.decrypt(data, shaKey, iv);
return JSON.parse(ostring);
} catch (exception) {
throw new Error(exception.message);
}
window.decrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.decrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
 
var Map = ol.Map
var View = ol.View;
var TileLayer = ol.layer.Tile;
var OSM = ol.source.OSM;
var Feature = ol.Feature;
var Geolocation = ol.Geolocation;
var Point = ol.geom.Point;
var VectorSource = ol.source.Vector;
var VectorLayer = ol.layer.Vector;
var toStringXY = ol.coordinate.toStringXY;
var CircleStyle = ol.style.Circle, Fill = ol.style.Fill, Stroke = ol.style.Stroke, Style = ol.style.Style, Text = ol.style.Text;
var view = new View({
center: [266736 ,5955932],
zoom: 2
});
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: view
});
var geolocation = new Geolocation({
trackingOptions: {
enableHighAccuracy: true
},
projection: view.getProjection()
});
function el(id) {
return document.getElementById(id);
window.oencrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(JSON.stringify(data), shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
 
geolocation.setTracking(true);
// update the HTML page when the position changes.
geolocation.on('change', function() {
el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
el('altitude').innerText = geolocation.getAltitude() + ' [m]';
el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
el('heading').innerText = geolocation.getHeading() + ' [rad]';
el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
});
// handle geolocation error.
geolocation.on('error', function(error) {
var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';
});
var accuracyFeature = new Feature();
geolocation.on('change:accuracyGeometry', function() {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});
if(username == null || username == undefined) username = makeid();
socket.emit('add user', username, room);
$chatPage.show();
$currentInput = $inputMessage.focus();
var positionFeature = new Feature();
positionFeature.setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: getUsernameColor(username)
}),
stroke: new Stroke({
color: '#fff',
width: 2
})
})
}));
geolocation.on('change:position', function() {
// Set center of the map (may be needed)
//map.getView().setCenter(geolocation.getPosition());
var coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ?
new Point(coordinates) : null);
//console.log(coordinates);
var newCoord = ol.proj.transform(coordinates, 'EPSG:3857', 'EPSG:4326');
//console.log(newCoord);
socket.emit('geoloc', oencrypt(newCoord, password));
});
var mylayer = new VectorLayer({
map: map,
source: new VectorSource({
features: [accuracyFeature, positionFeature]
})
});
function moveParticipantPoint(data){
console.log("Got data " + data.coordinates + " from " + data.username);
if (userPositions[data.username] != null) {
// The point exist we pass
}
else{
userPositions[data.username] = new Feature();
userPositions[data.username].setStyle(new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: getUsernameColor(data.username)
}),
stroke: new Stroke({
color: '#fff',
width: 2
})
})
}));
mylayer.getSource().addFeature(userPositions[data.username]);
}
var coord = odecrypt(data.coordinates, password);
var ucoord = ol.proj.transform(coord, 'EPSG:4326', 'EPSG:3857');
userPositions[data.username].setGeometry(ucoord ?
new Point(ucoord) : null);
//console.log(mylayer.getSource().getFeatures());
}
function removeParticipantPoint(data){
console.log("Got del session from " + data.username);
mylayer.getSource().removeFeature(userPositions[data.username]);
delete userPositions[data.username];
mylayer.getSource().refresh();
}
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
window.odecrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
var ostring = cryptoLib.decrypt(data, shaKey, iv);
return JSON.parse(ostring);
} catch (exception) {
throw new Error(exception.message);
}
});
}
},{"@skavinvarnan/cryptlib":1}],14:[function(require,module,exports){
var asn1 = exports;
 
......
// Crypto functions
var cryptoLib = require('@skavinvarnan/cryptlib');
var iv = "1234123412341234";
window.encrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
window.decrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.decrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
window.oencrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(JSON.stringify(data), shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
window.odecrypt = function (data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
var ostring = cryptoLib.decrypt(data, shaKey, iv);
return JSON.parse(ostring);
} catch (exception) {
throw new Error(exception.message);
}
}
\ No newline at end of file
......@@ -270,48 +270,6 @@ $(function() {
log('attempt to reconnect has failed');
});
// Crypto functions
var cryptoLib = require('@skavinvarnan/cryptlib');
var iv = "1234123412341234";
function encrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
function decrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.decrypt(data, shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
function oencrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
return cryptoLib.encrypt(JSON.stringify(data), shaKey, iv);
} catch (exception) {
throw new Error(exception.message);
}
}
function odecrypt(data, password){
try {
shaKey = cryptoLib.getHashSha256(password, 32);
var ostring = cryptoLib.decrypt(data, shaKey, iv);
return JSON.parse(ostring);
} catch (exception) {
throw new Error(exception.message);
}
}
var Map = ol.Map
var View = ol.View;
......
......@@ -14,7 +14,10 @@
{% endblock %}
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
{% block scripts %}{% endblock %}
</body>
......
......@@ -34,5 +34,6 @@
<script src="assets/openlayer.min.js"></script>
<script src="bower_components/crypto-js/crypto-js.js"></script>
<script>var username = "{{ username | escape }}"; var room = "{{ room | escape }}"; var password = "{{ password | escape }}";</script>
<script src="assets/main-bundle.js"></script>
<script src="assets/crypto.bundle.js"></script>
<script src="assets/main.js"></script>
{% endblock %}
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