make the master password setup form more informative, #309 [skip ci]

vladimiry · vladimiry · commit 5eb6559fe57b · 2020-08-02T06:38:15.000+03:00
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "electron-mail",
   "description": "Unofficial ProtonMail Desktop App",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "author": "Vladimir Yakovlev <desktop-app@protonmail.ch>",
   "license": "MIT",
   "homepage": "https://github.com/vladimiry/ElectronMail",
diff --git a/src/web/browser-window/app/_notification/notification-item.component.html b/src/web/browser-window/app/_notification/notification-item.component.html
@@ -1,31 +1,40 @@
 <div
     [ngClass]="{
-        'alert-danger': type === 'error' || type === 'errorMessage',
-        'alert-info': type === 'info',
-        'alert-secondary': type === 'update'
+        'alert-danger': item.type === 'error' || (item.type === 'message' && item.data.style === 'error'),
+        'alert-warning': item.type === 'message' && item.data.style === 'warning',
+        'alert-info': item.type === 'message' && item.data.style === 'info',
+        'alert-secondary': item.type === 'update'
     }"
     class="alert alert-dismissible"
     role="alert"
 >
-    <ng-container [ngSwitch]="type">
-        <ng-container *ngSwitchCase="'update'">
-            <div class="d-inline">
-                New app version available for download: <span [innerHTML]="message"></span>
-                <i
-                    [placement]="'bottom'"
-                    [popover]="popTemplate"
-                    class="fa fa-info-circle text-primary align-self-center"
-                    triggers="mouseenter:mouseleave"
-                ></i>
-                <ng-template #popTemplate>
-                    <p>When you follow the release link scroll down to the "Assets" section to see the installation packages list.</p>
-                    <p class="text-center">
-                        <img alt="Assets list" src="~images/assets-list.gif" style="max-width: 400px;">
-                    </p>
-                </ng-template>
-            </div>
+    <!-- TODO move to "ngSwitch" directive use on https://github.com/angular/angular/issues/20780 resolving -->
+    <ng-container *ngIf="item.type === 'update'">
+        <div class="d-inline">
+            New app version available for download: <span [innerHTML]="message"></span>
+            <i
+                [placement]="'bottom'"
+                [popover]="popTemplate"
+                class="fa fa-info-circle text-primary align-self-center"
+                triggers="mouseenter:mouseleave"
+            ></i>
+            <ng-template #popTemplate>
+                <p>If you see more than one version on the list it's normally fine to install the newest one.</p>
+                <p>When you follow the release link scroll down to the "Assets" section to see the installation packages list.</p>
+                <p class="text-center">
+                    <img alt="Assets list" src="~images/assets-list.gif" style="max-width: 400px;">
+                </p>
+            </ng-template>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="item.type === 'error'">
+        <span [innerText]="message"></span>
+    </ng-container>
+    <ng-container *ngIf="item.type === 'message'">
+        <ng-container [ngSwitch]="item.data.html">
+            <span *ngSwitchCase="true" [innerHTML]="message"></span>
+            <span *ngSwitchDefault [innerText]="message"></span>
         </ng-container>
-        <span *ngSwitchDefault [innerText]="message"></span>
     </ng-container>
     <button (click)="remove()" class="close" type="button">
         &times;
