From a18a591f0a8c90d7036fe12e61e51939fc4a22c4 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 7 Jun 2018 10:21:28 -0400
Subject: [PATCH] layouts for cipher/folder add/edit

---
 locales/en/messages.json                     |   7 +
 src/app/vault/add-edit.component.html        | 455 ++++++++++---------
 src/app/vault/folder-add-edit.component.html |  22 +-
 3 files changed, 243 insertions(+), 241 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 9ff82e0fb3d..fd2a909f228 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -314,5 +314,12 @@
   },
   "editItem": {
     "message": "Edit Item"
+  },
+  "ex": {
+    "message": "ex.",
+    "description": "Short abbreviation for 'example'."
+  },
+  "other": {
+    "message": "Other"
   }
 }
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 16b5a01c14a..fe3ed981bbd 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -2,262 +2,265 @@
     <div class="modal-dialog modal-lg">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
             <div class="modal-header">{{title}}</div>
-            <div class="modal-body">
+            <div class="modal-body" *ngIf="cipher">
                 <div class="row" *ngIf="!editMode">
-                    <div class="col-6">
-                        <div class="form-group">
-                            <label for="type">{{'whatTypeOfItem' | i18n}}</label>
-                            <select id="type" name="Type" [(ngModel)]="cipher.type">
-                                <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
-                            </select>
-                        </div>
+                    <div class="col-6 form-group">
+                        <label for="type">{{'whatTypeOfItem' | i18n}}</label>
+                        <select id="type" name="Type" [(ngModel)]="cipher.type" class="form-control">
+                            <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
+                        </select>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-6">
-                        <div class="form-group">
-                            <label for="name">{{'name' | i18n}}</label>
-                            <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="cipher.name" [appAutofocus]="!editMode">
-                        </div>
+                    <div class="col-6 form-group">
+                        <label for="name">{{'name' | i18n}}</label>
+                        <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="cipher.name">
+                    </div>
+                    <div class="col-6 form-group">
+                        <label for="folder">{{'folder' | i18n}}</label>
+                        <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId" class="form-control">
+                            <option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
+                        </select>
                     </div>
                 </div>
