From ef22d84d97543049df2e247ddc27fc1165b90c7d Mon Sep 17 00:00:00 2001
From: Mattias Erming <mattias@mattiaserming.com>
Date: Wed, 10 Sep 2014 08:56:19 -0700
Subject: [PATCH] Add TLS/SSL support

---
 client/css/style.css | 59 +++++++++++++++++++++++++-------------------
 client/index.html    | 12 ++++++++-
 package.json         |  2 +-
 src/client.js        | 15 ++++++++---
 4 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 45c816cc..9c913534 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -9,6 +9,7 @@ body {
 }
 body {
 	background: #505d70;
+	background: #455164;
 	color: #222;
 	font: 16px Lato, sans-serif;
 	margin: 0;
@@ -81,14 +82,14 @@ button {
 	padding: 0 30px;
 }
 ::-moz-placeholder {
-	color: rgba(0, 0, 0, .25);
+	color: rgba(0, 0, 0, .35);
 	opacity: 1;
 }
 ::-webkit-input-placeholder {
-	color: rgba(0, 0, 0, .25);
+	color: rgba(0, 0, 0, .35);
 }
 :-ms-input-placeholder {
-	color: rgba(0, 0, 0, .25) !important;
+	color: rgba(0, 0, 0, .35) !important;
 }
 #wrap {
 	height: 100%;
@@ -135,7 +136,7 @@ button {
 	margin-top: 30px;
 }
 #sidebar .empty {
-	color: #818b9e;
+	color: #9ca5b4;
 	line-height: 1.6;
 	font-size: 12px;
 	margin-top: 20px;
@@ -241,7 +242,7 @@ button {
 	background: none;
 }
 #footer .icon {
-	color: #818b9e;
+	color: #9ca5b4;
 	display: inline-block;
 	font: 14px FontAwesome;
 	line-height: 34px;
@@ -262,13 +263,13 @@ button {
 	display: none;
 }
 #footer .sign-in:before {
-	content: "\f090";
+	content: "\f023";
 }
 #footer .connect:before {
-	content: "\f1eb";
+	content: "\f067";
 }
 #footer .settings:before {
-	content: "\f02d";
+	content: "\f013";
 }
 #footer .sign-out:before {
 	content: "\f13e";
@@ -340,6 +341,13 @@ button {
 #windows .window h1 {
 	font: 36px Lato;
 }
+#windows .window h2 {
+	border-bottom: 1px solid #eee;
+	color: #7f8c8d;
+	font-size: 22px;
+	margin: 30px 0 10px;
+	padding-bottom: 7px;
+}
 #windows .active {
 	display: block;
 }
@@ -460,17 +468,12 @@ button {
 	vertical-align: top;
 }
 #chat .time {
-	background: #fcfdfd;
-	background: #fcfcfc;
-	color: #e4eaee;
+	color: #d0dbe2;
 	text-align: right;
 	width: 46px;
 	min-width: 46px;
 }
 #chat .from {
-	background: #fcfdfd;
-	background: #fcfcfc;
-	border-right: 1px solid #f6f8f9;
 	border-right: 1px solid #f6f6f6;
 	color: #b1c3ce;
 	padding-right: 10px;
@@ -521,9 +524,7 @@ button {
 	max-width: 240px;
 }
 #chat .count {
-	background: #fcfcfc;
-	background: #fff;
-	border-bottom: 1px dashed #e7e7e7;
+	background: #fafafa;
 	height: 48px;
 	left: 0;
 	position: absolute;
@@ -531,7 +532,7 @@ button {
 	top: 0;
 }
 #chat .count:before {
-	color: #eee;
+	color: #cfcfcf;
 	font: 14px FontAwesome;
 	content: "\f002";
 	position: absolute;
@@ -590,15 +591,18 @@ button {
 	margin: 28px 0 0 -17px;
 	position: absolute;
 }
-#connect .btn {
-	margin-top: 25px;
+#connect .tls {
+	float: left;
+	font-size: 14px;
+	padding: 10px 2px;
 }
-#settings h2 {
-	border-bottom: 1px solid #eee;
-	color: #7f8c8d;
-	font-size: 22px;
-	margin: 30px 0 10px;
-	padding-bottom: 7px;
+#connect .tls input {
+	float: left;
+	margin: 3px 10px 0 0;
+}
+#connect .btn {
+	float: left;
+	margin-top: 25px;
 }
 #settings .title {
 	margin-bottom: -10px;
@@ -705,6 +709,9 @@ button {
 }
 
 @media (max-width: 480px) {
+	.container {
+		margin: 40px 0;
+	}
 	#chat .messages {
 		display: block;
 		padding: 5px 10px;
diff --git a/client/index.html b/client/index.html
index c070326c..b3a176e3 100644
--- a/client/index.html
+++ b/client/index.html
@@ -78,9 +78,19 @@
 							<div class="col-xs-4">
 								<label class="port">
 								Port
-								<input class="input" name="port" value="6667">
+								<input class="input" name="port" value="6697">
 								</label>
 							</div>
+							<div class="col-xs-12">
+								<label class="tls">
+									<input type="checkbox" name="tls" checked="checked">
+									Enable TLS/SSL
+								</label>
+							</div>
+							<div class="clearfix"></div>
+							<div class="col-xs-12">
+								<h2>User Preferences</h2>
+							</div>
 							<div class="col-xs-5">
 								<label>
 								Nick
diff --git a/package.json b/package.json
index b5af4ea8..59188708 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shout",
   "description": "A web IRC client",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "author": "Mattias Erming",
   "preferGlobal": true,
   "bin": {
diff --git a/src/client.js b/src/client.js
index abff43a4..cdeacc77 100644
--- a/src/client.js
+++ b/src/client.js
@@ -1,6 +1,7 @@
 var _ = require("lodash");
 var config = require("../config.json");
 var net = require("net");
+var Msg = require("./models/msg");
 var Network = require("./models/network");
 var slate = require("slate-irc");
 var tls = require("tls");
@@ -90,13 +91,21 @@ Client.prototype.connect = function(args) {
 	var client = this;
 	var server = _.defaults(_.pick(args, ['host', 'port', 'rejectUnauthorized', 'name']), {
 		host: "irc.freenode.org",
-		port: 6667,
-		rejectUnauthorized: true
+		port: 6697,
+		rejectUnauthorized: false
 	});
 
 	var stream = args.tls ? tls.connect(server) : net.connect(server);
 	stream.on("error", function(e) {
-		console.log(e);
+		console.log("Client#connect():\n" + e);
+		stream.end();
+		var msg = new Msg({
+			type: Msg.Type.ERROR,
+			text: "Connection error."
+		});
+		client.emit("msg", {
+			msg: msg
+		});
 	});
 
 	var nick = args.nick || "shout-user";