Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-29 17:38:04 +01:00
Code Issues Projects Releases Wiki Activity

action buttons component

Browse Source
This commit is contained in:
Kyle Spearrin 2017-10-16 14:45:47 -04:00
parent 276be2fa87
commit ad285a7605
14 changed files with 199 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/_locales/en/messages.json
View File

@ -64,9 +64,18 @@
"copyPassword": {
"message": "Copy Password"
},
"copyUri": {
"message": "Copy URI"
},
"copyUsername": {
"message": "Copy Username"
},
"copyNumber": {
"message": "Copy Number"
},
"copySecurityCode": {
"message": "Copy Security Code"
},
"autoFill": {
"message": "Auto-fill"
},

4
src/models/domainModels.js
View File

@ -140,6 +140,7 @@ var Login = function (obj, alreadyEncrypted, localData) {
var Cipher = function (obj, alreadyEncrypted, localData) {
this.constantsService = chrome.extension.getBackgroundPage().bg_constantsService;
this.utilsService = chrome.extension.getBackgroundPage().bg_utilsService;
buildDomainModel(this, obj, {
id: null,
@ -417,6 +418,9 @@ function buildDomainModel(model, obj, map, alreadyEncrypted, notEncList) {
case self.constantsService.cipherType.login:
model.login = decObj;
model.subTitle = model.login.username;
if (model.login.uri) {
model.login.domain = self.utilsService.getDomain(model.login.uri);
}
break;
case self.constantsService.cipherType.secureNote:
model.secureNote = decObj;

41
src/popup/app/components/actionButtonsComponent.js
View File

@ -1,18 +1,41 @@
angular
.module('bit.components')
.component('actionButtonsComponent', {
.component('actionButtons', {
bindings: {
uri: '<'
cipher: '<',
showView: '<',
onView: '&'
},
template: '',
controller: function (stateService) {
this.$onInit = (function () {
templateUrl: 'app/components/views/actionButtons.html',
controller: function (i18nService, $analytics, constantsService, toastr, $timeout, $window, utilsService) {
var ctrl = this;
}).bind(this);
ctrl.$onInit = function () {
ctrl.i18n = i18nService;
ctrl.constants = constantsService;
this.$onChanges = (function () {
}).bind(this);
ctrl.launch = function () {
$timeout(function () {
if (ctrl.cipher.login.uri.startsWith('http://') || ctrl.cipher.login.uri.startsWith('https://')) {
$analytics.eventTrack('Launched Website From Listing');
chrome.tabs.create({ url: ctrl.cipher.login.uri });
if (utilsService.inPopup($window)) {
$window.close();
}
}
});
};
ctrl.clipboardError = function (e) {
toastr.info(i18n.browserNotSupportClipboard);
};
ctrl.clipboardSuccess = function (e, type, aType) {
e.clearSelection();
$analytics.eventTrack('Copied ' + aType);
toastr.info(type + i18nService.valueCopied);
};
};
}
});

38
src/popup/app/components/views/actionButtons.html Normal file
View File

@ -0,0 +1,38 @@
<div class="action-buttons">
<div ng-if="$ctrl.cipher.type === $ctrl.constants.cipherType.login">
<span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.launchWebsite}}" ng-click="$ctrl.launch()"
ng-if="$ctrl.cipher.login.uri && !$ctrl.showView">
<i class="fa fa-lg fa-share-square-o"></i>
</span>
<span class="btn-list" ng-click="$ctrl.onView($ctrl.cipher)" stop-prop stop-click title="{{i18n.view}}"
ng-if="$ctrl.showView">
<i class="fa fa-lg fa-eye"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyUsername}}" ngclipboard
ngclipboard-error="$ctrl.clipboardError(e)"
ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.username, 'Username')"
data-clipboard-text="{{$ctrl.cipher.login.username}}" ng-if="$ctrl.cipher.login.username">
<i class="fa fa-lg fa-user"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyPassword}}" ngclipboard
ngclipboard-error="$ctrl.clipboardError(e)"
ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.password, 'Password')"
data-clipboard-text="{{$ctrl.cipher.login.password}}" ng-if="$ctrl.cipher.login.password">
<i class="fa fa-lg fa-key"></i>
</span>
</div>
<div ng-if="$ctrl.cipher.type === $ctrl.constants.cipherType.card">
<span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copyNumber}}" ngclipboard
ngclipboard-error="$ctrl.clipboardError(e)"
ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.number, 'Card Number')"
data-clipboard-text="{{$ctrl.cipher.card.number}}" ng-if="$ctrl.cipher.card.number">
<i class="fa fa-lg fa-hashtag"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{$ctrl.i18n.copySecurityCode}}" ngclipboard
ngclipboard-error="$ctrl.clipboardError(e)"
ngclipboard-success="$ctrl.clipboardSuccess(e, $ctrl.i18n.securityCode, 'Security Code')"
data-clipboard-text="{{$ctrl.cipher.card.code}}" ng-if="$ctrl.cipher.card.code">
<i class="fa fa-lg fa-key"></i>
</span>
</div>
</div>

