mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-29 12:55:21 +01:00
[SG-901] Relocate Autofill on page load setting (#4629)
* [SG-901] Relocate Autofill on page load setting
This commit is contained in:
André Bispo
GitHub
parent
2b6b942f3e
commit
e3e88167e5
@ -32,6 +32,7 @@ import { SendAddEditComponent } from "./send/send-add-edit.component";
|
||||
import { SendGroupingsComponent } from "./send/send-groupings.component";
|
||||
import { SendTypeComponent } from "./send/send-type.component";
|
||||
import { DebounceNavigationService } from "./services/debounceNavigationService";
|
||||
import { AutofillComponent } from "./settings/autofill.component";
|
||||
import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
|
||||
import { ExportComponent } from "./settings/export.component";
|
||||
import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
|
||||
@ -187,6 +188,12 @@ const routes: Routes = [
|
||||
canActivate: [AuthGuard],
|
||||
data: { state: "export" },
|
||||
},
|
||||
{
|
||||
path: "autofill",
|
||||
component: AutofillComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: { state: "autofill" },
|
||||
},
|
||||
{
|
||||
path: "folders",
|
||||
component: FoldersComponent,
|
||||
|
||||
@ -62,6 +62,7 @@ import { SendGroupingsComponent } from "./send/send-groupings.component";
|
||||
import { SendTypeComponent } from "./send/send-type.component";
|
||||
import { ServicesModule } from "./services/services.module";
|
||||
import { AboutComponent } from "./settings/about.component";
|
||||
import { AutofillComponent } from "./settings/autofill.component";
|
||||
import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
|
||||
import { ExportComponent } from "./settings/export.component";
|
||||
import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
|
||||
@ -147,6 +148,7 @@ import { TabsComponent } from "./tabs.component";
|
||||
RemovePasswordComponent,
|
||||
VaultSelectComponent,
|
||||
AboutComponent,
|
||||
AutofillComponent,
|
||||
],
|
||||
providers: [CurrencyPipe, DatePipe],
|
||||
bootstrap: [AppComponent],
|
||||
|
||||
74
apps/browser/src/popup/settings/autofill.component.html
Normal file
74
apps/browser/src/popup/settings/autofill.component.html
Normal file
@ -0,0 +1,74 @@
|
||||
<header>
|
||||
<div class="left">
|
||||
<button type="button" routerLink="/tabs/settings">
|
||||
<span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
|
||||
<span>{{ "back" | i18n }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="center">
|
||||
<span class="title">{{ "autofill" | i18n }}</span>
|
||||
</h1>
|
||||
<div class="right"></div>
|
||||
</header>
|
||||
<main tabindex="-1">
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
|
||||
<input
|
||||
id="autofill"
|
||||
type="checkbox"
|
||||
aria-describedby="autofillHelp"
|
||||
(change)="updateAutoFillOnPageLoad()"
|
||||
[(ngModel)]="enableAutoFillOnPageLoad"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="autofillHelp" class="box-footer">
|
||||
{{ "enableAutoFillOnPageLoadDesc" | i18n }}
|
||||
<b>{{ "warning" | i18n }}</b
|
||||
>: {{ "experimentalFeature" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
|
||||
<select
|
||||
id="defaultAutofill"
|
||||
name="DefaultAutofill"
|
||||
aria-describedby="defaultAutofillHelp"
|
||||
[(ngModel)]="autoFillOnPageLoadDefault"
|
||||
(change)="updateAutoFillOnPageLoadDefault()"
|
||||
[disabled]="!enableAutoFillOnPageLoad"
|
||||
>
|
||||
<option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
|
||||
{{ o.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="defaultAutofillHelp" class="box-footer">
|
||||
{{ "defaultAutoFillOnPageLoadDesc" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
|
||||
<select
|
||||
id="defaultUriMatch"
|
||||
name="DefaultUriMatch"
|
||||
aria-describedby="defaultUriMatchHelp"
|
||||
[(ngModel)]="defaultUriMatch"
|
||||
(change)="saveDefaultUriMatch()"
|
||||
>
|
||||
<option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="defaultUriMatchHelp" class="box-footer">
|
||||
{{ "defaultUriMatchDetectionDesc" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
54
apps/browser/src/popup/settings/autofill.component.ts
Normal file
54
apps/browser/src/popup/settings/autofill.component.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
import { StateService } from "@bitwarden/common/abstractions/state.service";
|
||||
import { UriMatchType } from "@bitwarden/common/enums/uriMatchType";
|
||||
|
||||
@Component({
|
||||
selector: "app-autofill",
|
||||
templateUrl: "autofill.component.html",
|
||||
})
|
||||
export class AutofillComponent implements OnInit {
|
||||
enableAutoFillOnPageLoad = false;
|
||||
autoFillOnPageLoadDefault = false;
|
||||
autoFillOnPageLoadOptions: any[];
|
||||
defaultUriMatch = UriMatchType.Domain;
|
||||
uriMatchOptions: any[];
|
||||
|
||||
constructor(private stateService: StateService, i18nService: I18nService) {
|
||||
this.autoFillOnPageLoadOptions = [
|
||||
{ name: i18nService.t("autoFillOnPageLoadYes"), value: true },
|
||||
{ name: i18nService.t("autoFillOnPageLoadNo"), value: false },
|
||||
];
|
||||
this.uriMatchOptions = [
|
||||
{ name: i18nService.t("baseDomain"), value: UriMatchType.Domain },
|
||||
{ name: i18nService.t("host"), value: UriMatchType.Host },
|
||||
{ name: i18nService.t("startsWith"), value: UriMatchType.StartsWith },
|
||||
{ name: i18nService.t("regEx"), value: UriMatchType.RegularExpression },
|
||||
{ name: i18nService.t("exact"), value: UriMatchType.Exact },
|
||||
{ name: i18nService.t("never"), value: UriMatchType.Never },
|
||||
];
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.enableAutoFillOnPageLoad = await this.stateService.getEnableAutoFillOnPageLoad();
|
||||
|
||||
this.autoFillOnPageLoadDefault =
|
||||
(await this.stateService.getAutoFillOnPageLoadDefault()) ?? true;
|
||||
|
||||
const defaultUriMatch = await this.stateService.getDefaultUriMatch();
|
||||
this.defaultUriMatch = defaultUriMatch == null ? UriMatchType.Domain : defaultUriMatch;
|
||||
}
|
||||
|
||||
async updateAutoFillOnPageLoad() {
|
||||
await this.stateService.setEnableAutoFillOnPageLoad(this.enableAutoFillOnPageLoad);
|
||||
}
|
||||
|
||||
async updateAutoFillOnPageLoadDefault() {
|
||||
await this.stateService.setAutoFillOnPageLoadDefault(this.autoFillOnPageLoadDefault);
|
||||
}
|
||||
|
||||
async saveDefaultUriMatch() {
|
||||
await this.stateService.setDefaultUriMatch(this.defaultUriMatch);
|
||||
}
|
||||
}
|
||||
@ -26,25 +26,6 @@
|
||||
</h2>
|
||||
</div>
|
||||
<ng-container *ngIf="showGeneral">
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="defaultUriMatch">{{ "defaultUriMatchDetection" | i18n }}</label>
|
||||
<select
|
||||
id="defaultUriMatch"
|
||||
name="DefaultUriMatch"
|
||||
aria-describedby="defaultUriMatchHelp"
|
||||
[(ngModel)]="defaultUriMatch"
|
||||
(change)="saveDefaultUriMatch()"
|
||||
>
|
||||
<option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="defaultUriMatchHelp" class="box-footer">
|
||||
{{ "defaultUriMatchDetectionDesc" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" *ngIf="showClearClipboard">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
@ -228,61 +209,4 @@
|
||||
<div id="themeHelp" class="box-footer">{{ "themeDesc" | i18n }}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="box box-section-divider">
|
||||
<h2>
|
||||
<button
|
||||
type="button"
|
||||
class="box-header-expandable"
|
||||
(click)="showAutofill = !showAutofill"
|
||||
[attr.aria-expanded]="showAutofill"
|
||||
>
|
||||
<i *ngIf="!showAutofill" class="bwi bwi-angle-right bwi-sm icon" aria-hidden="true"></i>
|
||||
<i *ngIf="showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
|
||||
Autofill
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<ng-container *ngIf="showAutofill">
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="autofill">{{ "enableAutoFillOnPageLoad" | i18n }}</label>
|
||||
<input
|
||||
id="autofill"
|
||||
type="checkbox"
|
||||
aria-describedby="autofillHelp"
|
||||
(change)="updateAutoFillOnPageLoad()"
|
||||
[(ngModel)]="enableAutoFillOnPageLoad"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="autofillHelp" class="box-footer">
|
||||
{{ "enableAutoFillOnPageLoadDesc" | i18n }}
|
||||
<b>{{ "warning" | i18n }}</b
|
||||
>: {{ "experimentalFeature" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="defaultAutofill">{{ "defaultAutoFillOnPageLoad" | i18n }}</label>
|
||||
<select
|
||||
id="defaultAutofill"
|
||||
name="DefaultAutofill"
|
||||
aria-describedby="defaultAutofillHelp"
|
||||
[(ngModel)]="autoFillOnPageLoadDefault"
|
||||
(change)="updateAutoFillOnPageLoadDefault()"
|
||||
[disabled]="!enableAutoFillOnPageLoad"
|
||||
>
|
||||
<option *ngFor="let o of autoFillOnPageLoadOptions" [ngValue]="o.value">
|
||||
{{ o.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="defaultAutofillHelp" class="box-footer">
|
||||
{{ "defaultAutoFillOnPageLoadDesc" | i18n }}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</main>
|
||||
|
||||
@ -11,6 +11,14 @@
|
||||
<div class="box list">
|
||||
<h2 class="box-header">{{ "manage" | i18n }}</h2>
|
||||
<div class="box-content single-line">
|
||||
<button
|
||||
type="button"
|
||||
class="box-content-row box-content-row-flex text-default"
|
||||
routerLink="/autofill"
|
||||
>
|
||||
<div class="row-main">{{ "autofill" | i18n }}</div>
|
||||
<i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="box-content-row box-content-row-flex text-default"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user