[Key Connector] Add support for key connector and OTP (#1135)

Co-authored-by: Hinton <oscar@oscarhinton.com>

jslib

@@ -1 +1 @@
-Subproject commit 2db9e1ce0d7a702f07f20ecb916dd8191ff617e1
+Subproject commit 8f177e2d3a879b854db5c6e6d7d386b24d637a66

src/app/accounts/lock.component.ts

@@ -13,6 +13,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -43,9 +44,10 @@ export class LockComponent extends BaseLockComponent implements OnDestroy {
         environmentService: EnvironmentService, stateService: StateService,
         apiService: ApiService, private route: ActivatedRoute,
         private broadcasterService: BroadcasterService, private ngZone: NgZone,
-        logService: LogService) {
+        logService: LogService, keyConnectorService: KeyConnectorService) {
         super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
-            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService);
+            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService,
+            keyConnectorService);
     }
 
     async ngOnInit() {

src/app/accounts/remove-password.component.html

@@ -0,0 +1,18 @@
+<div id="remove-password-page" *ngIf="!loading">
+    <div class="content">
+        <h1>{{'removeMasterPassword' | i18n}}</h1>
+        <p>{{'convertOrganizationEncryptionDesc' | i18n : organization.name}}</p>
+        <div class="buttons">
+            <button type="submit" class="btn primary block" [disabled]="actionPromise" appBlurClick
+                (click)="convert()">
+                <b [hidden]="continuing">{{'removeMasterPassword' | i18n}}</b>
+                <i class="fa fa-spinner fa-spin" [hidden]="!continuing" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="btn secondary block" [disabled]="actionPromise" appBlurClick
+                (click)="leave()">
+                <b [hidden]="leaving">{{'leaveOrganization' | i18n}}</b>
+                <i class="fa fa-spinner fa-spin" [hidden]="!leaving" aria-hidden="true"></i>
+            </button>
+        </div>
+    </div>
+</div>

src/app/accounts/remove-password.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from 'jslib-angular/components/remove-password.component';
+
+@Component({
+    selector: 'app-remove-password',
+    templateUrl: 'remove-password.component.html',
+})
+export class RemovePasswordComponent extends BaseRemovePasswordComponent {
+}

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
 import { RegisterComponent } from './accounts/register.component';
+import { RemovePasswordComponent } from './accounts/remove-password.component';
 import { SetPasswordComponent } from './accounts/set-password.component';
 import { SsoComponent } from './accounts/sso.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
@@ -54,6 +55,12 @@ const routes: Routes = [
         component: UpdateTempPasswordComponent,
         canActivate: [AuthGuardService],
     },
+    {
+        path: 'remove-password',
+        component: RemovePasswordComponent,
+        canActivate: [AuthGuardService],
+        data: { titleId: 'removeMasterPassword' },
+    },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -30,6 +30,7 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EventService } from 'jslib-common/abstractions/event.service';
 import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { NotificationsService } from 'jslib-common/abstractions/notifications.service';
@@ -108,12 +109,13 @@ export class AppComponent implements OnInit {
         private searchService: SearchService, private notificationsService: NotificationsService,
         private platformUtilsService: PlatformUtilsService, private systemService: SystemService,
         private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService, private modalService: ModalService) { }
+        private policyService: PolicyService, private modalService: ModalService,
+        private keyConnectorService: KeyConnectorService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
             setTimeout(async () => {
-                await this.updateAppMenu();
+                await this.updateAppMenu('auth');
             }, 1000);
 
             window.onmousemove = () => this.recordActivity();
@@ -130,7 +132,7 @@ export class AppComponent implements OnInit {
                     case 'loggedIn':
                     case 'unlocked':
                         this.notificationsService.updateConnection();
-                        this.updateAppMenu();
+                        this.updateAppMenu('auth');
                         this.systemService.cancelProcessReload();
                         break;
                     case 'loggedOut':
@@ -138,7 +140,7 @@ export class AppComponent implements OnInit {
                             this.modal.close();
                         }
                         this.notificationsService.updateConnection();
-                        this.updateAppMenu();
+                        this.updateAppMenu('auth');
                         this.systemService.startProcessReload();
                         await this.systemService.clearPendingClipboard();
                         break;
@@ -158,7 +160,7 @@ export class AppComponent implements OnInit {
                         this.stateService.purge();
                         this.router.navigate(['lock']);
                         this.notificationsService.updateConnection();
-                        this.updateAppMenu();
+                        this.updateAppMenu('auth');
                         this.systemService.startProcessReload();
                         await this.systemService.clearPendingClipboard();
                         break;
@@ -168,6 +170,7 @@ export class AppComponent implements OnInit {
                     case 'syncStarted':
                         break;
                     case 'syncCompleted':
+                        await this.updateAppMenu('sync');
                         break;
                     case 'openSettings':
                         await this.openModal<SettingsComponent>(SettingsComponent, this.settingsRef);
@@ -269,6 +272,10 @@ export class AppComponent implements OnInit {
                             await this.openPasswordGenerator();
                         }
                         break;
+                    case 'convertAccountToKeyConnector':
+                        this.keyConnectorService.setConvertAccountRequired(true);
+                        this.router.navigate(['/remove-password']);
+                        break;
                 }
             });
         });
