cipher type forms

src/app/services/cipherService.js

@@ -92,16 +92,16 @@ angular
             var cipherData = encryptedCipher.Data;
             if (cipherData) {
                 cipher.name = cryptoService.decrypt(cipherData.Name, key);
-                cipher.notes = cipherData.Notes && cipherData.Notes !== '' ? cryptoService.decrypt(cipherData.Notes, key) : null;
+                cipher.notes = _service.decryptProperty(cipherData.Notes, key, true, false);
                 cipher.fields = _service.decryptFields(key, cipherData.Fields);
 
                 var dataObj = {};
                 switch (cipher.type) {
                     case constants.cipherType.login:
-                        dataObj.uri = cipherData.Uri && cipherData.Uri !== '' ? cryptoService.decrypt(cipherData.Uri, key) : null;
+                        dataObj.uri = _service.decryptProperty(cipherData.Uri, key, true, false);
-                        dataObj.username = cipherData.Username && cipherData.Username !== '' ? cryptoService.decrypt(cipherData.Username, key) : null;
+                        dataObj.username = _service.decryptProperty(cipherData.Username, key, true, false);
-                        dataObj.password = cipherData.Password && cipherData.Password !== '' ? cryptoService.decrypt(cipherData.Password, key) : null;
+                        dataObj.password = _service.decryptProperty(cipherData.Password, key, true, false);
-                        dataObj.totp = cipherData.Totp && cipherData.Totp !== '' ? cryptoService.decrypt(cipherData.Totp, key) : null;
+                        dataObj.totp = _service.decryptProperty(cipherData.Totp, key, true, false);
                         cipher.login = dataObj;
                         break;
                     case constants.cipherType.secureNote:
@@ -109,18 +109,31 @@ angular
                         cipher.secureNote = dataObj;
                         break;
                     case constants.cipherType.card:
-                        dataObj.cardholderName = cipherData.CardholderName && cipherData.CardholderName !== '' ? cryptoService.decrypt(cipherData.CardholderName, key) : null;
+                        dataObj.cardholderName = _service.decryptProperty(cipherData.CardholderName, key, true, false);
-                        dataObj.number = cipherData.Number && cipherData.Number !== '' ? cryptoService.decrypt(cipherData.Number, key) : null;
+                        dataObj.number = _service.decryptProperty(cipherData.Number, key, true, false);
-                        dataObj.brand = cipherData.Brand && cipherData.Brand !== '' ? cryptoService.decrypt(cipherData.Brand, key) : null;
+                        dataObj.brand = _service.decryptProperty(cipherData.Brand, key, true, false);
-                        dataObj.expMonth = cipherData.ExpMonth && cipherData.ExpMonth !== '' ? cryptoService.decrypt(cipherData.ExpMonth, key) : null;
+                        dataObj.expMonth = _service.decryptProperty(cipherData.ExpMonth, key, true, false);
-                        dataObj.expYear = cipherData.ExpYear && cipherData.ExpYear !== '' ? cryptoService.decrypt(cipherData.ExpYear, key) : null;
+                        dataObj.expYear = _service.decryptProperty(cipherData.ExpYear, key, true, false);
-                        dataObj.code = cipherData.Code && cipherData.Code !== '' ? cryptoService.decrypt(cipherData.Code, key) : null;
+                        dataObj.code = _service.decryptProperty(cipherData.Code, key, true, false);
                         cipher.card = dataObj;
                         break;
                     case constants.cipherType.identity:
-                        dataObj.firstName = cipherData.FirstName && cipherData.FirstName !== '' ? cryptoService.decrypt(cipherData.FirstName, key) : null;
+                        dataObj.title = _service.decryptProperty(cipherData.Title, key, true, false);
-                        dataObj.middleName = cipherData.MiddleName && cipherData.MiddleName !== '' ? cryptoService.decrypt(cipherData.MiddleName, key) : null;
+                        dataObj.firstName = _service.decryptProperty(cipherData.FirstName, key, true, false);
-                        dataObj.lastName = cipherData.LastName && cipherData.LastName !== '' ? cryptoService.decrypt(cipherData.LastName, key) : null;
+                        dataObj.middleName = _service.decryptProperty(cipherData.MiddleName, key, true, false);
+                        dataObj.lastName = _service.decryptProperty(cipherData.LastName, key, true, false);
+                        dataObj.address1 = _service.decryptProperty(cipherData.Address1, key, true, false);
+                        dataObj.address2 = _service.decryptProperty(cipherData.Address2, key, true, false);
+                        dataObj.address3 = _service.decryptProperty(cipherData.Address3, key, true, false);
+                        dataObj.city = _service.decryptProperty(cipherData.City, key, true, false);
+                        dataObj.state = _service.decryptProperty(cipherData.State, key, true, false);
+                        dataObj.postalCode = _service.decryptProperty(cipherData.PostalCode, key, true, false);
+                        dataObj.country = _service.decryptProperty(cipherData.Country, key, true, false);
+                        dataObj.company = _service.decryptProperty(cipherData.Company, key, true, false);
+                        dataObj.email = _service.decryptProperty(cipherData.Email, key, true, false);
+                        dataObj.phone = _service.decryptProperty(cipherData.Phone, key, true, false);
+                        dataObj.ssn = _service.decryptProperty(cipherData.SSN, key, true, false);
+                        dataObj.username = _service.decryptProperty(cipherData.Username, key, true, false);
                         cipher.identity = dataObj;
                         break;
                     default:
@@ -161,9 +174,9 @@ angular
 
             var loginData = encryptedCipher.Data;
             if (loginData) {
-                login.name = _service.decryptProperty(loginData.Name, key, false);
+                login.name = _service.decryptProperty(loginData.Name, key, false, true);
-                login.username = _service.decryptProperty(loginData.Username, key, true);
+                login.username = _service.decryptProperty(loginData.Username, key, true, true);
-                login.password = _service.decryptProperty(loginData.Password, key, true);
+                login.password = _service.decryptProperty(loginData.Password, key, true, true);
             }
 
             return login;
@@ -192,29 +205,52 @@ angular
 
             var cipherData = encryptedCipher.Data;
             if (cipherData) {
-                cipher.name = _service.decryptProperty(cipherData.Name, key, false);
+                cipher.name = _service.decryptProperty(cipherData.Name, key, false, true);
 
                 var dataObj = {};
                 switch (cipher.type) {
                     case constants.cipherType.login:
-                        cipher.subTitle = _service.decryptProperty(cipherData.Username, key, true);
+                        cipher.subTitle = _service.decryptProperty(cipherData.Username, key, true, true);
-                        cipher.meta.password = _service.decryptProperty(cipherData.Password, key, true);
+                        cipher.meta.password = _service.decryptProperty(cipherData.Password, key, true, true);
                         break;
                     case constants.cipherType.secureNote:
-                        cipher.subTitle = 'secure note'; // TODO: what to do for this sub title?
+                        cipher.subTitle = null;
                         break;
                     case constants.cipherType.card:
-                        cipher.meta.number = _service.decryptProperty(cipherData.Number, key, true);
+                        cipher.subTitle = '';
-                        var brand = _service.decryptProperty(cipherData.Brand, key, true);
+                        cipher.meta.number = _service.decryptProperty(cipherData.Number, key, true, true);
-                        cipher.subTitle = brand + ', *1234'; // TODO: last 4 of number
+                        var brand = _service.decryptProperty(cipherData.Brand, key, true, true);
+                        if (brand) {
+                            cipher.subTitle = brand;
+                        }
+                        if (cipher.meta.number && cipher.meta.number.length >= 4) {
+                            if (cipher.subTitle !== '') {
+                                cipher.subTitle += ', ';
+                            }
+                            cipher.subTitle += ('*' + cipher.meta.number.substr(cipher.meta.number.length - 4));
+                        }
                         break;
                     case constants.cipherType.identity:
-                        var firstName = _service.decryptProperty(cipherData.FirstName, key, true);
+                        var firstName = _service.decryptProperty(cipherData.FirstName, key, true, true);
-                        cipher.subTitle = firstName;
+                        var lastName = _service.decryptProperty(cipherData.LastName, key, true, true);
+                        cipher.subTitle = '';
+                        if (firstName) {
+                            cipher.subTitle = firstName;
+                        }
+                        if (lastName) {
+                            if (cipher.subTitle !== '') {
+                                cipher.subTitle += ' ';
+                            }
+                            cipher.subTitle += lastName;
+                        }
                         break;
                     default:
                         break;
                 }
+
+                if (cipher.subTitle === '') {
+                    cipher.subTitle = null;
+                }
             }
 
             return cipher;
@@ -315,7 +351,7 @@ angular
 
             return {
                 id: encryptedFolder.Id,
-                name: _service.decryptProperty(encryptedFolder.Name, null, false)
+                name: _service.decryptProperty(encryptedFolder.Name, null, false, true)
             };
         };
 
@@ -339,12 +375,12 @@ angular
 
             return {
                 id: encryptedCollection.Id,
-                name: catchError ? _service.decryptProperty(encryptedCollection.Name, key, false) :
+                name: catchError ? _service.decryptProperty(encryptedCollection.Name, key, false, true) :
                     cryptoService.decrypt(encryptedCollection.Name, key)
             };
         };
 
