Skip to content

Commit

Permalink
make the "persistent session" preffered auto-login scenario
Browse files Browse the repository at this point in the history 
* Enable "persistent session" toggle by default. So the "persistent session" becomes default auto log-in scenario.
* Hide the credentials inputs on the account edit form into the collapsed by default block. So the automatic credentials substitution into the @ProtonMail forms becomes obsolete auto log-in scenario.
* The change encourages the users to:
  - Enter the credentials manually the same way they do in a regular browser.
  - Not to store the account credentials in the app. Initially there was no "persistent session" feature in the app. But it got enabled in https://github.com/vladimiry/ElectronMail/releases/tag/v4.2.0 and since then proven to be a reliable auto log-in option.
  • Loading branch information
@vladimiry
vladimiry committed Feb 26, 2021
1 parent 1903c18 commit b16e58b
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 61 deletions.
136 changes: 77 additions & 59 deletions src/web/browser-window/app/_options/account-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,65 +65,13 @@
</ng-template>
</ng-select>
</div>
<div class="row">
<div *ngIf="!account" class="form-group col-sm-6 required">
<label>Login</label>
<input
[ngClass]="controls.login.dirty ? {'is-invalid': controls.login.invalid, 'is-valid': controls.login.valid} : {}"
class="form-control"
formControlName="login"
type="text"
>
</div>
<div [ngClass]="{'col-sm-6': !account, 'col-sm-12': account}" class="form-group">
<label>Password</label>
<input
[ngClass]="controls.password.dirty ? {'is-invalid': controls.password.invalid, 'is-valid': controls.password.valid} : {}"
class="form-control"
formControlName="password"
type="password"
>
</div>
</div>
<div class="form-group">
<label class="d-block pull-left">
Two-Factor secret key
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
placement="bottom"
popover="This is not the one time password your phone generates for you but a secret seed. Please follow the description link for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<a class="d-block pull-right" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/10">#10</a>
<div *ngIf="!account" class="form-group required">
<label>Login</label>
<input
[ngClass]="controls.twoFactorCode.dirty ? {'is-invalid': controls.twoFactorCode.invalid, 'is-valid': controls.twoFactorCode.valid} : {}"
[ngClass]="controls.login.dirty ? {'is-invalid': controls.login.invalid, 'is-valid': controls.login.valid} : {}"
class="form-control"
formControlName="twoFactorCode"
type="password"
>
</div>
<div class="form-group">
<label class="d-block pull-left">
Mailbox password
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
placement="bottom"
popover="This field is only relevant if you have two-password mode enabled for your account. Please follow the description links for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<div class="pull-right">
<a href="https://protonmail.com/support/knowledge-base/switch-two-password-mode/">description</a>,
<a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/138">#138</a>
</div>
<input
[ngClass]="controls.mailPassword.dirty ? {'is-invalid': controls.mailPassword.invalid, 'is-valid': controls.mailPassword.valid} : {}"
class="form-control"
formControlName="mailPassword"
type="password"
formControlName="login"
type="text"
>
</div>
<div class="form-group">
Expand All @@ -149,12 +97,12 @@
<accordion-group [isOpen]="false" heading="Advanced Options">
<div class="form-group">
<label class="d-block pull-left">
Handle button alias
Login alias
<i
class="fa fa-info-circle text-primary align-self-center"
container="body"
placement="bottom"
popover="If specified will be displayed in the UI instead of login."
popover="If specified will be displayed in the app UI instead of login"
triggers="mouseenter:mouseleave"
></i>
</label>
Expand Down Expand Up @@ -315,6 +263,76 @@
</label>
</div>
</accordion-group>
<accordion-group [isOpen]="false" heading="Account Credentials (obsolete)">
<div class="alert alert-warning">
<p>
It's recommended to keep the below credentials input fields empty since the preferred "auto-login into the account"
scenario is via the
<a href="https://github.com/vladimiry/ElectronMail/issues/227">persistent sessions</a> feature.
</p>
<p>
If you fill the below credentials values then the app will automatically fill in and submit the respective forms
when ProtonMail asks you to do so.
</p>
</div>
<div class="form-group">
<label>Password</label>
<input
[ngClass]="controls.password.dirty ? {'is-invalid': controls.password.invalid, 'is-valid': controls.password.valid} : {}"
class="form-control"
formControlName="password"
type="password"
>
</div>
<div class="form-group">
<label class="d-block pull-left">
Two-Factor secret key
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
placement="bottom"
popover="This is not the one time password your phone generates for you but a secret seed. Please follow the description link for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<a class="d-block pull-right" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/10">#10</a>
<input
[ngClass]="controls.twoFactorCode.dirty ? {'is-invalid': controls.twoFactorCode.invalid, 'is-valid': controls.twoFactorCode.valid} : {}"
class="form-control"
formControlName="twoFactorCode"
type="password"
>
</div>
<div class="form-group">
<label class="d-block pull-left">
Mailbox password
<i
class="fa fa-info-circle text-warning align-self-center"
container="body"
placement="bottom"
popover="This field is only relevant if you have two-password mode enabled for your account. Please follow the description links for details."
triggers="mouseenter:mouseleave"
></i>
</label>
<div class="pull-right">
<a href="https://protonmail.com/support/knowledge-base/switch-two-password-mode/">description</a>,
<a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/138">#138</a>
</div>
<input
[ngClass]="controls.mailPassword.dirty ? {'is-invalid': controls.mailPassword.invalid, 'is-valid': controls.mailPassword.valid} : {}"
class="form-control"
formControlName="mailPassword"
type="password"
>
</div>
<div class="text-muted">
<small>
The credentials stored encrypted in the <code>settings.bin</code> file located in the
<a (click)="$event.preventDefault(); openSettingsFolder();" href="{{ userDataDir }}">settings folder</a>.
See <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">FAQ</a> for details.
</small>
</div>
</accordion-group>
</accordion>
<div class="clearfix">
<button (click)="remove()" *ngIf="account" class="btn btn-sm btn-outline-danger pull-left" type="button">
Expand Down
9 changes: 7 additions & 2 deletions src/web/browser-window/app/_options/account-edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {concatMap, distinctUntilChanged, map, mergeMap} from "rxjs/operators";
import {ACCOUNT_EXTERNAL_CONTENT_PROXY_URL_REPLACE_PATTERN, PROTON_API_ENTRY_RECORDS} from "src/shared/constants";
import {AccountConfig} from "src/shared/model/account";
import {AccountConfigCreateUpdatePatch} from "src/shared/model/container";
import {OPTIONS_ACTIONS} from "src/web/browser-window/app/store/actions";
import {NAVIGATION_ACTIONS, OPTIONS_ACTIONS} from "src/web/browser-window/app/store/actions";
import {OptionsSelectors} from "src/web/browser-window/app/store/selectors";
import {PACKAGE_GITHUB_PROJECT_URL_TOKEN} from "src/web/browser-window/app/app.constants";
import {State} from "src/web/browser-window/app/store/reducers/options";
Expand All @@ -22,6 +22,7 @@ import {validateExternalContentProxyUrlPattern, validateLoginDelaySecondsRange}
preserveWhitespaces: true,
})
export class AccountEditComponent implements OnInit, OnDestroy {
readonly userDataDir = __METADATA__.electronLocations.userDataDir;
entryUrlItems = [...PROTON_API_ENTRY_RECORDS];
controls: Record<keyof Pick<AccountConfig,
| "customCSS"
Expand Down Expand Up @@ -71,7 +72,7 @@ export class AccountEditComponent implements OnInit, OnDestroy {
),
title: new FormControl(null),
database: new FormControl(null),
persistentSession: new FormControl(null),
persistentSession: new FormControl(true),
rotateUserAgent: new FormControl(null),
entryUrl: new FormControl(
null,
Expand Down Expand Up @@ -266,6 +267,10 @@ export class AccountEditComponent implements OnInit, OnDestroy {
this.store.dispatch(OPTIONS_ACTIONS.RemoveAccountRequest(account));
}

openSettingsFolder(): void {
this.store.dispatch(NAVIGATION_ACTIONS.OpenSettingsFolder());
}

ngOnDestroy(): void {
this.subscription.unsubscribe();
}
Expand Down

0 comments on commit b16e58b

Please sign in to comment.