Merge branch 'feature/vault-password-visibility-toggle'

nextcloud · Apr 28, 2024 · a326bf2 · a326bf2
2 parents 3d6f7d3 + cfa818f
commit a326bf2
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/js/app/controllers/vault.js b/js/app/controllers/vault.js
@@ -222,9 +222,7 @@
 				}
 			};
 
-
-
-                $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;
@@ -250,5 +248,16 @@
 					});
 				});
 			};
+
+			$scope.togglePasswordInputVisibility = function ($event, inputElementId) {
+				const inputElement = document.getElementById(inputElementId);
+				if (inputElement.type === "password") {
+					inputElement.type = "text";
+					$event.currentTarget.classList.replace('fa-eye-slash', 'fa-eye');
+				} else {
+					inputElement.type = "password";
+					$event.currentTarget.classList.replace('fa-eye', 'fa-eye-slash');
+				}
+			};
 		}]);
-}());
+}());
diff --git a/js/templates.js b/js/templates.js
diff --git a/sass/vaults.scss b/sass/vaults.scss
@@ -73,6 +73,16 @@
       .last_access{
         color: #8e8e8e;
       }
+      .input-group{
+        display: flex;
+        align-items: center;
+
+        i{
+          padding-bottom: 3px;
+          margin-left: 10px;
+          cursor: pointer;
+        }
+      }
     }
 
     input[type="password"], input[type="text"]{

diff --git a/templates/views/vaults.html b/templates/views/vaults.html
@@ -33,9 +33,12 @@
 			<div>
 				<input type="text" ng-model="vault_name" required>
 			</div>
-			<div>
+			<div class="pw-input">
 				{{ 'new.vault.pass' | translate}}
-				<input type="password" ng-model="vault_key" required>
+                <div class="input-group">
+                    <input type="password" ng-model="vault_key" required id="new_vault_key">
+                    <i class="fa fa-eye-slash" ng-click="togglePasswordInputVisibility($event, 'new_vault_key')"></i>
+                </div>
 				<ng-password-meter password="vault_key" score="vault_key_score"></ng-password-meter>
 			</div>
 			<div>
@@ -88,7 +91,11 @@
 			{{ 'input.vault.password' | translate}} {{list_selected_vault.name}}
 
 			<div class="pw-input">
-				<input type="password" ng-model="vault_key" ng-enter="loginToVault(list_selected_vault, vault_key)">
+                <div class="input-group">
+                    <input type="password" ng-model="vault_key" ng-enter="loginToVault(list_selected_vault, vault_key)" id="login_vault_key">
+                    <i class="fa fa-eye-slash" ng-click="togglePasswordInputVisibility($event, 'login_vault_key')"></i>
+                </div>
+
 				<small class="last_access">{{'last.access' | translate}}:
 					<span ng-if="list_selected_vault.last_access > 0">{{list_selected_vault.last_access * 1000 | date:'dd-MM-yyyy @ HH:mm:ss'}}</span>
 					<span ng-if="list_selected_vault.last_access === 0">Never</span>