Implement random room generator, login page tweaks

css/style.css

@@ -233,27 +233,20 @@ div#bubble #loginTabs [data-selected=true] {
 div#bubble .loginForm {
 	width: 500px;
 	height: 172px;
-	margin: 0 auto;
-	display: block;
+	margin: auto;
 	z-index: 1;
-	position: relative;
 }
 
 div#bubble .loginForm [type=text] {
-	margin: 9px 0;
-	border: none;
-	display: block;
-	padding: 7px;
+	padding: 5px;
 	text-align: center;
-	resize: none;
-	background: #999;
 }
 
 div#bubble .loginForm #conversationName {
+	font-size: 2em;
 	border-radius: 4px 0 0 0;
 	width: 450px;
-	font-size: 2.8em;
-	margin: 0 auto 10px auto;
+	margin: 0 auto 5px auto;
 	display: inline-block;
 	border: 0;
 	outline: 0;
@@ -263,18 +256,26 @@ div#bubble .loginForm #conversationName {
 
 div#bubble .loginForm #conversationNameStrength {
 	visibility: hidden;
+	width: 18px;
+	height: 18px;
+	background-size: 12px;
+	background-repeat: no-repeat;
+	border-radius: 100%;
+}
+
+div#bubble .loginForm #randomRoomName {
 	display: inline-block;
+	cursor: pointer;
 	width: 20px;
 	height: 20px;
-	background-size: 12px;
+	background-image: url('../img/icons/icons8-dice-90.png');
+	background-size: 16px;
 	background-repeat: no-repeat;
-	background-position: center;
-	border-radius: 50%;
 }
 
 div#bubble .loginForm #nickname {
 	width: 300px;
-	font-size: 2em;
+	font-size: 1.8em;
 	margin: 0;
 	display: inline;
 	border: 0;
@@ -321,6 +322,10 @@ div#bubble div#info {
 	font-family: Verdana, Arial, Helvetica;
 }
 
+div#bubble div li {
+	margin: 5px 0;
+}
+
 div#bubble #info #introParagraph {
 	/*color: #333;*/
 	color: #e5e5e5;
@@ -352,11 +357,32 @@ div#footer a {
 div#footer #version {
 	font-size: 10px;
 	font-family: monospace;
-	color: #FFF;
 	float: left;
 	margin-left: 4px;
 }
 
+div#footer #website {
+	font-size: 10px;
+	padding-left: 16px;
+	background-image: url("../img/icons/icons8-link-64.png");
+	background-position: center left;
+	background-repeat: no-repeat;
+	background-size: 12px;
+	float: left;
+	margin-left: 16px;
+}
+
+div#footer #github {
+	font-size: 10px;
+	padding-left: 16px;
+	background-image: url("../img/icons/github-mark-white.svg");
+	background-position: center left;
+	background-repeat: no-repeat;
+	background-size: 12px;
+	float: left;
+	margin-left: 16px;
+}
+
 a#customServer {
 	margin: 0 10px;
 	float: right;

index.html

@@ -30,6 +30,7 @@
     <script type="application/javascript" src="js/lib/localforage.js"></script>
     <script type="application/javascript" src="js/lib/autolink.js"></script>
     <script type="application/javascript" src="js/cryptodog.js"></script>
+    <script type="application/javascript" src="js/etc/roomName.js"></script>
     <script type="application/javascript" src="js/etc/keys.js"></script>
     <script type="application/javascript" src="js/etc/ui.js"></script>
     <script type="application/javascript" src="js/etc/color.js"></script>
@@ -90,7 +91,8 @@
                     <!-- https://xmpp.org/rfcs/rfc6122.html#addressing-fundamentals -->
 
                     <input type="text" id="conversationName" maxlength="1023" autocomplete="off" dir="ltr" data-utip-gravity="ne" />
-                    <span id="conversationNameStrength" data-utip-gravity="ne" data-utip></span>
+                    <div id="randomRoomName" data-utip-gravity="n" data-utip="Generate a random room name"></div>
+                    <div id="conversationNameStrength" data-utip-gravity="se" data-utip></div>
                     <input type="text" id="nickname" maxlength="1023" autocomplete="off" dir="ltr" />
                     <input type="submit" id="loginSubmit" dir="ltr" />
                     <div id="loginInfo"></div>
@@ -102,6 +104,8 @@ <h1 id="introHeader"></h1>
             </div>
             <div id="footer">
                 <div id="version"></div>
+                <a id="website" target="_blank" href="https://crypto.dog">Website</a>
+                <a id="github" target="_blank" href="https://github.com/Cryptodog">GitHub</a>
                 <div id="loginOptions">
                     <a href="#" id="languageSelect"></a>
                     <a href="#" id="customServer"></a>

js/cryptodog.js