-        _service.decryptProperty = function (property, key, checkEmpty) {
+        _service.decryptProperty = function (property, key, checkEmpty, showError) {
             if (checkEmpty && (!property || property === '')) {
                 return null;
             }
@@ -356,7 +392,7 @@ angular
                 property = null;
             }
 
-            return property || '[error: cannot decrypt]';
+            return property || (showError ? '[error: cannot decrypt]' : null);
         };
 
         _service.encryptLogins = function (unencryptedLogins, key) {
@@ -419,7 +455,7 @@ angular
                 folderId: unencryptedCipher.folderId === '' ? null : unencryptedCipher.folderId,
                 favorite: unencryptedCipher.favorite !== null ? unencryptedCipher.favorite : false,
                 name: cryptoService.encrypt(unencryptedCipher.name, key),
-                notes: !unencryptedCipher.notes || unencryptedCipher.notes === '' ? null : cryptoService.encrypt(unencryptedCipher.notes, key),
+                notes: encryptProperty(unencryptedCipher.notes, key),
                 fields: _service.encryptFields(unencryptedCipher.fields, key)
             };
 
@@ -427,10 +463,10 @@ angular
                 case constants.cipherType.login:
                     var loginData = unencryptedCipher.login;
                     cipher.login = {
-                        uri: !loginData.uri || loginData.uri === '' ? null : cryptoService.encrypt(loginData.uri, key),
+                        uri: encryptProperty(loginData.uri, key),
-                        username: !loginData.username || loginData.username === '' ? null : cryptoService.encrypt(loginData.username, key),
+                        username: encryptProperty(loginData.username, key),
-                        password: !loginData.password || loginData.password === '' ? null : cryptoService.encrypt(loginData.password, key),
+                        password: encryptProperty(loginData.password, key),
-                        totp: !loginData.totp || loginData.totp === '' ? null : cryptoService.encrypt(loginData.totp, key)
+                        totp: encryptProperty(loginData.totp, key)
                     };
                     break;
                 case constants.cipherType.secureNote:
@@ -441,20 +477,33 @@ angular
                 case constants.cipherType.card:
                     var cardData = unencryptedCipher.card;
                     cipher.card = {
-                        cardholderName: !cardData.cardholderName || cardData.cardholderName === '' ? null : cryptoService.encrypt(cardData.cardholderName, key),
+                        cardholderName: encryptProperty(cardData.cardholderName, key),
-                        brand: !cardData.brand || cardData.brand === '' ? null : cryptoService.encrypt(cardData.brand, key),
+                        brand: encryptProperty(cardData.brand, key),
-                        number: !cardData.number || cardData.number === '' ? null : cryptoService.encrypt(cardData.number, key),
+                        number: encryptProperty(cardData.number, key),
-                        expMonth: !cardData.expMonth || cardData.expMonth === '' ? null : cryptoService.encrypt(cardData.expMonth, key),
+                        expMonth: encryptProperty(cardData.expMonth, key),
-                        expYear: !cardData.expYear || cardData.expYear === '' ? null : cryptoService.encrypt(cardData.expYear, key),
+                        expYear: encryptProperty(cardData.expYear, key),
-                        code: !cardData.code || cardData.code === '' ? null : cryptoService.encrypt(cardData.code, key),
+                        code: encryptProperty(cardData.code, key)
                     };
                     break;
                 case constants.cipherType.identity:
                     var identityData = unencryptedCipher.identity;
                     cipher.identity = {
-                        firstName: !identityData.firstName || cardData.firstName === '' ? null : cryptoService.encrypt(cardData.firstName, key),
+                        title: encryptProperty(identityData.title, key),
-                        middleName: !identityData.middleName || cardData.middleName === '' ? null : cryptoService.encrypt(cardData.middleName, key),
+                        firstName: encryptProperty(identityData.firstName, key),
-                        lastName: !identityData.lastName || cardData.lastName === '' ? null : cryptoService.encrypt(cardData.lastName, key)
+                        middleName: encryptProperty(identityData.middleName, key),
+                        lastName: encryptProperty(identityData.lastName, key),
+                        address1: encryptProperty(identityData.address1, key),
+                        address2: encryptProperty(identityData.address2, key),
+                        address3: encryptProperty(identityData.address3, key),
+                        city: encryptProperty(identityData.city, key),
+                        state: encryptProperty(identityData.state, key),
+                        postalCode: encryptProperty(identityData.postalCode, key),
+                        country: encryptProperty(identityData.country, key),
+                        company: encryptProperty(identityData.company, key),
+                        email: encryptProperty(identityData.email, key),
+                        phone: encryptProperty(identityData.phone, key),
+                        ssn: encryptProperty(identityData.ssn, key),
+                        username: encryptProperty(identityData.username, key)
                     };
                     break;
                 default:
