devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

view login info/styles

This commit is contained in:
Kyle Spearrin 2018-01-24 23:26:40 -05:00
parent 78dcb875cf
commit fcdbed93a3
6 changed files with 299 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/services/services.module.ts
View File

@ -107,6 +107,8 @@ function initFactory(i18n: I18nService): Function {
{ provide: FolderServiceAbstraction, useValue: folderService },
{ provide: CollectionServiceAbstraction, useValue: collectionService },
{ provide: EnvironmentServiceAbstraction, useValue: environmentService },
{ provide: TotpServiceAbstraction, useValue: totpService },
{ provide: TokenServiceAbstraction, useValue: tokenService },
{ provide: I18nService, useValue: i18nService },
{
provide: APP_INITIALIZER,

87
src/app/vault/view.component.html
View File

@ -1,31 +1,98 @@
<div class="content">
<div class="inner-content">
<div class="inner-content" *ngIf="cipher">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content" *ngIf="cipher">
<div class="box-content">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
{{cipher.name}}
</div>
<div *ngIf="cipher.login">
<div class="box-content-row">
<span class="row-label">{{'uri' | i18n}}</span>
{{cipher.login.uri}}
<div class="box-content-row" *ngIf="cipher.login.uri">
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}"
*ngIf="cipher.login.canLaunch" (click)="launch()">
<i class="fa fa-lg fa-share-square-o"></i>
</a>
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="row-label" *ngIf="!cipher.login.isWebsite">{{'uri' | i18n}}</span>
<span class="row-label" *ngIf="cipher.login.isWebsite">{{'website' | i18n}}</span>
{{cipher.login.domainOrUri}}
</div>
<div class="box-content-row">
<div class="box-content-row" *ngIf="cipher.login.username">
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.login.username}}
</div>
<div class="box-content-row">
<div class="box-content-row" *ngIf="cipher.login.password">
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()">
<i class="fa fa-lg"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="row-label">{{'password' | i18n}}</span>
{{cipher.login.password}}
<span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
<span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
</div>
<div class="box-content-row totp" [ngClass]="{'low': totpLow}"
*ngIf="cipher.login.totp && totpCode">
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}">
<i class="fa fa-lg fa-clipboard"></i>
</a>
</div>
<span class="totp-countdown">
<span class="totp-sec">{{totpSec}}</span>
<svg>
<g>
<circle class="totp-circle inner" r="12.6" cy="16" cx="16"
[ngStyle]="{'stroke-dashoffset.px': totpDash}"></circle>
<circle class="totp-circle outer" r="14" cy="16" cx="16"></circle>
</g>
</svg>
</span>
<span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
<span class="totp-code">{{totpCodeFormatted}}</span>
</div>
</div>
</div>
<div class="box-footer">
Some footer information.
</div>
<div class="box" *ngIf="cipher.notes">
<div class="box-header">
{{'notes' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row pre">{{cipher.notes}}</div>
</div>
</div>
<div class="box" *ngIf="cipher.hasFields">
<div class="box-header">
{{'customFields' | i18n}}
</div>
<div class="box-content">
todo
</div>
</div>
<div class="box" *ngIf="cipher.hasAttachments && isPremium">
<div class="box-header">
{{'attachments' | i18n}}
</div>
<div class="box-content">
todo
</div>
</div>
</div>

84
src/app/vault/view.component.ts
View File

@ -5,10 +5,15 @@ import {
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
} from '@angular/core';
import { CipherType } from 'jslib/enums/cipherType';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { TokenService } from 'jslib/abstractions/token.service';
import { TotpService } from 'jslib/abstractions/totp.service';
import { CipherView } from 'jslib/models/view/cipherView';
@ -16,20 +21,95 @@ import { CipherView } from 'jslib/models/view/cipherView';
selector: 'app-vault-view',
template: template,
})
export class ViewComponent implements OnChanges {
export class ViewComponent implements OnChanges, OnDestroy {
@Input() cipherId: string;
@Output() onEditCipher = new EventEmitter<string>();
cipher: CipherView;
showPassword: boolean;
isPremium: boolean;
totpCode: string;
totpCodeFormatted: string;
totpDash: number;
totpSec: number;
totpLow: boolean;
constructor(private cipherService: CipherService) {
private totpInterval: NodeJS.Timer;
constructor(private cipherService: CipherService, private totpService: TotpService,
private tokenService: TokenService) {
}
async ngOnChanges() {
this.showPassword = false;
const cipher = await this.cipherService.get(this.cipherId);
this.cipher = await cipher.decrypt();
this.isPremium = this.tokenService.getPremium();
if (this.cipher.type == CipherType.Login && this.cipher.login.totp &&
(cipher.organizationUseTotp || this.isPremium)) {
await this.totpUpdateCode();
await this.totpTick();
if (this.totpInterval) {
clearInterval(this.totpInterval);
}
this.totpInterval = setInterval(async () => {
await this.totpTick();
}, 1000);
}
}
ngOnDestroy() {
if (this.totpInterval) {
clearInterval(this.totpInterval);
}
}
edit() {
this.onEditCipher.emit(this.cipher.id);
}
togglePassword() {
this.showPassword = !this.showPassword;
}
launch() {
// TODO
}
copy(value: string) {
// TODO
}
private async totpUpdateCode() {
if (this.cipher.type !== CipherType.Login || this.cipher.login.totp == null) {
return;
}
this.totpCode = await this.totpService.getCode(this.cipher.login.totp);
if (this.totpCode != null) {
this.totpCodeFormatted = this.totpCode.substring(0, 3) + ' ' + this.totpCode.substring(3);
} else {
this.totpCodeFormatted = null;
if (this.totpInterval) {
clearInterval(this.totpInterval);
}
}
}
private async totpTick() {
const epoch = Math.round(new Date().getTime() / 1000.0);
const mod = epoch % 30;
this.totpSec = 30 - mod;
this.totpDash = +(Math.round(((2.62 * mod) + 'e+2') as any) + 'e-2');
this.totpLow = this.totpSec <= 7;
if (mod === 0) {
await this.totpUpdateCode();
}
}
}

21
src/locales/en/messages.json
View File

@ -70,5 +70,26 @@
},
"masterPassword": {
"message": "Master Password"
},
"verificationCodeTotp": {
"message": "Verification Code (TOTP)"
},
"website": {
"message": "Website"
},
"notes": {
"message": "Notes"
},
"customFields": {
"message": "Custom Fields"
},
"launch": {
"message": "Launch"
},
"copyValue": {
"message": "Copy Value"
},
"toggleVisibility": {
"message": "Toggle Visibility"
}
}

