bitwarden-desktop/src/app/vault/add.component.html

<div class="content">
    <div class="inner-content" *ngIf="cipher">
        <div class="box">
            <div class="box-header">
                {{'itemInformation' | i18n}}
            </div>
            <div class="box-content">
                <div class="box-content-row">
                    <label for="type">{{'type' | i18n}}</label>
                    <select id="type" name="Type" [(ngModel)]="cipher.type">
                        <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
                    </select>
                </div>
                <div class="box-content-row">
                    <label for="name">{{'name' | i18n}}</label>
                    <input id="name" type="text" name="Name" [(ngModel)]="cipher.name">
                </div>
                <!-- Login -->
                <div *ngIf="cipher.type === cipherType.Login">
                    <div class="box-content-row">
                        <label for="loginUri">{{'uri' | i18n}}</label>
                        <input id="loginUri" type="text" name="Login.Uri" [(ngModel)]="cipher.login.uri">
                    </div>
                    <div class="box-content-row">
                        <label for="loginUsername">{{'username' | i18n}}</label>
                        <input id="loginUsername" type="text" name="Login.Username"
                               [(ngModel)]="cipher.login.username">
                    </div>
                    <div class="box-content-row">
                        <label for="loginPassword">{{'password' | i18n}}</label>
                        <input id="loginPassword" type="text" name="Login.Password"
                               [(ngModel)]="cipher.login.password">
                    </div>
                    <a class="box-content-row" href="#" appStopClick (click)="generatePassword()">
                        {{'generatePassword' | i18n}}
                        <i class="fa fa-chevron-right icon-right"></i>
                    </a>
                </div>
                <!-- Card -->
                <div *ngIf="cipher.type === cipherType.Card">
                    <div class="box-content-row">
                        <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
                        <input id="cardCardholderName" type="text" name="Card.CardCardholderName"
                               [(ngModel)]="cipher.card.cardholderName">
                    </div>
                    <div class="box-content-row">
                        <label for="cardNumber">{{'number' | i18n}}</label>
                        <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number">
                    </div>
                    <div class="box-content-row">
                        <label for="cardBrand">{{'brand' | i18n}}</label>
                        <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
                            <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{o.name}}</option>
                        </select>
                    </div>
                    <div class="box-content-row">
                        <label for="cardExpMonth">{{'expirationMonth' | i18n}}</label>
                        <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
                            <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">{{o.name}}</option>
                        </select>
                    </div>
                    <div class="box-content-row">
                        <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
                        <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear"
                               placeholder="{{'ex' | i18n}} 2019">
                    </div>
                    <div class="box-content-row">
                        <label for="cardCode">{{'securityCode' | i18n}}</label>
                        <input id="cardCode" type="text" name="Card.Code" [(ngModel)]="cipher.card.code">
                    </div>
                </div>
                <!-- Identity -->
                <div *ngIf="cipher.type === cipherType.Identity">
                    <div class="box-content-row">
                        <label for="idTitle">{{'title' | i18n}}</label>
                        <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
                            <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">{{o.name}}</option>
                        </select>
                    </div>
                    <div class="box-content-row">
                        <label for="idFirstName">{{'firstName' | i18n}}</label>
                        <input id="idFirstName" type="text" name="Identity.FirstName"
                               [(ngModel)]="cipher.identity.firstName">
                    </div>
                    <div class="box-content-row">
                        <label for="idMiddleName">{{'middleName' | i18n}}</label>
                        <input id="idMiddleName" type="text" name="Identity.MiddleName"
                               [(ngModel)]="cipher.identity.middleName">
                    </div>
                    <div class="box-content-row">
                        <label for="idLastName">{{'lastName' | i18n}}</label>
                        <input id="idLastName" type="text" name="Identity.LastName"
                               [(ngModel)]="cipher.identity.lastName">
                    </div>
                    <div class="box-content-row">
                        <label for="idUsername">{{'username' | i18n}}</label>
                        <input id="idUsername" type="text" name="Identity.Username"
                               [(ngModel)]="cipher.identity.username">
                    </div>
                    <div class="box-content-row">
                        <label for="idCompany">{{'company' | i18n}}</label>
                        <input id="idCompany" type="text" name="Identity.Company"
                               [(ngModel)]="cipher.identity.company">
                    </div>
                    <div class="box-content-row">
                        <label for="idSsn">{{'ssn' | i18n}}</label>
                        <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn">
                    </div>
                    <div class="box-content-row">
                        <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
                        <input id="idPassportNumber" type="text" name="Identity.PassportNumber"
                               [(ngModel)]="cipher.identity.passportNumber">
                    </div>
                    <div class="box-content-row">
                        <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
                        <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber"
                               [(ngModel)]="cipher.identity.licenseNumber">
                    </div>
                    <div class="box-content-row">
                        <label for="idEmail">{{'email' | i18n}}</label>
                        <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email">
                    </div>
                    <div class="box-content-row">
                        <label for="idPhone">{{'phone' | i18n}}</label>
                        <input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
                    </div>
                    <div class="box-content-row">
                        <label for="idAddress1">{{'address1' | i18n}}</label>
                        <input id="idAddress1" type="text" name="Identity.Address1"
                               [(ngModel)]="cipher.identity.address1">
                    </div>
                    <div class="box-content-row">
                        <label for="idAddress2">{{'address2' | i18n}}</label>
                        <input id="idAddress2" type="text" name="Identity.Address2"
                               [(ngModel)]="cipher.identity.address2">
                    </div>
                    <div class="box-content-row">
                        <label for="idAddress3">{{'address3' | i18n}}</label>
                        <input id="idAddress3" type="text" name="Identity.Address3"
                               [(ngModel)]="cipher.identity.address3">
                    </div>
                    <div class="box-content-row">
                        <label for="idCity">{{'cityTown' | i18n}}</label>
                        <input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
                    </div>
                    <div class="box-content-row">
                        <label for="idState">{{'stateProvince' | i18n}}</label>
                        <input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
                    </div>
                    <div class="box-content-row">
                        <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
                        <input id="idPostalCode" type="text" name="Identity.PostalCode"
                               [(ngModel)]="cipher.identity.postalCode">
                    </div>
                    <div class="box-content-row">
                        <label for="idCountry">{{'country' | i18n}}</label>
                        <input id="idCountry" type="text" name="Identity.Country"
                               [(ngModel)]="cipher.identity.country">
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <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">
    <button (click)="save()" class="primary" title="{{'save' | i18n}}">
        <i class="fa fa-save fa-lg"></i> {{'save' | i18n}}
    </button>
    <button (click)="cancel()" title="{{'cancel' | i18n}}">
        {{'cancel' | i18n}}
    </button>
    <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}">
        <i class="fa fa-trash-o fa-lg"></i>
    </button>
</div>