Merge remote-tracking branch 'origin/fix_layout_for_14' into feature/merges_v2.2.0

10 files changed, 392 insertions, 111 deletions

diff --git a/js/app/controllers/bookmarklet.js b/js/app/controllers/bookmarklet.js
index a95135d4..a1d292bd 100644
--- a/js/app/controllers/bookmarklet.js
+++ b/js/app/controllers/bookmarklet.js
@@ -44,6 +44,8 @@
 				}
 
 				$scope.logout = function () {
+                    //see vault.js:54
+                    $rootScope.override_default_vault=true;
 					$scope.active_vault = false;
 				};
 				if (SettingsService.getSetting('defaultVault') && SettingsService.getSetting('defaultVaultPass')) {
diff --git a/js/app/controllers/credential.js b/js/app/controllers/credential.js
index 303635f1..0a22a0e2 100644
--- a/js/app/controllers/credential.js
+++ b/js/app/controllers/credential.js
@@ -59,7 +59,7 @@
 						$scope.active_vault = vault;
 						$scope.active_vault.vaultKey = vaultKey;
 						if(!$rootScope.vaultCache){
-              $rootScope.vaultCache = [];
+              				$rootScope.vaultCache = [];
 						}
 						VaultService.setActiveVault($scope.active_vault);
 						for (var i = 0; i < _credentials.length; i++) {
@@ -325,97 +325,218 @@
 					fields: ['label', 'username', 'email', 'custom_fields']
 				};
 
-
-				$scope.filtered_credentials = [];
-				$scope.$watch('[selectedtags, filterOptions, delete_time, active_vault.credentials]', function () {
-					if (!$scope.active_vault) {
-						return;
-					}
-					if ($scope.active_vault.credentials) {
-						var credentials = angular.copy($scope.active_vault.credentials);
-						var filtered_credentials = $filter('credentialSearch')(credentials, $scope.filterOptions);
-						filtered_credentials = $filter('tagFilter')(filtered_credentials, $scope.selectedtags);
-						filtered_credentials = $filter('filter')(filtered_credentials, {hidden: 0});
-						$scope.filtered_credentials = filtered_credentials;
-						$scope.filterOptions.selectedtags = angular.copy($scope.selectedtags);
-						for (var i = 0; i < $scope.active_vault.credentials.length; i++) {
-							var _credential = $scope.active_vault.credentials[i];
-							if (_credential.tags) {
-								TagService.addTags(_credential.tags);
-							}
-						}
-					}
-
-				}, true);
-
-				$scope.selectedtags = [];
-				var to;
-				$rootScope.$on('selected_tags_updated', function (evt, _sTags) {
-					var _selectedTags = [];
-					for (var x = 0; x < _sTags.length; x++) {
-						_selectedTags.push(_sTags[x].text);
-					}
-					$scope.selectedtags = _selectedTags;
-					$timeout.cancel(to);
-					if (_selectedTags.length > 0) {
-						to = $timeout(function () {
-							if ($scope.filtered_credentials) {
-								var _filtered_tags = [];
-								for (var i = 0; i < $scope.filtered_credentials.length; i++) {
-									var tags = $scope.filtered_credentials[i].tags_raw;
-									for (var x = 0; x < tags.length; x++) {
-										var tag = tags[x].text;
-										if (_filtered_tags.indexOf(tag) === -1) {
-											_filtered_tags.push(tag);
-										}
-									}
-								}
-
-								$rootScope.$emit('limit_tags_in_list', _filtered_tags);
-							}
-						}, 50);
-					}
+                //searchboxfix
+                $scope.$on('nc_searchbox', function(event, args) {
+                    $scope.filterOptions.filterText=args;
 				});
 
-				$scope.delete_time = 0;
-				$scope.showCredentialRow = function (credential) {
-					if ($scope.delete_time === 0) {
-						return credential.delete_time === 0;
-					} else {
-						return credential.delete_time > $scope.delete_time;
-					}
 
+                $scope.filtered_credentials = [];
+                $scope.$watch('[selectedtags, filterOptions, delete_time, active_vault.credentials]', function () {
+                    if (!$scope.active_vault) {
+                        return;
+                    }
+                    if ($scope.active_vault.credentials) {
+                        var credentials = angular.copy($scope.active_vault.credentials);
+                        var filtered_credentials = $filter('credentialSearch')(credentials, $scope.filterOptions);
+                        filtered_credentials = $filter('tagFilter')(filtered_credentials, $scope.selectedtags);
+                        filtered_credentials = $filter('filter')(filtered_credentials, {hidden: 0});
+                        $scope.filtered_credentials = filtered_credentials;
+                        $scope.filterOptions.selectedtags = angular.copy($scope.selectedtags);
+                        for (var i = 0; i < $scope.active_vault.credentials.length; i++) {
+                            var _credential = $scope.active_vault.credentials[i];
+                            if (_credential.tags) {
+                                TagService.addTags(_credential.tags);
+                            }
+                        }
+                    }
+
+                }, true);
+
+                $scope.no_credentials_label=[];
+                $scope.no_credentials_label.all=true;
+                $scope.no_credentials_label.s_good=false;
+                $scope.no_credentials_label.s_medium=false;
+                $scope.no_credentials_label.s_low=false;
+                $scope.no_credentials_label.expired=false;
+
+                $scope.disableAllLabels = function(){
+                    $scope.no_credentials_label.all=false;
+                    $scope.no_credentials_label.s_good=false;
+                    $scope.no_credentials_label.s_medium=false;
+                    $scope.no_credentials_label.s_low=false;
+                    $scope.no_credentials_label.expired=false;
 				};
 
-				$rootScope.$on('set_delete_time', function (event, time) {
-					$scope.delete_time = time;
-				});
-
-				$scope.setDeleteTime = function (delete_time) {
-					$scope.delete_time = delete_time;
-				};
+                //watch for special tags
+                $scope.$on('filterSpecial', function(event, args) {
+
+                    $scope.disableAllLabels();
+                    switch (args) {
+                        case "strength_good":
+                        	$scope.filterStrength(3,1000);
+                            $scope.no_credentials_label.s_good=true;
+                        	break;
+                        case "strength_medium":
+                        	$scope.filterStrength(2,3);
+                            $scope.no_credentials_label.s_medium=true;
+                        	break;
+                        case "strength_low":
+                        	$scope.filterStrength(0,1);
+                            $scope.no_credentials_label.s_low=true;
+                        	break;
+                        case "expired":
+                        	$scope.filterExpired();
+                            $scope.no_credentials_label.expired=true;
+                        	break;
+                        case "all":
+                        	$scope.filterAll();
+                            $scope.no_credentials_label.all=true;
+                        	break;
+                    }
+                });
+
+                $scope.getListSizes = function(){
+                	var l = $scope.filtered_credentials;
+
+                	var deleted=0;
+                    for (var i = 0; i < l.length; i++) {
+						if(l[i].delete_time>0){
+							deleted++;
+						}
+                    }
 
-				$scope.selectedCredential = false;
-				$scope.selectCredential = function (credential) {
-					if(credential.description) {
-						credential.description_html = $sce.trustAsHtml(angular.copy(credential.description).replace("\n", '<br />'));
-					}
-					$scope.selectedCredential = angular.copy(credential);
-					$rootScope.$emit('app_menu', true);
-				};
+                    var result=[];
+                    result.listsize=l.length;
+                    result.listsize_wout_deleted=l.length-deleted;
+                    result.listsize_deleted=deleted;
 
-				$scope.closeSelected = function () {
-					$rootScope.$emit('app_menu', false);
-					$scope.selectedCredential = false;
+                	return result;
 				};
 
-				$rootScope.$on('logout', function () {
-					if($scope.active_vault) {
-            $rootScope.vaultCache[$scope.active_vault.guid] = null;
-          }
-					$scope.active_vault = null;
-					$scope.credentials = [];
-//				$scope.$parent.selectedVault = false;
+                $scope.filterAll = function(){
+                    $scope.selectedtags=[];
+                    $scope.filterOptions.filterText="";
+                    var creds_filtered=[];
+
+                    for (var i = 0; i < $scope.active_vault.credentials.length; i++) {
+                        if($scope.active_vault.credentials[i].delete_time===0){
+                            creds_filtered.push($scope.active_vault.credentials[i]);
+                        }
+                    }
+
+					$scope.filtered_credentials=$scope.filterHidden(creds_filtered);
+                };
+
+                $scope.filterStrength = function(strength_min, strength_max){
+                    var initialCredentials=$scope.active_vault.credentials;
+                    var postFiltered=[];
+                    for (var i = 0; i < initialCredentials.length; i++) {
+                        var _credential = initialCredentials[i];
+                        var zxcvbn_result = zxcvbn(_credential.password);
+
+                        if(zxcvbn_result.score>=strength_min && zxcvbn_result.score<=strength_max){
+                            postFiltered.push(initialCredentials[i]);
+                        }
+                    }
+                    $scope.filtered_credentials=$scope.filterHidden(postFiltered);
+                };
+
+                $scope.filterExpired = function(){
+                    var initialCredentials=$scope.active_vault.credentials;
+                    var now = Date.now();
+                    var postFiltered=[];
+
+                    for (var i = 0; i < initialCredentials.length; i++) {
+                        var _credential = initialCredentials[i];
+
+                        if(_credential.expire_time!==0 && _credential.expire_time <= now){
+                            postFiltered.push(initialCredentials[i]);
+                        }
+                    }
+                    $scope.filtered_credentials=$scope.filterHidden(postFiltered);
+                };
+
+                $scope.filterHidden = function(list){
+                    var list_without_hidden=[];
+                    for (var i = 0; i < list.length; i++) {
+                        if(list[i].hidden!==1){
+                            list_without_hidden.push(list[i]);
+                        }
+                    }
+                    return list_without_hidden;
+                };
+
+
+
+                $scope.selectedtags = [];
+                var to;
+                $rootScope.$on('selected_tags_updated', function (evt, _sTags) {
+                    var _selectedTags = [];
+                    for (var x = 0; x < _sTags.length; x++) {
+                        _selectedTags.push(_sTags[x].text);
+                    }
+                    $scope.selectedtags = _selectedTags;
+                    $timeout.cancel(to);
+                    if (_selectedTags.length > 0) {
+                        to = $timeout(function () {
+                            if ($scope.filtered_credentials) {
+                                var _filtered_tags = [];
+                                for (var i = 0; i < $scope.filtered_credentials.length; i++) {
+                                    var tags = $scope.filtered_credentials[i].tags_raw;
+                                    for (var x = 0; x < tags.length; x++) {
+                                        var tag = tags[x].text;
+                                        if (_filtered_tags.indexOf(tag) === -1) {
+                                            _filtered_tags.push(tag);
+                                        }
+                                    }
+                                }
+
+                                $rootScope.$emit('limit_tags_in_list', _filtered_tags);
+                            }
+                        }, 50);
+                    }
+                });
+
+                $scope.delete_time = 0;
+                $scope.showCredentialRow = function (credential) {
+                    if ($scope.delete_time === 0) {
+                        return credential.delete_time === 0;
+                    } else {
+                        return credential.delete_time > $scope.delete_time;
+                    }
+
+                };
+
+                $rootScope.$on('set_delete_time', function (event, time) {
+                    $scope.delete_time = time;
+                });
+
+                $scope.setDeleteTime = function (delete_time) {
+                    $scope.delete_time = delete_time;
+                };
+
+                $scope.selectedCredential = false;
+                $scope.selectCredential = function (credential) {
+                    if (credential.description) {
+                        credential.description_html = $sce.trustAsHtml(angular.copy(credential.description).replace("\n", '<br />'));
+                    }
+                    $scope.selectedCredential = angular.copy(credential);
+                    $rootScope.$emit('app_menu', true);
+                };
+
+                $scope.closeSelected = function () {
+                    $rootScope.$emit('app_menu', false);
+                    $scope.selectedCredential = false;
+                };
+
+                $rootScope.$on('logout', function () {
+                    if ($scope.active_vault) {
+                        $rootScope.vaultCache[$scope.active_vault.guid] = null;
+                    }
+                    $scope.active_vault = null;
+                    $scope.credentials = [];
+                    //$scope.$parent.selectedVault = false;
 
 				});
 
diff --git a/js/app/controllers/edit_credential.js b/js/app/controllers/edit_credential.js
index 5c9ad4f0..6f1abc9a 100644
--- a/js/app/controllers/edit_credential.js
+++ b/js/app/controllers/edit_credential.js
@@ -32,8 +32,8 @@
 	 * Controller of the passmanApp
 	 */
 	angular.module('passmanApp')
-		.controller('CredentialEditCtrl', ['$scope', 'VaultService', 'CredentialService', 'SettingsService', '$location', '$routeParams', 'FileService', 'EncryptService', 'TagService', 'NotificationService', 'ShareService', '$translate',
-			function ($scope, VaultService, CredentialService, SettingsService, $location, $routeParams, FileService, EncryptService, TagService, NotificationService, ShareService, $translate) {
+		.controller('CredentialEditCtrl', ['$scope', 'VaultService', 'CredentialService', 'SettingsService', '$location', '$routeParams', 'FileService', 'EncryptService', 'TagService', 'NotificationService', 'ShareService', '$translate', '$rootScope',
+			function ($scope, VaultService, CredentialService, SettingsService, $location, $routeParams, FileService, EncryptService, TagService, NotificationService, ShareService, $translate, $rootScope) {
 				$scope.active_vault = VaultService.getActiveVault();
 				if (!SettingsService.getSetting('defaultVault') || !SettingsService.getSetting('defaultVaultPass')) {
 					if (!$scope.active_vault) {
@@ -292,7 +292,7 @@
 				};
 				$scope.saving = false;
 				$scope.saveCredential = function () {
-          $scope.saving = true;
+				    $scope.saving = true;
 
 
 					if ($scope.new_custom_field.label && $scope.new_custom_field.value) {
@@ -301,8 +301,8 @@
 
 
 					if ($scope.storedCredential.password !== $scope.storedCredential.password_repeat){
-            $scope.saving = false;
-            NotificationService.showNotification($translate.instant('password.do.not.match'), 5000);
+                        $scope.saving = false;
+                        NotificationService.showNotification($translate.instant('password.do.not.match'), 5000);
 						return;
 					}
 
@@ -313,7 +313,7 @@
 					if (!$scope.storedCredential.credential_id) {
 						$scope.storedCredential.vault_id = $scope.active_vault.vault_id;
 						CredentialService.createCredential($scope.storedCredential).then(function () {
-              $scope.saving = false;
+                            $scope.saving = false;
 							$location.path('/vault/' + $routeParams.vault_id);
 							NotificationService.showNotification($translate.instant('credential.created'), 5000);
 
@@ -345,14 +345,26 @@
 							_credential.description = _credential.description.replace(regex, "");
 						}
 						CredentialService.updateCredential(_credential, _useKey).then(function () {
-              $scope.saving = false;
+                            $scope.saving = false;
 							SettingsService.setSetting('edit_credential', null);
 							$location.path('/vault/' + $routeParams.vault_id);
 							NotificationService.showNotification($translate.instant('credential.updated'), 5000);
 						});
 					}
-
-				};
+                    $scope.refreshListWithSaved();
+                };
+
+                $scope.refreshListWithSaved = function () {
+                    var current_vault = $rootScope.vaultCache[$scope.active_vault.guid];
+                    var cv_credentials = current_vault.credentials;
+                    for (var i = 0; i < cv_credentials.length; i++) {
+                        if (cv_credentials[i].credential_id === $scope.storedCredential.credential_id) {
+                            cv_credentials[i] = $scope.storedCredential;
+                        }
+                    }
+                    current_vault.credentials=cv_credentials;
+                    $rootScope.vaultCache[$scope.active_vault.guid] = current_vault;
+                };
 
 				$scope.cancel = function () {
 					$location.path('/vault/' + $routeParams.vault_id);
diff --git a/js/app/controllers/main.js b/js/app/controllers/main.js
index c122501c..d54a46d3 100644
--- a/js/app/controllers/main.js
+++ b/js/app/controllers/main.js
@@ -41,6 +41,10 @@
 
 			}
 
+            $scope.removeHiddenStyles = function(){
+				document.getElementById('warning_bar').classList.remove('template-hidden');
+			};
+
 			$rootScope.$on('settings_loaded', function(){
 				if (SettingsService.isEnabled('disable_contextmenu')) {
 					document.addEventListener('contextmenu', function (event) {
diff --git a/js/app/controllers/menu.js b/js/app/controllers/menu.js
index f892af38..fdb3a208 100644
--- a/js/app/controllers/menu.js
+++ b/js/app/controllers/menu.js
@@ -23,7 +23,6 @@
 (function () {
 	'use strict';
 
-
 	/**
 	 * @ngdoc function
 	 * @name passmanApp.controller:MenuCtrl
@@ -32,15 +31,21 @@
 	 * Controller of the passmanApp
 	 */
 	angular.module('passmanApp')
-		.controller('MenuCtrl', ['$scope', 'VaultService', '$location', '$rootScope', 'TagService','SettingsService',
-			function ($scope, VaultService, $location, $rootScope, TagService, SettingsService) {
+		.controller('MenuCtrl', ['$scope', 'VaultService', '$location', '$rootScope', 'TagService','SettingsService', '$translate',
+			function ($scope, VaultService, $location, $rootScope, TagService, SettingsService, $translate) {
 				$rootScope.logout = function () {
+				    //see vault.js:54
+                    $rootScope.override_default_vault=true;
 					SettingsService.setSetting('defaultVaultPass', false);
 					TagService.resetTags();
 					$rootScope.$broadcast('logout');
 					$location.path('/');
 				};
 
+                $scope.removeHiddenStyles = function(){
+                    document.getElementById('app-navigation').classList.remove('template-hidden');
+                };
+
 				$scope.selectedTags = [];
 				$scope.getTags = function ($query) {
 					return TagService.searchTag($query);
@@ -77,12 +82,139 @@
 					$rootScope.$broadcast('selected_tags_updated', $scope.selectedTags);
 				}, true);
 
-				$scope.tagClicked = function (tag) {
-					$scope.selectedTags.push(tag);
+                $scope.tagSelected = function (tag) {
+                    for (var i = 0; i < $scope.selectedTags.length; i++) {
+                        if($scope.selectedTags[i].text === tag.text){
+                            return true;
+                        }
+                    }
+                    return false;
 				};
 
+                $scope.removeTagFromSelected = function (tag) {
+                	var where =-1;
+                    for (var i = 0; i < $scope.selectedTags.length; i++) {
+                        if($scope.selectedTags[i].text === tag.text){
+                            where=i;
+                        }
+                    }
+                    if(where === -1){
+                        //console.log("Cant remove selected Tag, Tag not present!");
+					}
+                    $scope.selectedTags.splice(where, 1);
+                };
+
+                $scope.clearForm = function () {
+                    document.getElementById('tagsearch').value="";
+                };
+
+                $scope.tagClickedString = function (tagtext) {
+                    var tag=[];
+                    tag.text=tagtext;
+                    $scope.tagClicked(tag);
+                };
+
+                $scope.tagClicked = function (tag) {
+					//check if tag already selected
+                    if(!$scope.tagSelected(tag)){
+                        $scope.selectedTags.push(tag);
+                    }else{
+                        //console.log("Already selected Tag!");
+                        $scope.removeTagFromSelected(tag);
+                    }
+				};
+
+                //searchboxfix
+                var native_search = document.getElementById("searchbox");
+                if(native_search !== null){
+                    native_search.nextElementSibling.addEventListener('click', function (e) {
+                        $scope.$apply(function () {
+                            $rootScope.$broadcast('nc_searchbox',"");
+                        });
+                    });
+
+                    native_search.classList.remove('hidden');
+                    native_search.addEventListener('keypress', function (e) {
+                        if(e.keyCode === 13){
+                            e.preventDefault();
+                        }
+                    });
+
+                    native_search.addEventListener('keyup', function (e) {
+                        $scope.$apply(function () {
+                            $rootScope.$broadcast('nc_searchbox',native_search.value);
+                        });
+                    });
+                }
+
+
+				$scope.clickedNavigationItem="all";
+                $scope.filterCredentialBySpecial = function (string) {
+                    $scope.clickedNavigationItem=string;
+                	if(string !== "nav_trashbin"){
+                        $scope.delete_time=0;
+                        $rootScope.$broadcast('set_delete_time', $scope.delete_time);
+					}
+					$scope.selectedTags =[];
+
+                    $rootScope.$broadcast('filterSpecial',string);
+
+                	//close settings when item is selected
+                	$scope.settingsShown=false;
+                };
+
+                $scope.collapsedDefaultValue=true;
+                $scope.tagCollapsibleOpen=VaultService.getVaultSetting("vaultTagCollapsedState",$scope.collapsedDefaultValue);
+                $scope.tagCollapsibleClicked = function () {
+                	if (VaultService.getVaultSetting("vaultTagCollapsedState",$scope.collapsedDefaultValue) === true) {
+                        VaultService.setVaultSetting("vaultTagCollapsedState",false);
+                    } else {
+                        VaultService.setVaultSetting("vaultTagCollapsedState",true);
+                	}
+                };
+
+                $scope.tagCollapsibleState = function () {
+                	if(VaultService.getVaultSetting('vaultTagCollapsedState',$scope.collapsedDefaultValue)){
+                       return "";
+					}
+                    return "open";
+                };
+
+
+
+                //this is needed, because the translation is not ready when the dom loads and the translation only returns the key.
+                //then the key is set, and the taginput is collapsed by angular. If the correct translation loads, the collapsed dom element does not update itself.
+                //here we set the value manually
+                $scope.initPlaceholder = function () {
+                    $translate.onReady().then(function(){
+                        var string=$translate.instant('navigation.advanced.filter');
+                        document.getElementById("tags-input-outer").setAttribute("placeholder", string);
+                        document.getElementById("tags-input-outer").firstChild.firstChild.childNodes[1].setAttribute("placeholder", string);
+                    });
+                };
+
+                $scope.legacyNavbarDefault=true;
+                $scope.legacyNavbarAlreadyInitialized=false;
+
+                if (typeof $scope.legacyNavbar === 'undefined') {
+                    $scope.legacyNavbar = $scope.legacyNavbarDefault;
+                }
+
+                $scope.$watch('legacyNavbar', function(newValue, oldValue) {
+                    VaultService.setVaultSetting("vaultNavBarLegacy",newValue);
+                });
+
+                $scope.initializeNavbar = function () {
+                    if($scope.legacyNavbarAlreadyInitialized){
+                        return;
+                    }
+                    $scope.legacyNavbar = VaultService.getVaultSetting('vaultNavBarLegacy',$scope.legacyNavbarDefault);
+                    $scope.legacyNavbarAlreadyInitialized=true;
+                };
+
 				$rootScope.$on('credentials_loaded', function () {
 					$rootScope.$broadcast('selected_tags_updated', $scope.selectedTags);
+                    $scope.initializeNavbar();
 				});
 
 				$scope.available_tags = TagService.getTags();
@@ -91,10 +223,14 @@
 					if ($scope.selectedTags.length === 0) {
 						return TagService.getTags();
 					} else {
-						return $scope.filtered_tags;
+                        return TagService.getTags();
+                        //Always show all tags
+						//return $scope.filtered_tags;
 					}
 				}, function (tags) {
-					$scope.available_tags = tags;
+                    //Always show all tags
+					//$scope.available_tags = tags;
+					$scope.available_tags = TagService.getTags();
 				}, true);
 
 				$scope.toggleDeleteTime = function () {
@@ -102,8 +238,9 @@
 						$scope.delete_time = 0;
 					} else {
 						$scope.delete_time = 1;
+                        this.filterCredentialBySpecial('nav_trashbin');
 					}
 					$rootScope.$broadcast('set_delete_time', $scope.delete_time);
 				};
 			}]);
-}());
\ No newline at end of file
+}());
diff --git a/js/app/controllers/vault.js b/js/app/controllers/vault.js
index de14b39a..cf724524 100644
--- a/js/app/controllers/vault.js
+++ b/js/app/controllers/vault.js
@@ -46,7 +46,11 @@
 						var vault = vaults[i];
 						if (vault.guid === default_vault.guid) {
 							$scope.default_vault = true;
-							$scope.list_selected_vault = vault;
+							//This prevents the opening of the default vault if the user logs out
+							if(!$rootScope.override_default_vault){
+                                $scope.list_selected_vault = vault;
+                                $rootScope.override_default_vault=false;
+							}
 							SettingsService.setSetting('defaultVault', vault);
 							if (SettingsService.getSetting('defaultVaultPass')) {
 								$location.path('/vault/' + vault.guid);
@@ -219,7 +223,8 @@
 			};
 
 
-			$scope.createVault = function (vault_name, vault_key, vault_key2) {
+
+                $scope.createVault = function (vault_name, vault_key, vault_key2) {
 				if (vault_key !== vault_key2) {
 					$scope.error = $translate.instant('password.do.not.match');
 					return;
diff --git a/js/app/directives/credentialfield.js b/js/app/directives/credentialfield.js
index fbf7905e..44a6c276 100644
--- a/js/app/directives/credentialfield.js
+++ b/js/app/directives/credentialfield.js
@@ -50,12 +50,12 @@
 				'<div class="tools">' +
 				'<div class="cell" ng-if="toggle" tooltip="tggltxt" ng-click="toggleVisibility()"><i class="fa" ng-class="{\'fa-eye\': !valueVisible, \'fa-eye-slash\': valueVisible }"></i></div>' +
 				'<div class="cell" ng-if="isLink"><a ng-href="{{value}}" target="_blank" rel="nofollow noopener noreferrer"><i tooltip="\'Open in new window\'" class="link fa fa-external-link"></i></a></div>' +
-				'<div class="cell" ngclipboard-success="onSuccess(e);" ngclipboard-error="onError(e);" ngclipboard data-clipboard-text="{{value}}"><i  tooltip="copy_msg" class="fa fa-files-o"></i></div>' +
+                '<div class="cell" ngclipboard-success="onSuccess(e);" ngclipboard-error="onError(e);" ngclipboard data-clipboard-text="{{value}}"><i tooltip="copy_msg" class="fa fa-files-o"></i></div>' +
 				'</div></span>',
 				link: function (scope) {
 					var expression = /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/gi;
 					var regex = new RegExp(expression);
-					$translate(['toggle.visibility', 'copy', 'copied']).then(function (translations) {
+					$translate(['toggle.visibility','copy.field', 'copy', 'copied']).then(function (translations) {
 						scope.tggltxt = translations['toggle.visibility'];
 						scope.copy_msg = translations['copy.field'];
 					});
diff --git a/js/app/directives/icon.js b/js/app/directives/icon.js
index 21e70d1d..646dec01 100644
--- a/js/app/directives/icon.js
+++ b/js/app/directives/icon.js
@@ -32,7 +32,7 @@
   angular.module('passmanApp').directive('credentialIcon', [
     '$window', function($window) {
       return {
-        template: '<img ng-src="{{ iconUrl }}" width="16">',
+        template: '<img ng-src="{{ iconUrl }}" class="icon-image">',
         restrict: 'E',
         scope: {
           credential: '=',
diff --git a/js/app/services/vaultservice.js b/js/app/services/vaultservice.js
index 4ca35ee6..b24577d2 100644
--- a/js/app/services/vaultservice.js
+++ b/js/app/services/vaultservice.js
@@ -66,7 +66,7 @@
 						return false;
 					} else {
 						_activeVault.vault_settings[key] = value;
-						_this.updateVault(_activeVault);
+                        this.updateVault(_activeVault);
 					}
 
 				},
diff --git a/js/templates.js b/js/templates.js
index fe20bdc9..7555f7e2 100644
--- a/js/templates.js
+++ b/js/templates.js
@@ -9,7 +9,7 @@ angular.module('views/credential_revisions.html', []).run(['$templateCache', fun
 angular.module('views/edit_credential.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/edit_credential.html',
-    '<div id="controls"><div class="actions creatable"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'edit.credential\' | translate}} "{{storedCredential.label}}"</a> <a ng-if="!storedCredential.credential_id">{{ \'create.credential\' | translate}}</a></div></div></div></div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="{active:isActiveTab(tab)}" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div><button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i> {{ \'save\' | translate}}</button> <button ng-click="cancel()">{{ \'cancel\' | translate}}</button></div>');
+    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" data-dir="/Test"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last" data-dir="/Test"><a ng-if="storedCredential.credential_id">{{ \'edit.credential\' | translate}} "{{storedCredential.label}}"</a> <a ng-if="!storedCredential.credential_id">{{ \'create.credential\' | translate}}</a></div></div></div></div><div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div><button ng-click="saveCredential()" ng-disabled="saving"><i class="fa fa-spinner fa-spin" ng-show="saving"></i> {{ \'save\' | translate}}</button> <button ng-click="cancel()">{{ \'cancel\' | translate}}</button></div></div>');
 }]);
 
 angular.module('views/partials/credential_template.html', []).run(['$templateCache', function ($templateCache) {
@@ -107,7 +107,7 @@ angular.module('views/partials/forms/share_credential/link_sharing.html', []).ru
 angular.module('views/partials/icon-picker.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/partials/icon-picker.html',
-    '<div><div class="cell"><credential-icon credential="credential"></credential-icon></div><div style="display: none" id="iconPicker" title="{{ \'pick.icon\' | translate }}"><div class="iconList"><div ng-repeat="(groupName, icons) in iconGroups"><h2 style="clear: both" id="{{groupName}}">{{groupName}}</h2><div class="icon" ng-repeat="icon in icons" ng-click="selectIcon(icon)"><img ng-src="{{icon.url}}" height="32"></div></div></div><div class="iconModifier"><div ng-if="selectedIcon">{{ \'selected.icon\' | translate}}:<br><img ng-src="{{selectedIcon.url}}" height="32"><br><button ng-click="useIcon()" ng-if="selectedIcon">{{ \'use.icon\' | translate}}</button></div></div></div></div>');
+    '<div class="cell icon-category-auth"></div><div style="display: none" id="iconPicker" title="{{ \'pick.icon\' | translate }}"><div class="iconList"><div ng-repeat="(groupName, icons) in iconGroups"><h2 style="clear: both" id="{{groupName}}">{{groupName}}</h2><div class="icon" ng-repeat="icon in icons" ng-click="selectIcon(icon)"><img ng-src="{{icon.url}}" height="32"></div></div></div><div class="iconModifier"><div ng-if="selectedIcon">{{ \'selected.icon\' | translate}}:<br><img ng-src="{{selectedIcon.url}}" height="32"><br><button ng-click="useIcon()" ng-if="selectedIcon">{{ \'use.icon\' | translate}}</button></div></div></div>');
 }]);
 
 angular.module('views/partials/password-meter.html', []).run(['$templateCache', function ($templateCache) {
@@ -119,7 +119,7 @@ angular.module('views/partials/password-meter.html', []).run(['$templateCache',
 angular.module('views/settings.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/settings.html',
-    '<div id="controls"><div class="actions creatable"><div class="breadcrumb"><div class="crumb svg ui-droppable"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last"><a>{{ \'settings\' | translate}}</a></div></div></div></div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="{active:isActiveTab(tab)}" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container settings edit_credential"><div ng-include="currentTab.url"></div></div>');
+    '<div id="passman-controls"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg"><a ng-click="cancel()">{{active_vault.name}}</a></div><div class="crumb svg last"><a>{{ \'settings\' | translate}}</a></div></div></div></div><div><ul class="tab_header"><li ng-repeat="tab in tabs track by $index" class="tab" ng-class="isActiveTab(tab)? \'active\' : \'inactive\'" ng-click="onClickTab(tab)" use-theme color="\'true\'">{{tab.title | translate}}<div class="indicator" use-theme negative="\'true\'"></div></li></ul><div class="tab_container settings edit_credential" use-theme type="\'border-top-color\'"><div ng-include="currentTab.url"></div></div></div>');
 }]);
 
 angular.module('views/share_credential.html', []).run(['$templateCache', function ($templateCache) {
@@ -131,8 +131,8 @@ angular.module('views/share_credential.html', []).run(['$templateCache', functio
 angular.module('views/show_vault.html', []).run(['$templateCache', function ($templateCache) {
   'use strict';
   $templateCache.put('views/show_vault.html',
-    '<div off-click="closeSelected()" off-click-filter="\'.download-js-link, .sidebar-shown\'"><div id="passman-controls" ng-class="{ \'sidebar-shown\': selectedCredential }"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg last" ng-click="clearState()"><span>{{active_vault.name}}</span></div></div></div><div class="actions creatable"><span ng-click="addCredential()" class="button new"><span>+</span></span></div><div class="title" credential-counter="filtered_credentials" vault="active_vault" delete-time="delete_time" filters="filterOptions"></div><div class="searchboxContainer" ng-init="filterOptionShown = false;" off-click="filterOptionShown = false;"><input type="text" ng-model="filterOptions.filterText" class="searchbox" id="searchBox" placeholder="{{\'search.credential\' | translate}}" select-on-click clear-btn ng-click="filterOptionShown = true;"><div class="searchOptions" ng-show="filterOptionShown"><input type="checkbox" ng-model="filterOptions.useRegex"> {{ \'use.regex\' | translate }}</div></div><div class="viewModes"><div class="view-mode" ng-class="{\'active\': view_mode === \'list\' }" ng-click="switchViewMode(\'list\')"><i class="fa fa-list"></i></div><div class="view-mode" ng-class="{\'active\': view_mode === \'grid\' }" ng-click="switchViewMode(\'grid\')"><i class="fa fa-th-large"></i></div></div></div><div class="loaderContainer" ng-if="show_spinner"><div class="loader" use-theme type="\'border-bottom-color\'"></div></div><div ng-init="menuOpen = false;"><table class="credential-table" ng-if="view_mode === \'list\'"><tr ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="showCredentialRow(credential)" ng-click="selectCredential(credential)" ng-dblclick="editCredential(credential)" ng-class="{\'selected\': selectedCredential.credential_id == credential.credential_id}"><td><span class="tags"><span class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</span> </span><span class="icon" ng-if="credential.url"><credential-icon credential="credential"></credential-icon></span><span class="icon" ng-if="!credential.url"><i class="fa fa-lock" ng-if="!credential.acl && !credential.shared_key"></i> <i class="fa fa-share-alt" ng-if="credential.acl"></i> <i class="fa fa-share-alt-square" ng-if="credential.shared_key"></i> </span><span class="label">{{ ::credential.label}}</span></td></tr></table><ul class="grid-view" ng-if="view_mode === \'grid\'"><li class="credential" ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="credential.hidden == 0 && showCredentialRow(credential)" ng-click="selectCredential(credential)" use-theme type="\'border-color\'"><div class="credential_content"><div class="label">{{ ::credential.label}}</div><div class="tags"><div class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</div></div></div></li></ul></div><div id="app-sidebar" class="detailsView scroll-container app_sidebar" ng-show="selectedCredential"><h2>{{selectedCredential.label}}</h2><span class="close icon-close" ng-click="closeSelected()" alt="Close"></span><div credential-template="selectedCredential"></div><div ng-show="selectedCredential"><div><button class="button" ng-click="editCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-edit"></span> {{ \'edit\' | translate}}</button> <button class="button" ng-click="deleteCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-trash"></span> {{ \'delete\' | translate}}</button> <button class="button" ng-click="shareCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && selectedCredential.acl === undefined &&\n' +
-    '						(settings.user_sharing_enabled === 1 || settings.user_sharing_enabled === \'1\' || settings.link_sharing_enabled === 1 || settings.link_sharing_enabled === \'1\')"><span class="fa fa-share"></span> {{ \'share\' | translate}}</button> <button class="button" ng-click="getRevisions(selectedCredential)" ng-if="selectedCredential.delete_time == 0  && hasPermission(selectedCredential.acl.permissions, permissions.permissions.HISTORY)"><span class="fa fa-undo"></span> {{ \'revisions\' | translate}}</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="recoverCredential(selectedCredential) && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-recycle"></span> {{\'recover\' | translate}}</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="destroyCredential(selectedCredential)"><span class="fa fa-bomb"></span> {{\'destroy\' | translate}}</button></div></div></div></div><div class="share_popup" style="display: none">{{ \'sharereq.title\' | translate}}<br><p>{{ \'sharereq.line1\' | translate}}</p>{{active_vault.vault_id}}<table class="table"><thead><tr><td>{{ \'label\' | translate}}</td><td>{{ \'permissions\' | translate}}</td><td>{{ \'received.from\' | translate}}</td><td>{{ \'date\' | translate}}</td></tr></thead><tr ng-repeat="share_request in incoming_share_requests" ng-if="share_request.target_vault_id == active_vault.vault_id"><td>{{share_request.credential_label}}</td><td>{{share_request.permissions}}</td><td>{{share_request.from_user_id}}</td><td>{{share_request.created * 1000 | date:\'dd-MM-yyyy @	HH:mm:ss\'}}</td><td><span class="link" ng-click="acceptShareRequest(share_request)">{{ \'accept\' | translate}}</span> | <span class="link" ng-click="declineShareRequest(share_request)">{{ \'decline\' | translate}}</span></td></tr></table></div>');
+    '<div class="main_list" off-click="closeSelected()" off-click-filter="\'.download-js-link, .sidebar-shown\'"><div id="passman-controls" ng-class="{ \'sidebar-shown\': selectedCredential }"><div class="breadcrumb"><div class="breadcrumb"><div class="crumb svg ui-droppable" data-dir="/"><a ng-click="logout()"><i class="fa fa-home"></i></a></div><div class="crumb svg" ng-click="clearState()"><a>{{active_vault.name}}</a></div><div class="crumb svg last" ng-hide="delete_time>0"><a ng-click="addCredential()">{{ \'New\' | translate}}</a></div></div></div><div class="title" credential-counter="filtered_credentials" vault="active_vault" delete-time="delete_time" filters="filterOptions"></div><div class="searchboxContainer" ng-init="filterOptionShown = false;" off-click="filterOptionShown = false;"><input type="text" ng-model="filterOptions.filterText" class="searchbox" id="searchBox" placeholder="{{\'search.credential\' | translate}}" select-on-click clear-btn ng-click="filterOptionShown = true;"><div class="searchOptions" ng-show="filterOptionShown"><input type="checkbox" ng-model="filterOptions.useRegex"> {{ \'use.regex\' | translate }}</div></div><div class="viewModes"><div class="view-mode" ng-class="{\'active\': view_mode === \'list\' }" ng-click="switchViewMode(\'list\')"><i class="fa fa-list"></i></div><div class="view-mode" ng-class="{\'active\': view_mode === \'grid\' }" ng-click="switchViewMode(\'grid\')"><i class="fa fa-th-large"></i></div></div></div><div class="loaderContainer" ng-if="show_spinner"><div class="loader" use-theme type="\'border-bottom-color\'"></div></div><div ng-init="menuOpen = false;"><table class="credential-table" ng-if="view_mode === \'list\'"><tr ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="showCredentialRow(credential)" ng-click="selectCredential(credential)" ng-dblclick="editCredential(credential)" ng-class="{\'selected\': selectedCredential.credential_id == credential.credential_id}"><td><span class="tags"><span class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</span> </span><span class="icon" ng-if="credential.url"><credential-icon credential="credential"></credential-icon></span><span class="icon" ng-if="!credential.url"><i class="fa fa-lock" ng-if="!credential.acl && !credential.shared_key"></i> <i class="fa fa-share-alt" ng-if="credential.acl"></i> <i class="fa fa-share-alt-square" ng-if="credential.shared_key"></i> </span><a class="label">{{ ::credential.label}}</a></td></tr></table><ul class="grid-view" ng-if="view_mode === \'grid\'"><li class="credential" ng-repeat="credential in filtered_credentials | orderBy:\'label\'" ng-if="credential.hidden == 0 && showCredentialRow(credential)" ng-click="selectCredential(credential)" use-theme type="\'border-color\'"><div class="credential_content"><div><span class="icon" ng-if="credential.url"><credential-icon credential="credential"></credential-icon></span><span class="icon" ng-if="!credential.url"><i class="fa fa-lock" ng-if="!credential.acl && !credential.shared_key"></i> <i class="fa fa-share-alt" ng-if="credential.acl"></i> <i class="fa fa-share-alt-square" ng-if="credential.shared_key"></i></span><div class="label">{{ ::credential.label}}</div></div><div class="tags"><div class="tag" ng-repeat="tag in credential.tags_raw">{{ ::tag.text}}</div></div></div></li></ul></div></div><div id="app-sidebar" class="app_sidebar" ng-show="selectedCredential"><span class="close icon-close" ng-click="closeSelected()" alt="Close"></span><div class="sidebar"><span class="icon sidebar-icon" ng-if="selectedCredential.url"><credential-icon credential="selectedCredential"></credential-icon></span><span class="icon sidebar-icon" ng-if="!selectedCredential.url"><credential-icon credential="selectedCredential"></credential-icon></span><h2 class="sidebar-label">{{selectedCredential.label}}</h2></div><div credential-template="selectedCredential"></div><div ng-show="selectedCredential"><div><button class="button" ng-click="editCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-edit"></span> {{ \'edit\' | translate}}</button> <button class="button" ng-click="deleteCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-trash"></span> {{ \'delete\' | translate}}</button> <button class="button" ng-click="shareCredential(selectedCredential)" ng-if="selectedCredential.delete_time == 0 && selectedCredential.acl === undefined &&\n' +
+    '						(settings.user_sharing_enabled === 1 || settings.user_sharing_enabled === \'1\' || settings.link_sharing_enabled === 1 || settings.link_sharing_enabled === \'1\')"><span class="fa fa-share"></span> {{ \'share\' | translate}}</button> <button class="button" ng-click="getRevisions(selectedCredential)" ng-if="selectedCredential.delete_time == 0  && hasPermission(selectedCredential.acl.permissions, permissions.permissions.HISTORY)"><span class="fa fa-undo"></span> {{ \'revisions\' | translate}}</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="recoverCredential(selectedCredential) && hasPermission(selectedCredential.acl.permissions, permissions.permissions.WRITE)"><span class="fa fa-recycle"></span> {{\'recover\' | translate}}</button> <button class="button" ng-if="selectedCredential.delete_time > 0" ng-click="destroyCredential(selectedCredential)"><span class="fa fa-bomb"></span> {{\'destroy\' | translate}}</button></div></div></div><div class="share_popup" style="display: none">{{ \'sharereq.title\' | translate}}<br><p>{{ \'sharereq.line1\' | translate}}</p>{{active_vault.vault_id}}<table class="table"><thead><tr><td>{{ \'label\' | translate}}</td><td>{{ \'permissions\' | translate}}</td><td>{{ \'received.from\' | translate}}</td><td>{{ \'date\' | translate}}</td></tr></thead><tr ng-repeat="share_request in incoming_share_requests" ng-if="share_request.target_vault_id == active_vault.vault_id"><td>{{share_request.credential_label}}</td><td>{{share_request.permissions}}</td><td>{{share_request.from_user_id}}</td><td>{{share_request.created * 1000 | date:\'dd-MM-yyyy @	HH:mm:ss\'}}</td><td><span class="link" ng-click="acceptShareRequest(share_request)">{{ \'accept\' | translate}}</span> | <span class="link" ng-click="declineShareRequest(share_request)">{{ \'decline\' | translate}}</span></td></tr></table></div>');
 }]);
 
 angular.module('views/vault_req_deletion.html', []).run(['$templateCache', function ($templateCache) {