-                <div class="box">
-                    <div class="box-content">
-                        <!-- Login -->
-                        <div *ngIf="cipher.type === cipherType.Login">
-                            <div class="box-content-row" appBoxRow>
-                                <label for="loginUsername">{{'username' | i18n}}</label>
-                                <input id="loginUsername" type="text" name="Login.Username" [(ngModel)]="cipher.login.username">
-                            </div>
-                            <div class="box-content-row box-content-row-flex" appBoxRow>
-                                <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">
-                                    <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
-                                        [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading">
+                <!-- Login -->
+                <div *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>
+                        <div class="col-6 form-group">
+                            <label for="loginPassword">{{'password' | i18n}}</label>
+                            <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>
-                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
+                                    <button type="button" class="btn btn-outline-secondary" 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()">
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
                                         <i class="fa fa-lg fa-refresh"></i>
-                                    </a>
+                                    </button>
                                 </div>
                             </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
-                                <input id="loginTotp" type="text" name="Login.Totp" class="monospaced" [(ngModel)]="cipher.login.totp">
-                            </div>
-                        </div>
-                        <!-- Card -->
-                        <div *ngIf="cipher.type === cipherType.Card">
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
-                                <input id="cardCardholderName" type="text" name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardNumber">{{'number' | i18n}}</label>
-                                <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardBrand">{{'brand' | i18n}}</label>
-                                <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
-                                    <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{o.name}}</option>
-                                </select>
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
-                                <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
-                                    <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
-                                </select>
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
-                                <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="cardCode">{{'securityCode' | i18n}}</label>
-                                <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
-                            </div>
-                        </div>
-                        <!-- Identity -->
-                        <div *ngIf="cipher.type === cipherType.Identity">
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idTitle">{{'title' | i18n}}</label>
-                                <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
-                                    <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">{{o.name}}</option>
-                                </select>
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idFirstName">{{'firstName' | i18n}}</label>
-                                <input id="idFirstName" type="text" name="Identity.FirstName" [(ngModel)]="cipher.identity.firstName">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idMiddleName">{{'middleName' | i18n}}</label>
-                                <input id="idMiddleName" type="text" name="Identity.MiddleName" [(ngModel)]="cipher.identity.middleName">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idLastName">{{'lastName' | i18n}}</label>
-                                <input id="idLastName" type="text" name="Identity.LastName" [(ngModel)]="cipher.identity.lastName">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idUsername">{{'username' | i18n}}</label>
-                                <input id="idUsername" type="text" name="Identity.Username" [(ngModel)]="cipher.identity.username">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idCompany">{{'company' | i18n}}</label>
-                                <input id="idCompany" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idSsn">{{'ssn' | i18n}}</label>
-                                <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
-                                <input id="idPassportNumber" type="text" name="Identity.PassportNumber" [(ngModel)]="cipher.identity.passportNumber">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
-                                <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber" [(ngModel)]="cipher.identity.licenseNumber">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idEmail">{{'email' | i18n}}</label>
-                                <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idPhone">{{'phone' | i18n}}</label>
-                                <input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idAddress1">{{'address1' | i18n}}</label>
-                                <input id="idAddress1" type="text" name="Identity.Address1" [(ngModel)]="cipher.identity.address1">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idAddress2">{{'address2' | i18n}}</label>
-                                <input id="idAddress2" type="text" name="Identity.Address2" [(ngModel)]="cipher.identity.address2">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idAddress3">{{'address3' | i18n}}</label>
-                                <input id="idAddress3" type="text" name="Identity.Address3" [(ngModel)]="cipher.identity.address3">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idCity">{{'cityTown' | i18n}}</label>
-                                <input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idState">{{'stateProvince' | i18n}}</label>
-                                <input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
-                                <input id="idPostalCode" type="text" name="Identity.PostalCode" [(ngModel)]="cipher.identity.postalCode">
-                            </div>
-                            <div class="box-content-row" appBoxRow>
-                                <label for="idCountry">{{'country' | i18n}}</label>
-                                <input id="idCountry" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
-                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="box" *ngIf="cipher.type === cipherType.Login">
-                    <div class="box-content">
-                        <ng-container *ngIf="cipher.login.hasUris">
-                            <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let u of cipher.login.uris; let i = index">
-                                <a href="#" appStopClick (click)="removeUri(u)" title="{{'remove' | i18n}}">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
+                            <input id="loginTotp" type="text" name="Login.Totp" class="form-control text-monospace" [(ngModel)]="cipher.login.totp">
+                        </div>
+                    </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">
+                                <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>
+                            <div class="col-4">
+                                <label for="loginUriMatch{{i}}">
+                                    {{'matchDetection' | i18n}}
+                                </label>
+                                <select class="form-control" id="loginUriMatch{{i}}" name="Login.Uris[{{i}}].Match" [(ngModel)]="u.match" (change)="loginUriMatchChanged(u)">
+                                    <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
+                                </select>
+                            </div>
+                            <div class="col-1">
+                                <button class="btn btn-secondary" (click)="removeUri(u)" title="{{'remove' | i18n}}">
                                     <i class="fa fa-minus-circle fa-lg"></i>
-                                </a>
-                                <div class="row-main">
-                                    <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
-                                    <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri" placeholder="{{'ex' | i18n}} https://google.com">
-                                    <label for="loginUriMatch{{i}}" class="sr-only">
-                                        {{'matchDetection' | i18n}} {{(i + 1)}}
-                                    </label>
-                                    <select id="loginUriMatch{{i}}" name="Login.Uris[{{i}}].Match" [(ngModel)]="u.match" [hidden]="u.showOptions === false || (u.showOptions == null && u.match == null)"
-                                        (change)="loginUriMatchChanged(u)">
-                                        <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
-                                    </select>
-                                </div>
-                                <div class="action-buttons">
-                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
-                                        <i class="fa fa-lg fa-cog"></i>
-                                    </a>
-                                </div>
+                                </button>
                             </div>
