bitwarden-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>