bitwarden-estensione-browser/apps/desktop/src/app/accounts/settings.component.html

440 lines
18 KiB
HTML

<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body form" [formGroup]="form">
<div class="box">
<h1 class="box-header" id="settingsTitle">
{{ "settingsTitle" | i18n : currentUserEmail }}
</h1>
<div class="box-content box-content-padded">
<h2>
<button
id="app-settings"
type="button"
class="box-header-expandable"
(click)="showSecurity = !showSecurity"
[attr.aria-expanded]="showSecurity"
appAutofocus
>
<i
*ngIf="!showSecurity"
class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true"
></i>
<i
*ngIf="showSecurity"
class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true"
></i>
{{ "security" | i18n }}
</button>
</h2>
<ng-container *ngIf="showSecurity">
<app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
<span *ngIf="policy.timeout && policy.action">
{{
"vaultTimeoutPolicyWithActionInEffect"
| i18n
: policy.timeout.hours
: policy.timeout.minutes
: (policy.action | i18n)
}}
</span>
<span *ngIf="policy.timeout && !policy.action">
{{
"vaultTimeoutPolicyInEffect"
| i18n : policy.timeout.hours : policy.timeout.minutes
}}
</span>
<span *ngIf="!policy.timeout && policy.action">
{{ "vaultTimeoutActionPolicyInEffect" | i18n : (policy.action | i18n) }}
</span>
</app-callout>
<app-vault-timeout-input
[vaultTimeoutOptions]="vaultTimeoutOptions"
[formControl]="form.controls.vaultTimeout"
ngDefaultControl
></app-vault-timeout-input>
<div class="form-group">
<label>{{ "vaultTimeoutAction" | i18n }}</label>
<div class="radio radio-mt-2">
<label for="vaultTimeoutActionLock">
<input
type="radio"
id="vaultTimeoutActionLock"
value="{{ VaultTimeoutAction.Lock }}"
aria-describedby="vaultTimeoutActionLockHelp"
formControlName="vaultTimeoutAction"
/>
{{ "lock" | i18n }}
</label>
</div>
<small id="vaultTimeoutActionLockHelp" class="help-block">{{
"vaultTimeoutActionLockDesc" | i18n
}}</small>
<div class="radio">
<label for="vaultTimeoutActionLogOut">
<input
type="radio"
id="vaultTimeoutActionLogOut"
value="{{ VaultTimeoutAction.LogOut }}"
aria-describedby="vaultTimeoutActionLogOutHelp"
formControlName="vaultTimeoutAction"
/>
{{ "logOut" | i18n }}
</label>
</div>
<small id="vaultTimeoutActionLogOutHelp" class="help-block">{{
"vaultTimeoutActionLogOutDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="pin">
<input id="pin" type="checkbox" formControlName="pin" (change)="updatePin()" />
{{ "unlockWithPin" | i18n }}
</label>
</div>
</div>
<div class="form-group" *ngIf="supportsBiometric">
<div class="checkbox">
<label for="biometric">
<input
id="biometric"
type="checkbox"
formControlName="biometric"
(change)="updateBiometric()"
/>
{{ biometricText | i18n }}
</label>
</div>
<small class="help-block" *ngIf="this.form.value.biometric">{{
additionalBiometricSettingsText | i18n
}}</small>
</div>
<div class="form-group" *ngIf="supportsBiometric && this.form.value.biometric">
<div class="checkbox form-group-child">
<label for="autoPromptBiometrics">
<input
id="autoPromptBiometrics"
type="checkbox"
formControlName="autoPromptBiometrics"
(change)="updateAutoPromptBiometrics()"
/>
{{ autoPromptBiometricsText | i18n }}
</label>
</div>
</div>
<div class="form-group" *ngIf="supportsBiometric && this.form.value.biometric">
<div class="checkbox form-group-child">
<label for="requirePasswordOnStart">
<input
id="requirePasswordOnStart"
type="checkbox"
formControlName="requirePasswordOnStart"
(change)="updateRequirePasswordOnStart()"
/>
{{ "requirePasswordOnStart" | i18n }}
</label>
</div>
<small class="help-block form-group-child" *ngIf="isWindows">{{
"recommendedForSecurity" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="approveLoginRequests">
<input
id="approveLoginRequests"
type="checkbox"
formControlName="approveLoginRequests"
(change)="updateApproveLoginRequests()"
/>
{{ "approveLoginRequests" | i18n }}
</label>
</div>
<small class="help-block">{{ "approveLoginRequestDesc" | i18n }}</small>
</div>
</ng-container>
</div>
</div>
<div class="box">
<div class="box-content box-content-padded">
<h2>
<button
type="button"
class="box-header-expandable"
(click)="showAccountPreferences = !showAccountPreferences"
[attr.aria-expanded]="showAccountPreferences"
>
<i
*ngIf="!showAccountPreferences"
class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true"
></i>
<i
*ngIf="showAccountPreferences"
class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true"
></i>
{{ "accountPreferences" | i18n }}
</button>
</h2>
<ng-container *ngIf="showAccountPreferences">
<div class="form-group">
<label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
<select
id="clearClipboard"
aria-describedby="clearClipboardHelp"
formControlName="clearClipboard"
(change)="saveClearClipboard()"
>
<option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
{{ o.name }}
</option>
</select>
<small id="clearClipboardHelp" class="help-block">{{
"clearClipboardDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="minimizeOnCopyToClipboard">
<input
id="minimizeOnCopyToClipboard"
type="checkbox"
aria-describedby="minimizeOnCopyToClipboardHelp"
formControlName="minimizeOnCopyToClipboard"
(change)="saveMinOnCopyToClipboard()"
/>
{{ "minimizeOnCopyToClipboard" | i18n }}
</label>
</div>
<small id="minimizeOnCopyToClipboardHelp" class="help-block">{{
"minimizeOnCopyToClipboardDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="enableFavicons">
<input
id="enableFavicons"
type="checkbox"
aria-describedby="enableFaviconsHelp"
formControlName="enableFavicons"
(change)="saveFavicons()"
/>
{{ "enableFavicon" | i18n }}
</label>
</div>
<small id="enableFaviconsHelp" class="help-block">{{ "faviconDesc" | i18n }}</small>
</div>
</ng-container>
</div>
</div>
<div class="box">
<div class="box-content box-content-padded">
<h2>
<button
type="button"
class="box-header-expandable"
(click)="showAppPreferences = !showAppPreferences"
[attr.aria-expanded]="showAppPreferences"
>
<i
*ngIf="!showAppPreferences"
class="bwi bwi-angle-right bwi-sm icon"
aria-hidden="true"
></i>
<i
*ngIf="showAppPreferences"
class="bwi bwi-angle-down bwi-sm icon"
aria-hidden="true"
></i>
{{ "appPreferences" | i18n }}
</button>
</h2>
<ng-container *ngIf="showAppPreferences">
<div class="form-group">
<div class="checkbox">
<label for="enableTray">
<input
id="enableTray"
type="checkbox"
aria-describedby="enableTrayHelp"
formControlName="enableTray"
(change)="saveTray()"
/>
{{ enableTrayText }}
</label>
</div>
<small id="enableTrayHelp" class="help-block">{{ enableTrayDescText }}</small>
</div>
<div class="form-group" *ngIf="showMinToTray">
<div class="checkbox">
<label for="enableMinToTray">
<input
id="enableMinToTray"
type="checkbox"
aria-describedby="enableMinToTrayHelp"
formControlName="enableMinToTray"
(change)="saveMinToTray()"
/>
{{ enableMinToTrayText }}
</label>
</div>
<small id="enableMinToTrayHelp" class="help-block">{{
enableMinToTrayDescText
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="enableCloseToTray">
<input
id="enableCloseToTray"
type="checkbox"
aria-describedby="enableCloseToTrayHelp"
formControlName="enableCloseToTray"
(change)="saveCloseToTray()"
/>
{{ enableCloseToTrayText }}
</label>
</div>
<small id="enableCloseToTrayHelp" class="help-block">{{
enableCloseToTrayDescText
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="startToTray">
<input
id="startToTray"
type="checkbox"
aria-describedby="startToTrayHelp"
formControlName="startToTray"
(change)="saveStartToTray()"
/>
{{ startToTrayText }}
</label>
</div>
<small id="startToTrayHelp" class="help-block">{{ startToTrayDescText }}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="openAtLogin">
<input
id="openAtLogin"
type="checkbox"
aria-describedby="openAtLoginHelp"
formControlName="openAtLogin"
(change)="saveOpenAtLogin()"
/>
{{ "openAtLogin" | i18n }}
</label>
</div>
<small id="openAtLoginHelp" class="help-block">{{
"openAtLoginDesc" | i18n
}}</small>
</div>
<div class="form-group" *ngIf="showAlwaysShowDock">
<div class="checkbox">
<label for="alwaysShowDock">
<input
id="alwaysShowDock"
type="checkbox"
aria-describedby="alwaysShowDockHelp"
formControlName="alwaysShowDock"
(change)="saveAlwaysShowDock()"
/>
{{ "alwaysShowDock" | i18n }}
</label>
</div>
<small id="alwaysShowDockHelp" class="help-block">{{
"alwaysShowDockDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="enableBrowserIntegration">
<input
id="enableBrowserIntegration"
type="checkbox"
aria-describedby="enableBrowserIntegrationHelp"
formControlName="enableBrowserIntegration"
(change)="saveBrowserIntegration()"
/>
{{ "enableBrowserIntegration" | i18n }}
</label>
</div>
<small id="enableBrowserIntegrationHelp" class="help-block">{{
"enableBrowserIntegrationDesc" | i18n
}}</small>
</div>
<div class="form-group">
<div class="checkbox">
<label for="enableBrowserIntegrationFingerprint">
<input
id="enableBrowserIntegrationFingerprint"
type="checkbox"
aria-describedby="enableBrowserIntegrationFingerprintHelp"
formControlName="enableBrowserIntegrationFingerprint"
(change)="saveBrowserIntegrationFingerprint()"
/>
{{ "enableBrowserIntegrationFingerprint" | i18n }}
</label>
</div>
<small id="enableBrowserIntegrationFingerprintHelp" class="help-block">{{
"enableBrowserIntegrationFingerprintDesc" | i18n
}}</small>
</div>
<div class="form-group" *ngIf="showDuckDuckGoIntegrationOption">
<div class="checkbox">
<label for="enableDuckDuckGoBrowserIntegration">
<input
id="enableDuckDuckGoBrowserIntegration"
type="checkbox"
formControlName="enableDuckDuckGoBrowserIntegration"
(change)="saveDdgBrowserIntegration()"
/>
{{ "enableDuckDuckGoBrowserIntegration" | i18n }}
</label>
</div>
<small class="help-block">{{
"enableDuckDuckGoBrowserIntegrationDesc" | i18n
}}</small>
</div>
<div class="form-group">
<label for="theme">{{ "theme" | i18n }}</label>
<select
id="theme"
aria-describedby="themeHelp"
formControlName="theme"
(change)="saveTheme()"
>
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small id="themeHelp" class="help-block">{{ "themeDesc" | i18n }}</small>
</div>
<div class="form-group">
<label for="locale">{{ "language" | i18n }}</label>
<select
id="locale"
aria-describedby="localeHelp"
formControlName="locale"
(change)="saveLocale()"
>
<option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
</select>
<small id="localeHelp" class="help-block">{{ "languageDesc" | i18n }}</small>
</div>
</ng-container>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
</div>
</div>
</div>
</div>