mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-23 11:56:00 +01:00
ui updates for send add/edit component (#768)
* ui updates for send add/edit component * move messaging.service import
This commit is contained in:
Kyle Spearrin
GitHub
parent
4d2d686078
commit
862874c2ae
@ -12,7 +12,8 @@
|
||||
<div class="row" *ngIf="!editMode">
|
||||
<div class="col-6 form-group">
|
||||
<label for="type">{{'whatTypeOfSend' | i18n}}</label>
|
||||
<select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus>
|
||||
<select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus
|
||||
(change)='typeChanged()'>
|
||||
<option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -34,7 +35,7 @@
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" [(ngModel)]="send.text.hidden"
|
||||
id="text-hidden" name="Text.Hidden">
|
||||
<label class="form-check-label" for="text-hidden">{{'cfTypeHidden' | i18n}}</label>
|
||||
<label class="form-check-label" for="text-hidden">{{'textHiddenByDefault' | i18n}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
@ -62,13 +63,14 @@
|
||||
<option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
<input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="DeletionDate" [(ngModel)]="deletionDate" required
|
||||
*ngIf="deletionDateSelect === 0">
|
||||
name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
|
||||
placeholder="MM/DD/YYYY HH:MM AM/PM">
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
|
||||
[(ngModel)]="deletionDate" required>
|
||||
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
|
||||
</div>
|
||||
<div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="col-6 form-group">
|
||||
<div class="d-flex">
|
||||
@ -85,12 +87,13 @@
|
||||
</select>
|
||||
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="ExpirationDate" [(ngModel)]="expirationDate" required
|
||||
*ngIf="expirationDateSelect === 0">
|
||||
*ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM">
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
|
||||
[(ngModel)]="expirationDate">
|
||||
[(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM">
|
||||
</div>
|
||||
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -98,6 +101,7 @@
|
||||
<label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
|
||||
<input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
|
||||
[(ngModel)]="send.maxAccessCount" min="1">
|
||||
<div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="col-6 form-group" *ngIf="editMode">
|
||||
<label for="accessCount">{{'currentAccessCount' | i18n}}</label>
|
||||
@ -111,11 +115,13 @@
|
||||
<label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
|
||||
<input id="password" class="form-control" type="password" name="Password"
|
||||
[(ngModel)]="password">
|
||||
<div class="form-text text-muted small">{{'sendPasswordDesc' | i18n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="notes">{{'notes' | i18n}}</label>
|
||||
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="send.notes" class="form-control"></textarea>
|
||||
<div class="form-text text-muted small">{{'sendNotesDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
@ -124,6 +130,7 @@
|
||||
<label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="mt-5" *ngIf="link">{{'share' | i18n}}</h3>
|
||||
<div class="form-group" *ngIf="link">
|
||||
<label for="link">{{'sendLink' | i18n}}</label>
|
||||
<input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
|
||||
|
||||
@ -10,11 +10,12 @@ import { Component } from '@angular/core';
|
||||
|
||||
import { SendType } from 'jslib/enums/sendType';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { EnvironmentService } from 'jslib/abstractions/environment.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { MessagingService } from 'jslib/abstractions/messaging.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
import { SendService } from 'jslib/abstractions/send.service';
|
||||
import { UserService } from 'jslib/abstractions/user.service';
|
||||
|
||||
import { SendView } from 'jslib/models/view/sendView';
|
||||
import { SendFileView } from 'jslib/models/view/sendFileView';
|
||||
@ -22,8 +23,6 @@ import { SendTextView } from 'jslib/models/view/sendTextView';
|
||||
|
||||
import { Send } from 'jslib/models/domain/send';
|
||||
|
||||
import { SendData } from 'jslib/models/data/sendData';
|
||||
|
||||
@Component({
|
||||
selector: 'app-send-add-edit',
|
||||
templateUrl: 'add-edit.component.html',
|
||||
@ -52,10 +51,13 @@ export class AddEditComponent {
|
||||
expirationDateOptions: any[];
|
||||
deletionDateSelect = 168;
|
||||
expirationDateSelect: number = null;
|
||||
canAccessPremium = true;
|
||||
premiumRequiredAlertShown = false;
|
||||
|
||||
constructor(private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
|
||||
private environmentService: EnvironmentService, private datePipe: DatePipe,
|
||||
private sendService: SendService) {
|
||||
private sendService: SendService, private userService: UserService,
|
||||
private messagingService: MessagingService) {
|
||||
this.typeOptions = [
|
||||
{ name: i18nService.t('sendTypeFile'), value: SendType.File },
|
||||
{ name: i18nService.t('sendTypeText'), value: SendType.Text },
|
||||
@ -87,6 +89,11 @@ export class AddEditComponent {
|
||||
this.title = this.i18nService.t('createSend');
|
||||
}
|
||||
|
||||
this.canAccessPremium = await this.userService.canAccessPremium();
|
||||
if (!this.canAccessPremium) {
|
||||
this.type = SendType.Text;
|
||||
}
|
||||
|
||||
if (this.send == null) {
|
||||
if (this.editMode) {
|
||||
const send = await this.loadSend();
|
||||
@ -194,6 +201,13 @@ export class AddEditComponent {
|
||||
} catch { }
|
||||
}
|
||||
|
||||
typeChanged() {
|
||||
if (!this.canAccessPremium && this.send.type == SendType.File && !this.premiumRequiredAlertShown) {
|
||||
this.premiumRequiredAlertShown = true;
|
||||
this.messagingService.send('premiumRequired');
|
||||
}
|
||||
}
|
||||
|
||||
protected async loadSend(): Promise<Send> {
|
||||
return this.sendService.get(this.sendId);
|
||||
}
|
||||
|
||||
@ -3319,15 +3319,35 @@
|
||||
"deletionDate": {
|
||||
"message": "Deletion Date"
|
||||
},
|
||||
"deletionDateDesc": {
|
||||
"message": "The Send will be permanently deleted on the specified date and time.",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
},
|
||||
"expirationDate": {
|
||||
"message": "Expiration Date"
|
||||
},
|
||||
"expirationDateDesc": {
|
||||
"message": "If set, access to this Send will expire on the specified date and time.",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
},
|
||||
"maxAccessCount": {
|
||||
"message": "Maximum Access Count"
|
||||
},
|
||||
"maxAccessCountDesc": {
|
||||
"message": "If set, users will no longer be able to access this send once the maximum access count is reached.",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
},
|
||||
"currentAccessCount": {
|
||||
"message": "Current Access Count"
|
||||
},
|
||||
"sendPasswordDesc": {
|
||||
"message": "Optionally require a password for users to access this Send.",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
},
|
||||
"sendNotesDesc": {
|
||||
"message": "Private notes about this Send.",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
},
|
||||
"disabled": {
|
||||
"message": "Disabled"
|
||||
},
|
||||
@ -3565,5 +3585,9 @@
|
||||
},
|
||||
"custom": {
|
||||
"message": "Custom"
|
||||
},
|
||||
"textHiddenByDefault": {
|
||||
"message": "When accessing the Send, hide the text by default",
|
||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user