Add copy descriptions and warnings to policies (#470)

src/app/organizations/manage/policies.component.ts

@@ -44,20 +44,20 @@ export class PoliciesComponent implements OnInit {
         private router: Router) {
         this.policies = [
             {
-                name: 'Two-step Login',
-                description: 'Enforce two-step login options.',
+                name: i18nService.t('twoStepLogin'),
+                description: i18nService.t('twoStepLoginPolicyDesc'),
                 type: PolicyType.TwoFactorAuthentication,
                 enabled: false,
             },
             {
-                name: 'Master Password',
-                description: 'Set requirements on master password strength.',
+                name: i18nService.t('masterPass'),
+                description: i18nService.t('masterPassPolicyDesc'),
                 type: PolicyType.MasterPassword,
                 enabled: false,
             },
             {
-                name: 'Password Generator',
-                description: 'Limit the parameters of the password generator.',
+                name: i18nService.t('passwordGenerator'),
+                description: i18nService.t('passwordGeneratorPolicyDesc'),
                 type: PolicyType.PasswordGenerator,
                 enabled: false,
             },

src/app/organizations/manage/policy-edit.component.html

@@ -12,7 +12,11 @@
                 <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
-                <p class="text-muted">{{description}}</p>
+                <p>{{description}}</p>
+                <app-callout type="warning" *ngIf="type === policyType.TwoFactorAuthentication"
+                    title="{{'warning' | i18n}}" icon="fa-warning">
+                    {{'twoStepLoginPolicyWarning' | i18n}}
+                </app-callout>
                 <div class="form-group">
                     <div class="form-check">
                         <input class="form-check-input" type="checkbox" id="enabled" [(ngModel)]="enabled"

src/app/organizations/settings/two-factor-setup.component.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
@@ -20,8 +21,8 @@ import { TwoFactorSetupComponent as BaseTwoFactorSetupComponent } from '../../se
 export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     constructor(apiService: ApiService, userService: UserService,
         componentFactoryResolver: ComponentFactoryResolver, messagingService: MessagingService,
-        private route: ActivatedRoute) {
-        super(apiService, userService, componentFactoryResolver, messagingService);
+        policyService: PolicyService, private route: ActivatedRoute) {
+        super(apiService, userService, componentFactoryResolver, messagingService, policyService);
     }
 
     async ngOnInit() {

src/app/settings/two-factor-setup.component.html

@@ -15,6 +15,9 @@
         <span class="sr-only">{{'loading' | i18n}}</span>
     </small>
 </h2>
+<app-callout type="warning" *ngIf="showPolicyWarning">
+    {{'twoStepLoginPolicyUserWarning' | i18n}}
+</app-callout>
 <ul class="list-group list-group-2fa">
     <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
         <div class="logo-2fa d-flex justify-content-center">

src/app/settings/two-factor-setup.component.ts

@@ -9,10 +9,12 @@ import {
 
 import { ApiService } from 'jslib/abstractions/api.service';
 import { MessagingService } from 'jslib/abstractions/messaging.service';
+import { PolicyService } from 'jslib/abstractions/policy.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { TwoFactorProviders } from 'jslib/services/auth.service';
 
+import { PolicyType } from 'jslib/enums/policyType';
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
 import { ModalComponent } from '../modal.component';
@@ -39,12 +41,14 @@ export class TwoFactorSetupComponent implements OnInit {
     organizationId: string;
     providers: any[] = [];
     canAccessPremium: boolean;
+    showPolicyWarning = false;
     loading = true;
 
     private modal: ModalComponent = null;
 
     constructor(protected apiService: ApiService, protected userService: UserService,
-        protected componentFactoryResolver: ComponentFactoryResolver, protected messagingService: MessagingService) { }
+        protected componentFactoryResolver: ComponentFactoryResolver, protected messagingService: MessagingService,
+        protected policyService: PolicyService) { }
 
     async ngOnInit() {
         this.canAccessPremium = await this.userService.canAccessPremium();
@@ -83,6 +87,7 @@ export class TwoFactorSetupComponent implements OnInit {
                 }
             });
         });
+        this.evaluatePolicies();
         this.loading = false;
     }
 
@@ -166,5 +171,15 @@ export class TwoFactorSetupComponent implements OnInit {
                 p.enabled = enabled;
             }
         });
+        this.evaluatePolicies();
+    }
+
+    private async evaluatePolicies() {
+        if (this.organizationId == null && this.providers.filter((p) => p.enabled).length === 1) {
+            const policies = await this.policyService.getAll(PolicyType.TwoFactorAuthentication);
+            this.showPolicyWarning = policies != null && policies.some((p) => p.enabled);
+        } else {
+            this.showPolicyWarning = false;
+        }
     }
 }

src/locales/en/messages.json

@@ -2962,5 +2962,20 @@
   },
   "clone": {
     "message": "Clone"
+  },
+  "masterPassPolicyDesc": {
+    "message": "Set minimum requirements for master password strength."
+  },
+  "twoStepLoginPolicyDesc": {
+    "message": "Require users to set up two-step login on their personal accounts."
+  },
+  "twoStepLoginPolicyWarning": {
+    "message": "Organization members who do not have two-step login enabled for their personal account will be removed from the organization and will receive an email notifying them about the change."
+  },
+  "twoStepLoginPolicyUserWarning": {
+    "message": "You are a member of an organization that requires two-step login to be enabled on your user account. If you disable all two-step login providers you will be automatically removed from these organizations."
+  },
+  "passwordGeneratorPolicyDesc": {
+    "message": "Set minimum requirements for password generator configuration."
   }
 }