bitwarden-estensione-browser/src/popup/vault/add-edit.component.html

<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
    <header>
        <div class="left">
            <button type="button" appBlurClick (click)="cancel()">{{'cancel' | i18n}}</button>
        </div>
        <div class="center">
            <span class="title">{{title}}</span>
        </div>
        <div class="right">
            <button type="submit" appBlurClick [disabled]="form.loading">
                <span [hidden]="form.loading">{{'save' | i18n}}</span>
                <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
            </button>
        </div>
    </header>
    <content *ngIf="cipher">
        <div class="box">
            <div class="box-header">
                {{'itemInformation' | i18n}}
            </div>
            <div class="box-content">
                <div class="box-content-row" *ngIf="!editMode" appBoxRow>
                    <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" appBoxRow>
                    <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" appBoxRow>
                        <label for="loginUsername">{{'username' | i18n}}</label>
                        <input id="loginUsername" type="text" name="Login.Username" [(ngModel)]="cipher.login.username"
                            inputmode="email" appInputVerbatim>
                    </div>
                    <div class="box-content-row box-content-row-flex" appBoxRow>
                        <div class="row-main">
                            <label for="loginPassword">{{'password' | i18n}}</label>
                            <input id="loginPassword" class="monospaced" type="{{showPassword ? 'text' : 'password'}}"
                                name="Login.Password" [(ngModel)]="cipher.login.password" appInputVerbatim
                                [disabled]="!cipher.viewPassword">
                        </div>
                        <div class="action-buttons">
                            <button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
                                appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
                                [appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading"
                                *ngIf="cipher.viewPassword">
                                <i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"
                                    aria-hidden="true"></i>
                                <i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
                                    aria-hidden="true"></i>
                            </button>
                            <a class="row-btn" href="#" appStopClick appBlurClick
                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
                                *ngIf="cipher.viewPassword">
                                <i class="fa fa-lg" aria-hidden="true"
                                    [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                            </a>
                            <a class="row-btn" href="#" appStopClick appBlurClick
                                appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()"
                                *ngIf="cipher.viewPassword">
                                <i class="fa fa-lg fa-refresh" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="loginTotp">{{'authenticatorKeyTotp' | i18n}}</label>
                        <input id="loginTotp" type="{{cipher.viewPassword ? 'text' : 'password'}}" name="Login.Totp"
                            class="monospaced" [(ngModel)]="cipher.login.totp" appInputVerbatim
                            [disabled]="!cipher.viewPassword">
                    </div>
                </div>
                <!-- Card -->
                <div *ngIf="cipher.type === cipherType.Card">
                    <div class="box-content-row" appBoxRow>
                        <label for="cardCardholderName">{{'cardholderName' | i18n}}</label>
                        <input id="cardCardholderName" type="text" name="Card.CardCardholderName"
                            [(ngModel)]="cipher.card.cardholderName">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="cardNumber">{{'number' | i18n}}</label>
                        <input id="cardNumber" type="text" name="Card.Number" [(ngModel)]="cipher.card.number"
                            appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <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" appBoxRow>
                        <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" appBoxRow>
                        <label for="cardExpYear">{{'expirationYear' | i18n}}</label>
                        <input id="cardExpYear" type="text" name="Card.ExpYear" [(ngModel)]="cipher.card.expYear"
                            placeholder="{{'ex' | i18n}} {{currentDate | date: 'yyyy'}}">
                    </div>
                    <div class="box-content-row box-content-row-flex" appBoxRow>
                        <div class="row-main">
                            <label for="cardCode">{{'securityCode' | i18n}}</label>
                            <input id="cardCode" class="monospaced" type="{{showCardCode ? 'text' : 'password'}}"
                                name="Card.Code" [(ngModel)]="cipher.card.code" appInputVerbatim>
                        </div>
                        <div class="action-buttons">
                            <a class="row-btn" href="#" appStopClick appBlurClick
                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
                                <i class="fa fa-lg" aria-hidden="true"
                                    [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- Identity -->
                <div *ngIf="cipher.type === cipherType.Identity">
                    <div class="box-content-row" appBoxRow>
                        <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" appBoxRow>
                        <label for="idFirstName">{{'firstName' | i18n}}</label>
                        <input id="idFirstName" type="text" name="Identity.FirstName"
                            [(ngModel)]="cipher.identity.firstName">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idMiddleName">{{'middleName' | i18n}}</label>
                        <input id="idMiddleName" type="text" name="Identity.MiddleName"
                            [(ngModel)]="cipher.identity.middleName">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idLastName">{{'lastName' | i18n}}</label>
                        <input id="idLastName" type="text" name="Identity.LastName"
                            [(ngModel)]="cipher.identity.lastName">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idUsername">{{'username' | i18n}}</label>
                        <input id="idUsername" type="text" name="Identity.Username"
                            [(ngModel)]="cipher.identity.username" appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idCompany">{{'company' | i18n}}</label>
                        <input id="idCompany" type="text" name="Identity.Company" [(ngModel)]="cipher.identity.company">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idSsn">{{'ssn' | i18n}}</label>
                        <input id="idSsn" type="text" name="Identity.SSN" [(ngModel)]="cipher.identity.ssn"
                            appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idPassportNumber">{{'passportNumber' | i18n}}</label>
                        <input id="idPassportNumber" type="text" name="Identity.PassportNumber"
                            [(ngModel)]="cipher.identity.passportNumber" appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idLicenseNumber">{{'licenseNumber' | i18n}}</label>
                        <input id="idLicenseNumber" type="text" name="Identity.LicenseNumber"
                            [(ngModel)]="cipher.identity.licenseNumber" appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idEmail">{{'email' | i18n}}</label>
                        <input id="idEmail" type="text" name="Identity.Email" [(ngModel)]="cipher.identity.email"
                            appInputVerbatim>
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idPhone">{{'phone' | i18n}}</label>
                        <input id="idPhone" type="text" name="Identity.Phone" [(ngModel)]="cipher.identity.phone">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idAddress1">{{'address1' | i18n}}</label>
                        <input id="idAddress1" type="text" name="Identity.Address1"
                            [(ngModel)]="cipher.identity.address1">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idAddress2">{{'address2' | i18n}}</label>
                        <input id="idAddress2" type="text" name="Identity.Address2"
                            [(ngModel)]="cipher.identity.address2">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idAddress3">{{'address3' | i18n}}</label>
                        <input id="idAddress3" type="text" name="Identity.Address3"
                            [(ngModel)]="cipher.identity.address3">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idCity">{{'cityTown' | i18n}}</label>
                        <input id="idCity" type="text" name="Identity.City" [(ngModel)]="cipher.identity.city">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idState">{{'stateProvince' | i18n}}</label>
                        <input id="idState" type="text" name="Identity.State" [(ngModel)]="cipher.identity.state">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <label for="idPostalCode">{{'zipPostalCode' | i18n}}</label>
                        <input id="idPostalCode" type="text" name="Identity.PostalCode"
                            [(ngModel)]="cipher.identity.postalCode">
                    </div>
                    <div class="box-content-row" appBoxRow>
                        <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" *ngIf="cipher.type === cipherType.Login">
            <div class="box-content">
                <ng-container *ngIf="cipher.login.hasUris">
                    <div class="box-content-row box-content-row-multi" appBoxRow
                        *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
                        <a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
                            <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
                        </a>
                        <div class="row-main">
                            <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                            <input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
                                [hidden]="u.showUriOptionsInput === true"
                                placeholder="{{'ex' | i18n}} https://google.com" inputmode="url" appInputVerbatim>
                            <label for="loginUriMatch{{i}}" class="sr-only">
                                {{'currentUri' | i18n}} {{(i + 1)}}
                            </label>
                            <select *ngIf="currentUris && currentUris.length" id="currentUris{{i}}"
                                name="Login.Uris[{{i}}].CurrentUris" [(ngModel)]="u.uri" [hidden]="!u.showCurrentUris">
                                <option [ngValue]="null">-- {{'select' | i18n}} --</option>
                                <option *ngFor="let u of currentUris" [ngValue]="u">{{u}}</option>
                            </select>
                            <label for="loginUriMatch{{i}}" class="sr-only">
                                {{'matchDetection' | i18n}} {{(i + 1)}}
                            </label>
                            <select id="loginUriMatch{{i}}" name="Login.Uris[{{i}}].Match" [(ngModel)]="u.match"
                                [hidden]="u.showOptions === false || (u.showOptions == null && u.match == null)"
                                (change)="loginUriMatchChanged(u)">
                                <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
                            </select>
                        </div>
                        <div class="action-buttons">
                            <a *ngIf="currentUris && currentUris.length" class="row-btn" href="#" appStopClick
                                appBlurClick appA11yTitle="{{'toggleCurrentUris' | i18n}}" (click)="toggleUriInput(u)">
                                <i aria-hidden="true" class="fa fa-lg fa-list"></i>
                            </a>
                            <a class="row-btn" href="#" appStopClick appBlurClick
                                appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
                                <i class="fa fa-lg fa-cog" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </ng-container>
                <a href="#" appStopClick appBlurClick (click)="addUri()"
                    class="box-content-row box-content-row-newmulti">
                    <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newUri' | i18n}}
                </a>
            </div>
        </div>
        <div class="box">
            <div class="box-content">
                <div class="box-content-row" appBoxRow>
                    <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" appBoxRow>
                    <label for="favorite">{{'favorite' | i18n}}</label>
                    <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
                </div>
                <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                    (click)="attachments()" *ngIf="editMode && showAttachments && !cloneMode">
                    <div class="row-main">{{'attachments' | i18n}}</div>
                    <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
                </a>
                <a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
                    (click)="editCollections()" *ngIf="editMode && cipher.organizationId && !cloneMode">
                    <div class="row-main">{{'collections' | i18n}}</div>
                    <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
                </a>
            </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" appBoxRow>
                    <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-header">
                {{'customFields' | i18n}}
            </div>
            <div class="box-content">
                <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
                    <div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
                        *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
                        [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
                        <a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
                            <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
                        </a>
                        <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
                        <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
                        <div class="row-main">
                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
                                class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
                            <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
                                *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
                            <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
                                name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
                                *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}"
                                [disabled]="!cipher.viewPassword && !f.newField">
                        </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 class="action-buttons"
                            *ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
                            <a class="row-btn" href="#" appStopClick appBlurClick
                                appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
                                <i class="fa fa-lg" aria-hidden="true"
                                    [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
                            </a>
                        </div>
                        <div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
                <div class="box-content-row box-content-row-newmulti" appBoxRow>
                    <a href="#" appStopClick (click)="addField()">
                        <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
                    </a>
                    <label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
                    <select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
                        <option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="box" *ngIf="(!editMode || cloneMode) && ownershipOptions && ownershipOptions.length > 1">
            <div class="box-header">
                {{'ownership' | i18n}}
            </div>
            <div class="box-content">
                <div class="box-content-row" appBoxRow>
                    <label for="organizationId">{{'whoOwnsThisItem' | i18n}}</label>
                    <select id="organizationId" class="form-control" name="OrganizationId"
                        [(ngModel)]="cipher.organizationId" (change)="organizationChanged()">
                        <option *ngFor="let o of ownershipOptions" [ngValue]="o.value">{{o.name}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="box" *ngIf="(!editMode || cloneMode )&& cipher.organizationId">
            <div class="box-header">
                {{'collections' | i18n}}
            </div>
            <div class="box-content" *ngIf="!collections || !collections.length">
                <div class="box-content-row padded no-hover">
                    {{'noCollectionsInList' | i18n}}
                </div>
            </div>
            <div class="box-content" *ngIf="collections && collections.length">
                <div class="box-content-row box-content-row-checkbox" *ngFor="let c of collections; let i = index"
                    appBoxRow>
                    <label for="collection_{{i}}">{{c.name}}</label>
                    <input id="collection_{{i}}" type="checkbox" [(ngModel)]="c.checked"
                        name="Collection[{{i}}].Checked">
                </div>
            </div>
        </div>
        <div class="box list" *ngIf="editMode && !cloneMode">
            <div class="box-content single-line">
                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()"
                    *ngIf="!cipher.organizationId">
                    <div class="row-main text-primary">
                        <div class="icon text-primary" aria-hidden="true">
                            <i class="fa fa-share-alt fa-lg fa-fw"></i>
                        </div>
                        <span>{{'shareItem' | i18n}}</span>
                    </div>
                </a>
                <a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
                    [appApiAction]="deletePromise" #deleteBtn>
                    <div class="row-main text-danger">
                        <div class="icon text-danger" aria-hidden="true">
                            <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>
                        </div>
                        <span>{{'deleteItem' | i18n}}</span>
                    </div>
                </a>
            </div>
        </div>
    </content>
</form>