-                        </ng-container>
-                        <a href="#" appStopClick appBlurClick (click)="addUri()" class="box-content-row">
-                            <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newUri' | i18n}}
-                        </a>
-                    </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>
-                <div class="box">
-                    <div class="box-content">
-                        <div class="box-content-row" appBoxRow>
-                            <label for="folder">{{'folder' | i18n}}</label>
-                            <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
-                                <option *ngFor="let f of folders" [ngValue]="f.id">{{f.name}}</option>
+                <!-- Card -->
+                <div *ngIf="cipher.type === cipherType.Card">
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
+                            <input id="cardCardholderName" class="form-control" type="text" name="Card.CardCardholderName" [(ngModel)]="cipher.card.cardholderName">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="cardBrand">{{'brand' | i18n}}</label>
+                            <select id="cardBrand" class="form-control" name="Card.Brand" [(ngModel)]="cipher.card.brand">
+                                <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{o.name}}</option>
                             </select>
                         </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="favorite">{{'favorite' | i18n}}</label>
-                            <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
+                    </div>
+                    <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>
+                        <div class="col form-group">
+                            <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
+                            <select id="cardExpMonth" class="form-control" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
+                                <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
+                        <div class="col form-group">
+                            <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
+                            <input id="cardExpYear" class="form-control" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear" placeholder="{{'ex' | i18n}} 2019">
                         </div>
-                        <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick (click)="attachments()" *ngIf="editMode">
-                            <div class="row-main">{{'attachments' | i18n}}</div>
-                            <i class="fa fa-chevron-right row-sub-icon"></i>
-                        </a>
                     </div>
-                </div>
-                <div class="box">
-                    <div class="box-header">
-                        <label for="notes">{{'notes' | i18n}}</label>
-                    </div>
-                    <div class="box-content">
-                        <div class="box-content-row" appBoxRow>
-                            <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
+                    <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>
                     </div>
                 </div>
-                <div class="box">
-                    <div class="box-header">
-                        {{'customFields' | i18n}}
+
+                <!-- Identity -->
+                <div *ngIf="cipher.type === cipherType.Identity">
+                    <div class="row">
+                        <div class="col-4 form-group">
+                            <label for="idTitle">{{'title' | i18n}}</label>
+                            <select id="idTitle" class="form-control" name="Identity.Title" [(ngModel)]="cipher.identity.title">
+                                <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">{{o.name}}</option>
+                            </select>
+                        </div>
                     </div>
