Rename badge setting to desktopNotifications

Also checks the browser status and display a warning message if it
blocks desktop notifications

client/css/style.css

@@ -1109,6 +1109,11 @@ button,
 	color: #2ecc40;
 }
 
+#settings .error {
+	color: #e74c3c;
+	margin-top: .2em;
+}
+
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;

client/index.html

@@ -243,8 +243,9 @@
 							</div>
 							<div class="col-sm-12">
 								<label class="opt">
-								<input id="badge" type="checkbox" name="badge">
-								Enable badge
+								<input id="desktopNotifications" type="checkbox" name="desktopNotifications">
+								Enable desktop notifications<br>
+								<div class="error" id="warnDisabledDesktopNotifications"><strong>Warning</strong>: Desktop notifications are blocked by your web browser</div>
 								</label>
 							</div>
 							<div class="col-sm-12">

client/js/lounge.js

@@ -427,7 +427,7 @@ $(function() {
 	var userStyles = $("#user-specified-css");
 	var settings = $("#settings");
 	var options = $.extend({
-		badge: false,
+		desktopNotifications: false,
 		colors: false,
 		join: true,
 		links: true,
@@ -487,11 +487,11 @@ $(function() {
 	}).find("input")
 		.trigger("change");
 
-	$("#badge").on("change", function() {
+	$("#desktopNotifications").on("change", function() {
 		var self = $(this);
 		if (self.prop("checked")) {
 			if (Notification.permission !== "granted") {
-				Notification.requestPermission();
+				Notification.requestPermission(updateDesktopNotificationStatus);
 			}
 		}
 	});
@@ -689,7 +689,7 @@ $(function() {
 				}
 				toggleFaviconNotification(true);
 
-				if (options.badge && Notification.permission === "granted") {
+				if (options.desktopNotifications && Notification.permission === "granted") {
 					var title;
 					var body;
 
@@ -792,6 +792,8 @@ $(function() {
 		});
 	});
 
+	windows.on("show", "#settings", updateDesktopNotificationStatus);
+
 	forms.on("submit", "form", function(e) {
 		e.preventDefault();
 		var event = "auth";
@@ -918,6 +920,23 @@ $(function() {
 		location.reload();
 	}
 
+	function updateDesktopNotificationStatus(){
+		var checkbox = $("#desktopNotifications");
+		var warning = $("#warnDisabledDesktopNotifications");
+
+		if (Notification.permission === "denied"){
+			checkbox.attr("disabled", true);
+			checkbox.attr("checked", false);
+			warning.show();
+		} else {
+			if (Notification.permission === "default" && checkbox.prop("checked")){
+				checkbox.attr("checked", false);
+			}
+			checkbox.attr("disabled", false);
+			warning.hide();
+		}
+	}
+
 	function sortable() {
 		sidebar.sortable({
 			axis: "y",