view login info/styles

src/app/services/services.module.ts

@@ -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,

src/app/vault/view.component.html

@@ -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>

src/app/vault/view.component.ts

@@ -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();
+        }
+    }
+
 }