20
src/popup/app/current/currentController.js
View File

@ -25,15 +25,17 @@ angular
url = tabs[0].url;
}
else {
$timeout(function () {
$scope.loaded = true;
$scope.$apply();
});
return;
}
domain = utilsService.getDomain(url);
if (!domain) {
$timeout(function () {
$scope.loaded = true;
$scope.$apply();
});
return;
}
@ -42,23 +44,15 @@ angular
canAutofill = true;
});
loginService.getAllDecryptedForDomain(domain).then(function (logins) {
loginService.getAllDecryptedForDomain(domain).then(function (ciphers) {
$timeout(function () {
$scope.loaded = true;
$scope.ciphers = ciphers;
});
});
});
}
$scope.clipboardError = function (e, password) {
toastr.info(i18n.browserNotSupportClipboard);
};
$scope.clipboardSuccess = function (e, type) {
e.clearSelection();
toastr.info(type + i18nService.valueCopied);
$analytics.eventTrack('Copied ' + (type === i18nService.username ? 'Username' : 'Password'));
};
$scope.addCipher = function () {
$state.go('addCipher', {
animation: 'in-slide-up',

19
src/popup/app/current/views/current.html
View File

@ -21,23 +21,8 @@
title="{{i18n.autoFill}} {{cipher.name}}"
ng-repeat="cipher in theCiphers = (ciphers | orderBy: [sortUriMatch, sortLastUsed, 'name', 'subTitle'])
track by $index">
<span class="btn-list" stop-prop stop-click title="{{i18n.copyPassword}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.password)"
data-clipboard-text="{{cipher.password}}" ng-class="{'disabled': !cipher.password}">
<i class="fa fa-lg fa-key"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.copyUsername}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.username)"
data-clipboard-text="{{cipher.username}}" ng-class="{'disabled': !cipher.username}">
<i class="fa fa-lg fa-user"></i>
</span>
<span class="btn-list" ng-click="viewCipher(cipher)" stop-prop stop-click
title="{{i18n.edit}} {{cipher.name}}">
<i class="fa fa-lg fa-pencil"></i>
</span>
<icon uri="cipher.uri"></icon>
<action-buttons cipher="cipher" show-view="true" on-view="viewCipher(cipher)"></action-buttons>
<icon cipher="cipher"></icon>
<span class="text">
{{cipher.name}}
<i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>

22
src/popup/app/vault/vaultController.js
View File

@ -161,28 +161,6 @@
});
};
$scope.clipboardError = function (e) {
toastr.info(i18n.browserNotSupportClipboard);
};
$scope.clipboardSuccess = function (e, type) {
e.clearSelection();
$analytics.eventTrack('Copied ' + (type === i18nService.username ? 'Username' : 'Password'));
toastr.info(type + i18nService.valueCopied);
};
$scope.launchWebsite = function (cipher) {
$timeout(function () {
if (cipher.uri.startsWith('http://') || cipher.uri.startsWith('https://')) {
$analytics.eventTrack('Launched Website From Listing');
chrome.tabs.create({ url: cipher.uri });
if (utilsService.inPopup($window)) {
$window.close();
}
}
});
};
$scope.$on('syncCompleted', function (event, successfully) {
$timeout(loadVault, 500);
});

4
src/popup/app/vault/vaultViewCipherController.js
View File

@ -111,9 +111,9 @@ angular
return masked;
};
$scope.clipboardSuccess = function (e, type) {
$scope.clipboardSuccess = function (e, type, aType) {
e.clearSelection();
$analytics.eventTrack('Copied ' + (type === i18nService.username ? 'Username' : 'Password'));
$analytics.eventTrack('Copied ' + aType);
toastr.info(type + i18nService.valueCopied);
};

22
src/popup/app/vault/vaultViewFolderController.js
View File

@ -130,18 +130,6 @@
resetList(matchedCiphers);
};
$scope.launchWebsite = function (cipher) {
$timeout(function () {
if (cipher.uri.startsWith('http://') || cipher.uri.startsWith('https://')) {
$analytics.eventTrack('Launched Website From Listing');
chrome.tabs.create({ url: cipher.uri });
if (utilsService.inPopup($window)) {
$window.close();
}
}
});
};
function resetList(ciphers) {
$scope.vaultCiphers = ciphers;
$scope.pagedVaultCiphers = [];
@ -201,16 +189,6 @@
}, 200);
};
$scope.clipboardError = function (e) {
toastr.info(i18n.browserNotSupportClipboard);
};
$scope.clipboardSuccess = function (e, type) {
e.clearSelection();
$analytics.eventTrack('Copied ' + (type === i18nService.username ? 'Username' : 'Password'));
toastr.info(type + i18nService.valueCopied);
};
function storeState() {
angular.extend(state, {
scrollY: getScrollY(),

30
src/popup/app/vault/views/vault.html
View File

@ -41,20 +41,7 @@
class="list-grouped-item condensed" title="{{i18n.edit}} {{cipher.name}}"
ng-repeat="cipher in vaultFolderCiphers = (vaultCiphers | filter: { folderId: folder.id }
| filter: searchCiphers() | orderBy: ['name', 'subTitle']) track by $index">
<span class="btn-list" stop-prop stop-click title="{{i18n.copyPassword}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
data-clipboard-text="{{cipher.password}}" ng-class="{'disabled': !cipher.password}">
<i class="fa fa-lg fa-key"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.copyUsername}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.username)"
data-clipboard-text="{{cipher.username}}" ng-class="{'disabled': !cipher.username}">
<i class="fa fa-lg fa-user"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.launchWebsite}}" ng-click="launchWebsite(cipher)"
ng-class="{'disabled': !cipher.uri}">
<i class="fa fa-lg fa-share-square-o"></i>
</span>
<action-buttons cipher="cipher"></action-buttons>
<icon cipher="cipher"></icon>
<span class="text">
{{cipher.name}}
@ -74,20 +61,7 @@
class="list-section-item condensed" title="{{i18n.edit}} {{cipher.name}}"
ng-repeat="cipher in searchResults = (vaultCiphers | filter: searchCiphers() | orderBy: ['name', 'subTitle'])
track by $index">
<span class="btn-list" stop-prop stop-click title="{{i18n.copyPassword}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
data-clipboard-text="{{cipher.password}}" ng-class="{'disabled': !cipher.password}">
<i class="fa fa-lg fa-key"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.copyUsername}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.username)"
data-clipboard-text="{{cipher.username}}" ng-class="{'disabled': !cipher.username}">
<i class="fa fa-lg fa-user"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.launchWebsite}}" ng-click="launchWebsite(cipher)"
ng-class="{'disabled': !cipher.uri}">
<i class="fa fa-lg fa-share-square-o"></i>
</span>
<action-buttons cipher="cipher"></action-buttons>
<icon cipher="cipher"></icon>
<span class="text">
{{cipher.name}}

52
src/popup/app/vault/views/vaultViewCipher.html
View File

