finish add item fields

src/app/vault/add.component.html

@@ -160,6 +160,70 @@
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="box-content">
+                <div class="box-content-row" *ngIf="cipher.type === cipherType.Login">
+                    <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
+                    <input id="loginTotp" type="text" name="Login.Totp" [(ngModel)]="cipher.login.totp">
+                </div>
+                <div class="box-content-row">
+                    <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>
+                    </select>
+                </div>
+                <div class="box-content-row box-content-row-checkbox">
+                    <label for="favorite">{{'favorite' | i18n}}</label>
+                    <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
+                </div>
+            </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">
+                    <textarea id="notes" name="Notes" rows="12" [(ngModel)]="cipher.notes"></textarea>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-header">
+                {{'customFields' | i18n}}
+            </div>
+            <div class="box-content">
+                <div *ngIf="cipher.hasFields">
+                    <div class="box-content-row box-content-row-cf" *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-close fa-lg"></i>
+                        </a>
+                        <div>
+                            <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
+                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
+                                   class="row-label" placeholder="{{'name' | i18n}}">
+                            <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
+                            <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="password" name="Field.Value{{i}}" [(ngModel)]="f.value"
+                                   *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
+                            <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox"
+                                   [(ngModel)]="f.value" *ngIf="f.type === fieldType.Boolean">
+                        </div>
+                    </div>
+                </div>
+                <div class="box-content-row">
+                    <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" [(ngModel)]="addFieldType" class="field-type">
+                        <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
+                    </select>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <div class="footer">

src/app/vault/add.component.ts

@@ -16,6 +16,7 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 
 import { CardView } from 'jslib/models/view/cardView';
 import { CipherView } from 'jslib/models/view/cipherView';
+import { FieldView } from 'jslib/models/view/fieldView';
 import { FolderView } from 'jslib/models/view/folderView';
 import { IdentityView } from 'jslib/models/view/identityView';
 import { LoginView } from 'jslib/models/view/loginView';
@@ -31,10 +32,12 @@ export class AddComponent implements OnChanges {
     folders: FolderView[];
     cipherType = CipherType;
     fieldType = FieldType;
+    addFieldType: FieldType = FieldType.Text;
     typeOptions: any[];
     cardBrandOptions: any[];
     cardExpMonthOptions: any[];
     identityTitleOptions: any[];
+    addFieldTypeOptions: any[];
 
     constructor(private cipherService: CipherService, private folderService: FolderService,
         private i18nService: I18nService) {
@@ -78,6 +81,11 @@ export class AddComponent implements OnChanges {
             { name: i18nService.t('ms'), value: i18nService.t('ms') },
             { name: i18nService.t('dr'), value: i18nService.t('dr') },
         ];
+        this.addFieldTypeOptions = [
+            { name: i18nService.t('cfTypeText'), value: FieldType.Text },
+            { name: i18nService.t('cfTypeHidden'), value: FieldType.Hidden },
+            { name: i18nService.t('cfTypeBoolean'), value: FieldType.Boolean },
+        ];
     }
 
     async ngOnChanges() {
@@ -92,4 +100,21 @@ export class AddComponent implements OnChanges {
 
         this.folders = await this.folderService.getAllDecrypted();
     }
+
+    addField() {
+        if (this.cipher.fields == null) {
+            this.cipher.fields = [];
+        }
+
+        const f = new FieldView();
+        f.type = this.addFieldType;
+        this.cipher.fields.push(f);
+    };
+
+    removeField(field: FieldView) {
+        const i = this.cipher.fields.indexOf(field);
+        if (i > -1) {
+            this.cipher.fields.splice(i, 1);
+        }
+    };
 }

src/locales/en/messages.json

@@ -259,5 +259,29 @@
   },
   "edit": {
     "message": "Edit"
+  },
+  "authenticatorKeyTotp": {
+    "message": "Authenticator Key (TOTP)"
+  },
+  "folder": {
+    "message": "Folder"
+  },
+  "newCustomField": {
+    "message": "New Custom Field"
+  },
+  "value": {
+    "message": "Value"
+  },
+  "cfTypeText": {
+    "message": "Text"
+  },
+  "cfTypeHidden": {
+    "message": "Hidden"
+  },
+  "cfTypeBoolean": {
+    "message": "Boolean"
+  },
+  "remove": {
+    "message": "Remove"
   }
 }

src/scss/styles.scss

@@ -71,6 +71,7 @@ html, body {
     font-family: $font-family-sans-serif;
     font-size: $font-size-base;
     color: $text-color;
+    line-height: 1.42857143;
 }
 
 body {
@@ -92,6 +93,21 @@ a {
     font-family: $font-family-monospace;
 }
 
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    border: 0 !important;
+}
+
+input, select, textarea, button {
+    font-size: $font-size-base;
+}
+
 #vault {
     height: 100vh;
     display: flex;
@@ -619,6 +635,10 @@ a {
         margin-top: 10px;
     }
 
+    &:last-child {
+        margin-bottom: 30px;
+    }
+
     .box-header {
         margin: 0 10px 5px 10px;
         color: $gray-light;
@@ -680,20 +700,48 @@ a {
                 text-overflow: ellipsis;
             }
 
+            &.box-content-row-cf {
+                display: flex;
+                align-items: center;
+                width: 100%;
+
+                > a {
+                    padding: 8px 10px 8px 5px;
+                    color: $brand-danger;
+                }
+
+                > div {
+                    width: 100%;
+                }
+            }
+
             .row-label, label {
                 font-size: $font-size-small;
                 color: $text-muted;
                 display: block;
                 width: 100%;
-                font-weight: normal;
                 margin-bottom: 5px;
             }
 
+            &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
+                label, .row-label {
+                    font-size: $font-size-base;
+                    color: $text-color;
+                    display: inline;
+                    width: initial;
+                    margin-bottom: 0;
+                    float: left;
+                }
+
+                input.row-label {
+                    width: calc(100% - 40px);
+                }
+            }
+
             input:not([type="checkbox"]), select, textarea {
                 border: none;
                 width: 100%;
                 background-color: transparent;
-                font-size: $font-size-base;
 
                 &::-webkit-input-placeholder {
                     color: lighten($gray-light, 35%);
@@ -738,6 +786,11 @@ a {
                 }
             }
 
+            select.field-type {
+                margin: 5px 0 0 25px;
+                width: calc(100% - 25px);
+            }
+
             .right-icon {
                 float: right;
                 margin-top: 4px;