Vault Timeout Policy (#1171)

src/app/app.module.ts

@@ -22,6 +22,9 @@ import { ServicesModule } from './services/services.module';
         DragDropModule,
         OssRoutingModule,
     ],
+    declarations: [
+        AppComponent,
+    ],
     bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/organizations/policies/base-policy.component.ts

@@ -35,19 +35,28 @@ export abstract class BasePolicyComponent implements OnInit {
     ngOnInit(): void {
         this.enabled.setValue(this.policyResponse.enabled);
 
-        if (this.data != null) {
-            this.data.patchValue(this.policyResponse.data ?? {});
+        if (this.policyResponse.data != null) {
+            this.loadData();
         }
     }
 
+    loadData() {
+        this.data.patchValue(this.policyResponse.data ?? {});
+    }
+
+    buildRequestData() {
+        if (this.data != null) {
+            return this.data.value;
+        }
+
+        return null;
+    }
+
     buildRequest(policiesEnabledMap: Map<PolicyType, boolean>) {
         const request = new PolicyRequest();
         request.enabled = this.enabled.value;
         request.type = this.policy.type;
-
-        if (this.data != null) {
-            request.data = this.data.value;
-        }
+        request.data = this.buildRequestData();
 
         return Promise.resolve(request);
     }

src/app/oss.module.ts

@@ -11,8 +11,6 @@ import { RouterModule } from '@angular/router';
 import { ToasterModule } from 'angular2-toaster';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
-import { AppComponent } from './app.component';
-
 import { AvatarComponent } from './components/avatar.component';
 import { PasswordRepromptComponent } from './components/password-reprompt.component';
 import { PasswordStrengthComponent } from './components/password-strength.component';
@@ -144,6 +142,7 @@ import { UpdateKeyComponent } from './settings/update-key.component';
 import { UpdateLicenseComponent } from './settings/update-license.component';
 import { UserBillingComponent } from './settings/user-billing.component';
 import { UserSubscriptionComponent } from './settings/user-subscription.component';
+import { VaultTimeoutInputComponent } from './settings/vault-timeout-input.component';
 import { VerifyEmailComponent } from './settings/verify-email.component';
 
 import { BreachReportComponent } from './tools/breach-report.component';
@@ -307,7 +306,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         AdjustStorageComponent,
         ApiActionDirective,
         ApiKeyComponent,
-        AppComponent,
         AttachmentsComponent,
         AutofocusDirective,
         AvatarComponent,
@@ -457,6 +455,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         DisableSendPolicyComponent,
         SendOptionsPolicyComponent,
         ResetPasswordPolicyComponent,
+        VaultTimeoutInputComponent,
     ],
     exports: [
         A11yTitleDirective,

src/app/services/services.module.ts

@@ -124,7 +124,7 @@ const sendService = new SendService(cryptoService, userService, apiService, file
     i18nService, cryptoFunctionService);
 const vaultTimeoutService = new VaultTimeoutService(cipherService, folderService, collectionService,
     cryptoService, platformUtilsService, storageService, messagingService, searchService, userService, tokenService,
-    null, async () => messagingService.send('logout', { expired: false }));
+    policyService, null, async () => messagingService.send('logout', { expired: false }));
 const syncService = new SyncService(userService, apiService, settingsService,
     folderService, cipherService, cryptoService, collectionService, storageService, messagingService, policyService,
     sendService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));

src/app/settings/options.component.html

@@ -5,13 +5,8 @@
 <form (ngSubmit)="submit()" ngNativeValidate>
     <div class="row">
         <div class="col-6">
-            <div class="form-group">
-                <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
-                <select id="vaultTimeout" name="VaultTimeout" [(ngModel)]="vaultTimeout" class="form-control">
-                    <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
-                </select>
-                <small class="form-text text-muted">{{'vaultTimeoutDesc' | i18n}}</small>
-            </div>
+            <app-vault-timeout-input [vaultTimeouts]="vaultTimeouts" [formControl]="vaultTimeout" ngDefaultControl>
+            </app-vault-timeout-input>
         </div>
     </div>
     <div class="form-group">

