From 28d35db38b4630331a7c9075441c96d21c8ad08e Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 29 Jan 2018 17:11:31 -0500
Subject: [PATCH] more flex. toggle password on add/edit

---
 src/app/vault/add-edit.component.html | 31 +++++----
 src/app/vault/add-edit.component.ts   |  6 ++
 src/app/vault/view.component.html     | 90 ++++++++++++++++-----------
 src/scss/box.scss                     | 45 +++++++-------
 src/scss/misc.scss                    |  1 -
 5 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 648a2b919c..404d0a2e10 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -26,15 +26,24 @@
                         <input id="loginUsername" type="text" name="Login.Username"
                                [(ngModel)]="cipher.login.username">
                     </div>
-                    <div class="box-content-row">
-                        <label for="loginPassword">{{'password' | i18n}}</label>
-                        <input id="loginPassword" type="text" name="Login.Password"
-                               [(ngModel)]="cipher.login.password">
+                    <div class="box-content-row box-content-row-flex">
+                        <div class="row-main">
+                            <label for="loginPassword">{{'password' | i18n}}</label>
+                            <input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}"
+                                   name="Login.Password" [(ngModel)]="cipher.login.password">
+                        </div>
+                        <div class="action-buttons">
+                            <a class="row-btn" href="#" appStopClick appBlurClick 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 appBlurClick title="{{'generatePassword' | i18n}}"
+                               (click)="generatePassword()">
+                                <i class="fa fa-lg fa-refresh"></i>
+                            </a>
+                        </div>
                     </div>
-                    <a class="box-content-row" href="#" appStopClick (click)="generatePassword()">
-                        {{'generatePassword' | i18n}}
-                        <i class="fa fa-chevron-right icon-right"></i>
-                    </a>
                 </div>
                 <!-- Card -->
                 <div *ngIf="cipher.type === cipherType.Card">
@@ -203,7 +212,7 @@
                         <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
                             <i class="fa fa-close fa-lg"></i>
                         </a>
-                        <div>
+                        <div class="row-main">
                             <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
                             <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
                                    class="row-label" placeholder="{{'name' | i18n}}">
@@ -212,9 +221,9 @@
                                    *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
                             <input id="fieldValue{{i}}" type="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
                                    *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
