change email components implemented

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

@@ -1 +1,39 @@
-change your email
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="row">
+        <div class="col-6">
+            <div class="form-group">
+                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
+                    [readonly]="tokenSent">
+            </div>
+            <div class="form-group">
+                <label for="newEmail">{{'newEmail' | i18n}}</label>
+                <input id="newEmail" class="form-control" type="text" name="NewEmail" [(ngModel)]="newEmail" required [readonly]="tokenSent">
+            </div>
+        </div>
+    </div>
+    <ng-container *ngIf="tokenSent">
+        <hr>
+        <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
+        <div class="alert alert-warning" role="alert">
+            <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+            <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <div class="form-group">
+                    <label for="token">{{'code' | i18n}}</label>
+                    <input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span *ngIf="!tokenSent">{{'continue' | i18n}}</span>
+        <span *ngIf="tokenSent">{{'submit' | i18n}}</span>
+    </button>
+    <button type="button" class="btn btn-outline-secondary" *ngIf="tokenSent" (click)="reset()">
+        {{'cancel' | i18n}}
+    </button>
+</form>

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

@@ -6,19 +6,70 @@ import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
+
+import { EmailRequest } from 'jslib/models/request/emailRequest';
+import { EmailTokenRequest } from 'jslib/models/request/emailTokenRequest';
 
 @Component({
     selector: 'app-change-email',
     templateUrl: 'change-email.component.html',
 })
 export class ChangeEmailComponent {
+    masterPassword: string;
+    newEmail: string;
+    token: string;
+    tokenSent = false;
+
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService) { }
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private messagingService: MessagingService) { }
 
     async submit() {
+        const hasKey = await this.cryptoService.hasKey();
+        if (!hasKey) {
+            this.toasterService.popAsync('error', null, this.i18nService.t('updateKey'));
+            return;
+        }
 
+        this.newEmail = this.newEmail.toLowerCase();
+        if (!this.tokenSent) {
+            const request = new EmailTokenRequest();
+            request.newEmail = this.newEmail;
+            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
+            try {
+                this.formPromise = this.apiService.postEmailToken(request);
+                await this.formPromise;
+                this.tokenSent = true;
+            } catch { }
+        } else {
+            const request = new EmailRequest();
+            request.token = this.token;
+            request.newEmail = this.newEmail;
+            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, null);
+            const newKey = await this.cryptoService.makeKey(this.masterPassword, this.newEmail);
+            request.newMasterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, newKey);
+            const encKey = await this.cryptoService.getEncKey();
+            const newEncKey = await this.cryptoService.encrypt(encKey.key, newKey);
+            request.key = newEncKey.encryptedString;
+            try {
+                this.formPromise = this.apiService.postEmail(request);
+                await this.formPromise;
+                this.reset();
+                this.analytics.eventTrack.next({ action: 'Changed Email' });
+                this.toasterService.popAsync('success', this.i18nService.t('emailChanged'),
+                    this.i18nService.t('logBackIn'));
+                this.messagingService.send('logout');
+            } catch { }
+        }
+    }
+
+    reset() {
+        this.token = this.newEmail = this.masterPassword = null;
+        this.tokenSent = false;
     }
 }

src/locales/en/messages.json

@@ -766,5 +766,29 @@
   },
   "accountUpdated": {
     "message": "Account Updated"
+  },
+  "newEmail": {
+    "message": "New Email"
+  },
+  "code": {
+    "message": "Code"
+  },
+  "changeEmailDesc": {
+    "message": "We have emailed a verification code to $EMAIL$. Please check your email for this code and enter it below to finalize your the email address change.",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "john.smith@example.com"
+      }
+    }
+  },
+  "loggedOutWarning": {
+    "message": "Proceeding will log you out of your current session, requiring you to log back in. Active sessions on other devices may continue to remain active for up to one hour."
+  },
+  "emailChanged": {
+    "message": "Email Changed"
+  },
+  "logBackIn": {
+    "message": "Please log back in."
   }
 }