harmacist/darkwire.io
1
0
Fork 0
mirror of https://github.com/darkwire/darkwire.io.git synced 2025-07-20 03:16:23 +00:00
Code Issues Projects Releases Wiki Activity

Add header and settings and about modals

Browse Source
This commit is contained in:
Alan Friedman 2016-01-09 13:53:41 -05:00
parent 0261a3961f
commit 14fc581a6f
3 changed files with 136 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/js/main.js
View File

@ -2,6 +2,7 @@ var fs = window.RequestFileSystem || window.webkitRequestFileSystem;
$(function() { $(function() {
var isActive = false; var isActive = false;
var encryptionEnabled = false;
var newMessages = 0; var newMessages = 0;
var FADE_TIME = 150; // ms var FADE_TIME = 150; // ms
var TYPING_TIMER_LENGTH = 400; // ms var TYPING_TIMER_LENGTH = 400; // ms
@ -22,7 +23,7 @@ $(function() {
var $messages = $('.messages'); // Messages area var $messages = $('.messages'); // Messages area
var $inputMessage = $('.inputMessage'); // Input message input box var $inputMessage = $('.inputMessage'); // Input message input box
var $key = $('#key'); var $key = $('#key');
var $genKey = $('#new_key'); var $genKey = $('.new_key');
var $removeKey = $('#remove_key'); var $removeKey = $('#remove_key');
var $chatPage = $('.chat.page'); // The chatroom page var $chatPage = $('.chat.page'); // The chatroom page
@ -97,11 +98,13 @@ $(function() {
} }
function encrypt(text) { function encrypt(text) {
return CryptoJS.AES.encrypt(text, $key.val()).toString(); var key = encryptionEnabled ? $key.val() : roomId;
return CryptoJS.AES.encrypt(text, key).toString();
} }
function decrypt(text) { function decrypt(text) {
return CryptoJS.AES.decrypt(text, $key.val()).toString(CryptoJS.enc.Utf8) || text; var key = encryptionEnabled ? $key.val() : roomId;
return CryptoJS.AES.decrypt(text, key).toString(CryptoJS.enc.Utf8) || text;
} }
// Log a message // Log a message
@ -270,17 +273,6 @@ $(function() {
// Whenever the server emits 'login', log the login message // Whenever the server emits 'login', log the login message
socket.on('login', function (data) { socket.on('login', function (data) {
connected = true; connected = true;
// Display the welcome message
var message = "Fatty.chat - Anonymous Chat - Room ID: " + roomId.replace('/', '') + '&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-text="https://fatty.chat' + roomId + '">Copy link to share</button>';
log(message, {
prepend: true,
html: true
});
message = "This chatroom is destroyed after all participants exit. Chat history is client side only and not persistent.";
log(message);
addParticipantsMessage(data); addParticipantsMessage(data);
}); });
@ -317,14 +309,10 @@ $(function() {
removeChatTyping(data); removeChatTyping(data);
}); });
socket.on('first', function() {
$('.modal').modal('show');
});
setUsername(); setUsername();
$('span.key-btn').click(function() { $('span.key-btn').click(function() {
$('#key-modal').modal('show'); $('#settings-modal').modal('show');
}); });
window.onfocus = function () { window.onfocus = function () {
@ -362,4 +350,42 @@ $(function() {
}, 2000); }, 2000);
}); });
// Nav links
$('a#settings-nav').click(function() {
$('#settings-modal').modal('show');
});
$('a#about-nav').click(function() {
$('#about-modal').modal('show');
});
$('.room-url').text('https://fatty.chat' + roomId);
$('.room-id').text(roomId.replace('/', ''));
$('#disable-encryption').hide();
$('.encryption-status').text('OFF');
$('.encryption-settings').hide();
$('#disable-encryption').click(function() {
encryptionEnabled = false;
$('.encryption-settings,#disable-encryption').hide();
$('#enable-encryption').show();
$('.encryption-status').text('OFF');
$('.key-btn.inactive').show();
$('.key-btn.active').hide();
});
$('#enable-encryption').click(function() {
encryptionEnabled = true;
$('.encryption-settings,#disable-encryption').show();
$('#enable-encryption').hide();
$('.encryption-status').text('ON');
$('.key-btn.inactive').hide();
$('.key-btn.active').show();
});
$('[data-toggle="tooltip"]').tooltip();
}); });

14
src/public/style.css
View File

