bitwarden-estensione-browser/src/popup/send/send-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 || disableSend">
        <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="send">
    <!-- Policy Banner -->
    <app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
      {{ "sendDisabledWarning" | i18n }}
    </app-callout>
    <app-callout type="info" *ngIf="disableHideEmail && !disableSend">
      {{ "sendOptionsPolicyInEffect" | i18n }}
    </app-callout>
    <!-- File Warning -->
    <app-callout
      type="warning"
      icon="fa fa-external-link fa-rotate-270 fa-fw"
      [clickable]="true"
      title="{{ 'sendFileCalloutHeader' | i18n }}"
      *ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend"
      (click)="popOutWindow()"
    >
      <div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
      <div *ngIf="showFirefoxFileWarning">{{ "sendFirefoxFileWarning" | i18n }}</div>
      <div *ngIf="showSafariFileWarning">{{ "sendSafariFileWarning" | i18n }}</div>
    </app-callout>
    <!-- Name -->
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="name">{{ "name" | i18n }}</label>
          <input
            id="name"
            type="text"
            name="Name"
            [(ngModel)]="send.name"
            [readonly]="disableSend"
          />
        </div>
      </div>
      <div class="box-footer">
        {{ "sendNameDesc" | i18n }}
      </div>
    </div>
    <!-- Type Options -->
    <div class="box" *ngIf="!editMode">
      <div class="box-content no-hover">
        <div class="box-content-row">
          <label for="sendTypeOptions">{{ "sendTypeHeader" | i18n }}</label>
          <div
            class="radio-group text-default"
            appBoxRow
            name="SendTypeOptions"
            *ngFor="let o of typeOptions"
          >
            <input
              type="radio"
              [(ngModel)]="send.type"
              name="Type_{{ o.value }}"
              id="type_{{ o.value }}"
              [value]="o.value"
              (change)="typeChanged()"
              [checked]="send.type === o.value"
              [readonly]="disableSend"
            />
            <label for="type_{{ o.value }}">
              {{ o.name }}
            </label>
          </div>
        </div>
      </div>
    </div>
    <!-- File -->
    <div class="box" *ngIf="send.type === sendType.File && (editMode || showFileSelector)">
      <div class="box-content no-hover">
        <div class="box-content-row" *ngIf="editMode">
          <label for="file">{{ "file" | i18n }}</label>
          <div class="row-main">{{ send.file.fileName }} ({{ send.file.sizeName }})</div>
        </div>
        <div class="box-content-row" *ngIf="showFileSelector">
          <label for="file">{{ "file" | i18n }}</label>
          <input type="file" id="file" name="file" required [readonly]="disableSend" />
        </div>
      </div>
      <div class="box-footer" *ngIf="showFileSelector">
        {{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
      </div>
    </div>
    <!-- Text -->
    <div class="box" *ngIf="send.type === sendType.Text">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="text">{{ "sendTypeText" | i18n }}</label>
          <textarea
            id="text"
            name="Text"
            rows="6"
            [(ngModel)]="send.text.text"
            [readonly]="disableSend"
          ></textarea>
        </div>
      </div>
      <div class="box-footer">
        {{ "sendTextDesc" | i18n }}
      </div>
      <div class="box-content">
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="hideText">{{ "sendHideText" | i18n }}</label>
          <input
            id="hideText"
            type="checkbox"
            name="HideText"
            [(ngModel)]="send.text.hidden"
            [disabled]="disableSend"
          />
        </div>
      </div>
    </div>
    <!-- Share -->
    <div class="box">
      <h2 class="box-header">
        {{ "share" | i18n }}
      </h2>
      <div class="box-content">
        <!-- Copy Link on Save -->
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="copyOnSave">{{ "sendShareDesc" | i18n }}</label>
          <input
            id="copyOnSave"
            type="checkbox"
            name="CopyOnSave"
            [(ngModel)]="copyLink"
            [disabled]="disableSend"
          />
        </div>
      </div>
    </div>
    <!-- Options -->
    <div class="box">
      <h2>
        <button
          type="button"
          class="box-header-expandable"
          (click)="showOptions = !showOptions"
          [attr.aria-expanded]="showOptions"
        >
          {{ "options" | i18n }}
          <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
          <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
        </button>
      </h2>
    </div>
    <div [hidden]="!showOptions">
      <app-send-efflux-dates
        [initialDeletionDate]="send.deletionDate"
        [initialExpirationDate]="send.expirationDate"
        [editMode]="editMode"
        [disabled]="disableSend"
        (datesChanged)="setDates($event)"
        (popOutWindow)="popOutWindow()"
      >
      </app-send-efflux-dates>
      <!-- Maximum Access Count -->
      <div class="box">
        <div class="box-content">
          <div class="box-content-row" appBoxRow>
            <label for="maximumAccessCount">{{ "maximumAccessCount" | i18n }}</label>
            <input
              id="maximumAccessCount"
              min="1"
              type="number"
              name="MaximumAccessCount"
              [(ngModel)]="send.maxAccessCount"
              [readonly]="disableSend"
            />
          </div>
        </div>
        <div class="box-footer">
          {{ "maximumAccessCountDesc" | i18n }}
        </div>
      </div>
      <!-- Current Access Count -->
      <div class="box" *ngIf="editMode">
        <div class="box-content">
          <div class="box-content-row" appBoxRow>
            <label for="currentAccessCount">{{ "currentAccessCount" | i18n }}</label>
            <input
              id="currentAccessCount"
              readonly
              type="text"
              name="CurrentAccessCount"
              [(ngModel)]="send.accessCount"
            />
          </div>
        </div>
      </div>
      <!-- Password -->
      <div class="box">
        <div class="box-content">
          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="password" *ngIf="hasPassword">{{ "newPassword" | i18n }}</label>
              <label for="password" *ngIf="!hasPassword">{{ "password" | i18n }}</label>
              <input
                id="password"
                type="{{ showPassword ? 'text' : 'password' }}"
                name="Password"
                class="monospaced"
                [(ngModel)]="password"
                appInputVerbatim
                [readonly]="disableSend"
              />
            </div>
            <div class="action-buttons" *ngIf="!disableSend">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appBlurClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="togglePasswordVisible()"
                [attr.aria-pressed]="showPassword"
              >
                <i
                  class="fa fa-lg"
                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
                  aria-hidden="true"
                ></i>
              </button>
            </div>
          </div>
        </div>
        <div class="box-footer">
          {{ "sendPasswordDesc" | i18n }}
        </div>
      </div>
      <!-- Notes -->
      <div class="box">
        <div class="box-content">
          <div class="box-content-row" appBoxRow>
            <label for="notes">{{ "notes" | i18n }}</label>
            <textarea
              id="notes"
              name="Notes"
              rows="6"
              [(ngModel)]="send.notes"
              [readonly]="disableSend"
            ></textarea>
          </div>
        </div>
        <div class="box-footer">
          {{ "sendNotesDesc" | i18n }}
        </div>
      </div>
      <!-- Hide Email -->
      <div class="box">
        <div class="box-content">
          <div class="box-content-row box-content-row-checkbox" appBoxRow>
            <label for="hideEmail">{{ "hideEmail" | i18n }}</label>
            <input
              id="hideEmail"
              type="checkbox"
              name="HideEmail"
              [(ngModel)]="send.hideEmail"
              [disabled]="(disableHideEmail && !send.hideEmail) || disableSend"
            />
          </div>
        </div>
      </div>
      <!-- Disable Send -->
      <div class="box">
        <div class="box-content">
          <div class="box-content-row box-content-row-checkbox" appBoxRow>
            <label for="disableSend">{{ "sendDisableDesc" | i18n }}</label>
            <input
              id="disableSend"
              type="checkbox"
              name="DisableSend"
              [(ngModel)]="send.disabled"
              [disabled]="disableSend"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- Delete -->
    <div class="box list" *ngIf="editMode">
      <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="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>{{ "deleteSend" | i18n }}</span>
          </div>
        </button>
      </div>
    </div>
  </content>
</form>