@@ -1278,28 +1278,34 @@ $('#nickname').click(function() {
 })
 
 $('#conversationName').keyup(function (e) {
-	const conversationName = $.trim($('#conversationName').val());
+	$('#conversationName').val($('#conversationName').val().trimStart());
+	const conversationName = $('#conversationName').val();
 	const strength = $("#conversationNameStrength");
 
 	if (!conversationName) {
 		strength.css('visibility', 'hidden').mouseleave();
 		return;
 	}
 
+	const red = '#BD151C';
+	const orange = '#DE6F20';
 	if (conversationName === 'lobby') {
-		strength.css('background-color', 'red');
+		strength.css('background-color', red);
 		strength.css('background-image', 'url("img/icons/warning.svg")');
 		strength.attr('data-utip', 'This is a public room.');
 	} else {
 		const score = zxcvbn(conversationName).score;
 		strength.css('visibility', 'visible');
 		if (score < 4) {
-			strength.css('background-color', score < 3 ? 'red' : 'orange');
+			strength.css('background-color', score < 3 ? red : orange);
 			strength.css('background-image', 'url("img/icons/warning.svg")');
+			// slightly different alignment for the warning symbol
+			strength.css('background-position', 'center bottom 4.25px');
 			strength.attr('data-utip', 'This room name is easy for an attacker to guess. Consider choosing something more complex.<br><br>A future update will enforce stronger, password-like room names.');
 		} else {
 			strength.css('background-color', 'green');
 			strength.css('background-image', 'url("img/icons/checkmark.svg")');
+			strength.css('background-position', 'center');
 			strength.attr('data-utip', 'This room name is hard for an attacker to guess.');
 		}
 	}
@@ -1309,6 +1315,10 @@ $('#conversationName').keyup(function (e) {
 	}
 });
 
+$('#randomRoomName').click(function() {
+	$('#conversationName').val(Cryptodog.roomName.generate());
+	$('#conversationName').keyup();
+})
 
 $('#CryptodogLogin').submit(function() {
 	// Don't submit if form is already being processed.

js/etc/locale.js

@@ -67,7 +67,6 @@
         $('#conversationName').attr('data-utip', languageObject['loginWindow']['conversationNameTooltip']);
         $('#nickname').attr('placeholder', languageObject['loginWindow']['nickname']);
         $('#loginSubmit').val(languageObject['loginWindow']['connect']);
-        $('#loginInfo').text(languageObject['loginWindow']['enterConversation']);
         $('#logout').attr('data-utip', languageObject['chatWindow']['logout']);
         $('#audio').attr('data-utip', languageObject['chatWindow']['audioNotificationsOff']);
         $('#notifications').attr('data-utip', languageObject['chatWindow']['desktopNotificationsOff']);

js/etc/roomName.js

@@ -0,0 +1,43 @@
+// Generate random, pronounceable room names
+// Based on https://github.com/lpar/kpwgen and https://shorl.com/koremutake.php
+
+Cryptodog.roomName = function () {
+    const numSyllables = 12;
+    const separator = '-';
+
+    const syllables = ['ba', 'be', 'bi', 'bo', 'bu', 'by', 'da', 'de', 'di', 'do', 'du', 'dy', 'fe', 'fi', 'fo', 'fu', 'fy', 'ga', 'ge', 'gi', 'go', 'gu', 'gy', 'ha', 'he', 'hi', 'ho', 'hu', 'hy', 'ja', 'je', 'ji', 'jo', 'ju', 'jy', 'ka', 'ke', 'ko', 'ku', 'ky', 'la', 'le', 'li', 'lo', 'lu', 'ly', 'ma', 'me', 'mi', 'mo', 'mu', 'my', 'na', 'ne', 'ni', 'no', 'nu', 'ny', 'pa', 'pe', 'pi', 'po', 'pu', 'py', 'ra', 're', 'ri', 'ro', 'ru', 'ry', 'sa', 'se', 'si', 'so', 'su', 'sy', 'ta', 'te', 'ti', 'to', 'tu', 'ty', 'va', 've', 'vi', 'vo', 'vu', 'vy', 'bra', 'bre', 'bri', 'bro', 'bru', 'bry', 'dra', 'dre', 'dri', 'dro', 'dru', 'dry', 'fra', 'fre', 'fri', 'fro', 'fru', 'fry', 'gra', 'gre', 'gri', 'gro', 'gru', 'gry', 'pra', 'pre', 'pri', 'pro', 'pru', 'pry', 'sta', 'ste', 'sti', 'sto', 'stu', 'sty', 'tra', 'tre', 'er', 'ed', 'in', 'ex', 'al', 'en', 'an', 'ad', 'or', 'at', 'ca', 'ap', 'el', 'ci', 'et', 'it', 'ob', 'of', 'af', 'au', 'cy', 'im', 'op', 'co', 'up', 'ing', 'con', 'ter', 'com', 'per', 'ble', 'der', 'cal', 'man', 'est', 'for', 'mer', 'col', 'ful', 'get', 'low', 'son', 'tle', 'day', 'pen', 'ten', 'tor', 'ver', 'ber', 'can', 'ple', 'fer', 'gen', 'den', 'mag', 'sub', 'sur', 'men', 'min', 'out', 'tal', 'but', 'cit', 'cle', 'cov', 'dif', 'ern', 'eve', 'hap', 'ket', 'nal', 'sup', 'ted', 'tem', 'tin', 'tro'];
+
+    if (syllables.length > 256) {
+        throw new Error('syllables list too large for RNG');
+    }
+
+    function generate() {
+        let name = '';
+
+        for (let i = 0; i < numSyllables; i++) {
+            if (i > 0 && i % 3 == 0) {
+                name += separator;
+            }
+
+            // select a syllable without bias
+            let rand;
+            do {
+                rand = randByte();
+            } while (rand >= syllables.length);
+
+            const s = syllables[rand];
+            name += s;
+        }
+        return name;
+    }
+
+    function randByte() {
+        const array = new Uint8Array(1);
+        crypto.getRandomValues(array);
+        return array[0];
+    }
+
+    return {
+        generate
+    };
+}();

js/etc/ui.js

@@ -149,7 +149,7 @@ Cryptodog.UI = {
     logout: function() {
         document.title = 'Cryptodog';
 
-        $('#loginInfo').text(Cryptodog.locale['loginMessage']['thankYouUsing']);
+        $('#loginInfo').text('');
         $('#conversationInfo,#optionButtons').fadeOut();
         $('#header').animate({ 'background-color': 'transparent' });
         $('.logo').animate({ margin: '-5px 5px 0 5px' });
@@ -163,7 +163,7 @@ Cryptodog.UI = {
             $('#footer').animate({ height: 14 });
 
             $('#conversationWrapper').fadeOut(function() {
-                $('#info,#loginOptions,#version,#loginInfo').fadeIn();
+                $('#info,#loginOptions,#version,#loginInfo,#website,#github').fadeIn();
 
                 $('#login').fadeIn(200, function() {
                     $('#login').css({ opacity: 1 });

js/etc/xmpp.js

@@ -163,7 +163,7 @@ $(window).ready(function() {
 
         window.setTimeout(function() {
             $('#loginOptions,#languages,#customServerDialog').fadeOut(200);
-            $('#version,#logoText,#loginInfo,#info').fadeOut(200);
+            $('#version,#logoText,#loginInfo,#info,#website,#github').fadeOut(200);
             $('#header').animate({ 'background-color': '#444' });
             $('.logo').animate({ margin: '-11px 5px 0 0' });
 

lang/en-us.json

@@ -3,15 +3,14 @@
     "fonts": "\"Helvetica Neue\", Helvetica, Arial, Verdana",
     "loginWindow": {
         "introHeader": "Welcome to Cryptodog",
-        "introParagraph": "Here are some tips: <ul><li>Cryptodog is experimental software. Don't use Cryptodog if you have a critical need for secure messaging.</li><li>We recommend installing the <a href=\"https://chrome.google.com/webstore/detail/cryptodog/blnkmmamdbladdaaddkjbecbphngeiec\">Chrome extension</a> to ensure you always have the official, most recent version.</li><li>Choose a room name that others can't easily guess.</li><li>Want to meet new people? Try joining room <b><code>lobby</code></b>.</li><li>Bug reports and feature requests are welcome! Please open an issue on <a href=\"https://github.com/Cryptodog/cryptodog/issues\">GitHub</a>.</li><li>If you've found a security vulnerability, please email us at <a href=\"mailto:[email protected]\">[email protected]</a>.</li><li>For other questions and concerns, email us at <a href=\"mailto:[email protected]\">[email protected]</a>.</li></ul>",
+        "introParagraph": "Cryptodog is experimental software that may have vulnerabilities. Please don't rely on it to protect your messages. Here are some tips on using it as safely as possible:<ul><li>Install the <a href=\"https://chrome.google.com/webstore/detail/cryptodog/blnkmmamdbladdaaddkjbecbphngeiec\">Chrome extension</a> to ensure you always have the official, most up-to-date version.</li><li>Treat the room name like a password—choose one that can't be easily guessed, and only share it with trusted people. Try clicking the dice icon to generate a random room name.</li><li>Nicknames are currently <b>not encrypted end-to-end</b>. For now, please don't use your real name or anything that personally identifies you.</li></ul>",
         "blog": "Blog",
         "customServer": "Custom server",
         "reset": "Reset",
-        "conversationName": "conversation name",
+        "conversationName": "room name",
         "nickname": "nickname",
         "connect": "connect",
-        "conversationNameTooltip": "Enter a name for your conversation and share it with people you'd like to talk to, or join <strong>lobby</strong> to meet new people!",
-        "enterConversation": "Enter the name of a conversation to join."
+        "conversationNameTooltip": "Choose a room name that's hard to guess, and share it with people you'd like to talk to. If you just want to meet new people, try joining <strong>lobby</strong>."
     },
     "loginMessage": {
         "enterConversation": "Please enter a conversation name.",
@@ -21,7 +20,6 @@
         "nicknameInUse": "Nickname in use.",
         "authenticationFailure": "Authentication failure.",
         "connectionFailed": "Connection failed.",
-        "thankYouUsing": "Thank you for using Cryptodog.",
         "registering": "Registering...",
         "connecting": "Connecting...",
         "connected": "Connected.",