1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-27 12:36:14 +01:00

add toggle to see plain password when adding & editing ciphers (#292) (#390)

* add toggle to see plain password when adding & editing ciphers (#292)

* reduce number of password input fields to 1
while editing/creating ciphers
This commit is contained in:
Dominik Halfkann 2017-11-24 04:07:43 +01:00 committed by Kyle Spearrin
parent ed28816b99
commit 388a65f25f
5 changed files with 40 additions and 6 deletions

View File

@ -88,6 +88,12 @@ angular
} }
}; };
$scope.showPassword = false;
$scope.togglePassword = function () {
$analytics.eventTrack('Toggled Password');
$scope.showPassword = !$scope.showPassword;
};
$scope.addField = function (type) { $scope.addField = function (type) {
if (!$scope.cipher.fields) { if (!$scope.cipher.fields) {
$scope.cipher.fields = []; $scope.cipher.fields = [];

View File

@ -105,6 +105,12 @@ angular
} }
}; };
$scope.showPassword = false;
$scope.togglePassword = function () {
$analytics.eventTrack('Toggled Password');
$scope.showPassword = !$scope.showPassword;
};
$scope.addField = function (type) { $scope.addField = function (type) {
if (!$scope.cipher.fields) { if (!$scope.cipher.fields) {
$scope.cipher.fields = []; $scope.cipher.fields = [];

View File

@ -38,9 +38,16 @@
<label for="loginUsername" class="item-label">{{i18n.username}}</label> <label for="loginUsername" class="item-label">{{i18n.username}}</label>
<input id="loginUsername" type="text" name="Login.Username" ng-model="cipher.login.username"> <input id="loginUsername" type="text" name="Login.Username" ng-model="cipher.login.username">
</div> </div>
<div class="list-section-item"> <div class="list-section-item flex">
<div class="flex-grow">
<label for="loginPassword" class="item-label">{{i18n.password}}</label> <label for="loginPassword" class="item-label">{{i18n.password}}</label>
<input id="loginPassword" type="password" name="Login.Password" ng-model="cipher.login.password"> <input id="loginPassword" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password" ng-model="cipher.login.password">
</div>
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.togglePassword}}" ng-click="togglePassword()">
<i class="fa fa-lg" ng-class="[{'fa-eye': !showPassword}, {'fa-eye-slash': showPassword}]"></i>
</a>
</div>
</div> </div>
<a class="list-section-item" href="" ng-click="generatePassword()"> <a class="list-section-item" href="" ng-click="generatePassword()">
{{i18n.generatePassword}} {{i18n.generatePassword}}

View File

@ -31,9 +31,16 @@
<label for="loginUsername" class="item-label">{{i18n.username}}</label> <label for="loginUsername" class="item-label">{{i18n.username}}</label>
<input id="loginUsername" type="text" name="Login.Username" ng-model="cipher.login.username"> <input id="loginUsername" type="text" name="Login.Username" ng-model="cipher.login.username">
</div> </div>
<div class="list-section-item"> <div class="list-section-item flex">
<div class="flex-grow">
<label for="loginPassword" class="item-label">{{i18n.password}}</label> <label for="loginPassword" class="item-label">{{i18n.password}}</label>
<input id="loginPassword" type="password" name="Login.Password" ng-model="cipher.login.password"> <input id="loginPassword" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password" ng-model="cipher.login.password">
</div>
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.togglePassword}}" ng-click="togglePassword()">
<i class="fa fa-lg" ng-class="[{'fa-eye': !showPassword}, {'fa-eye-slash': showPassword}]"></i>
</a>
</div>
</div> </div>
<a class="list-section-item" href="" ng-click="generatePassword()"> <a class="list-section-item" href="" ng-click="generatePassword()">
{{i18n.generatePassword}} {{i18n.generatePassword}}

View File

@ -432,6 +432,14 @@
overflow-wrap: break-word; overflow-wrap: break-word;
} }
&.flex {
display: flex;
}
.flex-grow {
flex-grow: 1;
}
input:not([type="checkbox"]), select, textarea { input:not([type="checkbox"]), select, textarea {
border: none; border: none;
width: 100%; width: 100%;