PM-4977 Migrate Preferences component (#8663)
* PM-4977 Migrate Preferences component * PM-4977 Addressed the review comments * PM-4977 Updated css in preferences html * PM-4977 Removed the class applied on bit-hint
This commit is contained in:
KiruthigaManivannan
GitHub
parent
0f9f7f4df6
commit
c8eac6fa12
|
|
@ -1,106 +1,77 @@
|
||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
|
|
||||||
<bit-container>
|
<bit-container>
|
||||||
<p>{{ "preferencesDesc" | i18n }}</p>
|
<p bitTypography="body1">{{ "preferencesDesc" | i18n }}</p>
|
||||||
<form [formGroup]="form" (ngSubmit)="submit()" ngNativeValidate>
|
<form [formGroup]="form" [bitSubmit]="submit" class="tw-w-1/2">
|
||||||
<div class="row">
|
<app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
|
||||||
<div class="col-6">
|
<span *ngIf="policy.timeout && policy.action">
|
||||||
<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)
|
||||||
"vaultTimeoutPolicyWithActionInEffect"
|
}}
|
||||||
| i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n)
|
</span>
|
||||||
}}
|
<span *ngIf="policy.timeout && !policy.action">
|
||||||
</span>
|
{{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }}
|
||||||
<span *ngIf="policy.timeout && !policy.action">
|
</span>
|
||||||
{{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }}
|
<span *ngIf="!policy.timeout && policy.action">
|
||||||
</span>
|
{{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
|
||||||
<span *ngIf="!policy.timeout && policy.action">
|
</span>
|
||||||
{{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
|
</app-callout>
|
||||||
</span>
|
<app-vault-timeout-input
|
||||||
</app-callout>
|
[vaultTimeoutOptions]="vaultTimeoutOptions"
|
||||||
<app-vault-timeout-input
|
[formControl]="form.controls.vaultTimeout"
|
||||||
[vaultTimeoutOptions]="vaultTimeoutOptions"
|
ngDefaultControl
|
||||||
[formControl]="form.controls.vaultTimeout"
|
>
|
||||||
ngDefaultControl
|
</app-vault-timeout-input>
|
||||||
>
|
|
||||||
</app-vault-timeout-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
|
<ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
|
||||||
<div *ngIf="availableVaultTimeoutActions.length > 1" class="form-group">
|
<bit-radio-group
|
||||||
<label>{{ "vaultTimeoutAction" | i18n }}</label>
|
formControlName="vaultTimeoutAction"
|
||||||
<div
|
*ngIf="availableVaultTimeoutActions.length > 1"
|
||||||
|
>
|
||||||
|
<bit-label>{{ "vaultTimeoutAction" | i18n }}</bit-label>
|
||||||
|
<bit-radio-button
|
||||||
*ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
|
*ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
|
||||||
class="form-check form-check-block"
|
id="vaultTimeoutActionLock"
|
||||||
|
[value]="VaultTimeoutAction.Lock"
|
||||||
>
|
>
|
||||||
<input
|
<bit-label>{{ "lock" | i18n }}</bit-label>
|
||||||
class="form-check-input"
|
<bit-hint>{{ "vaultTimeoutActionLockDesc" | i18n }}</bit-hint>
|
||||||
type="radio"
|
</bit-radio-button>
|
||||||
name="vaultTimeoutAction"
|
<bit-radio-button
|
||||||
id="vaultTimeoutActionLock"
|
|
||||||
value="{{ VaultTimeoutAction.Lock }}"
|
|
||||||
formControlName="vaultTimeoutAction"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="vaultTimeoutActionLock">
|
|
||||||
{{ "lock" | i18n }}
|
|
||||||
<small>{{ "vaultTimeoutActionLockDesc" | i18n }}</small>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
*ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.LogOut)"
|
*ngIf="availableVaultTimeoutActions.includes(VaultTimeoutAction.LogOut)"
|
||||||
class="form-check mt-2 form-check-block"
|
id="vaultTimeoutActionLogOut"
|
||||||
|
[value]="VaultTimeoutAction.LogOut"
|
||||||
>
|
>
|
||||||
<input
|
<bit-label>{{ "logOut" | i18n }}</bit-label>
|
||||||
class="form-check-input"
|
<bit-hint>{{ "vaultTimeoutActionLogOutDesc" | i18n }}</bit-hint>
|
||||||
type="radio"
|
</bit-radio-button>
|
||||||
name="vaultTimeoutAction"
|
</bit-radio-group>
|
||||||
id="vaultTimeoutActionLogOut"
|
|
||||||
value="{{ VaultTimeoutAction.LogOut }}"
|
|
||||||
formControlName="vaultTimeoutAction"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="vaultTimeoutActionLogOut">
|
|
||||||
{{ "logOut" | i18n }}
|
|
||||||
<small>{{ "vaultTimeoutActionLogOutDesc" | i18n }}</small>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<div class="row">
|
<bit-form-field>
|
||||||
<div class="col-6">
|
<bit-label
|
||||||
<div class="form-group">
|
>{{ "language" | i18n }}
|
||||||
<div class="d-flex">
|
|
||||||
<label for="locale">{{ "language" | i18n }}</label>
|
|
||||||
<a
|
|
||||||
class="ml-auto"
|
|
||||||
href="https://bitwarden.com/help/localization/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
appA11yTitle="{{ 'learnMore' | i18n }}"
|
|
||||||
>
|
|
||||||
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<select id="locale" name="Locale" formControlName="locale" class="form-control">
|
|
||||||
<option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
|
|
||||||
</select>
|
|
||||||
<small class="form-text text-muted">{{ "languageDesc" | i18n }}</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
class="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
id="enableFavicons"
|
|
||||||
name="enableFavicons"
|
|
||||||
formControlName="enableFavicons"
|
|
||||||
/>
|
|
||||||
<label class="form-check-label" for="enableFavicons">
|
|
||||||
{{ "enableFavicon" | i18n }}
|
|
||||||
</label>
|
|
||||||
<a
|
<a
|
||||||
|
bitLink
|
||||||
|
class="tw-float-right"
|
||||||
|
href="https://bitwarden.com/help/localization/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
appA11yTitle="{{ 'learnMore' | i18n }}"
|
||||||
|
>
|
||||||
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
||||||
|
</a>
|
||||||
|
</bit-label>
|
||||||
|
<bit-select formControlName="locale" id="locale">
|
||||||
|
<bit-option *ngFor="let o of localeOptions" [value]="o.value" [label]="o.name"></bit-option>
|
||||||
|
</bit-select>
|
||||||
|
<bit-hint>{{ "languageDesc" | i18n }}</bit-hint>
|
||||||
|
</bit-form-field>
|
||||||
|
<bit-form-control>
|
||||||
|
<input type="checkbox" bitCheckbox formControlName="enableFavicons" />
|
||||||
|
<bit-label
|
||||||
|
>{{ "enableFavicon" | i18n }}
|
||||||
|
<a
|
||||||
|
bitLink
|
||||||
href="https://bitwarden.com/help/website-icons/"
|
href="https://bitwarden.com/help/website-icons/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
|
|
@ -108,22 +79,16 @@
|
||||||
>
|
>
|
||||||
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</bit-label>
|
||||||
<small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
|
<bit-hint>{{ "faviconDesc" | i18n }}</bit-hint>
|
||||||
</div>
|
</bit-form-control>
|
||||||
<div class="row">
|
<bit-form-field>
|
||||||
<div class="col-6">
|
<bit-label>{{ "theme" | i18n }}</bit-label>
|
||||||
<div class="form-group">
|
<bit-select formControlName="theme" id="theme">
|
||||||
<label for="theme">{{ "theme" | i18n }}</label>
|
<bit-option *ngFor="let o of themeOptions" [value]="o.value" [label]="o.name"></bit-option>
|
||||||
<select id="theme" name="theme" formControlName="theme" class="form-control">
|
</bit-select>
|
||||||
<option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
|
<bit-hint>{{ "themeDesc" | i18n }}</bit-hint>
|
||||||
</select>
|
</bit-form-field>
|
||||||
<small class="form-text text-muted">{{ "themeDesc" | i18n }}</small>
|
<button bitButton bitFormButton type="submit" buttonType="primary">{{ "save" | i18n }}</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">
|
|
||||||
{{ "save" | i18n }}
|
|
||||||
</button>
|
|
||||||
</form>
|
</form>
|
||||||
</bit-container>
|
</bit-container>
|
||||||
|
|
|
||||||
|
|
@ -158,7 +158,7 @@ export class PreferencesComponent implements OnInit {
|
||||||
this.form.setValue(initialFormValues, { emitEvent: false });
|
this.form.setValue(initialFormValues, { emitEvent: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
async submit() {
|
submit = async () => {
|
||||||
if (!this.form.controls.vaultTimeout.valid) {
|
if (!this.form.controls.vaultTimeout.valid) {
|
||||||
this.platformUtilsService.showToast(
|
this.platformUtilsService.showToast(
|
||||||
"error",
|
"error",
|
||||||
|
|
@ -188,7 +188,7 @@ export class PreferencesComponent implements OnInit {
|
||||||
this.i18nService.t("preferencesUpdated"),
|
this.i18nService.t("preferencesUpdated"),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
this.destroy$.next();
|
this.destroy$.next();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue