From 3433089fda1c1856ad06acb84842a0a4a2793391 Mon Sep 17 00:00:00 2001
From: zmilonas <25948390+zmilonas@users.noreply.github.com>
Date: Mon, 30 Jul 2018 18:37:27 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=91=20Show=20error=20message=20when=20?=
 =?UTF-8?q?uploading=20an=20empty=20(zerobyte)=20keyfile=20(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/keyFileParser.js         |  2 +-
 src/components/ManageKeyfiles.vue | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/services/keyFileParser.js b/services/keyFileParser.js
index b4843fbe..4e0839b0 100644
--- a/services/keyFileParser.js
+++ b/services/keyFileParser.js
@@ -24,7 +24,7 @@ function KeyFileParser() {
 	exports.getKeyFromFile = function(keyFileBytes) {
 		var arr = new Uint8Array(keyFileBytes);
 		if (arr.byteLength == 0) {
-			return Promise.reject(new Error('key file has zero bytes'));
+			return Promise.reject(new Error('The key file cannot be empty'));
 		} else if (arr.byteLength == 32) {
 			//file content is the key
 			return Promise.resolve(arr);
diff --git a/src/components/ManageKeyfiles.vue b/src/components/ManageKeyfiles.vue
index 05803128..c703db1b 100644
--- a/src/components/ManageKeyfiles.vue
+++ b/src/components/ManageKeyfiles.vue
@@ -1,10 +1,21 @@
 <template>
 	<div id="key-file-manager">
 		<div class="box-bar about roomy">
-			<p>Key files are an <b>optional authentication method</b>. More info on key files is available on the <a href="http://keepass.info/help/base/keys.html#keyfiles" target="_blank">KeePass site</a>
-				<p>Tusk can store your key files locally in your browser's storage, and apply them when opening your password database. Websites and other browser extensions do not have access to these files. However, they are <b>stored unencrypted</b> in your local browser profile and someone with access to your device could read them.</p>
+				<p>
+					Key files are an <b>optional authentication method</b>.
+					More info on key files is available on the
+					<a href="http://keepass.info/help/base/keys.html#keyfiles" target="_blank">
+						KeePass site
+					</a>
+				</p>
+				<p>
+					Tusk can store your key files locally in your browser's storage, and apply them when opening your password database. Websites and other browser extensions do not have access to these files. However, they are <b>stored unencrypted</b> in your local browser profile and someone with access to your device could read them.
+				</p>
 				<input multiple type="file" style="display:none;" id="file" name='file' @change="handleAdd" />
 				<a @click="selectFileInput" class="waves-effect waves-light btn">Add Key File</a>
+				<p class="box-bar error white-text" v-if="errorMessage">
+					{{ errorMessage }}
+				</p>
 		</div>
 		<div v-for="(file, file_index) in keyFiles" class="box-bar roomy small lighter">
 			<span>{{ file.name }} <i @click="removeKeyFile(file_index)" class="fa fa-times-circle selectable" aria-hidden="true"></i></span>
@@ -51,6 +62,8 @@
 						this.keyFileParser.getKeyFromFile(e.target.result).then(key => {
 							this.settings.addKeyFile(fp.name, key)
 								.then(this.loadKeyFiles)
+						}).catch(err => {
+							this.errorMessage = err.message;
 						})
 					};
 					reader.readAsArrayBuffer(fp)