mirror of
https://github.com/bitwarden/web
synced 2025-12-17 16:53:14 +00:00
Web send updates (#848)
* updated send link copy toast message * added a show/hide toggle for Send options
This commit is contained in:
Addison Beck
GitHub
@@ -65,101 +65,108 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<h3 class="mt-5">{{'options' | i18n}}</h3>
|
<div id="options-header" class="section-header d-flex flex-row align-items-center mt-5">
|
||||||
<div class="row">
|
<h3 class="mb-0 mr-2">{{'options' | i18n}}</h3>
|
||||||
<div class="col-6 form-group">
|
<a class="mb-1" href="#" appStopClick role="button" (click)="toggleOptions()">
|
||||||
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
<i class="fa" aria-hidden="true" [ngClass]="{'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions}"></i>
|
||||||
<div *ngIf="!editMode">
|
</a>
|
||||||
<select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
|
|
||||||
class="form-control" required>
|
|
||||||
<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"
|
|
||||||
placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
|
|
||||||
</div>
|
|
||||||
<div *ngIf="editMode">
|
|
||||||
<input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
|
|
||||||
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
|
|
||||||
[readOnly]="disableSend">
|
|
||||||
</div>
|
|
||||||
<div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6 form-group">
|
|
||||||
<div class="d-flex">
|
|
||||||
<label for="expirationDate">{{'expirationDate' | i18n}}</label>
|
|
||||||
<a href="#" appStopClick (click)="clearExpiration()" class="ml-auto" *ngIf="editMode">
|
|
||||||
{{'clear' | i18n}}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!editMode">
|
|
||||||
<select id="expirationDate" name="ExpirationDateSelect" [(ngModel)]="expirationDateSelect"
|
|
||||||
class="form-control" required>
|
|
||||||
<option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
|
|
||||||
name="ExpirationDate" [(ngModel)]="expirationDate" required
|
|
||||||
*ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
|
|
||||||
[readOnly]="disableSend">
|
|
||||||
</div>
|
|
||||||
<div *ngIf="editMode">
|
|
||||||
<input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
|
|
||||||
[(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM"
|
|
||||||
[readOnly]="disableSend">
|
|
||||||
</div>
|
|
||||||
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div id="options" [hidden]="!showOptions">
|
||||||
<div class="col-6 form-group">
|
<div class="row">
|
||||||
<label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
|
<div class="col-6 form-group">
|
||||||
<input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
|
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
||||||
[(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
|
<div *ngIf="!editMode">
|
||||||
<div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
|
<select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
|
||||||
</div>
|
class="form-control" required>
|
||||||
<div class="col-6 form-group" *ngIf="editMode">
|
<option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
|
||||||
<label for="accessCount">{{'currentAccessCount' | i18n}}</label>
|
</option>
|
||||||
<input id="accessCount" class="form-control" type="number" name="AccessCount" readonly
|
</select>
|
||||||
[(ngModel)]="send.accessCount">
|
<input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
|
||||||
</div>
|
name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
|
||||||
</div>
|
placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
|
||||||
<div class="row">
|
|
||||||
<div class="col-6 form-group">
|
|
||||||
<label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
|
|
||||||
<label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="password" class="form-control text-monospace"
|
|
||||||
type="{{showPassword ? 'text' : 'password'}}" name="Password" [(ngModel)]="password"
|
|
||||||
[readOnly]="disableSend">
|
|
||||||
<div class="input-group-append">
|
|
||||||
<button type="button" class="btn btn-outline-secondary"
|
|
||||||
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()">
|
|
||||||
<i class="fa fa-lg" aria-hidden="true"
|
|
||||||
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngIf="editMode">
|
||||||
|
<input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
|
||||||
|
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
|
||||||
|
[readOnly]="disableSend">
|
||||||
|
</div>
|
||||||
|
<div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 form-group">
|
||||||
|
<div class="d-flex">
|
||||||
|
<label for="expirationDate">{{'expirationDate' | i18n}}</label>
|
||||||
|
<a href="#" appStopClick (click)="clearExpiration()" class="ml-auto" *ngIf="editMode">
|
||||||
|
{{'clear' | i18n}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!editMode">
|
||||||
|
<select id="expirationDate" name="ExpirationDateSelect" [(ngModel)]="expirationDateSelect"
|
||||||
|
class="form-control" required>
|
||||||
|
<option *ngFor="let o of expirationDateOptions" [ngValue]="o.value">{{o.name}}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
|
||||||
|
name="ExpirationDate" [(ngModel)]="expirationDate" required
|
||||||
|
*ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
|
||||||
|
[readOnly]="disableSend">
|
||||||
|
</div>
|
||||||
|
<div *ngIf="editMode">
|
||||||
|
<input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
|
||||||
|
[(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM"
|
||||||
|
[readOnly]="disableSend">
|
||||||
|
</div>
|
||||||
|
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-text text-muted small">{{'sendPasswordDesc' | i18n}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="form-group">
|
<div class="col-6 form-group">
|
||||||
<label for="notes">{{'notes' | i18n}}</label>
|
<label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
|
||||||
<textarea id="notes" name="Notes" rows="6" [(ngModel)]="send.notes" class="form-control"
|
<input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
|
||||||
[readOnly]="disableSend"></textarea>
|
[(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
|
||||||
<div class="form-text text-muted small">{{'sendNotesDesc' | i18n}}</div>
|
<div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="col-6 form-group" *ngIf="editMode">
|
||||||
<div class="form-check">
|
<label for="accessCount">{{'currentAccessCount' | i18n}}</label>
|
||||||
<input class="form-check-input" type="checkbox" [(ngModel)]="send.disabled" id="disabled"
|
<input id="accessCount" class="form-control" type="number" name="AccessCount" readonly
|
||||||
name="Disabled" [disabled]="disableSend">
|
[(ngModel)]="send.accessCount">
|
||||||
<label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 form-group">
|
||||||
|
<label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
|
||||||
|
<label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="password" class="form-control text-monospace"
|
||||||
|
type="{{showPassword ? 'text' : 'password'}}" name="Password" [(ngModel)]="password"
|
||||||
|
[readOnly]="disableSend">
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button type="button" class="btn btn-outline-secondary"
|
||||||
|
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()">
|
||||||
|
<i class="fa fa-lg" aria-hidden="true"
|
||||||
|
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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"
|
||||||
|
[readOnly]="disableSend"></textarea>
|
||||||
|
<div class="form-text text-muted small">{{'sendNotesDesc' | i18n}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" [(ngModel)]="send.disabled" id="disabled"
|
||||||
|
name="Disabled" [disabled]="disableSend">
|
||||||
|
<label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mt-5">{{'share' | i18n}}</h3>
|
<h3 class="mt-5">{{'share' | i18n}}</h3>
|
||||||
<div class="form-group" *ngIf="link">
|
<div class="form-group" *ngIf="link">
|
||||||
<label for="link">{{'sendLink' | i18n}}</label>
|
<label for="link">{{'sendLinkLabel' | i18n}}</label>
|
||||||
<input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
|
<input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|||||||
@@ -3370,7 +3370,7 @@
|
|||||||
"message": "Disabled"
|
"message": "Disabled"
|
||||||
},
|
},
|
||||||
"sendLink": {
|
"sendLink": {
|
||||||
"message": "Send Link",
|
"message": "Send link",
|
||||||
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||||
},
|
},
|
||||||
"copySendLink": {
|
"copySendLink": {
|
||||||
@@ -3680,5 +3680,9 @@
|
|||||||
},
|
},
|
||||||
"copySendLinkOnSave": {
|
"copySendLinkOnSave": {
|
||||||
"message": "Copy the link to share this Send to my clipboard upon save."
|
"message": "Copy the link to share this Send to my clipboard upon save."
|
||||||
|
},
|
||||||
|
"sendLinkLabel": {
|
||||||
|
"message": "Send link",
|
||||||
|
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -279,7 +279,7 @@ input, select, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
h3 {
|
h3, .section-header > * {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
|
|||||||
Reference in New Issue
Block a user