Updated EditCredential to use sidebar

Signed-off-by: fnuesse <felix.nuesse@t-online.de>

controller/translationcontroller.php

@@ -428,7 +428,7 @@ class TranslationController extends ApiController {
 			'expired.share' => $this->trans->t('Awwhh… credential not found. Maybe it expired'),
 
 			//compromised credentials
-			'compromised.label' => $this->trans->t('Compromise!'),
+			'compromised.label' => $this->trans->t('Mark credential as breached'),
 			'compromised.warning.list' => $this->trans->t('Compromised!'),
 			'compromised.warning' => $this->trans->t('This password is compromised. You can only remove this warning with changing the password.'),
 

js/app/controllers/edit_credential.js

@@ -32,8 +32,12 @@
 	 * Controller of the passmanApp
 	 */
 	angular.module('passmanApp')
-		.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) {
+		.controller('CredentialEditCtrl', ['$scope', 'VaultService', 'CredentialService', 'SettingsService', '$location', '$routeParams', 'FileService', 'EncryptService', 'TagService', 'NotificationService', 'ShareService', '$translate','$rootScope', 'MenuChangeService',
+			function ($scope, VaultService, CredentialService, SettingsService, $location, $routeParams, FileService, EncryptService, TagService, NotificationService, ShareService, $translate, $rootScope, MenuChangeService) {
+
+				MenuChangeService.returnToVaultIfNotReady($location, VaultService.getActiveVault());
+				MenuChangeService.initChangeListener($rootScope, "CredentialEditCtrl");
+
 				$scope.active_vault = VaultService.getActiveVault();
 				if (!SettingsService.getSetting('defaultVault') || !SettingsService.getSetting('defaultVaultPass')) {
 					if (!$scope.active_vault) {
@@ -77,23 +81,23 @@
 					$scope.tabs = [{
 						title: translations.general,
 						url: 'views/partials/forms/edit_credential/basics.html',
-						color: 'blue'
+						icon: 'icon-category-customization svg'
 					}, {
 						title: translations.password,
 						url: 'views/partials/forms/edit_credential/password.html',
-						color: 'green'
+						icon: 'icon-category-security svg'
 					}, {
 						title:translations['custom.fields'],
 						url: 'views/partials/forms/edit_credential/custom_fields.html',
-						color: 'orange'
+						icon: 'icon-toggle-filelist svg'
 					}, {
 						title: translations.files,
 						url: 'views/partials/forms/edit_credential/files.html',
-						color: 'yellow'
+						icon: 'icon-edit svg'
 					}, {
 						title: translations.otp,
 						url: 'views/partials/forms/edit_credential/otp.html',
-						color: 'purple'
+						icon: 'icon-quota svg'
 					}];
 					$scope.currentTab = $scope.tabs[0];
 				});
@@ -121,9 +125,13 @@
 				};
 
 
+				//every settingscontroller needs to know the active tab. Because the sidebar and the main view do not share the same controllerinstance, we need to broadcast that change
 				$scope.onClickTab = function (tab) {
-					$scope.currentTab = tab;
+					$rootScope.$emit("EditCredentialsTabClicked", tab);
 				};
+				$rootScope.$on('EditCredentialsTabClicked', function (evt, tabClicked) {
+					$scope.currentTab = tabClicked;
+				});
 
 				$scope.isActiveTab = function (tab) {
 					return tab.url === $scope.currentTab.url;

js/app/controllers/settings.js

@@ -38,6 +38,7 @@
 				$scope.new_vault_name = '';
 				$scope.showGenericImport = false;
 
+				MenuChangeService.returnToVaultIfNotReady($location, VaultService.getActiveVault());
 				MenuChangeService.initChangeListener($rootScope, "SettingsCtrl");
 
 				$scope.active_vault = VaultService.getActiveVault();
@@ -150,7 +151,6 @@
 				};
 				$rootScope.$on('SettingsTabClicked', function (evt, tabClicked) {
 					$scope.currentTab = tabClicked;
-					console.log(tabClicked.title);
 				});
 
 

js/app/services/menuchange.js

@@ -38,23 +38,31 @@
 					var rs=$rootScope;
 					$rootScope.$on('$locationChangeStart', function(event, next, current) {
 						var regex_uuid="[0-9a-fA-F]{8}\\-[0-9a-fA-F]{4}\\-[0-9a-fA-F]{4}\\-[0-9a-fA-F]{4}\\-[0-9a-fA-F]{12}";
+						var edit_regex=new RegExp("(.*)apps/passman/#/vault/"+regex_uuid+"/edit");
 						var settings_regex=new RegExp("(.*)apps/passman/#/vault/"+regex_uuid+"/settings");
 						var vault_regex=new RegExp("(.*)apps/passman/#/vault/"+regex_uuid);
 
 						if(vault_regex.test(next)){
-							console.log("vault_regex!");
 							rs.menulocation="CredentialCtrl";
 						}
 
 						if(settings_regex.test(next)){
-							console.log("Settings!");
 							rs.menulocation="SettingsCtrl";
-							rs.settingsShown = false;
 						}
 
+						if(edit_regex.test(next)){
+							rs.menulocation="CredentialEditCtrl";
+						}
+
+
 					});
 					rs.menulocation=defaultView;
 				},
+				returnToVaultIfNotReady:function ($location, vault) {
+					if(typeof vault === 'undefined'){
+						$location.path('/vault/');
+					}
+				},
 			};
 			}]);
 }());

sass/credentials.scss

@@ -118,6 +118,14 @@
     }
     .breadcrumb {
       float: left;
+
+      .crumb_overrides {
+        text-overflow: ellipsis;
+        overflow: visible;
+        background: none;
+
+      }
+
     }
     .actions.creatable {
       float: left;
@@ -683,7 +691,6 @@
   margin-top: 4px;
   padding: 5px;
   margin-right: 4px;
-  border-right: 1px solid #c9c9c9;
 }
 
 .inputfile:focus + label,

templates/main.php

@@ -203,6 +203,17 @@ style('passman', 'app');
 				<a ng-click="cancel()" class="icon-category-auth svg">{{ 'settings.backtovault' | translate }}</a>
 			</li>
 		</ul>
+		<ul class="with-icon" ng-if="menulocation === 'CredentialEditCtrl'" ng-controller="CredentialEditCtrl">
+			<li ng-repeat="tab in tabs track by $index"
+				ng-class="isActiveTab(tab)? 'active' : 'inactive'"
+				ng-click="onClickTab(tab)">
+				<a class="{{tab.icon}}" ng-click="onClickTab(tab)">{{tab.title | translate}}</a>
+			</li>
+			<li data-id="backToVault" class="pinned first-pinned">
+				<a ng-click="cancel()" class="icon-category-auth svg">{{ 'settings.backtovault' | translate }}</a>
+			</li>
+		</ul>
+
 
         <div id="app-settings" ng-init="settingsShown = false;">
             <div id="app-settings-header">

templates/views/edit_credential.html

@@ -8,28 +8,17 @@
 			<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}}
+			<div class="crumb svg last crumb_overrides" data-dir="/Test">
+				<a class="crumb_overrides" ng-if="storedCredential.credential_id">{{ 'edit.credential' | translate}}
 					"{{storedCredential.label}}"</a>
-				<a ng-if="!storedCredential.credential_id">{{ 'create.credential' | translate}}</a>
+				<a class="crumb_overrides" 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 class="view_container edit_credential" >
 	<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>