chore: run prettier

This commit is contained in:
VardanHakobyan
2021-06-09 12:23:14 +04:00
parent 7c35f41f9e
commit 71d04943ee
2 changed files with 155 additions and 155 deletions

View File

@@ -526,7 +526,7 @@ const AccountMenu = observer(({ application, appState }: Props) => {
removeAppLaunchedObserver(); removeAppLaunchedObserver();
removeKeyStatusChangedObserver(); removeKeyStatusChangedObserver();
removeProtectionSessionExpiryDateChangedObserver(); removeProtectionSessionExpiryDateChangedObserver();
} };
}, []); }, []);
// `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial
@@ -551,113 +551,113 @@ const AccountMenu = observer(({ application, appState }: Props) => {
}, [isEmailFocused, isPasscodeFocused]); }, [isEmailFocused, isPasscodeFocused]);
return ( return (
<div className='sn-component'> <div className="sn-component">
<div id='account-panel' className='sk-panel'> <div id="account-panel" className="sk-panel">
<div className='sk-panel-header'> <div className="sk-panel-header">
<div className='sk-panel-header-title'>Account</div> <div className="sk-panel-header-title">Account</div>
<a className='sk-a info close-button' onClick={closeAccountMenu}>Close</a> <a className="sk-a info close-button" onClick={closeAccountMenu}>Close</a>
</div> </div>
<div className='sk-panel-content'> <div className="sk-panel-content">
{!user && !showLogin && !showRegister && ( {!user && !showLogin && !showRegister && (
<div className='sk-panel-section sk-panel-hero'> <div className="sk-panel-section sk-panel-hero">
<div className='sk-panel-row'> <div className="sk-panel-row">
<div className='sk-h1'>Sign in or register to enable sync and end-to-end encryption.</div> <div className="sk-h1">Sign in or register to enable sync and end-to-end encryption.</div>
</div> </div>
<div className='flex my-1'> <div className="flex my-1">
<button <button
className='sn-button info flex-grow text-base py-3 mr-1.5' className="sn-button info flex-grow text-base py-3 mr-1.5"
onClick={handleSignInClick} onClick={handleSignInClick}
> >
Sign In Sign In
</button> </button>
<button <button
className='sn-button info flex-grow text-base py-3 ml-1.5' className="sn-button info flex-grow text-base py-3 ml-1.5"
onClick={handleRegisterClick} onClick={handleRegisterClick}
> >
Register Register
</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 Standard Notes is free on every platform, and comes
standard with sync and encryption. standard with sync and encryption.
</div> </div>
</div> </div>
)} )}
{(showLogin || showRegister) && ( {(showLogin || showRegister) && (
<div className='sk-panel-section'> <div className="sk-panel-section">
<div className='sk-panel-section-title'> <div className="sk-panel-section-title">
{showLogin ? 'Sign In' : 'Register'} {showLogin ? 'Sign In' : 'Register'}
</div> </div>
<form className='sk-panel-form' onSubmit={handleAuthFormSubmit} noValidate> <form className="sk-panel-form" onSubmit={handleAuthFormSubmit} noValidate>
<div className='sk-panel-section'> <div className="sk-panel-section">
<input className='sk-input contrast' <input className="sk-input contrast"
name='email' name="email"
type='email' type="email"
value={email} value={email}
onChange={handleEmailChange} onChange={handleEmailChange}
placeholder='Email' placeholder="Email"
required required
spellcheck={false} spellcheck={false}
ref={emailInputRef} ref={emailInputRef}
/> />
<input className='sk-input contrast' <input className="sk-input contrast"
name='password' name="password"
type='password' type="password"
value={password} value={password}
onChange={handlePasswordChange} onChange={handlePasswordChange}
placeholder='Password' placeholder="Password"
required required
onKeyPress={handleKeyPressKeyDown} onKeyPress={handleKeyPressKeyDown}
onKeyDown={handleKeyPressKeyDown} onKeyDown={handleKeyPressKeyDown}
ref={passwordInputRef} ref={passwordInputRef}
/> />
{showRegister && {showRegister &&
<input className='sk-input contrast' <input className="sk-input contrast"
name='password_conf' name="password_conf"
type='password' type="password"
placeholder='Confirm Password' required placeholder="Confirm Password" required
onKeyPress={handleKeyPressKeyDown} onKeyPress={handleKeyPressKeyDown}
onKeyDown={handleKeyPressKeyDown} onKeyDown={handleKeyPressKeyDown}
value={passwordConfirmation} value={passwordConfirmation}
onChange={handlePasswordConfirmationChange} onChange={handlePasswordConfirmationChange}
ref={passwordConfirmationInputRef} ref={passwordConfirmationInputRef}
/>} />}
<div className='sk-panel-row' /> <div className="sk-panel-row" />
<a className='sk-panel-row sk-bold' onClick={() => { <a className="sk-panel-row sk-bold" onClick={() => {
setShowAdvanced(!showAdvanced); setShowAdvanced(!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={url} value={url}
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 <input
className='sk-input' className="sk-input"
type='checkbox' type="checkbox"
onChange={() => setIsStrictSignIn(prevState => !prevState)} onChange={() => setIsStrictSignIn(prevState => !prevState)}
/> />
<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>
@@ -669,17 +669,17 @@ const AccountMenu = observer(({ application, appState }: 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' <button className="sn-button info text-base py-3 text-center" type="submit"
disabled={isAuthenticating}> disabled={isAuthenticating}>
{showLogin ? 'Sign In' : 'Register'} {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, Because your notes are encrypted using your password,
Standard Notes does not have a password reset option. Standard Notes does not have a password reset option.
You cannot forget your password. You cannot forget your password.
@@ -687,34 +687,34 @@ const AccountMenu = observer(({ application, appState }: Props) => {
</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>
)} )}
{!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 <input
type='checkbox' type="checkbox"
checked={!isEphemeral} checked={!isEphemeral}
onChange={() => setIsEphemeral(prevState => !prevState)} onChange={() => setIsEphemeral(prevState => !prevState)}
/> />
<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 <input
type='checkbox' type="checkbox"
checked={shouldMergeLocal} checked={shouldMergeLocal}
onChange={handleMergeLocalData} 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>
)} )}
@@ -726,98 +726,98 @@ const AccountMenu = observer(({ application, appState }: Props) => {
{!showLogin && !showRegister && ( {!showLogin && !showRegister && (
<div> <div>
{user && ( {user && (
<div className='sk-panel-section'> <div className="sk-panel-section">
{appState.sync.errorMessage && ( {appState.sync.errorMessage && (
<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.
The reason: {appState.sync.errorMessage} The reason: {appState.sync.errorMessage}
</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"
> >
Need help? Need help?
</a> </a>
</div> </div>
)} )}
<div className='sk-panel-row'> <div className="sk-panel-row">
<div className='sk-panel-column'> <div className="sk-panel-column">
<div className='sk-h1 sk-bold wrap'> <div className="sk-h1 sk-bold wrap">
{user.email} {user.email}
</div> </div>
<div className='sk-subtitle neutral'> <div className="sk-subtitle neutral">
{server} {server}
</div> </div>
</div> </div>
</div> </div>
<div className='sk-panel-row' /> <div className="sk-panel-row" />
<a className='sk-a info sk-panel-row condensed' onClick={openPasswordWizard}> <a className="sk-a info sk-panel-row condensed" onClick={openPasswordWizard}>
Change Password Change Password
</a> </a>
<a className='sk-a info sk-panel-row condensed' onClick={openSessionsModal}> <a className="sk-a info sk-panel-row condensed" onClick={openSessionsModal}>
Manage Sessions Manage Sessions
</a> </a>
</div> </div>
)} )}
<div className='sk-panel-section'> <div className="sk-panel-section">
<div className='sk-panel-section-title'> <div className="sk-panel-section-title">
Encryption Encryption
</div> </div>
{isEncryptionEnabled && ( {isEncryptionEnabled && (
<div className='sk-panel-section-subtitle info'> <div className="sk-panel-section-subtitle info">
{getEncryptionStatusForNotes()} {getEncryptionStatusForNotes()}
</div> </div>
)} )}
<p className='sk-p'> <p className="sk-p">
{encryptionStatusString} {encryptionStatusString}
</p> </p>
</div> </div>
{hasProtections && ( {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">Protections</div>
{protectionsDisabledUntil && ( {protectionsDisabledUntil && (
<div className='sk-panel-section-subtitle info'> <div className="sk-panel-section-subtitle info">
Protections are disabled until {protectionsDisabledUntil} Protections are disabled until {protectionsDisabledUntil}
</div> </div>
)} )}
{!protectionsDisabledUntil && ( {!protectionsDisabledUntil && (
<div className='sk-panel-section-subtitle info'> <div className="sk-panel-section-subtitle info">
Protections are enabled Protections are enabled
</div> </div>
)} )}
<p className='sk-p'> <p className="sk-p">
Actions like viewing protected notes, exporting decrypted backups, Actions like viewing protected notes, exporting decrypted backups,
or revoking an active session, require additional authentication or revoking an active session, require additional authentication
like entering your account password or application passcode. like entering your account password or application passcode.
</p> </p>
{protectionsDisabledUntil && ( {protectionsDisabledUntil && (
<div className='sk-panel-row'> <div className="sk-panel-row">
<button className='sn-button small info' onClick={enableProtections}> <button className="sn-button small info" onClick={enableProtections}>
Enable protections Enable protections
</button> </button>
</div> </div>
)} )}
</div> </div>
)} )}
<div className='sk-panel-section'> <div className="sk-panel-section">
<div className='sk-panel-section-title'>Passcode Lock</div> <div className="sk-panel-section-title">Passcode Lock</div>
{!hasPasscode && ( {!hasPasscode && (
<div> <div>
{canAddPasscode && ( {canAddPasscode && (
<> <>
{!showPasscodeForm && ( {!showPasscodeForm && (
<div className='sk-panel-row'> <div className="sk-panel-row">
<button className='sn-button small info' onClick={handleAddPassCode}> <button className="sn-button small info" onClick={handleAddPassCode}>
Add Passcode Add Passcode
</button> </button>
</div> </div>
)} )}
<p className='sk-p'> <p className="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> </p>
@@ -827,7 +827,7 @@ const AccountMenu = observer(({ application, appState }: Props) => {
</> </>
)} )}
{!canAddPasscode && ( {!canAddPasscode && (
<p className='sk-p'> <p className="sk-p">
Adding a passcode is not supported in temporary sessions. Please sign Adding a passcode is not supported in temporary sessions. Please sign
out, then sign back in with the "Stay signed in" option checked. out, then sign back in with the "Stay signed in" option checked.
</p> </p>
@@ -835,40 +835,40 @@ const AccountMenu = observer(({ application, appState }: Props) => {
</div> </div>
)} )}
{showPasscodeForm && ( {showPasscodeForm && (
<form className='sk-panel-form' onSubmit={submitPasscodeForm}> <form className="sk-panel-form" onSubmit={submitPasscodeForm}>
<div className='sk-panel-row' /> <div className="sk-panel-row" />
<input <input
className='sk-input contrast' className="sk-input contrast"
type='password' type="password"
ref={passcodeInputRef} ref={passcodeInputRef}
value={passcode} value={passcode}
onChange={handlePasscodeChange} onChange={handlePasscodeChange}
placeholder='Passcode' placeholder="Passcode"
/> />
<input <input
className='sk-input contrast' className="sk-input contrast"
type='password' type="password"
value={passcodeConfirmation} value={passcodeConfirmation}
onChange={handleConfirmPasscodeChange} onChange={handleConfirmPasscodeChange}
placeholder='Confirm Passcode' placeholder="Confirm Passcode"
/> />
<button className='sn-button small info mt-2' onClick={submitPasscodeForm}> <button className="sn-button small info mt-2" onClick={submitPasscodeForm}>
Set Passcode Set Passcode
</button> </button>
<button className='sn-button small outlined ml-2' onClick={() => setShowPasscodeForm(false)}> <button className="sn-button small outlined ml-2" onClick={() => setShowPasscodeForm(false)}>
Cancel Cancel
</button> </button>
</form> </form>
)} )}
{hasPasscode && !showPasscodeForm && ( {hasPasscode && !showPasscodeForm && (
<> <>
<div className='sk-panel-section-subtitle info'>Passcode lock is enabled</div> <div className="sk-panel-section-subtitle info">Passcode lock is enabled</div>
<div className='sk-notification contrast'> <div className="sk-notification contrast">
<div className='sk-notification-title'>Options</div> <div className="sk-notification-title">Options</div>
<div className='sk-notification-text'> <div className="sk-notification-text">
<div className='sk-panel-row'> <div className="sk-panel-row">
<div className='sk-horizontal-group'> <div className="sk-horizontal-group">
<div className='sk-h4 sk-bold'>Autolock</div> <div className="sk-h4 sk-bold">Autolock</div>
{passcodeAutoLockOptions.map(option => { {passcodeAutoLockOptions.map(option => {
return ( return (
<a <a
@@ -880,12 +880,12 @@ const AccountMenu = observer(({ application, appState }: Props) => {
})} })}
</div> </div>
</div> </div>
<div className='sk-p'>The autolock timer begins when the window or tab loses focus.</div> <div className="sk-p">The autolock timer begins when the window or tab loses focus.</div>
<div className='sk-panel-row' /> <div className="sk-panel-row" />
<a className='sk-a info sk-panel-row condensed' onClick={changePasscodePressed}> <a className="sk-a info sk-panel-row condensed" onClick={changePasscodePressed}>
Change Passcode Change Passcode
</a> </a>
<a className='sk-a danger sk-panel-row condensed' onClick={removePasscodePressed}> <a className="sk-a danger sk-panel-row condensed" onClick={removePasscodePressed}>
Remove Passcode Remove Passcode
</a> </a>
</div> </div>
@@ -894,39 +894,39 @@ const AccountMenu = observer(({ application, appState }: Props) => {
)} )}
</div> </div>
{isImportDataLoading ? ( {isImportDataLoading ? (
<div className='sk-spinner small info' /> <div className="sk-spinner small info" />
) : ( ) : (
<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">Data Backups</div>
<div className='sk-p'>Download a backup of all your data.</div> <div className="sk-p">Download a backup of all your data.</div>
{isEncryptionEnabled && ( {isEncryptionEnabled && (
<form className='sk-panel-form sk-panel-row'> <form className="sk-panel-form sk-panel-row">
<div className='sk-input-group'> <div className="sk-input-group">
<label className='sk-horizontal-group tight'> <label className="sk-horizontal-group tight">
<input <input
type='radio' type="radio"
onChange={() => setIsBackupEncrypted(true)} onChange={() => setIsBackupEncrypted(true)}
checked={isBackupEncrypted} checked={isBackupEncrypted}
/> />
<p className='sk-p'>Encrypted</p> <p className="sk-p">Encrypted</p>
</label> </label>
<label className='sk-horizontal-group tight'> <label className="sk-horizontal-group tight">
<input <input
type='radio' type="radio"
onChange={() => setIsBackupEncrypted(false)} onChange={() => setIsBackupEncrypted(false)}
checked={!isBackupEncrypted} checked={!isBackupEncrypted}
/> />
<p className='sk-p'>Decrypted</p> <p className="sk-p">Decrypted</p>
</label> </label>
</div> </div>
</form> </form>
)} )}
<div className='sk-panel-row' /> <div className="sk-panel-row" />
<div className='flex'> <div className="flex">
<button className='sn-button small info' onClick={downloadDataArchive}>Download Backup</button> <button className="sn-button small info" onClick={downloadDataArchive}>Download Backup</button>
<label className='sn-button small flex items-center info ml-2'> <label className="sn-button small flex items-center info ml-2">
<input <input
type='file' type="file"
onChange={importFileSelected} onChange={importFileSelected}
style={{ display: 'none' }} style={{ display: 'none' }}
/> />
@@ -934,66 +934,66 @@ const AccountMenu = observer(({ application, appState }: Props) => {
</label> </label>
</div> </div>
{isDesktopApplication() && ( {isDesktopApplication() && (
<p className='mt-5'> <p className="mt-5">
Backups are automatically created on desktop and can be managed Backups are automatically created on desktop and can be managed
via the "Backups" top-level menu. via the "Backups" top-level menu.
</p> </p>
)} )}
<div className='sk-panel-row' /> <div className="sk-panel-row" />
</div> </div>
)} )}
<div className='sk-panel-section'> <div className="sk-panel-section">
<div className='sk-panel-section-title'>Error Reporting</div> <div className="sk-panel-section-title">Error Reporting</div>
<div className='sk-panel-section-subtitle info'> <div className="sk-panel-section-subtitle info">
Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'} Automatic error reporting is {isErrorReportingEnabled ? 'enabled' : 'disabled'}
</div> </div>
<p className='sk-p'> <p className="sk-p">
Help us improve Standard Notes by automatically submitting Help us improve Standard Notes by automatically submitting
anonymized error reports. anonymized error reports.
</p> </p>
{errorReportingIdValue && ( {errorReportingIdValue && (
<> <>
<p className='sk-p selectable'> <p className="sk-p selectable">
Your random identifier is Your random identifier is
strong {errorReportingIdValue} strong {errorReportingIdValue}
</p> </p>
<p className='sk-p'> <p className="sk-p">
Disabling error reporting will remove that identifier from your Disabling error reporting will remove that identifier from your
local storage, and a new identifier will be created should you local storage, and a new identifier will be created should you
decide to enable error reporting again in the future. decide to enable error reporting again in the future.
</p> </p>
</> </>
)} )}
<div className='sk-panel-row'> <div className="sk-panel-row">
<button className='sn-button small info' onClick={toggleErrorReportingEnabled}> <button className="sn-button small info" onClick={toggleErrorReportingEnabled}>
{isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting {isErrorReportingEnabled ? 'Disable' : 'Enable'} Error Reporting
</button> </button>
</div> </div>
<div className='sk-panel-row'> <div className="sk-panel-row">
<a className='sk-a' onClick={openErrorReportingDialog}>What data is being sent?</a> <a className="sk-a" onClick={openErrorReportingDialog}>What data is being sent?</a>
</div> </div>
</div> </div>
</div> </div>
)} )}
</div> </div>
<ConfirmSignoutContainer application={application} appState={appState} /> <ConfirmSignoutContainer application={application} appState={appState} />
<div className='sk-panel-footer'> <div className="sk-panel-footer">
<div className='sk-panel-row'> <div className="sk-panel-row">
<div className='sk-p left neutral'> <div className="sk-p left neutral">
<span>{appVersion}</span> <span>{appVersion}</span>
{showBetaWarning && ( {showBetaWarning && (
<span> <span>
<span> (</span> <span> (</span>
<a className='sk-a' onClick={disableBetaWarning}>Hide beta warning</a> <a className="sk-a" onClick={disableBetaWarning}>Hide beta warning</a>
<span>)</span> <span>)</span>
</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>
)} )}

View File

@@ -21,7 +21,7 @@ export class AccountMenuState {
toggleShow: action, toggleShow: action,
setSigningOut: action, setSigningOut: action,
notesAndTagsCount: computed, notesAndTagsCount: computed
}); });
appEventListeners.push( appEventListeners.push(