various vault functionality

This commit is contained in:
Kyle Spearrin 2018-06-07 17:12:11 -04:00
parent a18a591f0a
commit 059df9c45d
11 changed files with 501 additions and 178 deletions

2
jslib

@ -1 +1 @@
Subproject commit c59bca05bb37395dbbc05340f795f1ad6fd906c5
Subproject commit 8211e19db02a350606a970b828dbb16bc83788bb

View File

@ -224,6 +224,9 @@
"favorite": {
"message": "Favorite"
},
"unfavorite": {
"message": "Unfavorite"
},
"edit": {
"message": "Edit"
},
@ -321,5 +324,66 @@
},
"other": {
"message": "Other"
},
"share": {
"message": "Share"
},
"valueCopied": {
"message": "$VALUE$ copied",
"description": "Value has been copied to the clipboard.",
"placeholders": {
"value": {
"content": "$1",
"example": "Password"
}
}
},
"copyValue": {
"message": "Copy Value",
"description": "Copy value to clipboard"
},
"copyPassword": {
"message": "Copy Password",
"description": "Copy password to clipboard"
},
"copyUsername": {
"message": "Copy Username",
"description": "Copy username to clipboard"
},
"copyNumber": {
"message": "Copy Number",
"description": "Copy credit card number"
},
"copySecurityCode": {
"message": "Copy Security Code",
"description": "Copy credit card security code (CVV)"
},
"copyUri": {
"message": "Copy URI",
"description": "Copy URI to clipboard"
},
"myVault": {
"message": "My Vault"
},
"shareSelected": {
"message": "Share Selected"
},
"deleteSelected": {
"message": "Delete Selected"
},
"moveSelected": {
"message": "Move Selected"
},
"selectAll": {
"message": "Select All"
},
"unselectAll": {
"message": "Unselect All"
},
"value": {
"message": "Value"
},
"launch": {
"message": "Launch"
}
}

View File

