rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide account warning after login + improve key storage wording

Browse Source
This commit is contained in:
Baptiste Grob
2021-02-03 11:53:52 +01:00
parent 117d414d6b
commit fab9ca2ad2
8 changed files with 156 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/components/NoAccountWarning.tsx
View File

@@ -1,17 +1,10 @@
import { WebApplication } from '@/ui_models/application';
import { toDirective, useAutorunValue } from './utils'; import { toDirective, useAutorunValue } from './utils';
import Close from '../../icons/ic_close.svg'; import Close from '../../icons/ic_close.svg';
import { AppState } from '@/ui_models/app_state'; import { AppState } from '@/ui_models/app_state';
function NoAccountWarning({ function NoAccountWarning({ appState }: { appState: AppState }) {
application,
appState,
}: {
application: WebApplication;
appState: AppState;
}) {
const canShow = useAutorunValue(() => appState.noAccountWarning.show); const canShow = useAutorunValue(() => appState.noAccountWarning.show);
if (!canShow || application.hasAccount()) { if (!canShow) {
return null; return null;
} }
return ( return (

33
app/assets/javascripts/directives/views/accountMenu.ts
View File

@@ -17,10 +17,11 @@ import {
StringImportError, StringImportError,
STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE, STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
STRING_UNSUPPORTED_BACKUP_FILE_VERSION STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
Strings
} from '@/strings'; } from '@/strings';
import { PasswordWizardType } from '@/types'; import { PasswordWizardType } from '@/types';
import { BackupFile, ContentType } from '@standardnotes/snjs'; import { BackupFile, ContentType, Platform } from '@standardnotes/snjs';
import { confirmDialog, alertDialog } from '@/services/alertService'; import { confirmDialog, alertDialog } from '@/services/alertService';
import { autorun, IReactionDisposer } from 'mobx'; import { autorun, IReactionDisposer } from 'mobx';
import { storage, StorageKey } from '@/services/localStorage'; import { storage, StorageKey } from '@/services/localStorage';
@@ -30,8 +31,6 @@ import {
errorReportingId errorReportingId
} from '@/services/errorReporting'; } from '@/services/errorReporting';
const ELEMENT_ID_IMPORT_PASSWORD_INPUT = 'import-password-request';
const ELEMENT_NAME_AUTH_EMAIL = 'email'; const ELEMENT_NAME_AUTH_EMAIL = 'email';
const ELEMENT_NAME_AUTH_PASSWORD = 'password'; const ELEMENT_NAME_AUTH_PASSWORD = 'password';
const ELEMENT_NAME_AUTH_PASSWORD_CONF = 'password_conf'; const ELEMENT_NAME_AUTH_PASSWORD_CONF = 'password_conf';
@@ -62,16 +61,17 @@ type AccountMenuState = {
user: any; user: any;
mutable: any; mutable: any;
importData: any; importData: any;
encryptionStatusString: string; encryptionStatusString?: string;
server: string; server?: string;
encryptionEnabled: boolean; encryptionEnabled?: boolean;
selectedAutoLockInterval: any; selectedAutoLockInterval?: unknown;
showBetaWarning: boolean; showBetaWarning: boolean;
errorReportingEnabled: boolean; errorReportingEnabled: boolean;
syncInProgress: boolean; syncInProgress: boolean;
syncError: string; syncError?: string;
showSessions: boolean; showSessions: boolean;
errorReportingId: string | null; errorReportingId: string | null;
keyStorageInfo: string | null;
} }
class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> { class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
@@ -95,8 +95,8 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
getInitialState() { getInitialState() {
return { return {
appVersion: 'v' + ((window as any).electronAppVersion || this.appVersion), appVersion: 'v' + ((window as any).electronAppVersion || this.appVersion),
passcodeAutoLockOptions: this.application!.getAutolockService().getAutoLockIntervalOptions(), passcodeAutoLockOptions: this.application.getAutolockService().getAutoLockIntervalOptions(),
user: this.application!.getUser(), user: this.application.getUser(),
formData: { formData: {
mergeLocal: true, mergeLocal: true,
ephemeral: false, ephemeral: false,
@@ -106,7 +106,10 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
errorReportingEnabled: storage.get(StorageKey.DisableErrorReporting) === false, errorReportingEnabled: storage.get(StorageKey.DisableErrorReporting) === false,
showSessions: false, showSessions: false,
errorReportingId: errorReportingId(), errorReportingId: errorReportingId(),
} as AccountMenuState; keyStorageInfo: Strings.keyStorageInfo(this.application),
importData: null,
syncInProgress: false,
};
} }
getState() { getState() {
@@ -128,9 +131,9 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
refreshedCredentialState() { refreshedCredentialState() {
return { return {
user: this.application!.getUser(), user: this.application.getUser(),
canAddPasscode: !this.application!.isEphemeralSession(), canAddPasscode: !this.application.isEphemeralSession(),
hasPasscode: this.application!.hasPasscode(), hasPasscode: this.application.hasPasscode(),
showPasscodeForm: false showPasscodeForm: false
}; };
} }

128
app/assets/javascripts/strings.ts
View File

@@ -1,27 +1,45 @@
import { Platform, SNApplication } from '@standardnotes/snjs';
import { getPlatform, isDesktopApplication } from './utils';
/** @generic */ /** @generic */
export const STRING_SESSION_EXPIRED = "Your session has expired. New changes will not be pulled in. Please sign in to refresh your session."; export const STRING_SESSION_EXPIRED =
export const STRING_DEFAULT_FILE_ERROR = "Please use FileSafe or the Bold Editor to attach images and files. Learn more at standardnotes.org/filesafe."; 'Your session has expired. New changes will not be pulled in. Please sign in to refresh your session.';
export const STRING_GENERIC_SYNC_ERROR = "There was an error syncing. Please try again. If all else fails, try signing out and signing back in."; export const STRING_DEFAULT_FILE_ERROR =
'Please use FileSafe or the Bold Editor to attach images and files. Learn more at standardnotes.org/filesafe.';
export const STRING_GENERIC_SYNC_ERROR =
'There was an error syncing. Please try again. If all else fails, try signing out and signing back in.';
export function StringSyncException(data: any) { export function StringSyncException(data: any) {
return `There was an error while trying to save your items. Please contact support and share this message: ${JSON.stringify(data)}.`; return `There was an error while trying to save your items. Please contact support and share this message: ${JSON.stringify(
data
)}.`;
} }
/** @footer */ /** @footer */
export const STRING_NEW_UPDATE_READY = "A new update is ready to install. Please use the top-level 'Updates' menu to manage installation."; export const STRING_NEW_UPDATE_READY =
"A new update is ready to install. Please use the top-level 'Updates' menu to manage installation.";
/** @tags */ /** @tags */
export const STRING_DELETE_TAG = "Are you sure you want to delete this tag? Note: deleting a tag will not delete its notes."; export const STRING_DELETE_TAG =
'Are you sure you want to delete this tag? Note: deleting a tag will not delete its notes.';
/** @editor */ /** @editor */
export const STRING_SAVING_WHILE_DOCUMENT_HIDDEN = 'Attempting to save an item while the application is hidden. To protect data integrity, please refresh the application window and try again.'; export const STRING_SAVING_WHILE_DOCUMENT_HIDDEN =
export const STRING_DELETED_NOTE = "The note you are attempting to edit has been deleted, and is awaiting sync. Changes you make will be disregarded."; 'Attempting to save an item while the application is hidden. To protect data integrity, please refresh the application window and try again.';
export const STRING_INVALID_NOTE = "The note you are attempting to save can not be found or has been deleted. Changes you make will not be synced. Please copy this note's text and start a new note."; export const STRING_DELETED_NOTE =
export const STRING_ELLIPSES = "..."; 'The note you are attempting to edit has been deleted, and is awaiting sync. Changes you make will be disregarded.';
export const STRING_GENERIC_SAVE_ERROR = "There was an error saving your note. Please try again."; export const STRING_INVALID_NOTE =
export const STRING_DELETE_PLACEHOLDER_ATTEMPT = "This note is a placeholder and cannot be deleted. To remove from your list, simply navigate to a different note."; "The note you are attempting to save can not be found or has been deleted. Changes you make will not be synced. Please copy this note's text and start a new note.";
export const STRING_ARCHIVE_LOCKED_ATTEMPT = "This note is locked. If you'd like to archive it, unlock it, and try again."; export const STRING_ELLIPSES = '...';
export const STRING_UNARCHIVE_LOCKED_ATTEMPT = "This note is locked. If you'd like to archive it, unlock it, and try again."; export const STRING_GENERIC_SAVE_ERROR =
export const STRING_DELETE_LOCKED_ATTEMPT = "This note is locked. If you'd like to delete it, unlock it, and try again."; 'There was an error saving your note. Please try again.';
export const STRING_DELETE_PLACEHOLDER_ATTEMPT =
'This note is a placeholder and cannot be deleted. To remove from your list, simply navigate to a different note.';
export const STRING_ARCHIVE_LOCKED_ATTEMPT =
"This note is locked. If you'd like to archive it, unlock it, and try again.";
export const STRING_UNARCHIVE_LOCKED_ATTEMPT =
"This note is locked. If you'd like to archive it, unlock it, and try again.";
export const STRING_DELETE_LOCKED_ATTEMPT =
"This note is locked. If you'd like to delete it, unlock it, and try again.";
export function StringDeleteNote(title: string, permanently: boolean) { export function StringDeleteNote(title: string, permanently: boolean) {
return permanently return permanently
? `Are you sure you want to permanently delete ${title}?` ? `Are you sure you want to permanently delete ${title}?`
@@ -32,44 +50,78 @@ export function StringEmptyTrash(count: number) {
} }
/** @account */ /** @account */
export const STRING_ACCOUNT_MENU_UNCHECK_MERGE = "Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?"; export const STRING_ACCOUNT_MENU_UNCHECK_MERGE =
export const STRING_SIGN_OUT_CONFIRMATION = "Are you sure you want to end your session? This will delete all local items and extensions."; 'Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?';
export const STRING_ERROR_DECRYPTING_IMPORT = "There was an error decrypting your items. Make sure the password you entered is correct and try again."; export const STRING_SIGN_OUT_CONFIRMATION =
export const STRING_E2E_ENABLED = "End-to-end encryption is enabled. Your data is encrypted on your device first, then synced to your private cloud."; 'Are you sure you want to end your session? This will delete all local items and extensions.';
export const STRING_LOCAL_ENC_ENABLED = "Encryption is enabled. Your data is encrypted using your passcode before it is saved to your device storage."; export const STRING_ERROR_DECRYPTING_IMPORT =
export const STRING_ENC_NOT_ENABLED = "Encryption is not enabled. Sign in, register, or add a passcode lock to enable encryption."; 'There was an error decrypting your items. Make sure the password you entered is correct and try again.';
export const STRING_IMPORT_SUCCESS = "Your data has been successfully imported."; export const STRING_E2E_ENABLED =
export const STRING_REMOVE_PASSCODE_CONFIRMATION = "Are you sure you want to remove your application passcode?"; 'End-to-end encryption is enabled. Your data is encrypted on your device first, then synced to your private cloud.';
export const STRING_REMOVE_PASSCODE_OFFLINE_ADDENDUM = " This will remove encryption from your local data."; export const STRING_LOCAL_ENC_ENABLED =
export const STRING_NON_MATCHING_PASSCODES = "The two passcodes you entered do not match. Please try again."; 'Encryption is enabled. Your data is encrypted using your passcode before it is saved to your device storage.';
export const STRING_NON_MATCHING_PASSWORDS = "The two passwords you entered do not match. Please try again."; export const STRING_ENC_NOT_ENABLED =
export const STRING_GENERATING_LOGIN_KEYS = "Generating Login Keys..."; 'Encryption is not enabled. Sign in, register, or add a passcode lock to enable encryption.';
export const STRING_GENERATING_REGISTER_KEYS = "Generating Account Keys..."; export const STRING_IMPORT_SUCCESS =
export const STRING_INVALID_IMPORT_FILE = "Unable to open file. Ensure it is a proper JSON file and try again."; 'Your data has been successfully imported.';
export const STRING_REMOVE_PASSCODE_CONFIRMATION =
'Are you sure you want to remove your application passcode?';
export const STRING_REMOVE_PASSCODE_OFFLINE_ADDENDUM =
' This will remove encryption from your local data.';
export const STRING_NON_MATCHING_PASSCODES =
'The two passcodes you entered do not match. Please try again.';
export const STRING_NON_MATCHING_PASSWORDS =
'The two passwords you entered do not match. Please try again.';
export const STRING_GENERATING_LOGIN_KEYS = 'Generating Login Keys...';
export const STRING_GENERATING_REGISTER_KEYS = 'Generating Account Keys...';
export const STRING_INVALID_IMPORT_FILE =
'Unable to open file. Ensure it is a proper JSON file and try again.';
export function StringImportError(errorCount: number) { export function StringImportError(errorCount: number) {
return `Import complete. ${errorCount} items were not imported because there was an error decrypting them. Make sure the password is correct and try again.`; return `Import complete. ${errorCount} items were not imported because there was an error decrypting them. Make sure the password is correct and try again.`;
} }
export const STRING_UNSUPPORTED_BACKUP_FILE_VERSION = 'This backup file was created using an unsupported version of the application and cannot be imported here. Please update your application and try again.'; export const STRING_UNSUPPORTED_BACKUP_FILE_VERSION =
'This backup file was created using an unsupported version of the application and cannot be imported here. Please update your application and try again.';
/** @password_change */ /** @password_change */
export const STRING_FAILED_PASSWORD_CHANGE = "There was an error re-encrypting your items. Your password was changed, but not all your items were properly re-encrypted and synced. You should try syncing again. If all else fails, you should restore your notes from backup."; export const STRING_FAILED_PASSWORD_CHANGE =
'There was an error re-encrypting your items. Your password was changed, but not all your items were properly re-encrypted and synced. You should try syncing again. If all else fails, you should restore your notes from backup.';
export const STRING_CONFIRM_APP_QUIT_DURING_UPGRADE = export const STRING_CONFIRM_APP_QUIT_DURING_UPGRADE =
"The encryption upgrade is in progress. You may lose data if you quit the app. " + 'The encryption upgrade is in progress. You may lose data if you quit the app. ' +
"Are you sure you want to quit?"; 'Are you sure you want to quit?';
export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE = export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE =
"A passcode change is in progress. You may lose data if you quit the app. " + 'A passcode change is in progress. You may lose data if you quit the app. ' +
"Are you sure you want to quit?"; 'Are you sure you want to quit?';
export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL = export const STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL =
"A passcode removal is in progress. You may lose data if you quit the app. " + 'A passcode removal is in progress. You may lose data if you quit the app. ' +
"Are you sure you want to quit?"; 'Are you sure you want to quit?';
export const STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE = 'Encryption upgrade available'; export const STRING_UPGRADE_ACCOUNT_CONFIRM_TITLE =
'Encryption upgrade available';
export const STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT = export const STRING_UPGRADE_ACCOUNT_CONFIRM_TEXT =
'Encryption version 004 is available. ' + 'Encryption version 004 is available. ' +
'This version strengthens the encryption algorithms your account and ' + 'This version strengthens the encryption algorithms your account and ' +
'local storage use. To learn more about this upgrade, visit our ' + 'local storage use. To learn more about this upgrade, visit our ' +
'<a href="https://standardnotes.org/help/security" target="_blank">Security Upgrade page.</a>'; '<a href="https://standardnotes.org/help/security" target="_blank">Security Upgrade page.</a>';
export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade'; export const STRING_UPGRADE_ACCOUNT_CONFIRM_BUTTON = 'Upgrade';
export const Strings = {
keyStorageInfo(application: SNApplication): string | null {
if (!isDesktopApplication()) {
return null;
}
if (!application.hasAccount()) {
return null;
}
const platform = getPlatform();
const keychainName =
platform === Platform.WindowsDesktop
? 'credential manager'
: platform === Platform.MacDesktop
? 'keychain'
: 'password manager';
return `Your keys are currently stored in your operating system's ${keychainName}. Adding a passcode prevents even your operating system from reading them.`;
},
};

41
app/assets/javascripts/ui_models/app_state.ts
View File

@@ -10,10 +10,11 @@ import {
UuidString, UuidString,
SyncOpStatus, SyncOpStatus,
PrefKey, PrefKey,
SNApplication,
} from '@standardnotes/snjs'; } from '@standardnotes/snjs';
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { Editor } from '@/ui_models/editor'; import { Editor } from '@/ui_models/editor';
import { action, makeObservable, observable } from 'mobx'; import { action, makeObservable, observable, runInAction } from 'mobx';
import { Bridge } from '@/services/bridge'; import { Bridge } from '@/services/bridge';
import { storage, StorageKey } from '@/services/localStorage'; import { storage, StorageKey } from '@/services/localStorage';
@@ -47,7 +48,7 @@ class ActionsMenuState {
makeObservable(this, { makeObservable(this, {
hiddenExtensions: observable, hiddenExtensions: observable,
toggleExtensionVisibility: action, toggleExtensionVisibility: action,
deinit: action, reset: action,
}); });
} }
@@ -55,7 +56,7 @@ class ActionsMenuState {
this.hiddenExtensions[uuid] = !this.hiddenExtensions[uuid]; this.hiddenExtensions[uuid] = !this.hiddenExtensions[uuid];
} }
deinit() { reset() {
this.hiddenExtensions = {}; this.hiddenExtensions = {};
} }
} }
@@ -113,8 +114,26 @@ class AccountMenuState {
class NoAccountWarningState { class NoAccountWarningState {
show: boolean; show: boolean;
constructor() { constructor(application: SNApplication, appObservers: (() => void)[]) {
this.show = storage.get(StorageKey.ShowNoAccountWarning) ?? true; this.show = application.hasAccount()
? false
: storage.get(StorageKey.ShowNoAccountWarning) ?? true;
appObservers.push(
application.addEventObserver(async () => {
runInAction(() => {
this.show = false;
});
}, ApplicationEvent.SignedIn),
application.addEventObserver(async () => {
if (application.hasAccount()) {
runInAction(() => {
this.show = false;
});
}
}, ApplicationEvent.Started)
);
makeObservable(this, { makeObservable(this, {
show: observable, show: observable,
hide: action, hide: action,
@@ -146,10 +165,12 @@ export class AppState {
showBetaWarning: boolean; showBetaWarning: boolean;
readonly accountMenu = new AccountMenuState(); readonly accountMenu = new AccountMenuState();
readonly actionsMenu = new ActionsMenuState(); readonly actionsMenu = new ActionsMenuState();
readonly noAccountWarning = new NoAccountWarningState(); readonly noAccountWarning: NoAccountWarningState;
readonly sync = new SyncState(); readonly sync = new SyncState();
isSessionsModalVisible = false; isSessionsModalVisible = false;
private appEventObserverRemovers: (() => void)[] = [];
/* @ngInject */ /* @ngInject */
constructor( constructor(
$rootScope: ng.IRootScopeService, $rootScope: ng.IRootScopeService,
@@ -160,6 +181,10 @@ export class AppState {
this.$timeout = $timeout; this.$timeout = $timeout;
this.$rootScope = $rootScope; this.$rootScope = $rootScope;
this.application = application; this.application = application;
this.noAccountWarning = new NoAccountWarningState(
application,
this.appEventObserverRemovers
);
this.addAppEventObserver(); this.addAppEventObserver();
this.streamNotesAndTags(); this.streamNotesAndTags();
this.onVisibilityChange = () => { this.onVisibilityChange = () => {
@@ -193,10 +218,12 @@ export class AppState {
storage.remove(StorageKey.ShowBetaWarning); storage.remove(StorageKey.ShowBetaWarning);
this.noAccountWarning.reset(); this.noAccountWarning.reset();
} }
this.actionsMenu.deinit(); this.actionsMenu.reset();
this.unsubApp(); this.unsubApp();
this.unsubApp = undefined; this.unsubApp = undefined;
this.observers.length = 0; this.observers.length = 0;
this.appEventObserverRemovers.forEach((remover) => remover());
this.appEventObserverRemovers.length = 0;
if (this.rootScopeCleanup1) { if (this.rootScopeCleanup1) {
this.rootScopeCleanup1(); this.rootScopeCleanup1();
this.rootScopeCleanup2(); this.rootScopeCleanup2();

4
app/assets/javascripts/ui_models/application.ts
View File

@@ -12,7 +12,7 @@ import {
DeinitSource, DeinitSource,
} from '@standardnotes/snjs'; } from '@standardnotes/snjs';
import angular from 'angular'; import angular from 'angular';
import { getPlatformString } from '@/utils'; import { getPlatform, getPlatformString } from '@/utils';
import { AlertService } from '@/services/alertService'; import { AlertService } from '@/services/alertService';
import { WebDeviceInterface } from '@/web_device_interface'; import { WebDeviceInterface } from '@/web_device_interface';
import { import {
@@ -58,7 +58,7 @@ export class WebApplication extends SNApplication {
) { ) {
super( super(
bridge.environment, bridge.environment,
platformFromString(getPlatformString()), getPlatform(),
deviceInterface, deviceInterface,
WebCrypto, WebCrypto,
new AlertService(), new AlertService(),

6
app/assets/javascripts/utils.ts
View File

@@ -1,3 +1,5 @@
import { Platform, platformFromString } from "@standardnotes/snjs";
declare const process : { declare const process : {
env: { env: {
NODE_ENV: string | null | undefined NODE_ENV: string | null | undefined
@@ -26,6 +28,10 @@ export function getPlatformString() {
} }
} }
export function getPlatform(): Platform {
return platformFromString(getPlatformString());
}
let sharedDateFormatter: Intl.DateTimeFormat; let sharedDateFormatter: Intl.DateTimeFormat;
export function dateToLocalizedString(date: Date) { export function dateToLocalizedString(date: Date) {
if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) { if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {

2
app/assets/stylesheets/_main.scss
View File

@@ -94,6 +94,8 @@ a {
p { p {
overflow: auto; overflow: auto;
color: var(--sn-stylekit-paragraph-text-color);
margin: 0;
} }
.main-ui-view { .main-ui-view {

2
app/assets/templates/directives/account-menu.pug
View File

@@ -176,6 +176,8 @@
p.sk-p p.sk-p
| Add a passcode to lock the application and | Add a passcode to lock the application and
| encrypt on-device key storage. | encrypt on-device key storage.
p(ng-if='self.state.keyStorageInfo')
| {{self.state.keyStorageInfo}}
div(ng-if='!self.state.canAddPasscode') div(ng-if='!self.state.canAddPasscode')
p.sk-p p.sk-p
| Adding a passcode is not supported in temporary sessions. Please sign | Adding a passcode is not supported in temporary sessions. Please sign