@@ -565,5 +614,9 @@ angular
             };
         };
 
+        function encryptProperty(property, key) {
+            return !property || property === '' ? null : cryptoService.encrypt(property, key);
+        }
+
         return _service;
     });

src/app/vault/vaultAddCipherController.js

@@ -11,9 +11,6 @@
             folderId: selectedFolder ? selectedFolder.id : null,
             favorite: checkedFavorite === true,
             type: constants.cipherType.login,
-            card: {
-                brand: 'visa'
-            },
             secureNote: {
                 type: '0'
             }

src/app/vault/views/vaultAddCipher.html

@@ -124,27 +124,26 @@
             <div class="row">
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardholderName">Cardholder Name</label>
+                        <label for="name">Cardholder Name</label>
-                        <div class="input-group">
+                        <input type="text" id="cardholderName" name="Card.CarholderName" ng-readonly="readOnly"
-                            <input type="text" id="cardholderName" name="Card.CardholderName"
+                               ng-model="cipher.card.cardholderName" class="form-control" api-field />
-                                   ng-model="cipher.card.cardholderName" class="form-control" ng-readonly="readOnly" api-field />
-                            <span class="input-group-btn" uib-tooltip="Copy Cardholder Name" tooltip-placement="left">
-                                <button class="btn btn-default btn-flat" type="button" ngclipboard
-                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardholderName">
-                                    <i class="fa fa-clipboard"></i>
-                                </button>
-                            </span>
-                        </div>
                     </div>
                 </div>
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardBrand">Card Brand</label>
+                        <label for="cardBrand">Brand</label>
-                        <select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand" class="form-control" api-field>
+                        <select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand" class="form-control"
-                            <option value="visa">Visa</option>
+                                ng-readonly="readOnly" api-field>
-                            <option value="masterCard">MasterCard</option>
+                            <option value="">-- Select --</option>
-                            <option value="discover">Discover</option>
+                            <option value="Visa">Visa</option>
-                            <option value="amex">American Express</option>
+                            <option value="Mastercard">Mastercard</option>
+                            <option value="Discover">Discover</option>
+                            <option value="Amex">American Express</option>
+                            <option value="Maestro">Maestro</option>
+                            <option value="Diners Club">Diners Club</option>
+                            <option value="UnionPay">UnionPay</option>
+                            <option value="JCB">JCB</option>
+                            <option value="Other">Other</option>
                         </select>
                     </div>
                 </div>
