[AC-1045] add action to vault timeout policy (#4782)

apps/web/src/app/settings/preferences.component.html

@@ -2,12 +2,26 @@
   <h1>{{ "preferences" | i18n }}</h1>
 </div>
 <p>{{ "preferencesDesc" | i18n }}</p>
-<form (ngSubmit)="submit()" ngNativeValidate>
+<form [formGroup]="form" (ngSubmit)="submit()" ngNativeValidate>
   <div class="row">
     <div class="col-6">
+      <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
-        [vaultTimeouts]="vaultTimeouts"
-        [formControl]="vaultTimeout"
+        [vaultTimeoutOptions]="vaultTimeoutOptions"
+        [formControl]="form.controls.vaultTimeout"
         ngDefaultControl
       >
       </app-vault-timeout-input>
@@ -21,8 +35,8 @@
         type="radio"
         name="vaultTimeoutAction"
         id="vaultTimeoutActionLock"
-        value="lock"
-        [(ngModel)]="vaultTimeoutAction"
+        value="{{ VaultTimeoutAction.Lock }}"
+        formControlName="vaultTimeoutAction"
       />
       <label class="form-check-label" for="vaultTimeoutActionLock">
         {{ "lock" | i18n }}
@@ -35,9 +49,8 @@
         type="radio"
         name="vaultTimeoutAction"
         id="vaultTimeoutActionLogOut"
-        value="logOut"
-        [(ngModel)]="vaultTimeoutAction"
-        (ngModelChange)="vaultTimeoutActionChanged($event)"
+        value="{{ VaultTimeoutAction.LogOut }}"
+        formControlName="vaultTimeoutAction"
       />
       <label class="form-check-label" for="vaultTimeoutActionLogOut">
         {{ "logOut" | i18n }}
@@ -60,7 +73,7 @@
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
-        <select id="locale" name="Locale" [(ngModel)]="locale" class="form-control">
+        <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>
@@ -74,7 +87,7 @@
         type="checkbox"
         id="enableFavicons"
         name="enableFavicons"
-        [(ngModel)]="enableFavicons"
+        formControlName="enableFavicons"
       />
       <label class="form-check-label" for="enableFavicons">
         {{ "enableFavicon" | i18n }}
@@ -97,7 +110,7 @@
         type="checkbox"
         id="enableFullWidth"
         name="enableFullWidth"
-        [(ngModel)]="enableFullWidth"
+        formControlName="enableFullWidth"
       />
       <label class="form-check-label" for="enableFullWidth">
         {{ "enableFullWidth" | i18n }}
@@ -109,7 +122,7 @@
     <div class="col-6">
       <div class="form-group">
         <label for="theme">{{ "theme" | i18n }}</label>
-        <select id="theme" name="theme" [(ngModel)]="theme" class="form-control">
+        <select id="theme" name="theme" formControlName="theme" class="form-control">
           <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
         </select>
         <small class="form-text text-muted">{{ "themeDesc" | i18n }}</small>