mirror of
https://github.com/darkwire/darkwire.io.git
synced 2025-07-20 20:17:38 +00:00
Simplify key stuff
This commit is contained in:
Alan Friedman
parent
6b5e042f80
commit
5e2a9e2ac0
117
src/js/main.js
117
src/js/main.js
@ -23,8 +23,6 @@ $(function() {
|
||||
var $inputMessage = $('.inputMessage'); // Input message input box
|
||||
var $key = $('.key');
|
||||
var $genKey = $('.new_key');
|
||||
var $removeKey = $('#remove_key');
|
||||
var encryptionEnabled;
|
||||
var $participants = $('#participants');
|
||||
|
||||
var $chatPage = $('.chat.page'); // The chatroom page
|
||||
@ -37,6 +35,7 @@ $(function() {
|
||||
var typing = false;
|
||||
var lastTypingTime;
|
||||
var $currentInput = $usernameInput.focus();
|
||||
var encryptionKey;
|
||||
|
||||
var clipboard = new Clipboard('.copyable');
|
||||
|
||||
@ -79,6 +78,9 @@ $(function() {
|
||||
|
||||
// Sends a chat message
|
||||
function sendMessage () {
|
||||
// Don't allow sending if key is empty
|
||||
if (!encryptionKey.trim().length) return;
|
||||
|
||||
var message = $inputMessage.val();
|
||||
// Prevent markup from being injected into the message
|
||||
message = cleanInput(message);
|
||||
@ -244,8 +246,13 @@ $(function() {
|
||||
}
|
||||
|
||||
// If enter is pressed on key input then close key modal
|
||||
if (event.which === 13 && $('input#key').is(':focus')) {
|
||||
$('#key-modal').modal('hide');
|
||||
if (event.which === 13 && $('#join-modal input').is(':focus')) {
|
||||
checkJoinKey();
|
||||
}
|
||||
|
||||
// If enter is pressed on edit key input
|
||||
if (event.which === 13 && $('#settings-modal .edit-key input.key').is(':focus')) {
|
||||
saveKey();
|
||||
}
|
||||
});
|
||||
|
||||
@ -260,12 +267,7 @@ $(function() {
|
||||
|
||||
$genKey.click(function () {
|
||||
var key = (Math.random() * Math.random()).toString(36).substring(7);
|
||||
$key.val(key);
|
||||
keyInputChanged(key);
|
||||
});
|
||||
|
||||
$removeKey.click(function() {
|
||||
$key.val('');
|
||||
updateKeyVal(key);
|
||||
});
|
||||
|
||||
// Socket events
|
||||
@ -282,17 +284,14 @@ $(function() {
|
||||
if (data.numUsers > 1) {
|
||||
$('#join-modal').modal('show');
|
||||
key = '';
|
||||
encryptionEnabled = false;
|
||||
$('.chat .warning-sign').show();
|
||||
} else {
|
||||
encryptionEnabled = true;
|
||||
$('.chat .warning-sign').hide();
|
||||
}
|
||||
$key.val(key);
|
||||
updateKeyVal(key);
|
||||
});
|
||||
|
||||
// Whenever the server emits 'new message', update the chat body
|
||||
socket.on('new message', function (data) {
|
||||
// Don't show messages if no key
|
||||
|
||||
if (!isActive) {
|
||||
newMessages++;
|
||||
favicon.badge(newMessages);
|
||||
@ -337,10 +336,6 @@ $(function() {
|
||||
|
||||
setUsername();
|
||||
|
||||
$('span.key-btn').click(function() {
|
||||
$('#settings-modal').modal('show');
|
||||
});
|
||||
|
||||
window.onfocus = function () {
|
||||
isActive = true;
|
||||
newMessages = 0;
|
||||
@ -390,44 +385,17 @@ $(function() {
|
||||
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
|
||||
function keyInputChanged(val) {
|
||||
function joinKeyInputChanged(val) {
|
||||
if (!val.trim().length) {
|
||||
encryptionEnabled = false;
|
||||
$('.modal-footer button.encryption-inactive').show();
|
||||
$('.modal-footer button.encryption-active').hide();
|
||||
$('.chat .warning-sign').show();
|
||||
$('.inputMessage').addClass('encryption-disabled');
|
||||
$('#join-modal .modal-footer button').attr('disabled', 'disabled');
|
||||
} else {
|
||||
encryptionEnabled = true;
|
||||
$('.modal-footer button.encryption-active').show();
|
||||
$('.modal-footer button.encryption-inactive').hide();
|
||||
$('.chat .warning-sign').hide();
|
||||
$('.inputMessage').removeClass('encryption-disabled');
|
||||
$('#join-modal .modal-footer button').removeAttr('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
$('.key').on('input propertychange paste change', function() {
|
||||
$('#join-modal .key').on('input propertychange paste change', function() {
|
||||
var val = $(this).val();
|
||||
$('.key').val(val);
|
||||
keyInputChanged(val);
|
||||
});
|
||||
|
||||
$('.modal-footer button.encryption-inactive').click(function() {
|
||||
var n = noty({
|
||||
text: 'Encryption is OFF. Anyone with this URL can read your messages. Turn on encryption in Settings.',
|
||||
theme: 'relax',
|
||||
type: 'error',
|
||||
timeout: 5000
|
||||
});
|
||||
});
|
||||
|
||||
$('.chat .warning-sign').click(function() {
|
||||
var n = noty({
|
||||
text: 'Encryption is OFF. Anyone with this URL can read your messages. Turn on encryption in Settings.',
|
||||
theme: 'relax',
|
||||
type: 'error',
|
||||
timeout: 5000
|
||||
});
|
||||
joinKeyInputChanged(val);
|
||||
});
|
||||
|
||||
$('.navbar .participants').click(function() {
|
||||
@ -450,4 +418,49 @@ $(function() {
|
||||
});
|
||||
}
|
||||
|
||||
function updateKeyVal(val) {
|
||||
$('.key').val(val);
|
||||
$('.key').text(val);
|
||||
encryptionKey = val;
|
||||
}
|
||||
|
||||
// Prevent closing join-modal
|
||||
$('#join-modal').modal({
|
||||
backdrop: 'static',
|
||||
show: false
|
||||
});
|
||||
|
||||
$('.read-key').click(function() {
|
||||
$('.edit-key').show();
|
||||
$('.edit-key input').focus();
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$('.edit-key #cancel-key-edit').click(function() {
|
||||
$('.edit-key').hide();
|
||||
$('.read-key').show();
|
||||
updateKeyVal(encryptionKey);
|
||||
});
|
||||
|
||||
$('.edit-key #save-key-edit').click(function() {
|
||||
saveKey();
|
||||
});
|
||||
|
||||
function saveKey() {
|
||||
$('.edit-key').hide();
|
||||
$('.read-key').show();
|
||||
updateKeyVal($('.edit-key input.key').val());
|
||||
}
|
||||
|
||||
$('#join-modal .modal-footer button').click(function() {
|
||||
checkJoinKey();
|
||||
});
|
||||
|
||||
function checkJoinKey() {
|
||||
var key = $('#join-modal input').val().trim();
|
||||
if (!key.length) return;
|
||||
updateKeyVal(key);
|
||||
$('#join-modal').modal('hide');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.3 KiB |
@ -41,6 +41,10 @@ p {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Pages */
|
||||
|
||||
.pages {
|
||||
@ -167,14 +171,6 @@ input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#first-modal .modal-footer button.encryption-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#join-modal .modal-footer button.encryption-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat #input-icons {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
@ -224,3 +220,17 @@ input {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.read-key {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.read-key span.key {
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.edit-key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -88,18 +88,22 @@
|
||||
<h3 class="modal-title">Settings</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>About This Room</h4>
|
||||
<p>Others can join this room using your current URL: <span class='room-url bold' id='settings-room-url'></span> <button class="btn btn-default btn-xs copyable" data-clipboard-target="#settings-room-url">Copy</button></p>
|
||||
<h4>Invite People to This Room</h4>
|
||||
<p id="settings-share-text">Let's chat on FattyChat at <span class='room-url bold' id='first-room-url'></span> using the key <span class="key bold"></span> <button class="btn btn-default btn-xs copyable" type="button" data-clipboard-target="#settings-share-text"><span class="glyphicon glyphicon-copy"></span> Copy</button></p>
|
||||
<br>
|
||||
<h4>Encryption Key</h4>
|
||||
<h4>Edit Your Key</h4>
|
||||
<div class="read-key">
|
||||
<span class="key" id="read-key"></span> <span class="glyphicon glyphicon-pencil"></span>
|
||||
</div>
|
||||
<div class="edit-key">
|
||||
<div class="input-group">
|
||||
<input class="form-control key" placeholder="Enter key here" type="text" id="settings-key"></input>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default copyable" type="button" data-clipboard-target="#settings-key"><span class="glyphicon glyphicon-copy"></span> Copy</button>
|
||||
</span>
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" type="button" id='cancel-key-edit'>Cancel</button>
|
||||
<button class="btn btn-primary" type="button" id='save-key-edit'>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>To use a custom key, enter it above. To generate a new key, click here: <button class="new_key btn btn-default btn-xs">Generate Key</button></p>
|
||||
<p>Notify all other participants when you change this key.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
|
||||
@ -117,24 +121,11 @@
|
||||
<h3 class="modal-title">Welcome to FattyChat</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>About This Room</h4>
|
||||
<p>Others can join this room using your current URL: <span class='room-url bold' id='first-room-url'></span> <button class="btn btn-default btn-xs copyable" data-clipboard-target="#first-room-url">Copy</button></p>
|
||||
<br>
|
||||
<h4>Encryption Key</h4>
|
||||
<p>A random encryption key has been generated for you below. This key prevents anyone with this chat room's URL from reading your messages.
|
||||
<div class="input-group">
|
||||
<input class="form-control key" placeholder="Enter key here" type="text" id='first-key'></input>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default copyable" type="button" data-clipboard-target="#first-key"><span class="glyphicon glyphicon-copy"></span> Copy</button>
|
||||
</span>
|
||||
</div>
|
||||
<p>Share this key with all other participants. They will be prompted to enter the key when they join the room.</p>
|
||||
<p>To use a custom key, enter it above. To generate a new key, click here: <button class="new_key btn btn-default btn-xs">Generate Key</button></p>
|
||||
<p>You can view and change this key later in Settings.</p>
|
||||
<p>We've placed you in a new chat room. Invite people to join using the text below.</p>
|
||||
<p id="share-text">Let's chat on FattyChat at <span class='room-url bold' id='first-room-url'></span> using the key <span class="key bold"></span> <button class="btn btn-default btn-xs copyable" type="button" data-clipboard-target="#share-text"><span class="glyphicon glyphicon-copy"></span> Copy</button></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
|
||||
<button type="button" class="btn btn-danger encryption-inactive" data-dismiss="modal">Continue Without Encryption</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -144,26 +135,14 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h3 class="modal-title">Welcome to FattyChat</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>About This Room</h4>
|
||||
<p>Others can join this room using your current URL: <span class='room-url bold' id='join-room-url'></span> <button class="btn btn-default btn-xs copyable" data-clipboard-target="#join-room-url">Copy</button></p>
|
||||
<br>
|
||||
<h4>Encryption Key</h4>
|
||||
<p>If you were given an encryption key, enter it below.</p>
|
||||
<div class="input-group">
|
||||
<h4>Enter Your Key Below</h4>
|
||||
<input class="form-control key" placeholder="Enter key here" type="text" id='join-key'></input>
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default copyable" type="button" data-clipboard-target="#join-key"><span class="glyphicon glyphicon-copy"></span> Copy</button>
|
||||
</span>
|
||||
</div>
|
||||
<p>You can view and change this key later in Settings.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success encryption-active" data-dismiss="modal">Done</button>
|
||||
<button type="button" class="btn btn-danger encryption-inactive" data-dismiss="modal">Continue Without Encryption</button>
|
||||
<button type="button" class="btn btn-success encryption-active" disabled="disabled" data-dismiss="modal">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user