2021-02-23 22:37:55 +01:00
|
|
|
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
|
|
|
<header>
|
|
|
|
<div class="left">
|
|
|
|
<button type="button" appBlurClick (click)="cancel()">{{ "cancel" | i18n }}</button>
|
|
|
|
</div>
|
2021-11-02 23:28:53 +01:00
|
|
|
<h1 class="center">
|
2021-02-23 22:37:55 +01:00
|
|
|
<span class="title">{{ title }}</span>
|
2021-11-02 23:28:53 +01:00
|
|
|
</h1>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="right">
|
2021-02-24 23:03:44 +01:00
|
|
|
<button type="submit" appBlurClick [disabled]="form.loading || disableSend">
|
2021-02-23 22:37:55 +01:00
|
|
|
<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">
|
2021-02-24 23:03:44 +01:00
|
|
|
<!-- Policy Banner -->
|
|
|
|
<app-callout type="warning" title="{{ 'sendDisabled' | i18n }}" *ngIf="disableSend">
|
|
|
|
{{ "sendDisabledWarning" | i18n }}
|
|
|
|
</app-callout>
|
2021-03-25 05:14:28 +01:00
|
|
|
<app-callout type="info" *ngIf="disableHideEmail && !disableSend">
|
|
|
|
{{ "sendOptionsPolicyInEffect" | i18n }}
|
|
|
|
</app-callout>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- File Warning -->
|
|
|
|
<app-callout
|
|
|
|
type="warning"
|
|
|
|
icon="fa fa-external-link fa-rotate-270 fa-fw"
|
|
|
|
[clickable]="true"
|
2021-02-24 23:03:44 +01:00
|
|
|
title="{{ 'sendFileCalloutHeader' | i18n }}"
|
|
|
|
*ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend"
|
|
|
|
(click)="popOutWindow()"
|
|
|
|
>
|
2021-04-09 00:45:42 +02:00
|
|
|
<div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<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>
|
2021-02-24 23:03:44 +01:00
|
|
|
<input
|
|
|
|
id="name"
|
|
|
|
type="text"
|
|
|
|
name="Name"
|
|
|
|
[(ngModel)]="send.name"
|
|
|
|
[readonly]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
/>
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box-footer">
|
|
|
|
{{ "sendNameDesc" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- 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 }}"
|
2021-02-24 23:03:44 +01:00
|
|
|
[value]="o.value"
|
|
|
|
(change)="typeChanged()"
|
|
|
|
[checked]="send.type === o.value"
|
|
|
|
[readonly]="disableSend"
|
|
|
|
/>
|
2021-02-23 22:37:55 +01:00
|
|
|
<label for="type_{{ o.value }}">
|
|
|
|
{{ o.name }}
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- 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>
|
2021-02-24 23:03:44 +01:00
|
|
|
<input type="file" id="file" name="file" required [readonly]="disableSend" />
|
2021-02-23 22:37:55 +01:00
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box-footer" *ngIf="showFileSelector">
|
|
|
|
{{ "sendFileDesc" | i18n }} {{ "maxFileSize" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- 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
|
2021-02-24 23:03:44 +01:00
|
|
|
id="text"
|
|
|
|
name="Text"
|
|
|
|
rows="6"
|
|
|
|
[(ngModel)]="send.text.text"
|
|
|
|
[readonly]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
></textarea>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="box-footer">
|
2021-12-19 18:26:57 +01:00
|
|
|
{{ "sendTextDesc" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-12-19 18:26:57 +01:00
|
|
|
<div class="box-content">
|
|
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
2021-07-15 17:10:58 +02:00
|
|
|
<label for="hideText">{{ "sendHideText" | i18n }}</label>
|
|
|
|
<input
|
|
|
|
id="hideText"
|
|
|
|
type="checkbox"
|
|
|
|
name="HideText"
|
|
|
|
[(ngModel)]="send.text.hidden"
|
|
|
|
[disabled]="disableSend"
|
2021-12-21 15:43:35 +01:00
|
|
|
/>
|
2021-07-15 17:10:58 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- Share -->
|
|
|
|
<div class="box">
|
2021-11-02 23:28:53 +01:00
|
|
|
<h2 class="box-header">
|
2021-02-23 22:37:55 +01:00
|
|
|
{{ "share" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</h2>
|
2021-02-23 22:37:55 +01:00
|
|
|
<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"
|
2021-02-24 23:03:44 +01:00
|
|
|
[(ngModel)]="copyLink"
|
|
|
|
[disabled]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
/>
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- Options -->
|
|
|
|
<div class="box">
|
2021-12-21 15:43:35 +01:00
|
|
|
<h2>
|
|
|
|
<button
|
2021-07-31 21:03:51 +02:00
|
|
|
type="button"
|
2021-02-23 22:37:55 +01:00
|
|
|
class="box-header-expandable"
|
2021-12-19 18:26:57 +01:00
|
|
|
(click)="showOptions = !showOptions"
|
|
|
|
[attr.aria-expanded]="showOptions"
|
2021-12-21 15:43:35 +01:00
|
|
|
>
|
2021-02-23 22:37:55 +01:00
|
|
|
{{ "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>
|
2021-12-21 15:43:35 +01:00
|
|
|
</h2>
|
2021-02-23 22:37:55 +01:00
|
|
|
</div>
|
|
|
|
<div [hidden]="!showOptions">
|
2021-03-01 16:42:06 +01:00
|
|
|
<app-send-efflux-dates
|
2021-02-23 22:37:55 +01:00
|
|
|
[initialDeletionDate]="send.deletionDate"
|
2021-07-15 17:10:58 +02:00
|
|
|
[initialExpirationDate]="send.expirationDate"
|
2021-02-23 22:37:55 +01:00
|
|
|
[editMode]="editMode"
|
2021-02-24 23:03:44 +01:00
|
|
|
[disabled]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
(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"
|
2021-02-24 23:03:44 +01:00
|
|
|
[(ngModel)]="send.maxAccessCount"
|
|
|
|
[readonly]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="box-footer">
|
|
|
|
{{ "maximumAccessCountDesc" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
</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>
|
2021-02-24 23:03:44 +01:00
|
|
|
<input
|
|
|
|
id="currentAccessCount"
|
|
|
|
readonly
|
|
|
|
type="text"
|
|
|
|
name="CurrentAccessCount"
|
|
|
|
[(ngModel)]="send.accessCount"
|
2021-02-23 22:37:55 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-03-25 05:34:21 +01:00
|
|
|
<!-- Password -->
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box">
|
|
|
|
<div class="box-content">
|
|
|
|
<div class="box-content-row box-content-row-flex" appBoxRow>
|
2021-03-25 05:34:21 +01:00
|
|
|
<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"
|
2021-02-24 23:03:44 +01:00
|
|
|
class="monospaced"
|
2021-03-25 05:34:21 +01:00
|
|
|
[(ngModel)]="password"
|
2021-02-24 23:03:44 +01:00
|
|
|
appInputVerbatim
|
2021-03-25 05:34:21 +01:00
|
|
|
[readonly]="disableSend"
|
2021-02-23 22:37:55 +01:00
|
|
|
/>
|
|
|
|
</div>
|
2021-02-24 23:03:44 +01:00
|
|
|
<div class="action-buttons" *ngIf="!disableSend">
|
2021-12-21 15:43:35 +01:00
|
|
|
<button
|
2021-02-24 23:03:44 +01:00
|
|
|
type="button"
|
2021-07-31 21:03:51 +02:00
|
|
|
class="row-btn"
|
|
|
|
appStopClick
|
2021-02-24 23:03:44 +01:00
|
|
|
appBlurClick
|
|
|
|
appA11yTitle="{{ 'toggleVisibility' | i18n }}"
|
|
|
|
(click)="togglePasswordVisible()"
|
|
|
|
[attr.aria-pressed]="showPassword"
|
2021-12-21 15:43:35 +01:00
|
|
|
>
|
2021-02-24 23:03:44 +01:00
|
|
|
<i
|
2021-02-23 22:37:55 +01:00
|
|
|
class="fa fa-lg"
|
2021-02-24 23:03:44 +01:00
|
|
|
[ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
|
|
|
|
aria-hidden="true"
|
2021-02-23 22:37:55 +01:00
|
|
|
></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-08-18 10:43:44 +02:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box-footer">
|
|
|
|
{{ "sendPasswordDesc" | i18n }}
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- Notes -->
|
|
|
|
<div class="box">
|
|
|
|
<div class="box-content">
|
2021-07-31 21:03:51 +02:00
|
|
|
<div class="box-content-row" appBoxRow>
|
|
|
|
<label for="notes">{{ "notes" | i18n }}</label>
|
2021-02-24 23:03:44 +01:00
|
|
|
<textarea
|
2021-12-21 15:43:35 +01:00
|
|
|
id="notes"
|
2021-07-31 21:03:51 +02:00
|
|
|
name="Notes"
|
2021-02-23 22:37:55 +01:00
|
|
|
rows="6"
|
|
|
|
[(ngModel)]="send.notes"
|
|
|
|
[readonly]="disableSend"
|
|
|
|
></textarea>
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box-footer">
|
|
|
|
{{ "sendNotesDesc" | i18n }}
|
|
|
|
</div>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-03-25 05:34:21 +01:00
|
|
|
<!-- Hide Email -->
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="box">
|
|
|
|
<div class="box-content">
|
|
|
|
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
|
|
|
<label for="hideEmail">{{ "hideEmail" | i18n }}</label>
|
2021-12-21 15:43:35 +01:00
|
|
|
<input
|
2021-03-25 05:34:21 +01:00
|
|
|
id="hideEmail"
|
2021-02-24 23:03:44 +01:00
|
|
|
type="checkbox"
|
2021-03-25 05:34:21 +01:00
|
|
|
name="HideEmail"
|
2021-02-24 23:03:44 +01:00
|
|
|
[(ngModel)]="send.hideEmail"
|
2021-03-25 05:34:21 +01:00
|
|
|
[disabled]="(disableHideEmail && !send.hideEmail) || disableSend"
|
2021-12-21 15:43:35 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- 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>
|
2021-12-21 15:43:35 +01:00
|
|
|
<input
|
2021-02-24 23:03:44 +01:00
|
|
|
id="disableSend"
|
|
|
|
type="checkbox"
|
|
|
|
name="DisableSend"
|
|
|
|
[(ngModel)]="send.disabled"
|
|
|
|
[disabled]="disableSend"
|
2021-12-21 15:43:35 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<!-- Delete -->
|
|
|
|
<div class="box list" *ngIf="editMode">
|
|
|
|
<div class="box-content single-line">
|
2021-12-21 15:43:35 +01:00
|
|
|
<button
|
2021-07-31 21:03:51 +02:00
|
|
|
type="button"
|
2021-02-23 22:37:55 +01:00
|
|
|
class="box-content-row"
|
2021-07-31 21:03:51 +02:00
|
|
|
appStopClick
|
|
|
|
appBlurClick
|
|
|
|
(click)="delete()"
|
2021-02-23 22:37:55 +01:00
|
|
|
[appApiAction]="deletePromise"
|
|
|
|
#deleteBtn
|
2021-12-21 15:43:35 +01:00
|
|
|
>
|
2021-02-23 22:37:55 +01:00
|
|
|
<div class="row-main text-danger">
|
2021-12-19 18:26:57 +01:00
|
|
|
<div class="icon text-danger" aria-hidden="true">
|
2021-02-23 22:37:55 +01:00
|
|
|
<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>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
<span>{{ "deleteSend" | i18n }}</span>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
2021-07-31 21:03:51 +02:00
|
|
|
</button>
|
2021-12-21 15:43:35 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-23 22:37:55 +01:00
|
|
|
</content>
|
|
|
|
</form>
|