src/app/settings/options.component.ts

@@ -2,6 +2,7 @@ import {
     Component,
     OnInit,
 } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 import { ToasterService } from 'angular2-toaster';
 
@@ -21,15 +22,16 @@ import { Utils } from 'jslib-common/misc/utils';
     templateUrl: 'options.component.html',
 })
 export class OptionsComponent implements OnInit {
-    vaultTimeout: number = null;
     vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
     enableFullWidth: boolean;
     locale: string;
-    vaultTimeouts: any[];
+    vaultTimeouts: { name: string; value: number; }[];
     localeOptions: any[];
 
+    vaultTimeout: FormControl = new FormControl(null);
+
     private startingLocale: string;
 
     constructor(private storageService: StorageService, private stateService: StateService,
@@ -63,7 +65,7 @@ export class OptionsComponent implements OnInit {
     }
 
     async ngOnInit() {
-        this.vaultTimeout = await this.storageService.get<number>(ConstantsService.vaultTimeoutKey);
+        this.vaultTimeout.setValue(await this.vaultTimeoutService.getVaultTimeout());
         this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
         this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
@@ -72,8 +74,12 @@ export class OptionsComponent implements OnInit {
     }
 
     async submit() {
-        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout != null ? this.vaultTimeout : null,
-            this.vaultTimeoutAction);
+        if (!this.vaultTimeout.valid) {
+            this.toasterService.popAsync('error', null, this.i18nService.t('vaultTimeoutToLarge'));
+            return;
+        }
+
+        await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout.value, this.vaultTimeoutAction);
         await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.storageService.save('enableGravatars', this.enableGravatars);

src/app/settings/vault-timeout-input.component.html

@@ -0,0 +1,28 @@
+<app-callout type="info" *ngIf="vaultTimeoutPolicy">
+    {{'vaultTimeoutPolicyInEffect' | i18n : vaultTimeoutPolicyHours : vaultTimeoutPolicyMinutes}}
+</app-callout>
+
+<div [formGroup]="form">
+    <div class="form-group">
+        <label for="vaultTimeout">{{'vaultTimeout' | i18n}}</label>
+        <select id="vaultTimeout" name="VaultTimeout" formControlName="vaultTimeout" class="form-control">
+            <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{o.name}}</option>
+        </select>
+        <small class="form-text text-muted">{{'vaultTimeoutDesc' | i18n}}</small>
+    </div>
+    <div class="form-group" *ngIf="showCustom" formGroupName="custom">
+        <label for="customVaultTimeout">{{'customVaultTimeout' | i18n}}</label>
+        <div class="row">
+            <div class="col-6">
+                <input id="hours" class="form-control" type="number" min="0" name="hours"
+                    formControlName="hours">
+                <small>{{'hours' | i18n }}</small>
+            </div>
+            <div class="col-6">
+                <input id="minutes" class="form-control" type="number" min="0" max="59" name="minutes"
+                    formControlName="minutes">
+                <small>{{'minutes' | i18n }}</small>
+            </div>
+        </div>
+    </div>
+</div>

src/app/settings/vault-timeout-input.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import {
+    NG_VALIDATORS,
+    NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+import {
+    VaultTimeoutInputComponent as VaultTimeoutInputComponentBase
+} from 'jslib-angular/components/settings/vault-timeout-input.component';
+
+@Component({
+    selector: 'app-vault-timeout-input',
+    templateUrl: 'vault-timeout-input.component.html',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: VaultTimeoutInputComponent,
+        },
+        {
+            provide: NG_VALIDATORS,
+            multi: true,
+            useExisting: VaultTimeoutInputComponent,
+        },
+    ],
+})
+export class VaultTimeoutInputComponent extends VaultTimeoutInputComponentBase {
+}