1194c73c49
- link the new React component to the app's store - setup correct initial values - small fixes
726 lines
30 KiB
TypeScript
726 lines
30 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import { toDirective } from '@/components/utils';
|
|
import { AppState } from '@/ui_models/app_state';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
|
|
|
|
import { isDesktopApplication, isSameDay } from '@/utils';
|
|
import { storage, StorageKey } from '@Services/localStorage';
|
|
import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
|
|
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
|
|
// interface Props {} // TODO: Vardan: implement props and remove `eslint-disable`
|
|
type Props = {
|
|
appState: AppState;
|
|
application: WebApplication;
|
|
};
|
|
|
|
// const HistoryMenu = observer((props: Props) => {
|
|
// const AccountMenu = observer((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
|
|
|
|
// TODO: Vardan `showLogin` and `showRegister` were in `formData` in Angular code, check whether I need to write similarly
|
|
const [showLogin, setShowLogin] = useState(false);
|
|
const [showRegister, setShowRegister] = useState(false);
|
|
const [showAdvanced, setShowAdvanced] = useState(false);
|
|
const [isAuthenticating, setIsAuthenticating] = useState(false);
|
|
const [password, setPassword] = useState<string | undefined>(undefined);
|
|
const [passwordConfirmation, setPasswordConfirmation] = useState<string | undefined>(undefined);
|
|
const [status, setStatus] = useState('');
|
|
const [syncError, setSyncError] = useState<string | undefined>(undefined);
|
|
|
|
const [server, setServer] = useState<string | undefined>(undefined);
|
|
const [showPasscodeForm, setShowPasscodeForm] = useState(false);
|
|
const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
|
|
const [isLoading, setIsLoading] = useState<unknown>(false);
|
|
const [isErrorReportingEnabled, setIsErrorReportingEnabled] = useState(false);
|
|
const [appVersion, setAppVersion] = useState(''); // TODO: Vardan: figure out how to get `appVersion` similar to original code
|
|
|
|
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` -
|
|
// once I have those values here, set them as initial value
|
|
const [isBackupEncrypted, setIsBackupEncrypted] = useState(isEncryptionEnabled);
|
|
const [isSyncInProgress, setIsSyncInProgress] = useState(false);
|
|
|
|
const reloadAutoLockInterval = useCallback(async () => {
|
|
const interval = await application.getAutolockService().getAutoLockInterval();
|
|
setSelectedAutoLockInterval(interval);
|
|
}, [application]);
|
|
|
|
|
|
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 = () => {
|
|
console.log('display registration form!');
|
|
};
|
|
*/
|
|
const handleFormSubmit = () => {
|
|
// TODO: Vardan: there is `novalidate` in Angular code, need to understand how to apply it here
|
|
console.log('form submit');
|
|
};
|
|
|
|
const handleHostInputChange = () => {
|
|
console.log('handle host input change');
|
|
};
|
|
|
|
const handleKeyPressKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Enter') {
|
|
handleFormSubmit();
|
|
}
|
|
};
|
|
|
|
const handleChangeStrictSignIn = () => {
|
|
console.log('handleChangeStrictSignIn');
|
|
};
|
|
|
|
const handlePasswordChange = () => {
|
|
console.log('handlePasswordChange');
|
|
};
|
|
|
|
const handlePasswordConfirmationChange = () => {
|
|
console.log('handlePasswordConfirmationChange');
|
|
};
|
|
|
|
const handleChangeEphemeral = () => {
|
|
console.log('change ephemeral');
|
|
// TODO: Vardan: perhaps need to set some "global" value here
|
|
};
|
|
|
|
const handleMergeLocalData = () => {
|
|
console.log('handleMergeLocalData');
|
|
};
|
|
|
|
const openPasswordWizard = () => {
|
|
console.log('openPasswordWizard');
|
|
};
|
|
|
|
const openSessionsModal = () => {
|
|
console.log('openSessionsModal');
|
|
};
|
|
|
|
const getEncryptionStatusForNotes = () => {
|
|
const length = notesAndTagsCount;
|
|
return `${length}/${length} notes and tags encrypted`;
|
|
};
|
|
|
|
const enableProtections = () => {
|
|
console.log('enableProtections');
|
|
};
|
|
|
|
const handleAddPassCode = () => {
|
|
console.log('handleAddPassCode');
|
|
};
|
|
|
|
const submitPasscodeForm = () => {
|
|
console.log('submitPasscodeForm');
|
|
};
|
|
|
|
const handlePasscodeChange = () => {
|
|
console.log('handlePasscodeChange');
|
|
};
|
|
|
|
const handleConfirmPasscodeChange = () => {
|
|
console.log('handleConfirmPasscodeChange');
|
|
};
|
|
|
|
const selectAutoLockInterval = (interval: number) => {
|
|
console.log('selectAutoLockInterval', interval);
|
|
};
|
|
|
|
const disableBetaWarning = () => {
|
|
console.log('disableBetaWarning');
|
|
};
|
|
|
|
const hidePasswordForm = () => {
|
|
setShowLogin(false);
|
|
setShowRegister(false);
|
|
setPassword(undefined);
|
|
setPasswordConfirmation(undefined);
|
|
};
|
|
|
|
const signOut = () => {
|
|
console.log('signOut');
|
|
};
|
|
|
|
// TODO: Vardan: the name `changePasscodePressed` comes from original code; it is very similar to my `handlePasscodeChange`.
|
|
// Check if `handlePasscodeChange` is not required, remove it and rename `changePasscodePressed` to `handlePasscodeChange`
|
|
const changePasscodePressed = () => {
|
|
console.log('changePasscodePressed');
|
|
};
|
|
|
|
// TODO: Vardan: the name `removePasscodePressed` comes from original code;
|
|
// Check if I rename`changePasscodePressed` to `handlePasscodeChange`, also rename `removePasscodePressed` to `handleRemovePasscode`
|
|
const removePasscodePressed = () => {
|
|
console.log('removePasscodePressed');
|
|
};
|
|
|
|
const downloadDataArchive = () => {
|
|
console.log('downloadDataArchive');
|
|
};
|
|
|
|
const importFileSelected = () => {
|
|
console.log('importFileSelected');
|
|
};
|
|
|
|
const toggleErrorReportingEnabled = () => {
|
|
if (isErrorReportingEnabled) {
|
|
disableErrorReporting();
|
|
} else {
|
|
enableErrorReporting();
|
|
}
|
|
if (!isSyncInProgress) {
|
|
window.location.reload();
|
|
}
|
|
};
|
|
|
|
const openErrorReportingDialog = () => {
|
|
console.log('openErrorReportingDialog');
|
|
};
|
|
|
|
const handleClose = () => {
|
|
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(() => {
|
|
setIsErrorReportingEnabled(storage.get(StorageKey.DisableErrorReporting) === false);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// 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(() => {
|
|
const host = application.getHost();
|
|
setServer(host);
|
|
}, [application]);
|
|
|
|
|
|
/*
|
|
const { searchOptions } = appState;
|
|
|
|
const {
|
|
includeProtectedContents,
|
|
includeArchived,
|
|
includeTrashed,
|
|
} = searchOptions;
|
|
*/
|
|
|
|
return (
|
|
<div style={{
|
|
top: '-70px',
|
|
right: '-450px',
|
|
width: '100px',
|
|
height: '100px',
|
|
background: 'green',
|
|
zIndex: 100,
|
|
position: 'absolute'
|
|
}}>
|
|
<div className='sn-component'>
|
|
<div id='account-panel-vardan' className='sk-panel'>
|
|
<div className='sk-panel-header'>
|
|
<div className='sk-panel-header-title'>Account</div>
|
|
<a className='sk-a info close-button' onClick={handleClose}>Close</a>
|
|
</div>
|
|
<div className='sk-panel-content'>
|
|
{!user && !showLogin && !showRegister && (
|
|
<div className='sk-panel-section sk-panel-hero'>
|
|
<div className='sk-panel-row'>
|
|
<div className='sk-h1'>Sign in or register to enable sync and end-to-end encryption.</div>
|
|
</div>
|
|
<div className='flex my-1'>
|
|
<button
|
|
className='sn-button info flex-grow text-base py-3 mr-1.5'
|
|
onClick={() => setShowLogin(true)}
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
className='sn-button info flex-grow text-base py-3 ml-1.5'
|
|
onClick={() => setShowRegister(true)}
|
|
>
|
|
Register
|
|
</button>
|
|
</div>
|
|
<div className='sk-panel-row sk-p'>
|
|
Standard Notes is free on every platform, and comes
|
|
standard with sync and encryption.
|
|
</div>
|
|
</div>
|
|
)}
|
|
{(showLogin || showRegister) && (
|
|
<div className='sk-panel-section'>
|
|
<div className='sk-panel-section-title'>
|
|
{showLogin ? 'Sign In' : 'Register'}
|
|
</div>
|
|
<form className='sk-panel-form' onSubmit={handleFormSubmit}>
|
|
<div className='sk-panel-section'>
|
|
{/* TODO: Vardan: there are `should-focus` and `sn-autofocus`, implement them */}
|
|
<input className='sk-input contrast'
|
|
name='email'
|
|
type='email'
|
|
placeholder='Email'
|
|
required
|
|
spellCheck={false}
|
|
/>
|
|
<input className='sk-input contrast'
|
|
name='password'
|
|
type='password'
|
|
placeholder='Password'
|
|
required
|
|
onKeyPress={handleKeyPressKeyDown}
|
|
onKeyDown={handleKeyPressKeyDown}
|
|
value={password}
|
|
onChange={handlePasswordChange}
|
|
/>
|
|
{showRegister &&
|
|
<input className='sk-input contrast'
|
|
name='password_conf'
|
|
type='password'
|
|
placeholder='Confirm Password' required
|
|
onKeyPress={handleKeyPressKeyDown}
|
|
onKeyDown={handleKeyPressKeyDown}
|
|
value={passwordConfirmation}
|
|
onChange={handlePasswordConfirmationChange}
|
|
/>}
|
|
<div className='sk-panel-row' />
|
|
<a className='sk-panel-row sk-bold' onClick={() => {
|
|
setShowAdvanced(showAdvanced => !showAdvanced);
|
|
}}>
|
|
Advanced Options
|
|
</a>
|
|
</div>
|
|
{showAdvanced && (
|
|
<div className='sk-notification unpadded contrast advanced-options sk-panel-row'>
|
|
<div className='sk-panel-column stretch'>
|
|
<div className='sk-notification-title sk-panel-row padded-row'>
|
|
Advanced Options
|
|
</div>
|
|
<div className='bordered-row padded-row'>
|
|
<label className='sk-label'>Sync Server Domain</label>
|
|
<input className='sk-input sk-base'
|
|
name='server'
|
|
placeholder='Server URL'
|
|
onChange={handleHostInputChange}
|
|
value={server}
|
|
required
|
|
/>
|
|
</div>
|
|
{showLogin && (
|
|
<label className='sk-label padded-row sk-panel-row justify-left'>
|
|
<div className='sk-horizontal-group tight'>
|
|
<input className='sk-input' type='checkbox' onChange={handleChangeStrictSignIn} />
|
|
<p className='sk-p'>Use strict sign in</p>
|
|
<span>
|
|
<a className='info'
|
|
href='https://standardnotes.org/help/security' rel='noopener'
|
|
target='_blank'
|
|
>
|
|
(Learn more)
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</label>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isAuthenticating && (
|
|
<div className='sk-panel-section.form-submit'>
|
|
<button className='sn-button info text-base py-3 text-center' type='submit'
|
|
disabled={isAuthenticating}>
|
|
{showLogin ? 'Sign In' : 'Register'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
{showRegister && (
|
|
<div className='sk-notification neutral'>
|
|
<div className='sk-notification-title'>No Password Reset.</div>
|
|
<div className='sk-notification-text'>
|
|
Because your notes are encrypted using your password,
|
|
Standard Notes does not have a password reset option.
|
|
You cannot forget your password.
|
|
</div>
|
|
</div>
|
|
)}
|
|
{status && (
|
|
<div className='sk-panel-section no-bottom-pad'>
|
|
<div className='sk-horizontal-group'>
|
|
<div className='sk-spinner small neutral'>
|
|
<div className='sk-label'>{status}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isAuthenticating && (
|
|
<div className='sk-panel-section no-bottom-pad'>
|
|
<label className='sk-panel-row justify-left'>
|
|
<div className='sk-horizontal-group tight'>
|
|
<input type='checkbox' onChange={handleChangeEphemeral} />
|
|
<p className='sk-p'>Stay signed in</p>
|
|
</div>
|
|
</label>
|
|
{notesAndTagsCount > 0 && (
|
|
<label className='sk-panel-row.justify-left'>
|
|
<div className='sk-horizontal-group tight'>
|
|
<input type='checkbox' onChange={handleMergeLocalData} />
|
|
<p className='sk-p'>Merge local data ({notesAndTagsCount}) notes and tags</p>
|
|
</div>
|
|
</label>
|
|
)}
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
)}
|
|
{!showLogin && !showRegister && (
|
|
<div>
|
|
{user && (
|
|
<div className='sk-panel-section'>
|
|
{syncError && (
|
|
<div className='sk-notification danger'>
|
|
<div className='sk-notification-title'>Sync Unreachable</div>
|
|
<div className='sk-notification-text'>
|
|
Hmm...we can't seem to sync your account.
|
|
The reason: {syncError}
|
|
</div>
|
|
<a
|
|
className='sk-a info-contrast sk-bold sk-panel-row'
|
|
href='https://standardnotes.org/help'
|
|
rel='noopener'
|
|
target='_blank'
|
|
>
|
|
Need help?
|
|
</a>
|
|
</div>
|
|
)}
|
|
<div className='sk-panel-row'>
|
|
<div className='sk-panel-column'>
|
|
<div className='sk-h1 sk-bold wrap'>
|
|
{user.email}
|
|
</div>
|
|
<div className='sk-subtitle neutral'>
|
|
{server}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='sk-panel-row' />
|
|
<a className='sk-a info sk-panel-row condensed' onClick={openPasswordWizard}>
|
|
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>
|
|
)}
|
|
{!protectionsDisabledUntil && (
|
|
<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>
|
|
{protectionsDisabledUntil && (
|
|
<div className='sk-panel-row'>
|
|
<button className='sn-button small.info' onClick={enableProtections}>
|
|
Enable protections
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className='sk-panel-section'>
|
|
<div className='sk-panel-section-title'>Passcode Lock</div>
|
|
{!hasPasscode && (
|
|
<div>
|
|
{canAddPasscode && (
|
|
<>
|
|
{!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>
|
|
)}
|
|
</>
|
|
)}
|
|
{!canAddPasscode && (
|
|
<p className='sk-p'>
|
|
Adding a passcode is not supported in temporary sessions. Please sign
|
|
out, then sign back in with the "Stay signed in" option checked.
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
{showPasscodeForm && (
|
|
<form className='sk-panel-form' onSubmit={submitPasscodeForm}>
|
|
<div className='sk-panel-row' />
|
|
{/* TODO: Vardan: there are `should-focus` and `sn-autofocus`, implement them */}
|
|
<input
|
|
className='sk-input contrast'
|
|
type='password'
|
|
ref={passcodeInput}
|
|
onChange={handlePasscodeChange}
|
|
placeholder='Passcode'
|
|
/>
|
|
<input
|
|
className='sk-input contrast'
|
|
type='password'
|
|
onChange={handleConfirmPasscodeChange}
|
|
placeholder='Confirm Passcode'
|
|
/>
|
|
<button className='sn-button small info mt-2' onClick={submitPasscodeForm}>
|
|
Set Passcode
|
|
</button>
|
|
<button className='sn-button small outlined ml-2' onClick={() => setShowPasscodeForm(false)}>
|
|
Cancel
|
|
</button>
|
|
</form>
|
|
)}
|
|
{hasPasscode && !showPasscodeForm && (
|
|
<>
|
|
<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>
|
|
{!isLoading && (
|
|
<div className='sk-panel-section'>
|
|
<div className='sk-panel-section-title'>Data Backups</div>
|
|
<div className='sk-p'>Download a backup of all your data.</div>
|
|
{isEncryptionEnabled && (
|
|
<form className='sk-panel-form sk-panel-row'>
|
|
<div className='sk-input-group' />
|
|
<label className='sk-horizontal-group tight'>
|
|
<input
|
|
type='radio'
|
|
onChange={() => setIsBackupEncrypted(true)}
|
|
value='true'
|
|
checked={isBackupEncrypted}
|
|
/>
|
|
<p className='sk-p'>Encrypted</p>
|
|
</label>
|
|
<label className='sk-horizontal-group tight'>
|
|
<input
|
|
type='radio'
|
|
onChange={() => setIsBackupEncrypted(false)}
|
|
value='false'
|
|
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
|
|
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-section-title'>Error Reporting</div>
|
|
<div className='sk-panel-section-subtitle info'>
|
|
Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'}
|
|
</div>
|
|
<p className='sk-p'>
|
|
Help us improve Standard Notes by automatically submitting
|
|
anonymized error reports.
|
|
</p>
|
|
{errorReportingIdValue && (
|
|
<>
|
|
<p className='sk-p selectable'>
|
|
Your random identifier is
|
|
strong {errorReportingIdValue}
|
|
</p>
|
|
<p className='sk-p'>
|
|
Disabling error reporting will remove that identifier from your
|
|
local storage, and a new identifier will be created should you
|
|
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>
|
|
<div className='sk-panel-footer'>
|
|
<div className='sk-panel-row'>
|
|
<div className='sk-p left neutral'>
|
|
<span>{appVersion}</span>
|
|
{showBetaWarning && (
|
|
<span>
|
|
<a className='sk-a' onClick={disableBetaWarning}>Hide beta warning</a>
|
|
</span>
|
|
)}
|
|
</div>
|
|
{(showLogin || showRegister) && (
|
|
<a className='sk-a right' onClick={hidePasswordForm}>Cancel</a>
|
|
)}
|
|
{!showLogin && !showRegister && (
|
|
<a className='sk-a right danger capitalize' onClick={signOut}>
|
|
{user ? 'Sign out' : 'Clear session data'}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const AccountMenu2 = toDirective<Props>(
|
|
AccountMenu
|
|
);
|