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>
    <h1 class="center">
      <span class="title">{{ title }}</span>
    </h1>
    <div class="right">
      <button type="submit" appBlurClick [disabled]="form.loading">
        <span [hidden]="form.loading">{{ "save" | i18n }}</span>
        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
      </button>
    </div>
  </header>
  <content *ngIf="cipher">
    <app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
      {{ "personalOwnershipPolicyInEffect" | i18n }}
    </app-callout>
    <div class="box">
      <h2 class="box-header">
        {{ "itemInformation" | i18n }}
      </h2>
      <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="bwi bwi-lg bwi-check-circle"
                  [hidden]="checkPasswordBtn.loading"
                  aria-hidden="true"
                ></i>
                <i
                  class="bwi bwi-lg bwi-spinner bwi-spin"
                  [hidden]="!checkPasswordBtn.loading"
                  aria-hidden="true"
                ></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="togglePassword()"
                *ngIf="cipher.viewPassword"
                [attr.aria-pressed]="showPassword"
              >
                <i
                  class="bwi bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                ></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'generatePassword' | i18n }}"
                (click)="generatePassword()"
                *ngIf="cipher.viewPassword"
              >
                <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
              </button>
            </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 box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="cardNumber">{{ "number" | i18n }}</label>
              <input
                id="cardNumber"
                class="monospaced"
                type="{{ showCardNumber ? 'text' : 'password' }}"
                name="Card.Number"
                [(ngModel)]="cipher.card.number"
                appInputVerbatim
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="toggleCardNumber()"
                [attr.aria-pressed]="showCardNumber"
              >
                <i
                  class="bwi bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
                ></i>
              </button>
            </div>
          </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">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="toggleCardCode()"
                [attr.aria-pressed]="showCardCode"
              >
                <i
                  class="bwi bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
                ></i>
              </button>
            </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"
          >
            <button
              type="button"
              appStopClick
              (click)="removeUri(u)"
              appA11yTitle="{{ 'remove' | i18n }}"
            >
              <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
            </button>
            <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">
              <button
                type="button"
                *ngIf="currentUris && currentUris.length"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
                (click)="toggleUriInput(u)"
              >
                <i aria-hidden="true" class="bwi bwi-lg bwi-list"></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleOptions' | i18n }}"
                (click)="toggleUriOptions(u)"
              >
                <i class="bwi bwi-lg bwi-cog" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </ng-container>
        <button
          type="button"
          appStopClick
          appBlurClick
          (click)="addUri()"
          class="box-content-row box-content-row-newmulti"
        >
          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
        </button>
      </div>
    </div>
    <div class="box" *ngIf="showAutoFillOnPageLoadOptions">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="autofillOnPageLoad">{{ "itemAutoFillOnPageLoad" | i18n }} </label>
          <select
            id="autofillOnPageLoad"
            name="AutofillOnPageLoad"
            [(ngModel)]="cipher.login.autofillOnPageLoad"
          >
            <option *ngFor="let o of autofillOnPageLoadOptions" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
      </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>
        <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="canUseReprompt">
          <label for="passwordPrompt">
            {{ "passwordPrompt" | i18n }}
            <a
              target="_blank"
              rel="noopener"
              appA11yTitle="{{ 'learnMore' | i18n }}"
              href="https://bitwarden.com/help/article/managing-items/#protect-individual-items"
            >
              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
            </a>
          </label>
          <input
            id="passwordPrompt"
            type="checkbox"
            name="PasswordPrompt"
            [ngModel]="reprompt"
            (change)="repromptChanged()"
          />
        </div>
        <button
          type="button"
          class="box-content-row box-content-row-flex text-default"
          appStopClick
          appBlurClick
          (click)="attachments()"
          *ngIf="editMode && showAttachments && !cloneMode"
        >
          <div class="row-main">{{ "attachments" | i18n }}</div>
          <i
            class="bwi bwi-external-link bwi-lg bwi-fw"
            aria-hidden="true"
            *ngIf="openAttachmentsInPopup"
          ></i>
          <i
            class="bwi bwi-angle-right row-sub-icon"
            aria-hidden="true"
            *ngIf="!openAttachmentsInPopup"
          ></i>
        </button>
        <button
          type="button"
          class="box-content-row box-content-row-flex text-default"
          appStopClick
          appBlurClick
          (click)="editCollections()"
          *ngIf="editMode && cipher.organizationId && !cloneMode"
        >
          <div class="row-main">{{ "collections" | i18n }}</div>
          <i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="box">
      <h2 class="box-header">
        <label for="notes">{{ "notes" | i18n }}</label>
      </h2>
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <textarea id="notes" name="Notes" rows="6" [(ngModel)]="cipher.notes"></textarea>
        </div>
      </div>
    </div>
    <app-vault-add-edit-custom-fields
      [cipher]="cipher"
      [thisCipherType]="cipher.type"
      [editMode]="editMode"
    >
    </app-vault-add-edit-custom-fields>
    <div class="box" *ngIf="allowOwnershipOptions()">
      <h2 class="box-header">
        {{ "ownership" | i18n }}
      </h2>
      <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">
      <h2 class="box-header">
        {{ "collections" | i18n }}
      </h2>
      <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">
        <button
          type="button"
          class="box-content-row"
          appStopClick
          appBlurClick
          (click)="delete()"
          [appApiAction]="deletePromise"
          #deleteBtn
        >
          <div class="row-main text-danger">
            <div class="icon text-danger" aria-hidden="true">
              <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="deleteBtn.loading"></i>
              <i class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw" [hidden]="!deleteBtn.loading"></i>
            </div>
            <span>{{ "deleteItem" | i18n }}</span>
          </div>
        </button>
      </div>
    </div>
  </content>
</form>