From 1ee1a1ce54970479eaaa76bd06cfc0bd77d839da Mon Sep 17 00:00:00 2001
From: varjolintu <sami.vanttinen@gmail.com>
Date: Sat, 27 May 2017 12:43:10 +0300
Subject: [PATCH] Redesigned password generator dialog

---
 chromeKeePassXC/background/httpauth.js |   6 +-
 chromeKeePassXC/background/keepass.js  |   4 -
 chromeKeePassXC/background/page.js     |  10 +-
 chromeKeePassXC/chromekeepassxc.css    | 106 +++++++++--------
 chromeKeePassXC/chromekeepassxc.js     | 153 +++++++++++--------------
 chromeKeePassXC/manifest.json          |   2 +-
 chromeKeePassXC/options/options.js     |   5 -
 chromeKeePassXC/popups/popup.html      |   6 +-
 8 files changed, 130 insertions(+), 162 deletions(-)

diff --git a/chromeKeePassXC/background/httpauth.js b/chromeKeePassXC/background/httpauth.js
index fe995b2..bd7223d 100644
--- a/chromeKeePassXC/background/httpauth.js
+++ b/chromeKeePassXC/background/httpauth.js
@@ -10,7 +10,7 @@ httpAuth.proxyUrl = null;
 
 
 httpAuth.handleRequest = function (details, callback) {
-	if(httpAuth.requestId == details.requestId || !page.tabs[details.tabId]) {
+	if (httpAuth.requestId == details.requestId || !page.tabs[details.tabId]) {
 		callback({});
 	}
 	else {
@@ -26,7 +26,7 @@ httpAuth.processPendingCallbacks = function(details) {
 	httpAuth.url = details.url;
 	httpAuth.isProxy = details.isProxy;
 
-	if(details.challenger){
+	if (details.challenger){
 		httpAuth.proxyUrl = details.challenger.host;
 	}
 
@@ -46,7 +46,7 @@ httpAuth.loginOrShowCredentials = function(logins) {
 		event.onHTTPAuthPopup(null, {"id": httpAuth.tabId}, {"logins": logins, "url": url});
 		//generate popup-list for HTTP Auth usernames + descriptions
 
-		if(page.settings.autoFillAndSend) {
+		if (page.settings.autoFillAndSend) {
 			httpAuth.callback({
 				authCredentials: {
 					username: logins[0].login,
diff --git a/chromeKeePassXC/background/keepass.js b/chromeKeePassXC/background/keepass.js
index 9d4ad25..3100f97 100644
--- a/chromeKeePassXC/background/keepass.js
+++ b/chromeKeePassXC/background/keepass.js
@@ -606,10 +606,6 @@ keepass.deleteKey = function(hash) {
 	localStorage.keyRing = JSON.stringify(keepass.keyRing);
 }
 
-keepass.getIconColor = function() {
-	return ((keepass.databaseHash in keepass.keyRing) && keepass.keyRing[keepass.databaseHash].icon) ? keepass.keyRing[keepass.databaseHash].icon : "blue";
-}
-
 keepass.setcurrentKeePassXCVersion = function(version) {
 	if (version) {
 		keepass.currentKeePassXC = {
diff --git a/chromeKeePassXC/background/page.js b/chromeKeePassXC/background/page.js
index 6c1a05e..0cbe005 100644
--- a/chromeKeePassXC/background/page.js
+++ b/chromeKeePassXC/background/page.js
@@ -19,19 +19,19 @@ page.initSettings = function() {
 		page.settings.checkUpdateKeePassXC = 3;
 	}
 	if (!("autoCompleteUsernames" in page.settings)) {
-		page.settings.autoCompleteUsernames = 1;
+		page.settings.autoCompleteUsernames = true;
 	}
 	if (!("autoFillAndSend" in page.settings)) {
-		page.settings.autoFillAndSend = 1;
+		page.settings.autoFillAndSend = true;
 	}
 	if (!("usePasswordGenerator" in page.settings)) {
-		page.settings.usePasswordGenerator = 1;
+		page.settings.usePasswordGenerator = true;
 	}
 	if (!("autoFillSingleEntry" in page.settings)) {
-		page.settings.autoFillSingleEntry = 0;
+		page.settings.autoFillSingleEntry = false;
 	}
 	if (!("autoRetrieveCredentials" in page.settings)) {
-		page.settings.autoRetrieveCredentials = 1;
+		page.settings.autoRetrieveCredentials = true;
 	}
 	localStorage.settings = JSON.stringify(page.settings);
 }
diff --git a/chromeKeePassXC/chromekeepassxc.css b/chromeKeePassXC/chromekeepassxc.css
index 2ed1f9b..c1be006 100644
--- a/chromeKeePassXC/chromekeepassxc.css
+++ b/chromeKeePassXC/chromekeepassxc.css
@@ -6,38 +6,65 @@
 	font-family: Verdana, Arial, sans-serif !important;
 	color: #222222 !important;
 }
+
 .ui-dialog-titlebar-close {
 	visibility: hidden !important;
 }
-.cip-ui-widget-overlay {
-	background: none !important;
-	z-index: 2147483601 !important;
-}
-.cip-ui-dialog {
-	z-index: 2147483602 !important;
-}
-.cip-ui-dialog .cip-ui-dialog-title {
-	font-size:.8em !important;
-}
-.cip-ui-dialog .cip-ui-dialog-titlebar {
-	padding:.1em .5em !important;
-}
-.cip-ui-dialog-content {
-	font-size: .8em !important;
+
+.ui-dialog {
+	font-size: 12px !important;
 }
 
-#cip-genpw-dialog {
-	text-align: left !important;
+.dialog-form .ui-dialog-content .ui-widget-content {
+	max-height: 80px !important;
 }
-#cip-genpw-dialog button {
-	height: 26px !important;
+
+.ui-dialog-titlebar {
+	background-color: #3a8233;
+	color: #fff;
 }
-.cip-genpw-clearfix:after {
-	clear: both;
-	line-height: 0;
-	content: "";
+
+.ui-dialog .ui-dialog-buttonpane { 
+    text-align: center !important;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
+    float: none !important;
+}
+
+.ui-button .ui-button-text .ui-button {
+	font-size: .10em !important; 
+}
+
+input.genpw-text {
+	font-size: .9em !important;
+	padding: .4em;
+	border-radius: 4px;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-collapse: separate;
+	width: 100%;
+}
+.genpw-input-group-addon {
+	font-size: inherit !important;
+	background-color: #eee;
+	border: 1px solid #ccc;
+	padding: .4em;
+	border-radius: 4px;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	white-space: nowrap;
+	vertical-align: middle;
+	display: table-cell;
+	border-collapse: separate;
+}
+
+.genpw-input-group {
+	position: relative;
 	display: table;
+	border-collapse: separate;
+	width: 100%;
 }
+
 .cip-genpw-icon {
 	position: absolute;
 	cursor: pointer;
@@ -62,38 +89,7 @@
 	height: 24px;
 	background-image: url(moz-extension://__MSG_@@extension_id__/icons/key_24x24.png);
 }
-.cip-genpw-password-frame {
-	margin-top: 5px !important;
-	margin-bottom: 5px !important;
-}
-.cip-genpw-password-frame > * {
-	height: 20px !important;
-	font-size: 11px !important;
-}
-.cip-genpw-textfield {
-	background: none !important;
-	font-size: 11px !important;
-	display: inline !important;
-	border: 1px solid rgb(170, 170, 170) !important;
-	padding: 1px 2px !important;
-	max-width: none !important;
-	min-width: 0 !important;
-	font-size: 1em !important;
-	width: 240px !important;
-	padding-left: 5px !important;
-}
-#cip-genpw-quality {
-	width: 50px !important;
-	padding-top: 1px !important;
-	padding-bottom: 1px !important;
-}
-.cip-genpw-label {
-	display: block !important;
-	margin: 5px 0 !important;
-}
-.cip-genpw-checkbox {
-	vertical-align: middle !important;
-}
+
 #cip-genpw-btn-fillin {
 	margin-right: 5px;
 }
diff --git a/chromeKeePassXC/chromekeepassxc.js b/chromeKeePassXC/chromekeepassxc.js
index da244fa..df17b7d 100644
--- a/chromeKeePassXC/chromekeepassxc.js
+++ b/chromeKeePassXC/chromekeepassxc.js
@@ -210,59 +210,28 @@ cipPassword.createDialog = function() {
 	_called.passwordCreateDialog = true;
 
 	var $dialog = jQuery("<div>")
+		.addClass("dialog-form")
 		.attr("id", "cip-genpw-dialog");
-
-	var $divFloat = jQuery("<div>").addClass("cip-genpw-clearfix");
-	var $btnGenerate = jQuery("<button>")
-		.text("Generate")
-		.attr("id", "cip-genpw-btn-generate")
-		.addClass("btn")
-		.addClass("btn-primary")
-		.addClass("btn-sm")
-		.css("float", "left")
-		.click(function(e) {
-			e.preventDefault();
-			browser.runtime.sendMessage({
-				action: "generate_password"
-			}, cipPassword.callbackGeneratedPassword);
-		});
-	$divFloat.append($btnGenerate);
-
-	var $btnClipboard = jQuery("<button>")
-		.text("Copy to clipboard")
-		.attr("id", "cip-genpw-btn-clipboard")
-		.addClass("btn")
-		.addClass("btn-sm")
-		.css("float", "right")
-		.click(function(e) {
-			e.preventDefault();
-
-			browser.runtime.sendMessage({
-				action: "copy_password",
-				args: [jQuery("input#cip-genpw-textfield-password").val()]
-			}, cipPassword.callbackPasswordCopied);
-		});
-	$divFloat.append($btnClipboard);
-
-	$dialog.append($divFloat);
-
+	
+	var $inputDiv = jQuery("<div>").addClass("form-group");
+	var $inputGroup = jQuery("<div>").addClass("genpw-input-group");
 	var $textfieldPassword = jQuery("<input>")
 		.attr("id", "cip-genpw-textfield-password")
 		.attr("type", "text")
-		.addClass("cip-genpw-textfield")
+		.attr("aria-describedby", "cip-genpw-quality")
+		.attr("placeholder", "Generated password")
+		.addClass("genpw-text ui-widget-content ui-corner-all")
 		.on('change keypress paste textInput input', function() {
 			jQuery("#cip-genpw-btn-clipboard:first").removeClass("btn-success");
 		});
 	var $quality = jQuery("<span>")
+		.addClass("genpw-input-group-addon")
 		.addClass("b2c-add-on")
 		.attr("id", "cip-genpw-quality")
 		.text("123 Bits");
-	var $frameInputAppend = jQuery("<div>")
-		.addClass("b2c-input-append")
-		.addClass("cip-genpw-password-frame");
-	$frameInputAppend.append($textfieldPassword).append($quality);
-	$dialog.append($frameInputAppend);
-
+	$inputGroup.append($textfieldPassword).append($quality);
+	
+	var $checkGroup = jQuery("<div>").addClass("genpw-input-group");
 	var $checkboxNextField = jQuery("<input>")
 		.attr("id", "cip-genpw-checkbox-next-field")
 		.attr("type", "checkbox")
@@ -271,59 +240,71 @@ cipPassword.createDialog = function() {
 		.append($checkboxNextField)
 		.addClass("cip-genpw-label")
 		.append(" also fill in the next password-field");
-	$dialog.append($labelNextField);
+	$checkGroup.append($labelNextField);
 
-	var $btnFillIn = jQuery("<button>")
-		.text("Fill in & copy to clipboard")
-		.attr("id", "cip-genpw-btn-fillin")
-		.addClass("btn")
-		.addClass("btn-sm")
-		.click(function(e) {
-			e.preventDefault();
-
-			var fieldId = jQuery("#cip-genpw-dialog:first").data("cip-genpw-field-id");
-			var field = jQuery("input[data-cip-id='"+fieldId+"']:first");
-			if (field.length == 1) {
-				var $password = jQuery("input#cip-genpw-textfield-password:first").val();
-
-				if (field.attr("maxlength")) {
-					if ($password.length > field.attr("maxlength")) {
-						$password = $password.substring(0, field.attr("maxlength"));
-						jQuery("input#cip-genpw-textfield-password:first").val($password);
-						jQuery("#cip-genpw-btn-clipboard:first").removeClass("b2c-btn-success");
-						alert("The generated password is longer than the allowed length!\nIt has been cut to fit the length.\n\nPlease remember the new password!");
-					}
-				}
-
-				field.val($password);
-				if (jQuery("input#cip-genpw-checkbox-next-field:checked").length == 1) {
-					if(field.data("cip-genpw-next-field-exists")) {
-						var nextFieldId = field.data("cip-genpw-next-field-id");
-						var nextField = jQuery("input[data-cip-id='"+nextFieldId+"']:first");
-						if(nextField.length == 1) {
-							nextField.val($password);
-						}
-					}
-				}
-
-				// copy password to clipboard
-				browser.runtime.sendMessage({
-					action: "copy_password",
-					args: [$password]
-				}, cipPassword.callbackPasswordCopied);
-			}
-		});
-	$dialog.append($btnFillIn);
+	$inputDiv.append($inputGroup).append($checkGroup);
+	$dialog.append($inputDiv);
 
 	$dialog.hide();
 	jQuery("body").append($dialog);
 	$dialog.dialog({
-		closeText: "×",
 		autoOpen: false,
 		modal: true,
 		resizable: false,
-		minWidth: 340,
+		minWidth: 300,
+		minHeight: 80,
 		title: "Password Generator",
+		classes: {"ui-dialog": "ui-corner-all"},
+		buttons: {
+			"Generate": function(e) {
+				e.preventDefault();
+				browser.runtime.sendMessage({
+					action: "generate_password"
+				}, cipPassword.callbackGeneratedPassword);
+			},
+			"Copy": function(e) {
+				e.preventDefault();
+				browser.runtime.sendMessage({
+					action: "copy_password",
+					args: [jQuery("input#cip-genpw-textfield-password").val()]
+				}, cipPassword.callbackPasswordCopied);
+			},
+			"Fill & copy": function(e) {
+				e.preventDefault();
+
+				var fieldId = jQuery("#cip-genpw-dialog:first").data("cip-genpw-field-id");
+				var field = jQuery("input[data-cip-id='"+fieldId+"']:first");
+				if (field.length == 1) {
+					var $password = jQuery("input#cip-genpw-textfield-password:first").val();
+
+					if (field.attr("maxlength")) {
+						if ($password.length > field.attr("maxlength")) {
+							$password = $password.substring(0, field.attr("maxlength"));
+							jQuery("input#cip-genpw-textfield-password:first").val($password);
+							jQuery("#cip-genpw-btn-clipboard:first").removeClass("b2c-btn-success");
+							alert("The generated password is longer than the allowed length!\nIt has been cut to fit the length.\n\nPlease remember the new password!");
+						}
+					}
+
+					field.val($password);
+					if (jQuery("input#cip-genpw-checkbox-next-field:checked").length == 1) {
+						if(field.data("cip-genpw-next-field-exists")) {
+							var nextFieldId = field.data("cip-genpw-next-field-id");
+							var nextField = jQuery("input[data-cip-id='"+nextFieldId+"']:first");
+							if(nextField.length == 1) {
+								nextField.val($password);
+							}
+						}
+					}
+
+					// Copy password to clipboard
+					browser.runtime.sendMessage({
+						action: "copy_password",
+						args: [$password]
+					}, cipPassword.callbackPasswordCopied);
+				}
+			}
+		},
 		open: function(event, ui) {
 			jQuery(".ui-widget-overlay").click(function() {
 				jQuery("#cip-genpw-dialog:first").dialog("close");
diff --git a/chromeKeePassXC/manifest.json b/chromeKeePassXC/manifest.json
index 85667c0..2b20933 100644
--- a/chromeKeePassXC/manifest.json
+++ b/chromeKeePassXC/manifest.json
@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "chromeKeePassXC",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"description": "KeePassXC integration for modern web browsers",
 	"author": "Sami Vänttinen",
 	"icons": {
diff --git a/chromeKeePassXC/options/options.js b/chromeKeePassXC/options/options.js
index 8e046d2..72f125e 100644
--- a/chromeKeePassXC/options/options.js
+++ b/chromeKeePassXC/options/options.js
@@ -74,11 +74,6 @@ options.initGeneralSettings = function() {
 		}, options.showKeePassXCVersions);
 	});
 
-	$("#showDangerousSettings").click(function() {
-        $('#dangerousSettings').is(":visible") ? $(this).text("Show these settings anyway") : $(this).text("Hide");
-        $("#dangerousSettings").toggle();
-	});
-
 	$("#blinkTimeout").val(options.settings["blinkTimeout"]);
 	$("#blinkMinTimeout").val(options.settings["blinkMinTimeout"]);
 	$("#allowedRedirect").val(options.settings["allowedRedirect"]);
diff --git a/chromeKeePassXC/popups/popup.html b/chromeKeePassXC/popups/popup.html
index 6537e41..105f49d 100644
--- a/chromeKeePassXC/popups/popup.html
+++ b/chromeKeePassXC/popups/popup.html
@@ -11,7 +11,7 @@
 	<body>
 		<div id="settings" class="settings">
 			<button id="btn-options" class="btn btn-sm btn-success">Settings</button>
-			<button id="btn-choose-credential-fields" class="btn btn-sm">Choose own credential fields for this page</button>
+			<button id="btn-choose-credential-fields" class="btn btn-sm btn-default">Choose own credential fields for this page</button>
 
 			<div id="update-available">
 				You use an old version of KeePassXC.
@@ -62,7 +62,7 @@
 				connected to KeePassXC.
 			</p>
 			<div style="text-align: right">
-				<button id="redetect-fields-button" class="btn">Redetect credential fields</button>
+				<button id="redetect-fields-button" class="btn btn-default">Redetect credential fields</button>
 			</div>
 		</div>
 
@@ -74,7 +74,7 @@
 				<code id="error-message"></code>
 			</p>
 			<div style="text-align: right">
-				<button id="reload-status-button" class="btn">Reload</button>
+				<button id="reload-status-button" class="btn btn-primary">Reload</button>
 			</div>
 		</div>
 	</body>