Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-06 09:20:43 +01:00
Code Issues Projects Releases Wiki Activity

Resolved Safari Date/Time Issues In Send (#1084)

Browse Source 
* cleaned up date and time logic for Send

* updated jslib

* updated jslib
This commit is contained in:
Addison Beck 2021-07-16 14:31:35 -04:00 committed by GitHub
parent 623e485641
commit ba6d61a510
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 134 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 75fff66f98e3d174baf369afbb747c1380fad4d4 Subproject commit 58be5796b0c2b19aacf52d4a1c179aeb80924443

5
src/app/oss.module.ts
View File

@ -5,7 +5,7 @@ import {
} from '@angular/common'; } from '@angular/common';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { ToasterModule } from 'angular2-toaster'; import { ToasterModule } from 'angular2-toaster';
@ -99,6 +99,7 @@ import { VaultComponent as OrgVaultComponent } from './organizations/vault/vault
import { AccessComponent } from './send/access.component'; import { AccessComponent } from './send/access.component';
import { AddEditComponent as SendAddEditComponent } from './send/add-edit.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 { SendComponent } from './send/send.component';
import { AccountComponent } from './settings/account.component'; import { AccountComponent } from './settings/account.component';
@ -275,6 +276,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
InfiniteScrollModule, InfiniteScrollModule,
DragDropModule, DragDropModule,
ToasterModule.forChild(), ToasterModule.forChild(),
ReactiveFormsModule,
RouterModule, RouterModule,
], ],
declarations: [ declarations: [
@ -398,6 +400,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
SearchPipe, SearchPipe,
SelectCopyDirective, SelectCopyDirective,
SendAddEditComponent, SendAddEditComponent,
SendEffluxDatesComponent,
SendComponent, SendComponent,
SettingsComponent, SettingsComponent,
ShareComponent, ShareComponent,

87
src/app/send/add-edit.component.html
View File

@ -92,89 +92,10 @@
</a> </a>
</div> </div>
<div id="options" [hidden]="!showOptions"> <div id="options" [hidden]="!showOptions">
<div class="row"> <app-send-efflux-dates
<div class="col-6 form-group"> [initialDeletionDate]="send.deletionDate" [initialExpirationDate]="send.expirationDate"
<label for="deletionDate">{{'deletionDate' | i18n}}</label> [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
<ng-template #deletionDateCustom> </app-send-efflux-dates>
<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>
<div class="row"> <div class="row">
<div class="col-6 form-group"> <div class="col-6 form-group">
<label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label> <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>

103
src/app/send/efflux-dates.component.html Normal file
View 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
View 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);
}
}