@ -32,6 +32,15 @@ ul {
word-wrap: break-word; word-wrap: break-word;
} }
p {
margin: 15px 0 15px;
}
/* Typography */
.bold {
font-weight: 700;
}
/* Pages */ /* Pages */
.pages { .pages {
@ -114,6 +123,7 @@ input {
.chatArea { .chatArea {
height: 100%; height: 100%;
padding-bottom: 80px; padding-bottom: 80px;
padding-top: 60px;
} }
.messages { .messages {
@ -162,6 +172,10 @@ span.key-btn img {
width: 50px; width: 50px;
} }
span.key-btn.active {
display: none;
}
#key-modal input{ #key-modal input{
width: 100%; width: 100%;
height: 50px; height: 50px;

92
src/views/index.mustache
View File

@ -13,46 +13,102 @@
</script> </script>
</head> </head>
<body> <body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">FattyChat</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://fatty.chat/" target="_blank"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;&nbsp;New Room</a></li>
<li><a href="javascript:void(0)" id="settings-nav"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>&nbsp;&nbsp;Settings</a></li>
<li><a href="javascript:void(0)" id="about-nav"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;&nbsp;About</a></li>
</ul>
</div>
</div>
</nav>
<ul class="pages"> <ul class="pages">
<li class="chat page"> <li class="chat page">
<div class="chatArea"> <div class="chatArea">
<ul class="messages"></ul> <ul class="messages">
<li class="log">
<p>Welcome to FattyChat - Anonymous, Encrypted Chat</p>
<p>Others can join using this room using this link: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
</li>
</ul>
</div> </div>
<input class="inputMessage" placeholder="Type here..."/> <input class="inputMessage" placeholder="Type here..."/>
<span class='key-btn'><img src="https://s3.amazonaws.com/fattychat/img/iconmonstr-key-11-240.png"></span> <span class='key-btn inactive' data-toggle="tooltip" data-placement="auto" title="Encryption is disabled"><img src="https://s3.amazonaws.com/fattychat/img/key-inactive.png"></span>
<span class='key-btn active' data-toggle="tooltip" data-placement="auto" title="Encryption is enabled"><img src="https://s3.amazonaws.com/fattychat/img/key-active.png"></span>
</li> </li>
</ul> </ul>
<div class="modal fade" id="key-modal" tabindex="-1" role="dialog"> <div class="modal fade" id="about-modal" tabindex="-1" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<center><h4 class="modal-title">Chat Encryption Key for RoomId: <strong><span id="roomIdKey"></span></strong></h4></center> <h3 class="modal-title">About</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>This chat encryption key is randomly generated by every client. Clients must use the same chat key to decrypt chat messages. This key is <strong>NOT STORED</strong> nor transmitted to the server. Regardless if the room URL was shared, chat messages will appear as hash values until the same key is used between clients. You may change the key as many times as you want.</p> <p>FattyChat is the simplest way to chat anonymously online. No chat history is stored on a server or database, and plain text is never transferred over the wire.</p>
<div class="form-group">
<button id="new_key" class="btn btn-info btn-xs">Generate new key</button> <p>While basic encryption is used by default, you may choose to use a custom encryption key for extra security. Share this with all other participants in a secure manner.</p>
<button id="remove_key" class="btn btn-danger btn-xs">Remove Key*</button>
<p>Questions/comments? Email us at hello[at]fatty.chat</p>
</div> </div>
<div class="form-group"> <div class="modal-footer">
<small>*<strong>Warning</strong>: If there is no key specified, anyone with the chat url will be able to see decrypted messages.</small> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div> </div>
<div class="form-group">
<textarea id="key" class="form-control" rows="5" placeholder="Enter key here"></textarea>
</div> </div>
<div class="form-group"> </div>
<button class="form-control btn btn-default btn-xs copyable" data-clipboard-target="#key">Copy key</button> </div>
<div class="modal fade" id="settings-modal" tabindex="-1" role="dialog">
<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">&times;</span></button>
<h3 class="modal-title">Settings</h3>
</div>
<div class="modal-body">
<h4>About This Room</h4>
<p>Your room ID is <span class="room-id bold"></span>.</p>
<p>Others can join using this URL: <span class='room-url bold'></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-target=".room-url">Copy</button></p>
<br>
<h4>Encryption</h4>
<p>Encryption is <span class="encryption-status bold"></span>.&nbsp;&nbsp;
<button class="btn btn-primary btn-xs" id='enable-encryption'>Turn On Encryption</button>
<button class="btn btn-danger btn-xs" id='disable-encryption'>Turn Off Encryption</button>
</p>
<div class="encryption-settings">
<p>A random key has been generated for you below. Share this key with all other participants. Chat will only work if every participant uses the exact same key.</p>
<p>If you want to use your own key you can enter it below or &nbsp;<button class="new_key btn btn-default btn-xs">generate a new one</button></p>
<div class="input-group">
<input id="key" class="form-control" placeholder="Enter key here" type="text"></input>
<span class="input-group-btn">
<button class="btn btn-default copyable" type="button" data-clipboard-target="#key"><span class="glyphicon glyphicon-copy"></span></button>
</span>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
{{!-- <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> --}}
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div> </div>
</div><!-- /.modal-content --> </div>
</div><!-- /.modal-dialog --> </div>
</div><!-- /.modal --> </div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.3.js"></script> <script src="https://cdn.socket.io/socket.io-1.4.3.js"></script>