add/edit login custom fields

src/_locales/en/messages.json

@@ -765,5 +765,17 @@
   },
   "value": {
     "message": "Value"
+  },
+  "newCustomField": {
+    "message": "New Custom Field"
+  },
+  "cfTypeText": {
+    "message": "Text"
+  },
+  "cfTypeHidden": {
+    "message": "Hidden"
+  },
+  "cfTypeBoolean": {
+    "message": "Boolean"
   }
 }

src/popup/app/vault/vaultAddLoginController.js

@@ -2,8 +2,10 @@
     .module('bit.vault')
 
     .controller('vaultAddLoginController', function ($scope, $state, $stateParams, loginService, folderService,
-        cryptoService, $q, toastr, utilsService, $analytics, i18nService) {
+        cryptoService, $q, toastr, utilsService, $analytics, i18nService, constantsService) {
         $scope.i18n = i18nService;
+        $scope.constants = constantsService;
+        $scope.addFieldType = constantsService.fieldType.text.toString();
         var from = $stateParams.from,
             folderId = $stateParams.folderId;
 
@@ -65,6 +67,25 @@
             }
         };
 
+        $scope.addField = function (type) {
+            if (!$scope.login.fields) {
+                $scope.login.fields = [];
+            }
+
+            $scope.login.fields.push({
+                type: parseInt(type),
+                name: null,
+                value: null
+            });
+        };
+
+        $scope.removeField = function (field) {
+            var index = $scope.login.fields.indexOf(field);
+            if (index > -1) {
+                $scope.login.fields.splice(index, 1);
+            }
+        };
+
         $scope.generatePassword = function () {
             $analytics.eventTrack('Clicked Generate Password');
             $state.go('passwordGenerator', {

src/popup/app/vault/vaultEditLoginController.js

@@ -6,6 +6,7 @@ angular
         $scope.i18n = i18nService;
         $scope.constants = constantsService;
         $scope.showAttachments = !utilsService.isEdge();
+        $scope.addFieldType = constantsService.fieldType.text.toString();
         var loginId = $stateParams.loginId;
         var fromView = $stateParams.fromView;
         var from = $stateParams.from;
@@ -94,6 +95,25 @@ angular
             }
         };
 
+        $scope.addField = function (type) {
+            if (!$scope.login.fields) {
+                $scope.login.fields = [];
+            }
+
+            $scope.login.fields.push({
+                type: parseInt(type),
+                name: null,
+                value: null
+            });
+        };
+
+        $scope.removeField = function (field) {
+            var index = $scope.login.fields.indexOf(field);
+            if (index > -1) {
+                $scope.login.fields.splice(index, 1);
+            }
+        };
+
         $scope.generatePassword = function () {
             if ($scope.login.password) {
                 SweetAlert.swal({

src/popup/app/vault/views/vaultAddLogin.html

@@ -68,6 +68,45 @@
                     </div>
                 </div>
             </div>
+
+            <div class="list-section">
+                <div class="list-section-header">
+                    {{i18n.customFields}}
+                </div>
+                <div class="list-section-items">
+                    <div class="list-section-item list-section-item-table"
+                         ng-if="login.fields && login.fields.length" ng-repeat="field in login.fields"
+                         ng-class="{'list-section-item-checkbox' : field.type === constants.fieldType.boolean}">
+                        <a href="#" stop-click ng-click="removeField(field)" class="action-button text-danger">
+                            <i class="fa fa-close fa-lg"></i>
+                        </a>
+                        <div class="action-button-content">
+                            <input id="field_name{{$index}}" type="text" name="Field.Name{{$index}}"
+                                   ng-model="field.name" class="item-label" 
+                                   placeholder="{{i18n.name}}">
+                            <input id="field_value{{$index}}" type="text" name="Field.Value{{$index}}"
+                                   ng-model="field.value" ng-if="field.type === constants.fieldType.text" 
+                                   placeholder="{{i18n.value}}">
+                            <input id="field_value{{$index}}" type="password" name="Field.Value{{$index}}"
+                                   ng-model="field.value" ng-if="field.type === constants.fieldType.hidden" 
+                                   placeholder="{{i18n.value}}">
+                            <input id="field_value{{$index}}" name="Field.Value{{$index}}" type="checkbox"
+                                   ng-model="field.value" data-ng-true-value="'true'"
+                                   ng-if="field.type === constants.fieldType.boolean">
+                        </div>
+                    </div>
+                    <div class="list-section-item">
+                        <a href="#" stop-click ng-click="addField(addFieldType)">
+                            <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{i18n.newCustomField}}
+                        </a>
+                        <select ng-model="addFieldType" class="field-type">
+                            <option value="0">{{i18n.cfTypeText}}</option>
+                            <option value="1">{{i18n.cfTypeHidden}}</option>
+                            <option value="2">{{i18n.cfTypeBoolean}}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </form>

src/popup/app/vault/views/vaultEditLogin.html

@@ -73,23 +73,43 @@
                     </div>
                 </div>
             </div>
-            <div class="list-section" ng-if="login.fields && login.fields.length">
+            <div class="list-section">
                 <div class="list-section-header">
                     {{i18n.customFields}}
                 </div>
                 <div class="list-section-items">
-                    <div class="list-section-item" ng-repeat="field in login.fields"
+                    <div class="list-section-item list-section-item-table" 
+                         ng-if="login.fields && login.fields.length" ng-repeat="field in login.fields"
                          ng-class="{'list-section-item-checkbox' : field.type === constants.fieldType.boolean}">
-                        <label for="field_value{{$index}}" class="item-label">{{field.name}}</label>
+                        <a href="#" stop-click ng-click="removeField(field)" class="action-button text-danger">
+                            <i class="fa fa-close fa-lg"></i>
+                        </a>
+                        <div class="action-button-content">
+                            <input id="field_name{{$index}}" type="text" name="Field.Name{{$index}}"
+                                   ng-model="field.name" class="item-label"
+                                   placeholder="{{i18n.name}}">
                             <input id="field_value{{$index}}" type="text" name="Field.Value{{$index}}"
-                               ng-model="field.value" ng-if="field.type === constants.fieldType.text">
+                                   ng-model="field.value" ng-if="field.type === constants.fieldType.text"
+                                   placeholder="{{i18n.value}}">
                             <input id="field_value{{$index}}" type="password" name="Field.Value{{$index}}"
-                               ng-model="field.value" ng-if="field.type === constants.fieldType.hidden">
+                                   ng-model="field.value" ng-if="field.type === constants.fieldType.hidden"
+                                   placeholder="{{i18n.value}}">
                             <input id="field_value{{$index}}" name="Field.Value{{$index}}" type="checkbox"
                                    ng-model="field.value" data-ng-true-value="'true'"
                                    ng-if="field.type === constants.fieldType.boolean">
                         </div>
                     </div>
+                    <div class="list-section-item">
+                        <a href="#" stop-click ng-click="addField(addFieldType)">
+                            <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{i18n.newCustomField}}
+                        </a>
+                        <select ng-model="addFieldType" class="field-type">
+                            <option value="0">{{i18n.cfTypeText}}</option>
+                            <option value="1">{{i18n.cfTypeHidden}}</option>
+                            <option value="2">{{i18n.cfTypeBoolean}}</option>
+                        </select>
+                    </div>
+                </div>
             </div>
             <div class="list-section">
                 <div class="list-section-items">

src/popup/app/vault/views/vaultViewLogin.html

@@ -44,7 +44,7 @@
                         <i class="fa fa-lg" ng-class="[{'fa-eye': !showPassword}, {'fa-eye-slash': showPassword}]"></i>
                     </a>
                     <span class="item-label">{{i18n.password}}</span>
-                    <span ng-show="!showPassword">{{login.maskedPassword}}</span>
+                    <span ng-show="!showPassword" class="monospaced">{{login.maskedPassword}}</span>
                     <span id="password" ng-show="showPassword" class="monospaced">{{login.password}}</span>
                 </div>
                 <div class="list-section-item totp" ng-class="{'low': totpLow}" ng-if="login.totp && totpCode">
@@ -96,7 +96,7 @@
                         {{field.value || '&nbsp;'}}
                     </div>
                     <div ng-if="field.type === constants.fieldType.hidden">
-                        <span ng-show="!field.showValue">{{maskValue(field.value)}}</span>
+                        <span ng-show="!field.showValue" class="monospaced">{{maskValue(field.value)}}</span>
                         <span ng-show="field.showValue" class="monospaced">{{field.value}}</span>
                     </div>
                     <div ng-if="field.type === constants.fieldType.boolean">

src/popup/less/components.less

@@ -318,6 +318,29 @@
             display: block;
             width: 100%;
             font-weight: normal;
+            margin-bottom: 5px;
+        }
+
+        &.list-section-item-table {
+            display: table;
+            width: 100%;
+        }
+
+        .action-button {
+            padding: 8px 10px 8px 5px;
+            display: table-cell;
+            width: 20px;
+            vertical-align: middle;
+        }
+
+        .action-button-content {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .field-type {
+            margin: 5px 0 0 27px;
+            width: ~"calc(100% - 27px)";
         }
 
         .btn-list {
@@ -387,7 +410,7 @@
         }
 
         &.list-section-item-checkbox, &.list-section-item-input, &.list-section-item-slider {
-            label {
+            label, .item-label {
                 font-size: @font-size-base;
                 color: @text-color;
                 display: inline;

src/services/apiService.js

@@ -30,8 +30,8 @@ function initApiService() {
         }
 
         // Desktop
-        self.baseUrl = 'http://localhost:4000';
+        //self.baseUrl = 'http://localhost:4000';
-        self.identityBaseUrl = 'http://localhost:33656';
+        //self.identityBaseUrl = 'http://localhost:33656';
 
         // Desktop HTTPS
         //self.baseUrl = 'https://localhost:44377';
@@ -46,8 +46,8 @@ function initApiService() {
         //self.identityBaseUrl = 'https://preview-identity.bitwarden.com';
 
         // Production
-        //self.baseUrl = 'https://api.bitwarden.com';
+        self.baseUrl = 'https://api.bitwarden.com';
-        //self.identityBaseUrl = 'https://identity.bitwarden.com';
+        self.identityBaseUrl = 'https://identity.bitwarden.com';
     };
 
     // Auth APIs