@@ -152,7 +151,7 @@
             <div class="row">
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardNumber">Card Number</label>
+                        <label for="cardNumber">Number</label>
                         <div class="input-group">
                             <input type="text" id="cardNumber" name="Card.Number" ng-model="cipher.card.number"
                                    class="form-control" ng-readonly="readOnly" api-field />
@@ -165,16 +164,311 @@
                         </div>
                     </div>
                 </div>
+                <div class="col-sm-3">
+                    <div class="form-group" show-errors>
+                        <label for="cardExpMonth">Expiration Month</label>
+                        <select id="cardExpMonth" name="Card.ExpMonth" ng-model="cipher.card.expMonth"
+                                ng-readonly="readOnly" class="form-control" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="1">01 - January</option>
+                            <option value="2">02 - February</option>
+                            <option value="3">03 - March</option>
+                            <option value="4">04 - April</option>
+                            <option value="5">05 - May</option>
+                            <option value="6">06 - June</option>
+                            <option value="7">07 - July</option>
+                            <option value="8">08 - August</option>
+                            <option value="9">09 - September</option>
+                            <option value="10">10 - October</option>
+                            <option value="11">11 - November</option>
+                            <option value="12">12 - December</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="form-group" show-errors>
+                        <label for="cardExpYear">Expiration Year</label>
+                        <input type="text" id="cardExpYear" name="Card.ExpYear" ng-readonly="readOnly"
+                               ng-model="cipher.card.expYear" class="form-control" api-field placeholder="ex. 2019" />
+                    </div>
+                </div>
+            </div>
+            <div class="row">
                 <div class="col-sm-6">
-
+                    <div class="form-group" show-errors>
+                        <label for="cardCode">Security Code</label>
+                        <div class="input-group">
+                            <input type="text" id="cardCode" name="Card.Code" ng-model="cipher.card.code"
+                                   class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Code" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardCode">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <div ng-if="cipher.type === constants.cipherType.identity">
-
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityTitle">Title</label>
+                        <select id="identityTitle" name="Identity.Title" ng-model="cipher.identity.title" class="form-control"
+                                ng-readonly="readOnly" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="Mr">Mr</option>
+                            <option value="Mrs">Mrs</option>
+                            <option value="Ms">Ms</option>
+                            <option value="Dr">Dr</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityFirstName">First Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityFirstName" name="Identity.FirstName"
+                                   ng-model="cipher.identity.firstName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy First Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityFirstName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityMiddleName">Middle Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityMiddleName" name="Identity.FirstName"
+                                   ng-model="cipher.identity.middleName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Middle Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityMiddleName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityLastName">Last Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityLastName" name="Identity.LastName"
+                                   ng-model="cipher.identity.lastName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Last Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityLastName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityCompany">Company</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCompany" name="Identity.Company"
+                                   ng-model="cipher.identity.company" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Company" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCompany">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityUsername">Username</label>
+                        <div class="input-group">
+                            <input type="text" id="identityUsername" name="Identity.Username"
+                                   ng-model="cipher.identity.username" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Username" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityUsername">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identitySSN">Social Security Number</label>
+                        <div class="input-group">
+                            <input type="text" id="identitySSN" name="Identity.SSN"
+                                   ng-model="cipher.identity.ssn" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy SSN" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identitySSN">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityEmail">Email</label>
+                        <div class="input-group">
+                            <input type="text" id="identityEmail" name="Identity.Email"
+                                   ng-model="cipher.identity.email" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Email" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityEmail">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityPhone">Phone</label>
+                        <div class="input-group">
+                            <input type="text" id="identityPhone" name="Identity.Phone"
+                                   ng-model="cipher.identity.phone" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Phone" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPhone">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress1">Address 1</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress1" name="Identity.Address1"
+                                   ng-model="cipher.identity.address1" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 1" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress1">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress2">Address 2</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress2" name="Identity.Address2"
+                                   ng-model="cipher.identity.address2" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 2" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress2">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress3">Address 3</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress3" name="Identity.Address3"
+                                   ng-model="cipher.identity.address3" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 3" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress3">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityCity">City / Town</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCity" name="Identity.City"
+                                   ng-model="cipher.identity.city" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy City/Town" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCity">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityState">State / Province</label>
+                        <div class="input-group">
+                            <input type="text" id="identityState" name="Identity.State"
+                                   ng-model="cipher.identity.state" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy State/Province" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityState">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityPostalCode">Zip / Postal Code</label>
+                        <div class="input-group">
+                            <input type="text" id="identityPostalCode" name="Identity.PostalCode"
+                                   ng-model="cipher.identity.postalCode" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Zip/Postal Code" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPostalCode">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityCountry">Country</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCountry" name="Identity.Country"
+                                   ng-model="cipher.identity.country" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Country" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCountry">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <div ng-if="cipher.type === constants.cipherType.secureNote">
-
+            <!-- Nothing for now -->
         </div>
 
         <div class="form-group" show-errors>