107
src/scss/styles.scss
View File

@ -2,6 +2,7 @@
@import "~font-awesome/scss/font-awesome.scss";
$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px;
$font-size-large: 18px;
$font-size-small: 12px;
@ -81,6 +82,10 @@ a {
text-decoration: none;
}
.monospaced {
font-family: $font-family-monospace;
}
#vault {
height: 100vh;
display: flex;
@ -359,11 +364,6 @@ a {
}
}
&.pre {
white-space: pre;
overflow-x: auto;
}
&.text-primary {
color: $brand-primary !important;
}
@ -568,7 +568,11 @@ a {
min-width: 400px;
max-width: 550px;
width: 100%;
margin: 0 auto;
margin: 30px auto 0 auto;
&:first-child {
margin-top: 10px;
}
.box-header {
margin: 0 10px 5px 10px;
@ -579,7 +583,7 @@ a {
.box-content {
background: $box-background-color;
border-radius: $border-radius;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
.box-content-row {
padding: 10px 15px;
@ -617,6 +621,11 @@ a {
background-color: $box-background-hover-color;
}
&.pre {
white-space: pre;
overflow-x: auto;
}
.row-label {
font-size: $font-size-small;
color: $text-muted;
@ -628,6 +637,35 @@ a {
input {
}
.action-buttons {
float: right;
.row-btn {
float: left;
cursor: pointer;
padding: 10px 8px;
background: none;
border: none;
color: $brand-primary;
&:hover, &:focus {
color: darken($brand-primary, 10%);
}
&.disabled {
color: $list-icon-color;
&:hover {
color: $list-icon-color;
}
}
&:last-child {
padding-right: 2px !important;
}
}
}
}
}
@ -637,3 +675,58 @@ a {
color: $text-muted;
}
}
.totp {
.totp-code {
font-family: $font-family-monospace;
font-size: 1.1em;
}
.totp-countdown {
margin: 3px 3px 0 0;
display: block;
user-select: none;
float: right;
.totp-sec {
font-size: 0.85em;
position: absolute;
line-height: 32px;
width: 32px;
text-align: center;
}
svg {
width: 32px;
height: 32px;
transform: rotate(-90deg);
}
.totp-circle {
stroke: $brand-primary;
fill: none;
&.inner {
stroke-width: 3;
stroke-dasharray: 78.6;
stroke-dashoffset: 0;
}
&.outer {
stroke-width: 2;
stroke-dasharray: 88;
stroke-dashoffset: 0;
}
}
}
&.low {
.totp-sec, .totp-code {
color: $brand-danger;
}
.totp-circle {
stroke: $brand-danger;
}
}
}

18
src/services/desktopPlatformUtils.service.ts
View File

@ -71,7 +71,23 @@ export class DesktopPlatformUtilsService implements PlatformUtilsService {
}
getDomain(uriString: string): string {
return uriString;
if (uriString == null) {
return null;
}
uriString = uriString.trim();
if (uriString === '') {
return null;
}
if (uriString.indexOf('://') > -1) {
try {
const url = new URL(uriString);
return url.hostname;
} catch (e) { }
}
return null;
}
isViewOpen(): boolean {