@ -1,7 +1,12 @@
<div class="modal fade">
<div class="modal-dialog modal-lg">
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-header">{{title}}</div>
<div class="modal-header">
<h2 class="modal-title">{{title}}</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" *ngIf="cipher">
<div class="row" *ngIf="!editMode">
<div class="col-6 form-group">
@ -24,28 +29,45 @@
</div>
</div>
<!-- Login -->
<div *ngIf="cipher.type === cipherType.Login">
<ng-container *ngIf="cipher.type === cipherType.Login">
<div class="row">
<div class="col-6 form-group">
<label for="loginUsername">{{'username' | i18n}}</label>
<input id="loginUsername" class="form-control" type="text" name="Login.Username" [(ngModel)]="cipher.login.username">
<div class="input-group">
<input id="loginUsername" class="form-control" type="text" name="Login.Username" [(ngModel)]="cipher.login.username">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyUsername' | i18n}}" (click)="copy(cipher.login.username, 'username', 'Username')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
</div>
<div class="col-6 form-group">
<label for="loginPassword">{{'password' | i18n}}</label>
<div class="d-flex">
<label for="loginPassword">{{'password' | i18n}}</label>
<div class="ml-auto d-flex">
<a href="#" class="d-block mr-2" appStopClick appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
<i class="fa fa-lg fa-fw fa-refresh"></i>
</a>
<a href="#" class="d-block" #checkPasswordBtn appStopClick appBlurClick title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise">
<i class="fa fa-lg fa-fw fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-fw fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
</a>
</div>
</div>
<div class="input-group">
<input id="loginPassword" class="form-control text-monospace" type="{{showPassword ? 'text' : 'password'}}" name="Login.Password"
[(ngModel)]="cipher.login.password">
<div class="input-group-append">
<button type="button" #checkPasswordBtn class="btn btn-outline-secondary" appBlurClick title="{{'checkPassword' | i18n}}"
(click)="checkPassword()" [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"></i>
</button>
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
tabindex="-1">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</button>
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
<i class="fa fa-lg fa-refresh"></i>
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyPassword' | i18n}}" (click)="copy(cipher.login.password, 'password', 'Password')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
@ -59,11 +81,22 @@
</div>
<ng-container *ngIf="cipher.login.hasUris">
<div class="row" appBoxRow *ngFor="let u of cipher.login.uris; let i = index">
<div class="col-7">
<div class="col-7 form-group">
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
<input class="form-control" id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri" placeholder="{{'ex' | i18n}} https://google.com">
<div class="input-group">
<input class="form-control" id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri" placeholder="{{'ex' | i18n}} https://google.com">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'launch' | i18n}}" (click)="launch(u)" tabindex="-1">
<i class="fa fa-lg fa-share"></i>
</button>
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyUri' | i18n}}" (click)="copy(u.uri, 'uri', 'URI')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
</div>
<div class="col-4">
<div class="col-4 form-group">
<label for="loginUriMatch{{i}}">
{{'matchDetection' | i18n}}
</label>
@ -72,18 +105,19 @@
</select>
</div>
<div class="col-1">
<button class="btn btn-secondary" (click)="removeUri(u)" title="{{'remove' | i18n}}">
<label class="invisible">&nbsp;</label>
<button class="btn btn-link text-danger" (click)="removeUri(u)" title="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg"></i>
</button>
</div>
</div>
</ng-container>
<button type="button" appBlurClick (click)="addUri()" class="btn btn-link">
<i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newUri' | i18n}}
</button>
</div>
<a href="#" appStopClick appBlurClick (click)="addUri()" class="d-inline-block mb-3">
<i class="fa fa-plus-circle fa-fw"></i> {{'newUri' | i18n}}
</a>
</ng-container>
<!-- Card -->
<div *ngIf="cipher.type === cipherType.Card">
<ng-container *ngIf="cipher.type === cipherType.Card">
<div class="row">
<div class="col-6 form-group">
<label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
@ -99,7 +133,15 @@
<div class="row">
<div class="col-6 form-group">
<label for="cardNumber">{{'number' | i18n}}</label>
<input id="cardNumber" class="form-control" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
<div class="input-group">
<input id="cardNumber" class="form-control" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyNumber' | i18n}}" (click)="copy(cipher.card.number, 'number', 'Number')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
</div>
<div class="col form-group">
<label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
@ -115,13 +157,20 @@
<div class="row">
<div class="col-6 form-group">
<label for="cardCode">{{'securityCode' | i18n}}</label>
<input id="cardCode" class="form-control" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
<div class="input-group">
<input id="cardCode" class="form-control" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'securityCode' | i18n}}" (click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<!-- Identity -->
<div *ngIf="cipher.type === cipherType.Identity">
<ng-container *ngIf="cipher.type === cipherType.Identity">
<div class="row">
<div class="col-4 form-group">
<label for="idTitle">{{'title' | i18n}}</label>
@ -214,66 +263,79 @@
<input id="idCountry" class="form-control" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
</div>
</div>
</div>
</ng-container>
<div class="form-group">
<label for="notes">{{'notes' | i18n}}</label>
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="favorite">{{'favorite' | i18n}}</label>
<input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
</div>
<h4>{{'customFields' | i18n}}</h4>
<h3 class="mt-4">{{'customFields' | i18n}}</h3>
<ng-container *ngIf="cipher.hasFields">
<div class="row" appBoxRow *ngFor="let f of cipher.fields; let i = index">
<div class="col-4">
<div class="col-4 form-group">
<label for="fieldName{{i}}">{{'name' | i18n}}</label>
<input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name" class="form-control">
</div>
<div class="col-4">
<div class="col-6 form-group">
<label for="fieldValue{{i}}">{{'value' | i18n}}</label>
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Text">
<div class="input-group" *ngIf="f.type === fieldType.Text">
<input id="fieldValue{{i}}" class="form-control" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
<div class="input-group" *ngIf="f.type === fieldType.Hidden">
<input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}" name="Field.Value{{i}}" [(ngModel)]="f.value" class="form-control text-monospace">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
tabindex="-1">
<i class="fa fa-lg" [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
</button>
<button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
tabindex="-1">
<i class="fa fa-lg fa-clipboard"></i>
</button>
</div>
</div>
<input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean"
appTrueFalseValue trueValue="true" falseValue="false">
</div>
<div class="col-1">
<button type="button" class="btn btn-secondary" (click)="removeField(f)" title="{{'remove' | i18n}}">
<label class="invisible">&nbsp;</label>
<button class="btn btn-link text-danger" (click)="removeField(f)" title="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg"></i>
</button>
</div>
</div>
</ng-container>
<button type="button" class="btn btn-link" appBlurClick (click)="addField()">
<i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
</button>
<div>
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
<select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
<a href="#" appStopClick appBlurClick (click)="addField()" class="d-inline-block mb-2">
<i class="fa fa-plus-circle fa-fw"></i> {{'newCustomField' | i18n}}
</a>
<div class="row">
<div class="col-4">
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
<select id="addFieldType" class="form-control" name="AddFieldType" [(ngModel)]="addFieldType">
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
</button>
<button appBlurClick type="button" data-dismiss="modal" title="{{'cancel' | i18n}}">
<button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">
{{'cancel' | i18n}}
</button>
<div class="right">
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}" *ngIf="editMode"
[disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
<div class="ml-auto" *ngIf="cipher">
<button appBlurClick type="button" (click)="toggleFavorite()" class="btn btn-link" title="{{(cipher.favorite ? 'unfavorite' : 'favorite') | i18n}}">
<i class="fa fa-lg" [ngClass]="{'fa-star': cipher.favorite, 'fa-star-o': !cipher.favorite}"></i>
</button>
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}"
*ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
</button>

View File

@ -14,6 +14,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { StateService } from 'jslib/abstractions/state.service';
import { AddEditComponent as BaseAddEditComponent } from 'jslib/angular/components/add-edit.component';
import { LoginUriView } from 'jslib/models/view/loginUriView';
@Component({
selector: 'app-vault-add-edit',
@ -31,4 +32,28 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit {
async ngOnInit() {
await super.load();
}
toggleFavorite() {
this.cipher.favorite = !this.cipher.favorite;
}
launch(uri: LoginUriView) {
if (!uri.canLaunch) {
return;
}
this.analytics.eventTrack.next({ action: 'Launched Login URI' });
this.platformUtilsService.launchUri(uri.uri);
}
copy(value: string, typeI18nKey: string, aType: string) {
if (value == null) {
return;
}
this.analytics.eventTrack.next({ action: 'Copied ' + aType });
this.platformUtilsService.copyToClipboard(value, { doc: window.document });
this.toasterService.popAsync('info', null,
this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
}
}

View File

@ -1,18 +1,19 @@
<ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
<table class="table table-hover table-sm" *ngIf="searchedCiphers.length > 0">
<table class="table table-hover" *ngIf="searchedCiphers.length > 0">
<tbody>
<tr *ngFor="let c of searchedCiphers">
<td>
<input type="checkbox">
<td (click)="checkCipher(c)">
<input type="checkbox" [(ngModel)]="c.checked">
</td>
<td>
<td (click)="checkCipher(c)">
<app-vault-icon [cipher]="c"></app-vault-icon>
</td>
<td>
<a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
<small>{{c.subTitle}}</small>
<td (click)="checkCipher(c)">
<a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
<i class="fa fa-share-alt text-muted" appStopProp *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
<br>
<small appStopProp>{{c.subTitle}}</small>
</td>
<td>
<div class="dropdown" appListDropdown>
@ -21,9 +22,26 @@
<i class="fa fa-cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#" appStopClick *ngIf="c.type === cipherType.Login">
<i class="fa fa-fw fa-clipboard"></i>
{{'copyPassword' | i18n}}
</a>
<a class="dropdown-item" href="#" appStopClick>
<i class="fa fa-fw fa-paperclip"></i>
{{'attachments' | i18n}}
</a>
<a class="dropdown-item" href="#" appStopClick *ngIf="!c.organizationId">
<i class="fa fa-fw fa-share-alt"></i>
{{'share' | i18n}}
</a>
<a class="dropdown-item" href="#" appStopClick *ngIf="c.organizationId">
<i class="fa fa-fw fa-cubes"></i>
{{'collections' | i18n}}
</a>
<a class="dropdown-item text-danger" href="#" appStopClick>
<i class="fa fa-fw fa-trash-o"></i>
{{'delete' | i18n}}
</a>
</div>
</div>
</td>

View File

@ -4,12 +4,22 @@ import { CipherService } from 'jslib/abstractions/cipher.service';
import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component';
import { CipherType } from 'jslib/enums/cipherType';
import { CipherView } from 'jslib/models/view/cipherView';
@Component({
selector: 'app-vault-ciphers',
templateUrl: 'ciphers.component.html',
})
export class CiphersComponent extends BaseCiphersComponent {
cipherType = CipherType;
constructor(cipherService: CipherService) {
super(cipherService);
}
checkCipher(c: CipherView) {
(c as any).checked = !(c as any).checked;
}
}

View File

@ -2,21 +2,24 @@
<div class="modal-dialog modal-sm">
<form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<div class="modal-header">
{{title}}
<h2 class="modal-title">{{title}}</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<label for="name">{{'name' | i18n}}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="folder.name">
</div>
<div class="modal-footer">
<button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<button appBlurClick type="submit" class="btn btn-primary" title="{{'save' | i18n}}" [disabled]="form.loading">
<i class="fa fa-save fa-lg fa-fw" [hidden]="form.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!form.loading"></i>
</button>
<button type="button" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
<div class="right">
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="danger" title="{{'delete' | i18n}}" *ngIf="editMode"
[disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
<div class="ml-auto">
<button #deleteBtn appBlurClick type="button" (click)="delete()" class="btn btn-outline-danger" title="{{'delete' | i18n}}"
*ngIf="editMode" [disabled]="deleteBtn.loading" [appApiAction]="deletePromise">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
<i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
</button>

View File

@ -1,4 +1,4 @@
<div class="card">
<div class="card vault-filters">
<div class="card-header">
Filters
</div>
@ -40,31 +40,31 @@
</a>
</li>
</ul>
<p *ngIf="!loaded" class="text-muted"><i class="fa fa-spinner fa-spin"></i></p>
<p *ngIf="!loaded" class="text-muted">
<i class="fa fa-spinner fa-spin"></i>
</p>
<ng-container *ngIf="loaded">
<h3>
<h3 class="d-flex">
{{'folders' | i18n}}
<button appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
<a href="#" class="text-muted ml-auto" appStopClick appBlurClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
<i class="fa fa-plus fa-fw"></i>
</button>
</a>
</h3>
<ul class="fa-ul">
<li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
<ul class="fa-ul carets">
<li *ngFor="let f of folders" class="d-flex" [ngClass]="{active: selectedFolder && f.id === selectedFolderId}">
<a href="#" appStopClick appBlurClick (click)="selectFolder(f)">
<i class="fa-li fa fa-caret-right"></i> {{f.name}}
<span appStopProp appStopClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}" *ngIf="f.id">
<i class="fa fa-pencil fa-fw"></i>
</span>
<i class="fa-li fa fa-caret-right"></i> {{f.name}}</a>
<a href="#" class="text-muted ml-auto show-active" appStopClick appBlurClick (click)="editFolder(f)" title="{{'editFolder' | i18n}}" *ngIf="f.id">
<i class="fa fa-pencil fa-fw"></i>
</a>
</li>
</ul>
<div *ngIf="collections && collections.length">
<h3>{{'collections' | i18n}}</h3>
<ul class="fa-ul">
<ul class="fa-ul carets">
<li *ngFor="let c of collections" [ngClass]="{active: c.id === selectedCollectionId}">
<a href="#" appStopClick appBlurClick (click)="selectCollection(c)">
<i class="fa-li fa fa-caret-right"></i> {{c.name}}
</a>
<i class="fa-li fa fa-caret-right"></i> {{c.name}}</a>
</li>
</ul>
</div>

View File

@ -36,10 +36,43 @@
</app-vault-groupings>
</div>
<div class="col-6">
<button type="button" class="btn btn-secondary btn-sm pull-right" (click)="addCipher()">
<i class="fa fa-plus"></i>
</button>
<h1>My Vault</h1>
<div class="page-header d-flex">
<h1>{{'myVault' | i18n}}</h1>
<div class="ml-auto d-flex">
<div class="dropdown mr-2" appListDropdown>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cog"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">
<i class="fa fa-fw fa-share"></i>
{{'moveSelected' | i18n}}
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-fw fa-share-alt"></i>
{{'shareSelected' | i18n}}
</a>
<a class="dropdown-item text-danger" href="#">
<i class="fa fa-fw fa-trash-o"></i>
{{'deleteSelected' | i18n}}
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="fa fa-fw fa-check-square-o"></i>
{{'selectAll' | i18n}}
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-fw fa-minus-square-o"></i>
{{'unselectAll' | i18n}}
</a>
</div>
</div>
<button type="button" class="btn btn-primary btn-sm" (click)="addCipher()">
<i class="fa fa-plus fa-fw"></i>{{'addItem' | i18n}}
</button>
</div>
</div>
<app-vault-ciphers (onCipherClicked)="editCipher($event)">
</app-vault-ciphers>
</div>
@ -49,6 +82,14 @@
Some callout
</div>
</div>
<div class="card mt-3">
<div class="card-header">
Organizations
</div>
<div class="card-body">
Your organizations.
</div>
</div>
</div>
</div>
</div>

View File

@ -1,10 +1,13 @@
$theme-colors: (
"primary": #3c8dbc,
"primary-accent": #286090,
"danger": #dd4b39,
"success": #00a65a,
"info": #555555,
"warning": #bf7e16
$primary: #3c8dbc;
$primary-accent: #286090;
$secondary: #ced4da;
$success: #00a65a;
$info: #555555;
$warning: #bf7e16;
$danger: #dd4b39;
$theme-colors: (
"primary-accent": $primary-accent
);
$body-bg: #ffffff;
@ -13,7 +16,7 @@ $body-color: #333333;
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
$h1-font-size: 2rem;
$h1-font-size: 1.7rem;
$h2-font-size: 1.3rem;
$h3-font-size: 1rem;
$h4-font-size: 1rem;
@ -29,8 +32,11 @@ $list-group-active-color: $body-color;
$list-group-active-bg: #ffffff;
$list-group-active-border-color: rgba(#000000, .125);
$dropdown-link-hover-color: #ffffff;
$dropdown-link-hover-bg: #3c8dbc;
$dropdown-link-color: $body-color;
$dropdown-link-hover-bg: rgba(#000000, .06);
$dropdown-link-active-color: $dropdown-link-color;
$dropdown-link-active-bg: rgba(#000000, .1);
$dropdown-item-padding-x: 1rem;
$navbar-brand-font-size: 35px;
$navbar-brand-height: 35px;
@ -38,6 +44,12 @@ $navbar-brand-padding-y: 0;
$navbar-dark-color: rgba(#ffffff, .7);
$navbar-dark-hover-color: rgba(#ffffff, .9);
$input-bg: #fafafa;
$input-focus-bg: #ffffff;
$input-disabled-bg: #e0e0e0;
$table-hover-bg: rgba(#000000, .03);
@import "../../node_modules/bootstrap/scss/bootstrap";
html {
@ -48,6 +60,16 @@ body {
min-width: 1010px;
}
.page-header {
border-bottom: 1px solid $border-color;
padding-bottom: 0.6rem;
margin-bottom: 0.5rem;
h1, h2, h3, h4 {
margin: 0;
}
}
.navbar {
padding-left: 0;
padding-right: 0;
@ -81,10 +103,51 @@ body {
padding-left: calc(#{$list-group-item-padding-x} - 3px);
}
.card-header, .modal-header {
font-weight: bold;
text-transform: uppercase;
small {
font-weight: normal;
text-transform: none;
}
}
.modal-body {
h3 {
font-weight: normal;
text-transform: uppercase;
color: $text-muted;
}
}
.modal-footer {
justify-content: initial;
background-color: $input-bg;
}
form label {
font-weight: bold;
}
.btn[class*="btn-outline-"]:not(:hover) {
background-color: #ffffff;
}
.btn-outline-secondary {
color: $text-muted;
&:hover {
color: $body-color;
}
}
app-vault-icon .fa {
color: $text-muted;
}
app-vault {
.table {
line-height: 1;
tr:first-child {
td {
border: none;
@ -101,17 +164,16 @@ app-vault {
vertical-align: middle;
small {
display: block;
color: $text-muted;
}
}
td:first-child {
width: 25px;
width: 35px;
}
td:nth-child(2) {
width: 25px;
width: 45px;
text-align: center;
img {
@ -120,9 +182,17 @@ app-vault {
}
}
td:nth-child(3) {
line-height: 1;
}
td:last-child {
width: 65px;
width: 72px;
text-align: right;
.btn {
line-height: 1;
}
.dropdown:not(.show) button {
visibility: hidden;
@ -130,3 +200,64 @@ app-vault {
}
}
}
app-vault-groupings {
.card {
#search {
margin-bottom: 1rem;
}
h3 {
font-weight: normal;
text-transform: uppercase;
color: $text-muted;
}
ul:last-child {
margin-bottom: 0;
}
a {
color: $body-color;
&:hover {
&.text-muted {
color: $body-color !important;
}
}
}
ul.fa-ul {
margin-left: 1.9em;
.fa-li {
top: 4px;
}
&.carets {
margin-left: 1.1em;
.fa-li {
left: -24px;
}
}
}
.show-active {
display: none;
}
li.active {
.show-active {
display: inline;
}
}
li.active {
a:first-child {
font-weight: bold;
color: theme-color("primary");
}
}
}
}

View File

@ -4,72 +4,49 @@ import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { AnalyticsIds } from 'jslib/misc/analytics';
const DialogPromiseExpiration = 600000; // 10 minutes
import { Utils } from 'jslib/misc/utils';
export class WebPlatformUtilsService implements PlatformUtilsService {
identityClientId: string = 'web';
private showDialogResolves = new Map<number, { resolve: (value: boolean) => void, date: Date }>();
private deviceCache: DeviceType = null;
private analyticsIdCache: string = null;
private browserCache: string = null;
constructor(private messagingService: MessagingService) { }
getDevice(): DeviceType {
if (this.deviceCache) {
return this.deviceCache;
}
if (navigator.userAgent.indexOf(' Firefox/') !== -1 || navigator.userAgent.indexOf(' Gecko/') !== -1) {
this.deviceCache = DeviceType.Firefox;
} else if (navigator.userAgent.indexOf(' OPR/') >= 0) {
this.deviceCache = DeviceType.Opera;
} else if (navigator.userAgent.indexOf(' Edge/') !== -1) {
this.deviceCache = DeviceType.Edge;
} else if (navigator.userAgent.indexOf(' Vivaldi/') !== -1) {
this.deviceCache = DeviceType.Vivaldi;
} else if (navigator.userAgent.indexOf(' Safari/') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
this.deviceCache = DeviceType.Safari;
} else if ((window as any).chrome && navigator.userAgent.indexOf(' Chrome/') !== -1) {
this.deviceCache = DeviceType.Chrome;
} else if (navigator.userAgent.indexOf(' Trident/') !== -1) {
this.deviceCache = DeviceType.IE;
}
return this.deviceCache;
return DeviceType.Web;
}
getDeviceString(): string {
return DeviceType[this.getDevice()].toLowerCase();
return 'Web';
}
isFirefox(): boolean {
return this.getDevice() === DeviceType.Firefox;
return this.getBrowserType() === 'firefox';
}
isChrome(): boolean {
return this.getDevice() === DeviceType.Chrome;
return this.getBrowserType() === 'chrome';
}
isEdge(): boolean {
return this.getDevice() === DeviceType.Edge;
}
isIE(): boolean {
return this.getDevice() === DeviceType.IE;
return this.getBrowserType() === 'edge';
}
isOpera(): boolean {
return this.getDevice() === DeviceType.Opera;
return this.getBrowserType() === 'opera';
}
isVivaldi(): boolean {
return this.getDevice() === DeviceType.Vivaldi;
return this.getBrowserType() === 'vivaldi';
}
isSafari(): boolean {
return this.getDevice() === DeviceType.Safari;
return this.getBrowserType() === 'safari';
}
isIE(): boolean {
return this.getBrowserType() === 'ie';
}
isMacAppStore(): boolean {
@ -77,16 +54,11 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
}
analyticsId(): string {
if (this.analyticsIdCache) {
return this.analyticsIdCache;
}
this.analyticsIdCache = (AnalyticsIds as any)[this.getDevice()];
return this.analyticsIdCache;
return 'UA-81915606-3';
}
getDomain(uriString: string): string {
return uriString;
return Utils.getHostname(uriString);
}
isViewOpen(): boolean {
@ -94,7 +66,11 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
}
launchUri(uri: string, options?: any): void {
//
const a = document.createElement('a');
a.href = uri;
a.target = '_blank';
a.rel = 'noreferrer noopener';
a.click();
}
saveFile(win: Window, blobData: any, blobOptions: any, fileName: string): void {
@ -122,18 +98,7 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
}
showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) {
const dialogId = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
this.messagingService.send('showDialog', {
text: text,
title: title,
confirmText: confirmText,
cancelText: cancelText,
type: type,
dialogId: dialogId,
});
return new Promise<boolean>((resolve) => {
this.showDialogResolves.set(dialogId, { resolve: resolve, date: new Date() });
});
return Promise.resolve(false);
}
isDev(): boolean {
@ -165,23 +130,27 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
}
}
resolveDialogPromise(dialogId: number, confirmed: boolean) {
if (this.showDialogResolves.has(dialogId)) {
const resolveObj = this.showDialogResolves.get(dialogId);
resolveObj.resolve(confirmed);
this.showDialogResolves.delete(dialogId);
private getBrowserType(): string {
if (this.browserCache != null) {
return this.browserCache;
}
// Clean up old promises
const deleteIds: number[] = [];
this.showDialogResolves.forEach((val, key) => {
const age = new Date().getTime() - val.date.getTime();
if (age > DialogPromiseExpiration) {
deleteIds.push(key);
}
});
deleteIds.forEach((id) => {
this.showDialogResolves.delete(id);
});
if (navigator.userAgent.indexOf(' Firefox/') !== -1 || navigator.userAgent.indexOf(' Gecko/') !== -1) {
this.browserCache = 'firefox';
} else if (navigator.userAgent.indexOf(' OPR/') >= 0) {
this.browserCache = 'opera';
} else if (navigator.userAgent.indexOf(' Edge/') !== -1) {
this.browserCache = 'edge';
} else if (navigator.userAgent.indexOf(' Vivaldi/') !== -1) {
this.browserCache = 'vivaldi';
} else if (navigator.userAgent.indexOf(' Safari/') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
this.browserCache = 'safari';
} else if ((window as any).chrome && navigator.userAgent.indexOf(' Chrome/') !== -1) {
this.browserCache = 'chrome';
} else if (navigator.userAgent.indexOf(' Trident/') !== -1) {
this.browserCache = 'ie';
}
return this.browserCache;
}
}