From 6d3d8b0a4599cdbdcd88ed2827e83f1b5713d692 Mon Sep 17 00:00:00 2001
From: subdavis <brandonadavis@outlook.com>
Date: Sun, 23 Sep 2018 12:16:24 -0400
Subject: [PATCH 1/7] CSS improvements

---
 services/localChromePasswordFileManager.js   |   4 +-
 src/components/AdvancedSettings.vue          | 198 ++++++++++---------
 src/components/GenericProviderUi.vue         |   6 +-
 src/components/InfoCluster.vue               |   2 +-
 src/components/LocalPasswordFileProvider.vue |  50 +++--
 src/components/SharedLinkProvider.vue        |   2 +-
 src/components/Unlock.vue                    |   6 +-
 src/components/WebdavProvider.vue            | 120 ++++++-----
 src/styles/options.scss                      |  13 +-
 src/styles/shared.scss                       |  12 +-
 10 files changed, 220 insertions(+), 193 deletions(-)

diff --git a/services/localChromePasswordFileManager.js b/services/localChromePasswordFileManager.js
index a1b17d5f..4caea09c 100644
--- a/services/localChromePasswordFileManager.js
+++ b/services/localChromePasswordFileManager.js
@@ -17,8 +17,8 @@ function LocalChromePasswordFileManager() {
 		supportedFeatures: ['incognito', 'listDatabases', 'saveDatabase', 'deleteDatabase'],
 		title: 'Local Storage',
 		icon: 'icon-upload',
-		chooseTitle: 'File System',
-		chooseDescription: 'Upload files from your local or remote file-system.  A one-time copy of the file(s) will be saved in your browser\'s local storage.  If you update the database on your local system then you will have to re-upload it in order to see the changes.',
+		chooseTitle: 'File System (not recommended)',
+		chooseDescription: 'Upload files from your local or remote file-system.  A one-time copy of the file(s) will be saved in your browser\'s local storage.  If you update the database on your local system then you will have to re-import it in order to see the changes.',
 		login: enable,
 		logout: disable,
 		isLoggedIn: isEnabled
diff --git a/src/components/AdvancedSettings.vue b/src/components/AdvancedSettings.vue
index 14a80364..c498efc0 100644
--- a/src/components/AdvancedSettings.vue
+++ b/src/components/AdvancedSettings.vue
@@ -1,100 +1,3 @@
-<template>
-	<div>
-
-		<div class="box-bar roomy">
-			<h4>Clipboard Expiration Time</h4>
-			<p>When you copy a value to the clipboard, Tusk will set a timeout to automatically clear it again.  You can choose how long this timeout will last.</p>
-		</div>
-		<div class="box-bar roomy lighter">
-			<select style="display: inline-block;" v-model="expireTime">
-				<option value="1">1 minute</option>
-				<option value="2">2 minutes</option>
-				<option value="3">3 minutes</option>
-				<option value="5">5 minutes</option>
-				<option value="8">8 minutes</option>
-			</select>
-		</div>
-
-		<div class="box-bar roomy">
-			<h4>Enable Hotkey Navigation</h4>
-			<p>If enabled, you will be able to use [TAB] and [ENTER] to navigate and autofill your passwords when the tusk UI is open.  By default, [CTRL]+[SHIFT]+[SPACE] will open the Tusk popup</p>
-		</div>
-		<div class="box-bar roomy lighter">
-			<div>
-				<div class="switch">
-					<label>Enabled
-						<input type="checkbox" v-model="hotkeyNavEnabled">
-						<span class="lever"></span>
-					</label>
-				</div>
-			</div>
-		</div>
-
-		<div class="box-bar roomy" v-if="!isFirefox()">
-			<h4>Grant Permission on All Websites</h4>
-			<p><strong style="color:#d9534f">Only proceed if you know what you're doing.</strong> If enabled, the extension prompts once for permission to access and change data on all websites which disables the permissions popup on each new website. This has <a href="https://github.com/subdavis/Tusk/issues/168">serious security implications</a>.  Only applies to Chrome.  Because of a Chrome bug, it is currently impossible to revoke this permission again after it is enabled.  If you turn this ON, Tusk must be reinstalled to reset.</p>
-		</div>
-		<div class="box-bar roomy lighter" v-if="!isFirefox()">
-			<div>
-				<div class="switch">
-					<label v-on:click="toggleOriginPermissions">Enabled
-						<input type="checkbox" v-model="allOriginPermission">
-						<span class="lever" @click.prevent></span>
-					</label>
-				</div>
-			</div>
-		</div>
-
-		<div class="box-bar roomy">
-			<h4>Notification</h4>
-			<p>Choose which type of notification do you want to receive from Tusk.</p>
-		</div>
-		<div class="box-bar roomy lighter">
-			<div>
-				<div class="switch">
-					<label>Password expiration
-						<input type="checkbox" value="expiration" v-model="notificationsEnabled">
-						<span class="lever"></span>
-					</label>
-				</div>
-				<div class="switch">
-					<label>Clipboard events
-						<input type="checkbox" value="clipboard" v-model="notificationsEnabled">
-						<span class="lever"></span>
-					</label>
-				</div>
-			</div>
-		</div>
-
-		<div class="box-bar roomy">
-			<h4>Enable Strict Matching</h4>
-			<p>If enabled, only entries whose origins match exactly will be suggested for input.  Titles and other tab information will not be considered in matching.  For example, <pre>www.google.com</pre> will not match <pre>https://google.com</pre></p>
-		</div>
-		<div class="box-bar roomy lighter">
-			<div>
-				<div class="switch">
-					<label>Enabled
-			      		<input type="checkbox" v-model="strictMatchEnabled">
-			      		<span class="lever"></span>
-			    	</label>
-				</div>
-			</div>
-		</div>
-
-		<div class="box-bar roomy">
-			<h4>Stored Data</h4>
-			<p>The following objects represent the current data cached in local storage. This data is only available to Tusk, and is never sent over any network connection.</p>
-		</div>
-		<div class="box-bar lighter roomy" v-for="blob in jsonState">
-			<p>{{blob.k}}</p>
-			<div class="between">
-				<div class="json" :id="blob.k"></div>
-				<a v-if="blob.delete !== undefined" class="waves-effect waves-light btn" @click="blob.delete.f(blob.delete.arg); init();">{{ blob.delete.op }}</a>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script>
 	import JSONFormatter from 'json-formatter-js'
 	import { isFirefox } from '$lib/utils'
@@ -243,6 +146,107 @@
 	}
 </script>
 
+<template>
+	<div>
+		<div class="box-bar roomy">
+			<h4>Clipboard Expiration Time</h4>
+			<p>When you copy a value to the clipboard, Tusk will set a timeout to automatically clear it again.  You can choose how long this timeout will last.</p>
+		</div>
+		<div class="box-bar roomy lighter">
+			<select style="display: inline-block;" v-model="expireTime">
+				<option value="1">1 minute</option>
+				<option value="2">2 minutes</option>
+				<option value="3">3 minutes</option>
+				<option value="5">5 minutes</option>
+				<option value="8">8 minutes</option>
+			</select>
+		</div>
+
+		<div class="box-bar roomy">
+			<h4>Enable Hotkey Navigation</h4>
+			<p>If enabled, you will be able to use [TAB] and [ENTER] to navigate and autofill your passwords when the tusk UI is open.  By default, [CTRL]+[SHIFT]+[SPACE] will open the Tusk popup</p>
+		</div>
+		<div class="box-bar roomy lighter">
+			<div>
+				<div class="switch">
+					<label>
+						<input type="checkbox" v-model="hotkeyNavEnabled">
+						<span class="lever"></span>
+						Hotkey Navigation
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="box-bar roomy" v-if="!isFirefox()">
+			<h4>Grant Permission on All Websites</h4>
+			<p><strong style="color:#d9534f">Only proceed if you know what you're doing.</strong> If enabled, the extension prompts once for permission to access and change data on all websites which disables the permissions popup on each new website. This has <a href="https://github.com/subdavis/Tusk/issues/168">serious security implications</a>.  Only applies to Chrome.  Because of a Chrome bug, it is currently impossible to revoke this permission again after it is enabled.  If you turn this ON, Tusk must be reinstalled to reset.</p>
+		</div>
+		<div class="box-bar roomy lighter" v-if="!isFirefox()">
+			<div>
+				<div class="switch">
+					<label v-on:click="toggleOriginPermissions">
+						<input type="checkbox" v-model="allOriginPermission">
+						<span class="lever" @click.prevent></span>
+						Grant All Permissions
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="box-bar roomy">
+			<h4>Notification</h4>
+			<p>Choose which type of notification do you want to receive from Tusk.</p>
+		</div>
+		<div class="box-bar roomy lighter">
+			<div>
+				<div class="switch">
+					<label>
+						<input type="checkbox" value="expiration" v-model="notificationsEnabled">
+						<span class="lever"></span>
+						Password expiration
+					</label>
+				</div>
+				<div class="switch">
+					<label>
+						<input type="checkbox" value="clipboard" v-model="notificationsEnabled">
+						<span class="lever"></span>
+						Clipboard events
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="box-bar roomy">
+			<h4>Enable Strict Matching</h4>
+			<p>If enabled, only entries whose origins match exactly will be suggested for input.  Titles and other tab information will not be considered in matching.  For example, <pre>www.google.com</pre> will not match <pre>https://google.com</pre></p>
+		</div>
+		<div class="box-bar roomy lighter">
+			<div>
+				<div class="switch">
+					<label>
+							<input type="checkbox" v-model="strictMatchEnabled">
+							<span class="lever"></span>
+							Strict Matching
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<div class="box-bar roomy">
+			<h4>Stored Data</h4>
+			<p>The following objects represent the current data cached in local storage. This data is only available to Tusk, and is never sent over any network connection.</p>
+		</div>
+		<div class="box-bar lighter roomy" v-for="blob in jsonState">
+			<p>{{blob.k}}</p>
+			<div class="between">
+				<div class="json" :id="blob.k"></div>
+				<a v-if="blob.delete !== undefined" class="waves-effect waves-light btn" @click="blob.delete.f(blob.delete.arg); init();">{{ blob.delete.op }}</a>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 	@import "../styles/settings.scss";
 	.json {
diff --git a/src/components/GenericProviderUi.vue b/src/components/GenericProviderUi.vue
index 423af577..3fd02282 100644
--- a/src/components/GenericProviderUi.vue
+++ b/src/components/GenericProviderUi.vue
@@ -2,7 +2,10 @@
 	<div>
 		<div class="between">
 			<div class="title">
-				<span><svg class="icon" viewBox="0 0 1 1"><use v-bind="{'xlink:href':'#'+providerManager.icon}"></use></svg> {{ providerManager.chooseTitle }}</span>
+				<span>
+					<svg class="icon" viewBox="0 0 1 1"><use v-bind="{'xlink:href':'#'+providerManager.icon}"></use></svg>
+					{{ providerManager.chooseTitle }}
+				</span>
 				<span class="error pill" v-show="error.length">{{error}}</span>
 				<span v-for="(db, index) in databases" class="chip">
 	  			{{ db.title }}
@@ -12,7 +15,6 @@
 			<div>
 				<div class="switch">
 					<label>
-			      {{ busy ? 'busy' : (loggedIn ? 'Enabled' : 'Disabled') }}
 			      <input :disabled="busy" type="checkbox" :checked="loggedIn" @click="toggleLogin">
 			      <span class="lever"></span>
 			    </label>
diff --git a/src/components/InfoCluster.vue b/src/components/InfoCluster.vue
index 2cf48eed..e763b12d 100644
--- a/src/components/InfoCluster.vue
+++ b/src/components/InfoCluster.vue
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	@import "../styles/settings.scss";
 	p {
 		width: 100%;
diff --git a/src/components/LocalPasswordFileProvider.vue b/src/components/LocalPasswordFileProvider.vue
index 56e66278..b5ba5b05 100644
--- a/src/components/LocalPasswordFileProvider.vue
+++ b/src/components/LocalPasswordFileProvider.vue
@@ -2,23 +2,6 @@
 	SharedLinkProvider:
 	Simple http provider that can also handle Dropbox Shared Links
 -->
-<template>
-	<div class="box-bar roomy database-manager">
-		<generic-provider-ui 
-			:busy="busy" 
-			:databases="databases" 
-			:loggedIn="loggedIn" 
-			:error="messages.error" 
-			:provider-manager="providerManager" 
-			:toggle-login="toggleLogin" 
-			:removeable="true" 
-			:remove-function="removePasswordFile"></generic-provider-ui>
-		<div class="url-form shared-link-box" v-if="loggedIn">
-			<input type="file" accept='.kdbx' style="display:none" id="file-selector" name='file' @change="handleAdd" multiple />
-			<a class="waves-effect waves-light btn" @click="selectFile">Select Local File</a>
-		</div>
-	</div>
-</template>
 
 <script>
 	const Base64 = require('base64-arraybuffer')
@@ -51,12 +34,11 @@
 					this.providerManager.logout().then(() => {
 						this.loggedIn = false
 					})
-				} else if (confirm("Do you understand that Tusk cannot keep your local database file up to date?  \n\nIf you change it, you'll have to re-upload the file again. \n\nSelect OK to continue.")) {
+				} else {
 					this.providerManager.login().then(() => {
 						this.loggedIn = true
 					})
-				} else {
-					e.preventDefault();
+					e.preventDefault()
 				}
 			},
 			selectFile(event) {
@@ -129,6 +111,32 @@
 	}
 </script>
 
-<style lang="scss">
+<template>
+	<div class="box-bar roomy database-manager">
+		<generic-provider-ui 
+			:busy="busy" 
+			:databases="databases" 
+			:loggedIn="loggedIn" 
+			:error="messages.error" 
+			:provider-manager="providerManager" 
+			:toggle-login="toggleLogin" 
+			:removeable="true" 
+			:remove-function="removePasswordFile"></generic-provider-ui>
+		<div v-if="loggedIn">
+			<div class="warn pill">
+				<p>
+					Tusk <b>cannot</b> keep your local database file up to date.
+					<b>If you change it, you'll have to import it into Tusk again.</b>
+				</p>
+			</div>
+			<div>
+				<input type="file" accept='.kdbx' style="display:none" id="file-selector" name='file' @change="handleAdd" multiple />
+				<a class="waves-effect waves-light btn" @click="selectFile">Select Local File</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
 	@import "../styles/settings.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/SharedLinkProvider.vue b/src/components/SharedLinkProvider.vue
index 45f5169a..4c4170c1 100644
--- a/src/components/SharedLinkProvider.vue
+++ b/src/components/SharedLinkProvider.vue
@@ -207,7 +207,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	@import "../styles/settings.scss";
 	.url-form {
 		margin-top: 15px;
diff --git a/src/components/Unlock.vue b/src/components/Unlock.vue
index 4272a31b..f475eba7 100644
--- a/src/components/Unlock.vue
+++ b/src/components/Unlock.vue
@@ -512,7 +512,7 @@
 		}
 	}
 
-    .databaseChoose {
-        padding-left: 5px;
-    }
+	.databaseChoose {
+			padding-left: 5px;
+	}
 </style>
\ No newline at end of file
diff --git a/src/components/WebdavProvider.vue b/src/components/WebdavProvider.vue
index 78457927..cfcd6606 100644
--- a/src/components/WebdavProvider.vue
+++ b/src/components/WebdavProvider.vue
@@ -2,51 +2,6 @@
 	SharedLinkProvider:
 	Simple http provider that can also handle Dropbox Shared Links
 -->
-<template>
-	<div class="box-bar roomy database-manager">
-		<generic-provider-ui 
-			:busy="busy" 
-			:databases="databases" 
-			:loggedIn="loggedIn" 
-			:error="messages.error"
-			:provider-manager="providerManager" 
-			:toggle-login="toggleLogin" 
-			:removeable="false"></generic-provider-ui>
-		<div class="top-padding" v-if="loggedIn">
-			<div class="warn pill">
-				<p>Wait! Stop!  Did you read the <a href="https://github.com/subdavis/Tusk/wiki/WebDAV-Support">best practices guide</a>?  Do that first!</p>
-			</div>
-			<div>
-				<p>The URL below should have the path of a FOLDER, not an individual FILE.  The webDAV provider works by recursively scanning all files within the folder you specify.  Your keepass databases will be discovered by their file extension (.kdbx).</p>
-			</div>
-			<table v-if="serverList.length">
-				<tr>
-					<th>Server List:</th>
-				</tr>
-				<tr v-for="(server, index) in serverList">
-					<td>{{server.username}}</td>
-					<td>{{server.url}}</td>
-					<td>
-						<a v-show="!server.scanBusy" class="selectable" @click="scan(server.serverId)">
-						<i class="fa fa-search"></i> scan</a>
-						<a v-show="server.scanBusy"><i class="fa fa-spinner fa-pulse"></i> scanning</a>
-					</td>
-					<td>
-						<a class="selectable" @click="remove(server.serverId)">
-						<i class="fa fa-times-circle selectable"></i> remove</a>
-					</td>
-				</tr>
-			</table>
-			<div class="url-form shared-link-box" v-if="loggedIn">
-				<input id="webdav-server" type="text" v-model="webdav.url" placeholder="http://server:port/remote.php/webdav/">
-				<input id="webdav-username" type="text" v-model="webdav.username" placeholder="Username">
-				<input id="webdav-password" type="password" v-model="webdav.password" placeholder="Password">
-				<a class="waves-effect waves-light btn" @click="addServer">Add server</a>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script>
 	const Base64 = require('base64-arraybuffer')
 	import {ChromePromiseApi} from '$lib/chrome-api-promise.js'
@@ -130,7 +85,7 @@
 					this.providerManager.logout().then(() => {
 						this.loggedIn = false
 					})
-				} else if (confirm("WebDAV is a beta feature. If you use it, the username and password to the webdav SERVER will be stored on disk.  \n\nTusk will never store you master database password.  \n\nSelect OK to continue.")) {
+				} else {
 					this.providerManager.login().then(() => {
 						this.loggedIn = true
 						this.onLogin()
@@ -154,15 +109,76 @@
 	}
 </script>
 
-<style lang="scss">
+<template>
+	<div class="box-bar roomy database-manager">
+		<generic-provider-ui 
+			:busy="busy" 
+			:databases="databases" 
+			:loggedIn="loggedIn" 
+			:error="messages.error"
+			:provider-manager="providerManager" 
+			:toggle-login="toggleLogin" 
+			:removeable="false"></generic-provider-ui>
+		<div v-if="loggedIn">
+			<div class="warn pill">
+				<p><b>Wait! </b>Did you read the <a href="https://github.com/subdavis/Tusk/wiki/WebDAV-Support">best practices guide</a>?  Do that first!</p>
+			</div>
+			<div>
+				<p>The URL below should have the path of a FOLDER, not an individual FILE.  The webDAV provider works by recursively scanning all files within the folder you specify.  Your keepass databases will be discovered by their file extension (.kdbx).</p>
+			</div>
+			<table v-if="serverList.length">
+				<tr>
+					<th>User</th>
+					<th>URL</th>
+					<th>Actions</th>
+				</tr>
+				<tr v-for="(server, index) in serverList">
+					<td>{{server.username}}</td>
+					<td>{{server.url}}</td>
+					<td>
+						<a v-show="!server.scanBusy" class="selectable" @click="scan(server.serverId)">
+						<i class="fa fa-search"></i> scan</a>
+						<a v-show="server.scanBusy"><i class="fa fa-spinner fa-pulse"></i> scanning</a>
+					</td>
+					<td>
+						<a class="selectable" @click="remove(server.serverId)">
+						<i class="fa fa-times-circle selectable"></i> remove</a>
+					</td>
+				</tr>
+			</table>
+			<div v-if="loggedIn">
+				<p><b>Add new server</b></p>
+				<div id="webdav-server-input-box">
+					<input id="webdav-server" type="text" v-model="webdav.url" placeholder="http://server:port/remote.php/webdav/">
+					<input id="webdav-username" type="text" v-model="webdav.username" placeholder="Username">
+					<input id="webdav-password" type="password" v-model="webdav.password" placeholder="Password">	
+				</div>
+				<a class="waves-effect waves-light btn" @click="addServer">Add server</a>
+			</div>	
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
 	@import "../styles/settings.scss";
 
-	input#webdav-server {
-		width: 55%;
-	}
+	#webdav-server-input-box {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		box-sizing: border-box;
+		
+		input {
+			padding: 4px;
+			margin: 0px 8px 8px 0px;
 
-	.top-padding {
-		padding: 20px 0px;
+			&#webdav-server {
+				width: 100%;
+			}
+			&#webdav-username, &#webdav-password {
+				flex: 1;
+			}
+		}
 	}
 
 	table {
diff --git a/src/styles/options.scss b/src/styles/options.scss
index 564957f3..670075f0 100644
--- a/src/styles/options.scss
+++ b/src/styles/options.scss
@@ -1,10 +1,10 @@
 @import './shared.scss';
 
-@import "../../node_modules/materialize-css/sass/components/_tabs.scss";
-@import "../../node_modules/materialize-css/sass/components/forms/_forms.scss";
-@import "../../node_modules/materialize-css/sass/components/_navbar.scss";
-@import "../../node_modules/materialize-css/sass/components/_chips.scss";
-@import "../../node_modules/materialize-css/sass/components/_buttons.scss";
+@import "~materialize-css/sass/components/_tabs.scss";
+@import "~materialize-css/sass/components/forms/_switches.scss";
+@import "~materialize-css/sass/components/_navbar.scss";
+@import "~materialize-css/sass/components/_chips.scss";
+@import "~materialize-css/sass/components/_buttons.scss";
 
 nav {
   background-color: $blue;
@@ -58,9 +58,6 @@ h3 {
 		font-size: 12px;
 		font-color: $dark-background-color;
 	}
-	.switch {
-		min-width: 122px;
-	}
 	.between {
 		line-height: 36px;
 	}
diff --git a/src/styles/shared.scss b/src/styles/shared.scss
index ec6cd16b..883d3e5d 100644
--- a/src/styles/shared.scss
+++ b/src/styles/shared.scss
@@ -1,9 +1,9 @@
-@import "../../node_modules/materialize-css/sass/components/_color.scss";
-@import "../../node_modules/materialize-css/sass/components/_variables.scss";
-@import "../../node_modules/materialize-css/sass/components/_normalize.scss";
-@import "../../node_modules/materialize-css/sass/components/_global.scss";
-@import "../../node_modules/materialize-css/sass/components/_typography.scss";
-@import "../../node_modules/materialize-css/sass/components/_preloader.scss";
+@import "~materialize-css/sass/components/_color.scss";
+@import "~materialize-css/sass/components/_variables.scss";
+@import "~materialize-css/sass/components/_normalize.scss";
+@import "~materialize-css/sass/components/_global.scss";
+@import "~materialize-css/sass/components/_typography.scss";
+@import "~materialize-css/sass/components/_preloader.scss";
 
 @import "./settings.scss";
 

From beea5279a85bab6febae82f3fa9a257b93f01f66 Mon Sep 17 00:00:00 2001
From: Zachary Milonas <25948390+zmilonas@users.noreply.github.com>
Date: Sun, 23 Sep 2018 19:14:33 +0200
Subject: [PATCH 2/7] Remove nonexistant build-tests command from README (#247)

* Remove nonexistant build-tests command from README

* Change the test command to dev-tests in README
---
 README.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 8ca26fc0..624808c6 100644
--- a/README.md
+++ b/README.md
@@ -45,11 +45,8 @@ yarn build
 # this step generates the zip archives submitted to Chrome/Firefox addon marketplaces.
 yarn bundle
 
-# build the tests
-yarn build-tests
-
 # static reload with file watch for tests
-yarn watch-tests
+yarn dev-tests
 ```
 
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

From dddb196a1ea2a847f3aaef213c3c55dae6832d8b Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandonadavis@outlook.com>
Date: Sun, 23 Sep 2018 14:44:46 -0400
Subject: [PATCH 3/7] The great autoformat commit (#250)

---
 .vscode/settings.json                        |   7 +
 services/dropboxFileManager.js               |  18 +-
 services/googleDrivePasswordFileManager.js   |  36 +-
 services/keepassHeader.js                    |   2 +-
 services/keepassReference.js                 |  18 +-
 services/keepassService.js                   |  45 +-
 services/keyFileParser.js                    |   2 +-
 services/links.js                            |   2 +-
 services/localChromePasswordFileManager.js   |  18 +-
 services/notifications.js                    |   2 +-
 services/oauthManager.js                     |  32 +-
 services/oneDriveFileManager.js              |  16 +-
 services/pCloudFileManager.js                | 222 +++--
 services/passwordFileStore.js                |   6 +-
 services/protectedMemory.js                  |  22 +-
 services/sampleDatabaseFileManager.js        |   6 +-
 services/secureCacheMemory.js                |  32 +-
 services/settings.js                         |  98 +-
 services/sharedUrlFileManager.js             |   2 +-
 services/unlockedState.js                    |  44 +-
 services/webdavFileManager.js                |  32 +-
 src/Options.vue                              | 274 +++---
 src/Popup.vue                                | 234 ++---
 src/components/AdvancedSettings.vue          | 280 +++---
 src/components/EntryDetails.vue              | 326 ++++---
 src/components/EntryList.vue                 | 322 +++----
 src/components/EntryListItem.vue             | 164 ++--
 src/components/FilePicker.vue                | 124 +--
 src/components/GenericProviderUi.vue         |  48 +-
 src/components/GoBack.vue                    |  24 +-
 src/components/InfoCluster.vue               |  28 +-
 src/components/LocalPasswordFileProvider.vue | 201 ++---
 src/components/ManageDatabases.vue           | 134 +--
 src/components/ManageKeyfiles.vue            | 151 ++--
 src/components/Messenger.vue                 |  28 +-
 src/components/Navbar.vue                    |  44 +-
 src/components/OauthProvider.vue             | 134 +--
 src/components/OptionsStartup.vue            |  33 +-
 src/components/Reauthorize.vue               |  87 +-
 src/components/SharedLinkProvider.vue        | 402 ++++-----
 src/components/Startup.vue                   | 112 +--
 src/components/SvgDefs.vue                   | 246 ++---
 src/components/Unlock.vue                    | 894 +++++++++----------
 src/components/WebdavProvider.vue            | 257 +++---
 44 files changed, 2611 insertions(+), 2598 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..e88bd52a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+	"editor.insertSpaces": false,
+	"editor.tabSize": 2,
+	"editor.detectIndentation": false,
+	"vetur.format.defaultFormatter.js": "vscode-typescript",
+	"vetur.format.defaultFormatter.html": "none",
+}
\ No newline at end of file
diff --git a/services/dropboxFileManager.js b/services/dropboxFileManager.js
index 9cd608cc..a1719c94 100644
--- a/services/dropboxFileManager.js
+++ b/services/dropboxFileManager.js
@@ -28,7 +28,7 @@ function DropboxFileManager(settings) {
 		chooseDescription: 'Access password files stored on Dropbox.  Files will be retrieved from Dropbox each time they are used.',
 	};
 
-	oauth.searchRequestFunction = function(token) {
+	oauth.searchRequestFunction = function (token) {
 		return axios({
 			method: 'post',
 			url: 'https://api.dropbox.com/2/files/search',
@@ -45,8 +45,8 @@ function DropboxFileManager(settings) {
 		})
 	}
 
-	oauth.searchRequestHandler = function(response) {
-		return response.data.matches.map(function(fileInfo) {
+	oauth.searchRequestHandler = function (response) {
+		return response.data.matches.map(function (fileInfo) {
 			return {
 				title: fileInfo.metadata.path_display
 			};
@@ -54,18 +54,18 @@ function DropboxFileManager(settings) {
 	}
 
 	//get the minimum information needed to identify this file for future retrieval
-	oauth.getDatabaseChoiceData = function(dbInfo) {
+	oauth.getDatabaseChoiceData = function (dbInfo) {
 		return {
 			title: dbInfo.title
 		}
 	}
 
 	//given minimal file information, retrieve the actual file
-	oauth.fileRequestFunction = function(dbInfo, token) {
+	oauth.fileRequestFunction = function (dbInfo, token) {
 		function http_header_safe_json(v) {
 			var charsToEncode = /[\u007f-\uffff]/g;
 			return JSON.stringify(v).replace(charsToEncode,
-				function(c) {
+				function (c) {
 					return '\\u' + ('000' + c.charCodeAt(0).toString(16)).slice(-4);
 				}
 			);
@@ -84,11 +84,11 @@ function DropboxFileManager(settings) {
 		})
 	}
 
-	oauth.revokeAuth = function() {
+	oauth.revokeAuth = function () {
 		return Promise.resolve()
 	}
 
-	oauth.handleAuthRedirectURI = function(redirect_url, randomState, resolve, reject) {
+	oauth.handleAuthRedirectURI = function (redirect_url, randomState, resolve, reject) {
 
 		var tokenMatches = /access_token=([^&]+)/.exec(redirect_url);
 		var stateMatches = /state=([^&]+)/.exec(redirect_url);
@@ -100,7 +100,7 @@ function DropboxFileManager(settings) {
 			var uid = uidMatches[1];
 			if (checkState === randomState) {
 				state.loggedIn = true;
-				settings.getSetAccessToken(accessTokenType, access_token).then(function() {
+				settings.getSetAccessToken(accessTokenType, access_token).then(function () {
 					resolve(access_token);
 				});
 			} else {
diff --git a/services/googleDrivePasswordFileManager.js b/services/googleDrivePasswordFileManager.js
index 0c7734c4..ecec85db 100644
--- a/services/googleDrivePasswordFileManager.js
+++ b/services/googleDrivePasswordFileManager.js
@@ -35,7 +35,7 @@ function GoogleDrivePasswordFileManager(settings) {
 		chooseDescription: 'Access password files stored on Google Drive.  Files will be fetched from Google Drive each time they are used.',
 	};
 
-	oauth.searchRequestFunction = function(token) {
+	oauth.searchRequestFunction = function (token) {
 		var request = {
 			method: 'GET',
 			url: "https://www.googleapis.com/drive/v2/files?q=" + urlencode("fileExtension = 'kdbx' and trashed=false"),
@@ -46,8 +46,8 @@ function GoogleDrivePasswordFileManager(settings) {
 		return axios(request)
 	}
 
-	oauth.searchRequestHandler = function(response) {
-		return response.data.items.map(function(entry) {
+	oauth.searchRequestHandler = function (response) {
+		return response.data.items.map(function (entry) {
 			return {
 				title: entry.title,
 				url: entry.selfLink
@@ -56,7 +56,7 @@ function GoogleDrivePasswordFileManager(settings) {
 	}
 
 	//get the minimum information needed to identify this file for future retrieval
-	oauth.getDatabaseChoiceData = function(dbInfo) {
+	oauth.getDatabaseChoiceData = function (dbInfo) {
 		return {
 			title: dbInfo.title,
 			url: dbInfo.url
@@ -64,7 +64,7 @@ function GoogleDrivePasswordFileManager(settings) {
 	}
 
 	//given minimal file information, retrieve the actual file
-	oauth.fileRequestFunction = function(dbInfo, token) {
+	oauth.fileRequestFunction = function (dbInfo, token) {
 		function getFileFromDatabase(attempt) {
 			var requestmeta = {
 				method: "GET",
@@ -83,8 +83,8 @@ function GoogleDrivePasswordFileManager(settings) {
 					}
 				};
 				return axios(requestfile).then(response => {
-						return response
-					})
+					return response
+				})
 					.catch(err => {
 						attempt = attempt || 0;
 						if (attempt == 0) {
@@ -99,8 +99,8 @@ function GoogleDrivePasswordFileManager(settings) {
 		return getFileFromDatabase(0)
 	}
 
-	oauth.revokeAuth = function() {
-		return settings.getSetAccessToken(accessTokenType).then(function(accessToken) {
+	oauth.revokeAuth = function () {
+		return settings.getSetAccessToken(accessTokenType).then(function (accessToken) {
 			if (accessToken) {
 				var url = 'https://accounts.google.com/o/oauth2/revoke?token=' + accessToken
 				return axios({
@@ -117,7 +117,7 @@ function GoogleDrivePasswordFileManager(settings) {
 		})
 	}
 
-	oauth.handleAuthRedirectURI = function(redirect_url, randomState, resolve, reject) {
+	oauth.handleAuthRedirectURI = function (redirect_url, randomState, resolve, reject) {
 		var tokenMatches = /access_token=([^&]+)/.exec(redirect_url);
 		var stateMatches = /state=([^&]+)/.exec(redirect_url);
 
@@ -125,7 +125,7 @@ function GoogleDrivePasswordFileManager(settings) {
 			var access_token = tokenMatches[1];
 			var checkState = decodeURIComponent(stateMatches[1]);
 			if (checkState === randomState) {
-				settings.getSetAccessToken(accessTokenType, access_token).then(function() {
+				settings.getSetAccessToken(accessTokenType, access_token).then(function () {
 					resolve(access_token);
 				});
 			} else {
@@ -140,17 +140,17 @@ function GoogleDrivePasswordFileManager(settings) {
 		}
 	}
 
-	function chrome_auth (interactive){
+	function chrome_auth(interactive) {
 		// chrome_auth is an alternative auth function run when the 
 		// browser is Chrome.  It uses chrome.identity.getAuthToken rather than
 		// a standard Oauth flow.
 		interactive = !!interactive;
-		return new Promise(function(resolve, reject) {
+		return new Promise(function (resolve, reject) {
 			chrome.identity.getAuthToken({
-				interactive : interactive
-			}, function(token) {
+				interactive: interactive
+			}, function (token) {
 				if (token)
-				  settings.getSetAccessToken(accessTokenType, token).then(function() {
+					settings.getSetAccessToken(accessTokenType, token).then(function () {
 						resolve(token);
 					});
 				else {
@@ -171,10 +171,10 @@ function GoogleDrivePasswordFileManager(settings) {
 
 	// If this browser has the getAuthToken function.  Hack for #64
 	try {
-		if (chrome.identity.getAuthToken !== undefined){
+		if (chrome.identity.getAuthToken !== undefined) {
 			oauth['auth'] = chrome_auth;
 		}
-	} 
+	}
 	catch (e) {
 		console.info("Firefox mobile detected.")
 	}
diff --git a/services/keepassHeader.js b/services/keepassHeader.js
index a00afd3c..53d51e9f 100644
--- a/services/keepassHeader.js
+++ b/services/keepassHeader.js
@@ -8,7 +8,7 @@ function KeepassHeader() {
 	};
 
 	var AES_CIPHER_UUID = new Uint8Array([0x31, 0xc1, 0xf2, 0xe6, 0xbf, 0x71, 0x43, 0x50, 0xbe, 0x58, 0x05, 0x21, 0x6a, 0xfc, 0x5a, 0xff]);
-	var littleEndian = (function() {
+	var littleEndian = (function () {
 		var buffer = new ArrayBuffer(2);
 		new DataView(buffer).setInt16(0, 256, true);
 		return new Int16Array(buffer)[0] === 256;
diff --git a/services/keepassReference.js b/services/keepassReference.js
index 87988b48..60d19853 100644
--- a/services/keepassReference.js
+++ b/services/keepassReference.js
@@ -7,14 +7,14 @@ function KeepassReference() {
 		majorVersion: 3 // Defaults to 3, unless told otherwise
 	};
 
-	my.hasReferences = function(fieldValue) {
+	my.hasReferences = function (fieldValue) {
 		return !!/\{.+\}/.test(fieldValue || '');
 	}
 
 	/*
 	 * Process all references found in fieldValue to their final values
 	 */
-	my.processAllReferences = function(majorVersion, fieldValue, currentEntry, allEntries) {
+	my.processAllReferences = function (majorVersion, fieldValue, currentEntry, allEntries) {
 		my.majorVersion = majorVersion; //update the major version if it changed.
 		var re = /(\{[^\{\}]+\})/g;
 		var expressions = re.exec(fieldValue || '');
@@ -37,7 +37,7 @@ function KeepassReference() {
 		return result;
 	}
 
-	my.keewebGetDecryptedFieldValue = function(entry, fieldName) {
+	my.keewebGetDecryptedFieldValue = function (entry, fieldName) {
 		if (entry.protectedData === undefined || !(fieldName in entry['protectedData'])) {
 			return entry[fieldName] || ""; //not an encrypted field
 		}
@@ -46,14 +46,14 @@ function KeepassReference() {
 			entry['protectedData'][fieldName].salt).getText();
 	}
 
-	my.getFieldValue = function(currentEntry, fieldName, allEntries) {
+	my.getFieldValue = function (currentEntry, fieldName, allEntries) {
 		// entries are JSON serializable.
 		// Convert back to a keeweb.ProtectedValue for parsing.
 		let plainText = my.keewebGetDecryptedFieldValue(currentEntry, fieldName);
 		return my.processAllReferences(my.majorVersion, plainText, currentEntry, allEntries);
 	}
 
-	my.resolveReference = function(referenceText, currentEntry, allEntries) {
+	my.resolveReference = function (referenceText, currentEntry, allEntries) {
 		var localParts = /^\{([a-zA-Z]+)\}$/.exec(referenceText)
 		if (localParts) {
 			// local field
@@ -73,7 +73,7 @@ function KeepassReference() {
 
 		// https://stackoverflow.com/questions/2970525/converting-any-string-into-camel-case
 		let camelize = (str) => {
-			return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
+			return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
 				return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
 			}).replace(/\s+/g, '');
 		}
@@ -89,10 +89,10 @@ function KeepassReference() {
 			var wantedField = getPropertyNameFromCode(refString[1]);
 			var searchIn = getPropertyNameFromCode(refString[2]);
 			var text = refString[3];
-			
-			var matches = allEntries.filter(function(e) {
+
+			var matches = allEntries.filter(function (e) {
 				if (searchIn === '*') {
-					var customFieldMatches = e.keys.filter(function(key) {
+					var customFieldMatches = e.keys.filter(function (key) {
 						return String(e[key] || '').indexOf(text) !== -1;
 					});
 					return customFieldMatches.length > 0;
diff --git a/services/keepassService.js b/services/keepassService.js
index 3c5a9fb7..4faa5fab 100644
--- a/services/keepassService.js
+++ b/services/keepassService.js
@@ -13,44 +13,47 @@ import { parseUrl, getValidTokens } from '$lib/utils.js'
 function KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keepassReference) {
 	var my = {};
 
-	var littleEndian = (function() {
+	var littleEndian = (function () {
 		var buffer = new ArrayBuffer(2);
 		new DataView(buffer).setInt16(0, 256, true);
 		return new Int16Array(buffer)[0] === 256;
 	})();
-	
+
 	/** 
 	 * return Promise(arrayBufer)
 	 */
-	my.getChosenDatabaseFile = function() {
+	my.getChosenDatabaseFile = function () {
 		return passwordFileStoreRegistry.getChosenDatabaseFile(settings)
 	}
 
-	my.getMasterKey = function(bufferPromise, masterPassword, keyFileInfo) {
+	my.getMasterKey = function (bufferPromise, masterPassword, keyFileInfo) {
 		/**
 		 * Validate that one of the following is true:
 		 * (password isn't empty OR keyfile isn't empty)
 		 * ELSE
 		 * (assume password is the empty string)
 		 */
+		let protectedMasterPassword;
 		if (masterPassword === undefined && keyFileInfo === undefined) {
 			// Neither keyfile nor password provided.  Assume empty string password.
-			masterPassword = "";
+			protectedMasterPassword = kdbxweb.ProtectedValue.fromString("");
 		} else if (masterPassword === "" && keyFileInfo !== undefined) {
 			// Keyfile but empty password provided.  Assume password is unused.
 			// This extension does not support the combo empty string + keyfile.
-			masterPassword = undefined;
+			protectedMasterPassword = null;
+		} else {
+			protectedMasterPassword = kdbxweb.ProtectedValue.fromString(masterPassword)
 		}
 		var fileKey = keyFileInfo ? Base64.decode(keyFileInfo.encodedKey) : null;
-		return bufferPromise.then(function(buf) {
+		return bufferPromise.then(function (buf) {
 			var h = keepassHeader.readHeader(buf);
-			return getKey(h.kdbx, masterPassword, fileKey);
+			return getKey(h.kdbx, protectedMasterPassword, fileKey);
 		});
 	}
 
-	my.getDecryptedData = function(bufferPromise, masterKey) {
+	my.getDecryptedData = function (bufferPromise, masterKey) {
 		var majorVersion;
-		return bufferPromise.then(function(buf) {
+		return bufferPromise.then(function (buf) {
 			var h = keepassHeader.readHeader(buf);
 			if (!h) throw new Error('Failed to read file header');
 
@@ -66,7 +69,7 @@ function KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keep
 			} else { // KDB - we don't support this anymore
 				throw "Unsupported Database Version";
 			}
-		}).then(function(entries) {
+		}).then(function (entries) {
 			return {
 				entries: entries,
 				version: majorVersion
@@ -75,17 +78,17 @@ function KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keep
 	}
 
 	my.rankEntries = (entries, siteUrl, title, siteTokens) => {
-		entries.forEach(function(entry) {
+		entries.forEach(function (entry) {
 			//apply a ranking algorithm to find the best matches
-			var entryOrigins = [ parseUrl(entry.url) ]
-			
-			if (entry.keys.indexOf('tuskUrls') >= 0){
+			var entryOrigins = [parseUrl(entry.url)]
+
+			if (entry.keys.indexOf('tuskUrls') >= 0) {
 				let others = entry.tuskUrls
 					.split(',')
 					.map(val => {
 						return parseUrl(val)
 					})
-					entryOrigins = entryOrigins.concat(others)
+				entryOrigins = entryOrigins.concat(others)
 			}
 			if (entryOrigins.length && entryOrigins.some(a => a && (a.origin == siteUrl.origin)))
 				entry.matchRank = 100 // perfect match
@@ -109,14 +112,14 @@ function KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keep
 					if (token1 == token2) {
 						entry.matchRank += 0.2;
 					}
-					
+
 				}
 			}
 		})
 	}
 
-	function getKey(isKdbx, masterPassword, fileKey) {
-		var creds = new kdbxweb.Credentials(kdbxweb.ProtectedValue.fromString(masterPassword), fileKey);
+	function getKey(isKdbx, protectedMasterPassword, fileKey) {
+		var creds = new kdbxweb.Credentials(protectedMasterPassword, fileKey);
 		return creds.ready.then(() => {
 			return kdbxCredentialsToJson(creds);
 		});
@@ -125,9 +128,9 @@ function KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keep
 	function processReferences(entries, majorVersion) {
 		// In order to fully implement references, majorVersion will need to be known
 		// as there are more capabilities for references in v2+
-		entries.forEach(function(entry) {
+		entries.forEach(function (entry) {
 			if (entry.keys) {
-				entry.keys.forEach(function(key) {
+				entry.keys.forEach(function (key) {
 					var fieldRefs = keepassReference.hasReferences(entry[key]);
 					if (fieldRefs) {
 						let value = keepassReference.processAllReferences(majorVersion, entry[key], entry, entries);
diff --git a/services/keyFileParser.js b/services/keyFileParser.js
index 4e0839b0..cbc52afe 100644
--- a/services/keyFileParser.js
+++ b/services/keyFileParser.js
@@ -21,7 +21,7 @@ function KeyFileParser() {
 		}
 	}
 
-	exports.getKeyFromFile = function(keyFileBytes) {
+	exports.getKeyFromFile = function (keyFileBytes) {
 		var arr = new Uint8Array(keyFileBytes);
 		if (arr.byteLength == 0) {
 			return Promise.reject(new Error('The key file cannot be empty'));
diff --git a/services/links.js b/services/links.js
index d33f802f..0eb082c5 100644
--- a/services/links.js
+++ b/services/links.js
@@ -11,7 +11,7 @@ function Links() {
 		openOptionsDatabases: openOptionsDatabases,
 		open: openGeneric
 	}
-	
+
 	function openGeneric(url) {
 		// Given some URL, open it in a new tab
 		chrome.tabs.create({
diff --git a/services/localChromePasswordFileManager.js b/services/localChromePasswordFileManager.js
index 4caea09c..edf799c0 100644
--- a/services/localChromePasswordFileManager.js
+++ b/services/localChromePasswordFileManager.js
@@ -47,12 +47,12 @@ function LocalChromePasswordFileManager() {
 
 	var savingLocks = []; //prevent reading while an async save is ongoing
 	function listDatabases() {
-		return Promise.all(savingLocks).then(function() {
+		return Promise.all(savingLocks).then(function () {
 			return chromePromise.storage.local.get('passwordFiles')
-		}).then(function(result) {
+		}).then(function (result) {
 			var files = result.passwordFiles || [];
 
-			return files.filter(function(fi) {
+			return files.filter(function (fi) {
 				return (fi.storageVersion && fi.storageVersion >= backwardCompatibleVersion);
 			});
 		});
@@ -67,8 +67,8 @@ function LocalChromePasswordFileManager() {
 
 	//given minimal file information, retrieve the actual file
 	function getChosenDatabaseFile(dbInfo) {
-		return listDatabases().then(function(databases) {
-			var bytes = databases.reduce(function(prev, storedFile) {
+		return listDatabases().then(function (databases) {
+			var bytes = databases.reduce(function (prev, storedFile) {
 				if (storedFile.title == dbInfo.title) {
 					var data = Base64.decode(storedFile.data);
 					return data;
@@ -86,8 +86,8 @@ function LocalChromePasswordFileManager() {
 	//save the given database to persistent storage
 	function saveDatabase(db) {
 		db.storageVersion = currentVersion;
-		var p = listDatabases().then(function(existingFiles) {
-			var index = existingFiles.reduce(function(prev, curr, index) {
+		var p = listDatabases().then(function (existingFiles) {
+			var index = existingFiles.reduce(function (prev, curr, index) {
 				if (curr.title == db.title)
 					return index;
 				else
@@ -111,8 +111,8 @@ function LocalChromePasswordFileManager() {
 
 	//remove the database from storage
 	function deleteDatabase(db) {
-		return listDatabases().then(function(databases) {
-			databases = databases.filter(function(existing) {
+		return listDatabases().then(function (databases) {
+			databases = databases.filter(function (existing) {
 				return (existing.title != db.title);
 			});
 
diff --git a/services/notifications.js b/services/notifications.js
index 15410515..4f5568b8 100644
--- a/services/notifications.js
+++ b/services/notifications.js
@@ -4,7 +4,7 @@ export class Notifications {
 	}
 	push(data) {
 		const { text, type, expire } = data;
-		return new Promise ((resolve, reject) => {
+		return new Promise((resolve, reject) => {
 			this.settings.getSetNotificationsEnabled().then(val => {
 				if (val.indexOf(type) > -1) {
 					chrome.runtime.sendMessage({
diff --git a/services/oauthManager.js b/services/oauthManager.js
index 6cf3a602..c95324c8 100644
--- a/services/oauthManager.js
+++ b/services/oauthManager.js
@@ -58,7 +58,7 @@ function OauthManager(settings, oauth) {
 	function getToken() {
 		return ensureOriginPermissions().then(ensured => {
 			if (ensured) {
-				return settings.getSetAccessToken(accessTokenType).then(function(stored_token) {
+				return settings.getSetAccessToken(accessTokenType).then(function (stored_token) {
 					if (stored_token) {
 						state.loggedIn = true;
 						return stored_token;
@@ -75,7 +75,7 @@ function OauthManager(settings, oauth) {
 
 	//lists databases if a token is already stored
 	function listDatabasesSafe() {
-		return settings.getSetAccessToken(accessTokenType).then(function(stored_token) {
+		return settings.getSetAccessToken(accessTokenType).then(function (stored_token) {
 			if (stored_token) {
 				return listDatabases();
 			} else {
@@ -131,8 +131,8 @@ function OauthManager(settings, oauth) {
 	}
 
 	function logout() {
-		return oauth.revokeAuth().then(function() {
-			return removeToken().then(function() {
+		return oauth.revokeAuth().then(function () {
+			return removeToken().then(function () {
 				state.loggedIn = false
 			})
 		})
@@ -140,17 +140,17 @@ function OauthManager(settings, oauth) {
 
 	//given minimal file information, retrieve the actual file
 	function getChosenDatabaseFile(dbInfo, attempt) {
-		return getToken().then(function(accessToken) {
-			return oauth.fileRequestFunction(dbInfo, accessToken).then(function(response) {
+		return getToken().then(function (accessToken) {
+			return oauth.fileRequestFunction(dbInfo, accessToken).then(function (response) {
 				return response.data
-			}).catch(function(error) {
+			}).catch(function (error) {
 				console.error("Get chosen file failure:", error)
 				if (error.response === undefined)
-					return Promise.reject({message:"No network connection"})
+					return Promise.reject({ message: "No network connection" })
 				if (error.response.status == 401) {
 					//unauthorized, means the token is bad.  retry with new token.
 					console.error("Stale token sent for " + oauth.accessTokenType + ": trying passive Oauth Refresh.")
-					return auth(false).then(function() {
+					return auth(false).then(function () {
 						return getChosenDatabaseFile(dbInfo);
 					})
 				}
@@ -161,14 +161,14 @@ function OauthManager(settings, oauth) {
 	function ensureOriginPermissions() {
 		return chromePromise.permissions.contains({
 			origins: oauth.origins
-		}).then(function() {
+		}).then(function () {
 			return true;
-		}).catch(function() {
+		}).catch(function () {
 			return chromePromise.permissions.request({
 				origins: oauth.origins
-			}).then(function() {
+			}).then(function () {
 				return true;
-			}).catch(function(err) {
+			}).catch(function (err) {
 				return false;
 			})
 		});
@@ -179,10 +179,10 @@ function OauthManager(settings, oauth) {
 		console.info("Authenticating for ", oauth.accessTokenType, interactive)
 
 		let authfunction = is_interactive => {
-			return new Promise(function(resolve, reject) {
+			return new Promise(function (resolve, reject) {
 				chromePromise.runtime.getManifest().then(manifest => {
 					//random state, protects against CSRF
-					var randomState = Base64.encode(window.crypto.getRandomValues(new Uint8Array(16))); 
+					var randomState = Base64.encode(window.crypto.getRandomValues(new Uint8Array(16)));
 					var authUrl = oauth.authUrl +
 						'&client_id=' + manifest.static_data[oauth.accessTokenType].client_id +
 						'&state=' + encodeURIComponent(randomState) +
@@ -193,7 +193,7 @@ function OauthManager(settings, oauth) {
 						'interactive': is_interactive
 					}).then(redirect_url => {
 						oauth.handleAuthRedirectURI(redirect_url, randomState, resolve, reject);
-					}).catch(function(err) {
+					}).catch(function (err) {
 						console.error("Error from webauthflow for", oauth.accessTokenType, err);
 						reject(err);
 					});
diff --git a/services/oneDriveFileManager.js b/services/oneDriveFileManager.js
index 2d1818c2..b2f7049b 100644
--- a/services/oneDriveFileManager.js
+++ b/services/oneDriveFileManager.js
@@ -27,7 +27,7 @@ function OneDriveFileManager(settings) {
 		chooseDescription: 'Access password files stored on OneDrive.  Files will be retrieved from OneDrive each time they are used.',
 	};
 
-	oauth.searchRequestFunction = function(token) {
+	oauth.searchRequestFunction = function (token) {
 		var query = 'kdbx';
 		var filter = encodeURIComponent('file ne null');
 		var url = 'https://api.onedrive.com/v1.0/drive/root/view.search?q=' + query + '&filter=' + filter;
@@ -40,7 +40,7 @@ function OneDriveFileManager(settings) {
 		})
 	}
 
-	oauth.searchRequestHandler = function(response) {
+	oauth.searchRequestHandler = function (response) {
 
 		function transformFile(file) {
 			var path = "";
@@ -74,7 +74,7 @@ function OneDriveFileManager(settings) {
 		}
 
 		// only return files that have a .kdbx extension
-		var files = response.data.value.filter(function(file) {
+		var files = response.data.value.filter(function (file) {
 			return file.name && /\.kdbx?$/.exec(file.name);
 		});
 
@@ -82,7 +82,7 @@ function OneDriveFileManager(settings) {
 	}
 
 	//get the minimum information needed to identify this file for future retrieval
-	oauth.getDatabaseChoiceData = function(dbInfo) {
+	oauth.getDatabaseChoiceData = function (dbInfo) {
 		return {
 			url: dbInfo.url,
 			title: dbInfo.title
@@ -90,7 +90,7 @@ function OneDriveFileManager(settings) {
 	}
 
 	//given minimal file information, retrieve the actual file
-	oauth.fileRequestFunction = function(dbInfo, token) {
+	oauth.fileRequestFunction = function (dbInfo, token) {
 		return axios({
 			method: 'GET',
 			url: dbInfo.url,
@@ -101,7 +101,7 @@ function OneDriveFileManager(settings) {
 		})
 	}
 
-	oauth.revokeAuth = function() {
+	oauth.revokeAuth = function () {
 		return chromePromise.runtime.getManifest().then(manifest => {
 			let url = 'https://login.live.com/oauth20_logout.srf?client_id=' +
 				manifest.static_data.onedrive.client_id
@@ -109,7 +109,7 @@ function OneDriveFileManager(settings) {
 		})
 	}
 
-	oauth.handleAuthRedirectURI = function(redirect_url, randomState, resolve, reject) {
+	oauth.handleAuthRedirectURI = function (redirect_url, randomState, resolve, reject) {
 
 		function parseAuthInfoFromUrl(url) {
 			var hash = /#(.+)$/.exec(url);
@@ -117,7 +117,7 @@ function OneDriveFileManager(settings) {
 				return null;
 			}
 			hash = hash[1];
-			return JSON.parse('{"' + hash.replace(/&/g, '","').replace(/=/g, '":"') + '"}', function(key, value) {
+			return JSON.parse('{"' + hash.replace(/&/g, '","').replace(/=/g, '":"') + '"}', function (key, value) {
 				return key === "" ? value : decodeURIComponent(value);
 			});
 		}
diff --git a/services/pCloudFileManager.js b/services/pCloudFileManager.js
index cca4aab3..75d6bdfe 100644
--- a/services/pCloudFileManager.js
+++ b/services/pCloudFileManager.js
@@ -1,136 +1,132 @@
 "use strict";
 const Base64 = require('base64-arraybuffer')
 import axios from 'axios/dist/axios.min.js'
-import {
-    ChromePromiseApi
-} from '$lib/chrome-api-promise.js'
-import {
-    OauthManager
-} from '$services/oauthManager.js'
+import { ChromePromiseApi } from '$lib/chrome-api-promise.js'
+import { OauthManager } from '$services/oauthManager.js'
 
 const chromePromise = ChromePromiseApi()
 
 function PCloudFileManager(settings) {
-    var accessTokenType = 'pcloud';
+	var accessTokenType = 'pcloud';
 
-    var state = {
-        loggedIn: false
-    }
+	var state = {
+		loggedIn: false
+	}
 
-    var oauth = {
-        key: accessTokenType,
-        accessTokenType: accessTokenType,
-        origins: ['https://*.pcloud.com/'],
-        authUrl: 'https://my.pcloud.com/oauth2/authorize?response_type=token&force_reapprove=true',
-        supportedFeatures: ['incognito', 'listDatabases'],
-        title: 'pCloud',
-        icon: 'icon-pcloud',
-        chooseTitle: 'pCloud',
-        chooseDescription: 'Access password files stored on pCloud. Files will be retrieved from pCould each time they are used.',
-    };
+	var oauth = {
+		key: accessTokenType,
+		accessTokenType: accessTokenType,
+		origins: ['https://*.pcloud.com/'],
+		authUrl: 'https://my.pcloud.com/oauth2/authorize?response_type=token&force_reapprove=true',
+		supportedFeatures: ['incognito', 'listDatabases'],
+		title: 'pCloud',
+		icon: 'icon-pcloud',
+		chooseTitle: 'pCloud',
+		chooseDescription: 'Access password files stored on pCloud. Files will be retrieved from pCould each time they are used.',
+	};
 
-    oauth.searchRequestFunction = function(token) {
-        return axios({
-            method: 'GET',
-            url: 'https://api.pcloud.com/listfolder',
-            params: {
-                folderid: 0,
-                recursive: 1,
-                showdeleted: 0,
-                nofiles: 0,
-                noshares: 1,
-                filtermeta: "isfolder,name,id,folderid,fileid,path"
-            },
-            headers: {
-                'Authorization': 'Bearer ' + token
-            }
-        })
-    }
+	oauth.searchRequestFunction = function (token) {
+		return axios({
+			method: 'GET',
+			url: 'https://api.pcloud.com/listfolder',
+			params: {
+				folderid: 0,
+				recursive: 1,
+				showdeleted: 0,
+				nofiles: 0,
+				noshares: 1,
+				filtermeta: "isfolder,name,id,folderid,fileid,path"
+			},
+			headers: {
+				'Authorization': 'Bearer ' + token
+			}
+		})
+	}
 
-    oauth.searchRequestHandler = function(response) {
+	oauth.searchRequestHandler = function (response) {
 
-        var walk = function(files, contents, path) {
-            contents.forEach( (file) => {
-                if(file.isfolder) {
-                    walk(files, file.contents, path + file.name + "/")
-                }
-                else {
-                    file.path = path + file.name
-                    files.push(file)
-                }
-            })
-            return files
-        }
+		var walk = function (files, contents, path) {
+			contents.forEach((file) => {
+				if (file.isfolder) {
+					walk(files, file.contents, path + file.name + "/")
+				}
+				else {
+					file.path = path + file.name
+					files.push(file)
+				}
+			})
+			return files
+		}
 
-        var files = walk([], response.data.metadata.contents, "/")
-        return files.filter(function(fileInfo) {
-            return fileInfo.name && /\.kdbx?$/.exec(fileInfo.name)
-        }).map(function(fileInfo) {
-            return {
-                title: fileInfo.path,
-                id: fileInfo.fileid
-            };
-        });
-    }
+		var files = walk([], response.data.metadata.contents, "/")
+		return files.filter(function (fileInfo) {
+			return fileInfo.name && /\.kdbx?$/.exec(fileInfo.name)
+		}).map(function (fileInfo) {
+			return {
+				title: fileInfo.path,
+				id: fileInfo.fileid
+			};
+		});
+	}
 
-    //get the minimum information needed to identify this file for future retrieval
-    oauth.getDatabaseChoiceData = function(dbInfo) {
-        return {
-            title: dbInfo.title,
-            id: dbInfo.id
-        }
-    }
+	//get the minimum information needed to identify this file for future retrieval
+	oauth.getDatabaseChoiceData = function (dbInfo) {
+		return {
+			title: dbInfo.title,
+			id: dbInfo.id
+		}
+	}
 
-    //given minimal file information, retrieve the actual file
-    oauth.fileRequestFunction = function(dbInfo, token) {
-        return axios({
-            method: 'GET',
-            url: 'https://api.pcloud.com/getfilelink',
-            params: {
-                path: dbInfo.title,
-            },
-            headers: {
-                'Authorization': 'Bearer ' + token,
-            },
-        }).then(function(response) {
-            var url = `https://${response.data.hosts[0]}${response.data.path}`
-            return axios({
-                method: 'GET',
-                url: url,
-                responseType: 'arraybuffer',
-            })
-        })
-    }
+	//given minimal file information, retrieve the actual file
+	oauth.fileRequestFunction = function (dbInfo, token) {
+		return axios({
+			method: 'GET',
+			url: 'https://api.pcloud.com/getfilelink',
+			params: {
+				path: dbInfo.title,
+			},
+			headers: {
+				'Authorization': 'Bearer ' + token,
+			},
+		}).then(function (response) {
+			var url = `https://${response.data.hosts[0]}${response.data.path}`
+			return axios({
+				method: 'GET',
+				url: url,
+				responseType: 'arraybuffer',
+			})
+		})
+	}
 
-    oauth.revokeAuth = function() {
-        return Promise.resolve()
-    }
+	oauth.revokeAuth = function () {
+		return Promise.resolve()
+	}
 
-    oauth.handleAuthRedirectURI = function(redirect_url, randomState, resolve, reject) {
-        function parseAuthInfoFromUrl(url) {
-            var hash = /#(.+)$/.exec(url);
-            if (!hash) {
-                return null;
-            }
-            hash = hash[1];
-            return JSON.parse('{"' + hash.replace(/&/g, '","').replace(/=/g, '":"') + '"}', function(key, value) {
-                return key === "" ? value : decodeURIComponent(value);
-            });
-        }
+	oauth.handleAuthRedirectURI = function (redirect_url, randomState, resolve, reject) {
+		function parseAuthInfoFromUrl(url) {
+			var hash = /#(.+)$/.exec(url);
+			if (!hash) {
+				return null;
+			}
+			hash = hash[1];
+			return JSON.parse('{"' + hash.replace(/&/g, '","').replace(/=/g, '":"') + '"}', function (key, value) {
+				return key === "" ? value : decodeURIComponent(value);
+			});
+		}
 
-        var authInfo = parseAuthInfoFromUrl(redirect_url);
-        if (authInfo === null) {
-            reject('Failed to extract authentication information from redirect url');
-        } else {
-            settings.getSetAccessToken(accessTokenType, authInfo.access_token).then(function() {
-                resolve(authInfo.access_token);
-            });
-        }
-    }
+		var authInfo = parseAuthInfoFromUrl(redirect_url);
+		if (authInfo === null) {
+			reject('Failed to extract authentication information from redirect url');
+		} else {
+			settings.getSetAccessToken(accessTokenType, authInfo.access_token).then(function () {
+				resolve(authInfo.access_token);
+			});
+		}
+	}
 
-    return OauthManager(settings, oauth)
+	return OauthManager(settings, oauth)
 }
 
 export {
-    PCloudFileManager
+	PCloudFileManager
 }
diff --git a/services/passwordFileStore.js b/services/passwordFileStore.js
index 42ee3164..b2f129df 100644
--- a/services/passwordFileStore.js
+++ b/services/passwordFileStore.js
@@ -20,14 +20,14 @@ function PasswordFileStoreRegistry() {
 	function listFileManagers(requiredFeature) {
 		if (!requiredFeature) return fileManagers;
 
-		return fileManagers.filter(function(fileManager) {
+		return fileManagers.filter(function (fileManager) {
 			return fileManager.supportedFeatures.indexOf(requiredFeature) > -1;
 		});
 	}
 
 	function getChosenDatabaseFile(settings) {
-		return settings.getCurrentDatabaseChoice().then(function(choice) {
-			var matches = fileManagers.filter(function(fileManager) {
+		return settings.getCurrentDatabaseChoice().then(function (choice) {
+			var matches = fileManagers.filter(function (fileManager) {
 				return fileManager.key == choice.providerKey;
 			});
 			if (matches.length !== 1) throw new Error('Unable to find file manager for key ' + choice.providerKey);
diff --git a/services/protectedMemory.js b/services/protectedMemory.js
index 40f214bd..f46f7ef8 100644
--- a/services/protectedMemory.js
+++ b/services/protectedMemory.js
@@ -35,13 +35,13 @@ function ProtectedMemory() {
 
 	function getData(key) {
 		var encData = dataMap[key];
-		if (encData === undefined || typeof(encData) !== 'string')
+		if (encData === undefined || typeof (encData) !== 'string')
 			return Promise.resolve(undefined);
 
-		return keyPromise.then( key => {
+		return keyPromise.then(key => {
 			var encBytes = Base64.decode(encData);
 			return window.crypto.subtle.decrypt(AES, key, encBytes);
-		}).then(function(data) {
+		}).then(function (data) {
 			var decoder = new TextDecoder();
 			var decoded = decoder.decode(new Uint8Array(data));
 			var parsed = JSON.parse(decoded)
@@ -53,9 +53,9 @@ function ProtectedMemory() {
 		var preppedData = prepData(data);
 		var encoder = new TextEncoder();
 		var dataBytes = encoder.encode(JSON.stringify(preppedData));
-		return keyPromise.then( key => {
+		return keyPromise.then(key => {
 			return window.crypto.subtle.encrypt(AES, key, dataBytes);
-		}).then(function(encData) {
+		}).then(function (encData) {
 			var dataString = Base64.encode(encData);
 			dataMap[key] = dataString;
 			return Promise.resolve();
@@ -63,8 +63,8 @@ function ProtectedMemory() {
 	}
 
 	function clearData(key) {
-		if (key !== undefined){
-			delete dataMap[key]	
+		if (key !== undefined) {
+			delete dataMap[key]
 		} else {
 			dataMap = {};
 			keyPromise = initNewKey();
@@ -80,7 +80,7 @@ function ProtectedMemory() {
 	}
 
 	function deserialize(serializedData) {
-		if (serializedData === undefined || typeof(serializedData) !== 'string' || serializedData === "")
+		if (serializedData === undefined || typeof (serializedData) !== 'string' || serializedData === "")
 			return undefined;
 
 		var dataBytes = Base64.decode(serializedData);
@@ -96,7 +96,7 @@ function ProtectedMemory() {
 	 */
 	var randomString = "Ựៅ" // Base64.encode(window.crypto.getRandomValues(new Uint8Array(4)));
 	function prepData(data) {
-		if (data === null || data === undefined || typeof(data) !== 'object')
+		if (data === null || data === undefined || typeof (data) !== 'object')
 			return data;
 
 		if (data.constructor == ArrayBuffer || data.constructor == Uint8Array) {
@@ -117,10 +117,10 @@ function ProtectedMemory() {
 	}
 
 	function dePrepData(data) {
-		if (data === null || data === undefined || (typeof(data) !== 'object' && typeof(data) !== 'string'))
+		if (data === null || data === undefined || (typeof (data) !== 'object' && typeof (data) !== 'string'))
 			return data;
 
-		if (typeof(data) === "string") {
+		if (typeof (data) === "string") {
 			if (data.indexOf(randomString) == 0) {
 				data = data.slice(randomString.length);
 				return new Uint8Array(Base64.decode(data));
diff --git a/services/sampleDatabaseFileManager.js b/services/sampleDatabaseFileManager.js
index 589a0564..6cf32212 100644
--- a/services/sampleDatabaseFileManager.js
+++ b/services/sampleDatabaseFileManager.js
@@ -35,7 +35,7 @@ function SampleDatabaseFileManager() {
 	}
 
 	function listDatabases() {
-		return getActive().then(function(flag) {
+		return getActive().then(function (flag) {
 			if (flag) {
 				return [{
 					title: 'Sample.kdbx - password is 123'
@@ -59,7 +59,7 @@ function SampleDatabaseFileManager() {
 			method: 'GET',
 			url: chrome.extension.getURL('/assets/other/Sample123.kdbx'),
 			responseType: 'arraybuffer'
-		}).then(function(response) {
+		}).then(function (response) {
 			return response.data;
 		});
 	}
@@ -74,7 +74,7 @@ function SampleDatabaseFileManager() {
 	}
 
 	function getActive() {
-		return chromePromise.storage.local.get('useSampleDatabase').then(function(results) {
+		return chromePromise.storage.local.get('useSampleDatabase').then(function (results) {
 			return !!results.useSampleDatabase;
 		});
 	}
diff --git a/services/secureCacheMemory.js b/services/secureCacheMemory.js
index a053d442..b5f35e3a 100644
--- a/services/secureCacheMemory.js
+++ b/services/secureCacheMemory.js
@@ -9,16 +9,16 @@ function SecureCacheMemory(protectedMemory) {
 	var awaiting = [];
 	var messageReceived;
 	var notifyReady;
-	var ready = new Promise(function(resolve) {
+	var ready = new Promise(function (resolve) {
 		notifyReady = resolve;
 	});
-	exports.ready = function() {
-		return ready.then(function(port) {
+	exports.ready = function () {
+		return ready.then(function (port) {
 			return true;
 		});
 	};
 
-	var promise = new Promise(function(resolve, reject) {
+	var promise = new Promise(function (resolve, reject) {
 		messageReceived = resolve;
 	});
 
@@ -26,7 +26,7 @@ function SecureCacheMemory(protectedMemory) {
 	chrome.tabs.query({
 		active: true,
 		currentWindow: true
-	}, function(tabs) {
+	}, function (tabs) {
 		if (tabs !== undefined && tabs.length > 0) {
 			var port = chrome.runtime.connect({
 				name: "tab" + tabs[0].id
@@ -35,36 +35,36 @@ function SecureCacheMemory(protectedMemory) {
 		}
 	});
 
-	ready.then(function(port) {
-		port.onMessage.addListener(function(serializedSavedState) {
+	ready.then(function (port) {
+		port.onMessage.addListener(function (serializedSavedState) {
 			//called from the background when we get a response, i.e. some saved state.
 			var savedState = protectedMemory.hydrate(serializedSavedState);
 			var notifier = awaiting.shift();
 			notifier(savedState); //notify others
 		});
-		port.onDisconnect.addListener(function(p) {
+		port.onDisconnect.addListener(function (p) {
 			// Nothing to do here yet...
 		})
 	});
 
 	//wake up the background page and get a pipe to send/receive messages:
-	exports.get = function(key) {
-		ready.then(function(port) {
+	exports.get = function (key) {
+		ready.then(function (port) {
 			port.postMessage({
 				action: 'get',
 				key: key
 			});
 		});
 
-		var p = new Promise(function(resolve) {
+		var p = new Promise(function (resolve) {
 			awaiting.push(resolve);
 		});
 
 		return p; //will resolve when we get something
 	}
 
-	exports.clear = function(key) {
-		return ready.then(function(port) {
+	exports.clear = function (key) {
+		return ready.then(function (port) {
 			port.postMessage({
 				action: 'clear',
 				key: key
@@ -72,8 +72,8 @@ function SecureCacheMemory(protectedMemory) {
 		})
 	}
 
-	exports.save = function(key, value) {
-		return ready.then(function(port) {
+	exports.save = function (key, value) {
+		return ready.then(function (port) {
 			var serializedValue = protectedMemory.serialize(value);
 			port.postMessage({
 				action: 'save',
@@ -83,7 +83,7 @@ function SecureCacheMemory(protectedMemory) {
 		})
 	}
 
-	exports.forgetStuff = function() {
+	exports.forgetStuff = function () {
 		// Causes forgetStuff to run in the event page.
 		return ready.then(port => {
 			port.postMessage({
diff --git a/services/settings.js b/services/settings.js
index adbd592d..e2730be5 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -10,7 +10,7 @@ function Settings(secureCache) {
 	var exports = {}
 
 	// upgrade old settings.  Called on install.
-	exports.upgrade = function() {
+	exports.upgrade = function () {
 		// Patch https://subdavis.com/blog/jekyll/update/2017/01/02/ckp-security-flaw.html
 		exports.getSetDatabaseUsages().then(usages => {
 			let keys = Object.keys(usages)
@@ -21,7 +21,7 @@ function Settings(secureCache) {
 		})
 	}
 
-	exports.handleProviderError = function(err, provider) {
+	exports.handleProviderError = function (err, provider) {
 		exports.getCurrentDatabaseChoice().then(info => {
 			let providerKey = provider === undefined ? info.providerKey : provider.key;
 			let errmsg = err.message || ""
@@ -32,15 +32,15 @@ function Settings(secureCache) {
 		})
 	}
 
-	exports.getKeyFiles = function() {
-		return chromePromise.storage.local.get(['keyFiles']).then(function(items) {
+	exports.getKeyFiles = function () {
+		return chromePromise.storage.local.get(['keyFiles']).then(function (items) {
 			return items.keyFiles || [];
 		});
 	}
 
-	exports.deleteKeyFile = function(name) {
-		return exports.getKeyFiles().then(function(keyFiles) {
-			keyFiles.forEach(function(keyFile, index) {
+	exports.deleteKeyFile = function (name) {
+		return exports.getKeyFiles().then(function (keyFiles) {
+			keyFiles.forEach(function (keyFile, index) {
 				if (keyFile.name === name) {
 					keyFiles.splice(index, 1);
 				}
@@ -52,19 +52,19 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.deleteAllKeyFiles = function() {
+	exports.deleteAllKeyFiles = function () {
 		return chromePromise.storage.local.remove('keyFiles')
 	}
 
-	exports.destroyLocalStorage = function(key) {
+	exports.destroyLocalStorage = function (key) {
 		if (key.length) {
 			return chromePromise.storage.local.remove(key)
 		}
 	}
 
-	exports.addKeyFile = function(name, key) {
-		return exports.getKeyFiles().then(function(keyFiles) {
-			var matches = keyFiles.filter(function(keyFile) {
+	exports.addKeyFile = function (name, key) {
+		return exports.getKeyFiles().then(function (keyFiles) {
+			var matches = keyFiles.filter(function (keyFile) {
 				return keyFile.name === name;
 			})
 
@@ -86,8 +86,8 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.saveCurrentDatabaseChoice = function(passwordFile, provider) {
-		let shallowCopy = function(obj) {
+	exports.saveCurrentDatabaseChoice = function (passwordFile, provider) {
+		let shallowCopy = function (obj) {
 			let clone = {}
 			clone.prototype = obj.prototype
 			Object.keys(obj).forEach(property => {
@@ -106,8 +106,8 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.getCurrentDatabaseChoice = function() {
-		return chromePromise.storage.local.get(['selectedDatabase']).then(function(items) {
+	exports.getCurrentDatabaseChoice = function () {
+		return chromePromise.storage.local.get(['selectedDatabase']).then(function (items) {
 			if (items.selectedDatabase) {
 				return items.selectedDatabase;
 			} else {
@@ -116,7 +116,7 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.disableDatabaseProvider = function(provider) {
+	exports.disableDatabaseProvider = function (provider) {
 		return chromePromise.storage.local.get(['selectedDatabase']).then(items => {
 			if (items.selectedDatabase)
 				if (items.selectedDatabase.providerKey === provider.key)
@@ -125,7 +125,7 @@ function Settings(secureCache) {
 		})
 	}
 
-	exports.getCurrentMasterPasswordCacheKey = function() {
+	exports.getCurrentMasterPasswordCacheKey = function () {
 		return exports.getCurrentDatabaseChoice().then(info => {
 			if (info !== null)
 				return info.passwordFile.title + "__" + info.providerKey + ".password"
@@ -133,7 +133,7 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.cacheMasterPassword = function(pw, args) {
+	exports.cacheMasterPassword = function (pw, args) {
 		return exports.getCurrentMasterPasswordCacheKey().then(key => {
 			return secureCache.save(key, pw).then(nil => {
 				let forgetTime = args['forgetTime']
@@ -145,9 +145,9 @@ function Settings(secureCache) {
 	/*
 	 * Sets a time to forget something
 	 */
-	exports.setForgetTime = function(key, time) {
+	exports.setForgetTime = function (key, time) {
 		var storageKey = 'forgetTimes';
-		return chromePromise.storage.local.get(storageKey).then(function(items) {
+		return chromePromise.storage.local.get(storageKey).then(function (items) {
 			var forgetTimes = {}
 			if (items[storageKey]) {
 				forgetTimes = items[storageKey];
@@ -162,9 +162,9 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.getForgetTime = function(key) {
+	exports.getForgetTime = function (key) {
 		var storageKey = 'forgetTimes';
-		return chromePromise.storage.local.get(storageKey).then(function(items) {
+		return chromePromise.storage.local.get(storageKey).then(function (items) {
 			var forgetTimes = {}
 			if (items[storageKey]) {
 				forgetTimes = items[storageKey];
@@ -174,9 +174,9 @@ function Settings(secureCache) {
 		});
 	}
 
-	exports.getAllForgetTimes = function() {
+	exports.getAllForgetTimes = function () {
 		var storageKey = 'forgetTimes';
-		return chromePromise.storage.local.get(storageKey).then(function(items) {
+		return chromePromise.storage.local.get(storageKey).then(function (items) {
 			var forgetTimes = {}
 			if (items[storageKey]) {
 				forgetTimes = items[storageKey];
@@ -186,14 +186,14 @@ function Settings(secureCache) {
 		})
 	}
 
-	exports.clearForgetTimes = function(keysArray) {
+	exports.clearForgetTimes = function (keysArray) {
 		var storageKey = 'forgetTimes';
-		return chromePromise.storage.local.get(storageKey).then(function(items) {
+		return chromePromise.storage.local.get(storageKey).then(function (items) {
 			var forgetTimes = {}
 			if (items[storageKey]) {
 				forgetTimes = items[storageKey];
 			}
-			keysArray.forEach(function(key) {
+			keysArray.forEach(function (key) {
 				if (forgetTimes[key])
 					delete forgetTimes[key];
 			})
@@ -208,9 +208,9 @@ function Settings(secureCache) {
 	 * Saves information about how the database was opened, so we can optimize the
 	 * UI next time by hiding the irrelevant options and remembering the keyfile
 	 */
-	exports.saveCurrentDatabaseUsage = function(usage) {
-		return exports.getCurrentDatabaseChoice().then(function(info) {
-			return exports.getSetDatabaseUsages().then(function(usages) {
+	exports.saveCurrentDatabaseUsage = function (usage) {
+		return exports.getCurrentDatabaseChoice().then(function (info) {
+			return exports.getSetDatabaseUsages().then(function (usages) {
 				var key = info.passwordFile.title + "__" + info.providerKey;
 				usages[key] = usage;
 
@@ -223,9 +223,9 @@ function Settings(secureCache) {
 	 * Retrieves information about how the database was opened, so we can optimize the
 	 * UI by hiding the irrelevant options and remembering the keyfile
 	 */
-	exports.getCurrentDatabaseUsage = function() {
-		return exports.getCurrentDatabaseChoice().then(function(info) {
-			return exports.getSetDatabaseUsages().then(function(usages) {
+	exports.getCurrentDatabaseUsage = function () {
+		return exports.getCurrentDatabaseChoice().then(function (info) {
+			return exports.getSetDatabaseUsages().then(function (usages) {
 				var key = info.passwordFile.title + "__" + info.providerKey;
 				var usage = usages[key] || {};
 
@@ -237,63 +237,63 @@ function Settings(secureCache) {
 		})
 	}
 
-	exports.getSharedUrlList = function() {
+	exports.getSharedUrlList = function () {
 		return chromePromise.storage.local.get('sharedUrlList').then(links => {
 			return links || false;
 		})
 	}
 
-	let keyGetSetter = function(key, val, defaultval, value_type) {
+	let keyGetSetter = function (key, val, defaultval, value_type) {
 		let update_obj = {}
 		update_obj[key] = val
-		if (val !== undefined && (typeof(val) === value_type || val === null) )
+		if (val !== undefined && (typeof (val) === value_type || val === null))
 			return chromePromise.storage.local.set(update_obj).then(() => val)
 		else
 			return chromePromise.storage.local.get(key).then(oldval => {
 				if (oldval[key] !== undefined)
-					if (typeof(oldval[key]) === value_type)
+					if (typeof (oldval[key]) === value_type)
 						return oldval[key]
 				return defaultval
 			})
 	}
 
-	exports.getSetClipboardExpireInterval = function(interval) {
+	exports.getSetClipboardExpireInterval = function (interval) {
 		return keyGetSetter('expireInterval', interval, 2, 'number')
 	}
 
-	exports.getSetAccessToken = function(type, accessToken) {
+	exports.getSetAccessToken = function (type, accessToken) {
 		return keyGetSetter(type + 'AccessToken', accessToken, null, 'string')
 	}
 
-	exports.getSetDatabaseUsages = function(usages) {
+	exports.getSetDatabaseUsages = function (usages) {
 		return keyGetSetter('databaseUsages', usages, {}, 'object')
 	}
 
-	exports.getSetDefaultRememberPeriod = function(rememberPeriod) {
+	exports.getSetDefaultRememberPeriod = function (rememberPeriod) {
 		return keyGetSetter('rememberPeriod', rememberPeriod, 0, 'number')
 	}
 
-	exports.getSetWebdavServerList = function(serverList) {
+	exports.getSetWebdavServerList = function (serverList) {
 		return keyGetSetter('webdavServerList', serverList, [], 'object')
 	}
 
-	exports.getSetWebdavDirectoryMap = function(dirMap) {
+	exports.getSetWebdavDirectoryMap = function (dirMap) {
 		return keyGetSetter('webdavDirectoryMap', dirMap, {}, 'object')
 	}
 
-	exports.getSetHotkeyNavEnabled = function(enabled) {
+	exports.getSetHotkeyNavEnabled = function (enabled) {
 		return keyGetSetter('hotkeyNavEnabled', enabled, false, 'boolean')
 	}
 
-	exports.getSetStrictModeEnabled = function(enabled) {
+	exports.getSetStrictModeEnabled = function (enabled) {
 		return keyGetSetter('strictMatchModeEnabled', enabled, false, 'boolean')
 	}
 
-	exports.getSetNotificationsEnabled = function(enabledTypes) {
-		return keyGetSetter('notificationsEnabled', enabledTypes, ['clipboard','expiration'], 'object')
+	exports.getSetNotificationsEnabled = function (enabledTypes) {
+		return keyGetSetter('notificationsEnabled', enabledTypes, ['clipboard', 'expiration'], 'object')
 	}
 
-	exports.getSetOriginPermissionEnabled = function(enabled) {
+	exports.getSetOriginPermissionEnabled = function (enabled) {
 		return keyGetSetter('originPermissionsEnabled', enabled, false, 'boolean')
 	}
 
diff --git a/services/sharedUrlFileManager.js b/services/sharedUrlFileManager.js
index bd4a884f..8a9f7ae7 100644
--- a/services/sharedUrlFileManager.js
+++ b/services/sharedUrlFileManager.js
@@ -71,7 +71,7 @@ function SharedUrlFileManager() {
 			url: dbInfo.direct_link,
 			responseType: 'arraybuffer',
 			cache: true
-		}).then(function(response) {
+		}).then(function (response) {
 			return response.data;
 		});
 	}
diff --git a/services/unlockedState.js b/services/unlockedState.js
index d5ec435d..798b5e7a 100644
--- a/services/unlockedState.js
+++ b/services/unlockedState.js
@@ -23,12 +23,12 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 	var cacheTimeoutId;
 
 	//determine current url:
-	my.getTabDetails = function() {
-		return new Promise(function(resolve, reject) {
+	my.getTabDetails = function () {
+		return new Promise(function (resolve, reject) {
 			chrome.tabs.query({
 				active: true,
 				currentWindow: true
-			}, function(tabs) {
+			}, function (tabs) {
 				if (tabs && tabs.length) {
 					my.tabId = tabs[0].id;
 					var url = tabs[0].url.split('?');
@@ -39,15 +39,15 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 					my.origin = parsedUrl.protocol + '//' + parsedUrl.hostname + '/';
 
 					chromePromise.permissions.contains({
-							origins: [my.origin]
-						})
-						.then(function() {
+						origins: [my.origin]
+					})
+						.then(function () {
 							my.sitePermission = true;
 						})
-						.catch(function(err) {
+						.catch(function (err) {
 							my.sitePermission = false;
 						})
-						.then(function() {
+						.then(function () {
 							resolve();
 						})
 				} else {
@@ -57,12 +57,12 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 		});
 	};
 
-	my.clearCache = function() {
+	my.clearCache = function () {
 		// Destroys an object in memory.
 		function destroy(obj) {
 			for (var prop in obj) {
 				var property = obj[prop];
-				if (property != null && typeof(property) == 'object') {
+				if (property != null && typeof (property) == 'object') {
 					destroy(property);
 				} else {
 					obj[prop] = null;
@@ -73,32 +73,32 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 		my.cache = {}
 	}
 
-	my.cacheSet = function(key, val) {
+	my.cacheSet = function (key, val) {
 		// Refresh cache
 		clearTimeout(cacheTimeoutId)
-		cacheTimeoutId = setTimeout(function() {
+		cacheTimeoutId = setTimeout(function () {
 			my.clearCache()
 			window.close()
 		}, 120000);
 		my.cache[key] = val;
 	}
 
-	my.cacheGet = function(key) {
+	my.cacheGet = function (key) {
 		// Refresh cache
 		clearTimeout(cacheTimeoutId)
-		cacheTimeoutId = setTimeout(function() {
+		cacheTimeoutId = setTimeout(function () {
 			my.clearCache()
 			window.close()
 		}, 120000);
 		return my.cache[key];
 	}
 
-	my.clearClipboardState = function() {
+	my.clearClipboardState = function () {
 		my.clipboardStatus = "";
 	}
 	setTimeout(my.clearClipboardState, 60000); //clear backgroundstate after 1 minutes live - we should never be alive that long
 
-	my.autofill = function(entry) {
+	my.autofill = function (entry) {
 		chrome.runtime.sendMessage({
 			m: "requestPermission",
 			perms: {
@@ -121,26 +121,26 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 		return my.getDecryptedAttribute(entry, attr);
 	}
 
-	my.copyPassword = function(entry) {
+	my.copyPassword = function (entry) {
 		copyPart = 'password';
 		copyEntry = entry;
 		document.execCommand('copy');
 	}
-	my.copyUsername = function(entry) {
+	my.copyUsername = function (entry) {
 		copyPart = 'userName';
 		copyEntry = entry;
 		document.execCommand('copy');
 	}
-	my.gotoDetails = function(entry) {
+	my.gotoDetails = function (entry) {
 		$router.route('/entry-details/' + entry.id);
 	}
 
-	my.getDecryptedAttribute = function(entry, attributeName) {
+	my.getDecryptedAttribute = function (entry, attributeName) {
 		return keepassReference.getFieldValue(entry, attributeName, my.cache.allEntries);
 	}
 
 	//listens for the copy event and does the copy
-	document.addEventListener('copy', function(e) {
+	document.addEventListener('copy', function (e) {
 		if (!copyEntry && !copyPart) {
 			return; //listener can get registered multiple times
 		}
@@ -155,7 +155,7 @@ function UnlockedState($router, keepassReference, protectedMemory, settings, not
 		settings.getSetClipboardExpireInterval().then(interval => {
 			settings.setForgetTime('clearClipboard', Date.now() + interval * 60000);
 			notifications.push({
-				text: fieldName +' copied to clipboard.  Clipboard will clear in '+ interval +' minute(s).',
+				text: fieldName + ' copied to clipboard.  Clipboard will clear in ' + interval + ' minute(s).',
 				type: 'clipboard',
 			}).then(() => window.close())
 		})
diff --git a/services/webdavFileManager.js b/services/webdavFileManager.js
index 173d771f..fc1632a7 100644
--- a/services/webdavFileManager.js
+++ b/services/webdavFileManager.js
@@ -80,7 +80,7 @@ function WebdavFileManager(settings) {
 	*/
 	function listDatabases() {
 		return isEnabled().then(enabled => {
-			if (!enabled )
+			if (!enabled)
 				return Promise.resolve([])
 			return settings.getSetWebdavDirectoryMap().then(dirMap => {
 				let promises = []
@@ -88,7 +88,7 @@ function WebdavFileManager(settings) {
 				for (let serverId in dirMap)
 					dirMap[serverId].forEach(dirInfo => {
 						promises.push(searchDirectory(serverId, dirInfo.path))
-					})	
+					})
 
 				return Promise.all(promises).then(results => {
 					// flatten results
@@ -107,7 +107,7 @@ function WebdavFileManager(settings) {
 	 */
 	async function searchServer(serverId) {
 		let serverInfo = await getServer(serverId)
-		if (serverInfo === null){
+		if (serverInfo === null) {
 			console.error("serverInfo not found");
 			return
 		}
@@ -117,22 +117,22 @@ function WebdavFileManager(settings) {
 		/** 
 		 * returns Object:[]DirInfo
 		*/
-		let bfs = async function() {
-			let queue = [ '/' ]
+		let bfs = async function () {
+			let queue = ['/']
 			let foundDirectories = []
 
 			while (queue.length) {
 				let path = queue.shift()
 
 				// TODO: Implement depth better
-				if (path.split('/').length > SEARCH_DEPTH) 
+				if (path.split('/').length > SEARCH_DEPTH)
 					break; // We've exceeded search depth
-				let contents = await client.getDirectoryContents(path, {credentials: 'omit'});
+				let contents = await client.getDirectoryContents(path, { credentials: 'omit' });
 				let foundKDBXInDir = false;
 				contents.forEach(item => {
 					if (item.type === 'directory')
 						queue.push(item.filename)
-					else if (item.filename.indexOf('.kdbx') >= 1 && !foundKDBXInDir){
+					else if (item.filename.indexOf('.kdbx') >= 1 && !foundKDBXInDir) {
 						foundDirectories.push({
 							path: path, // the parent.
 							serverId: serverInfo.serverId
@@ -152,7 +152,7 @@ function WebdavFileManager(settings) {
 			let dirMap = resolves[1]
 			dirMap[serverInfo.serverId] = foundDirectories
 			return settings.getSetWebdavDirectoryMap(dirMap)
-		})	
+		})
 	}
 
 	//get the minimum information needed to identify this file for future retrieval
@@ -174,7 +174,7 @@ function WebdavFileManager(settings) {
 				throw 'Database no longer exists'
 			let client = createClient(serverInfo.url, serverInfo.username, serverInfo.password)
 			createClient.setFetchMethod(window.fetch)
-			return client.getFileContents(dbInfo.path, {credentials: 'omit'})
+			return client.getFileContents(dbInfo.path, { credentials: 'omit' })
 		})
 	}
 
@@ -189,7 +189,7 @@ function WebdavFileManager(settings) {
 				return []
 			let client = createClient(serverInfo.url, serverInfo.username, serverInfo.password)
 			createClient.setFetchMethod(window.fetch);
-			return client.getDirectoryContents(directory, {credentials: 'omit'}).then(contents => {
+			return client.getDirectoryContents(directory, { credentials: 'omit' }).then(contents => {
 				// map from directory contents to DBInfo type.
 				return contents.filter(element => {
 					return element.filename.indexOf('.kdbx') >= 1
@@ -213,7 +213,7 @@ function WebdavFileManager(settings) {
 		createClient.setFetchMethod((a, b) => {
 			return window.fetch(a, b);
 		})
-		return client.getDirectoryContents('/', {credentials:'omit'}).then(contents => {
+		return client.getDirectoryContents('/', { credentials: 'omit' }).then(contents => {
 			// success!
 			let serverInfo = {
 				url: url,
@@ -223,9 +223,9 @@ function WebdavFileManager(settings) {
 			return settings.getSetWebdavServerList().then(serverList => {
 				serverList = serverList.length ? serverList : []
 				let matches = serverList.filter((elem, i, a) => {
-					return (elem.url == serverInfo.url 
-					&& elem.username == serverInfo.username 
-					&& elem.password == serverInfo.password)
+					return (elem.url == serverInfo.url
+						&& elem.username == serverInfo.username
+						&& elem.password == serverInfo.password)
 				})
 				if (matches.length == 1) {
 					return matches[0].serverId
@@ -247,7 +247,7 @@ function WebdavFileManager(settings) {
 	function listServers() {
 		return settings.getSetWebdavServerList()
 	}
-	
+
 	/**
 	 * return Promise --> Object:ServerInfo
 	 * @param {string} serverId 
diff --git a/src/Options.vue b/src/Options.vue
index d4aaeaff..cd8b59f7 100644
--- a/src/Options.vue
+++ b/src/Options.vue
@@ -32,157 +32,157 @@
 </template>
 
 <script>
-	/* beautify preserve:start */
-	// Singletons
-	import {ChromePromiseApi} from '$lib/chrome-api-promise.js'
-	import {Settings} from '$services/settings.js'
-	import {ProtectedMemory} from '$services/protectedMemory.js'
-	import {SecureCacheMemory} from '$services/secureCacheMemory.js'
-	import {PasswordFileStoreRegistry} from '$services/passwordFileStore.js'
-	import {KeyFileParser} from '$services/keyFileParser.js'
-	// File Managers
-	import {LocalChromePasswordFileManager} from '$services/localChromePasswordFileManager.js'
-	import {GoogleDrivePasswordFileManager} from '$services/googleDrivePasswordFileManager.js'
-	import {DropboxFileManager} from '$services/dropboxFileManager.js'
-	import {OneDriveFileManager} from '$services/oneDriveFileManager.js'
-	import {SharedUrlFileManager} from '$services/sharedUrlFileManager.js'
-	import {PCloudFileManager} from '$services/pCloudFileManager.js'
-	import {SampleDatabaseFileManager} from '$services/sampleDatabaseFileManager.js'
-	import {WebdavFileManager} from '$services/webdavFileManager.js'
-	// Components
-	import OptionsNavbar from '@/components/Navbar'
-	import OptionsStartup from '@/components/OptionsStartup'
-	import ManageDatabases from '@/components/ManageDatabases'
-	import ManageKeyfiles from '@/components/ManageKeyfiles'
-	import AdvancedSettings from '@/components/AdvancedSettings'
-	import SvgDefs from '@/components/SvgDefs'
-	import Reauthorize from '@/components/Reauthorize'
+/* beautify preserve:start */
+// Singletons
+import { ChromePromiseApi } from '$lib/chrome-api-promise.js'
+import { Settings } from '$services/settings.js'
+import { ProtectedMemory } from '$services/protectedMemory.js'
+import { SecureCacheMemory } from '$services/secureCacheMemory.js'
+import { PasswordFileStoreRegistry } from '$services/passwordFileStore.js'
+import { KeyFileParser } from '$services/keyFileParser.js'
+// File Managers
+import { LocalChromePasswordFileManager } from '$services/localChromePasswordFileManager.js'
+import { GoogleDrivePasswordFileManager } from '$services/googleDrivePasswordFileManager.js'
+import { DropboxFileManager } from '$services/dropboxFileManager.js'
+import { OneDriveFileManager } from '$services/oneDriveFileManager.js'
+import { SharedUrlFileManager } from '$services/sharedUrlFileManager.js'
+import { PCloudFileManager } from '$services/pCloudFileManager.js'
+import { SampleDatabaseFileManager } from '$services/sampleDatabaseFileManager.js'
+import { WebdavFileManager } from '$services/webdavFileManager.js'
+// Components
+import OptionsNavbar from '@/components/Navbar'
+import OptionsStartup from '@/components/OptionsStartup'
+import ManageDatabases from '@/components/ManageDatabases'
+import ManageKeyfiles from '@/components/ManageKeyfiles'
+import AdvancedSettings from '@/components/AdvancedSettings'
+import SvgDefs from '@/components/SvgDefs'
+import Reauthorize from '@/components/Reauthorize'
 
-	const protectedMemory = new ProtectedMemory()
-	const secureCacheMemory = new SecureCacheMemory(protectedMemory)
-	const settings = new Settings(secureCacheMemory)
-	const keyFileParser = new KeyFileParser()
+const protectedMemory = new ProtectedMemory()
+const secureCacheMemory = new SecureCacheMemory(protectedMemory)
+const settings = new Settings(secureCacheMemory)
+const keyFileParser = new KeyFileParser()
 
-	// File Managers
-	const localChromePasswordFileManager = new LocalChromePasswordFileManager()
-	const dropboxFileManager = new DropboxFileManager(settings)
-	const googleDrivePasswordFileManager = new GoogleDrivePasswordFileManager(settings)
-	const sharedUrlFileManager = new SharedUrlFileManager()
-	const oneDriveFileManager = new OneDriveFileManager(settings)
-	const pCloudFileManager = new PCloudFileManager(settings)
-	const sampleDatabaseFileManager = new SampleDatabaseFileManager()
-	const webdavFileManager = new WebdavFileManager(settings)
+// File Managers
+const localChromePasswordFileManager = new LocalChromePasswordFileManager()
+const dropboxFileManager = new DropboxFileManager(settings)
+const googleDrivePasswordFileManager = new GoogleDrivePasswordFileManager(settings)
+const sharedUrlFileManager = new SharedUrlFileManager()
+const oneDriveFileManager = new OneDriveFileManager(settings)
+const pCloudFileManager = new PCloudFileManager(settings)
+const sampleDatabaseFileManager = new SampleDatabaseFileManager()
+const webdavFileManager = new WebdavFileManager(settings)
 
-	const passwordFileStoreRegistry = new PasswordFileStoreRegistry(
-		localChromePasswordFileManager, 
-		dropboxFileManager, 
-		googleDrivePasswordFileManager, 
-		sharedUrlFileManager, 
-		sampleDatabaseFileManager, 
-		oneDriveFileManager,
-		pCloudFileManager)
-	/* beautify preserve:end */
+const passwordFileStoreRegistry = new PasswordFileStoreRegistry(
+	localChromePasswordFileManager,
+	dropboxFileManager,
+	googleDrivePasswordFileManager,
+	sharedUrlFileManager,
+	sampleDatabaseFileManager,
+	oneDriveFileManager,
+	pCloudFileManager)
+/* beautify preserve:end */
 
-	export default {
-		name: 'app',
-		components: {
-			OptionsNavbar,
-			OptionsStartup,
-			ManageDatabases,
-			ManageKeyfiles,
-			AdvancedSettings,
-			SvgDefs,
-			Reauthorize
-		},
-		data() {
-			return {
-				routes: [],
-				initialTab: "/", // The tab to start on.
-				services: {
-					settings,
-					dropboxFileManager,
-					googleDrivePasswordFileManager,
-					localChromePasswordFileManager,
-					oneDriveFileManager,
-					pCloudFileManager,
-					sampleDatabaseFileManager,
-					sharedUrlFileManager,
-					keyFileParser,
-					secureCacheMemory,
-					webdavFileManager
+export default {
+	name: 'app',
+	components: {
+		OptionsNavbar,
+		OptionsStartup,
+		ManageDatabases,
+		ManageKeyfiles,
+		AdvancedSettings,
+		SvgDefs,
+		Reauthorize
+	},
+	data() {
+		return {
+			routes: [],
+			initialTab: "/", // The tab to start on.
+			services: {
+				settings,
+				dropboxFileManager,
+				googleDrivePasswordFileManager,
+				localChromePasswordFileManager,
+				oneDriveFileManager,
+				pCloudFileManager,
+				sampleDatabaseFileManager,
+				sharedUrlFileManager,
+				keyFileParser,
+				secureCacheMemory,
+				webdavFileManager
+			},
+			show: {
+				startup: {
+					visible: false
 				},
-				show: {
-					startup: {
-						visible: false
-					},
-					manageDatabases: {
-						visible: false
-					},
-					manageKeyfiles: {
-						visible: false
-					},
-					advanced: {
-						visble: false
-					},
-					reauthorize: {
-						visible: false
-					}
-				}
-			}
-		},
-		mounted: function() {
-			// Relies on the content of this.show
-			this.$router.registerRoutes([{
-					route: '/',
-					name: "Getting Started",
-					var: this.show.startup
+				manageDatabases: {
+					visible: false
 				},
-				{
-					route: '/manage/databases',
-					name: "Manage Databases",
-					var: this.show.manageDatabases
+				manageKeyfiles: {
+					visible: false
 				},
-				{
-					route: '/manage/keyfiles',
-					name: "Manage Keyfiles",
-					var: this.show.manageKeyfiles
+				advanced: {
+					visble: false
 				},
-				{
-					route: '/advanced',
-					name: "Advanced",
-					var: this.show.advanced
-				},
-				{
-					route: '/reauthorize/:provider',
-					name: "Reauthorize",
-					var: this.show.reauthorize,
-					hidden_from_navbar: true
+				reauthorize: {
+					visible: false
 				}
-			])
-			this.routes = this.$router.routes // HACK since Vue doesn't notice changes in 
-			let hashroute = this.$router.processHash(window.location.hash);
-			if (hashroute)
-				this.$router.route(hashroute)
-			else
-				this.$router.route(this.initialTab)
+			}
+		}
+	},
+	mounted: function () {
+		// Relies on the content of this.show
+		this.$router.registerRoutes([{
+			route: '/',
+			name: "Getting Started",
+			var: this.show.startup
+		},
+		{
+			route: '/manage/databases',
+			name: "Manage Databases",
+			var: this.show.manageDatabases
+		},
+		{
+			route: '/manage/keyfiles',
+			name: "Manage Keyfiles",
+			var: this.show.manageKeyfiles
+		},
+		{
+			route: '/advanced',
+			name: "Advanced",
+			var: this.show.advanced
+		},
+		{
+			route: '/reauthorize/:provider',
+			name: "Reauthorize",
+			var: this.show.reauthorize,
+			hidden_from_navbar: true
 		}
+		])
+		this.routes = this.$router.routes // HACK since Vue doesn't notice changes in 
+		let hashroute = this.$router.processHash(window.location.hash);
+		if (hashroute)
+			this.$router.route(hashroute)
+		else
+			this.$router.route(this.initialTab)
 	}
+}
 </script>
 
 <style lang="scss">
-	@import './styles/options.scss';
-	body {
-		background-color: $background-color;
-	}
+@import "./styles/options.scss";
+body {
+  background-color: $background-color;
+}
 
-	#overflowbox {
-		overflow-y: auto;
-		margin-top: 60px;
-	}
+#overflowbox {
+  overflow-y: auto;
+  margin-top: 60px;
+}
 
-	#contentbox {
-		margin: 0px auto;
-		width: $options-width;
-		/* height: 490px; */
-	}
+#contentbox {
+  margin: 0px auto;
+  width: $options-width;
+  /* height: 490px; */
+}
 </style>
diff --git a/src/Popup.vue b/src/Popup.vue
index 9f6c9ccf..14044915 100644
--- a/src/Popup.vue
+++ b/src/Popup.vue
@@ -25,135 +25,135 @@
 </template>
 
 <script>
-	/* beautify preserve:start */
-	// Singletons
-	import { Settings } from '$services/settings.js'
-	import { ProtectedMemory } from '$services/protectedMemory.js'
-	import { KeepassHeader } from '$services/keepassHeader.js'
-	import { KeepassReference } from '$services/keepassReference.js'
-	import { KeepassService } from '$services/keepassService.js'
-	import { UnlockedState } from '$services/unlockedState.js'
-	import { SecureCacheMemory } from '$services/secureCacheMemory.js'
-	import { PasswordFileStoreRegistry } from '$services/passwordFileStore.js'
-	import { Links } from '$services/links.js'
-	import { Notifications } from '$services/notifications.js'
-	// File Managers
-	import { LocalChromePasswordFileManager } from '$services/localChromePasswordFileManager.js'
-	import { GoogleDrivePasswordFileManager } from '$services/googleDrivePasswordFileManager.js'
-	import { DropboxFileManager } from '$services/dropboxFileManager.js'
-	import { OneDriveFileManager } from '$services/oneDriveFileManager.js'
-	import { PCloudFileManager } from '$services/pCloudFileManager.js'
-	import { SharedUrlFileManager } from '$services/sharedUrlFileManager.js'
-	import { SampleDatabaseFileManager } from '$services/sampleDatabaseFileManager.js'
-	import { WebdavFileManager } from '$services/webdavFileManager.js'
-	// Components
-	import Unlock from '@/components/Unlock'
-	import Startup from '@/components/Startup'
-	import FilePicker from '@/components/FilePicker'
-	import EntryDetails from '@/components/EntryDetails'
-	import SvgDefs from '@/components/SvgDefs'
+/* beautify preserve:start */
+// Singletons
+import { Settings } from '$services/settings.js'
+import { ProtectedMemory } from '$services/protectedMemory.js'
+import { KeepassHeader } from '$services/keepassHeader.js'
+import { KeepassReference } from '$services/keepassReference.js'
+import { KeepassService } from '$services/keepassService.js'
+import { UnlockedState } from '$services/unlockedState.js'
+import { SecureCacheMemory } from '$services/secureCacheMemory.js'
+import { PasswordFileStoreRegistry } from '$services/passwordFileStore.js'
+import { Links } from '$services/links.js'
+import { Notifications } from '$services/notifications.js'
+// File Managers
+import { LocalChromePasswordFileManager } from '$services/localChromePasswordFileManager.js'
+import { GoogleDrivePasswordFileManager } from '$services/googleDrivePasswordFileManager.js'
+import { DropboxFileManager } from '$services/dropboxFileManager.js'
+import { OneDriveFileManager } from '$services/oneDriveFileManager.js'
+import { PCloudFileManager } from '$services/pCloudFileManager.js'
+import { SharedUrlFileManager } from '$services/sharedUrlFileManager.js'
+import { SampleDatabaseFileManager } from '$services/sampleDatabaseFileManager.js'
+import { WebdavFileManager } from '$services/webdavFileManager.js'
+// Components
+import Unlock from '@/components/Unlock'
+import Startup from '@/components/Startup'
+import FilePicker from '@/components/FilePicker'
+import EntryDetails from '@/components/EntryDetails'
+import SvgDefs from '@/components/SvgDefs'
 
-	const links = new Links()
-	const protectedMemory = new ProtectedMemory()
-	const secureCacheMemory = new SecureCacheMemory(protectedMemory)
-	const settings = new Settings(secureCacheMemory)
-	const keepassHeader = new KeepassHeader(settings)
-	const keepassReference = new KeepassReference()
-	const notifications = new Notifications(settings)
+const links = new Links()
+const protectedMemory = new ProtectedMemory()
+const secureCacheMemory = new SecureCacheMemory(protectedMemory)
+const settings = new Settings(secureCacheMemory)
+const keepassHeader = new KeepassHeader(settings)
+const keepassReference = new KeepassReference()
+const notifications = new Notifications(settings)
 
-	// File Managers
-	const localChromePasswordFileManager = new LocalChromePasswordFileManager()
-	const dropboxFileManager = new DropboxFileManager(settings)
-	const googleDrivePasswordFileManager = new GoogleDrivePasswordFileManager(settings)
-	const sharedUrlFileManager = new SharedUrlFileManager()
-	const oneDriveFileManager = new OneDriveFileManager(settings)
-	const pCloudFileManager = new PCloudFileManager(settings)
-	const sampleDatabaseFileManager = new SampleDatabaseFileManager()
-	const webdavFileManager = new WebdavFileManager(settings)
+// File Managers
+const localChromePasswordFileManager = new LocalChromePasswordFileManager()
+const dropboxFileManager = new DropboxFileManager(settings)
+const googleDrivePasswordFileManager = new GoogleDrivePasswordFileManager(settings)
+const sharedUrlFileManager = new SharedUrlFileManager()
+const oneDriveFileManager = new OneDriveFileManager(settings)
+const pCloudFileManager = new PCloudFileManager(settings)
+const sampleDatabaseFileManager = new SampleDatabaseFileManager()
+const webdavFileManager = new WebdavFileManager(settings)
 
-	const passwordFileStoreRegistry = new PasswordFileStoreRegistry(
-		localChromePasswordFileManager,
-		dropboxFileManager,
-		googleDrivePasswordFileManager,
-		sharedUrlFileManager,
-		sampleDatabaseFileManager,
-		oneDriveFileManager,
-		pCloudFileManager,
-		webdavFileManager)
-	const keepassService = new KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keepassReference)
-	/* beautify preserve:end */
+const passwordFileStoreRegistry = new PasswordFileStoreRegistry(
+	localChromePasswordFileManager,
+	dropboxFileManager,
+	googleDrivePasswordFileManager,
+	sharedUrlFileManager,
+	sampleDatabaseFileManager,
+	oneDriveFileManager,
+	pCloudFileManager,
+	webdavFileManager)
+const keepassService = new KeepassService(keepassHeader, settings, passwordFileStoreRegistry, keepassReference)
+/* beautify preserve:end */
 
-	export default {
-		name: 'app',
-		components: {
-			Unlock,
-			Startup,
-			FilePicker,
-			EntryDetails,
-			SvgDefs
-		},
-		data() {
-			return {
-				services: {
-					/* The services exposed to UI components */
-					settings,
-					secureCache: secureCacheMemory,
-					passwordFileStoreRegistry,
-					keepassService,
-					links,
-					unlockedState: new UnlockedState(this.$router, keepassReference, protectedMemory, settings, notifications)
-				},
-				show: {
-					unlock: {
-						visible: false
-					},
-					startup: {
-						visible: false
-					},
-					filePicker: {
-						visible: false
-					},
-					entryDetails: {
-						visble: false
-					}
-				}
-			}
-		},
-		mounted: function() {
-			// Relies on the content of this.show
-			this.$router.registerRoutes([{
-					route: '/',
-					var: this.show.startup
+export default {
+	name: 'app',
+	components: {
+		Unlock,
+		Startup,
+		FilePicker,
+		EntryDetails,
+		SvgDefs
+	},
+	data() {
+		return {
+			services: {
+				/* The services exposed to UI components */
+				settings,
+				secureCache: secureCacheMemory,
+				passwordFileStoreRegistry,
+				keepassService,
+				links,
+				unlockedState: new UnlockedState(this.$router, keepassReference, protectedMemory, settings, notifications)
+			},
+			show: {
+				unlock: {
+					visible: false
 				},
-				{
-					route: '/choose',
-					var: this.show.filePicker
+				startup: {
+					visible: false
 				},
-				{
-					route: '/unlock/:provider/:title',
-					var: this.show.unlock
+				filePicker: {
+					visible: false
 				},
-				{
-					route: '/entry-details/:entryId',
-					var: this.show.entryDetails
+				entryDetails: {
+					visble: false
 				}
-			])
-			this.$router.route('/')
+			}
 		}
+	},
+	mounted: function () {
+		// Relies on the content of this.show
+		this.$router.registerRoutes([{
+			route: '/',
+			var: this.show.startup
+		},
+		{
+			route: '/choose',
+			var: this.show.filePicker
+		},
+		{
+			route: '/unlock/:provider/:title',
+			var: this.show.unlock
+		},
+		{
+			route: '/entry-details/:entryId',
+			var: this.show.entryDetails
+		}
+		])
+		this.$router.route('/')
 	}
+}
 </script>
 
 <style lang="scss">
-	@import "./styles/shared.scss";
-	#router-view {
-		width: 400px;
-		margin: 0px auto;
-		color: $text-color;
-		background-color: $background-color;
-	}
+@import "./styles/shared.scss";
+#router-view {
+  width: 400px;
+  margin: 0px auto;
+  color: $text-color;
+  background-color: $background-color;
+}
 
-	body {
-		margin: 0px;
-		width: 100%;
-	}
+body {
+  margin: 0px;
+  width: 100%;
+}
 </style>
diff --git a/src/components/AdvancedSettings.vue b/src/components/AdvancedSettings.vue
index c498efc0..074b6dea 100644
--- a/src/components/AdvancedSettings.vue
+++ b/src/components/AdvancedSettings.vue
@@ -1,149 +1,149 @@
 <script>
-	import JSONFormatter from 'json-formatter-js'
-	import { isFirefox } from '$lib/utils'
+import JSONFormatter from 'json-formatter-js'
+import { isFirefox } from '$lib/utils'
 
-	export default {
-		props: {
-			settings: Object,
-			secureCacheMemory: Object
-		},
-		data() {
-			return {
-				busy: false,
-				expireTime: 2,
-				hotkeyNavEnabled: false,
-				allOriginPermission: false,
-				allOriginPerms: {
-					origins: [
-						"https://*/*",
-						"http://*/*"
-					]
-				},
-				strictMatchEnabled: false,
-				notificationsEnabled: ['expiration'],
-				jsonState: [{
-						k: 'databaseUsages',                      // key
-						f: this.settings.getSetDatabaseUsages,    // getter
-						delete: {
-							f: this.settings.destroyLocalStorage, // remover
-							arg: 'databaseUsages',                // remover args
-							op: 'Delete'                          // remover button name
-						}
-					},
-					{
-						k: 'webdavServerList',
-						f: this.settings.getSetWebdavServerList,
-						delete: {
-							f: this.settings.destroyLocalStorage,
-							arg: 'webdavServerList',
-							op: 'Delete'
-						}
-					},
-					{
-						k: 'webdavDirectoryMap',
-						f: this.settings.getSetWebdavDirectoryMap,
-						delete: {
-							f: this.settings.destroyLocalStorage,
-							arg: 'webdavDirectoryMap',
-							op: 'Delete'
-						}
-					},
-					{
-						k: 'selectedDatabase',
-						f: this.settings.getCurrentDatabaseChoice,
-						delete: {
-							f: this.settings.destroyLocalStorage,
-							arg: 'selectedDatabase',
-							op: 'Delete'
-						}
-					},
-					{
-						k: 'keyFiles',
-						f: this.settings.getKeyFiles,
-						delete: {
-							f: this.settings.deleteAllKeyFiles,
-							arg: undefined,
-							op: 'Delete'
-						}
-					},
-					{
-						k: 'forgetTimes',
-						f: this.settings.getAllForgetTimes
-					},
-					{
-						k: 'sharedUrlList',
-						f: this.settings.getSharedUrlList,
-						delete: {
-							f: this.settings.destroyLocalStorage,
-							arg: 'sharedUrlList',
-							op: 'Delete'
-						}
-					},
+export default {
+	props: {
+		settings: Object,
+		secureCacheMemory: Object
+	},
+	data() {
+		return {
+			busy: false,
+			expireTime: 2,
+			hotkeyNavEnabled: false,
+			allOriginPermission: false,
+			allOriginPerms: {
+				origins: [
+					"https://*/*",
+					"http://*/*"
 				]
-			}
-		},
-		watch: {
-			expireTime(newval, oldval) {
-				this.settings.getSetClipboardExpireInterval(parseInt(newval))
 			},
-			hotkeyNavEnabled(newval, oldval) {
-				this.settings.getSetHotkeyNavEnabled(newval)
+			strictMatchEnabled: false,
+			notificationsEnabled: ['expiration'],
+			jsonState: [{
+				k: 'databaseUsages',                      // key
+				f: this.settings.getSetDatabaseUsages,    // getter
+				delete: {
+					f: this.settings.destroyLocalStorage, // remover
+					arg: 'databaseUsages',                // remover args
+					op: 'Delete'                          // remover button name
+				}
 			},
-			strictMatchEnabled(newval, oldval) {
-				this.settings.getSetStrictModeEnabled(newval)
+			{
+				k: 'webdavServerList',
+				f: this.settings.getSetWebdavServerList,
+				delete: {
+					f: this.settings.destroyLocalStorage,
+					arg: 'webdavServerList',
+					op: 'Delete'
+				}
 			},
-			notificationsEnabled(newval) {
-				this.settings.getSetNotificationsEnabled(newval)
-			}
-		},
-		methods: {
-			isFirefox: isFirefox,
-			toggleOriginPermissions(evt) {
-				// Negated because this function will call before the vue model update.
-				if (!this.allOriginPermission) {
-					chrome.permissions.request(this.allOriginPerms);
-				} else {
-					chrome.permissions.remove(this.allOriginPerms);
+			{
+				k: 'webdavDirectoryMap',
+				f: this.settings.getSetWebdavDirectoryMap,
+				delete: {
+					f: this.settings.destroyLocalStorage,
+					arg: 'webdavDirectoryMap',
+					op: 'Delete'
 				}
-				this.settings.getSetOriginPermissionEnabled(!this.allOriginPermission);
-				this.allOriginPermission = !this.allOriginPermission;
 			},
-			init() {
-				this.settings.getSetClipboardExpireInterval().then(val => {
-					this.expireTime = val
-				})
-				this.settings.getSetHotkeyNavEnabled().then(val => {
-					this.hotkeyNavEnabled = val
-				})
-				this.settings.getSetNotificationsEnabled().then(val => {
-					this.notificationsEnabled = val
-				})
-				this.settings.getSetStrictModeEnabled().then(val => {
-					this.strictMatchEnabled = val;
-				})
-				if (!isFirefox()) {
-					chrome.permissions.contains(this.allOriginPerms, granted => {
-						this.allOriginPermission = !!granted;
-					});
+			{
+				k: 'selectedDatabase',
+				f: this.settings.getCurrentDatabaseChoice,
+				delete: {
+					f: this.settings.destroyLocalStorage,
+					arg: 'selectedDatabase',
+					op: 'Delete'
 				}
-				this.jsonState.forEach(blob => {
-					blob.f().then(result => {
-						if (result && Object.keys(result).length) {
-							let formatter = new JSONFormatter(result)
-							let place = document.getElementById(blob.k)
-							while (place.firstChild) place.removeChild(place.firstChild);
-							place.appendChild(formatter.render())
-						} else {
-							document.getElementById(blob.k).parentNode.parentNode.remove();
-						}
-					});
-				});
+			},
+			{
+				k: 'keyFiles',
+				f: this.settings.getKeyFiles,
+				delete: {
+					f: this.settings.deleteAllKeyFiles,
+					arg: undefined,
+					op: 'Delete'
+				}
+			},
+			{
+				k: 'forgetTimes',
+				f: this.settings.getAllForgetTimes
+			},
+			{
+				k: 'sharedUrlList',
+				f: this.settings.getSharedUrlList,
+				delete: {
+					f: this.settings.destroyLocalStorage,
+					arg: 'sharedUrlList',
+					op: 'Delete'
+				}
+			},
+			]
+		}
+	},
+	watch: {
+		expireTime(newval, oldval) {
+			this.settings.getSetClipboardExpireInterval(parseInt(newval))
+		},
+		hotkeyNavEnabled(newval, oldval) {
+			this.settings.getSetHotkeyNavEnabled(newval)
+		},
+		strictMatchEnabled(newval, oldval) {
+			this.settings.getSetStrictModeEnabled(newval)
+		},
+		notificationsEnabled(newval) {
+			this.settings.getSetNotificationsEnabled(newval)
+		}
+	},
+	methods: {
+		isFirefox: isFirefox,
+		toggleOriginPermissions(evt) {
+			// Negated because this function will call before the vue model update.
+			if (!this.allOriginPermission) {
+				chrome.permissions.request(this.allOriginPerms);
+			} else {
+				chrome.permissions.remove(this.allOriginPerms);
 			}
+			this.settings.getSetOriginPermissionEnabled(!this.allOriginPermission);
+			this.allOriginPermission = !this.allOriginPermission;
 		},
-		mounted() {
-			this.init();
+		init() {
+			this.settings.getSetClipboardExpireInterval().then(val => {
+				this.expireTime = val
+			})
+			this.settings.getSetHotkeyNavEnabled().then(val => {
+				this.hotkeyNavEnabled = val
+			})
+			this.settings.getSetNotificationsEnabled().then(val => {
+				this.notificationsEnabled = val
+			})
+			this.settings.getSetStrictModeEnabled().then(val => {
+				this.strictMatchEnabled = val;
+			})
+			if (!isFirefox()) {
+				chrome.permissions.contains(this.allOriginPerms, granted => {
+					this.allOriginPermission = !!granted;
+				});
+			}
+			this.jsonState.forEach(blob => {
+				blob.f().then(result => {
+					if (result && Object.keys(result).length) {
+						let formatter = new JSONFormatter(result)
+						let place = document.getElementById(blob.k)
+						while (place.firstChild) place.removeChild(place.firstChild);
+						place.appendChild(formatter.render())
+					} else {
+						document.getElementById(blob.k).parentNode.parentNode.remove();
+					}
+				});
+			});
 		}
+	},
+	mounted() {
+		this.init();
 	}
+}
 </script>
 
 <template>
@@ -248,12 +248,12 @@
 </template>
 
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.json {
-		font-size: 12px;
-	}
+@import "../styles/settings.scss";
+.json {
+  font-size: 12px;
+}
 
-	h4 {
-		font-size: 24px;
-	}
+h4 {
+  font-size: 24px;
+}
 </style>
diff --git a/src/components/EntryDetails.vue b/src/components/EntryDetails.vue
index f9b68bb2..442fad85 100644
--- a/src/components/EntryDetails.vue
+++ b/src/components/EntryDetails.vue
@@ -1,3 +1,113 @@
+<script>
+const OTP = require('keeweb/app/scripts/util/otp.js')
+import { parseUrl } from '$lib/utils.js'
+import GoBack from '@/components/GoBack'
+
+export default {
+	components: {
+		GoBack
+	},
+	props: {
+		unlockedState: Object,
+		settings: Object,
+		links: Object
+	},
+	data() {
+		return {
+			attributes: [],
+			hiddenValue: '••••••••••••',
+			// OTP
+			otp: false,
+			otp_timeleft: 0,
+			otp_loop: undefined,
+			otp_value: "",
+			otp_width: 0
+		}
+	},
+	methods: {
+		exposeAttribute(attr) {
+			attr.value = this.unlockedState.getDecryptedAttribute(this.entry, attr.key)
+			attr.isHidden = false
+		},
+		hideAttribute(attr) {
+			attr.value = this.hiddenValue;
+			attr.isHidden = true
+		},
+		toggleAttribute(attr) {
+			if (attr.isHidden)
+				this.exposeAttribute(attr)
+			else
+				this.hideAttribute(attr)
+		},
+		setupOTP(url) {
+			let otpobj = OTP.parseUrl(url)
+			this.otp = true
+			let do_otp = () => {
+				otpobj.next((code, timeleft) => {
+					this.otp_value = code;
+					this.otp_timeleft = (timeleft / 1000) | 0;
+					this.otp_width = Math.floor(timeleft / 300) + "%"
+				})
+			}
+			this.otp_loop = setInterval(do_otp, 2000)
+			do_otp()
+		},
+		autofill(e) {
+			e.stopPropagation()
+			console.log("autofill")
+			this.unlockedState.autofill(this.entry);
+		},
+		copy(e) {
+			e.stopPropagation()
+			console.log("copy")
+			this.unlockedState.copyPassword(this.entry);
+		}
+	},
+	beforeDestroy() {
+		clearInterval(this.otp_loop)
+	},
+	mounted() {
+		let entryId = this.$router.getRoute().entryId
+		this.entry = this.unlockedState.cacheGet('allEntries').filter(entry => {
+			return entry.id == entryId
+		})[0]
+		this.attributes = this.entry.keys.map(key => {
+			// Should NOT be succeptible to XSS
+			let returnMap = {
+				key: key,
+				value: (this.entry[key] || "").replace(/\n/g, "<br>")
+			}
+			switch (key) {
+				case 'url':
+					let parsed = parseUrl(this.entry[key])
+					if (parsed !== null) {
+						returnMap['href'] = parsed.href
+					}
+					break;
+				case 'notes':
+					returnMap['value'] = this.entry[key]
+					break;
+			}
+			return returnMap;
+		})
+		for (var protectedKey in this.entry.protectedData) {
+			if (protectedKey === "otp") {
+				let url = this.unlockedState.getDecryptedAttribute(this.entry, protectedKey)
+				this.setupOTP(url)
+			} else {
+				this.attributes.push({
+					'key': protectedKey,
+					'value': this.hiddenValue,
+					'isHidden': true,
+					'protected': true,
+					'protectedAttr': this.entry.protectedData[protectedKey]
+				})
+			}
+		}
+	}
+}
+</script>
+
 <template>
 	<div>
 		<go-back :message="'back to entry list'"></go-back>
@@ -8,11 +118,11 @@
 				<br>
 				<span class="attribute-value">{{otp_value}}</span>
 				<div class="progress">
-			      <div class="determinate" v-bind:style="{ width: otp_width }"></div>
-			  </div>
+					<div class="determinate" v-bind:style="{ width: otp_width }"></div>
+				</div>
 			</div>
-			
-			<div class="attribute-box" v-for="attr in attributes"  v-if="attr.protected || attr.value">
+
+			<div class="attribute-box" v-for="attr in attributes" v-if="attr.protected || attr.value">
 				<span class="attribute-title">{{ attr.key }}</span>
 				<br>
 				<!-- notes -->
@@ -26,185 +136,73 @@
 				<!-- protected -->
 				<div v-else>
 					<span v-if="attr.key !== 'notes'" class="attribute-value protected" @click="toggleAttribute(attr)">
-						<i v-if="attr.protected && attr.isHidden" 
-							class="fa fa-eye-slash" aria-hidden="true"></i>
-						<i v-else-if="attr.protected && !attr.isHidden"
-							class="fa fa-eye" aria-hidden="true"></i>
+						<i v-if="attr.protected && attr.isHidden" class="fa fa-eye-slash" aria-hidden="true"></i>
+						<i v-else-if="attr.protected && !attr.isHidden" class="fa fa-eye" aria-hidden="true"></i>
 						{{ attr.value }}
 					</span>
 				</div>
 			</div>
-		
+
 		</div>
 		<div class="attribute-box button-box">
 			<div class="button-inner selectable" v-on:click="copy">
 				<span class="fa-stack copy">
-				<i class="fa fa-circle fa-stack-2x"></i>
-				<i class="fa fa-clipboard fa-stack-1x fa-inverse"></i>
+					<i class="fa fa-circle fa-stack-2x"></i>
+					<i class="fa fa-clipboard fa-stack-1x fa-inverse"></i>
 				</span> Copy to clipboard
-			</div> 
+			</div>
 			<div class="button-inner selectable" v-on:click="autofill">
 				<span class="fa-stack copy">
-				<i class="fa fa-circle fa-stack-2x"></i>
-				<i class="fa fa-magic fa-stack-1x fa-inverse"></i>
+					<i class="fa fa-circle fa-stack-2x"></i>
+					<i class="fa fa-magic fa-stack-1x fa-inverse"></i>
 				</span> Autofill
 			</div>
 		</div>
 	</div>
 </template>
 
-<script>
-	const OTP = require('keeweb/app/scripts/util/otp.js')
-	import { parseUrl } from '$lib/utils.js'
-	import GoBack from '@/components/GoBack'
-
-	export default {
-		components: {
-			GoBack
-		},
-		props: {
-			unlockedState: Object,
-			settings: Object,
-			links: Object
-		},
-		data() {
-			return {
-				attributes: [],
-				hiddenValue: '••••••••••••',
-				// OTP
-				otp: false,
-				otp_timeleft: 0,
-				otp_loop: undefined,
-				otp_value: "",
-				otp_width: 0
-			}
-		},
-		methods: {
-			exposeAttribute(attr) {
-				attr.value = this.unlockedState.getDecryptedAttribute(this.entry, attr.key)
-				attr.isHidden = false
-			},
-			hideAttribute(attr) {
-				attr.value = this.hiddenValue;
-				attr.isHidden = true
-			},
-			toggleAttribute(attr) {
-				if (attr.isHidden)
-					this.exposeAttribute(attr)
-				else
-					this.hideAttribute(attr)
-			},
-			setupOTP(url) {
-				let otpobj = OTP.parseUrl(url)
-				this.otp = true
-				let do_otp = () => {
-					otpobj.next((code, timeleft)=>{
-						this.otp_value = code;
-						this.otp_timeleft = (timeleft / 1000) | 0;
-						this.otp_width = Math.floor(timeleft / 300) + "%"
-					})
-				}
-				this.otp_loop = setInterval(do_otp, 2000)
-				do_otp()
-			},
-			autofill(e) {
-				e.stopPropagation()
-				console.log("autofill")
-				this.unlockedState.autofill(this.entry);
-			},
-			copy(e) {
-				e.stopPropagation()
-				console.log("copy")
-				this.unlockedState.copyPassword(this.entry);
-			}
-		},
-		beforeDestroy(){
-			clearInterval(this.otp_loop)
-		},
-		mounted() {
-			let entryId = this.$router.getRoute().entryId
-			this.entry = this.unlockedState.cacheGet('allEntries').filter(entry => {
-				return entry.id == entryId
-			})[0]
-			this.attributes = this.entry.keys.map(key => {
-				// Should NOT be succeptible to XSS
-				let returnMap = {
-					key: key,
-					value: (this.entry[key] || "").replace(/\n/g, "<br>")
-				}
-				switch (key) {
-					case 'url':
-						let parsed = parseUrl(this.entry[key])
-						if (parsed !== null){
-							returnMap['href'] = parsed.href
-						}
-						break;
-					case 'notes':
-						returnMap['value'] = this.entry[key]
-						break;
-				}
-				return returnMap;
-			})
-			for (var protectedKey in this.entry.protectedData) {
-				if (protectedKey === "otp") {
-					let url = this.unlockedState.getDecryptedAttribute(this.entry, protectedKey)
-					this.setupOTP(url)
-				} else {
-					this.attributes.push({
-						'key': protectedKey,
-						'value': this.hiddenValue,
-						'isHidden': true,
-						'protected': true,
-						'protectedAttr': this.entry.protectedData[protectedKey]
-					})
-				}
-			}
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.all-attributes {
-		max-height: 400px;
-		overflow-y: auto;
-	}
+@import "../styles/settings.scss";
+.all-attributes {
+  max-height: 400px;
+  overflow-y: auto;
+}
 
-	.attribute-box {
-		box-sizing: border-box;
-		padding: 8px $wall-padding;
-		font-size: 16px;
-		background-color: $light-background-color;
-	}
+.attribute-box {
+  box-sizing: border-box;
+  padding: 8px $wall-padding;
+  font-size: 16px;
+  background-color: $light-background-color;
+}
 
-	.attribute-title {
-		padding-bottom: 10px;
-		font-weight: 700;
-		font-size: 12px;
-	}
-	
-	.attribute-value {
-		font-family: "DejaVu Sans", Arial, sans-serif;
-		&.protected:hover {
-			outline: $light-gray solid 2px;
-			outline-offset: 1px;
-		}
-	}
+.attribute-title {
+  padding-bottom: 10px;
+  font-weight: 700;
+  font-size: 12px;
+}
 
-	.button-box {
-		font-size: 14px;
-		display: flex;
-		// justify-content: space-between;
-		box-sizing: border-box;
-		// min-width: 80px;
-		.button-inner {
-			flex: 0 0 50%;
-			&:hover span {
-				opacity: .8;
-			}
-		}
-		span {
-			opacity: .2;
-		}
-	}
+.attribute-value {
+  font-family: "DejaVu Sans", Arial, sans-serif;
+  &.protected:hover {
+    outline: $light-gray solid 2px;
+    outline-offset: 1px;
+  }
+}
+
+.button-box {
+  font-size: 14px;
+  display: flex;
+  // justify-content: space-between;
+  box-sizing: border-box;
+  // min-width: 80px;
+  .button-inner {
+    flex: 0 0 50%;
+    &:hover span {
+      opacity: 0.8;
+    }
+  }
+  span {
+    opacity: 0.2;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/EntryList.vue b/src/components/EntryList.vue
index c76a3cf7..6eccdfe5 100644
--- a/src/components/EntryList.vue
+++ b/src/components/EntryList.vue
@@ -1,68 +1,42 @@
-<template>
-	<div>
-		<div class="search">
-			<i class="fa fa-search"></i>
-			<input ref="searchbox" type='search' v-model="searchTerm" placeholder="search entire database..." />
-		</div>
-		<messenger :messages="allMessages"></messenger>
-		<div class="entries">
-			<div v-if="priorityEntries && searchTerm.length == 0">
-				<entry-list-item v-for="entry in priorityEntries"
-					:key="entry.id"
-					:entry="entry"
-					:unlocked-state="unlockedState">
-				</entry-list-item>
-			</div>
-			<div v-if="filteredEntries && searchTerm.length > 0">
-				<entry-list-item v-for="entry in filteredEntries"
-					:key="entry.id"
-					:entry="entry"
-					:unlocked-state="unlockedState">
-				</entry-list-item>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script>
-	import EntryListItem from '@/components/EntryListItem'
-	import Messenger from '@/components/Messenger'
+import EntryListItem from '@/components/EntryListItem'
+import Messenger from '@/components/Messenger'
 
-	export default {
-		props: {
-			settings: Object,
-			messages: Object,
-			unlockedState: Object
-		},
-		watch: {
-			searchTerm: function(val) {
-				this.unlockedState.cacheSet('searchFilter', val) // Causes cache refresh
-				if (val.length) {
-					this.filteredEntries = this.allEntries.filter(entry => {
-						let result = entry.filterKey.indexOf(val.toLocaleLowerCase())
-						return (result > -1)
-					})
-				}
-				// Regardless of result, reset the active entry.
-				this.setActive(0)
+export default {
+	props: {
+		settings: Object,
+		messages: Object,
+		unlockedState: Object
+	},
+	watch: {
+		searchTerm: function (val) {
+			this.unlockedState.cacheSet('searchFilter', val) // Causes cache refresh
+			if (val.length) {
+				this.filteredEntries = this.allEntries.filter(entry => {
+					let result = entry.filterKey.indexOf(val.toLocaleLowerCase())
+					return (result > -1)
+				})
 			}
-		},
-		components: {
-			EntryListItem,
-			Messenger
-		},
-		data() {
-			return {
-				searchTerm: "",
-				filteredEntries: this.unlockedState.cacheGet('allEntries'),
-				priorityEntries: this.unlockedState.cacheGet('priorityEntries'),
-				allEntries: this.unlockedState.cacheGet('allEntries'),
-				hotkeyNavEnabled: false,
-				allMessages: this.messages,
-				activeEntry: null,
-				activeEntryIndex: 0,
-				keyHandler: evt => {
-					switch (evt.keyCode){
+			// Regardless of result, reset the active entry.
+			this.setActive(0)
+		}
+	},
+	components: {
+		EntryListItem,
+		Messenger
+	},
+	data() {
+		return {
+			searchTerm: "",
+			filteredEntries: this.unlockedState.cacheGet('allEntries'),
+			priorityEntries: this.unlockedState.cacheGet('priorityEntries'),
+			allEntries: this.unlockedState.cacheGet('allEntries'),
+			hotkeyNavEnabled: false,
+			allMessages: this.messages,
+			activeEntry: null,
+			activeEntryIndex: 0,
+			keyHandler: evt => {
+				switch (evt.keyCode) {
 					case 67: // C
 					case 66: // B
 						if (evt.ctrlKey || evt.metaKey) {
@@ -75,8 +49,8 @@
 						break
 					case 9:  // TAB
 						const modifier = !evt.shiftKey ? 1 : -1;
-                        this.setActive(this.activeEntryIndex + modifier)
-                        evt.preventDefault()
+						this.setActive(this.activeEntryIndex + modifier)
+						evt.preventDefault()
 						break
 					case 40: // DOWN arrow
 						this.setActive(this.activeEntryIndex + 1)
@@ -90,112 +64,138 @@
 						if (this.activeEntry !== null)
 							this.unlockedState.autofill(this.activeEntry)
 						break
-					}
-				}
-			}
-		},
-		methods: {
-			collectFilters(data, collector) {
-				if (data === null || data === undefined)
-					return data
-				if (data.constructor == ArrayBuffer || data.constructor == Uint8Array)
-					return null
-				else if (typeof(data) === 'string')
-					collector.push(data.toLocaleLowerCase())
-				else if (data.constructor == Array)
-					for (var i = 0; i < data.length; i++)
-						this.collectFilters(data[i], collector)
-				else
-					for (var prop in data)
-						this.collectFilters(data[prop], collector)
-			},
-			createEntryFilters(entries) {
-				entries.forEach(entry => {
-					var filters = new Array()
-					this.collectFilters(entry, filters)
-					entry.filterKey = filters.join(" ")
-				})
-			},
-			setActive(index) {
-				if (!this.hotkeyNavEnabled) return;
-				// Unset the current active entry
-				if (this.activeEntry !== null){
-					this.$set(this.activeEntry, 'view_is_active', false)
 				}
-				let activeList;
-				if (this.filteredEntries.length > 0 && this.searchTerm.length > 0)
-					activeList = this.filteredEntries
-				else if (this.priorityEntries.length > 0)
-					activeList = this.priorityEntries
-				else // Neither list has entries
-					return
-				if (index < 0)
-					index = activeList.length + index
-				index = index % activeList.length
-				this.activeEntry = activeList[index]
-				this.$set(this.activeEntry, 'view_is_active', true)
-				this.activeEntryIndex = index
 			}
+		}
+	},
+	methods: {
+		collectFilters(data, collector) {
+			if (data === null || data === undefined)
+				return data
+			if (data.constructor == ArrayBuffer || data.constructor == Uint8Array)
+				return null
+			else if (typeof (data) === 'string')
+				collector.push(data.toLocaleLowerCase())
+			else if (data.constructor == Array)
+				for (var i = 0; i < data.length; i++)
+					this.collectFilters(data[i], collector)
+			else
+				for (var prop in data)
+					this.collectFilters(data[prop], collector)
 		},
-		mounted() {
-			// Autofocus searchbox
-			this.$nextTick(function() {
-				this.$refs.searchbox.focus();
-			})
-			this.createEntryFilters(this.allEntries);
-			// Restore the search term if needed
-			let st = this.unlockedState.cache.searchFilter
-			if (st !== undefined)
-				this.searchTerm = st
-			let um = this.unlockedState.cacheGet('unlockedMessages')
-			if (um !== undefined)
-				this.allMessages = um
-			this.settings.getSetHotkeyNavEnabled().then(enabled => {
-				this.hotkeyNavEnabled = enabled
-				if (enabled){
-					// Initialize the active entry
-					this.setActive(0)
-					// Listen for key events.
-					window.addEventListener("keydown", this.keyHandler)
-				}
+		createEntryFilters(entries) {
+			entries.forEach(entry => {
+				var filters = new Array()
+				this.collectFilters(entry, filters)
+				entry.filterKey = filters.join(" ")
 			})
 		},
-		beforeDestroy() {
-			window.removeEventListener("keydown", this.keyHandler)
+		setActive(index) {
+			if (!this.hotkeyNavEnabled) return;
+			// Unset the current active entry
+			if (this.activeEntry !== null) {
+				this.$set(this.activeEntry, 'view_is_active', false)
+			}
+			let activeList;
+			if (this.filteredEntries.length > 0 && this.searchTerm.length > 0)
+				activeList = this.filteredEntries
+			else if (this.priorityEntries.length > 0)
+				activeList = this.priorityEntries
+			else // Neither list has entries
+				return
+			if (index < 0)
+				index = activeList.length + index
+			index = index % activeList.length
+			this.activeEntry = activeList[index]
+			this.$set(this.activeEntry, 'view_is_active', true)
+			this.activeEntryIndex = index
 		}
+	},
+	mounted() {
+		// Autofocus searchbox
+		this.$nextTick(function () {
+			this.$refs.searchbox.focus();
+		})
+		this.createEntryFilters(this.allEntries);
+		// Restore the search term if needed
+		let st = this.unlockedState.cache.searchFilter
+		if (st !== undefined)
+			this.searchTerm = st
+		let um = this.unlockedState.cacheGet('unlockedMessages')
+		if (um !== undefined)
+			this.allMessages = um
+		this.settings.getSetHotkeyNavEnabled().then(enabled => {
+			this.hotkeyNavEnabled = enabled
+			if (enabled) {
+				// Initialize the active entry
+				this.setActive(0)
+				// Listen for key events.
+				window.addEventListener("keydown", this.keyHandler)
+			}
+		})
+	},
+	beforeDestroy() {
+		window.removeEventListener("keydown", this.keyHandler)
 	}
+}
 </script>
 
+<template>
+	<div>
+		<div class="search">
+			<i class="fa fa-search"></i>
+			<input ref="searchbox" type='search' v-model="searchTerm" placeholder="search entire database..." />
+		</div>
+		<messenger :messages="allMessages"></messenger>
+		<div class="entries">
+			<div v-if="priorityEntries && searchTerm.length == 0">
+				<entry-list-item v-for="entry in priorityEntries"
+					:key="entry.id"
+					:entry="entry"
+					:unlocked-state="unlockedState">
+				</entry-list-item>
+			</div>
+			<div v-if="filteredEntries && searchTerm.length > 0">
+				<entry-list-item v-for="entry in filteredEntries"
+					:key="entry.id"
+					:entry="entry"
+					:unlocked-state="unlockedState">
+				</entry-list-item>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.entries {
-		border-bottom: 2px solid $light-gray;
-		height: 350px;
-		overflow-y: auto;
-	}
+@import "../styles/settings.scss";
+.entries {
+  border-bottom: 2px solid $light-gray;
+  height: 350px;
+  overflow-y: auto;
+}
 
-	.search {
-		width: 100%;
-		padding: 8px $wall-padding;
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		border-bottom: 2px solid $light-gray;
-		input {
-			float: right;
-			width: 96%;
-			border: 0px;
-			padding: 0px;
-			padding-left: 10px;
-			font-size: 18px;
-			background-color: $background-color;
-		}
-		input:focus {
-			outline: none;
-		}
-		.fa {
-			width: 4%;
-			font-size: 15px;
-		}
-	}
+.search {
+  width: 100%;
+  padding: 8px $wall-padding;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid $light-gray;
+  input {
+    float: right;
+    width: 96%;
+    border: 0px;
+    padding: 0px;
+    padding-left: 10px;
+    font-size: 18px;
+    background-color: $background-color;
+  }
+  input:focus {
+    outline: none;
+  }
+  .fa {
+    width: 4%;
+    font-size: 15px;
+  }
+}
 </style>
diff --git a/src/components/EntryListItem.vue b/src/components/EntryListItem.vue
index 9c93c179..799a205c 100644
--- a/src/components/EntryListItem.vue
+++ b/src/components/EntryListItem.vue
@@ -1,11 +1,53 @@
+<script>
+import { parseUrl } from '$lib/utils.js'
+export default {
+	props: {
+		entry: Object,
+		unlockedState: Object
+	},
+	computed: {
+		header: function () {
+			if (this.entry.title.length > 0)
+				return this.entry.title
+			return this.entry.url
+		}
+	},
+	watch: {
+		// When the element becomes active, scroll it into view.
+		'entry.view_is_active': function (val) {
+			if (val)
+				this.$el.scrollIntoView({
+					block: "end",
+					inline: "nearest",
+					behavior: "smooth"				});
+		}
+	},
+	methods: {
+		details(e) {
+			this.$router.route("/entry-details/" + this.entry.id)
+		},
+		autofill(e) {
+			e.stopPropagation()
+			console.log("autofill")
+			this.unlockedState.autofill(this.entry);
+		},
+		copy(e) {
+			e.stopPropagation()
+			console.log("copy")
+			this.unlockedState.copyPassword(this.entry);
+		}
+	}
+}
+</script>
+
 <template>
 	<div class="entry-list-item selectable between flair" v-bind:class="{ active: entry.view_is_active }" v-on:click="details">
 		<div class="text-info" v-bind:class="{ strike: entry.is_expired }">
 			<span class="header">{{ header }}</span>
 			<br>
 			<span class="user">
-        {{ entry.userName || '&#60;empty&#62;' }}
-      </span>
+				{{ entry.userName || '&#60;empty&#62;' }}
+			</span>
 		</div>
 		<div class="buttons">
 			<span class="fa-stack copy" v-on:click="copy">
@@ -19,87 +61,45 @@
 		</div>
 	</div>
 </template>
-`
-<script>
-	import { parseUrl } from '$lib/utils.js'
-	export default {
-		props: {
-			entry: Object,
-			unlockedState: Object
-		},
-		computed: {
-			header: function() {
-				if (this.entry.title.length > 0)
-					return this.entry.title
-				return this.entry.url
-			}
-		},
-		watch: {
-			// When the element becomes active, scroll it into view.
-			'entry.view_is_active': function(val) {
-				if (val)
-					this.$el.scrollIntoView({
-						block: "end", 
-						inline: "nearest", 
-						behavior: "smooth"});
-			}
-		},
-		methods: {
-			details(e) {
-				this.$router.route("/entry-details/" + this.entry.id)
-			},
-			autofill(e) {
-				e.stopPropagation()
-				console.log("autofill")
-				this.unlockedState.autofill(this.entry);
-			},
-			copy(e) {
-				e.stopPropagation()
-				console.log("copy")
-				this.unlockedState.copyPassword(this.entry);
-			}
-		}
-	}
-</script>
 
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.entry-list-item {
-		transition: all .3s ease;
-		width: 100%;
-		padding: 10px $wall-padding;
-		box-sizing: border-box;
-		border-bottom: 1px solid $light-gray;
-		background-color: #FFF;
-		display: flex;
-		.header {
-			font-size: 16px;
-		}
-		.user {
-			font-size: 12px;
-		}
-		.buttons {
-			font-size: 18px;
-			display: flex;
-			justify-content: space-between;
-			box-sizing: border-box;
-			min-width: 80px;
-		}
-		.copy,
-		.autofill {
-			opacity: .2;
-		}
-		.copy:hover,
-		.autofill:hover {
-			opacity: .8;
-		}
-		&.active {
-			background-color: $highlighted;
-			padding-left: 20px;
-		}
-	}
+@import "../styles/settings.scss";
+.entry-list-item {
+  transition: all 0.3s ease;
+  width: 100%;
+  padding: 10px $wall-padding;
+  box-sizing: border-box;
+  border-bottom: 1px solid $light-gray;
+  background-color: #fff;
+  display: flex;
+  .header {
+    font-size: 16px;
+  }
+  .user {
+    font-size: 12px;
+  }
+  .buttons {
+    font-size: 18px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    min-width: 80px;
+  }
+  .copy,
+  .autofill {
+    opacity: 0.2;
+  }
+  .copy:hover,
+  .autofill:hover {
+    opacity: 0.8;
+  }
+  &.active {
+    background-color: $highlighted;
+    padding-left: 20px;
+  }
+}
 
-	.strike {
-		text-decoration: line-through;
-	}
+.strike {
+  text-decoration: line-through;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/FilePicker.vue b/src/components/FilePicker.vue
index 08e12486..690c6d25 100644
--- a/src/components/FilePicker.vue
+++ b/src/components/FilePicker.vue
@@ -1,73 +1,75 @@
+<script>
+import GoBack from '@/components/GoBack'
+
+export default {
+	props: {
+		passwordFileStoreRegistry: Object,
+		settings: Object,
+		links: Object
+	},
+	components: {
+		GoBack
+	},
+	data() {
+		return {
+			databases: []
+		}
+	},
+	methods: {
+		selectDatabase(i) {
+			if (i !== undefined) {
+				let database = this.databases[i]
+				let info = database.provider.getDatabaseChoiceData(database);
+				this.settings.saveCurrentDatabaseChoice(info, database.provider).then(nil => {
+					this.$router.route('/unlock/' + database.provider.key + '/' + encodeURIComponent(database.title))
+				})
+			} else {
+				// TODO
+			}
+		}
+	},
+	mounted() {
+		this.passwordFileStoreRegistry.listFileManagers('listDatabases').forEach(provider => {
+			provider.listDatabases().then(databases => {
+				if (databases && databases.length) {
+					databases.forEach(database => {
+						database.provider = provider
+					})
+					this.databases = this.databases.concat(databases)
+				}
+			}).catch(err => {
+				this.settings.handleProviderError(err, provider);
+				console.error("Error when trying to listDatabases")
+				console.error(err)
+			})
+		})
+	}
+}
+</script>
+
 <template>
 	<div>
 		<div v-for="(db, index) in databases" class="box-bar small selectable flair chooseFile" @click="selectDatabase(index)">
 			<span>
-        <svg class="icon" viewBox="0 0 1 1">
-          <use v-bind="{'xlink:href':'#'+db.provider.icon}"/>
-        </svg> {{ db.title }}
-      </span>
+				<svg class="icon" viewBox="0 0 1 1">
+					<use v-bind="{'xlink:href':'#'+db.provider.icon}" />
+				</svg> {{ db.title }}
+			</span>
 		</div>
 		<div class="box-bar small selectable flair chooseFile" @click="links.openOptionsDatabases">
-			<span><b>Manage Database Files</b></span>
+			<span>
+				<b>Manage Database Files</b>
+			</span>
 		</div>
 	</div>
 </template>
 
-<script>
-	import GoBack from '@/components/GoBack'
-
-	export default {
-		props: {
-			passwordFileStoreRegistry: Object,
-			settings: Object,
-			links: Object
-		},
-		components: {
-			GoBack
-		},
-		data() {
-			return {
-				databases: []
-			}
-		},
-		methods: {
-			selectDatabase(i) {
-				if (i !== undefined) {
-					let database = this.databases[i]
-					let info = database.provider.getDatabaseChoiceData(database);
-					this.settings.saveCurrentDatabaseChoice(info, database.provider).then(nil => {
-						this.$router.route('/unlock/' + database.provider.key + '/' + encodeURIComponent(database.title))
-					})
-				} else {
-					// TODO
-				}
-			}
-		},
-		mounted() {
-			this.passwordFileStoreRegistry.listFileManagers('listDatabases').forEach(provider => {
-				provider.listDatabases().then(databases => {
-					if (databases && databases.length) {
-						databases.forEach(database => {
-							database.provider = provider
-						})
-						this.databases = this.databases.concat(databases)
-					}
-				}).catch(err => {
-					this.settings.handleProviderError(err, provider);
-					console.error("Error when trying to listDatabases")
-					console.error(err)
-				})
-			})
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.chooseFile {
-		svg {
-			width: 18px;
-			vertical-align: middle;
-		}
-	}
+@import "../styles/settings.scss";
+.chooseFile {
+  svg {
+    width: 18px;
+    vertical-align: middle;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/GenericProviderUi.vue b/src/components/GenericProviderUi.vue
index 3fd02282..824dfcd3 100644
--- a/src/components/GenericProviderUi.vue
+++ b/src/components/GenericProviderUi.vue
@@ -1,41 +1,43 @@
+<script>
+export default {
+	props: {
+		providerManager: Object,
+		busy: Boolean,
+		databases: Array,
+		error: String,
+		loggedIn: Boolean,
+		toggleLogin: Function,
+		removeable: Boolean,
+		removeFunction: Function
+	}
+};
+</script>
+
 <template>
 	<div>
 		<div class="between">
 			<div class="title">
 				<span>
-					<svg class="icon" viewBox="0 0 1 1"><use v-bind="{'xlink:href':'#'+providerManager.icon}"></use></svg>
+					<svg class="icon" viewBox="0 0 1 1">
+						<use v-bind="{'xlink:href':'#'+providerManager.icon}"></use>
+					</svg>
 					{{ providerManager.chooseTitle }}
 				</span>
 				<span class="error pill" v-show="error.length">{{error}}</span>
 				<span v-for="(db, index) in databases" class="chip">
-	  			{{ db.title }}
-	  			<i v-if="removeable" class="fa fa-times-circle selectable" aria-hidden="true" @click="removeFunction(index)"></i>
-	  		</span>
+					{{ db.title }}
+					<i v-if="removeable" class="fa fa-times-circle selectable" aria-hidden="true" @click="removeFunction(index)"></i>
+				</span>
 			</div>
 			<div>
 				<div class="switch">
 					<label>
-			      <input :disabled="busy" type="checkbox" :checked="loggedIn" @click="toggleLogin">
-			      <span class="lever"></span>
-			    </label>
+						<input :disabled="busy" type="checkbox" :checked="loggedIn" @click="toggleLogin">
+						<span class="lever"></span>
+					</label>
 				</div>
 			</div>
 		</div>
 		<div class="description">{{ providerManager.chooseDescription }}</div>
 	</div>
-</template>
-
-<script>
-	export default {
-		props: {
-			providerManager: Object,
-			busy: Boolean,
-			databases: Array,
-			error: String,
-			loggedIn: Boolean,
-			toggleLogin: Function,
-			removeable: Boolean,
-			removeFunction: Function,
-		}
-	}
-</script>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/GoBack.vue b/src/components/GoBack.vue
index 43a9c2a0..b6d8116b 100644
--- a/src/components/GoBack.vue
+++ b/src/components/GoBack.vue
@@ -1,20 +1,20 @@
+<script>
+export default {
+	props: {
+		message: String
+	}
+}
+</script>
+
 <template>
 	<div class="box-bar selectable" v-on:click="$router.goBack">
 		<span>
-      <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
-      {{ message }}
-    </span>
+			<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
+			{{ message }}
+		</span>
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {
-			message: String
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/InfoCluster.vue b/src/components/InfoCluster.vue
index e763b12d..fb79cb75 100644
--- a/src/components/InfoCluster.vue
+++ b/src/components/InfoCluster.vue
@@ -1,3 +1,12 @@
+<script>
+export default {
+	props: {
+		messages: Object,
+		isUnlocked: Boolean
+	}
+}
+</script>
+
 <template>
 	<div>
 		<p>Page info</p>
@@ -6,19 +15,10 @@
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {
-			messages: Object,
-			isUnlocked: Boolean
-		}
-	}
-</script>
-
 <style lang="scss" scoped>
-	@import "../styles/settings.scss";
-	p {
-		width: 100%;
-		margin: 10px 0px 0px 0px;
-	}
+@import "../styles/settings.scss";
+p {
+  width: 100%;
+  margin: 10px 0px 0px 0px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/LocalPasswordFileProvider.vue b/src/components/LocalPasswordFileProvider.vue
index b5ba5b05..49b69def 100644
--- a/src/components/LocalPasswordFileProvider.vue
+++ b/src/components/LocalPasswordFileProvider.vue
@@ -4,128 +4,121 @@
 -->
 
 <script>
-	const Base64 = require('base64-arraybuffer')
-	import GenericProviderUi from '@/components/GenericProviderUi'
+const Base64 = require('base64-arraybuffer')
+import GenericProviderUi from '@/components/GenericProviderUi'
 
-	export default {
-		data() {
-			return {
-				busy: false,
-				currentUrl: "",
-				currentUrlTitle: "",
-				databases: [],
-				loggedIn: false,
-				messages: {
-					error: ""
-				}
+export default {
+	data() {
+		return {
+			busy: false,
+			currentUrl: "",
+			currentUrlTitle: "",
+			databases: [],
+			loggedIn: false,
+			messages: {
+				error: ""
+			}
+		}
+	},
+	components: {
+		GenericProviderUi
+	},
+	props: {
+		providerManager: Object,
+		settings: Object
+	},
+	methods: {
+		toggleLogin(e) {
+			if (this.loggedIn) {
+				this.settings.disableDatabaseProvider(this.providerManager)
+				this.providerManager.logout().then(() => {
+					this.loggedIn = false
+				})
+			} else {
+				this.providerManager.login().then(() => {
+					this.loggedIn = true
+				})
+				e.preventDefault()
 			}
 		},
-		components: {
-			GenericProviderUi
+		selectFile(event) {
+			document.getElementById('file-selector').click();
 		},
-		props: {
-			providerManager: Object,
-			settings: Object
+		removePasswordFile(index) {
+			if (index >= this.databases.length || index < 0)
+				return // not a valid index...
+			let fi = this.databases[index]
+			this.providerManager.deleteDatabase(fi)
+				.then(this.providerManager.listDatabases)
+				.then(files => {
+					this.databases = files
+				})
 		},
-		methods: {
-			toggleLogin(e) {
-				if (this.loggedIn) {
-					this.settings.disableDatabaseProvider(this.providerManager)
-					this.providerManager.logout().then(() => {
-						this.loggedIn = false
-					})
-				} else {
-					this.providerManager.login().then(() => {
-						this.loggedIn = true
-					})
-					e.preventDefault()
-				}
-			},
-			selectFile(event) {
-				document.getElementById('file-selector').click();
-			},
-			removePasswordFile(index) {
-				if (index >= this.databases.length || index < 0)
-					return // not a valid index...
-				let fi = this.databases[index]
-				this.providerManager.deleteDatabase(fi)
-					.then(this.providerManager.listDatabases)
-					.then(files => {
-						this.databases = files
-					})
-			},
-			handleAdd(event) {
-				let files = event.target.files;
-				this.messages.error = ""
-				for (var i = 0; i < files.length; i++) {
-					let reader = new FileReader()
-					let fp = files[i]
-					reader.readAsArrayBuffer(fp)
-					reader.onload = (e) => {
-						if (fp.name.indexOf('.kdbx') < 0 || fp.size < 70) {
-							this.messages.error += fp.name + " is not a valid KeePass v2+ file. "
-							return;
-						}
+		handleAdd(event) {
+			let files = event.target.files;
+			this.messages.error = ""
+			for (var i = 0; i < files.length; i++) {
+				let reader = new FileReader()
+				let fp = files[i]
+				reader.readAsArrayBuffer(fp)
+				reader.onload = (e) => {
+					if (fp.name.indexOf('.kdbx') < 0 || fp.size < 70) {
+						this.messages.error += fp.name + " is not a valid KeePass v2+ file. "
+						return;
+					}
 
-						var fi = {
-							title: fp.name,
-							lastModified: fp.lastModified,
-							lastModifiedDate: fp.lastModifiedDate,
-							size: fp.size,
-							type: fp.type,
-							data: Base64.encode(e.target.result)
-						}
+					var fi = {
+						title: fp.name,
+						lastModified: fp.lastModified,
+						lastModifiedDate: fp.lastModifiedDate,
+						size: fp.size,
+						type: fp.type,
+						data: Base64.encode(e.target.result)
+					}
 
-						var existingIndex = null;
-						this.databases.forEach(function(existingFile, index) {
-							if (existingFile.title == fi.title) 
-								existingIndex = index;
-						});
+					var existingIndex = null;
+					this.databases.forEach(function (existingFile, index) {
+						if (existingFile.title == fi.title)
+							existingIndex = index;
+					});
 
-						if (existingIndex == null) {
-							//add
-							this.databases.push(fi);
-						} else {
-							//replace
-							this.databases[existingIndex] = fi;
-						}
+					if (existingIndex == null) {
+						//add
+						this.databases.push(fi);
+					} else {
+						//replace
+						this.databases[existingIndex] = fi;
+					}
 
-						return this.providerManager.saveDatabase({
-							title: fi.title,
-							data: fi.data,
-							lastModified: fi.lastModified
-						})
-					} // end onload
-				}
+					return this.providerManager.saveDatabase({
+						title: fi.title,
+						data: fi.data,
+						lastModified: fi.lastModified
+					})
+				} // end onload
 			}
-		},
-		mounted() {
-			this.providerManager.isLoggedIn().then(loggedIn => {
-				this.loggedIn = loggedIn
-			})
-			this.providerManager.listDatabases().then(databases => {
-				if (databases !== false)
-					this.databases = databases
-			})
 		}
+	},
+	mounted() {
+		this.providerManager.isLoggedIn().then(loggedIn => {
+			this.loggedIn = loggedIn
+		})
+		this.providerManager.listDatabases().then(databases => {
+			if (databases !== false)
+				this.databases = databases
+		})
 	}
+}
 </script>
 
 <template>
 	<div class="box-bar roomy database-manager">
-		<generic-provider-ui 
-			:busy="busy" 
-			:databases="databases" 
-			:loggedIn="loggedIn" 
-			:error="messages.error" 
-			:provider-manager="providerManager" 
-			:toggle-login="toggleLogin" 
-			:removeable="true" 
-			:remove-function="removePasswordFile"></generic-provider-ui>
+		<generic-provider-ui :busy="busy" :databases="databases" :loggedIn="loggedIn" :error="messages.error" :provider-manager="providerManager" :toggle-login="toggleLogin" :removeable="true" :remove-function="removePasswordFile"></generic-provider-ui>
 		<div v-if="loggedIn">
 			<div class="warn pill">
 				<p>
-					Tusk <b>cannot</b> keep your local database file up to date.
+					Tusk
+					<b>cannot</b> keep your local database file up to date.
 					<b>If you change it, you'll have to import it into Tusk again.</b>
 				</p>
 			</div>
@@ -138,5 +131,5 @@
 </template>
 
 <style lang="scss" scoped>
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/ManageDatabases.vue b/src/components/ManageDatabases.vue
index 5e549924..590a838e 100644
--- a/src/components/ManageDatabases.vue
+++ b/src/components/ManageDatabases.vue
@@ -1,14 +1,81 @@
+<script>
+import OauthProvider from '@/components/OauthProvider'
+import SharedLinkProvider from '@/components/SharedLinkProvider'
+import LocalPasswordFileProvider from '@/components/LocalPasswordFileProvider'
+import WebdavProvider from '@/components/WebdavProvider'
+import VirtualRouter from '$lib/virtual-router.js'
+
+export default {
+	props: {
+		dropboxFileManager: Object,
+		googleDriveManager: Object,
+		localFileManager: Object,
+		onedriveManager: Object,
+		pCloudFileManager: Object,
+		sampleManager: Object,
+		webdavManager: Object,
+		sharedUrlManager: Object,
+		settings: Object,
+	},
+	components: {
+		OauthProvider,
+		SharedLinkProvider,
+		LocalPasswordFileProvider,
+		WebdavProvider
+	},
+	data() {
+		return {
+			show: {
+				help: {
+					visible: false
+				},
+				newUser: {
+					visible: false
+				},
+				none: {
+					visible: true
+				}
+			},
+			tabRouter: new VirtualRouter()
+		}
+	},
+	mounted() {
+		this.tabRouter.registerRoutes([{
+			route: '/help/me/choose',
+			var: this.show.help
+		},
+		{
+			route: '/new/user',
+			var: this.show.newUser
+		},
+		{
+			route: '/',
+			var: this.show.none
+		} // Use this to hide others, since no id=none element exists.
+		])
+	}
+}
+</script>
+
 <template>
 	<div>
 		<div class="box-bar about roomy">
-			<p>Tusk <b>requires</b> that you enable at least one of these cloud storage providers to sync your keepass database with. Once the files appear below, they will be available to unlock within the popup window.</p>
+			<p>Tusk
+				<b>requires</b> that you enable at least one of these cloud storage providers to sync your keepass database with. Once the files appear below, they will be available to unlock within the popup window.</p>
 
 			<a class="waves-effect waves-light btn" @click="tabRouter.route('/help/me/choose')">Help me choose</a>
 			<a class="waves-effect waves-light btn" @click="tabRouter.route('/new/user')">I haven't made a keepass database yet.</a>
 
-			<p id="/help/me/choose" v-show="show.help.visible">If you're unsure which to pick, the developers recommend <b>Dropbox</b>. It is easy to use and widely supported by other Keepass apps, such as <a href="https://play.google.com/store/apps/details?id=keepass2android.keepass2android&hl=en">Keepass2Android</a> for iOS or <a href="https://itunes.apple.com/us/app/keepass-touch/id966759076?mt=8">KeepassTouch</a>. Simply create a Dropbox account, upload your keepass database, and enable the dropbox provider below.</p>
+			<p id="/help/me/choose" v-show="show.help.visible">If you're unsure which to pick, the developers recommend
+				<b>Dropbox</b>. It is easy to use and widely supported by other Keepass apps, such as
+				<a href="https://play.google.com/store/apps/details?id=keepass2android.keepass2android&hl=en">Keepass2Android</a> for iOS or
+				<a href="https://itunes.apple.com/us/app/keepass-touch/id966759076?mt=8">KeepassTouch</a>. Simply create a Dropbox account, upload your keepass database, and enable the dropbox provider below.</p>
 
-			<p id="/new/user" v-show="show.newUser.visible">If you've never used keepass before, you will need to create a new keepass database before enabling the providers below. You can do this by downloading a desktop keepass application like <a href="https://keepassxc.org/">KeePassXC</a> or generate one quickly in your browser with <a href="https://app.keeweb.info/">KeeWeb</a>. Store the keepass database file in a cloud provider like <a href="https://dropbox.com">Dropbox</a> or <a href="http://drive.google.com">Google Drive</a> and come back here when you're done.</p>
+			<p id="/new/user" v-show="show.newUser.visible">If you've never used keepass before, you will need to create a new keepass database before enabling the providers below. You can do this by downloading a desktop keepass application like
+				<a href="https://keepassxc.org/">KeePassXC</a> or generate one quickly in your browser with
+				<a href="https://app.keeweb.info/">KeeWeb</a>. Store the keepass database file in a cloud provider like
+				<a href="https://dropbox.com">Dropbox</a> or
+				<a href="http://drive.google.com">Google Drive</a> and come back here when you're done.</p>
 		</div>
 		<oauth-provider :provider-manager="dropboxFileManager" :settings="settings"></oauth-provider>
 		<oauth-provider :provider-manager="googleDriveManager" :settings="settings"></oauth-provider>
@@ -21,65 +88,6 @@
 	</div>
 </template>
 
-<script>
-	import OauthProvider from '@/components/OauthProvider'
-	import SharedLinkProvider from '@/components/SharedLinkProvider'
-	import LocalPasswordFileProvider from '@/components/LocalPasswordFileProvider'
-	import WebdavProvider from '@/components/WebdavProvider'
-	import VirtualRouter from '$lib/virtual-router.js'
-
-	export default {
-		props: {
-			dropboxFileManager: Object,
-			googleDriveManager: Object,
-			localFileManager: Object,
-			onedriveManager: Object,
-			pCloudFileManager: Object,
-			sampleManager: Object,
-			webdavManager: Object,
-			sharedUrlManager: Object,
-			settings: Object,
-		},
-		components: {
-			OauthProvider,
-			SharedLinkProvider,
-			LocalPasswordFileProvider,
-			WebdavProvider
-		},
-		data() {
-			return {
-				show: {
-					help: {
-						visible: false
-					},
-					newUser: {
-						visible: false
-					},
-					none: {
-						visible: true
-					}
-				},
-				tabRouter: new VirtualRouter()
-			}
-		},
-		mounted() {
-			this.tabRouter.registerRoutes([{
-					route: '/help/me/choose',
-					var: this.show.help
-				},
-				{
-					route: '/new/user',
-					var: this.show.newUser
-				},
-				{
-					route: '/',
-					var: this.show.none
-				} // Use this to hide others, since no id=none element exists.
-			])
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 </style>
diff --git a/src/components/ManageKeyfiles.vue b/src/components/ManageKeyfiles.vue
index c703db1b..5a26eb94 100644
--- a/src/components/ManageKeyfiles.vue
+++ b/src/components/ManageKeyfiles.vue
@@ -1,86 +1,89 @@
-<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>
-				<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>
-		</div>
-	</div>
-</template>
-
 <script>
-	export default {
-		props: {
-			settings: Object,
-			keyFileParser: Object
+export default {
+	props: {
+		settings: Object,
+		keyFileParser: Object
+	},
+	data() {
+		return {
+			keyFiles: [],
+			errorMessage: ""
+		}
+	},
+	methods: {
+		loadKeyFiles() {
+			this.settings.getKeyFiles().then(keyFiles => {
+				this.keyFiles = keyFiles;
+			})
 		},
-		data() {
-			return {
-				keyFiles: [],
-				errorMessage: ""
+		removeKeyFile(index) {
+			if (index >= 0 && index < this.keyFiles.length) {
+				let kf = this.keyFiles[index]
+				this.settings.deleteKeyFile(kf.name).then(nil => {
+					this.loadKeyFiles();
+				})
 			}
 		},
-		methods: {
-			loadKeyFiles() {
-				this.settings.getKeyFiles().then(keyFiles => {
-					this.keyFiles = keyFiles;
-				})
-			},
-			removeKeyFile(index) {
-				if (index >= 0 && index < this.keyFiles.length) {
-					let kf = this.keyFiles[index]
-					this.settings.deleteKeyFile(kf.name).then(nil => {
-						this.loadKeyFiles();
+		selectFileInput() {
+			document.getElementById('file').click();
+		},
+		handleAdd(event) {
+			let files = event.target.files;
+			this.errorMessage = ""
+			for (var i = 0; i < files.length; i++) {
+				let reader = new FileReader()
+				let fp = files[i]
+				reader.onload = (e) => {
+					this.keyFileParser.getKeyFromFile(e.target.result).then(key => {
+						this.settings.addKeyFile(fp.name, key)
+							.then(this.loadKeyFiles)
+					}).catch(err => {
+						this.errorMessage = err.message;
 					})
-				}
-			},
-			selectFileInput() {
-				document.getElementById('file').click();
-			},
-			handleAdd(event) {
-				let files = event.target.files;
-				this.errorMessage = ""
-				for (var i = 0; i < files.length; i++) {
-					let reader = new FileReader()
-					let fp = files[i]
-					reader.onload = (e) => {
-						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)
-				}
+				};
+				reader.readAsArrayBuffer(fp)
 			}
-		},
-		mounted() {
-			this.loadKeyFiles()
 		}
+	},
+	mounted() {
+		this.loadKeyFiles()
 	}
+}
 </script>
 
+<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>
+			<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>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
-	@import "../styles/settings.scss";
-	#key-file-manager {
-		span {
-			font-weight: 500;
-		}
-	}
+@import "../styles/settings.scss";
+#key-file-manager {
+  span {
+    font-weight: 500;
+  }
+}
 </style>
diff --git a/src/components/Messenger.vue b/src/components/Messenger.vue
index 04f527fc..15157c1b 100644
--- a/src/components/Messenger.vue
+++ b/src/components/Messenger.vue
@@ -3,24 +3,30 @@
 
   Displays given messages for warning, error, and success
  -->
+<script>
+export default {
+	props: {
+		messages: Object
+	}
+}
+</script>
+
 <template>
 	<div class="messenger">
 		<div class="box-bar small warn" v-show="messages.warn">
-			<span><i class="fa fa-exclamation-triangle fa-fw dashicon" aria-hidden="true"></i> {{ messages.warn }}</span></div>
+			<span>
+				<i class="fa fa-exclamation-triangle fa-fw dashicon" aria-hidden="true"></i> {{ messages.warn }}</span>
+		</div>
 		<div class="box-bar small error" v-show="messages.error">
-			<span><i class="fa fa-times-circle fa-fw" aria-hidden="true"></i> {{ messages.error }}</span></div>
+			<span>
+				<i class="fa fa-times-circle fa-fw" aria-hidden="true"></i> {{ messages.error }}</span>
+		</div>
 		<div class="box-bar small success" v-show="messages.success">
-			<span><i class="fa fa-check fa-fw" aria-hidden="true"></i> {{ messages.success }}</span></div>
+			<span>
+				<i class="fa fa-check fa-fw" aria-hidden="true"></i> {{ messages.success }}</span>
+		</div>
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {
-			messages: Object
-		}
-	}
-</script>
-
 <style lang="scss">
 </style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c8fc3213..2670b1ee 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,6 +3,15 @@
   requires a lib/VirtualRouter, and the routes object used to initialize the virtualrouter.
   Active tab changes automatically based on visible route.
 -->
+<script>
+export default {
+	props: {
+		routes: Array,
+		initialTab: String
+	}
+}
+</script>
+
 <template>
 	<nav class="nav-extended">
 		<div class="nav-content">
@@ -16,27 +25,18 @@
 	</nav>
 </template>
 
-<script>
-	export default {
-		props: {
-			routes: Array,
-			initialTab: String
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	nav {
-		position: fixed;
-		top: 0px;
-		z-index: 100;
-		.nav-content {
-			width: $options-width;
-			margin: 0px auto;
-			li.active {
-				border-bottom: 3px solid $background-color;
-			}
-		}
-	}
+@import "../styles/settings.scss";
+nav {
+  position: fixed;
+  top: 0px;
+  z-index: 100;
+  .nav-content {
+    width: $options-width;
+    margin: 0px auto;
+    li.active {
+      border-bottom: 3px solid $background-color;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/OauthProvider.vue b/src/components/OauthProvider.vue
index 098383a0..b94eef32 100644
--- a/src/components/OauthProvider.vue
+++ b/src/components/OauthProvider.vue
@@ -9,84 +9,84 @@
 		 */
 	If new providers are added, prefer that they are oauth providers.
 -->
-<template>
-	<div class="box-bar roomy database-manager">
-		<generic-provider-ui :busy="busy" :databases="databases" :loggedIn="loggedIn" :error="messages.error" :provider-manager="providerManager" :toggle-login="toggleLogin" :removeable="false" :remove-function="undefined"></generic-provider-ui>
-	</div>
-</template>
-
 <script>
-	import GenericProviderUi from '@/components/GenericProviderUi'
+import GenericProviderUi from '@/components/GenericProviderUi'
 
-	export default {
-		data() {
-			return {
-				busy: false,
-				databases: [],
-				loggedIn: false,
-				messages: {
-					error: ""
-				}
+export default {
+	data() {
+		return {
+			busy: false,
+			databases: [],
+			loggedIn: false,
+			messages: {
+				error: ""
 			}
-		},
-		components: {
-			GenericProviderUi
-		},
-		props: {
-			providerManager: Object,
-			settings: Object
-		},
-		methods: {
-			populate() {
-				// TODO: deal with the race condition here....
-				this.busy = true
-				this.messages.error = ""
-				this.providerManager.listDatabases().then(databases => {
-					this.databases = databases
-					this.providerManager.isLoggedIn().then(loggedIn => {
-						this.loggedIn = loggedIn
-						this.busy = false
-					})
-				}).catch(err => {
-					console.error("Error while connecting to database backend for", this.providerManager.title)
-					this.messages.error = err.toString()
-					this.databases = []
-					console.error(err)
+		}
+	},
+	components: {
+		GenericProviderUi
+	},
+	props: {
+		providerManager: Object,
+		settings: Object
+	},
+	methods: {
+		populate() {
+			// TODO: deal with the race condition here....
+			this.busy = true
+			this.messages.error = ""
+			this.providerManager.listDatabases().then(databases => {
+				this.databases = databases
+				this.providerManager.isLoggedIn().then(loggedIn => {
+					this.loggedIn = loggedIn
 					this.busy = false
 				})
-			},
-			toggleLogin(event) {
-				//v-bind:id="'toggleButton'+providerManager.key"j
-				if (!this.busy) {
-					if (this.loggedIn) {
-						this.providerManager.logout().then(nil => {
-							// if logout works, attempt to unset the currentDatabaseChoice.
-							this.settings.disableDatabaseProvider(this.providerManager)
-							this.populate()
-						}).catch(err => {
-							this.settings.disableDatabaseProvider(this.providerManager)
-							this.messages.error = err.toString()
-						})
-					} else {
-						this.providerManager.login().then(nil => {
-							this.populate()
-						}).catch(err => {
-							this.loggedIn = false
-							this.messages.error = err.toString()
-						})
-					}
+			}).catch(err => {
+				console.error("Error while connecting to database backend for", this.providerManager.title)
+				this.messages.error = err.toString()
+				this.databases = []
+				console.error(err)
+				this.busy = false
+			})
+		},
+		toggleLogin(event) {
+			//v-bind:id="'toggleButton'+providerManager.key"j
+			if (!this.busy) {
+				if (this.loggedIn) {
+					this.providerManager.logout().then(nil => {
+						// if logout works, attempt to unset the currentDatabaseChoice.
+						this.settings.disableDatabaseProvider(this.providerManager)
+						this.populate()
+					}).catch(err => {
+						this.settings.disableDatabaseProvider(this.providerManager)
+						this.messages.error = err.toString()
+					})
 				} else {
-					// wait for state to settle...
-					console.error("Wait for toggle state to settle before changing enable/disable")
+					this.providerManager.login().then(nil => {
+						this.populate()
+					}).catch(err => {
+						this.loggedIn = false
+						this.messages.error = err.toString()
+					})
 				}
+			} else {
+				// wait for state to settle...
+				console.error("Wait for toggle state to settle before changing enable/disable")
 			}
-		},
-		mounted() {
-			this.populate()
 		}
+	},
+	mounted() {
+		this.populate()
 	}
+}
 </script>
 
+<template>
+	<div class="box-bar roomy database-manager">
+		<generic-provider-ui :busy="busy" :databases="databases" :loggedIn="loggedIn" :error="messages.error" :provider-manager="providerManager" :toggle-login="toggleLogin" :removeable="false" :remove-function="undefined"></generic-provider-ui>
+	</div>
+</template>
+
 <style lang="scss">
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/OptionsStartup.vue b/src/components/OptionsStartup.vue
index fa1c44a7..7f92461b 100644
--- a/src/components/OptionsStartup.vue
+++ b/src/components/OptionsStartup.vue
@@ -1,6 +1,11 @@
+<script>
+export default {
+	props: {}
+}
+</script>
+
 <template>
 	<div>
-
 		<div class="box-bar roomy">
 
 			<div class="unlockLogo stack-item optionsheader">
@@ -8,8 +13,7 @@
 				<span>Getting Started with Tusk</span>
 			</div>
 
-			<p>Tusk helps you keep track of all your accounts by storing your passwords in an encrypted file called a Keepass Database. You choose where this file is stored - most people keep them in a cloud storage provider like Dropbox or Google Drive for easy access
-				and syncing between laptops, desktops, and phones. To use Tusk, you should first enable one of the storage providers below.</p>
+			<p>Tusk helps you keep track of all your accounts by storing your passwords in an encrypted file called a Keepass Database. You choose where this file is stored - most people keep them in a cloud storage provider like Dropbox or Google Drive for easy access and syncing between laptops, desktops, and phones. To use Tusk, you should first enable one of the storage providers below.</p>
 
 			<a @click="$router.route('/manage/databases')" class="waves-effect waves-light btn">1. Cloud Storage Setup</a>
 
@@ -21,24 +25,21 @@
 
 			<p>If you are a new Keepass user, you will be prompted to create a new database from the popup window after you enable a cloud storage provider. Most people keep all their passwords in a single database, so you will only need to do this once.</p>
 		</div>
-
+		
 		<div class="box-bar roomy lighter">
 			<h4>Support Tusk</h4>
-			<p>If you like Tusk, please consider <a href="https://chrome.google.com/webstore/detail/keepass-tusk-a-better-pas/fmhmiaejopepamlcjkncpgpdjichnecm">leaving a review on the google web store</a> or <a href="https://addons.mozilla.org/en-US/firefox/addon/keepass-tusk/">firefox addon store</a>.  If you find a problem or are dissatisfied, please instead open an issue on the <a href="https://github.com/suBDavis/Tusk/issues">issue tracker</a> so we can make Tusk better.</p>
+			<p>If you like Tusk, please consider
+				<a href="https://chrome.google.com/webstore/detail/keepass-tusk-a-better-pas/fmhmiaejopepamlcjkncpgpdjichnecm">leaving a review on the google web store</a> or
+				<a href="https://addons.mozilla.org/en-US/firefox/addon/keepass-tusk/">firefox addon store</a>. If you find a problem or are dissatisfied, please instead open an issue on the
+				<a href="https://github.com/suBDavis/Tusk/issues">issue tracker</a> so we can make Tusk better.</p>
 		</div>
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.optionsheader {
-		text-align: left;
-		font-size: 28px;
-	}
+@import "../styles/settings.scss";
+.optionsheader {
+  text-align: left;
+  font-size: 28px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Reauthorize.vue b/src/components/Reauthorize.vue
index c503671f..e41f2553 100644
--- a/src/components/Reauthorize.vue
+++ b/src/components/Reauthorize.vue
@@ -1,68 +1,69 @@
+<script>
+export default {
+	props: {
+		settings: Object,
+		providers: Array
+	},
+	data() {
+		return {
+			provider: {},
+			done: false,
+			fail: false
+		}
+	},
+	methods: {
+		launchAuth() {
+			this.provider.login().then(nil => {
+				this.done = true
+			}).catch(err => {
+				this.fail = true
+			})
+		}
+	},
+	mounted() {
+		let provider_key = this.$router.getRoute().provider;
+		this.providers.forEach(p => {
+			if (p.key === provider_key)
+				this.provider = p
+		})
+	}
+}
+</script>
+
 <template>
 	<div>
 
 		<div class="box-bar roomy">
 			<h4>Reauthorize {{ provider.title }}</h4>
-			<p>The authorization token for {{ provider.title }} has expired and Tusk was unable to refresh it.  Please reauthorize below to continue to use Tusk with your database from {{ provider.title }}.</p>
+			<p>The authorization token for {{ provider.title }} has expired and Tusk was unable to refresh it. Please reauthorize below to continue to use Tusk with your database from {{ provider.title }}.</p>
 		</div>
 		<div class="box-bar roomy lighter">
 			<a @click="launchAuth" class="waves-effect waves-light btn">Authorize {{ provider.title }}</a>
-		</div>	
+		</div>
 		<div class="box-bar roomy plain" v-if="done">
 			<h4>
 				<i class="fa fa-check" aria-hidden="true"></i> Success
 			</h4>
-			<p>You can <b>close this page</b> and continue to use Tusk by clicking on the popup icon.</p>
+			<p>You can
+				<b>close this page</b> and continue to use Tusk by clicking on the popup icon.</p>
 		</div>
 		<div class="box-bar roomy plain" v-if="fail && !done">
 			<h4>
 				<i class="fa fa-times" aria-hidden="true"></i> Error
 			</h4>
-			<p>It looks like something went wrong during the re-authorization process.  Please try again.</p>
+			<p>It looks like something went wrong during the re-authorization process. Please try again.</p>
 		</div>
 
 	</div>
 </template>
 
-<script>
-	export default {
-		props: {
-			settings: Object,
-			providers: Array
-		},
-		data() {
-			return {
-				provider: {},
-				done: false,
-				fail: false
-			}
-		},
-		methods: {
-			launchAuth() {
-				this.provider.login().then(nil => {
-					this.done = true
-				}).catch(err => {
-					this.fail = true
-				})
-			}
-		},
-		mounted() {
-			let provider_key = this.$router.getRoute().provider;
-			this.providers.forEach(p => {
-				if (p.key === provider_key)
-					this.provider = p
-			})
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	.json {
-		font-size: 12px;
-	}
+@import "../styles/settings.scss";
+.json {
+  font-size: 12px;
+}
 
-	h4 {
-		font-size: 24px;
-	}
+h4 {
+  font-size: 24px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SharedLinkProvider.vue b/src/components/SharedLinkProvider.vue
index 4c4170c1..a419068c 100644
--- a/src/components/SharedLinkProvider.vue
+++ b/src/components/SharedLinkProvider.vue
@@ -2,230 +2,222 @@
 	SharedLinkProvider:
 	Simple http provider that can also handle Dropbox Shared Links
 -->
-<template>
-	<div class="box-bar roomy database-manager">
-		<generic-provider-ui 
-			:busy="busy" 
-			:databases="links" 
-			:loggedIn="loggedIn" 
-			:error="messages.error" 
-			:provider-manager="providerManager" 
-			:toggle-login="toggleLogin" 
-			:removeable="true" 
-			:remove-function="removeLink"></generic-provider-ui>
-		<div class="url-form shared-link-box" v-if="loggedIn">
-			<input id="shared-link" type="text" v-model="currentUrl" placeholder="Shared Link URL">
-			<input id="shared-link-name" type="text" v-model="currentUrlTitle" placeholder="Database Name">
-			<a class="waves-effect waves-light btn" @click="addLink">Add URL Source</a>
-		</div>
-	</div>
-</template>
-
 <script>
-	import {
-		ChromePromiseApi
-	} from '$lib/chrome-api-promise.js'
-	import GenericProviderUi from '@/components/GenericProviderUi'
-	const chromePromise = ChromePromiseApi()
+import {
+	ChromePromiseApi
+} from '$lib/chrome-api-promise.js'
+import GenericProviderUi from '@/components/GenericProviderUi'
+const chromePromise = ChromePromiseApi()
 
-	export default {
-		data() {
-			return {
-				busy: false,
-				currentUrl: "",
-				currentUrlTitle: "",
-				links: [],
-				loggedIn: false,
-				messages: {
-					error: ""
-				}
+export default {
+	data() {
+		return {
+			busy: false,
+			currentUrl: "",
+			currentUrlTitle: "",
+			links: [],
+			loggedIn: false,
+			messages: {
+				error: ""
+			}
+		}
+	},
+	components: {
+		GenericProviderUi
+	},
+	props: {
+		providerManager: Object,
+		settings: Object
+	},
+	methods: {
+		toggleLogin() {
+			if (this.loggedIn) {
+				this.settings.disableDatabaseProvider(this.providerManager)
+				this.providerManager.logout().then(() => {
+					this.loggedIn = false
+				})
+			} else {
+				this.providerManager.login().then(() => {
+					this.loggedIn = true
+				})
 			}
 		},
-		components: {
-			GenericProviderUi
-		},
-		props: {
-			providerManager: Object,
-			settings: Object
+		removeLink(index) {
+			if (index !== undefined)
+				if (index >= 0)
+					this.links.splice(index, 1)
+			this.providerManager.setUrls(this.links)
 		},
-		methods: {
-			toggleLogin() {
-				if (this.loggedIn) {
-					this.settings.disableDatabaseProvider(this.providerManager)
-					this.providerManager.logout().then(() => {
-						this.loggedIn = false
-					})
-				} else {
-					this.providerManager.login().then(() => {
-						this.loggedIn = true
-					})
-				}
-			},
-			removeLink(index) {
-				if (index !== undefined)
-					if (index >= 0)
-						this.links.splice(index, 1)
-				this.providerManager.setUrls(this.links)
-			},
-			addLink() {
+		addLink() {
 
-				/* 
-				 * SharedURL Object:
-				 * This code is pretty low quality and LoC could probably be reduced.
-				 * However, it works for now.
-				 * TODO: Make this better...
-				 */
-				var that = this;
-				var SharedUrl = function(url, title) {
-					this.url = url;
-					this.direct_link = url;
-					this.title = title;
-					let a = document.createElement("a");
-					a.href = url;
-					this.origin = a.hostname;
-					this.processSpecialSources();
-				}
-				SharedUrl.prototype.isValid = function() {
-					if (this.direct_link && this.title) {
-						let parsed = this.parseUrl(this.direct_link);
-						if (parsed) {
-							let lastchar = this.direct_link.charAt(this.direct_link.length - 1);
-							if (lastchar != "/" && parsed.pathname.length == 1) {
-								that.messages.error = "URL must include file path. (eg. http://example.com is invalid, but http://example.com/file.ckp is valid.)"
-								return false;
-							}
-							return parsed.pathname.length;
+			/* 
+			 * SharedURL Object:
+			 * This code is pretty low quality and LoC could probably be reduced.
+			 * However, it works for now.
+			 * TODO: Make this better...
+			 */
+			var that = this;
+			var SharedUrl = function (url, title) {
+				this.url = url;
+				this.direct_link = url;
+				this.title = title;
+				let a = document.createElement("a");
+				a.href = url;
+				this.origin = a.hostname;
+				this.processSpecialSources();
+			}
+			SharedUrl.prototype.isValid = function () {
+				if (this.direct_link && this.title) {
+					let parsed = this.parseUrl(this.direct_link);
+					if (parsed) {
+						let lastchar = this.direct_link.charAt(this.direct_link.length - 1);
+						if (lastchar != "/" && parsed.pathname.length == 1) {
+							that.messages.error = "URL must include file path. (eg. http://example.com is invalid, but http://example.com/file.ckp is valid.)"
+							return false;
 						}
-						that.messages.error = "Link URL is not valid."
+						return parsed.pathname.length;
 					}
-					that.messages.error = "Link or Title Missing";
-					return false;
+					that.messages.error = "Link URL is not valid."
 				}
-				// Support Dropbox, and any other cloud host where 
-				// direct download links _can_ be made but are not the same as their
-				// respective shared urls.
-				SharedUrl.prototype.processSpecialSources = function() {
-					let googleGenerator = function(url) {
-						let id = getParameterByName("id", url);
-						if (id)
-							return "https://docs.google.com/uc?export=download&id=" + id;
-						throw "Invalid Google Drive Shared Link";
-					};
-					let dropboxGenerator = function(url) {
-						let path = url.split('/s/');
-						if (path.length != 2)
-							throw "Invalid Dropbox Shared Link";
-						return "https://dl.dropboxusercontent.com/s/" + path[1];
-					};
-					let ownNextCloudGenerator = function(url) {
-						let exclude = /\/[A-Za-z0-9]{15}\/download/
-						let matches = url.match(exclude) || []
-						if (matches.length === 1) 
-							return url;
-						else
-							return url + "/download"
-					};
-					let generatorMap = {
-						"drive.google.com": googleGenerator,
-						"www.dropbox.com": dropboxGenerator,
-						"\/[A-Za-z0-9]{15}\/?": ownNextCloudGenerator
-					};
-					for (var regx in generatorMap) {
-						let matches = this.url.match(regx) || []
-						if (matches.length) {
-							this.direct_link = generatorMap[regx](this.url);
-							break;
-						}
+				that.messages.error = "Link or Title Missing";
+				return false;
+			}
+			// Support Dropbox, and any other cloud host where 
+			// direct download links _can_ be made but are not the same as their
+			// respective shared urls.
+			SharedUrl.prototype.processSpecialSources = function () {
+				let googleGenerator = function (url) {
+					let id = getParameterByName("id", url);
+					if (id)
+						return "https://docs.google.com/uc?export=download&id=" + id;
+					throw "Invalid Google Drive Shared Link";
+				};
+				let dropboxGenerator = function (url) {
+					let path = url.split('/s/');
+					if (path.length != 2)
+						throw "Invalid Dropbox Shared Link";
+					return "https://dl.dropboxusercontent.com/s/" + path[1];
+				};
+				let ownNextCloudGenerator = function (url) {
+					let exclude = /\/[A-Za-z0-9]{15}\/download/
+					let matches = url.match(exclude) || []
+					if (matches.length === 1)
+						return url;
+					else
+						return url + "/download"
+				};
+				let generatorMap = {
+					"drive.google.com": googleGenerator,
+					"www.dropbox.com": dropboxGenerator,
+					"\/[A-Za-z0-9]{15}\/?": ownNextCloudGenerator
+				};
+				for (var regx in generatorMap) {
+					let matches = this.url.match(regx) || []
+					if (matches.length) {
+						this.direct_link = generatorMap[regx](this.url);
+						break;
 					}
 				}
-				SharedUrl.prototype.parseUrl = function() {
-					var a = document.createElement('a');
-					a.href = this.direct_link;
-					if (a.host && a.host != window.location.host)
-						return {
-							host: a.host,
-							hostname: a.hostname,
-							pathname: a.pathname,
-							port: a.port,
-							protocol: a.protocol,
-							search: a.search,
-							hash: a.hash
-						};
-					return false;
-				}
-				// END TODO
-
-				/* 
-				 * MAIN addLink
-				 */
-
-				// try to parse the url..
-				let lnk = new SharedUrl(this.currentUrl, this.currentUrlTitle);
-				if (lnk.isValid()) {
-					this.messages.error = "";
-					// go ahead and request permissions.  There isn't a good way to ask from the popup screen...
-					this.busy = true;
-					chromePromise.permissions.request({
-						origins: [lnk.direct_link] //FLAGHERE TODO
-					}).then(nil => {
-						// on accepted
-						this.busy = false;
-						this.links.push(lnk);
-						this.providerManager.setUrls(this.links);
-					}, reason => {
-						// on rejected
-						this.busy = false;
-						this.messages.error = reason.message;
-					});
-				}
-			},
+			}
+			SharedUrl.prototype.parseUrl = function () {
+				var a = document.createElement('a');
+				a.href = this.direct_link;
+				if (a.host && a.host != window.location.host)
+					return {
+						host: a.host,
+						hostname: a.hostname,
+						pathname: a.pathname,
+						port: a.port,
+						protocol: a.protocol,
+						search: a.search,
+						hash: a.hash
+					};
+				return false;
+			}
+			// END TODO
 
-			/*
-			 * Helper Methods...
+			/* 
+			 * MAIN addLink
 			 */
 
-			// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
-			getParameterByName(name, url) {
-				if (!url) url = window.location.href;
-				name = name.replace(/[\[\]]/g, "\\$&");
-				var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-					results = regex.exec(url);
-				if (!results) return null;
-				if (!results[2]) return '';
-				return decodeURIComponent(results[2].replace(/\+/g, " "));
+			// try to parse the url..
+			let lnk = new SharedUrl(this.currentUrl, this.currentUrlTitle);
+			if (lnk.isValid()) {
+				this.messages.error = "";
+				// go ahead and request permissions.  There isn't a good way to ask from the popup screen...
+				this.busy = true;
+				chromePromise.permissions.request({
+					origins: [lnk.direct_link] //FLAGHERE TODO
+				}).then(nil => {
+					// on accepted
+					this.busy = false;
+					this.links.push(lnk);
+					this.providerManager.setUrls(this.links);
+				}, reason => {
+					// on rejected
+					this.busy = false;
+					this.messages.error = reason.message;
+				});
 			}
 		},
-		mounted() {
-			this.providerManager.isLoggedIn().then(loggedIn => {
-				this.loggedIn = loggedIn
-			})
-			this.providerManager.getUrls().then(links => {
-				if (links !== false)
-					this.links = links
-			})
+
+		/*
+		 * Helper Methods...
+		 */
+
+		// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+		getParameterByName(name, url) {
+			if (!url) url = window.location.href;
+			name = name.replace(/[\[\]]/g, "\\$&");
+			var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+				results = regex.exec(url);
+			if (!results) return null;
+			if (!results[2]) return '';
+			return decodeURIComponent(results[2].replace(/\+/g, " "));
 		}
+	},
+	mounted() {
+		this.providerManager.isLoggedIn().then(loggedIn => {
+			this.loggedIn = loggedIn
+		})
+		this.providerManager.getUrls().then(links => {
+			if (links !== false)
+				this.links = links
+		})
 	}
+}
 </script>
 
+<template>
+	<div class="box-bar roomy database-manager">
+		<generic-provider-ui :busy="busy" :databases="links" :loggedIn="loggedIn" :error="messages.error" :provider-manager="providerManager" :toggle-login="toggleLogin" :removeable="true" :remove-function="removeLink"></generic-provider-ui>
+		<div class="url-form shared-link-box" v-if="loggedIn">
+			<input id="shared-link" type="text" v-model="currentUrl" placeholder="Shared Link URL">
+			<input id="shared-link-name" type="text" v-model="currentUrlTitle" placeholder="Database Name">
+			<a class="waves-effect waves-light btn" @click="addLink">Add URL Source</a>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" scoped>
-	@import "../styles/settings.scss";
-	.url-form {
-		margin-top: 15px;
-		&.shared-link-box {
-			display: flex;
-			justify-content: space-between;
-			align-content: stretch;
-			input {
-				width: 25%;
-				margin-right: 8px;
-				margin-bottom: 5px;
-			}
-			input#shared-link {
-				width: 48%;
-			}
-			.btn {
-				margin-top: 6px;
-			}
-		}
-	}
+@import "../styles/settings.scss";
+.url-form {
+  margin-top: 15px;
+  &.shared-link-box {
+    display: flex;
+    justify-content: space-between;
+    align-content: stretch;
+    input {
+      width: 25%;
+      margin-right: 8px;
+      margin-bottom: 5px;
+    }
+    input#shared-link {
+      width: 48%;
+    }
+    .btn {
+      margin-top: 6px;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Startup.vue b/src/components/Startup.vue
index 5537010a..e169d7e5 100644
--- a/src/components/Startup.vue
+++ b/src/components/Startup.vue
@@ -1,3 +1,53 @@
+<script>
+/* beautify preserve:start */
+import { Links } from '$services/links.js'
+import Spinner from 'vue-simple-spinner'
+/* beautify preserve:end */
+export default {
+	props: {
+		settings: Object,
+		passwordFileStoreRegistry: Object
+	},
+	data() {
+		return {
+			links: Links(),
+			busy: true
+		}
+	},
+	components: {
+		Spinner
+	},
+	mounted: function () {
+		this.settings.getCurrentDatabaseChoice().then(info => {
+			//use the last chosen database
+			if (info) {
+				this.$router.route('/unlock/' + info.providerKey + '/' + encodeURIComponent(info.passwordFile.title));
+			} else {
+				//user has not yet chosen a database.  Lets see if there are any available to choose...
+				var readyPromises = [];
+				this.passwordFileStoreRegistry.listFileManagers('listDatabases').forEach(provider => {
+					readyPromises.push(provider.listDatabases());
+				});
+
+				return Promise.all(readyPromises).then(filesArrays => {
+					var availableFiles = filesArrays.reduce((prev, curr) => {
+						return prev.concat(curr);
+					});
+
+					if (availableFiles.length) {
+						//choose one of the files
+						this.$router.route('/choose')
+					} else {
+						//no files available - allow the user to link to the options page
+						this.busy = false;
+					}
+				});
+			}
+		})
+	}
+}
+</script>
+
 <template>
 	<div>
 		<!-- Busy Spinner -->
@@ -22,61 +72,11 @@
 	</div>
 </template>
 
-<script>
-	/* beautify preserve:start */
-import { Links } from '$services/links.js'
-import Spinner from 'vue-simple-spinner'
-/* beautify preserve:end */
-	export default {
-		props: {
-			settings: Object,
-			passwordFileStoreRegistry: Object
-		},
-		data() {
-			return {
-				links: Links(),
-				busy: true
-			}
-		},
-		components: {
-			Spinner
-		},
-		mounted: function() {
-			this.settings.getCurrentDatabaseChoice().then(info => {
-				//use the last chosen database
-				if (info) {
-					this.$router.route('/unlock/' + info.providerKey + '/' + encodeURIComponent(info.passwordFile.title));
-				} else {
-					//user has not yet chosen a database.  Lets see if there are any available to choose...
-					var readyPromises = [];
-					this.passwordFileStoreRegistry.listFileManagers('listDatabases').forEach(provider => {
-						readyPromises.push(provider.listDatabases());
-					});
-
-					return Promise.all(readyPromises).then(filesArrays => {
-						var availableFiles = filesArrays.reduce((prev, curr) => {
-							return prev.concat(curr);
-						});
-
-						if (availableFiles.length) {
-							//choose one of the files
-							this.$router.route('/choose')
-						} else {
-							//no files available - allow the user to link to the options page
-							this.busy = false;
-						}
-					});
-				}
-			})
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	p {
-		width: 100%;
-		margin: 10px 0px 0px 0px;
-		font-size: 14px;
-	}
+@import "../styles/settings.scss";
+p {
+  width: 100%;
+  margin: 10px 0px 0px 0px;
+  font-size: 14px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/SvgDefs.vue b/src/components/SvgDefs.vue
index bff8b263..0092fdd6 100644
--- a/src/components/SvgDefs.vue
+++ b/src/components/SvgDefs.vue
@@ -1,132 +1,132 @@
 <template>
 	<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <symbol id="icon-cog" viewBox="0 0 1024 1024">
-      <title>cog</title>
-      <path class="path1" d="M585.143 512q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429 42.857 103.429 103.429 42.857 103.429-42.857 42.857-103.429zM877.714 449.714v126.857q0 6.857-4.571 13.143t-11.429 7.429l-105.714 16q-10.857 30.857-22.286 52 20 28.571 61.143 78.857 5.714 6.857 5.714 14.286t-5.143 13.143q-15.429 21.143-56.571 61.714t-53.714 40.571q-6.857 0-14.857-5.143l-78.857-61.714q-25.143 13.143-52 21.714-9.143 77.714-16.571 106.286-4 16-20.571 16h-126.857q-8 0-14-4.857t-6.571-12.286l-16-105.143q-28-9.143-51.429-21.143l-80.571 61.143q-5.714 5.143-14.286 5.143-8 0-14.286-6.286-72-65.143-94.286-96-4-5.714-4-13.143 0-6.857 4.571-13.143 8.571-12 29.143-38t30.857-40.286q-15.429-28.571-23.429-56.571l-104.571-15.429q-7.429-1.143-12-7.143t-4.571-13.429v-126.857q0-6.857 4.571-13.143t10.857-7.429l106.286-16q8-26.286 22.286-52.571-22.857-32.571-61.143-78.857-5.714-6.857-5.714-13.714 0-5.714 5.143-13.143 14.857-20.571 56.286-61.429t54-40.857q7.429 0 14.857 5.714l78.857 61.143q25.143-13.143 52-21.714 9.143-77.714 16.571-106.286 4-16 20.571-16h126.857q8 0 14 4.857t6.571 12.286l16 105.143q28 9.143 51.429 21.143l81.143-61.143q5.143-5.143 13.714-5.143 7.429 0 14.286 5.714 73.714 68 94.286 97.143 4 4.571 4 12.571 0 6.857-4.571 13.143-8.571 12-29.143 38t-30.857 40.286q14.857 28.571 23.429 56l104.571 16q7.429 1.143 12 7.143t4.571 13.429z"></path>
-    </symbol>
-    <symbol id="icon-lock" viewBox="0 0 658 1024">
-      <title>lock</title>
-      <path class="path1" d="M182.857 438.857h292.571v-109.714q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429v109.714zM658.286 493.714v329.143q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-329.143q0-22.857 16-38.857t38.857-16h18.286v-109.714q0-105.143 75.429-180.571t180.571-75.429 180.571 75.429 75.429 180.571v109.714h18.286q22.857 0 38.857 16t16 38.857z"></path>
-    </symbol>
-    <symbol id="icon-edit" viewBox="0 0 1024 1024">
-      <title>edit</title>
-      <path class="path1" d="M507.429 676.571l66.286-66.286-86.857-86.857-66.286 66.286v32h54.857v54.857h32zM758.857 265.143q-9.143-9.143-18.857 0.571l-200 200q-9.714 9.714-0.571 18.857t18.857-0.571l200-200q9.714-9.714 0.571-18.857zM804.571 604.571v108.571q0 68-48.286 116.286t-116.286 48.286h-475.429q-68 0-116.286-48.286t-48.286-116.286v-475.429q0-68 48.286-116.286t116.286-48.286h475.429q36 0 66.857 14.286 8.571 4 10.286 13.143 1.714 9.714-5.143 16.571l-28 28q-8 8-18.286 4.571-13.143-3.429-25.714-3.429h-475.429q-37.714 0-64.571 26.857t-26.857 64.571v475.429q0 37.714 26.857 64.571t64.571 26.857h475.429q37.714 0 64.571-26.857t26.857-64.571v-72q0-7.429 5.143-12.571l36.571-36.571q8.571-8.571 20-4t11.429 16.571zM749.714 182.857l164.571 164.571-384 384h-164.571v-164.571zM1003.429 258.286l-52.571 52.571-164.571-164.571 52.571-52.571q16-16 38.857-16t38.857 16l86.857 86.857q16 16 16 38.857t-16 38.857z"></path>
-    </symbol>
-    <symbol id="icon-arrows" viewBox="0 0 1024 1024">
-      <title>arrows</title>
-      <path class="path1" d="M1024 512q0 14.857-10.857 25.714l-146.286 146.286q-10.857 10.857-25.714 10.857t-25.714-10.857-10.857-25.714v-73.143h-219.429v219.429h73.143q14.857 0 25.714 10.857t10.857 25.714-10.857 25.714l-146.286 146.286q-10.857 10.857-25.714 10.857t-25.714-10.857l-146.286-146.286q-10.857-10.857-10.857-25.714t10.857-25.714 25.714-10.857h73.143v-219.429h-219.429v73.143q0 14.857-10.857 25.714t-25.714 10.857-25.714-10.857l-146.286-146.286q-10.857-10.857-10.857-25.714t10.857-25.714l146.286-146.286q10.857-10.857 25.714-10.857t25.714 10.857 10.857 25.714v73.143h219.429v-219.429h-73.143q-14.857 0-25.714-10.857t-10.857-25.714 10.857-25.714l146.286-146.286q10.857-10.857 25.714-10.857t25.714 10.857l146.286 146.286q10.857 10.857 10.857 25.714t-10.857 25.714-25.714 10.857h-73.143v219.429h219.429v-73.143q0-14.857 10.857-25.714t25.714-10.857 25.714 10.857l146.286 146.286q10.857 10.857 10.857 25.714z"></path>
-    </symbol>
-    <symbol id="icon-times-circle" viewBox="0 0 1024 1024">
-      <title>times-circle</title>
-      <path class="path1" d="M656.571 641.143q0-14.857-10.857-25.714l-103.429-103.429 103.429-103.429q10.857-10.857 10.857-25.714 0-15.429-10.857-26.286l-51.429-51.429q-10.857-10.857-26.286-10.857-14.857 0-25.714 10.857l-103.429 103.429-103.429-103.429q-10.857-10.857-25.714-10.857-15.429 0-26.286 10.857l-51.429 51.429q-10.857 10.857-10.857 26.286 0 14.857 10.857 25.714l103.429 103.429-103.429 103.429q-10.857 10.857-10.857 25.714 0 15.429 10.857 26.286l51.429 51.429q10.857 10.857 26.286 10.857 14.857 0 25.714-10.857l103.429-103.429 103.429 103.429q10.857 10.857 25.714 10.857 15.429 0 26.286-10.857l51.429-51.429q10.857-10.857 10.857-26.286zM877.714 512q0 119.429-58.857 220.286t-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857 220.286 58.857 159.714 159.714 58.857 220.286z"></path>
-    </symbol>
-    <symbol id="icon-check-circle" viewBox="0 0 1024 1024">
-      <title>check-circle</title>
-      <path class="path1" d="M733.714 419.429q0-16-10.286-26.286l-52-51.429q-10.857-10.857-25.714-10.857t-25.714 10.857l-233.143 232.571-129.143-129.143q-10.857-10.857-25.714-10.857t-25.714 10.857l-52 51.429q-10.286 10.286-10.286 26.286 0 15.429 10.286 25.714l206.857 206.857q10.857 10.857 25.714 10.857 15.429 0 26.286-10.857l310.286-310.286q10.286-10.286 10.286-25.714zM877.714 512q0 119.429-58.857 220.286t-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857 220.286 58.857 159.714 159.714 58.857 220.286z"></path>
-    </symbol>
-    <symbol id="icon-eye" viewBox="0 0 1024 1024">
-      <title>eye</title>
-      <path class="path1" d="M950.857 548.571q-86.857-134.857-217.714-201.714 34.857 59.429 34.857 128.571 0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857q0-69.143 34.857-128.571-130.857 66.857-217.714 201.714 76 117.143 190.571 186.571t248.286 69.429 248.286-69.429 190.571-186.571zM539.429 329.143q0-11.429-8-19.429t-19.429-8q-71.429 0-122.571 51.143t-51.143 122.571q0 11.429 8 19.429t19.429 8 19.429-8 8-19.429q0-49.143 34.857-84t84-34.857q11.429 0 19.429-8t8-19.429zM1024 548.571q0 19.429-11.429 39.429-80 131.429-215.143 210.571t-285.429 79.143-285.429-79.429-215.143-210.286q-11.429-20-11.429-39.429t11.429-39.429q80-130.857 215.143-210.286t285.429-79.429 285.429 79.429 215.143 210.286q11.429 20 11.429 39.429z"></path>
-    </symbol>
-    <symbol id="icon-eye-slash" viewBox="0 0 1024 1024">
-      <title>eye-slash</title>
-      <path class="path1" d="M317.143 762.857l44.571-80.571q-49.714-36-77.714-90.857t-28-116q0-69.143 34.857-128.571-130.857 66.857-217.714 201.714 95.429 147.429 244 214.286zM539.429 329.143q0-11.429-8-19.429t-19.429-8q-71.429 0-122.571 51.143t-51.143 122.571q0 11.429 8 19.429t19.429 8 19.429-8 8-19.429q0-49.143 34.857-84t84-34.857q11.429 0 19.429-8t8-19.429zM746.857 220q0 4-0.571 5.143-60 107.429-180 323.429t-180.571 324l-28 50.857q-5.714 9.143-16 9.143-6.857 0-76.571-40-9.143-5.714-9.143-16 0-6.857 25.143-49.714-81.714-37.143-150.571-98.857t-119.143-140q-11.429-17.714-11.429-39.429t11.429-39.429q87.429-134.286 217.143-212t283.429-77.714q50.857 0 102.857 9.714l30.857-55.429q5.714-9.143 16-9.143 2.857 0 10.286 3.429t17.714 8.857 18.857 10.571 18 10.571 11.143 6.571q9.143 5.714 9.143 15.429zM768 475.429q0 79.429-45.143 144.857t-119.429 94l160-286.857q4.571 25.714 4.571 48zM1024 548.571q0 20-11.429 39.429-22.286 36.571-62.286 82.857-85.714 98.286-198.571 152.571t-239.714 54.286l42.286-75.429q121.143-10.286 224.286-78.286t172.286-175.429q-65.714-102.286-161.143-168l36-64q54.286 36.571 104.286 87.429t82.571 105.143q11.429 19.429 11.429 39.429z"></path>
-    </symbol>
-    <symbol id="icon-key" viewBox="0 0 1024 1024">
-      <title>key</title>
-      <path class="path1" d="M475.429 292.571q0-45.714-32-77.714t-77.714-32-77.714 32-32 77.714q0 24 10.857 47.429-23.429-10.857-47.429-10.857-45.714 0-77.714 32t-32 77.714 32 77.714 77.714 32 77.714-32 32-77.714q0-24-10.857-47.429 23.429 10.857 47.429 10.857 45.714 0 77.714-32t32-77.714zM961.714 694.857q0 9.714-28 37.714t-37.714 28q-5.143 0-16.286-9.143t-20.857-18.857-22-22.857-14-14.857l-54.857 54.857 125.714 125.714q16 16 16 38.857 0 24-22.286 46.286t-46.286 22.286q-22.857 0-38.857-16l-383.429-383.429q-100.571 74.857-208.571 74.857-93.143 0-151.714-58.571t-58.571-151.714q0-91.429 54.286-178.857t141.714-141.714 178.857-54.286q93.143 0 151.714 58.571t58.571 151.714q0 108-74.857 208.571l202.857 202.857 54.857-54.857q-1.714-1.714-14.857-14t-22.857-22-18.857-20.857-9.143-16.286q0-9.714 28-37.714t37.714-28q7.429 0 13.143 5.714 3.429 3.429 26.286 25.429t46.857 45.429 49.429 49.143 41.714 44.571 16.286 23.429z"></path>
-    </symbol>
-    <symbol id="icon-upload" viewBox="0 0 951 1024">
-      <title>upload</title>
-      <path class="path1" d="M731.429 841.143q0-14.857-10.857-25.714t-25.714-10.857-25.714 10.857-10.857 25.714 10.857 25.714 25.714 10.857 25.714-10.857 10.857-25.714zM877.714 841.143q0-14.857-10.857-25.714t-25.714-10.857-25.714 10.857-10.857 25.714 10.857 25.714 25.714 10.857 25.714-10.857 10.857-25.714zM950.857 713.143v182.857q0 22.857-16 38.857t-38.857 16h-841.143q-22.857 0-38.857-16t-16-38.857v-182.857q0-22.857 16-38.857t38.857-16h244q12 32 40.286 52.571t63.143 20.571h146.286q34.857 0 63.143-20.571t40.286-52.571h244q22.857 0 38.857 16t16 38.857zM765.143 342.857q-9.714 22.857-33.714 22.857h-146.286v256q0 14.857-10.857 25.714t-25.714 10.857h-146.286q-14.857 0-25.714-10.857t-10.857-25.714v-256h-146.286q-24 0-33.714-22.857-9.714-22.286 8-39.429l256-256q10.286-10.857 25.714-10.857t25.714 10.857l256 256q17.714 17.143 8 39.429z"></path>
-    </symbol>
-    <symbol id="icon-unlock" viewBox="0 0 951 1024">
-      <title>unlock</title>
-      <path class="path1" d="M950.857 329.143v146.286q0 14.857-10.857 25.714t-25.714 10.857h-36.571q-14.857 0-25.714-10.857t-10.857-25.714v-146.286q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429v109.714h54.857q22.857 0 38.857 16t16 38.857v329.143q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-329.143q0-22.857 16-38.857t38.857-16h384v-109.714q0-105.714 75.143-180.857t180.857-75.143 180.857 75.143 75.143 180.857z"></path>
-    </symbol>
-    <symbol id="icon-flask" viewBox="0 0 951 1024">
-      <title>flask</title>
-      <path class="path1" d="M872.571 827.429q32 50.857 12.286 87.143t-80.286 36.286h-658.286q-60.571 0-80.286-36.286t12.286-87.143l287.429-453.143v-228h-36.571q-14.857 0-25.714-10.857t-10.857-25.714 10.857-25.714 25.714-10.857h292.571q14.857 0 25.714 10.857t10.857 25.714-10.857 25.714-25.714 10.857h-36.571v228zM427.429 413.143l-155.429 245.143h406.857l-155.429-245.143-11.429-17.714v-249.143h-73.143v249.143z"></path>
-    </symbol>
-    <symbol id="icon-copy" viewBox="0 0 1024 1024">
-      <title>copy</title>
-      <path class="path1" d="M969.143 219.429q22.857 0 38.857 16t16 38.857v694.857q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-164.571h-310.857q-22.857 0-38.857-16t-16-38.857v-384q0-22.857 11.429-50.286t27.429-43.429l233.143-233.143q16-16 43.429-27.429t50.286-11.429h237.714q22.857 0 38.857 16t16 38.857v187.429q38.857-22.857 73.143-22.857h237.714zM658.286 341.143l-170.857 170.857h170.857v-170.857zM292.571 121.714l-170.857 170.857h170.857v-170.857zM404.571 491.429l180.571-180.571v-237.714h-219.429v237.714q0 22.857-16 38.857t-38.857 16h-237.714v365.714h292.571v-146.286q0-22.857 11.429-50.286t27.429-43.429zM950.857 950.857v-658.286h-219.429v237.714q0 22.857-16 38.857t-38.857 16h-237.714v365.714h512z"></path>
-    </symbol>
-    <symbol id="icon-laptop" viewBox="0 0 1097 1024">
-      <title>laptop</title>
-      <path class="path1" d="M237.714 731.429q-37.714 0-64.571-26.857t-26.857-64.571v-402.286q0-37.714 26.857-64.571t64.571-26.857h621.714q37.714 0 64.571 26.857t26.857 64.571v402.286q0 37.714-26.857 64.571t-64.571 26.857h-621.714zM219.429 237.714v402.286q0 7.429 5.429 12.857t12.857 5.429h621.714q7.429 0 12.857-5.429t5.429-12.857v-402.286q0-7.429-5.429-12.857t-12.857-5.429h-621.714q-7.429 0-12.857 5.429t-5.429 12.857zM1005.714 768h91.429v54.857q0 22.857-26.857 38.857t-64.571 16h-914.286q-37.714 0-64.571-16t-26.857-38.857v-54.857h1005.714zM594.286 822.857q9.143 0 9.143-9.143t-9.143-9.143h-91.429q-9.143 0-9.143 9.143t9.143 9.143h91.429z"></path>
-    </symbol>
-    <symbol id="icon-dropbox" viewBox="0 0 1024 1024">
-      <title>dropbox</title>
-      <path class="path1" d="M229.714 404l282.286 174.286-195.429 162.857-280-182.286zM793.143 721.143v61.714l-280 167.429v0.571l-0.571-0.571-0.571 0.571v-0.571l-279.429-167.429v-61.714l84 54.857 195.429-162.286v-1.143l0.571 0.571 0.571-0.571v1.143l196 162.286zM316.571 67.429l195.429 162.857-282.286 173.714-193.143-154.286zM794.286 404l193.143 154.857-279.429 182.286-196-162.857zM708 67.429l279.429 182.286-193.143 154.286-282.286-173.714z"></path>
-    </symbol>
-    <symbol id="icon-onedrive" viewBox="0 0 1024 1024">
-      <title>onedrive</title>
-      <path class="path1" d="M350.868 828.388c-60.274-15.060-93.856-62.97-93.962-134.064-0.032-22.726 1.612-33.62 7.286-48.236 13.908-35.834 50.728-62.872 99.176-72.822 24.11-4.95 31.536-10.266 31.536-22.572 0-3.862 2.872-15.36 6.378-25.552 15.932-46.306 45.43-84.91 76.948-100.702 32.99-16.526 49.642-20.254 89.548-20.040 56.674 0.304 84.952 12.598 124.496 54.128l21.75 22.842 19.484-6.742c94.3-32.636 188.306 22.916 195.888 115.756l2.072 25.398 18.57 6.65c53.032 19.004 77.96 58.904 73.442 117.556-2.958 38.358-20.89 68.98-49.3 84.184l-13.356 7.146-296.822 0.57c-228.094 0.44-300.6-0.368-313.134-3.5v0zM103.218 785.966c-36.176-9.086-74.506-42.854-92.48-81.47-10.196-21.906-10.738-25.128-10.738-63.88 0-36.864 0.87-42.778 8.988-61.080 17.11-38.582 49.894-66.46 91.030-77.408 8.684-2.312 16.842-6 18.128-8.196 1.29-2.198 2.722-14.164 3.182-26.592 2.866-77.196 50.79-145.214 117.708-167.056 36.154-11.8 83.572-12.898 122.896 3.726 12.47 5.274 11.068 6.404 37.438-30.14 15.594-21.612 45.108-44.49 70.9-58.18 27.838-14.776 56.792-21.584 91.412-21.494 96.768 0.252 180.166 64.22 211.004 161.848 9.854 31.192 9.362 39.926-2.26 40.184-5.072 0.112-19.604 3.064-32.292 6.558l-23.072 6.358-21.052-22.25c-59.362-62.734-156.238-76.294-238.592-33.396-32.9 17.138-59.34 41.746-79.31 73.81-14.236 22.858-32.39 65.504-32.39 76.094 0 7.51-5.754 11.264-30.332 19.782-76.094 26.376-120.508 87.282-120.476 165.218 0.010 28.368 6.922 63.074 16.52 82.956 3.618 7.494 5.634 14.622 4.484 15.836-2.946 3.106-97.608 2.060-110.696-1.228v0z"></path>
-    </symbol>
-    <symbol id="icon-apple" viewBox="0 0 805 1024">
-      <title>apple</title>
-      <path class="path1" d="M796 694.286q-22.286 71.429-70.286 142.857-73.714 112-146.857 112-28 0-80-18.286-49.143-18.286-86.286-18.286-34.857 0-81.143 18.857-46.286 19.429-75.429 19.429-86.857 0-172-148-84-149.143-84-287.429 0-130.286 64.571-213.714 64-82.286 162.286-82.286 41.143 0 101.143 17.143 59.429 17.143 78.857 17.143 25.714 0 81.714-19.429 58.286-19.429 98.857-19.429 68 0 121.714 37.143 29.714 20.571 59.429 57.143-45.143 38.286-65.143 67.429-37.143 53.714-37.143 118.286 0 70.857 39.429 127.429t90.286 72zM581.143 24q0 34.857-16.571 77.714-17.143 42.857-53.143 78.857-30.857 30.857-61.714 41.143-21.143 6.286-59.429 9.714 1.714-85.143 44.571-146.857 42.286-61.143 142.857-84.571 0.571 1.714 1.429 6.286t1.429 6.286q0 2.286 0.286 5.714t0.286 5.714z"></path>
-    </symbol>
-    <symbol id="icon-windows" viewBox="0 0 951 1024">
-      <title>windows</title>
-      <path class="path1" d="M389.714 574.857v372l-389.714-53.714v-318.286h389.714zM389.714 150.286v376.571h-389.714v-322.857zM950.857 574.857v449.143l-518.286-71.429v-377.714h518.286zM950.857 73.143v453.714h-518.286v-382.286z"></path>
-    </symbol>
-    <symbol id="icon-android" viewBox="0 0 805 1024">
-      <title>android</title>
-      <path class="path1" d="M281.714 276q9.143 0 15.714-6.571t6.571-15.714-6.571-15.714-15.714-6.571-15.429 6.571-6.286 15.714 6.286 15.714 15.429 6.571zM522.857 276q9.143 0 15.429-6.571t6.286-15.714-6.286-15.714-15.429-6.571-15.714 6.571-6.571 15.714 6.571 15.714 15.714 6.571zM58.857 381.143q24 0 41.143 17.143t17.143 41.143v245.714q0 24.571-16.857 41.714t-41.429 17.143-41.714-17.143-17.143-41.714v-245.714q0-24 17.143-41.143t41.714-17.143zM664.571 392v380.571q0 26.286-18.286 44.571t-44 18.286h-42.857v129.714q0 24.571-17.143 41.714t-41.714 17.143-41.714-17.143-17.143-41.714v-129.714h-78.857v129.714q0 24.571-17.143 41.714t-41.714 17.143q-24 0-41.143-17.143t-17.143-41.714l-0.571-129.714h-42.286q-26.286 0-44.571-18.286t-18.286-44.571v-380.571h524.571zM532 160.571q61.143 31.429 97.714 87.714t36.571 123.143h-528.571q0-66.857 36.571-123.143t98.286-87.714l-40.571-74.857q-4-7.429 2.857-11.429 7.429-3.429 11.429 3.429l41.143 75.429q54.286-24 114.857-24t114.857 24l41.143-75.429q4-6.857 11.429-3.429 6.857 4 2.857 11.429zM804.571 439.429v245.714q0 24.571-17.143 41.714t-41.714 17.143q-24 0-41.143-17.143t-17.143-41.714v-245.714q0-24.571 17.143-41.429t41.143-16.857q24.571 0 41.714 16.857t17.143 41.429z"></path>
-    </symbol>
-    <symbol id="icon-linux" viewBox="0 0 1024 1024">
-      <title>linux</title>
-      <path class="path1" d="M378.857 234.857q-6.286 0.571-8.857 6t-4.857 5.429q-2.857 0.571-2.857-2.857 0-6.857 10.857-8.571h5.714zM428.571 242.857q-2.286 0.571-6.571-3.714t-10-2.571q13.714-6.286 18.286 1.143 1.714 3.429-1.714 5.143zM228 486.857q-2.286-0.571-3.429 1.714t-2.571 7.143-3.143 7.714-5.714 7.429q-4 5.714-0.571 6.857 2.286 0.571 7.143-4t7.143-10.286q0.571-1.714 1.143-4t1.143-3.429 0.857-2.571 0.286-2.286v-1.714t-0.571-1.429-1.714-1.143zM716.571 692q0-10.286-31.429-24 2.286-8.571 4.286-15.714t2.857-14.857 1.714-12.286 0.286-12.857-0.571-11.143-2-12.571-2.286-11.714-2.857-14.286-3.143-15.143q-5.714-27.429-26.857-58.857t-41.143-42.857q13.714 11.429 32.571 47.429 49.714 92.571 30.857 158.857-6.286 22.857-28.571 24-17.714 2.286-22-10.571t-4.571-47.714-6.571-61.143q-5.143-22.286-11.143-39.429t-11.143-26-8.857-14-7.429-8.571-4.286-4q-8-35.429-17.714-58.857t-16.857-32-13.429-18.857-8.571-22.857q-2.286-12 3.429-30.571t2.571-28.286-25.429-14.286q-8.571-1.714-25.429-10.286t-20.286-9.143q-4.571-0.571-6.286-14.857t4.571-29.143 20.571-15.429q21.143-1.714 29.143 17.143t2.286 33.143q-6.286 10.857-1.143 15.143t17.143 0.286q7.429-2.286 7.429-20.571v-21.143q-2.857-17.143-7.714-28.571t-12-17.429-13.429-8.571-15.429-4.286q-61.143 4.571-50.857 76.571 0 8.571-0.571 8.571-5.143-5.143-16.857-6t-18.857 0.286-8.857-2.857q0.571-32.571-9.143-51.429t-25.714-19.429q-15.429-0.571-23.714 15.714t-9.429 34q-0.571 8.571 2 21.143t7.429 21.429 8.857 7.714q5.714-1.714 9.143-8 2.286-5.143-4-4.571-4 0-8.857-8.286t-5.429-19.143q-0.571-12.571 5.143-21.143t19.429-8q9.714 0 15.429 12t5.429 22.286-0.857 12.571q-12.571 8.571-17.714 16.571-4.571 6.857-15.714 13.429t-11.714 7.143q-7.429 8-8.857 15.429t4.286 10.286q8 4.571 14.286 11.143t9.143 10.857 10.571 7.429 20.286 3.714q26.857 1.143 58.286-8.571 1.143-0.571 13.143-4t19.714-6 16.857-7.429 12-10q5.143-8 11.429-4.571 2.857 1.714 3.714 4.857t-1.714 6.857-9.429 5.429q-11.429 3.429-32.286 12.286t-26 11.143q-25.143 10.857-40 13.143-14.286 2.857-45.143-1.143-5.714-1.143-5.143 1.143t9.714 10.857q14.286 13.143 38.286 12.571 9.714-0.571 20.571-4t20.571-8 19.143-10 17.143-9.714 14-6.857 10-1.429 4.857 6.286q0 1.143-0.571 2.571t-2.286 2.857-3.429 2.571-4.857 2.857-5.143 2.571-5.714 2.857-5.429 2.571q-16 8-38.571 25.143t-38 24.571-28 0.571q-12-6.286-36-41.714-12.571-17.714-14.286-12.571-0.571 1.714-0.571 5.714 0 14.286-8.571 32.286t-16.857 31.714-12 33.143 6.571 36q-13.143 3.429-35.714 51.429t-27.143 80.571q-1.143 10.286-0.857 39.429t-3.143 33.714q-4.571 13.714-16.571 1.714-18.286-17.714-20.571-53.714-1.143-16 2.286-32 2.286-10.857-0.571-10.286l-2.286 2.857q-20.571 37.143 5.714 94.857 2.857 6.857 14.286 16t13.714 11.429q11.429 13.143 59.429 51.714t53.143 43.714q9.143 8.571 10 21.714t-8 24.571-26 13.143q4.571 8.571 16.571 25.429t16 30.857 4 40.286q26.286-13.714 4-52.571-2.286-4.571-6-9.143t-5.429-6.857-1.143-3.429q1.714-2.857 7.429-5.429t11.429 1.429q26.286 29.714 94.857 20.571 76-8.571 101.143-49.714 13.143-21.714 19.429-17.143 6.857 3.429 5.714 29.714-0.571 14.286-13.143 52.571-5.143 13.143-3.429 21.429t13.714 8.857q1.714-10.857 8.286-44t7.714-51.429q1.143-12-3.714-42t-4.286-55.429 13.143-40.286q8.571-10.286 29.143-10.286 0.571-21.143 19.714-30.286t41.429-6 34.286 12.857zM357.714 219.429q1.714-9.714-1.429-17.143t-6.571-8.571q-5.143-1.143-5.143 4 1.143 2.857 2.857 3.429 5.714 0 4 8.571-1.714 11.429 4.571 11.429 1.714 0 1.714-1.714zM597.143 332q-1.143-4.571-3.714-6.571t-7.429-2.857-8.286-3.143q-2.857-1.714-5.429-4.571t-4-4.571-3.143-3.714-2.286-2.286-2.286 0.857q-8 9.143 4 24.857t22.286 18q5.143 0.571 8.286-4.571t2-11.429zM495.429 210.286q0-6.286-2.857-11.143t-6.286-7.143-5.143-1.714q-8 0.571-4 4l2.286 1.143q8 2.286 10.286 17.714 0 1.714 4.571-1.143zM526.286 77.143q0-1.143-1.429-2.857t-5.143-4-5.429-3.429q-8.571-8.571-13.714-8.571-5.143 0.571-6.571 4.286t-0.571 7.429-0.286 7.143q-0.571 2.286-3.429 6t-3.429 5.143 1.714 4.857q2.286 1.714 4.571 0t6.286-5.143 8.571-5.143q0.571-0.571 5.143-0.571t8.571-1.143 5.143-4zM849.143 843.429q11.429 6.857 17.714 14t6.857 13.714-1.429 12.857-8.857 12.571-13.429 11.143-17.143 10.571-18 9.429-18.286 8.857-15.429 7.429q-21.714 10.857-48.857 32t-43.143 36.571q-9.714 9.143-38.857 11.143t-50.857-8.286q-10.286-5.143-16.857-13.429t-9.429-14.571-12.571-11.143-26.857-5.429q-25.143-0.571-74.286-0.571-10.857 0-32.571 0.857t-33.143 1.429q-25.143 0.571-45.429 8.571t-30.571 17.143-24.857 16.286-30.571 6.571q-16.571-0.571-63.429-17.714t-83.429-24.571q-10.857-2.286-29.143-5.429t-28.571-5.143-22.571-5.429-19.143-8.286-9.714-11.143q-5.714-13.143 4-38t10.286-31.143q0.571-9.143-2.286-22.857t-5.714-24.286-2.571-20.857 6-15.429q8-6.857 32.571-8t34.286-6.857q17.143-10.286 24-20t6.857-29.143q12 41.714-18.286 60.571-18.286 11.429-47.429 8.571-19.429-1.714-24.571 5.714-7.429 8.571 2.857 32.571 1.143 3.429 4.571 10.286t4.857 10.286 2.571 9.714 0.571 12.571q0 8.571-9.714 28t-8 27.429q1.714 9.714 21.143 14.857 11.429 3.429 48.286 10.571t56.857 11.714q13.714 3.429 42.286 12.571t47.143 13.143 31.714 2.286q24.571-3.429 36.857-16t13.143-27.429-4.286-33.429-10.857-29.714-11.429-20.857q-69.143-108.571-96.571-138.286-38.857-42.286-64.571-22.857-6.286 5.143-8.571-8.571-1.714-9.143-1.143-21.714 0.571-16.571 5.714-29.714t13.714-26.857 12.571-24q4.571-12 15.143-41.143t16.857-44.571 17.143-34.857 22.286-30.857q62.857-81.714 70.857-111.429-6.857-64-9.143-177.143-1.143-51.429 13.714-86.571t60.571-59.714q22.286-12 59.429-12 30.286-0.571 60.571 7.714t50.857 23.714q32.571 24 52.286 69.429t16.857 84.286q-2.857 54.286 17.143 122.286 19.429 64.571 76 124.571 31.429 33.714 56.857 93.143t34 109.143q4.571 28 2.857 48.286t-6.857 31.714-11.429 12.571q-5.714 1.143-13.429 10.857t-15.429 20.286-23.143 19.143-34.857 8q-10.286-0.571-18-2.857t-12.857-7.714-7.714-8.857-6.571-11.714-5.143-11.143q-12.571-21.143-23.429-17.143t-16 28 4 55.429q11.429 40 0.571 111.429-5.714 37.143 10.286 57.429t41.714 18.857 48.571-20.286q33.714-28 51.143-38t59.143-24.286q30.286-10.286 44-20.857t10.571-19.714-14.286-16.286-29.429-13.429q-18.857-6.286-28.286-27.429t-8.571-41.429 8.857-27.143q0.571 17.714 4.571 32.286t8.286 23.143 11.714 16.286 12 10.857 12.286 7.429 9.429 5.429z"></path>
-    </symbol>
-    <symbol id="icon-google" viewBox="0 0 731 1024">
-      <title>google</title>
-      <path class="path1" d="M560.571 765.143q0-14.286-4-28t-8.286-24-15.429-23.714-16.857-20-22-19.714-20.857-16.571-23.714-17.143-20.857-14.857q-9.143-1.143-28-1.143-30.286 0-59.714 4t-61.143 14.286-55.429 26.286-39.143 42.571-15.429 60.286q0 32 13.429 58.286t34.857 43.143 49.714 28.571 57.143 16.571 58 4.857q33.143 0 63.714-7.429t56.571-22.286 41.714-41.714 15.714-62.286zM493.714 274.857q0-33.714-9.714-71.714t-27.429-73.714-48-59.143-66.857-23.429q-24 0-47.143 11.143t-38 30q-26.286 33.714-26.286 91.429 0 26.286 5.714 55.714t18 58.857 29.714 52.857 42.857 38.286 55.143 14.857q21.143 0 44.286-9.429t37.429-24.857q30.286-32 30.286-90.857zM429.714 0h238.286l-78.286 50.286h-75.429q42.857 36 64.571 76t21.714 91.429q0 41.143-14 74t-34 53.143-39.714 37.143-33.714 35.143-14 37.714q0 20.571 18.286 40.286t44 38.857 51.714 42 44.286 59.429 18.286 81.143q0 52-28 98.857-40.571 69.714-119.714 102.571t-170.571 32.857q-75.429 0-140.857-23.714t-98.571-78.571q-20.571-33.714-20.571-74.857 0-46.286 25.429-85.714t67.714-65.714q74.857-46.857 230.857-57.143-18.286-23.429-27.143-42t-8.857-42q0-22.857 12-48.571-26.286 2.286-38.857 2.286-84.571 0-142.571-55.143t-58-139.714q0-46.857 20.571-90.857t56.571-74.857q43.429-37.714 104-56t124.571-18.286z"></path>
-    </symbol>
-    <symbol id="icon-link" viewBox="0 0 1800 1800">
-      <title>Link</title>
-      <path id="fa-link" d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"></path>
-    </symbol>
-    <symbol id="icon-key2" viewBox="0 0 1024 1024">
-      <title>key2</title>
-      <path class="path1" d="M704.128 0c-176.736 0-320 143.296-320 320 0 41.12 8.608 80.032 22.816 116.128l-388.768 388.736c-11.232 11.264-18.176 21.952-18.176 39.136v96c0 34.24 29.728 64 64 64h96c17.152 0 28-6.88 39.232-18.048l45.92-45.952h74.976c35.328 0 64-28.672 64-64v-64h64c35.328 0 64-28.672 64-64v-75.008l75.808-75.872c36.128 14.24 75.008 22.88 116.192 22.88 176.672 0 320-143.296 320-320s-143.328-320-320-320zM704.128 576c-47.36 0-91.264-13.76-129.312-36.224l-11.008 10.976-96.96 96.992c-12 12-18.752 28.256-18.752 45.248v75.008h-64c-35.328 0-64 28.64-64 64v64h-74.944c-16.96 0-33.248 6.752-45.248 18.752l-45.376 45.376-90.432-0.128-0.096-91.2 373.28-372.608c0 0 0 0.032 0.032 0.064l47.008-47.008c-22.464-38.048-36.224-81.92-36.224-129.28 0-141.376 114.656-256 256-256s256 114.624 256 256-114.592 256.032-255.968 256.032zM890.24 263.648c-35.872-49.984-79.552-93.6-129.76-129.728-8.16-5.92-18.72-7.392-28.224-4.064-44.448 15.648-74.88 46.048-90.432 90.496-1.184 3.328-1.76 6.784-1.76 10.208 0 6.368 1.984 12.672 5.824 18.016 36 50.048 79.616 93.696 129.696 129.696 8.192 5.888 18.688 7.392 28.192 4.096 44.512-15.552 74.944-46.016 90.56-90.496 1.184-3.328 1.76-6.784 1.76-10.208-0.032-6.368-2.048-12.672-5.856-18.016zM794.24 352.32c-47.296-34.016-88.48-75.2-122.24-121.376 12.384-35.296 35.552-58.464 69.824-71.072 47.328 34.080 88.448 75.168 122.112 121.952-12.512 35.040-35.616 58.080-69.696 70.496z"></path>
-    </symbol>
-    <symbol id="icon-lock2" viewBox="0 0 1024 1024">
-      <title>lock2</title>
-      <path class="path1" d="M800 416v-128c0-159.072-128.928-288-288-288s-288 128.928-288 288v128c-53.024 0-96 42.976-96 96v224c0 159.072 128.928 288 288 288h192c159.072 0 288-128.928 288-288v-224c0-53.056-43.008-96-96-96zM288 288c0-123.712 100.288-224 224-224s224 100.288 224 224v128h-64v-127.936c0-88.384-71.616-160-160-160s-160 71.616-160 160v127.936h-64v-128zM640 288v128h-256v-128c0-70.688 57.312-128 128-128s128 57.312 128 128zM832 608v128c0 123.488-100.512 224-224 224h-192c-123.488 0-224-100.512-224-224v-224c0-17.664 14.336-32 32-32 21.344 0 42.656 0 64 0h448c21.312 0 42.624 0 64 0 17.632 0 32 14.336 32 32v96zM512 608c35.328 0 64 28.64 64 64 0 19.488-10.496 56.576-21.312 85.824-8.736 23.616-17.664 42.112-42.688 42.112-23.008 0-33.952-18.688-42.656-42.432-10.688-29.184-21.344-66.080-21.344-85.504 0-35.36 28.672-64 64-64z"></path>
-    </symbol>
-    <symbol id="icon-eye2" viewBox="0 0 1024 1024">
-      <title>eye2</title>
-      <path class="path1" d="M1022.88 504.832c-0.32-1.344-0.128-2.784-0.64-4.096-0.192-0.544-0.672-0.832-0.864-1.344-0.32-0.768-0.256-1.632-0.672-2.368-92.8-177.632-294.816-304.896-507.936-304.896-213.152 0-415.136 127.072-508 304.672-0.416 0.736-0.352 1.6-0.672 2.368-0.224 0.512-0.672 0.8-0.864 1.344-0.512 1.312-0.32 2.752-0.64 4.096-0.576 2.4-1.12 4.704-1.12 7.168s0.576 4.736 1.12 7.168c0.32 1.344 0.128 2.784 0.64 4.096 0.192 0.544 0.672 0.832 0.864 1.344 0.32 0.768 0.256 1.632 0.672 2.368 92.832 177.632 294.848 304.896 508 304.896 213.12 0 415.136-127.072 507.936-304.672 0.448-0.736 0.384-1.6 0.672-2.368 0.192-0.512 0.672-0.8 0.864-1.344 0.512-1.312 0.32-2.752 0.64-4.096 0.544-2.432 1.12-4.736 1.12-7.168s-0.576-4.768-1.12-7.168zM512.736 767.616c-179.68 0-355.584-102.112-443.232-255.84 88.128-153.92 263.776-255.68 443.232-255.68 179.616 0 355.552 102.144 443.2 255.84-88.128 153.952-263.744 255.68-443.2 255.68zM512.736 383.968c8.832 0 15.936 7.136 15.936 16 0 8.8-7.136 15.968-15.936 15.968v0.032c-52.928 0-95.968 43.040-95.968 95.904 0 8.832-7.168 16-15.968 16-8.832 0-16-7.168-16-16 0-70.56 57.184-127.744 127.744-127.872 0.064 0 0.128-0.032 0.192-0.032zM512 288c-123.744 0-224 100.288-224 224s100.288 224 224 224c123.68 0 224-100.32 224-224 0-123.744-100.32-224-224-224zM512 704c-105.888 0-192-86.112-192-192s86.112-192 192-192c105.888 0 192 86.112 192 192s-86.112 192-192 192z"></path>
-    </symbol>
-    <symbol id="icon-folder" viewBox="0 0 1792 1792">
-      <title>folder</title>
-      <path d="M1728 608v704q0 92-66 158t-158 66h-1216q-92 0-158-66t-66-158v-960q0-92 66-158t158-66h320q92 0 158 66t66 158v32h672q92 0 158 66t66 158z"/>
-    </symbol>
-    <symbol id="icon-pcloud" viewBox="0 0 64 64">
-      <title>pcloud</title>
-      <path d="M63.457,32.629c0-3.183-1.476-6.018-3.774-7.869c-0.91,1.838-2.474,3.286-4.382,4.072                                                         
-              c2.723-1.408,4.588-4.243,4.588-7.518c0-4.675-3.784-8.415-8.459-8.415c-0.355,0-0.689,0.026-1.034,0.068                                                      
-              c1.17,2.559,1.818,5.349,1.818,8.347c0,0.193-0.01,0.384-0.017,0.576C51.861,11.025,42.954,2.319,32.005,2.319                                                 
-              c-10.916,0-19.806,8.657-20.19,19.481c-0.004-0.163-0.019-0.323-0.019-0.486c0-2.992,0.667-5.822,1.833-8.376                                                  
-              C6.253,13.863,0.543,20.145,0.543,27.772c0,8.265,6.7,14.965,14.965,14.965h38.054v-0.017                                                                     
-              C59.044,42.609,63.457,38.138,63.457,32.629"/>
-      <path fill="#FFFFFF" d="M31.839,36.634c-7.824,0-14.167-6.343-14.167-14.167c0-7.823,6.343-14.167,14.167-14.167                                                      
-              c7.825,0,14.167,6.343,14.167,14.167C46.006,30.291,39.664,36.634,31.839,36.634 M31.846,6.226                                                                
-              c-8.984,0-16.266,7.282-16.266,16.265s7.282,16.266,16.266,16.266s16.265-7.283,16.265-16.266S40.83,6.226,31.846,6.226"/>
-      <path fill="#FFFFFF" d="M34.338,22.349H34.32h-4.425h-0.018v-3.556h0.018h4.425h0.018c0.982,0,1.778,0.796,1.778,1.777                                                
-              C36.116,21.552,35.32,22.349,34.338,22.349 M27.611,14.552c-1.261,0-2.284,1.022-2.284,2.284v12.392                                                           
-              c0,1.261,1.023,2.285,2.284,2.285c1.263,0,2.284-1.024,2.284-2.285v-2.636h4.425v-0.009c3.322,0,6.017-2.693,6.017-6.015                                       
-              c0-3.323-2.694-6.016-6.017-6.016"/>
-    </symbol>
-  </svg>
+		<symbol id="icon-cog" viewBox="0 0 1024 1024">
+			<title>cog</title>
+			<path class="path1" d="M585.143 512q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429 42.857 103.429 103.429 42.857 103.429-42.857 42.857-103.429zM877.714 449.714v126.857q0 6.857-4.571 13.143t-11.429 7.429l-105.714 16q-10.857 30.857-22.286 52 20 28.571 61.143 78.857 5.714 6.857 5.714 14.286t-5.143 13.143q-15.429 21.143-56.571 61.714t-53.714 40.571q-6.857 0-14.857-5.143l-78.857-61.714q-25.143 13.143-52 21.714-9.143 77.714-16.571 106.286-4 16-20.571 16h-126.857q-8 0-14-4.857t-6.571-12.286l-16-105.143q-28-9.143-51.429-21.143l-80.571 61.143q-5.714 5.143-14.286 5.143-8 0-14.286-6.286-72-65.143-94.286-96-4-5.714-4-13.143 0-6.857 4.571-13.143 8.571-12 29.143-38t30.857-40.286q-15.429-28.571-23.429-56.571l-104.571-15.429q-7.429-1.143-12-7.143t-4.571-13.429v-126.857q0-6.857 4.571-13.143t10.857-7.429l106.286-16q8-26.286 22.286-52.571-22.857-32.571-61.143-78.857-5.714-6.857-5.714-13.714 0-5.714 5.143-13.143 14.857-20.571 56.286-61.429t54-40.857q7.429 0 14.857 5.714l78.857 61.143q25.143-13.143 52-21.714 9.143-77.714 16.571-106.286 4-16 20.571-16h126.857q8 0 14 4.857t6.571 12.286l16 105.143q28 9.143 51.429 21.143l81.143-61.143q5.143-5.143 13.714-5.143 7.429 0 14.286 5.714 73.714 68 94.286 97.143 4 4.571 4 12.571 0 6.857-4.571 13.143-8.571 12-29.143 38t-30.857 40.286q14.857 28.571 23.429 56l104.571 16q7.429 1.143 12 7.143t4.571 13.429z"></path>
+		</symbol>
+		<symbol id="icon-lock" viewBox="0 0 658 1024">
+			<title>lock</title>
+			<path class="path1" d="M182.857 438.857h292.571v-109.714q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429v109.714zM658.286 493.714v329.143q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-329.143q0-22.857 16-38.857t38.857-16h18.286v-109.714q0-105.143 75.429-180.571t180.571-75.429 180.571 75.429 75.429 180.571v109.714h18.286q22.857 0 38.857 16t16 38.857z"></path>
+		</symbol>
+		<symbol id="icon-edit" viewBox="0 0 1024 1024">
+			<title>edit</title>
+			<path class="path1" d="M507.429 676.571l66.286-66.286-86.857-86.857-66.286 66.286v32h54.857v54.857h32zM758.857 265.143q-9.143-9.143-18.857 0.571l-200 200q-9.714 9.714-0.571 18.857t18.857-0.571l200-200q9.714-9.714 0.571-18.857zM804.571 604.571v108.571q0 68-48.286 116.286t-116.286 48.286h-475.429q-68 0-116.286-48.286t-48.286-116.286v-475.429q0-68 48.286-116.286t116.286-48.286h475.429q36 0 66.857 14.286 8.571 4 10.286 13.143 1.714 9.714-5.143 16.571l-28 28q-8 8-18.286 4.571-13.143-3.429-25.714-3.429h-475.429q-37.714 0-64.571 26.857t-26.857 64.571v475.429q0 37.714 26.857 64.571t64.571 26.857h475.429q37.714 0 64.571-26.857t26.857-64.571v-72q0-7.429 5.143-12.571l36.571-36.571q8.571-8.571 20-4t11.429 16.571zM749.714 182.857l164.571 164.571-384 384h-164.571v-164.571zM1003.429 258.286l-52.571 52.571-164.571-164.571 52.571-52.571q16-16 38.857-16t38.857 16l86.857 86.857q16 16 16 38.857t-16 38.857z"></path>
+		</symbol>
+		<symbol id="icon-arrows" viewBox="0 0 1024 1024">
+			<title>arrows</title>
+			<path class="path1" d="M1024 512q0 14.857-10.857 25.714l-146.286 146.286q-10.857 10.857-25.714 10.857t-25.714-10.857-10.857-25.714v-73.143h-219.429v219.429h73.143q14.857 0 25.714 10.857t10.857 25.714-10.857 25.714l-146.286 146.286q-10.857 10.857-25.714 10.857t-25.714-10.857l-146.286-146.286q-10.857-10.857-10.857-25.714t10.857-25.714 25.714-10.857h73.143v-219.429h-219.429v73.143q0 14.857-10.857 25.714t-25.714 10.857-25.714-10.857l-146.286-146.286q-10.857-10.857-10.857-25.714t10.857-25.714l146.286-146.286q10.857-10.857 25.714-10.857t25.714 10.857 10.857 25.714v73.143h219.429v-219.429h-73.143q-14.857 0-25.714-10.857t-10.857-25.714 10.857-25.714l146.286-146.286q10.857-10.857 25.714-10.857t25.714 10.857l146.286 146.286q10.857 10.857 10.857 25.714t-10.857 25.714-25.714 10.857h-73.143v219.429h219.429v-73.143q0-14.857 10.857-25.714t25.714-10.857 25.714 10.857l146.286 146.286q10.857 10.857 10.857 25.714z"></path>
+		</symbol>
+		<symbol id="icon-times-circle" viewBox="0 0 1024 1024">
+			<title>times-circle</title>
+			<path class="path1" d="M656.571 641.143q0-14.857-10.857-25.714l-103.429-103.429 103.429-103.429q10.857-10.857 10.857-25.714 0-15.429-10.857-26.286l-51.429-51.429q-10.857-10.857-26.286-10.857-14.857 0-25.714 10.857l-103.429 103.429-103.429-103.429q-10.857-10.857-25.714-10.857-15.429 0-26.286 10.857l-51.429 51.429q-10.857 10.857-10.857 26.286 0 14.857 10.857 25.714l103.429 103.429-103.429 103.429q-10.857 10.857-10.857 25.714 0 15.429 10.857 26.286l51.429 51.429q10.857 10.857 26.286 10.857 14.857 0 25.714-10.857l103.429-103.429 103.429 103.429q10.857 10.857 25.714 10.857 15.429 0 26.286-10.857l51.429-51.429q10.857-10.857 10.857-26.286zM877.714 512q0 119.429-58.857 220.286t-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857 220.286 58.857 159.714 159.714 58.857 220.286z"></path>
+		</symbol>
+		<symbol id="icon-check-circle" viewBox="0 0 1024 1024">
+			<title>check-circle</title>
+			<path class="path1" d="M733.714 419.429q0-16-10.286-26.286l-52-51.429q-10.857-10.857-25.714-10.857t-25.714 10.857l-233.143 232.571-129.143-129.143q-10.857-10.857-25.714-10.857t-25.714 10.857l-52 51.429q-10.286 10.286-10.286 26.286 0 15.429 10.286 25.714l206.857 206.857q10.857 10.857 25.714 10.857 15.429 0 26.286-10.857l310.286-310.286q10.286-10.286 10.286-25.714zM877.714 512q0 119.429-58.857 220.286t-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857 220.286 58.857 159.714 159.714 58.857 220.286z"></path>
+		</symbol>
+		<symbol id="icon-eye" viewBox="0 0 1024 1024">
+			<title>eye</title>
+			<path class="path1" d="M950.857 548.571q-86.857-134.857-217.714-201.714 34.857 59.429 34.857 128.571 0 105.714-75.143 180.857t-180.857 75.143-180.857-75.143-75.143-180.857q0-69.143 34.857-128.571-130.857 66.857-217.714 201.714 76 117.143 190.571 186.571t248.286 69.429 248.286-69.429 190.571-186.571zM539.429 329.143q0-11.429-8-19.429t-19.429-8q-71.429 0-122.571 51.143t-51.143 122.571q0 11.429 8 19.429t19.429 8 19.429-8 8-19.429q0-49.143 34.857-84t84-34.857q11.429 0 19.429-8t8-19.429zM1024 548.571q0 19.429-11.429 39.429-80 131.429-215.143 210.571t-285.429 79.143-285.429-79.429-215.143-210.286q-11.429-20-11.429-39.429t11.429-39.429q80-130.857 215.143-210.286t285.429-79.429 285.429 79.429 215.143 210.286q11.429 20 11.429 39.429z"></path>
+		</symbol>
+		<symbol id="icon-eye-slash" viewBox="0 0 1024 1024">
+			<title>eye-slash</title>
+			<path class="path1" d="M317.143 762.857l44.571-80.571q-49.714-36-77.714-90.857t-28-116q0-69.143 34.857-128.571-130.857 66.857-217.714 201.714 95.429 147.429 244 214.286zM539.429 329.143q0-11.429-8-19.429t-19.429-8q-71.429 0-122.571 51.143t-51.143 122.571q0 11.429 8 19.429t19.429 8 19.429-8 8-19.429q0-49.143 34.857-84t84-34.857q11.429 0 19.429-8t8-19.429zM746.857 220q0 4-0.571 5.143-60 107.429-180 323.429t-180.571 324l-28 50.857q-5.714 9.143-16 9.143-6.857 0-76.571-40-9.143-5.714-9.143-16 0-6.857 25.143-49.714-81.714-37.143-150.571-98.857t-119.143-140q-11.429-17.714-11.429-39.429t11.429-39.429q87.429-134.286 217.143-212t283.429-77.714q50.857 0 102.857 9.714l30.857-55.429q5.714-9.143 16-9.143 2.857 0 10.286 3.429t17.714 8.857 18.857 10.571 18 10.571 11.143 6.571q9.143 5.714 9.143 15.429zM768 475.429q0 79.429-45.143 144.857t-119.429 94l160-286.857q4.571 25.714 4.571 48zM1024 548.571q0 20-11.429 39.429-22.286 36.571-62.286 82.857-85.714 98.286-198.571 152.571t-239.714 54.286l42.286-75.429q121.143-10.286 224.286-78.286t172.286-175.429q-65.714-102.286-161.143-168l36-64q54.286 36.571 104.286 87.429t82.571 105.143q11.429 19.429 11.429 39.429z"></path>
+		</symbol>
+		<symbol id="icon-key" viewBox="0 0 1024 1024">
+			<title>key</title>
+			<path class="path1" d="M475.429 292.571q0-45.714-32-77.714t-77.714-32-77.714 32-32 77.714q0 24 10.857 47.429-23.429-10.857-47.429-10.857-45.714 0-77.714 32t-32 77.714 32 77.714 77.714 32 77.714-32 32-77.714q0-24-10.857-47.429 23.429 10.857 47.429 10.857 45.714 0 77.714-32t32-77.714zM961.714 694.857q0 9.714-28 37.714t-37.714 28q-5.143 0-16.286-9.143t-20.857-18.857-22-22.857-14-14.857l-54.857 54.857 125.714 125.714q16 16 16 38.857 0 24-22.286 46.286t-46.286 22.286q-22.857 0-38.857-16l-383.429-383.429q-100.571 74.857-208.571 74.857-93.143 0-151.714-58.571t-58.571-151.714q0-91.429 54.286-178.857t141.714-141.714 178.857-54.286q93.143 0 151.714 58.571t58.571 151.714q0 108-74.857 208.571l202.857 202.857 54.857-54.857q-1.714-1.714-14.857-14t-22.857-22-18.857-20.857-9.143-16.286q0-9.714 28-37.714t37.714-28q7.429 0 13.143 5.714 3.429 3.429 26.286 25.429t46.857 45.429 49.429 49.143 41.714 44.571 16.286 23.429z"></path>
+		</symbol>
+		<symbol id="icon-upload" viewBox="0 0 951 1024">
+			<title>upload</title>
+			<path class="path1" d="M731.429 841.143q0-14.857-10.857-25.714t-25.714-10.857-25.714 10.857-10.857 25.714 10.857 25.714 25.714 10.857 25.714-10.857 10.857-25.714zM877.714 841.143q0-14.857-10.857-25.714t-25.714-10.857-25.714 10.857-10.857 25.714 10.857 25.714 25.714 10.857 25.714-10.857 10.857-25.714zM950.857 713.143v182.857q0 22.857-16 38.857t-38.857 16h-841.143q-22.857 0-38.857-16t-16-38.857v-182.857q0-22.857 16-38.857t38.857-16h244q12 32 40.286 52.571t63.143 20.571h146.286q34.857 0 63.143-20.571t40.286-52.571h244q22.857 0 38.857 16t16 38.857zM765.143 342.857q-9.714 22.857-33.714 22.857h-146.286v256q0 14.857-10.857 25.714t-25.714 10.857h-146.286q-14.857 0-25.714-10.857t-10.857-25.714v-256h-146.286q-24 0-33.714-22.857-9.714-22.286 8-39.429l256-256q10.286-10.857 25.714-10.857t25.714 10.857l256 256q17.714 17.143 8 39.429z"></path>
+		</symbol>
+		<symbol id="icon-unlock" viewBox="0 0 951 1024">
+			<title>unlock</title>
+			<path class="path1" d="M950.857 329.143v146.286q0 14.857-10.857 25.714t-25.714 10.857h-36.571q-14.857 0-25.714-10.857t-10.857-25.714v-146.286q0-60.571-42.857-103.429t-103.429-42.857-103.429 42.857-42.857 103.429v109.714h54.857q22.857 0 38.857 16t16 38.857v329.143q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-329.143q0-22.857 16-38.857t38.857-16h384v-109.714q0-105.714 75.143-180.857t180.857-75.143 180.857 75.143 75.143 180.857z"></path>
+		</symbol>
+		<symbol id="icon-flask" viewBox="0 0 951 1024">
+			<title>flask</title>
+			<path class="path1" d="M872.571 827.429q32 50.857 12.286 87.143t-80.286 36.286h-658.286q-60.571 0-80.286-36.286t12.286-87.143l287.429-453.143v-228h-36.571q-14.857 0-25.714-10.857t-10.857-25.714 10.857-25.714 25.714-10.857h292.571q14.857 0 25.714 10.857t10.857 25.714-10.857 25.714-25.714 10.857h-36.571v228zM427.429 413.143l-155.429 245.143h406.857l-155.429-245.143-11.429-17.714v-249.143h-73.143v249.143z"></path>
+		</symbol>
+		<symbol id="icon-copy" viewBox="0 0 1024 1024">
+			<title>copy</title>
+			<path class="path1" d="M969.143 219.429q22.857 0 38.857 16t16 38.857v694.857q0 22.857-16 38.857t-38.857 16h-548.571q-22.857 0-38.857-16t-16-38.857v-164.571h-310.857q-22.857 0-38.857-16t-16-38.857v-384q0-22.857 11.429-50.286t27.429-43.429l233.143-233.143q16-16 43.429-27.429t50.286-11.429h237.714q22.857 0 38.857 16t16 38.857v187.429q38.857-22.857 73.143-22.857h237.714zM658.286 341.143l-170.857 170.857h170.857v-170.857zM292.571 121.714l-170.857 170.857h170.857v-170.857zM404.571 491.429l180.571-180.571v-237.714h-219.429v237.714q0 22.857-16 38.857t-38.857 16h-237.714v365.714h292.571v-146.286q0-22.857 11.429-50.286t27.429-43.429zM950.857 950.857v-658.286h-219.429v237.714q0 22.857-16 38.857t-38.857 16h-237.714v365.714h512z"></path>
+		</symbol>
+		<symbol id="icon-laptop" viewBox="0 0 1097 1024">
+			<title>laptop</title>
+			<path class="path1" d="M237.714 731.429q-37.714 0-64.571-26.857t-26.857-64.571v-402.286q0-37.714 26.857-64.571t64.571-26.857h621.714q37.714 0 64.571 26.857t26.857 64.571v402.286q0 37.714-26.857 64.571t-64.571 26.857h-621.714zM219.429 237.714v402.286q0 7.429 5.429 12.857t12.857 5.429h621.714q7.429 0 12.857-5.429t5.429-12.857v-402.286q0-7.429-5.429-12.857t-12.857-5.429h-621.714q-7.429 0-12.857 5.429t-5.429 12.857zM1005.714 768h91.429v54.857q0 22.857-26.857 38.857t-64.571 16h-914.286q-37.714 0-64.571-16t-26.857-38.857v-54.857h1005.714zM594.286 822.857q9.143 0 9.143-9.143t-9.143-9.143h-91.429q-9.143 0-9.143 9.143t9.143 9.143h91.429z"></path>
+		</symbol>
+		<symbol id="icon-dropbox" viewBox="0 0 1024 1024">
+			<title>dropbox</title>
+			<path class="path1" d="M229.714 404l282.286 174.286-195.429 162.857-280-182.286zM793.143 721.143v61.714l-280 167.429v0.571l-0.571-0.571-0.571 0.571v-0.571l-279.429-167.429v-61.714l84 54.857 195.429-162.286v-1.143l0.571 0.571 0.571-0.571v1.143l196 162.286zM316.571 67.429l195.429 162.857-282.286 173.714-193.143-154.286zM794.286 404l193.143 154.857-279.429 182.286-196-162.857zM708 67.429l279.429 182.286-193.143 154.286-282.286-173.714z"></path>
+		</symbol>
+		<symbol id="icon-onedrive" viewBox="0 0 1024 1024">
+			<title>onedrive</title>
+			<path class="path1" d="M350.868 828.388c-60.274-15.060-93.856-62.97-93.962-134.064-0.032-22.726 1.612-33.62 7.286-48.236 13.908-35.834 50.728-62.872 99.176-72.822 24.11-4.95 31.536-10.266 31.536-22.572 0-3.862 2.872-15.36 6.378-25.552 15.932-46.306 45.43-84.91 76.948-100.702 32.99-16.526 49.642-20.254 89.548-20.040 56.674 0.304 84.952 12.598 124.496 54.128l21.75 22.842 19.484-6.742c94.3-32.636 188.306 22.916 195.888 115.756l2.072 25.398 18.57 6.65c53.032 19.004 77.96 58.904 73.442 117.556-2.958 38.358-20.89 68.98-49.3 84.184l-13.356 7.146-296.822 0.57c-228.094 0.44-300.6-0.368-313.134-3.5v0zM103.218 785.966c-36.176-9.086-74.506-42.854-92.48-81.47-10.196-21.906-10.738-25.128-10.738-63.88 0-36.864 0.87-42.778 8.988-61.080 17.11-38.582 49.894-66.46 91.030-77.408 8.684-2.312 16.842-6 18.128-8.196 1.29-2.198 2.722-14.164 3.182-26.592 2.866-77.196 50.79-145.214 117.708-167.056 36.154-11.8 83.572-12.898 122.896 3.726 12.47 5.274 11.068 6.404 37.438-30.14 15.594-21.612 45.108-44.49 70.9-58.18 27.838-14.776 56.792-21.584 91.412-21.494 96.768 0.252 180.166 64.22 211.004 161.848 9.854 31.192 9.362 39.926-2.26 40.184-5.072 0.112-19.604 3.064-32.292 6.558l-23.072 6.358-21.052-22.25c-59.362-62.734-156.238-76.294-238.592-33.396-32.9 17.138-59.34 41.746-79.31 73.81-14.236 22.858-32.39 65.504-32.39 76.094 0 7.51-5.754 11.264-30.332 19.782-76.094 26.376-120.508 87.282-120.476 165.218 0.010 28.368 6.922 63.074 16.52 82.956 3.618 7.494 5.634 14.622 4.484 15.836-2.946 3.106-97.608 2.060-110.696-1.228v0z"></path>
+		</symbol>
+		<symbol id="icon-apple" viewBox="0 0 805 1024">
+			<title>apple</title>
+			<path class="path1" d="M796 694.286q-22.286 71.429-70.286 142.857-73.714 112-146.857 112-28 0-80-18.286-49.143-18.286-86.286-18.286-34.857 0-81.143 18.857-46.286 19.429-75.429 19.429-86.857 0-172-148-84-149.143-84-287.429 0-130.286 64.571-213.714 64-82.286 162.286-82.286 41.143 0 101.143 17.143 59.429 17.143 78.857 17.143 25.714 0 81.714-19.429 58.286-19.429 98.857-19.429 68 0 121.714 37.143 29.714 20.571 59.429 57.143-45.143 38.286-65.143 67.429-37.143 53.714-37.143 118.286 0 70.857 39.429 127.429t90.286 72zM581.143 24q0 34.857-16.571 77.714-17.143 42.857-53.143 78.857-30.857 30.857-61.714 41.143-21.143 6.286-59.429 9.714 1.714-85.143 44.571-146.857 42.286-61.143 142.857-84.571 0.571 1.714 1.429 6.286t1.429 6.286q0 2.286 0.286 5.714t0.286 5.714z"></path>
+		</symbol>
+		<symbol id="icon-windows" viewBox="0 0 951 1024">
+			<title>windows</title>
+			<path class="path1" d="M389.714 574.857v372l-389.714-53.714v-318.286h389.714zM389.714 150.286v376.571h-389.714v-322.857zM950.857 574.857v449.143l-518.286-71.429v-377.714h518.286zM950.857 73.143v453.714h-518.286v-382.286z"></path>
+		</symbol>
+		<symbol id="icon-android" viewBox="0 0 805 1024">
+			<title>android</title>
+			<path class="path1" d="M281.714 276q9.143 0 15.714-6.571t6.571-15.714-6.571-15.714-15.714-6.571-15.429 6.571-6.286 15.714 6.286 15.714 15.429 6.571zM522.857 276q9.143 0 15.429-6.571t6.286-15.714-6.286-15.714-15.429-6.571-15.714 6.571-6.571 15.714 6.571 15.714 15.714 6.571zM58.857 381.143q24 0 41.143 17.143t17.143 41.143v245.714q0 24.571-16.857 41.714t-41.429 17.143-41.714-17.143-17.143-41.714v-245.714q0-24 17.143-41.143t41.714-17.143zM664.571 392v380.571q0 26.286-18.286 44.571t-44 18.286h-42.857v129.714q0 24.571-17.143 41.714t-41.714 17.143-41.714-17.143-17.143-41.714v-129.714h-78.857v129.714q0 24.571-17.143 41.714t-41.714 17.143q-24 0-41.143-17.143t-17.143-41.714l-0.571-129.714h-42.286q-26.286 0-44.571-18.286t-18.286-44.571v-380.571h524.571zM532 160.571q61.143 31.429 97.714 87.714t36.571 123.143h-528.571q0-66.857 36.571-123.143t98.286-87.714l-40.571-74.857q-4-7.429 2.857-11.429 7.429-3.429 11.429 3.429l41.143 75.429q54.286-24 114.857-24t114.857 24l41.143-75.429q4-6.857 11.429-3.429 6.857 4 2.857 11.429zM804.571 439.429v245.714q0 24.571-17.143 41.714t-41.714 17.143q-24 0-41.143-17.143t-17.143-41.714v-245.714q0-24.571 17.143-41.429t41.143-16.857q24.571 0 41.714 16.857t17.143 41.429z"></path>
+		</symbol>
+		<symbol id="icon-linux" viewBox="0 0 1024 1024">
+			<title>linux</title>
+			<path class="path1" d="M378.857 234.857q-6.286 0.571-8.857 6t-4.857 5.429q-2.857 0.571-2.857-2.857 0-6.857 10.857-8.571h5.714zM428.571 242.857q-2.286 0.571-6.571-3.714t-10-2.571q13.714-6.286 18.286 1.143 1.714 3.429-1.714 5.143zM228 486.857q-2.286-0.571-3.429 1.714t-2.571 7.143-3.143 7.714-5.714 7.429q-4 5.714-0.571 6.857 2.286 0.571 7.143-4t7.143-10.286q0.571-1.714 1.143-4t1.143-3.429 0.857-2.571 0.286-2.286v-1.714t-0.571-1.429-1.714-1.143zM716.571 692q0-10.286-31.429-24 2.286-8.571 4.286-15.714t2.857-14.857 1.714-12.286 0.286-12.857-0.571-11.143-2-12.571-2.286-11.714-2.857-14.286-3.143-15.143q-5.714-27.429-26.857-58.857t-41.143-42.857q13.714 11.429 32.571 47.429 49.714 92.571 30.857 158.857-6.286 22.857-28.571 24-17.714 2.286-22-10.571t-4.571-47.714-6.571-61.143q-5.143-22.286-11.143-39.429t-11.143-26-8.857-14-7.429-8.571-4.286-4q-8-35.429-17.714-58.857t-16.857-32-13.429-18.857-8.571-22.857q-2.286-12 3.429-30.571t2.571-28.286-25.429-14.286q-8.571-1.714-25.429-10.286t-20.286-9.143q-4.571-0.571-6.286-14.857t4.571-29.143 20.571-15.429q21.143-1.714 29.143 17.143t2.286 33.143q-6.286 10.857-1.143 15.143t17.143 0.286q7.429-2.286 7.429-20.571v-21.143q-2.857-17.143-7.714-28.571t-12-17.429-13.429-8.571-15.429-4.286q-61.143 4.571-50.857 76.571 0 8.571-0.571 8.571-5.143-5.143-16.857-6t-18.857 0.286-8.857-2.857q0.571-32.571-9.143-51.429t-25.714-19.429q-15.429-0.571-23.714 15.714t-9.429 34q-0.571 8.571 2 21.143t7.429 21.429 8.857 7.714q5.714-1.714 9.143-8 2.286-5.143-4-4.571-4 0-8.857-8.286t-5.429-19.143q-0.571-12.571 5.143-21.143t19.429-8q9.714 0 15.429 12t5.429 22.286-0.857 12.571q-12.571 8.571-17.714 16.571-4.571 6.857-15.714 13.429t-11.714 7.143q-7.429 8-8.857 15.429t4.286 10.286q8 4.571 14.286 11.143t9.143 10.857 10.571 7.429 20.286 3.714q26.857 1.143 58.286-8.571 1.143-0.571 13.143-4t19.714-6 16.857-7.429 12-10q5.143-8 11.429-4.571 2.857 1.714 3.714 4.857t-1.714 6.857-9.429 5.429q-11.429 3.429-32.286 12.286t-26 11.143q-25.143 10.857-40 13.143-14.286 2.857-45.143-1.143-5.714-1.143-5.143 1.143t9.714 10.857q14.286 13.143 38.286 12.571 9.714-0.571 20.571-4t20.571-8 19.143-10 17.143-9.714 14-6.857 10-1.429 4.857 6.286q0 1.143-0.571 2.571t-2.286 2.857-3.429 2.571-4.857 2.857-5.143 2.571-5.714 2.857-5.429 2.571q-16 8-38.571 25.143t-38 24.571-28 0.571q-12-6.286-36-41.714-12.571-17.714-14.286-12.571-0.571 1.714-0.571 5.714 0 14.286-8.571 32.286t-16.857 31.714-12 33.143 6.571 36q-13.143 3.429-35.714 51.429t-27.143 80.571q-1.143 10.286-0.857 39.429t-3.143 33.714q-4.571 13.714-16.571 1.714-18.286-17.714-20.571-53.714-1.143-16 2.286-32 2.286-10.857-0.571-10.286l-2.286 2.857q-20.571 37.143 5.714 94.857 2.857 6.857 14.286 16t13.714 11.429q11.429 13.143 59.429 51.714t53.143 43.714q9.143 8.571 10 21.714t-8 24.571-26 13.143q4.571 8.571 16.571 25.429t16 30.857 4 40.286q26.286-13.714 4-52.571-2.286-4.571-6-9.143t-5.429-6.857-1.143-3.429q1.714-2.857 7.429-5.429t11.429 1.429q26.286 29.714 94.857 20.571 76-8.571 101.143-49.714 13.143-21.714 19.429-17.143 6.857 3.429 5.714 29.714-0.571 14.286-13.143 52.571-5.143 13.143-3.429 21.429t13.714 8.857q1.714-10.857 8.286-44t7.714-51.429q1.143-12-3.714-42t-4.286-55.429 13.143-40.286q8.571-10.286 29.143-10.286 0.571-21.143 19.714-30.286t41.429-6 34.286 12.857zM357.714 219.429q1.714-9.714-1.429-17.143t-6.571-8.571q-5.143-1.143-5.143 4 1.143 2.857 2.857 3.429 5.714 0 4 8.571-1.714 11.429 4.571 11.429 1.714 0 1.714-1.714zM597.143 332q-1.143-4.571-3.714-6.571t-7.429-2.857-8.286-3.143q-2.857-1.714-5.429-4.571t-4-4.571-3.143-3.714-2.286-2.286-2.286 0.857q-8 9.143 4 24.857t22.286 18q5.143 0.571 8.286-4.571t2-11.429zM495.429 210.286q0-6.286-2.857-11.143t-6.286-7.143-5.143-1.714q-8 0.571-4 4l2.286 1.143q8 2.286 10.286 17.714 0 1.714 4.571-1.143zM526.286 77.143q0-1.143-1.429-2.857t-5.143-4-5.429-3.429q-8.571-8.571-13.714-8.571-5.143 0.571-6.571 4.286t-0.571 7.429-0.286 7.143q-0.571 2.286-3.429 6t-3.429 5.143 1.714 4.857q2.286 1.714 4.571 0t6.286-5.143 8.571-5.143q0.571-0.571 5.143-0.571t8.571-1.143 5.143-4zM849.143 843.429q11.429 6.857 17.714 14t6.857 13.714-1.429 12.857-8.857 12.571-13.429 11.143-17.143 10.571-18 9.429-18.286 8.857-15.429 7.429q-21.714 10.857-48.857 32t-43.143 36.571q-9.714 9.143-38.857 11.143t-50.857-8.286q-10.286-5.143-16.857-13.429t-9.429-14.571-12.571-11.143-26.857-5.429q-25.143-0.571-74.286-0.571-10.857 0-32.571 0.857t-33.143 1.429q-25.143 0.571-45.429 8.571t-30.571 17.143-24.857 16.286-30.571 6.571q-16.571-0.571-63.429-17.714t-83.429-24.571q-10.857-2.286-29.143-5.429t-28.571-5.143-22.571-5.429-19.143-8.286-9.714-11.143q-5.714-13.143 4-38t10.286-31.143q0.571-9.143-2.286-22.857t-5.714-24.286-2.571-20.857 6-15.429q8-6.857 32.571-8t34.286-6.857q17.143-10.286 24-20t6.857-29.143q12 41.714-18.286 60.571-18.286 11.429-47.429 8.571-19.429-1.714-24.571 5.714-7.429 8.571 2.857 32.571 1.143 3.429 4.571 10.286t4.857 10.286 2.571 9.714 0.571 12.571q0 8.571-9.714 28t-8 27.429q1.714 9.714 21.143 14.857 11.429 3.429 48.286 10.571t56.857 11.714q13.714 3.429 42.286 12.571t47.143 13.143 31.714 2.286q24.571-3.429 36.857-16t13.143-27.429-4.286-33.429-10.857-29.714-11.429-20.857q-69.143-108.571-96.571-138.286-38.857-42.286-64.571-22.857-6.286 5.143-8.571-8.571-1.714-9.143-1.143-21.714 0.571-16.571 5.714-29.714t13.714-26.857 12.571-24q4.571-12 15.143-41.143t16.857-44.571 17.143-34.857 22.286-30.857q62.857-81.714 70.857-111.429-6.857-64-9.143-177.143-1.143-51.429 13.714-86.571t60.571-59.714q22.286-12 59.429-12 30.286-0.571 60.571 7.714t50.857 23.714q32.571 24 52.286 69.429t16.857 84.286q-2.857 54.286 17.143 122.286 19.429 64.571 76 124.571 31.429 33.714 56.857 93.143t34 109.143q4.571 28 2.857 48.286t-6.857 31.714-11.429 12.571q-5.714 1.143-13.429 10.857t-15.429 20.286-23.143 19.143-34.857 8q-10.286-0.571-18-2.857t-12.857-7.714-7.714-8.857-6.571-11.714-5.143-11.143q-12.571-21.143-23.429-17.143t-16 28 4 55.429q11.429 40 0.571 111.429-5.714 37.143 10.286 57.429t41.714 18.857 48.571-20.286q33.714-28 51.143-38t59.143-24.286q30.286-10.286 44-20.857t10.571-19.714-14.286-16.286-29.429-13.429q-18.857-6.286-28.286-27.429t-8.571-41.429 8.857-27.143q0.571 17.714 4.571 32.286t8.286 23.143 11.714 16.286 12 10.857 12.286 7.429 9.429 5.429z"></path>
+		</symbol>
+		<symbol id="icon-google" viewBox="0 0 731 1024">
+			<title>google</title>
+			<path class="path1" d="M560.571 765.143q0-14.286-4-28t-8.286-24-15.429-23.714-16.857-20-22-19.714-20.857-16.571-23.714-17.143-20.857-14.857q-9.143-1.143-28-1.143-30.286 0-59.714 4t-61.143 14.286-55.429 26.286-39.143 42.571-15.429 60.286q0 32 13.429 58.286t34.857 43.143 49.714 28.571 57.143 16.571 58 4.857q33.143 0 63.714-7.429t56.571-22.286 41.714-41.714 15.714-62.286zM493.714 274.857q0-33.714-9.714-71.714t-27.429-73.714-48-59.143-66.857-23.429q-24 0-47.143 11.143t-38 30q-26.286 33.714-26.286 91.429 0 26.286 5.714 55.714t18 58.857 29.714 52.857 42.857 38.286 55.143 14.857q21.143 0 44.286-9.429t37.429-24.857q30.286-32 30.286-90.857zM429.714 0h238.286l-78.286 50.286h-75.429q42.857 36 64.571 76t21.714 91.429q0 41.143-14 74t-34 53.143-39.714 37.143-33.714 35.143-14 37.714q0 20.571 18.286 40.286t44 38.857 51.714 42 44.286 59.429 18.286 81.143q0 52-28 98.857-40.571 69.714-119.714 102.571t-170.571 32.857q-75.429 0-140.857-23.714t-98.571-78.571q-20.571-33.714-20.571-74.857 0-46.286 25.429-85.714t67.714-65.714q74.857-46.857 230.857-57.143-18.286-23.429-27.143-42t-8.857-42q0-22.857 12-48.571-26.286 2.286-38.857 2.286-84.571 0-142.571-55.143t-58-139.714q0-46.857 20.571-90.857t56.571-74.857q43.429-37.714 104-56t124.571-18.286z"></path>
+		</symbol>
+		<symbol id="icon-link" viewBox="0 0 1800 1800">
+			<title>Link</title>
+			<path id="fa-link" d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"></path>
+		</symbol>
+		<symbol id="icon-key2" viewBox="0 0 1024 1024">
+			<title>key2</title>
+			<path class="path1" d="M704.128 0c-176.736 0-320 143.296-320 320 0 41.12 8.608 80.032 22.816 116.128l-388.768 388.736c-11.232 11.264-18.176 21.952-18.176 39.136v96c0 34.24 29.728 64 64 64h96c17.152 0 28-6.88 39.232-18.048l45.92-45.952h74.976c35.328 0 64-28.672 64-64v-64h64c35.328 0 64-28.672 64-64v-75.008l75.808-75.872c36.128 14.24 75.008 22.88 116.192 22.88 176.672 0 320-143.296 320-320s-143.328-320-320-320zM704.128 576c-47.36 0-91.264-13.76-129.312-36.224l-11.008 10.976-96.96 96.992c-12 12-18.752 28.256-18.752 45.248v75.008h-64c-35.328 0-64 28.64-64 64v64h-74.944c-16.96 0-33.248 6.752-45.248 18.752l-45.376 45.376-90.432-0.128-0.096-91.2 373.28-372.608c0 0 0 0.032 0.032 0.064l47.008-47.008c-22.464-38.048-36.224-81.92-36.224-129.28 0-141.376 114.656-256 256-256s256 114.624 256 256-114.592 256.032-255.968 256.032zM890.24 263.648c-35.872-49.984-79.552-93.6-129.76-129.728-8.16-5.92-18.72-7.392-28.224-4.064-44.448 15.648-74.88 46.048-90.432 90.496-1.184 3.328-1.76 6.784-1.76 10.208 0 6.368 1.984 12.672 5.824 18.016 36 50.048 79.616 93.696 129.696 129.696 8.192 5.888 18.688 7.392 28.192 4.096 44.512-15.552 74.944-46.016 90.56-90.496 1.184-3.328 1.76-6.784 1.76-10.208-0.032-6.368-2.048-12.672-5.856-18.016zM794.24 352.32c-47.296-34.016-88.48-75.2-122.24-121.376 12.384-35.296 35.552-58.464 69.824-71.072 47.328 34.080 88.448 75.168 122.112 121.952-12.512 35.040-35.616 58.080-69.696 70.496z"></path>
+		</symbol>
+		<symbol id="icon-lock2" viewBox="0 0 1024 1024">
+			<title>lock2</title>
+			<path class="path1" d="M800 416v-128c0-159.072-128.928-288-288-288s-288 128.928-288 288v128c-53.024 0-96 42.976-96 96v224c0 159.072 128.928 288 288 288h192c159.072 0 288-128.928 288-288v-224c0-53.056-43.008-96-96-96zM288 288c0-123.712 100.288-224 224-224s224 100.288 224 224v128h-64v-127.936c0-88.384-71.616-160-160-160s-160 71.616-160 160v127.936h-64v-128zM640 288v128h-256v-128c0-70.688 57.312-128 128-128s128 57.312 128 128zM832 608v128c0 123.488-100.512 224-224 224h-192c-123.488 0-224-100.512-224-224v-224c0-17.664 14.336-32 32-32 21.344 0 42.656 0 64 0h448c21.312 0 42.624 0 64 0 17.632 0 32 14.336 32 32v96zM512 608c35.328 0 64 28.64 64 64 0 19.488-10.496 56.576-21.312 85.824-8.736 23.616-17.664 42.112-42.688 42.112-23.008 0-33.952-18.688-42.656-42.432-10.688-29.184-21.344-66.080-21.344-85.504 0-35.36 28.672-64 64-64z"></path>
+		</symbol>
+		<symbol id="icon-eye2" viewBox="0 0 1024 1024">
+			<title>eye2</title>
+			<path class="path1" d="M1022.88 504.832c-0.32-1.344-0.128-2.784-0.64-4.096-0.192-0.544-0.672-0.832-0.864-1.344-0.32-0.768-0.256-1.632-0.672-2.368-92.8-177.632-294.816-304.896-507.936-304.896-213.152 0-415.136 127.072-508 304.672-0.416 0.736-0.352 1.6-0.672 2.368-0.224 0.512-0.672 0.8-0.864 1.344-0.512 1.312-0.32 2.752-0.64 4.096-0.576 2.4-1.12 4.704-1.12 7.168s0.576 4.736 1.12 7.168c0.32 1.344 0.128 2.784 0.64 4.096 0.192 0.544 0.672 0.832 0.864 1.344 0.32 0.768 0.256 1.632 0.672 2.368 92.832 177.632 294.848 304.896 508 304.896 213.12 0 415.136-127.072 507.936-304.672 0.448-0.736 0.384-1.6 0.672-2.368 0.192-0.512 0.672-0.8 0.864-1.344 0.512-1.312 0.32-2.752 0.64-4.096 0.544-2.432 1.12-4.736 1.12-7.168s-0.576-4.768-1.12-7.168zM512.736 767.616c-179.68 0-355.584-102.112-443.232-255.84 88.128-153.92 263.776-255.68 443.232-255.68 179.616 0 355.552 102.144 443.2 255.84-88.128 153.952-263.744 255.68-443.2 255.68zM512.736 383.968c8.832 0 15.936 7.136 15.936 16 0 8.8-7.136 15.968-15.936 15.968v0.032c-52.928 0-95.968 43.040-95.968 95.904 0 8.832-7.168 16-15.968 16-8.832 0-16-7.168-16-16 0-70.56 57.184-127.744 127.744-127.872 0.064 0 0.128-0.032 0.192-0.032zM512 288c-123.744 0-224 100.288-224 224s100.288 224 224 224c123.68 0 224-100.32 224-224 0-123.744-100.32-224-224-224zM512 704c-105.888 0-192-86.112-192-192s86.112-192 192-192c105.888 0 192 86.112 192 192s-86.112 192-192 192z"></path>
+		</symbol>
+		<symbol id="icon-folder" viewBox="0 0 1792 1792">
+			<title>folder</title>
+			<path d="M1728 608v704q0 92-66 158t-158 66h-1216q-92 0-158-66t-66-158v-960q0-92 66-158t158-66h320q92 0 158 66t66 158v32h672q92 0 158 66t66 158z" />
+		</symbol>
+		<symbol id="icon-pcloud" viewBox="0 0 64 64">
+			<title>pcloud</title>
+			<path d="M63.457,32.629c0-3.183-1.476-6.018-3.774-7.869c-0.91,1.838-2.474,3.286-4.382,4.072                                                         
+c2.723-1.408,4.588-4.243,4.588-7.518c0-4.675-3.784-8.415-8.459-8.415c-0.355,0-0.689,0.026-1.034,0.068                                                      
+c1.17,2.559,1.818,5.349,1.818,8.347c0,0.193-0.01,0.384-0.017,0.576C51.861,11.025,42.954,2.319,32.005,2.319                                                 
+c-10.916,0-19.806,8.657-20.19,19.481c-0.004-0.163-0.019-0.323-0.019-0.486c0-2.992,0.667-5.822,1.833-8.376                                                  
+C6.253,13.863,0.543,20.145,0.543,27.772c0,8.265,6.7,14.965,14.965,14.965h38.054v-0.017                                                                     
+C59.044,42.609,63.457,38.138,63.457,32.629" />
+			<path fill="#FFFFFF" d="M31.839,36.634c-7.824,0-14.167-6.343-14.167-14.167c0-7.823,6.343-14.167,14.167-14.167                                                      
+c7.825,0,14.167,6.343,14.167,14.167C46.006,30.291,39.664,36.634,31.839,36.634 M31.846,6.226                                                                
+c-8.984,0-16.266,7.282-16.266,16.265s7.282,16.266,16.266,16.266s16.265-7.283,16.265-16.266S40.83,6.226,31.846,6.226" />
+			<path fill="#FFFFFF" d="M34.338,22.349H34.32h-4.425h-0.018v-3.556h0.018h4.425h0.018c0.982,0,1.778,0.796,1.778,1.777                                                
+C36.116,21.552,35.32,22.349,34.338,22.349 M27.611,14.552c-1.261,0-2.284,1.022-2.284,2.284v12.392                                                           
+c0,1.261,1.023,2.285,2.284,2.285c1.263,0,2.284-1.024,2.284-2.285v-2.636h4.425v-0.009c3.322,0,6.017-2.693,6.017-6.015                                       
+c0-3.323-2.694-6.016-6.017-6.016" />
+		</symbol>
+	</svg>
 </template>
 
 <script>
-	export default {}
+export default {}
 </script>
 
 <style lang="scss">
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 </style>
\ No newline at end of file
diff --git a/src/components/Unlock.vue b/src/components/Unlock.vue
index f475eba7..aa78005f 100644
--- a/src/components/Unlock.vue
+++ b/src/components/Unlock.vue
@@ -1,3 +1,324 @@
+<script>
+import { parseUrl, getValidTokens } from '$lib/utils.js'
+
+import InfoCluster from '@/components/InfoCluster'
+import EntryList from '@/components/EntryList'
+import Spinner from 'vue-simple-spinner'
+import Messenger from '@/components/Messenger'
+
+export default {
+	props: {
+		/* Service dependeicies */
+		unlockedState: Object,
+		secureCache: Object,
+		settings: Object,
+		keepassService: Object,
+		links: Object
+	},
+	components: {
+		InfoCluster,
+		EntryList,
+		Spinner,
+		Messenger
+	},
+	data() {
+		return {
+			/* UI state data */
+			unlockedMessages: {
+				warn: "",
+				error: ""
+			},
+			generalMessages: {
+				warn: "",
+				error: "",
+				success: ""
+			},
+			busy: false,
+			masterPassword: "",
+			isMasterPasswordInputVisible: false,
+			keyFiles: [], // list of all available
+			selectedKeyFile: undefined, // chosen keyfile object
+			rememberPeriod: 0, // in minutes. default: do not remember
+			rememberPeriodText: "",
+			databaseFileName: "",
+			keyFilePicker: false,
+			appVersion: chrome.runtime.getManifest().version,
+			slider_options: [{
+				time: 0,
+				text: "Do not remember"
+			},
+			{
+				time: 30,
+				text: "Remember for 30 min."
+			},
+			{
+				time: 120,
+				text: "Remember for 2 hours."
+			},
+			{
+				time: 240,
+				text: "Remember for 4 hours."
+			},
+			{
+				time: 480,
+				text: "Remember for 8 hours."
+			},
+			{
+				time: 1440,
+				text: "Remember for 24 hours."
+			},
+			{
+				time: -1,
+				text: "Until browser exits."
+			}
+			],
+			slider_int: 0
+		}
+	},
+	computed: {
+		rememberPassword: function () {
+			return this.rememberPeriod !== 0
+		},
+		selectedKeyFileName: function () {
+			if (this.selectedKeyFile !== undefined)
+				return this.selectedKeyFile.name
+			return "No keyfile selected.  (click to change)"
+		}
+	},
+	watch: {
+		unlockedMessages: {
+			handler(newval) {
+				this.unlockedState.cacheSet('unlockedMessages', newval)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		setRememberPeriod(time_int) {
+			/* Args: optional time_int
+			 * if time_int is given, derive slider_int
+			 * else assume slider_int is alread set.
+			 */
+			let slider_option_index;
+			if (time_int !== undefined) {
+				this.slider_int = (t => {
+					for (let i = 0; i < this.slider_options.length; i++) {
+						if (this.slider_options[i].time === t)
+							return i;
+					}
+					return 0;
+				})(time_int);
+				slider_option_index = this.slider_int;
+			} else {
+				slider_option_index = parseInt(this.slider_int);
+			}
+			if (slider_option_index < this.slider_options.length) {
+				this.rememberPeriod = this.slider_options[slider_option_index].time;
+				this.rememberPeriodText = this.slider_options[slider_option_index].text;
+			}
+		},
+		closeWindow(event) {
+			window.close()
+		},
+		chooseKeyFile(index) {
+			if (index !== undefined)
+				if (index >= 0)
+					this.selectedKeyFile = this.keyFiles[index]
+				else
+					this.selectedKeyFile = undefined
+			this.keyFilePicker = false
+		},
+		chooseAnotherFile() {
+			this.unlockedState.clearBackgroundState()
+			this.secureCache.clear('secureCache.entries')
+			this.$router.route('/choose')
+		},
+		isUnlocked: function () {
+			return this.unlockedState.cache.allEntries !== undefined
+		},
+		forgetPassword() {
+			this.settings.getCurrentMasterPasswordCacheKey().then(key => {
+				if (key !== null)
+					this.secureCache.clear(key)
+			})
+			this.secureCache.clear('secureCache.entries')
+			this.unlockedState.clearClipboardState()
+			this.unlockedState.clearCache() // new
+		},
+		showResults(entries) {
+			let getMatchesForThreshold = (threshold, entries, requireEmptyURL = false) => {
+				return entries.filter(e => (e.matchRank >= threshold) && (requireEmptyURL ? !e.URL : true));
+			}
+			this.settings.getSetStrictModeEnabled().then(strictMode => {
+				let siteUrl = parseUrl(this.unlockedState.url)
+				let title = this.unlockedState.title
+				let siteTokens = getValidTokens(siteUrl.hostname + '.' + this.unlockedState.title)
+				this.keepassService.rankEntries(entries, siteUrl, title, siteTokens) // in-place
+
+				let allEntries = entries
+				let priorityEntries = getMatchesForThreshold(100, entries)
+
+				if (priorityEntries.length == 0) {
+					priorityEntries = getMatchesForThreshold(10, entries)
+
+					// in strict mode, good matches are considered partial matches.
+					if (strictMode && priorityEntries.length) {
+						this.unlockedMessages['warn'] = "No perfect origin matches, showing " + priorityEntries.length + " partial matches.";
+					}
+				}
+				if (!strictMode && priorityEntries.length == 0) {
+					priorityEntries = getMatchesForThreshold(0.8, entries, true)
+				}
+				if (!strictMode && priorityEntries.length == 0) {
+					priorityEntries = getMatchesForThreshold(0.4, entries)
+
+					if (priorityEntries.length) {
+						this.unlockedMessages.warn = "No close matches, showing " + priorityEntries.length + " partial matches.";
+					}
+				}
+				if (priorityEntries.length == 0) {
+					this.unlockedMessages.warn = "No matches found for this site."
+				}
+
+				// Cache in memory
+				this.unlockedState.cacheSet('allEntries', allEntries)
+				this.unlockedState.cacheSet('priorityEntries', priorityEntries)
+				this.$forceUpdate()
+				//save longer term (in encrypted storage)
+				this.secureCache.save('secureCache.entries', entries);
+				this.busy = false
+			})
+		},
+		clickUnlock(event) {
+			event.preventDefault()
+			this.unlock()
+		},
+		unlock(passwordKey) {
+			this.busy = true
+			this.generalMessages.error = ""
+			let passwordKeyPromise;
+			let bufferPromise = this.keepassService.getChosenDatabaseFile()
+			if (passwordKey === undefined)
+				passwordKeyPromise = this.keepassService.getMasterKey(bufferPromise, this.masterPassword, this.selectedKeyFile)
+			else
+				passwordKeyPromise = Promise.resolve(passwordKey)
+
+			let keyFileName = (this.selectedKeyFile !== undefined) ?
+				this.selectedKeyFile.name :
+				undefined
+			passwordKeyPromise.then(passwordKey => {
+				this.keepassService.getDecryptedData(bufferPromise, passwordKey).then(decryptedData => {
+					let entries = decryptedData.entries
+					let version = decryptedData.version
+					let dbUsage = {
+						requiresPassword: passwordKey.passwordHash === null ? false : true,
+						requiresKeyfile: passwordKey.keyFileHash === null ? false : true,
+						passwordKey: undefined,
+						version: version,
+						keyFileName: keyFileName,
+						rememberPeriod: this.rememberPeriod
+					}
+					if (this.rememberPeriod !== 0) {
+						let check_time = 60000 * this.rememberPeriod // milliseconds / min
+						// Save the password in memory independently.
+						this.settings.cacheMasterPassword(passwordKey, {
+							forgetTime: check_time > 0 ? Date.now() + check_time : check_time
+						})
+					} else {
+						this.settings.getCurrentMasterPasswordCacheKey()
+							.then(this.secureCache.clear)
+					}
+					this.settings.saveCurrentDatabaseUsage(dbUsage)
+					this.settings.getSetDefaultRememberPeriod(this.rememberPeriod)
+					this.showResults(entries)
+					this.busy = false
+					this.masterPassword = ""
+				}).catch(err => {
+					let errmsg = err.message || "Incorrect password or keyfile"
+					console.error(errmsg)
+					this.generalMessages['error'] = errmsg
+					this.busy = false
+				})
+			}).catch(err => {
+				this.settings.handleProviderError(err)
+				let errmsg = err.message || "Incorrect password or keyfile"
+				console.error(errmsg)
+				this.generalMessages['error'] = errmsg
+				this.busy = false
+			})
+		}
+	},
+	async mounted() {
+		if (!this.isUnlocked()) {
+
+			let try_autounlock = () => {
+				this.busy = true
+				this.settings.getKeyFiles().then(keyFiles => {
+					this.keyFiles = keyFiles
+					return this.settings.getSetDefaultRememberPeriod()
+				}).then(rememberPeriod => {
+					this.setRememberPeriod(rememberPeriod)
+					return this.settings.getCurrentDatabaseUsage()
+				}).then(usage => {
+					// tweak UI based on what we know about the db file
+					this.hidePassword = (usage.requiresPassword === false)
+					this.hideKeyFile = (usage.requiresKeyfile === false)
+					this.rememberedPassword = (usage.passwordKey !== undefined)
+					this.setRememberPeriod(usage.rememberPeriod)
+
+					if (usage.passwordKey !== undefined && usage.requiresKeyfile === false) {
+						this.unlock(usage.passwordKey) // Autologin if no keyfile
+					} else if (usage.keyFileName !== undefined) {
+						let matches = this.keyFiles.filter(kf => {
+							return kf.name === usage.keyFileName
+						})
+						if (matches.length > 0) {
+							this.selectedKeyFile = matches[0]
+							if (this.hidePassword === true || usage.passwordKey !== undefined)
+								this.unlock(usage.passwordKey)
+						}
+					}
+				})
+			}
+
+			let focus = () => {
+				this.$nextTick(() => {
+					let mp = this.$refs.masterPassword;
+					if (mp !== undefined)
+						mp.focus()
+				});
+			}
+
+			this.busy = true
+			try {
+				let entries = await this.secureCache.get('secureCache.entries');
+				if (entries !== undefined && entries.length > 0) {
+					this.showResults(entries)
+				} else {
+					try_autounlock()
+				}
+			} catch (Exception) {
+				//this is fine - it just means the cache expired.  Clear the cache to be sure.
+				this.secureCache.clear('secureCache.entries')
+				try_autounlock()
+			}
+			this.busy = false
+			focus()
+		}
+
+		// modify unlockedState internal state
+		await this.unlockedState.getTabDetails();
+		if (this.unlockedState.sitePermission) {
+			this.generalMessages.success = "You have previously granted Tusk permission to fill passwords on " + this.unlockedState.origin
+		} else {
+			this.generalMessages.warn = "This may be a new site to Tusk. Before filling in a password, double check that this is the correct site."
+		}
+		//set knowlege from the URL
+		this.databaseFileName = decodeURIComponent(this.$router.getRoute().title)
+	}
+}
+</script>
+
 <template>
 	<div>
 		<!-- Busy Spinner -->
@@ -6,10 +327,7 @@
 		</div>
 
 		<!-- Entry List -->
-		<entry-list v-if="!busy && isUnlocked()" 
-			:messages="unlockedMessages" 
-			:unlocked-state="unlockedState"
-			:settings="settings"></entry-list>
+		<entry-list v-if="!busy && isUnlocked()" :messages="unlockedMessages" :unlocked-state="unlockedState" :settings="settings"></entry-list>
 
 		<!-- General Messenger -->
 		<messenger :messages="generalMessages" v-show="!busy"></messenger>
@@ -25,12 +343,13 @@
 			<form v-on:submit="clickUnlock">
 
 				<div class="small selectable databaseChoose" @click="$router.route('/choose')">
-					<b>{{ databaseFileName }}</b> <span class="muted-color">change...</span>
+					<b>{{ databaseFileName }}</b>
+					<span class="muted-color">change...</span>
 				</div>
 
 				<div class="stack-item masterPasswordInput">
 					<input :type="isMasterPasswordInputVisible ? 'text' : 'password'" id="masterPassword" v-model="masterPassword" placeholder="🔒 master password" ref="masterPassword" autocomplete="off">
-					<i @click="isMasterPasswordInputVisible = !isMasterPasswordInputVisible" :class="['fa', isMasterPasswordInputVisible ? 'fa-eye-slash' : 'fa-eye', 'fa-fw']" aria-hidden="true"></i> 
+					<i @click="isMasterPasswordInputVisible = !isMasterPasswordInputVisible" :class="['fa', isMasterPasswordInputVisible ? 'fa-eye-slash' : 'fa-eye', 'fa-fw']" aria-hidden="true"></i>
 				</div>
 
 				<div class="stack-item">
@@ -44,18 +363,20 @@
 						<div>
 							<span class="selectable" v-for="(kf, kf_index) in keyFiles" :keyfile-index="kf_index" @click="chooseKeyFile(kf_index)">
 								<i class="fa fa-file fa-fw" aria-hidden="true"></i>
-                				{{ kf.name }}
+								{{ kf.name }}
 							</span>
-							<span @click="links.openOptionsKeyfiles" class="selectable"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Manage Keyfiles</span>
+							<span @click="links.openOptionsKeyfiles" class="selectable">
+								<i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Manage Keyfiles</span>
 						</div>
 					</transition>
 				</div>
 
 				<div class="box-bar small plain remember-period-picker">
 					<span>
-            <label for="rememberPeriodLength">
-              <span>{{rememberPeriodText}} (slide to choose)</span></label>
-					<input id="rememberPeriodLength" type="range" min="0" :max="slider_options.length - 1" step="1" v-model="slider_int" v-on:input="setRememberPeriod(undefined)" />
+						<label for="rememberPeriodLength">
+							<span>{{rememberPeriodText}} (slide to choose)</span>
+						</label>
+						<input id="rememberPeriodLength" type="range" min="0" :max="slider_options.length - 1" step="1" v-model="slider_int" v-on:input="setRememberPeriod(undefined)" />
 					</span>
 				</div>
 
@@ -69,450 +390,127 @@
 		<!-- Footer -->
 		<div class="box-bar medium between footer" v-show="!busy">
 			<span class="selectable" @click="links.openOptions">
-        <i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+				<i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
 			<span class="selectable" v-if="isUnlocked()" @click="forgetPassword()">
-        <i class="fa fa-lock" aria-hidden="true" ></i> Lock Database</span>
+				<i class="fa fa-lock" aria-hidden="true"></i> Lock Database</span>
 			<span class="selectable" v-else @click="closeWindow">
-        <i class="fa fa-times-circle" aria-hidden="true"></i> Close Window</span>
+				<i class="fa fa-times-circle" aria-hidden="true"></i> Close Window</span>
 			<span class="selectable" @click="links.openHomepage">
-        <i class="fa fa-info-circle" aria-hidden="true"></i> v{{ appVersion }}</span>
+				<i class="fa fa-info-circle" aria-hidden="true"></i> v{{ appVersion }}</span>
 		</div>
 
 	</div>
 </template>
 
-<script>
-	import { parseUrl, getValidTokens } from '$lib/utils.js'
-
-	import InfoCluster from '@/components/InfoCluster'
-	import EntryList from '@/components/EntryList'
-	import Spinner from 'vue-simple-spinner'
-	import Messenger from '@/components/Messenger'
-
-	export default {
-		props: {
-			/* Service dependeicies */
-			unlockedState: Object,
-			secureCache: Object,
-			settings: Object,
-			keepassService: Object,
-			links: Object
-		},
-		components: {
-			InfoCluster,
-			EntryList,
-			Spinner,
-			Messenger
-		},
-		data() {
-			return {
-				/* UI state data */
-				unlockedMessages: {
-					warn: "",
-					error: ""
-				},
-				generalMessages: {
-					warn: "",
-					error: "",
-					success: ""
-				},
-				busy: false,
-				masterPassword: "",
-				isMasterPasswordInputVisible: false,
-				keyFiles: [], // list of all available
-				selectedKeyFile: undefined, // chosen keyfile object
-				rememberPeriod: 0, // in minutes. default: do not remember
-				rememberPeriodText: "",
-				databaseFileName: "",
-				keyFilePicker: false,
-				appVersion: chrome.runtime.getManifest().version,
-				slider_options: [{
-						time: 0,
-						text: "Do not remember"
-					},
-					{
-						time: 30,
-						text: "Remember for 30 min."
-					},
-					{
-						time: 120,
-						text: "Remember for 2 hours."
-					},
-					{
-						time: 240,
-						text: "Remember for 4 hours."
-					},
-					{
-						time: 480,
-						text: "Remember for 8 hours."
-					},
-					{
-						time: 1440,
-						text: "Remember for 24 hours."
-					},
-					{
-						time: -1,
-						text: "Until browser exits."
-					}
-				],
-				slider_int: 0
-			}
-		},
-		computed: {
-			rememberPassword: function() {
-				return this.rememberPeriod !== 0
-			},
-			selectedKeyFileName: function() {
-				if (this.selectedKeyFile !== undefined)
-					return this.selectedKeyFile.name
-				return "No keyfile selected.  (click to change)"
-			}
-		},
-		watch: {
-			unlockedMessages: {
-				handler(newval) {
-					this.unlockedState.cacheSet('unlockedMessages', newval)
-				},
-				deep: true
-			}
-		},
-		methods: {
-			setRememberPeriod(time_int) {
-				/* Args: optional time_int
-				 * if time_int is given, derive slider_int
-				 * else assume slider_int is alread set.
-				 */
-				let slider_option_index;
-				if (time_int !== undefined) {
-					this.slider_int = (t => {
-						for (let i = 0; i < this.slider_options.length; i++) {
-							if (this.slider_options[i].time === t)
-								return i;
-						}
-						return 0;
-					})(time_int);
-					slider_option_index = this.slider_int;
-				} else {
-					slider_option_index = parseInt(this.slider_int);
-				}
-				if (slider_option_index < this.slider_options.length) {
-					this.rememberPeriod = this.slider_options[slider_option_index].time;
-					this.rememberPeriodText = this.slider_options[slider_option_index].text;
-				}
-			},
-			closeWindow(event) {
-				window.close()
-			},
-			chooseKeyFile(index) {
-				if (index !== undefined)
-					if (index >= 0)
-						this.selectedKeyFile = this.keyFiles[index]
-				else
-					this.selectedKeyFile = undefined
-				this.keyFilePicker = false
-			},
-			chooseAnotherFile() {
-				this.unlockedState.clearBackgroundState()
-				this.secureCache.clear('secureCache.entries')
-				this.$router.route('/choose')
-			},
-			isUnlocked: function() {
-				return this.unlockedState.cache.allEntries !== undefined
-			},
-			forgetPassword() {
-				this.settings.getCurrentMasterPasswordCacheKey().then(key => {
-					if (key !== null)
-						this.secureCache.clear(key)
-				})
-				this.secureCache.clear('secureCache.entries')
-				this.unlockedState.clearClipboardState()
-				this.unlockedState.clearCache() // new
-			},
-			showResults(entries) {
-				let getMatchesForThreshold = (threshold, entries, requireEmptyURL=false) => {
-					return entries.filter(e => (e.matchRank >= threshold) && (requireEmptyURL ? !e.URL : true));
-				}
-				this.settings.getSetStrictModeEnabled().then(strictMode => {
-					let siteUrl = parseUrl(this.unlockedState.url)
-					let title = this.unlockedState.title
-					let siteTokens = getValidTokens(siteUrl.hostname + '.' + this.unlockedState.title)
-					this.keepassService.rankEntries(entries, siteUrl, title, siteTokens) // in-place
-
-					let allEntries = entries
-					let priorityEntries = getMatchesForThreshold(100, entries)
-					
-					if (priorityEntries.length == 0) {
-						priorityEntries = getMatchesForThreshold(10, entries)
-
-						// in strict mode, good matches are considered partial matches.
-						if (strictMode && priorityEntries.length) {
-							this.unlockedMessages['warn'] = "No perfect origin matches, showing " + priorityEntries.length + " partial matches.";
-						}
-					}
-					if (!strictMode && priorityEntries.length == 0) {
-						priorityEntries = getMatchesForThreshold(0.8, entries, true)
-					}
-					if (!strictMode && priorityEntries.length == 0) {
-						priorityEntries = getMatchesForThreshold(0.4, entries)
-
-						if (priorityEntries.length) {
-							this.unlockedMessages.warn = "No close matches, showing " + priorityEntries.length + " partial matches.";
-						}
-					}
-					if (priorityEntries.length == 0) {
-						this.unlockedMessages.warn = "No matches found for this site."
-					}
-
-					// Cache in memory
-					this.unlockedState.cacheSet('allEntries', allEntries)
-					this.unlockedState.cacheSet('priorityEntries', priorityEntries)
-					this.$forceUpdate()
-					//save longer term (in encrypted storage)
-					this.secureCache.save('secureCache.entries', entries);
-					this.busy = false
-				})
-			},
-			clickUnlock(event) {
-				event.preventDefault()
-				this.unlock()
-			},
-			unlock(passwordKey) {
-				this.busy = true
-				this.generalMessages.error = ""
-				let passwordKeyPromise;
-				let bufferPromise = this.keepassService.getChosenDatabaseFile()
-				if (passwordKey === undefined)
-					passwordKeyPromise = this.keepassService.getMasterKey(bufferPromise, this.masterPassword, this.selectedKeyFile)
-				else
-					passwordKeyPromise = Promise.resolve(passwordKey)
-
-				let keyFileName = (this.selectedKeyFile !== undefined) ?
-					this.selectedKeyFile.name :
-					undefined
-				passwordKeyPromise.then(passwordKey => {
-					this.keepassService.getDecryptedData(bufferPromise, passwordKey).then(decryptedData => {
-						let entries = decryptedData.entries
-						let version = decryptedData.version
-						let dbUsage = {
-							requiresPassword: passwordKey.passwordHash === null ? false : true,
-							requiresKeyfile: passwordKey.keyFileHash === null ? false : true,
-							passwordKey: undefined,
-							version: version,
-							keyFileName: keyFileName,
-							rememberPeriod: this.rememberPeriod
-						}
-						if (this.rememberPeriod !== 0) {
-							let check_time = 60000 * this.rememberPeriod // milliseconds / min
-							// Save the password in memory independently.
-							this.settings.cacheMasterPassword(passwordKey, {
-								forgetTime: check_time > 0 ? Date.now() + check_time : check_time
-							})
-						} else {
-							this.settings.getCurrentMasterPasswordCacheKey()
-								.then(this.secureCache.clear)
-						}
-						this.settings.saveCurrentDatabaseUsage(dbUsage)
-						this.settings.getSetDefaultRememberPeriod(this.rememberPeriod)
-						this.showResults(entries)
-						this.busy = false
-						this.masterPassword = ""
-					}).catch(err => {
-						let errmsg = err.message || "Incorrect password or keyfile"
-						console.error(errmsg)
-						this.generalMessages['error'] = errmsg
-						this.busy = false
-					})
-				}).catch(err => {
-					this.settings.handleProviderError(err)
-					let errmsg = err.message || "Incorrect password or keyfile"
-					console.error(errmsg)
-					this.generalMessages['error'] = errmsg
-					this.busy = false
-				})
-			}
-		},
-		mounted() {
-			if (!this.isUnlocked()) {
-
-				let try_autounlock = () => {
-					this.busy = true
-					this.settings.getKeyFiles().then(keyFiles => {
-						this.keyFiles = keyFiles
-						return this.settings.getSetDefaultRememberPeriod()
-					}).then(rememberPeriod => {
-						this.setRememberPeriod(rememberPeriod)
-						return this.settings.getCurrentDatabaseUsage()
-					}).then(usage => {
-						// tweak UI based on what we know about the db file
-						this.hidePassword = (usage.requiresPassword === false)
-						this.hideKeyFile = (usage.requiresKeyfile === false)
-						this.rememberedPassword = (usage.passwordKey !== undefined)
-						this.setRememberPeriod(usage.rememberPeriod)
-
-						if (usage.passwordKey !== undefined && usage.requiresKeyfile === false) {
-							this.unlock(usage.passwordKey) // Autologin if no keyfile
-						} else if (usage.keyFileName !== undefined) {
-							let matches = this.keyFiles.filter(kf => {
-								return kf.name === usage.keyFileName
-							})
-							if (matches.length > 0) {
-								this.selectedKeyFile = matches[0]
-								if (this.hidePassword === true || usage.passwordKey !== undefined)
-									this.unlock(usage.passwordKey)
-							}
-						}
-					})
-				}
-
-				let focus = () => {
-					this.$nextTick(() => {
-						let mp = this.$refs.masterPassword;
-						if (mp !== undefined)
-							mp.focus()
-					})
-				}
-
-				this.busy = true
-				this.secureCache.get('secureCache.entries').then(entries => {
-					if (entries !== undefined && entries.length > 0) {
-						this.showResults(entries)
-					} else {
-						try_autounlock()
-					}
-				}).catch(() => {
-					//this is fine - it just means the cache expired.  Clear the cache to be sure.
-					this.secureCache.clear('secureCache.entries')
-					try_autounlock()
-				}).then(() => {
-					// state settled
-					this.busy = false
-					focus()
-				})
-			}
-
-			// modify unlockedState internal state
-			this.unlockedState.getTabDetails().then(() => {
-
-				if (this.unlockedState.sitePermission){
-					this.generalMessages.success = "You have previously granted Tusk permission to fill passwords on " + this.unlockedState.origin
-				} else {
-                    this.generalMessages.warn = "This may be a new site to Tusk. Before filling in a password, double check that this is the correct site."
-                }
-			})
-			//set knowlege from the URL
-			this.databaseFileName = decodeURIComponent(this.$router.getRoute().title)
-		}
-	}
-</script>
-
 <style lang="scss">
-	@import "../styles/settings.scss";
-	#masterPasswordGroup {
-		.keyfile-picker {
-			background-color: $light-background-color;
-			box-sizing: border-box;
-			transition: all .2s linear;
-			max-height: 200px;
-			overflow-y: auto;
-			opacity: 1;
-			border-top: 1px solid $light-gray;
-			border-bottom: 1px solid $light-gray;
-			padding: 5px $wall-padding;
-			margin: 5px 0px;
-			&.keyfile-picker-enter,
-			&.keyfile-picker-leave-to {
-				max-height: 0px;
-				opacity: 0;
-			}
-			span {
-				display: block;
-				padding: 2px 0px;
-				&:hover {
-					padding-left: 3px;
-				}
-			}
-		}
-		#select-keyfile {
-			padding: 8px $wall-padding;
-			background-color: $light-background-color;
-			border-bottom: 1px solid $light-gray;
-			i {
-				font-size: 14px;
-			}
-			&:hover {
-				opacity: .7;
-			}
-		}
-		#rememberPeriodLength {
-			width: 80px;
-			float: left;
-		}
-		.masterPasswordInput {
-			position: relative;
-			i {
-				position: absolute;
-				font-size: 14px;
-				top: calc(50% - 0.5em);
-				right: 10px;
-				cursor: pointer;
-			}
-		}
-		input[type=text], input[type=password] {
-			width: 100%;
-			box-sizing: border-box;
-			font-size: 18px;
-			border-width: 0px 0px;
-			padding: 5px $wall-padding;
-			border-top: 1px solid $light-gray;
-			&:focus {
-				outline: none;
-			}
-		}
-		.remember-period-picker {
-			margin: 6px 0px;
-			input[type=range] {
-				-webkit-appearance: none;
-				margin: 6px;
-				margin-left: 0px;
-			}
-		}
-		input[type=range]:focus {
-			outline: none;
-		}
-		input[type=range]::-webkit-slider-runnable-track {
-			height: 6px;
-			cursor: pointer;
-			animate: 0.2s;
-			background: $blue;
-			border-radius: 1.3px;
-			border: 0.2px solid #010101;
-			margin-top: -2px;
-		}
-		input[type=range]::-webkit-slider-thumb {
-			border: 1px solid black;
-			height: 18px;
-			width: 10px;
-			border-radius: 2px;
-			background: white;
-			cursor: pointer;
-			-webkit-appearance: none;
-			margin-top: -7px;
-		}
-	}
-
-	.spinner {
-		padding: $wall-padding;
-	}
-
-	.footer span {
-		padding: 2px 4px;
-		border-radius: 3px;
-		&:hover {
-			background-color: $dark-background-color;
-		}
-	}
-
-	.databaseChoose {
-			padding-left: 5px;
-	}
+@import "../styles/settings.scss";
+#masterPasswordGroup {
+  .keyfile-picker {
+    background-color: $light-background-color;
+    box-sizing: border-box;
+    transition: all 0.2s linear;
+    max-height: 200px;
+    overflow-y: auto;
+    opacity: 1;
+    border-top: 1px solid $light-gray;
+    border-bottom: 1px solid $light-gray;
+    padding: 5px $wall-padding;
+    margin: 5px 0px;
+    &.keyfile-picker-enter,
+    &.keyfile-picker-leave-to {
+      max-height: 0px;
+      opacity: 0;
+    }
+    span {
+      display: block;
+      padding: 2px 0px;
+      &:hover {
+        padding-left: 3px;
+      }
+    }
+  }
+  #select-keyfile {
+    padding: 8px $wall-padding;
+    background-color: $light-background-color;
+    border-bottom: 1px solid $light-gray;
+    i {
+      font-size: 14px;
+    }
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+  #rememberPeriodLength {
+    width: 80px;
+    float: left;
+  }
+  .masterPasswordInput {
+    position: relative;
+    i {
+      position: absolute;
+      font-size: 14px;
+      top: calc(50% - 0.5em);
+      right: 10px;
+      cursor: pointer;
+    }
+  }
+  input[type="text"],
+  input[type="password"] {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 18px;
+    border-width: 0px 0px;
+    padding: 5px $wall-padding;
+    border-top: 1px solid $light-gray;
+    &:focus {
+      outline: none;
+    }
+  }
+  .remember-period-picker {
+    margin: 6px 0px;
+    input[type="range"] {
+      -webkit-appearance: none;
+      margin: 6px;
+      margin-left: 0px;
+    }
+  }
+  input[type="range"]:focus {
+    outline: none;
+  }
+  input[type="range"]::-webkit-slider-runnable-track {
+    height: 6px;
+    cursor: pointer;
+    animate: 0.2s;
+    background: $blue;
+    border-radius: 1.3px;
+    border: 0.2px solid #010101;
+    margin-top: -2px;
+  }
+  input[type="range"]::-webkit-slider-thumb {
+    border: 1px solid black;
+    height: 18px;
+    width: 10px;
+    border-radius: 2px;
+    background: white;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -7px;
+  }
+}
+
+.spinner {
+  padding: $wall-padding;
+}
+
+.footer span {
+  padding: 2px 4px;
+  border-radius: 3px;
+  &:hover {
+    background-color: $dark-background-color;
+  }
+}
+
+.databaseChoose {
+  padding-left: 5px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/WebdavProvider.vue b/src/components/WebdavProvider.vue
index cfcd6606..36cb36c6 100644
--- a/src/components/WebdavProvider.vue
+++ b/src/components/WebdavProvider.vue
@@ -3,110 +3,110 @@
 	Simple http provider that can also handle Dropbox Shared Links
 -->
 <script>
-	const Base64 = require('base64-arraybuffer')
-	import {ChromePromiseApi} from '$lib/chrome-api-promise.js'
-	import GenericProviderUi from '@/components/GenericProviderUi'
-	const chromePromise = ChromePromiseApi()
+const Base64 = require('base64-arraybuffer')
+import { ChromePromiseApi } from '$lib/chrome-api-promise.js'
+import GenericProviderUi from '@/components/GenericProviderUi'
+const chromePromise = ChromePromiseApi()
 
-	export default {
-		data() {
-			return {
-				busy: false,
-				databases: [],
-				loggedIn: false,
-				messages: {
-					error: ""
-				},
-				webdav: {
-					username: "",
-					url:"",
-					password:""
-				},
-				serverList: [],
-				serverListMeta: {}
-			}
-		},
-		components: {
-			GenericProviderUi
-		},
-		props: {
-			providerManager: Object,
-			settings: Object
-		},
-		methods: {
-			addServer() {
-				chromePromise.permissions.request({
-					origins: [this.webdav.url] //FLAGHERE TODO
-				}).then(() => {
-					this.providerManager.addServer(this.webdav.url, this.webdav.username, this.webdav.password).then(serverInfo => {
-						// do somethings
-						return this.updateServerList().then(() => {
-							this.scan(serverInfo.serverId)
-						})
-					}).catch(err => {
-						console.error(err)
-						this.messages.error = err.toString()
-					})
-				}).catch(err => {
-					console.error(err)
-					this.messages.error = err.toString()
-				})
+export default {
+	data() {
+		return {
+			busy: false,
+			databases: [],
+			loggedIn: false,
+			messages: {
+				error: ""
 			},
-			setBusy(serverId, busy){
-				let serverListItem = this.serverList.filter(elem => {
-					return elem.serverId === serverId
-				})[0]
-				serverListItem.scanBusy = busy
+			webdav: {
+				username: "",
+				url: "",
+				password: ""
 			},
-			scan(serverId) {
-				this.setBusy(serverId, true)
-				return this.providerManager.searchServer(serverId).then(dirMap => {
-					this.providerManager.listDatabases().then(databases => {
-						this.databases = databases
+			serverList: [],
+			serverListMeta: {}
+		}
+	},
+	components: {
+		GenericProviderUi
+	},
+	props: {
+		providerManager: Object,
+		settings: Object
+	},
+	methods: {
+		addServer() {
+			chromePromise.permissions.request({
+				origins: [this.webdav.url] //FLAGHERE TODO
+			}).then(() => {
+				this.providerManager.addServer(this.webdav.url, this.webdav.username, this.webdav.password).then(serverInfo => {
+					// do somethings
+					return this.updateServerList().then(() => {
+						this.scan(serverInfo.serverId)
 					})
 				}).catch(err => {
+					console.error(err)
 					this.messages.error = err.toString()
-				}).then(() => {
-					// READ: finally.
-					this.setBusy(serverId, false)
 				})
-			},
-			remove(serverId) {
-				return this.providerManager.removeServer(serverId).then(this.updateServerList)
-			},
-			updateServerList () {
-				return this.providerManager.listServers().then(servers => {
-					this.serverList = servers
-				})
-			},
-			toggleLogin() {
-				if (this.loggedIn) {
-					this.settings.disableDatabaseProvider(this.providerManager)
-					this.providerManager.logout().then(() => {
-						this.loggedIn = false
-					})
-				} else {
-					this.providerManager.login().then(() => {
-						this.loggedIn = true
-						this.onLogin()
-					})
-				}
-			},
-			onLogin() {
-				/* Other things to do when a successful login happens... */
+			}).catch(err => {
+				console.error(err)
+				this.messages.error = err.toString()
+			})
+		},
+		setBusy(serverId, busy) {
+			let serverListItem = this.serverList.filter(elem => {
+				return elem.serverId === serverId
+			})[0]
+			serverListItem.scanBusy = busy
+		},
+		scan(serverId) {
+			this.setBusy(serverId, true)
+			return this.providerManager.searchServer(serverId).then(dirMap => {
 				this.providerManager.listDatabases().then(databases => {
 					this.databases = databases
 				})
-				this.updateServerList()
+			}).catch(err => {
+				this.messages.error = err.toString()
+			}).then(() => {
+				// READ: finally.
+				this.setBusy(serverId, false)
+			})
+		},
+		remove(serverId) {
+			return this.providerManager.removeServer(serverId).then(this.updateServerList)
+		},
+		updateServerList() {
+			return this.providerManager.listServers().then(servers => {
+				this.serverList = servers
+			})
+		},
+		toggleLogin() {
+			if (this.loggedIn) {
+				this.settings.disableDatabaseProvider(this.providerManager)
+				this.providerManager.logout().then(() => {
+					this.loggedIn = false
+				})
+			} else {
+				this.providerManager.login().then(() => {
+					this.loggedIn = true
+					this.onLogin()
+				})
 			}
 		},
-		mounted() {
-			this.providerManager.isLoggedIn().then(loggedIn => {
-				this.loggedIn = loggedIn
-				if (loggedIn) this.onLogin();
+		onLogin() {
+			/* Other things to do when a successful login happens... */
+			this.providerManager.listDatabases().then(databases => {
+				this.databases = databases
 			})
+			this.updateServerList()
 		}
+	},
+	mounted() {
+		this.providerManager.isLoggedIn().then(loggedIn => {
+			this.loggedIn = loggedIn
+			if (loggedIn) this.onLogin();
+		})
 	}
+}
 </script>
 
 <template>
@@ -124,7 +124,9 @@
 				<p><b>Wait! </b>Did you read the <a href="https://github.com/subdavis/Tusk/wiki/WebDAV-Support">best practices guide</a>?  Do that first!</p>
 			</div>
 			<div>
-				<p>The URL below should have the path of a FOLDER, not an individual FILE.  The webDAV provider works by recursively scanning all files within the folder you specify.  Your keepass databases will be discovered by their file extension (.kdbx).</p>
+				<p>The URL below should have the path of a FOLDER, not an individual FILE.  
+					The webDAV provider works by recursively scanning all files within the folder you specify.  
+					Your keepass databases will be discovered by their file extension (.kdbx).</p>
 			</div>
 			<table v-if="serverList.length">
 				<tr>
@@ -160,45 +162,46 @@
 </template>
 
 <style lang="scss" scoped>
-	@import "../styles/settings.scss";
+@import "../styles/settings.scss";
 
-	#webdav-server-input-box {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		box-sizing: border-box;
-		
-		input {
-			padding: 4px;
-			margin: 0px 8px 8px 0px;
+#webdav-server-input-box {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  box-sizing: border-box;
 
-			&#webdav-server {
-				width: 100%;
-			}
-			&#webdav-username, &#webdav-password {
-				flex: 1;
-			}
-		}
-	}
+  input {
+    padding: 4px;
+    margin: 0px 8px 8px 0px;
 
-	table {
-		font-size: 14px;
-		td {
-			padding: 5px 5px;
-			border-radius: 0px;
-		}
-		th {
-			background-color: $light-background-color;
-		} 
-		tr {
-			background-color: $background-color;
-		}
-	}
+    &#webdav-server {
+      width: 100%;
+    }
+    &#webdav-username,
+    &#webdav-password {
+      flex: 1;
+    }
+  }
+}
 
-	.warning-box {
-		p {
-			margin: 4px;
-		}
-		border: 3px solid red;
-	}
+table {
+  font-size: 14px;
+  td {
+    padding: 5px 5px;
+    border-radius: 0px;
+  }
+  th {
+    background-color: $light-background-color;
+  }
+  tr {
+    background-color: $background-color;
+  }
+}
+
+.warning-box {
+  p {
+    margin: 4px;
+  }
+  border: 3px solid red;
+}
 </style>
\ No newline at end of file

From 9c83baf89331177605063c0d3e7ae0cbecb63f69 Mon Sep 17 00:00:00 2001
From: subdavis <brandonadavis@outlook.com>
Date: Sun, 23 Sep 2018 22:58:36 -0400
Subject: [PATCH 4/7] Bump version 2018.9.23

---
 chrome.manifest.json  | 2 +-
 firefox.manifest.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/chrome.manifest.json b/chrome.manifest.json
index c20c8232..c4825d18 100644
--- a/chrome.manifest.json
+++ b/chrome.manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "KeePass Tusk - Password Access and Autofill",
 	"short_name": "KeePass Tusk",
-	"version": "2018.9.16",
+	"version": "2018.9.23",
 	"manifest_version": 2,
 	"minimum_chrome_version": "48",
 	"description": "Readonly KeePass password database integration for Chrome™",
diff --git a/firefox.manifest.json b/firefox.manifest.json
index 29e5523f..cf1965db 100644
--- a/firefox.manifest.json
+++ b/firefox.manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "KeePass Tusk - Password Access and Autofill",
 	"short_name": "KeePass Tusk",
-	"version": "2018.9.16",
+	"version": "2018.9.23",
 	"manifest_version": 2,
 	"minimum_chrome_version": "48",
 	"description": "Readonly KeePass password database integration for Firefox",

From ca609227328298fcfcacbc46cbfccea16809ebcd Mon Sep 17 00:00:00 2001
From: Zachary Milonas <25948390+zmilonas@users.noreply.github.com>
Date: Mon, 24 Sep 2018 16:05:43 +0200
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=93=9D=20Create=20seperate=20ISSUE=5F?=
 =?UTF-8?q?TEMPLATEs=20for=20different=20types=20of=20issues=20(#255)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create FEATURE_REQUEST.md

* Create BUG_REPORT.md

* Delete ISSUE_TEMPLATE.md

* Update BUG_REPORT.md

* Create OTHER_ISSUE.md
---
 .../BUG_REPORT.md}                              | 16 +++++++++-------
 .github/ISSUE_TEMPLATE/FEATURE_REQUEST.md       | 17 +++++++++++++++++
 .github/ISSUE_TEMPLATE/OTHER_ISSUE.md           |  6 ++++++
 3 files changed, 32 insertions(+), 7 deletions(-)
 rename .github/{ISSUE_TEMPLATE.md => ISSUE_TEMPLATE/BUG_REPORT.md} (71%)
 create mode 100644 .github/ISSUE_TEMPLATE/FEATURE_REQUEST.md
 create mode 100644 .github/ISSUE_TEMPLATE/OTHER_ISSUE.md

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE/BUG_REPORT.md
similarity index 71%
rename from .github/ISSUE_TEMPLATE.md
rename to .github/ISSUE_TEMPLATE/BUG_REPORT.md
index cd5c86e0..89ea5f6f 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.md
@@ -1,8 +1,10 @@
-### This issue is a 
+---
+name: 🐛 Bug Report
+about: If something isn't working as expected 🤔.
 
-bug / feature / question 
+---
 
-<!-- Please leave only one -->
+## Bug report
 
 ### Steps to reproduce - current behaviour
 
@@ -33,13 +35,13 @@ bug / feature / question
 
 **Operating System:**
 
-**Browser:**
+**Browser vendor and version:**
 
-**Storage:**
+**Storage Provider:**
 
 <!-- 
   For example: 
   Operating System: macOS 10.XX.X / Windows 10 Pro
-  Browser: Chrome XX.XXX.XXX / Firefox XX.XXX
+  Browser: Chrome XX.XXX.XXX / Firefox XX.XXX (find at chrome://version or about:version)
   Storage: Nextcloud / Google Drive / Dropbox
--->
\ No newline at end of file
+-->
diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md
new file mode 100644
index 00000000..3a3ab676
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md
@@ -0,0 +1,17 @@
+---
+name: 🚀 Feature Request
+about: I have a suggestion
+
+---
+
+## Feature Request
+
+### A feature you'd like to see
+<!-- A clear and concise description of what you want to happen. Add any considered drawbacks. -->
+
+### Alternatives you've considered
+<!-- A clear and concise description of any alternative solutions or features you've considered. (if applicable) -->
+
+### Additional remarks
+<!-- If you can, explain how users will be able to use this and if possible write a initial version of the documentation for the feature.
+Maybe a screenshot or design? -->
diff --git a/.github/ISSUE_TEMPLATE/OTHER_ISSUE.md b/.github/ISSUE_TEMPLATE/OTHER_ISSUE.md
new file mode 100644
index 00000000..022872f0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/OTHER_ISSUE.md
@@ -0,0 +1,6 @@
+---
+name: 🤔 Other
+about: My issue doesn't fit other types.
+
+---
+

From c4f74e623b8ae05979c55067831de87d1a8723e1 Mon Sep 17 00:00:00 2001
From: Brandon Davis <brandonadavis@outlook.com>
Date: Thu, 27 Sep 2018 19:52:10 -0400
Subject: [PATCH 6/7] Fix #257  (#258)

* I'm bad at code

* unformat

* Remove force
---
 src/components/Unlock.vue | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Unlock.vue b/src/components/Unlock.vue
index aa78005f..1e2624b8 100644
--- a/src/components/Unlock.vue
+++ b/src/components/Unlock.vue
@@ -249,6 +249,9 @@ export default {
 		}
 	},
 	async mounted() {
+		// modify unlockedState internal state
+		await this.unlockedState.getTabDetails();
+
 		if (!this.isUnlocked()) {
 
 			let try_autounlock = () => {
@@ -297,17 +300,16 @@ export default {
 				} else {
 					try_autounlock()
 				}
-			} catch (Exception) {
+			} catch (err) {
+				console.error(err);
 				//this is fine - it just means the cache expired.  Clear the cache to be sure.
 				this.secureCache.clear('secureCache.entries')
 				try_autounlock()
+
 			}
 			this.busy = false
 			focus()
 		}
-
-		// modify unlockedState internal state
-		await this.unlockedState.getTabDetails();
 		if (this.unlockedState.sitePermission) {
 			this.generalMessages.success = "You have previously granted Tusk permission to fill passwords on " + this.unlockedState.origin
 		} else {
@@ -327,7 +329,10 @@ export default {
 		</div>
 
 		<!-- Entry List -->
-		<entry-list v-if="!busy && isUnlocked()" :messages="unlockedMessages" :unlocked-state="unlockedState" :settings="settings"></entry-list>
+		<entry-list v-if="!busy && isUnlocked()"
+			:messages="unlockedMessages"
+			:unlocked-state="unlockedState"
+			:settings="settings"></entry-list>
 
 		<!-- General Messenger -->
 		<messenger :messages="generalMessages" v-show="!busy"></messenger>
@@ -343,8 +348,7 @@ export default {
 			<form v-on:submit="clickUnlock">
 
 				<div class="small selectable databaseChoose" @click="$router.route('/choose')">
-					<b>{{ databaseFileName }}</b>
-					<span class="muted-color">change...</span>
+					<b>{{ databaseFileName }}</b> <span class="muted-color">change...</span>
 				</div>
 
 				<div class="stack-item masterPasswordInput">
@@ -362,8 +366,7 @@ export default {
 					<transition name="keyfile-picker">
 						<div>
 							<span class="selectable" v-for="(kf, kf_index) in keyFiles" :keyfile-index="kf_index" @click="chooseKeyFile(kf_index)">
-								<i class="fa fa-file fa-fw" aria-hidden="true"></i>
-								{{ kf.name }}
+								<i class="fa fa-file fa-fw" aria-hidden="true"></i> {{ kf.name }}
 							</span>
 							<span @click="links.openOptionsKeyfiles" class="selectable">
 								<i class="fa fa-wrench fa-fw" aria-hidden="true"></i> Manage Keyfiles</span>
@@ -374,9 +377,8 @@ export default {
 				<div class="box-bar small plain remember-period-picker">
 					<span>
 						<label for="rememberPeriodLength">
-							<span>{{rememberPeriodText}} (slide to choose)</span>
-						</label>
-						<input id="rememberPeriodLength" type="range" min="0" :max="slider_options.length - 1" step="1" v-model="slider_int" v-on:input="setRememberPeriod(undefined)" />
+							<span>{{rememberPeriodText}} (slide to choose)</span></label>
+					<input id="rememberPeriodLength" type="range" min="0" :max="slider_options.length - 1" step="1" v-model="slider_int" v-on:input="setRememberPeriod(undefined)" />
 					</span>
 				</div>
 

From 3636cf2d7b88ce2d6f93c521e0d1bf7d3b7867a4 Mon Sep 17 00:00:00 2001
From: subdavis <brandonadavis@outlook.com>
Date: Thu, 27 Sep 2018 20:24:13 -0400
Subject: [PATCH 7/7] Bump version 2018.9.27

---
 chrome.manifest.json  | 2 +-
 firefox.manifest.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/chrome.manifest.json b/chrome.manifest.json
index c4825d18..b0d2a328 100644
--- a/chrome.manifest.json
+++ b/chrome.manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "KeePass Tusk - Password Access and Autofill",
 	"short_name": "KeePass Tusk",
-	"version": "2018.9.23",
+	"version": "2018.9.27",
 	"manifest_version": 2,
 	"minimum_chrome_version": "48",
 	"description": "Readonly KeePass password database integration for Chrome™",
diff --git a/firefox.manifest.json b/firefox.manifest.json
index cf1965db..6573d526 100644
--- a/firefox.manifest.json
+++ b/firefox.manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "KeePass Tusk - Password Access and Autofill",
 	"short_name": "KeePass Tusk",
-	"version": "2018.9.23",
+	"version": "2018.9.27",
 	"manifest_version": 2,
 	"minimum_chrome_version": "48",
 	"description": "Readonly KeePass password database integration for Firefox",