clients/apps/browser/src/tools/popup/send/send-add-edit.component.html

<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" [formGroup]="formGroup">
  <header>
    <div class="left">
      <button type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
    </div>
    <h1 class="center">
      <span class="title">{{ title }}</span>
    </h1>
    <div class="right">
      <button type="submit">
        <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>
  <main tabindex="-1" *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 -->
    <tools-file-popout-callout *ngIf="type === sendType.File && !disableSend" />
    <!-- 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"
            formControlName="name"
            aria-describedby="nameHelp"
            [readonly]="disableSend"
          />
        </div>
      </div>
      <div id="nameHelp" 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"
              formControlName="type"
              id="type_{{ o.value }}"
              [value]="o.value"
              [readonly]="disableSend"
            />
            <label for="type_{{ o.value }}">
              {{ o.name }}
            </label>
          </div>
        </div>
      </div>
    </div>
    <!-- File -->
    <div class="box" *ngIf="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"
            formControlName="file"
            aria-describedby="fileHelp"
            [readonly]="disableSend"
          />
        </div>
      </div>
      <div id="fileHelp" class="box-footer" *ngIf="showFileSelector">
        {{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
      </div>
    </div>
    <!-- Text -->
    <div class="box" *ngIf="type === sendType.Text">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="text">{{ "sendTypeText" | i18n }}</label>
          <textarea
            id="text"
            formControlName="text"
            aria-describedby="textHelp"
            rows="6"
          ></textarea>
        </div>
      </div>
      <div id="textHelp" 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" formControlName="textHidden" />
        </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" formControlName="copyLink" />
        </div>
      </div>
    </div>
    <!-- Options -->
    <div class="box">
      <h2>
        <button
          type="button"
          class="box-header-expandable"
          (click)="showOptions = !showOptions"
          [attr.aria-expanded]="showOptions"
        >
          <i *ngIf="!showOptions" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
          <i *ngIf="showOptions" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
          {{ "options" | i18n }}
        </button>
      </h2>
    </div>
    <div [hidden]="!showOptions">
      <!-- Deletion Date -->
      <div class="box">
        <div class="box-content">
          <ng-container *ngIf="!editMode">
            <div class="box-content-row" appBoxRow>
              <label for="deletionDate">{{ "deletionDate" | i18n }}</label>
              <select
                id="deletionDate"
                name="DeletionDateSelect"
                aria-describedby="deletionDateHelp"
                formControlName="selectedDeletionDatePreset"
                required
              >
                <option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">
                  {{ o.name }}
                </option>
              </select>
            </div>
            <div
              class="box-content-row"
              appBoxRow
              *ngIf="formGroup.controls['selectedDeletionDatePreset'].value === 0"
            >
              <input
                id="deletionDateCustom"
                type="datetime-local"
                name="DeletionDate"
                aria-describedby="deletionDateHelp"
                formControlName="defaultDeletionDateTime"
                required
                placeholder="MM/DD/YYYY HH:MM AM/PM"
              />
            </div>
          </ng-container>
          <div class="box-content-row" appBoxRow *ngIf="editMode">
            <label for="deletionDate">{{ "deletionDate" | i18n }}</label>
            <input
              id="deletionDateCustom"
              type="datetime-local"
              name="DeletionDate"
              aria-describedby="deletionDateHelp"
              formControlName="defaultDeletionDateTime"
              required
              placeholder="MM/DD/YYYY HH:MM AM/PM"
            />
          </div>
        </div>
        <div id="deletionDateHelp" class="box-footer">
          {{ "deletionDateDesc" | i18n }}
          <ng-container
            *ngIf="
              !inPopout &&
              isFirefox &&
              (editMode ||
                (formGroup.controls['selectedDeletionDatePreset'].value === 0 && !editMode))
            "
          >
            <br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
            <a (click)="popOutWindow()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
            {{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
          </ng-container>
        </div>
      </div>

      <!-- Expiration Date -->
      <div class="box">
        <div class="box-content">
          <ng-container *ngIf="!editMode">
            <div class="box-content-row" *ngIf="!editMode" appBoxRow>
              <label for="editExpirationDate">{{ "expirationDate" | i18n }}</label>
              <select
                id="expirationDate"
                name="ExpirationDateSelect"
                aria-describedby="expirationDateHelp"
                formControlName="selectedExpirationDatePreset"
                required
              >
                <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">
                  {{ o.name }}
                </option>
              </select>
            </div>
            <div
              class="box-content-row"
              *ngIf="formGroup.controls['selectedExpirationDatePreset'].value === 0"
              appBoxRow
            >
              <input
                id="expirationDateCustom"
                type="datetime-local"
                name="ExpirationDate"
                aria-describedby="expirationDateHelp"
                formControlName="defaultExpirationDateTime"
                required
                placeholder="MM/DD/YYYY HH:MM AM/PM"
                [readOnly]="disableSend"
              />
            </div>
          </ng-container>
          <div class="box-content-row" *ngIf="editMode" appBoxRow>
            <div class="flex-label">
              <label>{{ "expirationDate" | i18n }}</label>
              <button type="button" *ngIf="!disableSend" appStopClick (click)="clearExpiration()">
                {{ "clear" | i18n }}
              </button>
            </div>
            <input
              id="expirationDateCustom"
              type="datetime-local"
              name="ExpirationDate"
              aria-describedby="expirationDateHelp"
              formControlName="defaultExpirationDateTime"
              required
              placeholder="MM/DD/YYYY HH:MM AM/PM"
              [readOnly]="disableSend"
            />
          </div>
        </div>
        <div id="expirationDateHelp" class="box-footer">
          {{ "expirationDateDesc" | i18n }}
          <ng-container
            *ngIf="
              !inPopout &&
              isFirefox &&
              (editMode ||
                (formGroup.controls['selectedExpirationDatePreset'].value === 0 && !editMode))
            "
          >
            <br />{{ "sendFirefoxCustomDatePopoutMessage1" | i18n }}
            <a (click)="popOutWindow()">{{ "sendFirefoxCustomDatePopoutMessage2" | i18n }}</a>
            {{ "sendFirefoxCustomDatePopoutMessage3" | i18n }}
          </ng-container>
        </div>
      </div>
      <!-- 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"
              aria-describedby="maximumAccessCountHelp"
              formControlName="maxAccessCount"
            />
          </div>
        </div>
        <div id="maximumAccessCountHelp" 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"
              type="text"
              name="CurrentAccessCount"
              formControlName="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"
                aria-describedby="passwordHelp"
                class="monospaced"
                formControlName="password"
                appInputVerbatim
              />
            </div>
            <div class="action-buttons" *ngIf="!disableSend">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="togglePasswordVisible()"
                [attr.aria-pressed]="showPassword"
              >
                <i
                  class="bwi bwi-lg"
                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                  aria-hidden="true"
                ></i>
              </button>
            </div>
          </div>
        </div>
        <div id="passwordHelp" 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"
              aria-describedby="notesHelp"
              rows="6"
              formControlName="notes"
            ></textarea>
          </div>
        </div>
        <div id="notesHelp" 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" formControlName="hideEmail" />
          </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" formControlName="disabled" />
          </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
          (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]="$any(deleteBtn).loading"></i>
              <i
                class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
                [hidden]="!$any(deleteBtn).loading"
              ></i>
            </div>
            <span>{{ "deleteSend" | i18n }}</span>
          </div>
        </button>
      </div>
    </div>
  </main>
</form>