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">
+                    <div class="box-content-row" *ngIf="cipher.login.uri">
-                        <span class="row-label">{{'uri' | i18n}}</span>
+                        <div class="action-buttons">
-                        {{cipher.login.uri}}
+                            <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" *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>
-                    <div class="box-content-row">
                         <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">
+        </div>
-                Some footer information.
+        <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();
+        }
+    }
+
 }

src/locales/en/messages.json

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

src/scss/styles.scss

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

src/services/desktopPlatformUtils.service.ts

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