-                    <div class="box-content">
-                        <ng-container *ngIf="cipher.hasFields">
-                            <div class="box-content-row box-content-row-multi" appBoxRow *ngFor="let f of cipher.fields; let i = index" [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
-                                <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
-                                    <i class="fa fa-minus-circle fa-lg"></i>
-                                </a>
-                                <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
-                                <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
-                                <div class="row-main">
-                                    <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name" class="row-label" placeholder="{{'name' | i18n}}">
-                                    <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value" *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
-                                    <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}" name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
-                                        *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
-                                </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 class="action-buttons" *ngIf="f.type === fieldType.Hidden">
-                                    <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
+                    <div class="row">
+                        <div class="col-4 form-group">
+                            <label for="idFirstName">{{'firstName' | i18n}}</label>
+                            <input id="idFirstName" class="form-control" type="text" name="Identity.FirstName" [(ngModel)]="cipher.identity.firstName">
+                        </div>
+                        <div class="col-4 form-group">
+                            <label for="idMiddleName">{{'middleName' | i18n}}</label>
+                            <input id="idMiddleName" class="form-control" type="text" name="Identity.MiddleName" [(ngModel)]="cipher.identity.middleName">
+                        </div>
+                        <div class="col-4 form-group">
+                            <label for="idLastName">{{'lastName' | i18n}}</label>
+                            <input id="idLastName" class="form-control" type="text" name="Identity.LastName" [(ngModel)]="cipher.identity.lastName">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 form-group">
+                            <label for="idUsername">{{'username' | i18n}}</label>
+                            <input id="idUsername" class="form-control" type="text" name="Identity.Username" [(ngModel)]="cipher.identity.username">
+                        </div>
+                        <div class="col-4 form-group">
+                            <label for="idCompany">{{'company' | i18n}}</label>
+                            <input id="idCompany" class="form-control" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 form-group">
+                            <label for="idSsn">{{'ssn' | i18n}}</label>
+                            <input id="idSsn" class="form-control" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
+                        </div>
+                        <div class="col-4 form-group">
+                            <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
+                            <input id="idPassportNumber" class="form-control" type="text" name="Identity.PassportNumber" [(ngModel)]="cipher.identity.passportNumber">
+                        </div>
+                        <div class="col-4 form-group">
+                            <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
+                            <input id="idLicenseNumber" class="form-control" type="text" name="Identity.LicenseNumber" [(ngModel)]="cipher.identity.licenseNumber">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="idEmail">{{'email' | i18n}}</label>
+                            <input id="idEmail" class="form-control" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="idPhone">{{'phone' | i18n}}</label>
+                            <input id="idPhone" class="form-control" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="idAddress1">{{'address1' | i18n}}</label>
+                            <input id="idAddress1" class="form-control" type="text" name="Identity.Address1" [(ngModel)]="cipher.identity.address1">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="idAddress2">{{'address2' | i18n}}</label>
+                            <input id="idAddress2" class="form-control" type="text" name="Identity.Address2" [(ngModel)]="cipher.identity.address2">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="idAddress3">{{'address3' | i18n}}</label>
+                            <input id="idAddress3" class="form-control" type="text" name="Identity.Address3" [(ngModel)]="cipher.identity.address3">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="idCity">{{'cityTown' | i18n}}</label>
+                            <input id="idCity" class="form-control" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="idState">{{'stateProvince' | i18n}}</label>
+                            <input id="idState" class="form-control" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
+                        </div>
+                        <div class="col-6 form-group">
+                            <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
+                            <input id="idPostalCode" class="form-control" type="text" name="Identity.PostalCode" [(ngModel)]="cipher.identity.postalCode">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 form-group">
+                            <label for="idCountry">{{'country' | i18n}}</label>
+                            <input id="idCountry" class="form-control" type="text" name="Identity.Country" [(ngModel)]="cipher.identity.country">
+                        </div>
+                    </div>
+                </div>
+
+                <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>
+                <ng-container *ngIf="cipher.hasFields">
+                    <div class="row" appBoxRow *ngFor="let f of cipher.fields; let i = index">
+                        <div class="col-4">
+                            <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">
+                            <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.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)">
                                         <i class="fa fa-lg" [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
-                                    </a>
+                                    </button>
                                 </div>
                             </div>
-                        </ng-container>
-                        <div class="box-content-row" appBoxRow>
-                            <a href="#" appStopClick (click)="addField()">
-                                <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}
-                            </a>
-                            <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
-                            <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
-                                <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
-                            </select>
+                            <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}}">
+                                <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>
                 </div>
             </div>
             <div class="modal-footer">
@@ -265,7 +268,7 @@
                     <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" (click)="cancel()" title="{{'cancel' | i18n}}">
+                <button appBlurClick type="button" data-dismiss="modal" title="{{'cancel' | i18n}}">
                     {{'cancel' | i18n}}
                 </button>
                 <div class="right">
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index f0e1e159954..3f2565d9b3c 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -1,19 +1,12 @@
 <div class="modal fade">
     <div class="modal-dialog modal-sm">
         <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+            <div class="modal-header">
+                {{title}}
+            </div>
             <div class="modal-body">
-                <div class="box">
-                    <div class="box-header">
-                        {{title}}
-                    </div>
-                    <div class="box-content">
-                        <div class="box-content-row" appBoxRow>
-                            <label for="name">{{'name' | i18n}}</label>
-                            <input id="name" type="text" name="Name" [(ngModel)]="folder.name"
-                                   [appAutofocus]="!editMode">
-                        </div>
-                    </div>
-                </div>
+                <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">
@@ -22,9 +15,8 @@
                 </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 #deleteBtn appBlurClick type="button" (click)="delete()" class="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>