-                            <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
-                                   [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
                         </div>
+                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
+                               [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
                     </div>
                 </div>
                 <div class="box-content-row">
diff --git a/src/app/vault/add-edit.component.ts b/src/app/vault/add-edit.component.ts
index add71960b2..e8feab704d 100644
--- a/src/app/vault/add-edit.component.ts
+++ b/src/app/vault/add-edit.component.ts
@@ -44,6 +44,7 @@ export class AddEditComponent implements OnChanges {
     editMode: boolean = false;
     cipher: CipherView;
     folders: FolderView[];
+    showPassword: boolean = false;
     cipherType = CipherType;
     fieldType = FieldType;
     addFieldType: FieldType = FieldType.Text;
@@ -182,4 +183,9 @@ export class AddEditComponent implements OnChanges {
 
         this.onGeneratePassword.emit();
     }
+
+    togglePassword() {
+        this.analytics.eventTrack.next({ action: 'Toggled Password on Edit' });
+        this.showPassword = !this.showPassword;
+    }
 }
diff --git a/src/app/vault/view.component.html b/src/app/vault/view.component.html
index a3c1e324ea..c1365a4f64 100644
--- a/src/app/vault/view.component.html
+++ b/src/app/vault/view.component.html
@@ -11,7 +11,12 @@
                 </div>
                 <!-- Login -->
                 <div *ngIf="cipher.login">
-                    <div class="box-content-row" *ngIf="cipher.login.uri">
+                    <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.uri">
+                        <div class="row-main">
+                            <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="action-buttons">
                             <a class="row-btn" href="#" appStopClick title="{{'launch' | i18n}}"
                                *ngIf="cipher.login.canLaunch" (click)="launch()">
@@ -22,21 +27,25 @@
                                 <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="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
+                        <div class="row-main">
+                            <span class="row-label">{{'username' | i18n}}</span>
+                            {{cipher.login.username}}
+                        </div>
                         <div class="action-buttons">
                             <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
                                (click)="copy(cipher.login.username, 'Username')">
                                 <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" *ngIf="cipher.login.password">
+                    <div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
+                        <div class="row-main">
+                            <span class="row-label">{{'password' | i18n}}</span>
+                            <span [hidden]="showPassword" class="monospaced">{{cipher.login.maskedPassword}}</span>
+                            <span [hidden]="!showPassword" class="monospaced">{{cipher.login.password}}</span>
+                        </div>
                         <div class="action-buttons">
                             <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
                                (click)="togglePassword()">
@@ -48,17 +57,12 @@
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
                         </div>
-                        <span class="row-label">{{'password' | i18n}}</span>
-                        <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}"
+                    <div class="box-content-row box-content-row-flex totp" [ngClass]="{'low': totpLow}"
                          *ngIf="cipher.login.totp && totpCode">
-                        <div class="action-buttons">
-                            <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
-                               (click)="copy(totpCode, 'TOTP')">
-                                <i class="fa fa-lg fa-clipboard"></i>
-                            </a>
+                        <div class="row-main">
+                            <span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
+                            <span class="totp-code">{{totpCodeFormatted}}</span>
                         </div>
                         <span class="totp-countdown">
                             <span class="totp-sec">{{totpSec}}</span>
@@ -70,8 +74,12 @@
                                 </g>
                             </svg>
                         </span>
-                        <span class="row-label">{{'verificationCodeTotp' | i18n}}</span>
-                        <span class="totp-code">{{totpCodeFormatted}}</span>
+                        <div class="action-buttons">
+                            <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
+                               (click)="copy(totpCode, 'TOTP')">
+                                <i class="fa fa-lg fa-clipboard"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
                 <!-- Card -->
@@ -80,15 +88,17 @@
                         <span class="row-label">{{'cardholderName' | i18n}}</span>
                         {{cipher.card.cardholderName}}
                     </div>
-                    <div class="box-content-row" *ngIf="cipher.card.number">
+                    <div class="box-content-row box-content-row-flex" *ngIf="cipher.card.number">
+                        <div class="row-main">
+                            <span class="row-label">{{'number' | i18n}}</span>
+                            {{cipher.card.number}}
+                        </div>
                         <div class="action-buttons">
                             <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
                                (click)="copy(cipher.card.number, 'Number')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
                         </div>
-                        <span class="row-label">{{'number' | i18n}}</span>
-                        {{cipher.card.number}}
                     </div>
                     <div class="box-content-row" *ngIf="cipher.card.brand">
                         <span class="row-label">{{'brand' | i18n}}</span>
@@ -98,15 +108,17 @@
                         <span class="row-label">{{'expiration' | i18n}}</span>
                         {{cipher.card.expiration}}
                     </div>
-                    <div class="box-content-row" *ngIf="cipher.card.code">
+                    <div class="box-content-row box-content-row-flex" *ngIf="cipher.card.code">
+                        <div class="row-main">
+                            <span class="row-label">{{'securityCode' | i18n}}</span>
+                            {{cipher.card.code}}
+                        </div>
                         <div class="action-buttons">
                             <a class="row-btn" href="#" appStopClick title="{{'copyValue' | i18n}}"
                                (click)="copy(cipher.card.code, 'Security Code')">
                                 <i class="fa fa-lg fa-clipboard"></i>
                             </a>
                         </div>
-                        <span class="row-label">{{'securityCode' | i18n}}</span>
-                        {{cipher.card.code}}
                     </div>
                 </div>
                 <!-- Identity -->
@@ -172,7 +184,21 @@
                 {{'customFields' | i18n}}
             </div>
             <div class="box-content">
-                <div class="box-content-row" *ngFor="let field of cipher.fields">
+                <div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
+                    <div class="row-main">
+                        <span class="row-label">{{field.name}}</span>
+                        <div *ngIf="field.type === fieldType.Text">
+                            {{field.value || '&nbsp;'}}
+                        </div>
+                        <div *ngIf="field.type === fieldType.Hidden">
+                            <span [hidden]="!field.showValue" class="monospaced">{{field.value}}</span>
+                            <span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
+                        </div>
+                        <div *ngIf="field.type === fieldType.Boolean">
+                            <i class="fa fa-check-square-o" *ngIf="field.value === 'true'"></i>
+                            <i class="fa fa-square-o" *ngIf="field.value !== 'true'"></i>
+                        </div>
+                    </div>
                     <div class="action-buttons">
                         <a class="row-btn" href="#" appStopClick title="{{'toggleVisibility' | i18n}}"
                            *ngIf="field.type === fieldType.Hidden" (click)="toggleFieldValue(field)">
@@ -185,18 +211,6 @@
                             <i class="fa fa-lg fa-clipboard"></i>
                         </a>
                     </div>
-                    <span class="row-label">{{field.name}}</span>
-                    <div *ngIf="field.type === fieldType.Text">
-                        {{field.value || '&nbsp;'}}
-                    </div>
-                    <div *ngIf="field.type === fieldType.Hidden">
-                        <span [hidden]="!field.showValue" class="monospaced">{{field.value}}</span>
-                        <span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
-                    </div>
-                    <div *ngIf="field.type === fieldType.Boolean">
-                        <i class="fa fa-check-square-o" *ngIf="field.value === 'true'"></i>
-                        <i class="fa fa-square-o" *ngIf="field.value !== 'true'"></i>
-                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/scss/box.scss b/src/scss/box.scss
index 92bfbbe1f6..68a55d91fb 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -15,10 +15,10 @@
         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 {
+            display: block;
             padding: 10px 15px;
             position: relative;
             z-index: 1;
-            display: block;
             color: $text-color;
             overflow-wrap: break-word;
 
@@ -64,21 +64,6 @@
                 text-overflow: ellipsis;
             }
 
-            &.box-content-row-cf {
-                display: flex;
-                align-items: center;
-                width: 100%;
-
-                > a {
-                    padding: 8px 10px 8px 5px;
-                    color: $brand-danger;
-                }
-
-                > div {
-                    width: 100%;
-                }
-            }
-
             .row-label, label {
                 font-size: $font-size-small;
                 color: $text-muted;
@@ -87,10 +72,29 @@
                 margin-bottom: 5px;
             }
 
-            &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
+            &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input,
+            &.box-content-row-slider, &.box-content-row-cf {
                 display: flex;
                 align-items: center;
+            }
 
+            &.box-content-row-flex {
+                .row-main {
+                    flex-grow: 1;
+                }
+            }
+
+            &.box-content-row-cf {
+                width: 100%;
+
+                > a {
+                    padding: 8px 10px 8px 5px;
+                    color: $brand-danger;
+                    margin: 0;
+                }
+            }
+
+            &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
                 label, .row-label {
                     font-size: $font-size-base;
                     color: $text-color;
@@ -147,14 +151,7 @@
                 }
             }
 
-            input[type="checkbox"] {
-                float: right;
-                display: inline-block;
-            }
-
             .action-buttons {
-                float: right;
-
                 .row-btn {
                     float: left;
                     cursor: pointer;
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 2d81a682b4..70bf0344e3 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -33,7 +33,6 @@
         margin: 3px 3px 0 0;
         display: block;
         user-select: none;
-        float: right;
 
         .totp-sec {
             font-size: 0.85em;