@@ -327,11 +334,20 @@ export class AppComponent implements OnInit {
         });
     }
 
-    private async updateAppMenu() {
+    private async updateAppMenu(type: 'auth' | 'sync') {
-        this.messagingService.send('updateAppMenu', {
+        let data: any;
-            isAuthenticated: await this.userService.isAuthenticated(),
+        if (type === 'sync') {
-            isLocked: await this.vaultTimeoutService.isLocked(),
+            data = {
-        });
+                enableChangeMasterPass: !await this.keyConnectorService.getUsesKeyConnector(),
+            };
+        } else {
+            data = {
+                isAuthenticated: await this.userService.isAuthenticated(),
+                isLocked: await this.vaultTimeoutService.isLocked(),
+            };
+        }
+
+        this.messagingService.send('updateAppMenu', data);
     }
 
     private async logOut(expired: boolean) {
@@ -352,6 +368,7 @@ export class AppComponent implements OnInit {
             this.vaultTimeoutService.clear(),
             this.stateService.purge(),
             this.policyService.clear(userId),
+            this.keyConnectorService.clear(),
         ]);
 
         this.vaultTimeoutService.biometricLocked = true;

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
 import { PremiumComponent } from './accounts/premium.component';
 import { RegisterComponent } from './accounts/register.component';
+import { RemovePasswordComponent } from './accounts/remove-password.component';
 import { SetPasswordComponent } from './accounts/set-password.component';
 import { SettingsComponent } from './accounts/settings.component';
 import { SsoComponent } from './accounts/sso.component';
@@ -32,6 +33,7 @@ import { VaultTimeoutInputComponent } from './accounts/vault-timeout-input.compo
 
 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
+import { VerifyMasterPasswordComponent } from 'jslib-angular/components/verify-master-password.component';
 
 import { A11yTitleDirective } from 'jslib-angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib-angular/directives/api-action.directive';
@@ -181,6 +183,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
     declarations: [
         A11yTitleDirective,
         AddEditComponent,
+        AddEditCustomFieldsComponent,
         ApiActionDirective,
         AppComponent,
         AttachmentsComponent,
@@ -206,14 +209,17 @@ registerLocaleData(localeZhTw, 'zh-TW');
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
         PasswordHistoryComponent,
+        PasswordRepromptComponent,
         PremiumComponent,
         RegisterComponent,
+        RemovePasswordComponent,
         SearchCiphersPipe,
         SelectCopyDirective,
         SendAddEditComponent,
-        SendEffluxDatesComponent,
         SendComponent,
+        SendEffluxDatesComponent,
         SetPasswordComponent,
+        SetPinComponent,
         SettingsComponent,
         ShareComponent,
         SsoComponent,
@@ -224,11 +230,9 @@ registerLocaleData(localeZhTw, 'zh-TW');
         TwoFactorOptionsComponent,
         UpdateTempPasswordComponent,
         VaultComponent,
-        ViewComponent,
-        PasswordRepromptComponent,
-        SetPinComponent,
         VaultTimeoutInputComponent,
-        AddEditCustomFieldsComponent,
+        VerifyMasterPasswordComponent,
+        ViewComponent,
         ViewCustomFieldsComponent,
     ],
     providers: [DatePipe],

src/app/services.module.ts

@@ -36,6 +36,7 @@ import { EventService } from 'jslib-common/services/event.service';
 import { ExportService } from 'jslib-common/services/export.service';
 import { FileUploadService } from 'jslib-common/services/fileUpload.service';
 import { FolderService } from 'jslib-common/services/folder.service';
+import { KeyConnectorService } from 'jslib-common/services/keyConnector.service';
 import { NotificationsService } from 'jslib-common/services/notifications.service';
 import { PasswordGenerationService } from 'jslib-common/services/passwordGeneration.service';
 import { PolicyService } from 'jslib-common/services/policy.service';
@@ -48,6 +49,7 @@ import { SystemService } from 'jslib-common/services/system.service';
 import { TokenService } from 'jslib-common/services/token.service';
 import { TotpService } from 'jslib-common/services/totp.service';
 import { UserService } from 'jslib-common/services/user.service';
+import { UserVerificationService } from 'jslib-common/services/userVerification.service';
 import { VaultTimeoutService } from 'jslib-common/services/vaultTimeout.service';
 import { WebCryptoFunctionService } from 'jslib-common/services/webCryptoFunction.service';
 
@@ -66,6 +68,7 @@ import { ExportService as ExportServiceAbstraction } from 'jslib-common/abstract
 import { FileUploadService as FileUploadServiceAbstraction }  from 'jslib-common/abstractions/fileUpload.service';
 import { FolderService as FolderServiceAbstraction } from 'jslib-common/abstractions/folder.service';
 import { I18nService as I18nServiceAbstraction } from 'jslib-common/abstractions/i18n.service';
+import { KeyConnectorService as KeyConnectorServiceAbstraction } from 'jslib-common/abstractions/keyConnector.service';
 import { LogService as LogServiceAbstraction } from 'jslib-common/abstractions/log.service';
 import { MessagingService as MessagingServiceAbstraction } from 'jslib-common/abstractions/messaging.service';
 import { NotificationsService as NotificationsServiceAbstraction } from 'jslib-common/abstractions/notifications.service';
@@ -85,6 +88,7 @@ import { SystemService as SystemServiceAbstraction } from 'jslib-common/abstract
 import { TokenService as TokenServiceAbstraction } from 'jslib-common/abstractions/token.service';
 import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions/totp.service';
 import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
+import { UserVerificationService as UserVerificationServiceAbstraction } from 'jslib-common/abstractions/userVerification.service';
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
 
 import { ThemeType } from 'jslib-common/enums/themeType';
@@ -120,17 +124,21 @@ searchService = new SearchService(cipherService, logService, i18nService);
 const sendService = new SendService(cryptoService, userService, apiService, fileUploadService, storageService,
     i18nService, cryptoFunctionService);
 const policyService = new PolicyService(userService, storageService, apiService);
+const keyConnectorService = new KeyConnectorService(storageService, userService, cryptoService, apiService,
+    environmentService, tokenService, logService);
 const vaultTimeoutService = new VaultTimeoutService(cipherService, folderService, collectionService,
     cryptoService, platformUtilsService, storageService, messagingService, searchService, userService, tokenService,
-    policyService, null, async () => messagingService.send('logout', { expired: false }));
+    policyService, keyConnectorService, null, async () => messagingService.send('logout', { expired: false }));
 const syncService = new SyncService(userService, apiService, settingsService,
     folderService, cipherService, cryptoService, collectionService, storageService, messagingService, policyService,
-    sendService, logService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));
+    sendService, logService, tokenService, keyConnectorService,
+    async (expired: boolean) => messagingService.send('logout', { expired: expired }));
 const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService, policyService);
 const totpService = new TotpService(storageService, cryptoFunctionService, logService);
 const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService, userService, tokenService, appIdService,
