simplify "keepass-request" component

src/electron-main/index.ts

@@ -27,12 +27,6 @@ export async function initApp(ctx: Context) {
         app.exit();
     }
 
-    if ((process.env.NODE_ENV as BuildEnvironment) === "development") {
-        app.on("web-contents-created", (webContentsCreatedEvent, contents) => {
-            contents.openDevTools();
-        });
-    }
-
     app.on("ready", async () => {
         const endpoints = await initEndpoints(ctx);
         const {checkForUpdatesAndNotify} = await endpoints.readConfig().toPromise();

src/electron-main/ipc-main-api.ts

@@ -71,20 +71,20 @@ export const initEndpoints = async (ctx: Context): Promise<Endpoints> => {
                 hasSavedPassword: !!password,
             };
         })()),
-        keePassRecordRequest: (payload) => from((async () => {
-            const client = new KeePassHttpClient(payload.keePassClientConf);
+        keePassRecordRequest: ({keePassClientConf, keePassRef, suppressErrors}) => from((async () => {
+            const client = new KeePassHttpClient(keePassClientConf);
             let response;
 
             try {
                 await client.testAssociate();
-                response = await client.getLogins({url: payload.keePassRef.url});
+                response = await client.getLogins({url: keePassRef.url});
             } catch (error) {
-                return handleKeePassRequestError(error, payload.suppressErrors);
+                return handleKeePassRequestError(error, suppressErrors);
             }
 
             if (response.Entries) {
                 for (const entry of response.Entries) {
-                    if (entry && entry.Uuid === payload.keePassRef.uuid) {
+                    if (entry && entry.Uuid === keePassRef.uuid) {
                         return {password: entry.Password};
                     }
                 }

src/electron-main/window.ts

@@ -69,6 +69,10 @@ export async function initBrowserWindow(ctx: Context): Promise<BrowserWindow> {
     // execute after handlers subscriptions
     await keepState(ctx, browserWindow);
 
+    if ((process.env.NODE_ENV as BuildEnvironment) === "development") {
+        browserWindow.webContents.openDevTools();
+    }
+
     return browserWindow;
 }
 

src/web/src/app/+accounts/account.component.html

@@ -1,13 +1,13 @@
 <protonmail-desktop-app-keepass-request
-    *ngIf="isPageLogin()"
+    *ngIf="(account$ | async).sync.pageType.type == 'login'"
     [keePassRef$]="passwordKeePassRef$"
     [keePassClientConf$]="keePassClientConf$"
     (passwordHandler)="onPassword($event)"
     [lock$]="passwordProgress$"
 ></protonmail-desktop-app-keepass-request>
 
 <protonmail-desktop-app-keepass-request
-    *ngIf="isPageUnlock()"
+    *ngIf="(account$ | async).sync.pageType.type == 'unlock'"
     [keePassRef$]="mailPasswordKeePassRef$"
     [keePassClientConf$]="keePassClientConf$"
     (passwordHandler)="onMailPassword($event)"

src/web/src/app/+accounts/account.component.ts

@@ -14,6 +14,7 @@ import {
 } from "_@web/src/app/store/reducers/options";
 import {State} from "_@web/src/app/store/reducers/accounts";
 import {ACCOUNTS_ACTIONS, NAVIGATION_ACTIONS} from "_@web/src/app/store/actions";
+import {BuildEnvironment} from "_@shared/model/common";
 
 @Component({
     selector: `protonmail-desktop-app-account`,
@@ -119,14 +120,6 @@ export class AccountComponent implements AfterViewInit, OnDestroy {
         this.optionsStore.dispatch(ACCOUNTS_ACTIONS.PageLoadingEnd({account, webView: this.webView}));
     }
 
-    isPageLogin() {
-        return this.account$.getValue().sync.pageType.type === "login";
-    }
-
-    isPageUnlock() {
-        return this.account$.getValue().sync.pageType.type === "unlock";
-    }
-
     onPassword(password: string) {
         this.optionsStore.dispatch(
             ACCOUNTS_ACTIONS.Login({pageType: "login", webView: this.webView, account: this.account$.getValue(), password}),
@@ -140,6 +133,10 @@ export class AccountComponent implements AfterViewInit, OnDestroy {
     }
 
     ngAfterViewInit() {
+        // if ((process.env.NODE_ENV as BuildEnvironment) === "development") {
+        //     this.webView.addEventListener("dom-ready", () => this.webView.openDevTools());
+        // }
+
         this.subscribePageLoadingEvents();
 
         this.webView.addEventListener("new-window", ({url}: any) => {

src/web/src/app/+accounts/accounts.module.ts

@@ -9,6 +9,7 @@ import {AccountComponent} from "./account.component";
 import {AccountTitleComponent} from "./account-title.component";
 import {AccountsEffects} from "./accounts.effects";
 import {AccountsGuard} from "./accounts.guard";
+import {KeePassRequestComponent} from "./keepass-request.component";
 
 @NgModule({
     imports: [
@@ -21,6 +22,7 @@ import {AccountsGuard} from "./accounts.guard";
         AccountsComponent,
         AccountComponent,
         AccountTitleComponent,
+        KeePassRequestComponent,
     ],
     providers: [
         AccountsGuard,

src/web/src/app/+shared/keepass-request.component.html → src/web/src/app/+accounts/keepass-request.component.html

@@ -1,12 +1,12 @@
 <div class="progress">
     <div>KeePass: {{ message || "Requesting..." }}</div>
-    <div class="progress-bar bg-success" role="progressbar" [style.width.%]="tick"></div>
+    <div class="progress-bar bg-success" role="progressbar" [style.width.%]="progressTick"></div>
 </div>
 
-<div (click)="!locked && toggle()" class="control" [ngClass]="{locked: locked}">
+<div (click)="!locked && togglePause()" class="control" [ngClass]="{locked: locked}">
     <i class="fa" [ngClass]="{
         'fa-ban text-danger': locked,
-        'fa-pause text-warning': (counter$ | async | async),
-        'fa-play text-success': !(counter$ | async | async)
+        'fa-play text-success': paused && !locked,
+        'fa-pause text-warning': !paused && !locked
     }"></i>
 </div>

src/web/src/app/+shared/keepass-request.component.scss → src/web/src/app/+accounts/keepass-request.component.scss

@@ -6,7 +6,7 @@ $bg-color: #ffffff;
 $border-width: 1px;
 
 :host {
-    display: none;
+    display: block;
     position: relative;
     border: $border-width solid $fill-color;
     border-radius: $border-radius;

src/web/src/app/+accounts/keepass-request.component.ts

@@ -0,0 +1,97 @@
+import {BehaviorSubject, EMPTY, interval, Observable, Subject} from "rxjs";
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
+import {distinctUntilChanged, scan, switchMap, takeUntil, tap, withLatestFrom} from "rxjs/operators";
+import {Store} from "@ngrx/store";
+
+import {CORE_ACTIONS} from "_@web/src/app/store/actions";
+import {ElectronService} from "../+core/electron.service";
+import {KeePassClientConf, KeePassRef} from "_@shared/model/keepasshttp";
+import {State} from "_@web/src/app/store/reducers/root";
+
+@Component({
+    selector: `protonmail-desktop-app-keepass-request`,
+    templateUrl: "./keepass-request.component.html",
+    styleUrls: ["./keepass-request.component.scss"],
+})
+export class KeePassRequestComponent implements OnInit, OnDestroy {
+    paused = false;
+    locked = false;
+    message?: string;
+    wait = 10;
+    progressTick = 0;
+    passwodRequestTick = 0;
+
+    @Input()
+    keePassRef$: Observable<KeePassRef | undefined>;
+    @Input()
+    keePassClientConf$: Observable<KeePassClientConf>;
+    @Input()
+    locked$: Observable<boolean> = new BehaviorSubject(false);
+    @Output()
+    passwordHandler = new EventEmitter<string>();
+
+    unSubscribe$ = new Subject();
+
+    constructor(private store: Store<State>,
+                private electronService: ElectronService) {}
+
+    ngOnInit() {
+        this.keePassRef$
+            .pipe(
+                distinctUntilChanged(),
+                withLatestFrom(this.keePassClientConf$),
+                switchMap(([keePassRef, keePassClientConf]) => {
+                    if (!keePassRef) {
+                        return EMPTY;
+                    }
+
+                    return interval(1000).pipe(
+                        scan((remaining) => remaining ? remaining - (this.paused ? 0 : 1) : this.wait, this.wait),
+                        distinctUntilChanged(),
+                        switchMap((remaining) => {
+                            this.progressTick = (this.wait - remaining) * (100 / this.wait);
+                            if (remaining) {
+                                return EMPTY;
+                            }
+                            this.wait = this.wait < 30 ? 30 : 60;
+                            this.passwodRequestTick++;
+                            if (this.passwodRequestTick % 5 === 0) {
+                                this.paused = true;
+                            }
+                            return this.electronService.keePassPassword(keePassClientConf, keePassRef, true);
+                        }),
+                    );
+                }),
+                takeUntil(this.unSubscribe$),
+            )
+            .subscribe(
+                ({password, message}) => {
+                    if (password) {
+                        this.passwordHandler.emit(password);
+                        this.message = "Password received";
+                    } else {
+                        this.message = message;
+                    }
+                },
+                (err) => {
+                    this.store.dispatch(CORE_ACTIONS.Fail(err));
+                },
+            );
+
+        this.locked$
+            .pipe(takeUntil(this.unSubscribe$))
+            .subscribe((locked) => {
+                this.locked = locked;
+                this.togglePause(locked);
+            });
+    }
+
+    ngOnDestroy() {
+        this.unSubscribe$.next();
+        this.unSubscribe$.complete();
+    }
+
+    togglePause(forcedValue?: boolean) {
+        this.paused = typeof forcedValue !== "undefined" ? forcedValue : !this.paused;
+    }
+}