mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-18 11:05:41 +01:00
Merge pull request #1821 from bitwarden/reorder-options-screen
Organize Options page and add headings
This commit is contained in:
Thomas Rittson
GitHub
commit
88adf4b144
@ -902,7 +902,7 @@
|
||||
"message": "Automatic TOTP Copy after Page Load"
|
||||
},
|
||||
"enableAutoTotpCopyOnAutoFillDesc": {
|
||||
"message": "If Auto-fill On Page Load is enabled, and your login has an authenticator key attached to it, the TOTP verification code is automatically copied to your clipboard after loading the web page."
|
||||
"message": "If Auto-fill On Page Load is enabled, the TOTP verification code is automatically copied to your clipboard after loading the web page. This is overridden by Disable Automatic TOTP Copy."
|
||||
},
|
||||
"experimentalFeature": {
|
||||
"message": "This is currently an experimental feature. Use at your own risk."
|
||||
|
||||
@ -164,6 +164,15 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box-section-divider {
|
||||
border-top: 1px solid #000000;
|
||||
padding-top: 10px;
|
||||
|
||||
@include themify($themes) {
|
||||
border-color: themed('borderColor');
|
||||
}
|
||||
}
|
||||
|
||||
.box-content-row {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
|
||||
@ -12,139 +12,166 @@
|
||||
</header>
|
||||
<content>
|
||||
<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" (change)="updateAutoFillOnPageLoad()"
|
||||
[(ngModel)]="enableAutoFillOnPageLoad">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'enableAutoFillOnPageLoadDesc' | i18n}}
|
||||
<b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
|
||||
<div class="box-header-expandable" (click)="showGeneral = !showGeneral">
|
||||
General
|
||||
<i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon"></i>
|
||||
<i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="autoCopyTotp">{{'enableAutoTotpCopyOnAutoFill' | i18n}}</label>
|
||||
<input id="autoCopyTotp" type="checkbox" (change)="updateAutoTotpCopyOnAutoFill()"
|
||||
[(ngModel)]="enableAutoTotpCopyOnAutoFill" [disabled]="!enableAutoFillOnPageLoad">
|
||||
<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" [(ngModel)]="defaultUriMatch"
|
||||
(change)="saveDefaultUriMatch()">
|
||||
<option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'defaultUriMatchDetectionDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'enableAutoTotpCopyOnAutoFillDesc' | i18n}}
|
||||
<div class="box" *ngIf="showClearClipboard">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="clearClipboard">{{'clearClipboard' | i18n}}</label>
|
||||
<select id="clearClipboard" name="ClearClipboard" [(ngModel)]="clearClipboard"
|
||||
(change)="saveClearClipboard()">
|
||||
<option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'clearClipboardDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="totp">{{'disableAutoTotpCopy' | i18n}}</label>
|
||||
<input id="totp" type="checkbox" (change)="updateAutoTotpCopy()" [(ngModel)]="disableAutoTotpCopy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableAutoTotpCopyDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="addlogin-notification-bar">{{'disableAddLoginNotification' | i18n}}</label>
|
||||
<input id="addlogin-notification-bar" type="checkbox" (change)="updateAddLoginNotification()"
|
||||
[(ngModel)]="disableAddLoginNotification">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'addLoginNotificationDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="changedpass-notification-bar">{{'disableChangedPasswordNotification' | i18n}}</label>
|
||||
<input id="changedpass-notification-bar" type="checkbox" (change)="updateChangedPasswordNotification()"
|
||||
[(ngModel)]="disableChangedPasswordNotification">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableChangedPasswordNotificationDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="context-menu">{{'disableContextMenuItem' | i18n}}</label>
|
||||
<input id="context-menu" type="checkbox" (change)="updateDisableContextMenuItem()"
|
||||
[(ngModel)]="disableContextMenuItem">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableContextMenuItemDesc' | i18n}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="box box-section-divider">
|
||||
<div class="box-header-expandable" (click)="showDisplay = !showDisplay">
|
||||
Display
|
||||
<i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon"></i>
|
||||
<i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon"></i>
|
||||
</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" [(ngModel)]="defaultUriMatch"
|
||||
(change)="saveDefaultUriMatch()">
|
||||
<option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
<ng-container *ngIf="showDisplay">
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="dontShowCards">{{'dontShowCardsCurrentTab' | i18n}}</label>
|
||||
<input id="dontShowCards" type="checkbox" (change)="updateShowCards()" [(ngModel)]="dontShowCards">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'dontShowCardsCurrentTabDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="dontShowIdentities">{{'dontShowIdentitiesCurrentTab' | i18n}}</label>
|
||||
<input id="dontShowIdentities" type="checkbox" (change)="updateShowIdentities()"
|
||||
[(ngModel)]="dontShowIdentities">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'dontShowIdentitiesCurrentTabDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="favicon">{{'disableFavicon' | i18n}}</label>
|
||||
<input id="favicon" type="checkbox" (change)="updateDisableFavicon()" [(ngModel)]="disableFavicon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableFaviconDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="badge">{{'disableBadgeCounter' | i18n}}</label>
|
||||
<input id="badge" type="checkbox" (change)="updateDisableBadgeCounter()" [(ngModel)]="disableBadgeCounter">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableBadgeCounterDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="theme">{{'theme' | i18n}}</label>
|
||||
<select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
|
||||
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'themeDesc' | i18n}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="box box-section-divider">
|
||||
<div class="box-header-expandable" (click)="showAutofill = !showAutofill">
|
||||
Autofill
|
||||
<i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon"></i>
|
||||
<i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon"></i>
|
||||
</div>
|
||||
</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" (change)="updateAutoFillOnPageLoad()"
|
||||
[(ngModel)]="enableAutoFillOnPageLoad">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'enableAutoFillOnPageLoadDesc' | i18n}}
|
||||
<b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'defaultUriMatchDetectionDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box" *ngIf="showClearClipboard">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="clearClipboard">{{'clearClipboard' | i18n}}</label>
|
||||
<select id="clearClipboard" name="ClearClipboard" [(ngModel)]="clearClipboard"
|
||||
(change)="saveClearClipboard()">
|
||||
<option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="autoCopyTotp">{{'enableAutoTotpCopyOnAutoFill' | i18n}}</label>
|
||||
<input id="autoCopyTotp" type="checkbox" (change)="updateAutoTotpCopyOnAutoFill()"
|
||||
[(ngModel)]="enableAutoTotpCopyOnAutoFill" [disabled]="!enableAutoFillOnPageLoad">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'enableAutoTotpCopyOnAutoFillDesc' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'clearClipboardDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="totp">{{'disableAutoTotpCopy' | i18n}}</label>
|
||||
<input id="totp" type="checkbox" (change)="updateAutoTotpCopy()" [(ngModel)]="disableAutoTotpCopy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableAutoTotpCopyDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="dontShowCards">{{'dontShowCardsCurrentTab' | i18n}}</label>
|
||||
<input id="dontShowCards" type="checkbox" (change)="updateShowCards()" [(ngModel)]="dontShowCards">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'dontShowCardsCurrentTabDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="dontShowIdentities">{{'dontShowIdentitiesCurrentTab' | i18n}}</label>
|
||||
<input id="dontShowIdentities" type="checkbox" (change)="updateShowIdentities()"
|
||||
[(ngModel)]="dontShowIdentities">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'dontShowIdentitiesCurrentTabDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="addlogin-notification-bar">{{'disableAddLoginNotification' | i18n}}</label>
|
||||
<input id="addlogin-notification-bar" type="checkbox" (change)="updateAddLoginNotification()"
|
||||
[(ngModel)]="disableAddLoginNotification">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'addLoginNotificationDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="changedpass-notification-bar">{{'disableChangedPasswordNotification' | i18n}}</label>
|
||||
<input id="changedpass-notification-bar" type="checkbox" (change)="updateChangedPasswordNotification()"
|
||||
[(ngModel)]="disableChangedPasswordNotification">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableChangedPasswordNotificationDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="context-menu">{{'disableContextMenuItem' | i18n}}</label>
|
||||
<input id="context-menu" type="checkbox" (change)="updateDisableContextMenuItem()"
|
||||
[(ngModel)]="disableContextMenuItem">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableContextMenuItemDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="favicon">{{'disableFavicon' | i18n}}</label>
|
||||
<input id="favicon" type="checkbox" (change)="updateDisableFavicon()" [(ngModel)]="disableFavicon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableFaviconDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="badge">{{'disableBadgeCounter' | i18n}}</label>
|
||||
<input id="badge" type="checkbox" (change)="updateDisableBadgeCounter()" [(ngModel)]="disableBadgeCounter">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'disableBadgeCounterDesc' | i18n}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="theme">{{'theme' | i18n}}</label>
|
||||
<select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
|
||||
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{o.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">{{'themeDesc' | i18n}}</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</content>
|
||||
|
||||
@ -36,6 +36,9 @@ export class OptionsComponent implements OnInit {
|
||||
uriMatchOptions: any[];
|
||||
clearClipboard: number;
|
||||
clearClipboardOptions: any[];
|
||||
showGeneral: boolean = true;
|
||||
showAutofill: boolean = true;
|
||||
showDisplay: boolean = true;
|
||||
|
||||
constructor(private messagingService: MessagingService, private storageService: StorageService,
|
||||
private stateService: StateService, private totpService: TotpService, i18nService: I18nService) {
|
||||
|
||||
@ -258,10 +258,10 @@ export default class AutofillService implements AutofillServiceInterface {
|
||||
if (cipher.reprompt !== CipherRepromptType.None) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const copyTotpOnAutoFill = await this.totpService.isAutoCopyOnAutoFillEnabled();
|
||||
const shouldCopyTotp = fromCommand || copyTotpOnAutoFill;
|
||||
|
||||
|
||||
const totpCode = await this.doAutoFill({
|
||||
cipher: cipher,
|
||||
pageDetails: pageDetails,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user