src/app/vault/views/vaultEditCipher.html

@@ -116,27 +116,26 @@
             <div class="row">
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardholderName">Cardholder Name</label>
+                        <label for="name">Cardholder Name</label>
-                        <div class="input-group">
+                        <input type="text" id="cardholderName" name="Card.CarholderName" ng-readonly="readOnly"
-                            <input type="text" id="cardholderName" name="Card.CardholderName"
+                               ng-model="cipher.card.cardholderName" class="form-control" api-field />
-                                   ng-model="cipher.card.cardholderName" class="form-control" ng-readonly="readOnly" api-field />
-                            <span class="input-group-btn" uib-tooltip="Copy Cardholder Name" tooltip-placement="left">
-                                <button class="btn btn-default btn-flat" type="button" ngclipboard
-                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardholderName">
-                                    <i class="fa fa-clipboard"></i>
-                                </button>
-                            </span>
-                        </div>
                     </div>
                 </div>
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardBrand">Card Brand</label>
+                        <label for="cardBrand">Brand</label>
-                        <select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand" class="form-control" api-field>
+                        <select id="cardBrand" name="Card.Brand" ng-model="cipher.card.brand" class="form-control"
-                            <option value="visa">Visa</option>
+                                ng-readonly="readOnly" api-field>
-                            <option value="masterCard">MasterCard</option>
+                            <option value="">-- Select --</option>
-                            <option value="discover">Discover</option>
+                            <option value="Visa">Visa</option>
-                            <option value="amex">American Express</option>
+                            <option value="Mastercard">Mastercard</option>
+                            <option value="Discover">Discover</option>
+                            <option value="Amex">American Express</option>
+                            <option value="Maestro">Maestro</option>
+                            <option value="Diners Club">Diners Club</option>
+                            <option value="UnionPay">UnionPay</option>
+                            <option value="JCB">JCB</option>
+                            <option value="Other">Other</option>
                         </select>
                     </div>
                 </div>
@@ -144,7 +143,7 @@
             <div class="row">
                 <div class="col-sm-6">
                     <div class="form-group" show-errors>
-                        <label for="cardNumber">Card Number</label>
+                        <label for="cardNumber">Number</label>
                         <div class="input-group">
                             <input type="text" id="cardNumber" name="Card.Number" ng-model="cipher.card.number"
                                    class="form-control" ng-readonly="readOnly" api-field />
@@ -157,16 +156,311 @@
                         </div>
                     </div>
                 </div>
+                <div class="col-sm-3">
+                    <div class="form-group" show-errors>
+                        <label for="cardExpMonth">Expiration Month</label>
+                        <select id="cardExpMonth" name="Card.ExpMonth" ng-model="cipher.card.expMonth"
+                                ng-readonly="readOnly" class="form-control" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="1">01 - January</option>
+                            <option value="2">02 - February</option>
+                            <option value="3">03 - March</option>
+                            <option value="4">04 - April</option>
+                            <option value="5">05 - May</option>
+                            <option value="6">06 - June</option>
+                            <option value="7">07 - July</option>
+                            <option value="8">08 - August</option>
+                            <option value="9">09 - September</option>
+                            <option value="10">10 - October</option>
+                            <option value="11">11 - November</option>
+                            <option value="12">12 - December</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-3">
+                    <div class="form-group" show-errors>
+                        <label for="cardExpYear">Expiration Year</label>
+                        <input type="text" id="cardExpYear" name="Card.ExpYear" ng-readonly="readOnly"
+                               ng-model="cipher.card.expYear" class="form-control" api-field placeholder="ex. 2019" />
+                    </div>
+                </div>
+            </div>
+            <div class="row">
                 <div class="col-sm-6">
