change master password implementation

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

@@ -31,7 +31,7 @@
     <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>
+        <span *ngIf="tokenSent">{{'changeEmail' | i18n}}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" *ngIf="tokenSent" (click)="reset()">
         {{'cancel' | i18n}}

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

@@ -1 +1,29 @@
-change your password
+<div class="alert alert-warning" role="alert">
+    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+    <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
+</div>
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
+    <div class="row">
+        <div class="col-6">
+            <div class="form-group">
+                <label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
+                <input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="currentMasterPassword"
+                    required>
+            </div>
+            <div class="form-group">
+                <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
+                <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control" [(ngModel)]="newMasterPassword"
+                    required>
+            </div>
+            <div class="form-group">
+                <label for="confirmNewMasterPassword">{{'confirmNewMasterPass' | i18n}}</label>
+                <input id="confirmNewMasterPassword" type="password" name="ConfirmNewMasterPasswordHash" class="form-control" [(ngModel)]="confirmNewMasterPassword"
+                    required>
+            </div>
+        </div>
+    </div>
+    <button type="submit" class="btn btn-primary btn-submit" appBlurClick [disabled]="form.loading">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{'changeMasterPassword' | i18n}}</span>
+    </button>
+</form>

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

@@ -6,19 +6,66 @@ 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 { UserService } from 'jslib/abstractions/user.service';
+import { PasswordRequest } from 'jslib/models/request/passwordRequest';
 
 @Component({
     selector: 'app-change-password',
     templateUrl: 'change-password.component.html',
 })
 export class ChangePasswordComponent {
+    currentMasterPassword: string;
+    newMasterPassword: string;
+    confirmNewMasterPassword: string;
     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,
+        private userService: UserService) { }
 
     async submit() {
+        const hasKey = await this.cryptoService.hasKey();
+        if (!hasKey) {
+            this.toasterService.popAsync('error', null, this.i18nService.t('updateKey'));
+            return;
+        }
 
+        if (this.currentMasterPassword == null || this.currentMasterPassword === '' ||
+            this.newMasterPassword == null || this.newMasterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+        if (this.newMasterPassword.length < 8) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassLength'));
+            return;
+        }
+        if (this.newMasterPassword !== this.confirmNewMasterPassword) {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassDoesntMatch'));
+            return;
+        }
+
+        const request = new PasswordRequest();
+        request.masterPasswordHash = await this.cryptoService.hashPassword(this.currentMasterPassword, null);
+        const email = await this.userService.getEmail();
+        const newKey = await this.cryptoService.makeKey(this.newMasterPassword, email);
+        request.newMasterPasswordHash = await this.cryptoService.hashPassword(this.newMasterPassword, 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.postPassword(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Changed Password' });
+            this.toasterService.popAsync('success', this.i18nService.t('masterPasswordChanged'),
+                this.i18nService.t('logBackIn'));
+            this.messagingService.send('logout');
+        } catch { }
     }
 }

src/locales/en/messages.json

@@ -767,6 +767,9 @@
   "accountUpdated": {
     "message": "Account Updated"
   },
+  "changeEmail": {
+    "message": "Change Email"
+  },
   "newEmail": {
     "message": "New Email"
   },
@@ -790,5 +793,20 @@
   },
   "logBackIn": {
     "message": "Please log back in."
+  },
+  "changeMasterPassword": {
+    "message": "Change Master Password"
+  },
+  "masterPasswordChanged": {
+    "message": "Master Password Changed"
+  },
+  "currentMasterPass": {
+    "message": "Current Master Password"
+  },
+  "newMasterPass": {
+    "message": "New Master Password"
+  },
+  "confirmNewMasterPass": {
+    "message": "Confirm New Master Password"
   }
 }