Add warning about 2FA when changing account email (#1186)

* Add warning about 2FA when changing account email

* Fix linting

* Fix code style and warning wording

src/app/settings/change-email.component.html

@@ -1,4 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <app-callout type="warning" *ngIf="showTwoFactorEmailWarning">
+        {{'changeEmailTwoFactorWarning' | i18n}}
+    </app-callout>
     <div class="row">
         <div class="col-6">
             <div class="form-group">

src/app/settings/change-email.component.ts

@@ -1,5 +1,6 @@
 import {
     Component,
+    OnInit,
 } from '@angular/core';
 
 import { ToasterService } from 'angular2-toaster';
@@ -13,15 +14,18 @@ import { UserService } from 'jslib-common/abstractions/user.service';
 import { EmailRequest } from 'jslib-common/models/request/emailRequest';
 import { EmailTokenRequest } from 'jslib-common/models/request/emailTokenRequest';
 
+import { TwoFactorProviderType } from 'jslib-common/enums';
+
 @Component({
     selector: 'app-change-email',
     templateUrl: 'change-email.component.html',
 })
-export class ChangeEmailComponent {
+export class ChangeEmailComponent implements OnInit {
     masterPassword: string;
     newEmail: string;
     token: string;
     tokenSent = false;
+    showTwoFactorEmailWarning = false;
 
     formPromise: Promise<any>;
 
@@ -29,6 +33,12 @@ export class ChangeEmailComponent {
         private toasterService: ToasterService, private cryptoService: CryptoService,
         private messagingService: MessagingService, private userService: UserService) { }
 
+    async ngOnInit() {
+        const twoFactorProviders = await this.apiService.getTwoFactorProviders();
+        this.showTwoFactorEmailWarning = twoFactorProviders.data.some(p => p.type === TwoFactorProviderType.Email &&
+            p.enabled);
+    }
+
     async submit() {
         const hasEncKey = await this.cryptoService.hasEncKey();
         if (!hasEncKey) {

src/locales/en/messages.json

@@ -899,6 +899,9 @@
   "changeEmail": {
     "message": "Change Email"
   },
+  "changeEmailTwoFactorWarning": {
+    "message": "Proceeding will change your account email address. It will not change the email address used for two-factor authentication. You can change this email address in the Two-Step Login settings."
+  },
   "newEmail": {
     "message": "New Email"
   },