bitwarden-browser/src/app/vault/add-edit.component.html

<div class="modal fade">
    <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" *ngIf="cipher">
                <div class="row" *ngIf="!editMode">
                    <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 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>
                <!-- 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>
                                    <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>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" appBlurClick title="{{'generatePassword' | i18n}}" (click)="generatePassword()">
                                        <i class="fa fa-lg fa-refresh"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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>
                                </button>
                            </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>
                <!-- 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>
                    <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>
                    </div>
                    <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>

                <!-- 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="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>
                                    </button>
                                </div>
                            </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>
                        <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">
                <button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}" [disabled]="form.loading">
                    <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" 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">
                        <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>
                </div>
            </div>
        </form>
    </div>
</div>