-
+                    <div class="form-group" show-errors>
+                        <label for="cardCode">Security Code</label>
+                        <div class="input-group">
+                            <input type="text" id="cardCode" name="Card.Code" ng-model="cipher.card.code"
+                                   class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Code" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#cardCode">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <div ng-if="cipher.type === constants.cipherType.identity">
-
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityTitle">Title</label>
+                        <select id="identityTitle" name="Identity.Title" ng-model="cipher.identity.title" class="form-control"
+                                ng-readonly="readOnly" api-field>
+                            <option value="">-- Select --</option>
+                            <option value="Mr">Mr</option>
+                            <option value="Mrs">Mrs</option>
+                            <option value="Ms">Ms</option>
+                            <option value="Dr">Dr</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityFirstName">First Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityFirstName" name="Identity.FirstName"
+                                   ng-model="cipher.identity.firstName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy First Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityFirstName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityMiddleName">Middle Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityMiddleName" name="Identity.FirstName"
+                                   ng-model="cipher.identity.middleName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Middle Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityMiddleName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityLastName">Last Name</label>
+                        <div class="input-group">
+                            <input type="text" id="identityLastName" name="Identity.LastName"
+                                   ng-model="cipher.identity.lastName" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Last Name" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityLastName">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityCompany">Company</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCompany" name="Identity.Company"
+                                   ng-model="cipher.identity.company" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Company" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCompany">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identityUsername">Username</label>
+                        <div class="input-group">
+                            <input type="text" id="identityUsername" name="Identity.Username"
+                                   ng-model="cipher.identity.username" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Username" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityUsername">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="form-group" show-errors>
+                        <label for="identitySSN">Social Security Number</label>
+                        <div class="input-group">
+                            <input type="text" id="identitySSN" name="Identity.SSN"
+                                   ng-model="cipher.identity.ssn" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy SSN" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identitySSN">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityEmail">Email</label>
+                        <div class="input-group">
+                            <input type="text" id="identityEmail" name="Identity.Email"
+                                   ng-model="cipher.identity.email" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Email" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityEmail">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityPhone">Phone</label>
+                        <div class="input-group">
+                            <input type="text" id="identityPhone" name="Identity.Phone"
+                                   ng-model="cipher.identity.phone" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Phone" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPhone">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress1">Address 1</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress1" name="Identity.Address1"
+                                   ng-model="cipher.identity.address1" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 1" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress1">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress2">Address 2</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress2" name="Identity.Address2"
+                                   ng-model="cipher.identity.address2" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 2" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress2">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityAddress3">Address 3</label>
+                        <div class="input-group">
+                            <input type="text" id="identityAddress3" name="Identity.Address3"
+                                   ng-model="cipher.identity.address3" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Address 3" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityAddress3">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityCity">City / Town</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCity" name="Identity.City"
+                                   ng-model="cipher.identity.city" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy City/Town" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCity">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityState">State / Province</label>
+                        <div class="input-group">
+                            <input type="text" id="identityState" name="Identity.State"
+                                   ng-model="cipher.identity.state" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy State/Province" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityState">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityPostalCode">Zip / Postal Code</label>
+                        <div class="input-group">
+                            <input type="text" id="identityPostalCode" name="Identity.PostalCode"
+                                   ng-model="cipher.identity.postalCode" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Zip/Postal Code" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityPostalCode">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="form-group" show-errors>
+                        <label for="identityCountry">Country</label>
+                        <div class="input-group">
+                            <input type="text" id="identityCountry" name="Identity.Country"
+                                   ng-model="cipher.identity.country" class="form-control" ng-readonly="readOnly" api-field />
+                            <span class="input-group-btn" uib-tooltip="Copy Country" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-error="clipboardError(e)" data-clipboard-target="#identityCountry">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <div ng-if="cipher.type === constants.cipherType.secureNote">
-
+            <!-- Nothing for now -->
         </div>
 
         <div class="form-group" show-errors>