diff --git a/src/web/browser-window/app/_notification/notification-item.component.ts b/src/web/browser-window/app/_notification/notification-item.component.ts
@@ -11,8 +11,6 @@ import {NotificationItem} from "src/web/browser-window/app/store/actions/notific
     preserveWhitespaces: true,
 })
 export class NotificationItemComponent {
-    type: NotificationItem["type"] = "error";
-
     message = "";
 
     @Output()
@@ -24,12 +22,11 @@ export class NotificationItemComponent {
     private _item!: NotificationItem;
 
     @Input()
-    set item(value: NotificationItem) {
-        this._item = value;
-        this.type = value.type;
-        this.message = value.type === "update"
+    set item(item: NotificationItem) {
+        this._item = item;
+        this.message = item.type === "update"
             ? (
-                value.data
+                item.data
                     .map(({title, url, date}) => {
                         const hint = `Published at: ${formatDate(date, "medium", this.locale)}`;
                         return url
@@ -38,7 +35,11 @@ export class NotificationItemComponent {
                     })
                     .join(", ")
             )
-            : value.data.message;
+            : item.data.message;
+    }
+
+    get item(): NotificationItem {
+        return this._item;
     }
 
     remove(): void {
diff --git a/src/web/browser-window/app/_notification/notification.effects.ts b/src/web/browser-window/app/_notification/notification.effects.ts
@@ -17,8 +17,7 @@ export class NotificationEffects {
         () => merge(
             this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.Error)),
             this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.ErrorSkipLogging)),
-            this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.ErrorMessage)),
-            this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.Info)),
+            this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.Message)),
             this.actions$.pipe(filter(NOTIFICATION_ACTIONS.is.Update)),
         ).pipe(
             map(() => {
diff --git a/src/web/browser-window/app/_options/const.ts b/src/web/browser-window/app/_options/const.ts
@@ -0,0 +1,5 @@
+export const SAVE_PASSWORD_WARN_TRUSTED_HTML = [
+    `Activating <code>"Keep me signed in"</code> option enables saving the master password in the system's keychain.`,
+    `In general, storing the password on computer weakens the security but enables automatic login to the app`,
+    `so you don't have to manually enter the master password each time you start the app.`,
+].join(" ");
diff --git a/src/web/browser-window/app/_options/login-base.component.ts b/src/web/browser-window/app/_options/login-base.component.ts
@@ -7,6 +7,7 @@ import {filter, map, pairwise} from "rxjs/operators";
 import {NOTIFICATION_ACTIONS, OPTIONS_ACTIONS} from "src/web/browser-window/app/store/actions";
 import {ONE_SECOND_MS} from "src/shared/constants";
 import {OptionsSelectors} from "src/web/browser-window/app/store/selectors";
+import {SAVE_PASSWORD_WARN_TRUSTED_HTML} from "./const";
 import {State} from "src/web/browser-window/app/store/reducers/options";
 
 @Directive()
@@ -81,9 +82,7 @@ export abstract class LoginBaseComponent implements AfterViewInit, OnDestroy {
                 filter(([prev, curr]) => curr && Boolean(curr) !== Boolean(prev)),
             ).subscribe(() => {
                 this.store.dispatch(
-                    NOTIFICATION_ACTIONS.ErrorMessage({
-                        message: "Saving the master password on computer weakens the security.",
-                    }),
+                    NOTIFICATION_ACTIONS.Message({message: SAVE_PASSWORD_WARN_TRUSTED_HTML, style: "warning", html: true}),
                 );
             }),
         );
diff --git a/src/web/browser-window/app/_options/options.effects.ts b/src/web/browser-window/app/_options/options.effects.ts
@@ -44,10 +44,10 @@ export class OptionsEffects {
                                     this.coreService.logOut();
                                 },
                                 ErrorMessage: ({message}) => {
-                                    this.store.dispatch(NOTIFICATION_ACTIONS.ErrorMessage({message}));
+                                    this.store.dispatch(NOTIFICATION_ACTIONS.Message({message, style: "error"}));
                                 },
                                 InfoMessage: ({message}) => {
-                                    this.store.dispatch(NOTIFICATION_ACTIONS.Info({message}));
+                                    this.store.dispatch(NOTIFICATION_ACTIONS.Message({message, style: "info"}));
                                 },
                                 TrayIconDataURL: (payload) => {
                                     this.store.dispatch(OPTIONS_ACTIONS.TrayIconDataURL({value: payload}));
diff --git a/src/web/browser-window/app/_options/save-password-label.component.html b/src/web/browser-window/app/_options/save-password-label.component.html
@@ -2,25 +2,21 @@
     Keep me signed in
     <i
         *ngIf="savePassword" [placement]="'bottom'"
-        [popover]="popTemplate" class="fa fa-info-circle text-danger" container="body" triggers="mouseenter:mouseleave"
+        [popover]="popTemplate" class="fa fa-info-circle text-warning" container="body" triggers="mouseenter:mouseleave"
     ></i>
-    <ng-template #popTemplate>
-        Choosing <code>Keep me signed in</code> option enables saving the master password on your computer. It weakens
-        the security.
-    </ng-template>
+    <ng-template #popTemplate><span [innerHtml]="savePasswordWarnHtmlMessage"></span></ng-template>
 </ng-container>
 <ng-template #keytarUnsupportedTemplate>
     <code>Keep me signed in</code> feature is unsupported by the system,
-    <a (click)="toggleKeytarUnsupportedDetails($event)" href>toggle details</a>.
+    <a (click)="$event.preventDefault(); toggleKeytarUnsupportedDetails()" href>toggle details</a>.
     <div [collapse]="!keytarUnsupportedDetails" class="text-left">
         <ul>
             <li>
                 First of all please see <a href="https://github.com/vladimiry/ElectronMail/wiki/FAQ">FAQ</a> for more information.
             </li>
             <li>
-                See log file in
-                <a (click)="openSettingsFolder($event)" href>settings folder</a>
-                for details.
+                For details, see the <code>log.log</code> file located in the
+                <a (click)="$event.preventDefault(); openSettingsFolder()" href>settings folder</a>.
             </li>
             <li *ngIf="snapPasswordManagerServiceHint$ | async">
                 Try executing <code>sudo snap connect {{ projectName }}:password-manager-service</code>
diff --git a/src/web/browser-window/app/_options/save-password-label.component.ts b/src/web/browser-window/app/_options/save-password-label.component.ts
@@ -5,6 +5,7 @@ import {Subscription} from "rxjs";
 import {NAVIGATION_ACTIONS} from "src/web/browser-window/app/store/actions";
 import {OptionsSelectors} from "src/web/browser-window/app/store/selectors";
 import {PACKAGE_NAME} from "src/shared/constants";
+import {SAVE_PASSWORD_WARN_TRUSTED_HTML} from "./const";
 import {State} from "src/web/browser-window/app/store/reducers/options";
 import {getZoneNameBoundWebLogger} from "src/web/browser-window/util";
 
@@ -18,6 +19,8 @@ export class SavePasswordLabelComponent implements OnInit, OnDestroy {
 
     keytarUnsupportedDetails = false;
 
+    readonly savePasswordWarnHtmlMessage = SAVE_PASSWORD_WARN_TRUSTED_HTML;
+
     readonly keytarSupport$ = this.store.pipe(
         select(OptionsSelectors.FEATURED.keytarSupport),
     );
@@ -34,7 +37,7 @@ export class SavePasswordLabelComponent implements OnInit, OnDestroy {
 
     constructor(
         private readonly store: Store<State>,
-        private elementRef: ElementRef,
+        private readonly elementRef: ElementRef,
     ) {}
 
     ngOnInit(): void {
@@ -48,13 +51,11 @@ export class SavePasswordLabelComponent implements OnInit, OnDestroy {
         });
     }
 
-    openSettingsFolder(event: Event): void {
-        event.preventDefault();
+    openSettingsFolder(): void {
         this.store.dispatch(NAVIGATION_ACTIONS.OpenSettingsFolder());
     }
 
-    toggleKeytarUnsupportedDetails(event: Event): void {
-        event.preventDefault();
+    toggleKeytarUnsupportedDetails(): void {
         this.keytarUnsupportedDetails = !this.keytarUnsupportedDetails;
     }
 
diff --git a/src/web/browser-window/app/_options/settings-setup.component.html b/src/web/browser-window/app/_options/settings-setup.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex justify-content-center">
-    <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
+    <form [formGroup]="form" (ngSubmit)="submit()" novalidate class="p-3">
         <h2>Master Password Setup</h2>
         <fieldset [disabled]="(signingIn$ | async) || false">
             <div class="form-row">
@@ -23,6 +23,12 @@ <h2>Master Password Setup</h2>
                     </div>
                 </div>
             </div>
+            <div class="form-group text-muted">
+                The app uses this password to encrypt all the sensitive data to be stored in
+                the <a (click)="$event.preventDefault(); openSettingsFolder()" href>settings folder</a>.
+                All the files being produced and stored by the app listed in
+                the <a (click)="$event.preventDefault(); openFaq()" href>FAQ</a>.
+            </div>
             <button class="btn btn-lg btn-primary btn-block" type="submit" [disabled]="form.invalid">
                 <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="signingIn$ | async"></i>
                 Submit
diff --git a/src/web/browser-window/app/_options/settings-setup.component.ts b/src/web/browser-window/app/_options/settings-setup.component.ts
@@ -2,6 +2,7 @@ import {Component, Injector} from "@angular/core";
 import {FormControl, FormGroup, Validators} from "@angular/forms";
 
 import {LoginBaseComponent} from "src/web/browser-window/app/_options/login-base.component";
+import {NAVIGATION_ACTIONS} from "src/web/browser-window/app/store/actions";
 
 @Component({
     selector: "electron-mail-settings-setup",
@@ -35,4 +36,16 @@ export class SettingsSetupComponent extends LoginBaseComponent {
     ) {
         super(injector);
     }
+
+    openSettingsFolder(): void {
+        this.store.dispatch(
+            NAVIGATION_ACTIONS.OpenSettingsFolder(),
+        );
+    }
+
+    openFaq(): void {
+        this.store.dispatch(
+            NAVIGATION_ACTIONS.OpenExternal({url: "https://github.com/vladimiry/ElectronMail/wiki/FAQ"}),
+        );
+    }
 }
diff --git a/src/web/browser-window/app/store/actions/notification.ts b/src/web/browser-window/app/store/actions/notification.ts
@@ -4,15 +4,13 @@ import {IpcMainApiEndpoints, IpcMainServiceScan} from "src/shared/api/main";
 
 export type NotificationItem =
     | Readonly<{ type: "error"; data: Readonly<Error> }>
-    | Readonly<{ type: "errorMessage"; data: Readonly<{ message: string }> }>
-    | Readonly<{ type: "info"; data: Readonly<{ message: string }> }>
+    | Readonly<{ type: "message"; data: Readonly<{ message: string; style: "error" | "warning" | "info"; html?: boolean }> }>
     | Readonly<{ type: "update"; data: Readonly<IpcMainServiceScan["ApiImplReturns"]["updateCheck"]> }>;
 
 export const NOTIFICATION_ACTIONS = unionize({
         Error: ofType<Extract<NotificationItem, { type: "error" }>["data"]>(),
         ErrorSkipLogging: ofType<Extract<NotificationItem, { type: "error" }>["data"]>(),
-        ErrorMessage: ofType<Extract<NotificationItem, { type: "errorMessage" }>["data"]>(),
-        Info: ofType<Extract<NotificationItem, { type: "info" }>["data"]>(),
+        Message: ofType<Extract<NotificationItem, { type: "message" }>["data"]>(),
         Update: ofType<Extract<NotificationItem, { type: "update" }>["data"]>(),
         Remove: ofType<NotificationItem>(),
         UpdateOverlayIcon: ofType<Parameters<IpcMainApiEndpoints["updateOverlayIcon"]>[0]>(),
diff --git a/src/web/browser-window/app/store/reducers/notification.ts b/src/web/browser-window/app/store/reducers/notification.ts
@@ -16,7 +16,7 @@ const itemsLimit = 50;
 function addNotificationItem(state: State, item: NotificationItem, skipLogging?: true): State {
     const items = [...state.items];
 
-    if (item.type === "error" || item.type === "errorMessage") {
+    if (item.type === "error" || (item.type === "message" && item.data.style === "error")) {
         console.error(item); // eslint-disable-line no-console
     }
 
@@ -54,8 +54,7 @@ export function reducer(state = initialState, action: UnionOf<typeof NOTIFICATIO
     return NOTIFICATION_ACTIONS.match(action, {
         Error: (data) => addNotificationItem(state, {type: "error", data}),
         ErrorSkipLogging: (data) => addNotificationItem(state, {type: "error", data}, true),
-        ErrorMessage: (data) => addNotificationItem(state, {type: "errorMessage", data}),
-        Info: (data) => addNotificationItem(state, {type: "info", data}),
+        Message: (data) => addNotificationItem(state, {type: "message", data}),
         Update: (data) => addNotificationItem(state, {type: "update", data}),
         Remove: (item) => {
             const items = [...state.items];

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "electron-mail",`
`3`	`3`	`"description": "Unofficial ProtonMail Desktop App",`
`4`		`- "version": "4.8.0",`
	`4`	`+ "version": "4.8.1",`
`5`	`5`	`"author": "Vladimir Yakovlev <[email protected]>",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"homepage": "https://github.com/vladimiry/ElectronMail",`