From 5e2a9e2ac0deb16c6122b00543324228a654839b Mon Sep 17 00:00:00 2001 From: Alan Friedman Date: Tue, 12 Jan 2016 20:09:27 -0500 Subject: [PATCH] Simplify key stuff --- src/js/main.js | 117 ++++++++++++++++++++++----------------- src/public/favicon.ico | Bin 3769 -> 2323 bytes src/public/style.css | 28 +++++++--- src/views/index.mustache | 59 +++++++------------- 4 files changed, 103 insertions(+), 101 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index cd59adf..ef0b60e 100644 --- a/src/js/main.js +++ b/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'); + } + }); diff --git a/src/public/favicon.ico b/src/public/favicon.ico index d49da2f2fab1bdc81d3e5a45aa9f20366360dc97..2f7fbc55bdb516f64337ea43369699ea8dab1454 100644 GIT binary patch delta 1534 zcmV4v-U1erXaX7xLNGQsH$g%tAI5$B;HbOBmLzCVDFbqO4HaIsyLN`J&F+-CY16F@ZS;Mse00oChL_t(|+MJgS zOw@H4$N$H@;Ta&vv}LQDvvNXl&;mxUgu19jEfS*U$X=Fftc9$cgkw#rl}%mdQbsK) zOkJq~%OF~1K~b?nD~Og6$w79~Nd&~b^nKuae}5cz$I);5?EbI!dw$RFdA`r{H~4%$ zEpSv+RA_%SH8q;SVDMjB0*-?DU;{WYK0aRPbUJf!oB|dA4>%2un@pxdiHV7=INr$T z-vmzrUu|uzmXnjC&t=krjG>_+&EasUmkPlsr~~hV0T2Tgf=|GW;1msc*zI<&9vB!f z<9G}_1)c{x!S7>ZW7Fn}3T8l5)Qrm$z{}P4fQNs;i@f(Wf6st^;08B#*w zs#imMAjtTfD`)^&U>G>TQt&z`7T1GsKr;9ZYzCi#deBAVW)6vgKuStV0v{8%zb6X_ zVc;d;f)Mwv1Lwe9a?;SyFm0}=2v)xdtORStUhoWfA;5dG;=h&iHQ+58_8BPQ`H~si zJa)T9pbGp2z6B#74cNiGpcLE( zj(}^(hrj~90W|8x8dTqt;U-2*5bT31(>stwD)D?ArnKMBsN z|I*#vt(BFPMLMZDK0ZFbyuAD!xL$t(xTm+bH*GQ~#r;SP_2ERxR|b$@hF4R?%ICP+ zC%|n|H4_pNIx&|uFHaIi+m@P|S{q7=7qN1kQ4A<%3={+jTsu|oZfb`*ZlO4pAYLRp z#(Di0a8al%i06ZTg{uZPvmrUo+?J66wo~yOjP^zB4<2W>)PkqEm?CA4L27@+Gy|^W zYDOrt{^%X$>Q+*Qebk73;3cq2Nx>_?vrIv$0|&rIEZtsZu3<{_lmSRTQMh-(WfYxr z0bY@pPw-d_*$>u%g8|QV)7V#mh(xNgmFn@L4#6cRzUhd6VZbwRBiC}Y4AE5?#nKf&I+>>qoPVI>N``yQC z_odX0An6%LRg82wz!!fg$+L{p{8rEl z9e(eT{YNos*Sq4<($bAe@j1c{SOn#5<<&Sl-uWEz;0@Wq=zAe%QjG^SFttUimK>QTl2tTw2P9wmZEb9)2W^l_VC^@ zevGP_A##2xyI&g%lSuN%3~J|Oi{y6C`d!dZN!}5{tqsbjy3{U=tt?8?M;wyA0lG38 k9UZ-$EqmBb>OTPn0L`z@EZwVDBme*a07*qoM6N<$g8K2?ZU6uP delta 2991 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 diff --git a/src/public/style.css b/src/public/style.css index ecb2e98..db06e25 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -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; @@ -223,4 +219,18 @@ input { #participants-modal ul.users li .you { color: #333; font-weight: 400; -} \ No newline at end of file +} + +.read-key { + cursor: pointer; +} + +.read-key span.key { + border-bottom: 1px solid #333; +} + +.edit-key { + display: none; +} + + diff --git a/src/views/index.mustache b/src/views/index.mustache index aecc3f8..52f02fc 100644 --- a/src/views/index.mustache +++ b/src/views/index.mustache @@ -88,18 +88,22 @@ @@ -144,26 +135,14 @@