@ -21,43 +21,58 @@
</div>
<div ng-if="cipher.type === constants.cipherType.login">
<div class="list-section-item" ng-if="cipher.login.uri" title="{{cipher.login.uri}}">
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.launchWebsite}}" ng-click="launchWebsite(cipher)"
ng-show="cipher.showLaunch">
<i class="fa fa-lg fa-share-square-o"></i>
</a>
<a class="btn-list" href="" title="{{i18n.copyUri}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.uri, 'URI')"
data-clipboard-text="{{cipher.login.uri}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{i18n.website}}</span>
{{cipher.login.website}}
</div>
<div class="list-section-item" ng-if="cipher.login.username">
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.copyUsername}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.username)"
ngclipboard-success="clipboardSuccess(e, i18n.username, 'Username')"
data-clipboard-text="{{cipher.login.username}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{i18n.username}}</span>
<span id="username">{{cipher.login.username}}</span>
</div>
<div class="list-section-item" ng-if="cipher.login.password">
<a class="btn-list" href="" title="{{i18n.copyPassword}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.password)"
data-clipboard-text="{{cipher.login.password}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
<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>
<a class="btn-list" href="" title="{{i18n.copyPassword}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.password, 'Password')"
data-clipboard-text="{{cipher.login.password}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{i18n.password}}</span>
<span ng-show="!showPassword" class="monospaced">{{cipher.maskedPassword}}</span>
<span id="password" ng-show="showPassword" class="monospaced">{{cipher.login.password}}</span>
</div>
<div class="list-section-item totp" ng-class="{'low': totpLow}" ng-if="cipher.login.totp && totpCode">
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.copyVerificationCode}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.verificationCodeTotp)" data-clipboard-text="{{totpCode}}">
ngclipboard-success="clipboardSuccess(e, i18n.verificationCodeTotp, 'TOTP')"
data-clipboard-text="{{totpCode}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="totp-countdown">
<span class="totp-sec">{{totpSec}}</span>
<svg>
@ -70,26 +85,31 @@
</span>
<span class="item-label">{{i18n.verificationCodeTotp}}</span>
<span id="totp" class="totp-code">{{totpCodeFormatted}}</span>
</div>
</div>
<div ng-if="cipher.type === constants.cipherType.card">
<div class="list-section-item" ng-if="cipher.card.cardholderName">
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.copy}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.cardholderName)"
ngclipboard-success="clipboardSuccess(e, i18n.cardholderName, 'Cardholder Name')"
data-clipboard-text="{{cipher.card.cardholderName}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{i18n.cardholderName}}</span>
<span id="username">{{cipher.card.cardholderName}}</span>
</div>
<div class="list-section-item" ng-if="cipher.card.number">
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.copy}}"
ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.number)"
ngclipboard-success="clipboardSuccess(e, i18n.number, 'Number')"
data-clipboard-text="{{cipher.card.number}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{i18n.number}}</span>
<span id="username">{{cipher.card.number}}</span>
</div>
@ -127,15 +147,17 @@
</div>
<div class="list-section-items">
<div class="list-section-item" ng-repeat="field in cipher.fields">
<a class="btn-list" href="" title="{{i18n.copyValue}}" ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.value)" data-clipboard-text="{{field.value}}"
ng-if="field.type !== constants.fieldType.boolean && field.value">
<i class="fa fa-lg fa-clipboard"></i>
</a>
<div class="action-buttons">
<a class="btn-list" href="" title="{{i18n.toggleValue}}" ng-click="toggleFieldValue(field)"
ng-if="field.type === constants.fieldType.hidden">
<i class="fa fa-lg" ng-class="[{'fa-eye': !field.showValue}, {'fa-eye-slash': field.showValue}]"></i>
</a>
<a class="btn-list" href="" title="{{i18n.copyValue}}" ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, i18n.value, 'Field')" data-clipboard-text="{{field.value}}"
ng-if="field.type !== constants.fieldType.boolean && field.value">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="item-label">{{field.name}}</span>
<div ng-if="field.type === constants.fieldType.text">
{{field.value || '&nbsp;'}}

16
src/popup/app/vault/views/vaultViewFolder.html
View File

@ -22,20 +22,8 @@
<a href="#" stop-click ng-click="viewCipher(cipher)"
class="list-section-item condensed" title="{{i18n.edit}} {{cipher.name}}"
ng-repeat="cipher in pagedVaultCiphers track by $index">
<span class="btn-list" stop-prop stop-click title="{{i18n.copyPassword}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
data-clipboard-text="{{cipher.password}}" ng-class="{'disabled': !cipher.password}">
<i class="fa fa-lg fa-key"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.copyUsername}}" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.username)"
data-clipboard-text="{{cipher.username}}" ng-class="{'disabled': !cipher.username}">
<i class="fa fa-lg fa-user"></i>
</span>
<span class="btn-list" stop-prop stop-click title="{{i18n.launchWebsite}}" ng-click="launchWebsite(cipher)"
ng-class="{'disabled': !cipher.uri}">
<i class="fa fa-lg fa-share-square-o"></i>
</span>
<action-buttons cipher="cipher"></action-buttons>
<icon cipher="cipher"></icon>
<span class="text">
{{cipher.name}}
<i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>

17
src/popup/less/components.less
View File

@ -366,11 +366,15 @@
}
}
.btn-list {
cursor: pointer;
.action-buttons {
float: right;
display: block;
padding: 10px 8px 10px 8px;
.btn-list {
float: left;
cursor: pointer;
padding: 10px 8px;
background: none;
border: none;
color: @brand-primary;
@ -387,10 +391,11 @@
}
}
&:first-child {
&:last-child {
padding-right: 2px !important;
}
}
}
.fa-chevron-right, .right-icon {
float: right;
@ -412,9 +417,11 @@
&.condensed {
padding: 3px 10px;
.action-buttons {
.btn-list {
padding: 8px 5px;
}
}
&:not(:hover):focus {
padding-left: 5px;

3
src/services/loginService.js
View File

@ -284,7 +284,8 @@ function initLoginService() {
ciphersToReturn = [];
for (var i = 0; i < ciphers.length; i++) {
if (ciphers[i].domain && matchingDomains.indexOf(ciphers[i].domain) > -1) {
if (ciphers[i].type === self.constantsService.cipherType.login && ciphers[i].login.domain &&
matchingDomains.indexOf(ciphers[i].login.domain) > -1) {
ciphersToReturn.push(ciphers[i]);
}
}