mirror of
https://github.com/bitwarden/browser.git
synced 2024-08-31 00:01:03 +02:00
Resolved Safari Date/Time Issues In Send (#1084)
* cleaned up date and time logic for Send * updated jslib * updated jslib
This commit is contained in:
Addison Beck
GitHub
parent
623e485641
commit
ba6d61a510
2
jslib
2
jslib
|
|
@ -1 +1 @@
|
|||
Subproject commit 75fff66f98e3d174baf369afbb747c1380fad4d4
|
||||
Subproject commit 58be5796b0c2b19aacf52d4a1c179aeb80924443
|
||||
|
|
@ -5,7 +5,7 @@ import {
|
|||
} from '@angular/common';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
|
|
@ -99,6 +99,7 @@ import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault
|
|||
|
||||
import { AccessComponent } from './send/access.component';
|
||||
import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component';
|
||||
import { EffluxDatesComponent as SendEffluxDatesComponent } from './send/efflux-dates.component';
|
||||
import { SendComponent } from './send/send.component';
|
||||
|
||||
import { AccountComponent } from './settings/account.component';
|
||||
|
|
@ -275,6 +276,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
|||
InfiniteScrollModule,
|
||||
DragDropModule,
|
||||
ToasterModule.forChild(),
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -398,6 +400,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
|
|||
SearchPipe,
|
||||
SelectCopyDirective,
|
||||
SendAddEditComponent,
|
||||
SendEffluxDatesComponent,
|
||||
SendComponent,
|
||||
SettingsComponent,
|
||||
ShareComponent,
|
||||
|
|
|
|||
|
|
@ -92,89 +92,10 @@
|
|||
</a>
|
||||
</div>
|
||||
<div id="options" [hidden]="!showOptions">
|
||||
<div class="row">
|
||||
<div class="col-6 form-group">
|
||||
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
||||
<ng-template #deletionDateCustom>
|
||||
<ng-container *ngIf="isDateTimeLocalSupported">
|
||||
<input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="DeletionDate" [(ngModel)]="deletionDate" required
|
||||
placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
|
||||
</ng-container>
|
||||
<div *ngIf="!isDateTimeLocalSupported" class="d-flex justify-content-around">
|
||||
<input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
|
||||
<select *ngIf="isSafari" id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
|
||||
[(ngModel)]="safariDeletionTime" name="SafariDeletionTime">
|
||||
<option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}</option>
|
||||
</select>
|
||||
<input *ngIf="!isSafari" id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
|
||||
name="DeletionTimeDate" [(ngModel)]="deletionTimeFallback" required
|
||||
placeholder="HH:MM AM/PM" [readOnly]="disableSend">
|
||||
</div>
|
||||
</ng-template>
|
||||
<div *ngIf="!editMode">
|
||||
<select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
|
||||
class="form-control" required>
|
||||
<option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
|
||||
</option>
|
||||
</select>
|
||||
<ng-container *ngIf="deletionDateSelect === 0">
|
||||
<ng-container *ngTemplateOutlet="deletionDateCustom">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<ng-container *ngTemplateOutlet="deletionDateCustom">
|
||||
</ng-container>
|
||||
</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 && !disableSend">
|
||||
{{'clear' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
<ng-template #expirationDateCustom>
|
||||
<ng-container *ngIf="isDateTimeLocalSupported">
|
||||
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="ExpirationDate" [(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
|
||||
</ng-container>
|
||||
<div class="d-flex justify-content-around" *ngIf="!isDateTimeLocalSupported">
|
||||
<input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy" (change)="expirationDateFallbackChanged()">
|
||||
<select *ngIf="isSafari" id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
|
||||
[(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
|
||||
<option *ngFor="let o of safariExpirationTimeOptions" [ngValue]="o.military">{{o.standard}}</option>
|
||||
</select>
|
||||
<input *ngIf="!isSafari" id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
|
||||
name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" [required]="!editMode"
|
||||
placeholder="HH:MM AM/PM" [readOnly]="disableSend">
|
||||
</div>
|
||||
</ng-template>
|
||||
<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>
|
||||
<ng-container *ngIf="expirationDateSelect === 0">
|
||||
<ng-container *ngTemplateOutlet="expirationDateCustom">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<ng-container *ngTemplateOutlet="expirationDateCustom">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-send-efflux-dates
|
||||
[initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate"
|
||||
[editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
|
||||
</app-send-efflux-dates>
|
||||
<div class="row">
|
||||
<div class="col-6 form-group">
|
||||
<label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
|
||||
|
|
|
|||
103
src/app/send/efflux-dates.component.html
Normal file
103
src/app/send/efflux-dates.component.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<div class="row" [formGroup]="datesForm">
|
||||
<div class="col-6 form-group">
|
||||
<label for="deletionDate">{{'deletionDate' | i18n}}</label>
|
||||
<ng-template #deletionDateCustom>
|
||||
<ng-container [ngSwitch]="browserPath">
|
||||
<ng-container *ngSwitchCase="'firefox'">
|
||||
<div class="d-flex justify-content-around">
|
||||
<input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
|
||||
<input id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
|
||||
name="DeletionTimeDate" formControlName="fallbackDeletionTime" required
|
||||
placeholder="HH:MM AM/PM" [readOnly]="disableSend">
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'safari'">
|
||||
<div class="d-flex justify-content-around">
|
||||
<input id="deletionDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="DeletionDateFallback" formControlName="fallbackDeletionDate" required
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disableSend" data-date-format="mm/dd/yyyy">
|
||||
<select id="deletionTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
|
||||
formControlName="fallbackDeletionTime" name="SafariDeletionTime">
|
||||
<option *ngFor="let o of safariDeletionTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="DeletionDate" formControlName="defaultDeletionDateTime" required
|
||||
placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disabled">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
<div *ngIf="!editMode">
|
||||
<select id="deletionDate" name="SelectedDeletionDatePreset"
|
||||
formControlName="selectedDeletionDatePreset" class="form-control" required>
|
||||
<option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{o.name}}
|
||||
</option>
|
||||
</select>
|
||||
<ng-container *ngIf="selectedDeletionDatePreset.value === 0">
|
||||
<ng-container *ngTemplateOutlet="deletionDateCustom">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<ng-container *ngTemplateOutlet="deletionDateCustom">
|
||||
</ng-container>
|
||||
</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 && !disabled">
|
||||
{{'clear' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
<ng-template #expirationDateCustom>
|
||||
<ng-container [ngSwitch]="browserPath">
|
||||
<div *ngSwitchCase="'firefox'" class="d-flex justify-content-around">
|
||||
<input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
|
||||
<input id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" type="time"
|
||||
name="ExpirationTimeFallback" formControlName="fallbackExpirationTime" [required]="!editMode"
|
||||
placeholder="HH:MM AM/PM" [readOnly]="disabled">
|
||||
</div>
|
||||
<!-- non-default cases are not showing up -->
|
||||
<div *ngSwitchCase="'safari'" class="d-flex justify-content-around">
|
||||
<input id="expirationDateCustomFallback" class="form-control mt-1" type="date"
|
||||
name="ExpirationDateFallback" formControlName="fallbackExpirationDate" [required]="!editMode"
|
||||
placeholder="MM/DD/YYYY" [readOnly]="disabled" data-date-format="mm/dd/yyyy">
|
||||
<select id="expirationTimeCustomFallback" class="form-control mt-1 ml-1" [required]="!editMode"
|
||||
formControlName="fallbackExpirationTime" name="SafariExpirationTime">
|
||||
<option *ngFor="let o of safariExpirationTimePresetOptions" [ngValue]="o.twentyFourHour">{{o.twelveHour}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
|
||||
name="ExpirationDate" formControlName="defaultExpirationDateTime" placeholder="MM/DD/YYYY HH:MM AM/PM"
|
||||
[readOnly]="disabled">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
<div *ngIf="!editMode">
|
||||
<select id="expirationDate" name="SelectedExpirationDatePreset"
|
||||
formControlName="selectedExpirationDatePreset" class="form-control" required>
|
||||
<option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{o.name}}
|
||||
</option>
|
||||
</select>
|
||||
<ng-container *ngIf="selectedExpirationDatePreset.value === 0">
|
||||
<ng-container *ngTemplateOutlet="expirationDateCustom">
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="editMode">
|
||||
<ng-container *ngTemplateOutlet="expirationDateCustom">
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
|
||||
</div>
|
||||
</div>
|
||||
22
src/app/send/efflux-dates.component.ts
Normal file
22
src/app/send/efflux-dates.component.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { DatePipe } from '@angular/common';
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { ControlContainer, NgForm } from '@angular/forms';
|
||||
|
||||
import { I18nService } from 'jslib-common/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
|
||||
|
||||
import { EffluxDatesComponent as BaseEffluxDatesComponent } from 'jslib-angular/components/send/efflux-dates.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-send-efflux-dates',
|
||||
templateUrl: 'efflux-dates.component.html',
|
||||
viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
|
||||
})
|
||||
export class EffluxDatesComponent extends BaseEffluxDatesComponent {
|
||||
constructor(protected i18nService: I18nService, protected platformUtilsService: PlatformUtilsService,
|
||||
protected datePipe: DatePipe) {
|
||||
super(i18nService, platformUtilsService, datePipe);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user