-    i18nService, platformUtilsService, messagingService, vaultTimeoutService, logService, cryptoFunctionService);
+    i18nService, platformUtilsService, messagingService, vaultTimeoutService, logService, cryptoFunctionService,
+    environmentService, keyConnectorService);
 const exportService = new ExportService(folderService, cipherService, apiService, cryptoService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
 const notificationsService = new NotificationsService(userService, syncService, appIdService,
@@ -229,6 +237,8 @@ export function initFactory(): Function {
         { provide: CryptoFunctionServiceAbstraction, useValue: cryptoFunctionService },
         { provide: NativeMessagingService, useValue: nativeMessagingService },
         { provide: FileUploadServiceAbstraction, useValue: fileUploadService },
+        { provide: KeyConnectorServiceAbstraction, useValue: keyConnectorService },
+        { provide: UserVerificationServiceAbstraction, useClass: UserVerificationService },
         { provide: PasswordRepromptServiceAbstraction, useClass: PasswordRepromptService },
         {
             provide: APP_INITIALIZER,

src/app/vault/add-edit.component.html

@@ -249,7 +249,7 @@
                         <label for="favorite">{{'favorite' | i18n}}</label>
                         <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite">
                     </div>
-                    <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                    <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="canUseReprompt">
                         <label for="passwordPrompt">{{'passwordPrompt' | i18n}}
                             <a href="#" appA11yTitle="{{'learnMore' | i18n}}" (click)="openHelpReprompt()">
                                 <i class="fa fa-question-circle-o" aria-hidden="true"></i>

src/app/vault/add-edit.component.ts

@@ -15,6 +15,7 @@ import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -39,10 +40,11 @@ export class AddEditComponent extends BaseAddEditComponent implements OnChanges,
         auditService: AuditService, stateService: StateService,
         userService: UserService, collectionService: CollectionService,
         messagingService: MessagingService, eventService: EventService,
-        policyService: PolicyService, private broadcasterService: BroadcasterService,
+        policyService: PolicyService, passwordRepromptService: PasswordRepromptService,
-        private ngZone: NgZone, logService: LogService) {
+        private broadcasterService: BroadcasterService, private ngZone: NgZone, logService: LogService) {
         super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
-            userService, collectionService, messagingService, eventService, policyService, logService);
+            userService, collectionService, messagingService, eventService, policyService, passwordRepromptService,
+            logService);
     }
 
     async ngOnInit() {

src/app/vault/export.component.html

@@ -1,6 +1,6 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="exportTitle">
     <div class="modal-dialog" role="document">
-        <form class="modal-content" #form (ngSubmit)="submit()">
+        <form class="modal-content" #form (ngSubmit)="submit()" [formGroup]="exportForm">
             <div class="modal-body">
                 <app-callout type="warning" title="{{'vaultExportDisabled' | i18n}}" *ngIf="disabledByPolicy">
                     {{'personalVaultExportPolicyInEffect' | i18n}}
@@ -12,25 +12,14 @@
                     <div class="box-content">
                         <div class="box-content-row" appBoxRow>
                             <label for="format">{{'fileFormat' | i18n}}</label>
-                            <select id="format" name="Format" [(ngModel)]="format" [disabled]="disabledByPolicy">
+                            <select class="form-control" id="format" name="Format" formControlName="format">
-                                <option value="json">.json</option>
+                                <option *ngFor="let f of formatOptions" [value]="f.value">{{f.name}}</option>
-                                <option value="csv">.csv</option>
-                                <option value="encrypted_json">.json (Encrypted)</option>
                             </select>
                         </div>
                         <div class="box-content-row box-content-row-flex" appBoxRow>
                             <div class="row-main">
-                                <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                                <app-verify-master-password ngDefaultControl formControlName="secret" name="secret">
-                                <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
+                                </app-verify-master-password>
-                                    name="MasterPassword" class="monospaced" [(ngModel)]="masterPassword" required
-                                    appAutofocus [disabled]="disabledByPolicy">
-                            </div>
-                            <div class="action-buttons">
-                                <a class="row-btn" href="#" appStopClick appBlurClick role="button"
-                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
-                                    <i class="fa fa-lg" aria-hidden="true"
-                                        [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
-                                </a>
                             </div>
                         </div>
                     </div>

src/app/vault/export.component.ts

@@ -1,8 +1,8 @@
 import {
     Component,
-    NgZone,
     OnInit,
 } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 
 import * as os from 'os';
 
@@ -13,6 +13,7 @@ import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
+import { UserVerificationService } from 'jslib-common/abstractions/userVerification.service';
 
 import { BroadcasterService } from 'jslib-angular/services/broadcaster.service';
 
@@ -28,34 +29,16 @@ export class ExportComponent extends BaseExportComponent implements OnInit {
     constructor(cryptoService: CryptoService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, exportService: ExportService,
         eventService: EventService, policyService: PolicyService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone,
+        userVerificationService: UserVerificationService, fb: FormBuilder,
-        logService: LogService) {
+        private broadcasterService: BroadcasterService, logService: LogService) {
         super(cryptoService, i18nService, platformUtilsService, exportService, eventService,
-            policyService, window, logService);
+            policyService, window, logService, userVerificationService, fb);
-    }
-
-    async ngOnInit() {
-        super.ngOnInit();
-        this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
-            this.ngZone.run(() => {
-                switch (message.command) {
-                    case 'windowHidden':
-                        this.onWindowHidden();
-                        break;
-                    default:
-                }
-            });
-        });
     }
 
     ngOnDestroy() {
         this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
     }
 
-    onWindowHidden() {
-        this.showPassword = false;
-    }
-
     async warningDialog() {
         if (this.encryptedFormat) {
             return await this.platformUtilsService.showDialog(

src/locales/en/messages.json

@@ -541,12 +541,18 @@
   "noItemsInList": {
     "message": "There are no items to list."
   },
+  "requestVerificationCode": {
+    "message": "Request one-time password"
+  },
   "verificationCode": {
     "message": "Verification Code"
   },
   "verificationCodeRequired": {
     "message": "Verification code is required."
   },
+  "invalidVerificationCode": {
+    "message": "Invalid verification code"
+  },
   "continue": {
     "message": "Continue"
   },
@@ -1747,5 +1753,29 @@
   },
   "personalVaultExportPolicyInEffect": {
     "message": "One or more organization policies prevents you from exporting your personal vault."
+  },
+  "removeMasterPassword": {
+    "message": "Remove Master Password"
+  },
+  "removedMasterPassword": {
+    "message": "Master password removed."
+  },
+  "convertOrganizationEncryptionDesc": {
+    "message": "$ORGANIZATION$ is using SSO with a self-hosted key server. A master password is no longer required to log in for members of this organization.",
+    "placeholders": {
+      "organization": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
+  "leaveOrganization": {
+    "message": "Leave Organization"
+  },
+  "leaveOrganizationConfirmation": {
+    "message": "Are you sure you want to leave this organization?"
+  },
+  "ssoKeyConnectorUnavailable": {
+    "message": "Unable to reach the key connector, try again later."
   }
 }

src/main/menu.main.ts

@@ -75,23 +75,29 @@ export class MenuMain extends BaseMenu {
             this.syncVault, this.exportVault, this.settings, this.lockNow, this.twoStepLogin, this.fingerprintPhrase,
             this.changeMasterPass, this.premiumMembership, this.passwordGenerator, this.passwordHistory,
             this.searchVault, this.copyUsername, this.copyPassword];
-        this.updateApplicationMenuState(false, true);
+        this.updateApplicationMenuState(false, true, true);
     }
 
-    updateApplicationMenuState(isAuthenticated: boolean, isLocked: boolean) {
+    updateApplicationMenuState(isAuthenticated: boolean, isLocked: boolean, enableChangeMasterPass: boolean) {
-        this.unlockedRequiredMenuItems.forEach((mi: MenuItem) => {
+        if (isAuthenticated != null && isLocked != null) {
-            if (mi != null) {
+            this.unlockedRequiredMenuItems.forEach((mi: MenuItem) => {
-                mi.enabled = isAuthenticated && !isLocked;
+                if (mi != null) {
+                    mi.enabled = isAuthenticated && !isLocked;
+                }
+            });
+
+            if (this.logOut != null) {
+                this.logOut.enabled = isAuthenticated;
             }
-        });
+        }
+
+        if (enableChangeMasterPass != null && this.changeMasterPass != null) {
+            this.changeMasterPass.enabled = enableChangeMasterPass;
+        }
 
         if (this.menu != null) {
             Menu.setApplicationMenu(this.menu);
         }
-
-        if (this.logOut != null) {
-            this.logOut.enabled = isAuthenticated;
-        }
     }
 
     private initApplicationMenu() {

src/main/messaging.main.ts

@@ -32,7 +32,8 @@ export class MessagingMain {
                 this.scheduleNextSync();
                 break;
             case 'updateAppMenu':
-                this.main.menuMain.updateApplicationMenuState(message.isAuthenticated, message.isLocked);
+                this.main.menuMain.updateApplicationMenuState(message.isAuthenticated, message.isLocked,
+                    message.enableChangeMasterPass);
                 this.updateTrayMenu(message.isAuthenticated, message.isLocked);
                 break;
             case 'minimizeOnCopy':

src/scss/pages.scss

@@ -1,6 +1,6 @@
 @import "variables.scss";
 
-#login-page, #lock-page, #sso-page, #set-password-page {
+#login-page, #lock-page, #sso-page, #set-password-page, #remove-password-page {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -23,7 +23,7 @@
     }
 }
 
-#register-page, #hint-page, #two-factor-page, #update-temp-password-page {
+#register-page, #hint-page, #two-factor-page, #update-temp-password-page, #remove-password-page {
     padding-top: 20px;
 
     .content {
@@ -136,7 +136,7 @@
     }
 }
 
-#set-password-page {
+#set-password-page, #remove-password-page {
     .content {
         width: 500px;
 
@@ -189,3 +189,9 @@
         width: 400px;
     }
 }
+
+#remove-password-page {
+    .content > p {
+        margin-bottom: 20px;
+    }
+}