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

refactor: migrate account-menu to react - implement functionality

Browse Source 
- link the new React component to the app's store
- setup correct initial values
- small fixes
This commit is contained in:
VardanHakobyan
2021-05-28 19:25:44 +04:00
parent e18f410fd2
commit 1194c73c49
3 changed files with 360 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

660
app/assets/javascripts/components/AccountMenu2.tsx
View File

@@ -2,13 +2,13 @@ import { observer } from 'mobx-react-lite';
import { toDirective } from '@/components/utils'; import { toDirective } from '@/components/utils';
import { AppState } from '@/ui_models/app_state'; import { AppState } from '@/ui_models/app_state';
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { useEffect, useRef, useState } from 'preact/hooks'; import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { User } from '@standardnotes/snjs/dist/@types/services/api/responses'; import { isDesktopApplication, isSameDay } from '@/utils';
import { isDesktopApplication } from '@/utils';
import { storage, StorageKey } from '@Services/localStorage'; import { storage, StorageKey } from '@Services/localStorage';
import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting'; import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
import { ConfirmSignoutDirective } from '@/components/ConfirmSignoutModal'; import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED, StringUtils } from '@/strings';
import { ContentType } from '@node_modules/@standardnotes/snjs';
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
// interface Props {} // TODO: Vardan: implement props and remove `eslint-disable` // interface Props {} // TODO: Vardan: implement props and remove `eslint-disable`
@@ -20,11 +20,33 @@ type Props = {
// const HistoryMenu = observer((props: Props) => { // const HistoryMenu = observer((props: Props) => {
// const AccountMenu = observer((props) => { // const AccountMenu = observer((props) => {
const AccountMenu = observer(({ appState, application }: Props) => { const AccountMenu = observer(({ appState, application }: Props) => {
const getProtectionsDisabledUntil = (): string | null => {
const protectionExpiry = application.getProtectionSessionExpiryDate();
const now = new Date();
if (protectionExpiry > now) {
let f: Intl.DateTimeFormat;
if (isSameDay(protectionExpiry, now)) {
f = new Intl.DateTimeFormat(undefined, {
hour: 'numeric',
minute: 'numeric'
});
} else {
f = new Intl.DateTimeFormat(undefined, {
weekday: 'long',
day: 'numeric',
month: 'short',
hour: 'numeric',
minute: 'numeric'
});
}
return f.format(protectionExpiry);
}
return null;
};
const passcodeInput = useRef<HTMLInputElement>(); // TODO: implement what is missing for `passcodeInput`, e.g. - autofocus
const passcodeInput = useRef<HTMLInputElement>();
// const { user, formData } = application;
// const [user, setUser] = useState(null); // TODO: Vardan: set correct type and initial value
const [user, setUser] = useState<User | undefined>(undefined); // TODO: Vardan: set correct type and initial value
// TODO: Vardan `showLogin` and `showRegister` were in `formData` in Angular code, check whether I need to write similarly // TODO: Vardan `showLogin` and `showRegister` were in `formData` in Angular code, check whether I need to write similarly
const [showLogin, setShowLogin] = useState(false); const [showLogin, setShowLogin] = useState(false);
const [showRegister, setShowRegister] = useState(false); const [showRegister, setShowRegister] = useState(false);
@@ -33,32 +55,41 @@ const AccountMenu = observer(({ appState, application }: Props) => {
const [password, setPassword] = useState<string | undefined>(undefined); const [password, setPassword] = useState<string | undefined>(undefined);
const [passwordConfirmation, setPasswordConfirmation] = useState<string | undefined>(undefined); const [passwordConfirmation, setPasswordConfirmation] = useState<string | undefined>(undefined);
const [status, setStatus] = useState(''); const [status, setStatus] = useState('');
const [syncError, setSyncError] = useState(''); const [syncError, setSyncError] = useState<string | undefined>(undefined);
const [server, setServer] = useState('');
const [notesAndTagsCount, setNotesAndTagsCount] = useState(0); const [server, setServer] = useState<string | undefined>(undefined);
const [isEncryptionEnabled, setIsEncryptionEnabled] = useState(false);
const [encryptionStatusString, setEncryptionStatusString] = useState('');
const [hasProtections, setHasProtections] = useState(false);
const [protectionsDisabledUntil, setProtectionsDisabledUntil] = useState<string | null>(null);
const [hasPasscode, setHasPasscode] = useState(false);
const [canAddPasscode, setCanAddPasscode] = useState(false);
const [showPasscodeForm, setShowPasscodeForm] = useState(false); const [showPasscodeForm, setShowPasscodeForm] = useState(false);
const [keyStorageInfo, setKeyStorageInfo] = useState<string | null>(null);
const [passcodeAutoLockOptions, setPasscodeAutoLockOptions] = useState<{value: number; label: string}[]>([]);
const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null); const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
const [isLoading, setIsLoading] = useState<unknown>(false); const [isLoading, setIsLoading] = useState<unknown>(false);
const [isErrorReportingEnabled, setIsErrorReportingEnabled] = useState(false); const [isErrorReportingEnabled, setIsErrorReportingEnabled] = useState(false);
const [appVersion, setAppVersion] = useState(''); // TODO: Vardan: figure out how to get `appVersion` similar to original code const [appVersion, setAppVersion] = useState(''); // TODO: Vardan: figure out how to get `appVersion` similar to original code
const [showBetaWarning, setShowBetaWarning] = useState(false);
const user = application.getUser();
const hasUser = application.hasAccount();
const hasPasscode = application.hasPasscode();
const isEncryptionEnabled = hasUser || hasPasscode;
const encryptionStatusString = hasUser
? STRING_E2E_ENABLED : hasPasscode
? STRING_LOCAL_ENC_ENABLED : STRING_ENC_NOT_ENABLED;
// TODO: Vardan: in original code initial value of `backupEncrypted` is `hasUser || hasPasscode` - // TODO: Vardan: in original code initial value of `backupEncrypted` is `hasUser || hasPasscode` -
// once I have those values here, set them as initial value // once I have those values here, set them as initial value
const [isBackupEncrypted, setIsBackupEncrypted] = useState(false); const [isBackupEncrypted, setIsBackupEncrypted] = useState(isEncryptionEnabled);
const [isSyncInProgress, setIsSyncInProgress] = useState(false); const [isSyncInProgress, setIsSyncInProgress] = useState(false);
const reloadAutoLockInterval = useCallback(async () => {
const interval = await application.getAutolockService().getAutoLockInterval();
setSelectedAutoLockInterval(interval);
}, [application]);
const errorReportingIdValue = errorReportingId(); const errorReportingIdValue = errorReportingId();
const protectionsDisabledUntil = getProtectionsDisabledUntil();
const canAddPasscode = !application.isEphemeralSession();
const keyStorageInfo = StringUtils.keyStorageInfo(application);
const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions();
const showBetaWarning = appState.showBetaWarning;
/* /*
const displayRegistrationForm = () => { const displayRegistrationForm = () => {
@@ -110,8 +141,8 @@ const AccountMenu = observer(({ appState, application }: Props) => {
}; };
const getEncryptionStatusForNotes = () => { const getEncryptionStatusForNotes = () => {
console.log('implement `getEncryptionStatusForNotes`'); const length = notesAndTagsCount;
return ''; return `${length}/${length} notes and tags encrypted`;
}; };
const enableProtections = () => { const enableProtections = () => {
@@ -192,23 +223,45 @@ const AccountMenu = observer(({ appState, application }: Props) => {
console.log('close this'); console.log('close this');
}; };
// TODO: check whether this works fine (e.g. remove all tags and notes and then add one and check whether UI behaves appropriately)
const notesAndTagsCount = application.getItems([ContentType.Note, ContentType.Tag]).length;
const hasProtections = application.hasProtectionSources();
// TODO: Vardan: this is as per `this.autorun` from `$onInit`, check whether it works
// I'm mostly concerned about having dependency, since I think it is running only once in original code
// (I suppose it runs here only once, too. But need to recheck)
useEffect(() => {
setSyncError(appState.sync.errorMessage);
setIsSyncInProgress(appState.sync.inProgress);
}, [appState.sync.errorMessage, appState.sync.inProgress]);
useEffect(() => { useEffect(() => {
// TODO: Vardan: get the real count setIsErrorReportingEnabled(storage.get(StorageKey.DisableErrorReporting) === false);
setNotesAndTagsCount(1);
}, []); }, []);
useEffect(() => { useEffect(() => {
setIsErrorReportingEnabled( storage.get(StorageKey.DisableErrorReporting) === false); // TODO: in original `AccountMenu`, the `appVersion` is available in constructor (the `window.electronAppVersion` is `undefined`).
// But I can't find where `appVersion` is passed to AccountMenu's constructor... The only place I found is `app.ts`, where
// it sets constant `appVersion` from `bridge.appVersion` - maybe constructor takes that value from there?
// Ask someone to explain that part.
// Here I just take the version from `application.bridge.appVersion`, as it is done in `app.ts`.
setAppVersion(`v${((window as any).electronAppVersion || application.bridge.appVersion)}`);
}, [appVersion, application.bridge.appVersion]);
useEffect(() => {
reloadAutoLockInterval();
}, [reloadAutoLockInterval]);
useEffect(() => {
setIsErrorReportingEnabled(storage.get(StorageKey.DisableErrorReporting) === false);
}, []); }, []);
/*
useEffect(() => { useEffect(() => {
setAppVersion(`v${((window as any).electronAppVersion || appVersion)}`); const host = application.getHost();
}, [appVersion]); setServer(host);
*/ }, [application]);
/* /*
const { searchOptions } = appState; const { searchOptions } = appState;
@@ -222,7 +275,7 @@ const AccountMenu = observer(({ appState, application }: Props) => {
return ( return (
<div style={{ <div style={{
top: '-250px', top: '-70px',
right: '-450px', right: '-450px',
width: '100px', width: '100px',
height: '100px', height: '100px',
@@ -257,7 +310,7 @@ const AccountMenu = observer(({ appState, application }: Props) => {
</button> </button>
</div> </div>
<div className='sk-panel-row sk-p'> <div className='sk-panel-row sk-p'>
Standard Notes is free on every platform, and comes<br /> Standard Notes is free on every platform, and comes
standard with sync and encryption. standard with sync and encryption.
</div> </div>
</div> </div>
@@ -275,7 +328,8 @@ const AccountMenu = observer(({ appState, application }: Props) => {
type='email' type='email'
placeholder='Email' placeholder='Email'
required required
spellCheck={false} /> spellCheck={false}
/>
<input className='sk-input contrast' <input className='sk-input contrast'
name='password' name='password'
type='password' type='password'
@@ -297,34 +351,37 @@ const AccountMenu = observer(({ appState, application }: Props) => {
onChange={handlePasswordConfirmationChange} onChange={handlePasswordConfirmationChange}
/>} />}
<div className='sk-panel-row' /> <div className='sk-panel-row' />
<a className="sk-panel-row sk-bold" onClick={() => {setShowAdvanced(showAdvanced => !showAdvanced)}}> <a className='sk-panel-row sk-bold' onClick={() => {
setShowAdvanced(showAdvanced => !showAdvanced);
}}>
Advanced Options Advanced Options
</a> </a>
</div> </div>
{showAdvanced && ( {showAdvanced && (
<div className="sk-notification unpadded contrast advanced-options sk-panel-row"> <div className='sk-notification unpadded contrast advanced-options sk-panel-row'>
<div className="sk-panel-column stretch"> <div className='sk-panel-column stretch'>
<div className="sk-notification-title sk-panel-row padded-row"> <div className='sk-notification-title sk-panel-row padded-row'>
Advanced Options Advanced Options
</div> </div>
<div className="bordered-row padded-row"> <div className='bordered-row padded-row'>
<label className="sk-label">Sync Server Domain</label> <label className='sk-label'>Sync Server Domain</label>
<input className="sk-input sk-base" <input className='sk-input sk-base'
name="server" name='server'
placeholder="Server URL" placeholder='Server URL'
onChange={handleHostInputChange} onChange={handleHostInputChange}
value={server}
required required
/> />
</div> </div>
{showLogin && ( {showLogin && (
<label className="sk-label padded-row sk-panel-row justify-left"> <label className='sk-label padded-row sk-panel-row justify-left'>
<div className="sk-horizontal-group tight"> <div className='sk-horizontal-group tight'>
<input className="sk-input" type="checkbox" onChange={handleChangeStrictSignIn} /> <input className='sk-input' type='checkbox' onChange={handleChangeStrictSignIn} />
<p className="sk-p">Use strict sign in</p> <p className='sk-p'>Use strict sign in</p>
<span> <span>
<a className="info" <a className='info'
href="https://standardnotes.org/help/security" rel="noopener" href='https://standardnotes.org/help/security' rel='noopener'
target="_blank" target='_blank'
> >
(Learn more) (Learn more)
</a> </a>
@@ -336,44 +393,45 @@ const AccountMenu = observer(({ appState, application }: Props) => {
</div> </div>
)} )}
{!isAuthenticating && ( {!isAuthenticating && (
<div className="sk-panel-section.form-submit"> <div className='sk-panel-section.form-submit'>
<button className="sn-button info text-base py-3 text-center" type="submit" disabled={isAuthenticating}> <button className='sn-button info text-base py-3 text-center' type='submit'
{showLogin ? "Sign In" : "Register"} disabled={isAuthenticating}>
{showLogin ? 'Sign In' : 'Register'}
</button> </button>
</div> </div>
)} )}
{showRegister && ( {showRegister && (
<div className="sk-notification neutral"> <div className='sk-notification neutral'>
<div className="sk-notification-title">No Password Reset.</div> <div className='sk-notification-title'>No Password Reset.</div>
<div className="sk-notification-text"> <div className='sk-notification-text'>
Because your notes are encrypted using your password,<br /> Because your notes are encrypted using your password,
Standard Notes does not have a password reset option.<br /> Standard Notes does not have a password reset option.
You cannot forget your password. You cannot forget your password.
</div> </div>
</div> </div>
)} )}
{status && ( {status && (
<div className="sk-panel-section no-bottom-pad"> <div className='sk-panel-section no-bottom-pad'>
<div className="sk-horizontal-group"> <div className='sk-horizontal-group'>
<div className="sk-spinner small neutral"> <div className='sk-spinner small neutral'>
<div className="sk-label">{status}</div> <div className='sk-label'>{status}</div>
</div> </div>
</div> </div>
</div> </div>
)} )}
{!isAuthenticating && ( {!isAuthenticating && (
<div className="sk-panel-section no-bottom-pad"> <div className='sk-panel-section no-bottom-pad'>
<label className="sk-panel-row justify-left"> <label className='sk-panel-row justify-left'>
<div className="sk-horizontal-group tight"> <div className='sk-horizontal-group tight'>
<input type="checkbox" onChange={handleChangeEphemeral} /> <input type='checkbox' onChange={handleChangeEphemeral} />
<p className="sk-p">Stay signed in</p> <p className='sk-p'>Stay signed in</p>
</div> </div>
</label> </label>
{notesAndTagsCount > 0 && ( {notesAndTagsCount > 0 && (
<label className="sk-panel-row.justify-left"> <label className='sk-panel-row.justify-left'>
<div className="sk-horizontal-group tight"> <div className='sk-horizontal-group tight'>
<input type="checkbox" onChange={handleMergeLocalData} /> <input type='checkbox' onChange={handleMergeLocalData} />
<p className="sk-p">Merge local data ({notesAndTagsCount}) notes and tags</p> <p className='sk-p'>Merge local data ({notesAndTagsCount}) notes and tags</p>
</div> </div>
</label> </label>
)} )}
@@ -384,19 +442,17 @@ const AccountMenu = observer(({ appState, application }: Props) => {
)} )}
{!showLogin && !showRegister && ( {!showLogin && !showRegister && (
<div> <div>
{user && ( {user && (
<> <div className='sk-panel-section'>
<div className="sk-panel-section">
{syncError && ( {syncError && (
<> <div className='sk-notification danger'>
<div className="sk-notification danger"> <div className='sk-notification-title'>Sync Unreachable</div>
<div className="sk-notification-title">Sync Unreachable</div> <div className='sk-notification-text'>
<div className="sk-notification-text"> Hmm...we can't seem to sync your account.
Hmm...we can't seem to sync your account.<br />
The reason: {syncError} The reason: {syncError}
</div> </div>
<a <a
className="sk-a info-contrast sk-bold sk-panel-row" className='sk-a info-contrast sk-bold sk-panel-row'
href='https://standardnotes.org/help' href='https://standardnotes.org/help'
rel='noopener' rel='noopener'
target='_blank' target='_blank'
@@ -404,262 +460,256 @@ const AccountMenu = observer(({ appState, application }: Props) => {
Need help? Need help?
</a> </a>
</div> </div>
<div className="sk-panel-row"> )}
<div className="sk-panel-column"> <div className='sk-panel-row'>
<div className="sk-h1 sk-bold wrap"> <div className='sk-panel-column'>
{user.email} <div className='sk-h1 sk-bold wrap'>
</div> {user.email}
<div className="sk-subtitle neutral"> </div>
{server} <div className='sk-subtitle neutral'>
</div> {server}
</div> </div>
</div> </div>
<div className="sk-panel-row" />
<a className="sk-a info sk-panel-row condensed" onClick={openPasswordWizard}>
Change Password
(Vardan) reached here
</a>
<a className="sk-a info sk-panel-row condensed" onClick={openSessionsModal}>
Manage Sessions
</a>
</>
)}
</div>
<div className="sk-panel-section">
<div className="sk-panel-section-title">
Encryption
</div> </div>
{isEncryptionEnabled && ( <div className='sk-panel-row' />
<div className="sk-panel-section-subtitle info"> <a className='sk-a info sk-panel-row condensed' onClick={openPasswordWizard}>
{getEncryptionStatusForNotes()} Change Password
</a>
<a className='sk-a info sk-panel-row condensed' onClick={openSessionsModal}>
Manage Sessions
</a>
</div>
)}
<div className='sk-panel-section'>
<div className='sk-panel-section-title'>
Encryption
</div>
{isEncryptionEnabled && (
<div className='sk-panel-section-subtitle info'>
{getEncryptionStatusForNotes()}
</div>
)}
<p className='sk-p'>
{encryptionStatusString}
</p>
</div>
{hasProtections && (
<div className='sk-panel-section'>
<div className='sk-panel-section-title'>Protections</div>
{protectionsDisabledUntil && (
<div className='sk-panel-section-subtitle info'>
Protections are disabled until {protectionsDisabledUntil}
</div> </div>
)} )}
<p className="sk-p"> {!protectionsDisabledUntil && (
{encryptionStatusString} <div className='sk-panel-section-subtitle info'>
Protections are enabled
</div>
)}
<p className='sk-p'>
Actions like viewing protected notes, exporting decrypted backups,
or revoking an active session, require additional authentication
like entering your account password or application passcode.
</p> </p>
{protectionsDisabledUntil && (
<div className='sk-panel-row'>
<button className='sn-button small.info' onClick={enableProtections}>
Enable protections
</button>
</div>
)}
</div> </div>
{hasProtections && ( )}
<div className="sk-panel-section"> <div className='sk-panel-section'>
<div className="sk-panel-section-title">Protections</div> <div className='sk-panel-section-title'>Passcode Lock</div>
{protectionsDisabledUntil && ( {!hasPasscode && (
<div className="sk-panel-section-subtitle info"> <div>
Protections are disabled until {protectionsDisabledUntil} {canAddPasscode && (
</div> <>
{!showPasscodeForm && (
<div className='sk-panel-row'>
<button className='sn-button small info' onClick={handleAddPassCode}>
Add Passcode
</button>
</div>
)}
<p className='sk-p'>
Add a passcode to lock the application and
encrypt on-device key storage.
</p>
{keyStorageInfo && (
<p>{keyStorageInfo}</p>
)}
</>
)} )}
{!protectionsDisabledUntil && ( {!canAddPasscode && (
<div className="sk-panel-section-subtitle info"> <p className='sk-p'>
Protections are enabled Adding a passcode is not supported in temporary sessions. Please sign
</div> out, then sign back in with the "Stay signed in" option checked.
)} </p>
<p className="sk-p">
Actions like viewing protected notes, exporting decrypted backups,<br />
or revoking an active session, require additional authentication<br />
like entering your account password or application passcode.
</p>
{protectionsDisabledUntil && (
<div className="sk-panel-row">
<button className="sn-button small.info" onClick={enableProtections}>
Enable protections
</button>
</div>
)} )}
</div> </div>
)} )}
<div className="sk-panel-section"> {showPasscodeForm && (
<div className="sk-panel-section-title">Passcode Lock</div> <form className='sk-panel-form' onSubmit={submitPasscodeForm}>
{!hasPasscode && ( <div className='sk-panel-row' />
<div> {/* TODO: Vardan: there are `should-focus` and `sn-autofocus`, implement them */}
{canAddPasscode && ( <input
<> className='sk-input contrast'
{showPasscodeForm && ( type='password'
<div className="sk-panel-row"> ref={passcodeInput}
<button className="sn-button.small.info" onClick={handleAddPassCode}> onChange={handlePasscodeChange}
Add Passcode placeholder='Passcode'
</button> />
</div> <input
)} className='sk-input contrast'
<p className="sk-p"> type='password'
Add a passcode to lock the application and<br /> onChange={handleConfirmPasscodeChange}
encrypt on-device key storage. placeholder='Confirm Passcode'
</p> />
{keyStorageInfo && ( <button className='sn-button small info mt-2' onClick={submitPasscodeForm}>
<p>{keyStorageInfo}</p> Set Passcode
)} </button>
</> <button className='sn-button small outlined ml-2' onClick={() => setShowPasscodeForm(false)}>
)} Cancel
{!canAddPasscode && ( </button>
<p className="sk-p"> </form>
Adding a passcode is not supported in temporary sessions. Please sign<br /> )}
out, then sign back in with the "Stay signed in" option checked. {hasPasscode && !showPasscodeForm && (
</p> <>
)} <div className='sk-panel-section-subtitle info'>Passcode lock is enabled</div>
<div className='sk-notification contrast'>
<div className='sk-notification-title'>Options</div>
<div className='sk-notification-text'>
<div className='sk-panel-row'>
<div className='sk-horizontal-group'>
<div className='sk-h4 sk-bold'>Autolock</div>
{passcodeAutoLockOptions.map(option => {
return (
<a
className={option.value === selectedAutoLockInterval ? 'boxed' : ''}
onClick={() => selectAutoLockInterval(option.value)}>
{option.label}
</a>
);
})}
</div>
</div>
<div className='sk-p'>The autolock timer begins when the window or tab loses focus.</div>
<div className='sk-panel-row' />
<a className='sk-a info sk-panel-row condensed' onClick={changePasscodePressed}>
Change Passcode
</a>
<a className='sk-a danger sk-panel-row condensed' onClick={removePasscodePressed}>
Remove Passcode
</a>
</div>
</div> </div>
)} </>
{showPasscodeForm && ( )}
<form className="sk-panel-form" onSubmit={submitPasscodeForm}> </div>
<div className="sk-panel-row" /> {!isLoading && (
{/* TODO: Vardan: there are `should-focus` and `sn-autofocus`, implement them */} <div className='sk-panel-section'>
<input <div className='sk-panel-section-title'>Data Backups</div>
className="sk-input contrast" <div className='sk-p'>Download a backup of all your data.</div>
type="password" {isEncryptionEnabled && (
ref={passcodeInput} <form className='sk-panel-form sk-panel-row'>
onChange={handlePasscodeChange} <div className='sk-input-group' />
placeholder="Passcode" <label className='sk-horizontal-group tight'>
/> <input
<input type='radio'
className="sk-input contrast" onChange={() => setIsBackupEncrypted(true)}
type="password" value='true'
onChange={handleConfirmPasscodeChange} checked={isBackupEncrypted}
placeholder="Confirm Passcode" />
/> <p className='sk-p'>Encrypted</p>
<button className="sn-button small info mt-2" onClick={submitPasscodeForm}> </label>
Set Passcode <label className='sk-horizontal-group tight'>
</button> <input
<button className="sn-button small outlined ml-2" onClick={() => setShowPasscodeForm(false)}> type='radio'
Cancel onChange={() => setIsBackupEncrypted(false)}
</button> value='false'
checked={!isBackupEncrypted}
/>
<p className='sk-p'>Decrypted</p>
</label>
</form> </form>
)} )}
{hasPasscode && !showPasscodeForm && ( <div className='sk-panel-row' />
<> <div className='flex'>
<div className="sk-panel-section-subtitle info">Passcode lock is enabled</div> <button className='sn-button small info' onClick={downloadDataArchive}>Download Backup</button>
<div className="sk-notification contrast"> <label className='sn-button small flex items-center info ml-2'>
<div className="sk-notification-title">Options</div> <input
<div className="sk-notification-text"> type='file'
<div className="sk-panel-row"> onChange={importFileSelected}
<div className="sk-horizontal-group"> style={{ display: 'none' }}
<div className="sk-h4 sk-bold">Autolock</div> />
{passcodeAutoLockOptions.map(option => { Import Backup
return ( </label>
<a </div>
className={option.value === selectedAutoLockInterval ? "boxed" : ""} {isDesktopApplication() && (
onClick={() => selectAutoLockInterval(option.value)}> <p className='mt-5'>
{option.label} Backups are automatically created on desktop and can be managed
</a> via the "Backups" top-level menu.
); </p>
})} )}
</div> <div className='sk-panel-row' />
</div> {isLoading && (
<div className="sk-p">The autolock timer begins when the window or tab loses focus.</div> <div className='sk-spinner small info' />
<div className="sk-panel-row" />
<a className="sk-a info sk-panel-row condensed" onClick={changePasscodePressed}>
Change Passcode
</a>
<a className="sk-a danger sk-panel-row condensed" onClick={removePasscodePressed}>
Remove Passcode
</a>
</div>
</div>
</>
)} )}
</div> </div>
{!isLoading && ( )}
<div className="sk-panel-section"> <div className='sk-panel-section'>
<div className="sk-panel-section-title">Data Backups</div> <div className='sk-panel-section-title'>Error Reporting</div>
<div className="sk-p">Download a backup of all your data.</div> <div className='sk-panel-section-subtitle info'>
{isEncryptionEnabled && ( Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'}
<form className="sk-panel-form sk-panel-row"> </div>
<div className="sk-input-group" /> <p className='sk-p'>
<label className="sk-horizontal-group tight"> Help us improve Standard Notes by automatically submitting
<input anonymized error reports.
type="radio" </p>
onChange={() => setIsBackupEncrypted(true)} {errorReportingIdValue && (
value="true" <>
checked={isBackupEncrypted} <p className='sk-p selectable'>
/> Your random identifier is
<p className="sk-p">Encrypted</p> strong {errorReportingIdValue}
</label> </p>
<label className="sk-horizontal-group tight"> <p className='sk-p'>
<input Disabling error reporting will remove that identifier from your
type="radio" local storage, and a new identifier will be created should you
onChange={() => setIsBackupEncrypted(false)} decide to enable error reporting again in the future.
value="false" </p>
checked={!isBackupEncrypted} </>
/>
<p className="sk-p">Decrypted</p>
</label>
</form>
)}
<div className="sk-panel-row" />
<div className="flex">
<button className="sn-button small info" onClick={downloadDataArchive}>Download Backup</button>
<label className="sn-button small flex items-center info ml-2">
<input
type="file"
onChange={importFileSelected}
style={{display: "none"}}
/>
Import Backup
</label>
</div>
{isDesktopApplication && (
<p className="mt-5">
Backups are automatically created on desktop and can be managed<br />
via the "Backups" top-level menu.
</p>
)}
<div className="sk-panel-row" />
{isLoading && (
<div className="sk-spinner small info" />
)}
</div>
)} )}
<div className="sk-panel-section"> <div className='sk-panel-row'>
<div className="sk-panel-section-title">Error Reporting</div> <button className='sn-button small info' onClick={toggleErrorReportingEnabled}>
<div className="sk-panel-section-subtitle info"> {isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting
Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'} </button>
</div>
<p className="sk-p">
Help us improve Standard Notes by automatically submitting<br />
anonymized error reports.
</p>
{errorReportingIdValue && (
<>
<p className="sk-p selectable">
Your random identifier is<br />
strong {errorReportingIdValue}
</p>
<p className="sk-p">
Disabling error reporting will remove that identifier from your<br />
local storage, and a new identifier will be created should you<br />
decide to enable error reporting again in the future.
</p>
</>
)}
<div className="sk-panel-row">
<button className="sn-button small info" onClick={toggleErrorReportingEnabled}>
{isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting
</button>
</div>
<div className="sk-panel-row">
<a className="sk-a" onClick={openErrorReportingDialog}>What data is being sent?</a>
</div>
</div> </div>
</> <div className='sk-panel-row'>
)} <a className='sk-a' onClick={openErrorReportingDialog}>What data is being sent?</a>
</div>
</div>
</div> </div>
)} )}
</div> </div>
{ <div className='sk-panel-footer'>
// TODO: Vardan: check whether this works <div className='sk-panel-row'>
() => ConfirmSignoutDirective <div className='sk-p left neutral'>
}
<div className="sk-panel-footer">
<div className="sk-panel-row">
<div className="sk-p left neutral">
<span>{appVersion}</span> <span>{appVersion}</span>
{showBetaWarning && ( {showBetaWarning && (
<span> <span>
<a className="sk-a" onClick={disableBetaWarning}>Hide beta warning</a> <a className='sk-a' onClick={disableBetaWarning}>Hide beta warning</a>
</span> </span>
)} )}
</div> </div>
{(showLogin || showRegister) && ( {(showLogin || showRegister) && (
<a className="sk-a right" onClick={hidePasswordForm}>Cancel</a> <a className='sk-a right' onClick={hidePasswordForm}>Cancel</a>
)} )}
{!showLogin && !showRegister && ( {!showLogin && !showRegister && (
<a className="sk-a right danger capitalize" onClick={signOut}> <a className='sk-a right danger capitalize' onClick={signOut}>
{user ? "Sign out" : "Clear session data"} {user ? 'Sign out' : 'Clear session data'}
</a> </a>
)} )}
</div> </div>

6
app/assets/javascripts/views/footer/footer-view.pug
View File

@@ -18,7 +18,11 @@
ng-if='ctrl.showAccountMenu', ng-if='ctrl.showAccountMenu',
application='ctrl.application' application='ctrl.application'
) )
account-menu2() account-menu2(
ng-click='$event.stopPropagation()',
app-state='ctrl.appState'
application='ctrl.application'
)
.sk-app-bar-item .sk-app-bar-item
a.no-decoration.sk-label.title( a.no-decoration.sk-label.title(
href='https://standardnotes.org/help', href='https://standardnotes.org/help',

1
app/assets/javascripts/views/footer/footer_view.ts
View File

@@ -438,7 +438,6 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
} }
accountMenuPressed() { accountMenuPressed() {
console.log('here');
this.appState.accountMenu.toggleShow(); this.appState.accountMenu.toggleShow();
this.appState.accountMenu2.toggleShow(); this.appState.accountMenu2.toggleShow();
this.closeAllRooms(); this.closeAllRooms();