refactor: migrate account-menu to react - initial UI
This commit is contained in:
VardanHakobyan
@@ -1,5 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
// import { AccountMenu2 } from '@/components/AccountMenu';
|
||||
|
||||
declare const __VERSION__: string;
|
||||
declare const __WEB__: boolean;
|
||||
|
||||
@@ -59,6 +61,7 @@ import { SessionsModalDirective } from './components/SessionsModal';
|
||||
import { NoAccountWarningDirective } from './components/NoAccountWarning';
|
||||
import { NoProtectionsdNoteWarningDirective } from './components/NoProtectionsNoteWarning';
|
||||
import { SearchOptionsDirective } from './components/SearchOptions';
|
||||
import { AccountMenu2 } from './components/AccountMenu2';
|
||||
import { ConfirmSignoutDirective } from './components/ConfirmSignoutModal';
|
||||
import { MultipleSelectedNotesDirective } from './components/MultipleSelectedNotes';
|
||||
import { NotesContextMenuDirective } from './components/NotesContextMenu';
|
||||
@@ -150,6 +153,7 @@ const startApplication: StartApplication = async function startApplication(
|
||||
.directive('historyMenu', () => new HistoryMenu())
|
||||
.directive('syncResolutionMenu', () => new SyncResolutionMenu())
|
||||
.directive('sessionsModal', SessionsModalDirective)
|
||||
.directive('accountMenu2', AccountMenu2)
|
||||
.directive('noAccountWarning', NoAccountWarningDirective)
|
||||
.directive('protectedNotePanel', NoProtectionsdNoteWarningDirective)
|
||||
.directive('searchOptions', SearchOptionsDirective)
|
||||
|
||||
675
app/assets/javascripts/components/AccountMenu2.tsx
Normal file
675
app/assets/javascripts/components/AccountMenu2.tsx
Normal file
@@ -0,0 +1,675 @@
|
||||
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 { useEffect, useRef, useState } from 'preact/hooks';
|
||||
|
||||
import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
|
||||
import { isDesktopApplication } from '@/utils';
|
||||
import { storage, StorageKey } from '@Services/localStorage';
|
||||
import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
|
||||
import { ConfirmSignoutDirective } from '@/components/ConfirmSignoutModal';
|
||||
|
||||
// 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 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
|
||||
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('');
|
||||
const [server, setServer] = useState('');
|
||||
const [notesAndTagsCount, setNotesAndTagsCount] = useState(0);
|
||||
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 [keyStorageInfo, setKeyStorageInfo] = useState<string | null>(null);
|
||||
const [passcodeAutoLockOptions, setPasscodeAutoLockOptions] = useState<{value: number; label: string}[]>([]);
|
||||
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 [showBetaWarning, setShowBetaWarning] = useState(false);
|
||||
|
||||
|
||||
// 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(false);
|
||||
const [isSyncInProgress, setIsSyncInProgress] = useState(false);
|
||||
|
||||
|
||||
const errorReportingIdValue = errorReportingId();
|
||||
|
||||
/*
|
||||
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 = () => {
|
||||
console.log('implement `getEncryptionStatusForNotes`');
|
||||
return '';
|
||||
};
|
||||
|
||||
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');
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// TODO: Vardan: get the real count
|
||||
setNotesAndTagsCount(1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setIsErrorReportingEnabled( storage.get(StorageKey.DisableErrorReporting) === false);
|
||||
}, []);
|
||||
|
||||
/*
|
||||
useEffect(() => {
|
||||
setAppVersion(`v${((window as any).electronAppVersion || appVersion)}`);
|
||||
}, [appVersion]);
|
||||
*/
|
||||
|
||||
/*
|
||||
const { searchOptions } = appState;
|
||||
|
||||
const {
|
||||
includeProtectedContents,
|
||||
includeArchived,
|
||||
includeTrashed,
|
||||
} = searchOptions;
|
||||
*/
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
top: '-250px',
|
||||
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<br />
|
||||
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}
|
||||
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,<br />
|
||||
Standard Notes does not have a password reset option.<br />
|
||||
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.<br />
|
||||
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
|
||||
(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>
|
||||
{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,<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 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<br />
|
||||
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<br />
|
||||
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<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-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<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>
|
||||
{
|
||||
// TODO: Vardan: check whether this works
|
||||
() => ConfirmSignoutDirective
|
||||
}
|
||||
<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
|
||||
);
|
||||
@@ -19,6 +19,9 @@ const ConfirmSignoutContainer = observer((props: Props) => {
|
||||
if (!props.appState.accountMenu.signingOut) {
|
||||
return null;
|
||||
}
|
||||
if (!props.appState.accountMenu2.signingOut) {
|
||||
return null;
|
||||
}
|
||||
return <ConfirmSignoutModal {...props} />;
|
||||
});
|
||||
|
||||
@@ -30,13 +33,15 @@ const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
|
||||
const cancelRef = useRef<HTMLButtonElement>();
|
||||
function close() {
|
||||
appState.accountMenu.setSigningOut(false);
|
||||
appState.accountMenu2.setSigningOut(false);
|
||||
}
|
||||
|
||||
const [localBackupsCount, setLocalBackupsCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
application.bridge.localBackupsCount().then(setLocalBackupsCount);
|
||||
}, [appState.accountMenu.signingOut, application.bridge]);
|
||||
// }, [appState.accountMenu.signingOut, application.bridge]);
|
||||
}, [appState.accountMenu.signingOut, appState.accountMenu2.signingOut, application.bridge]);
|
||||
|
||||
return (
|
||||
<AlertDialog onDismiss={close} leastDestructiveRef={cancelRef}>
|
||||
|
||||
@@ -21,6 +21,7 @@ const NoAccountWarning = observer(({ appState }: Props) => {
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
appState.accountMenu.setShow(true);
|
||||
appState.accountMenu2.setShow(true);
|
||||
}}
|
||||
>
|
||||
Open Account menu
|
||||
|
||||
@@ -16,6 +16,7 @@ function NoProtectionsNoteWarning({ appState, onViewNote }: Props) {
|
||||
className="sn-button small info"
|
||||
onClick={() => {
|
||||
appState.accountMenu.setShow(true);
|
||||
appState.accountMenu2.setShow(true);
|
||||
}}
|
||||
>
|
||||
Open account menu
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import { WebApplication } from '@/ui_models/application';
|
||||
|
||||
export class AccountMenuState2 {
|
||||
show = false;
|
||||
signingOut = false;
|
||||
|
||||
constructor(
|
||||
// private application: WebApplication,
|
||||
// appEventListeners: (() => void)[]
|
||||
) {
|
||||
makeObservable(this, {
|
||||
show: observable,
|
||||
signingOut: observable,
|
||||
|
||||
setShow: action,
|
||||
toggleShow: action,
|
||||
setSigningOut: action,
|
||||
});
|
||||
}
|
||||
|
||||
setShow = (show: boolean): void => {
|
||||
this.show = show;
|
||||
}
|
||||
|
||||
setSigningOut = (signingOut: boolean): void => {
|
||||
this.signingOut = signingOut;
|
||||
}
|
||||
|
||||
toggleShow = (): void => {
|
||||
this.show = !this.show;
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,7 @@ import { SyncState } from './sync_state';
|
||||
import { SearchOptionsState } from './search_options_state';
|
||||
import { NotesState } from './notes_state';
|
||||
import { TagsState } from './tags_state';
|
||||
import { AccountMenuState2 } from '@/ui_models/app_state/account_menu_2_state';
|
||||
|
||||
export enum AppStateEvent {
|
||||
TagChanged,
|
||||
@@ -61,6 +62,8 @@ export class AppState {
|
||||
selectedTag?: SNTag;
|
||||
showBetaWarning: boolean;
|
||||
readonly accountMenu = new AccountMenuState();
|
||||
// readonly accountMenu2 = new AccountMenu_2_State();
|
||||
readonly accountMenu2: AccountMenuState2;
|
||||
readonly actionsMenu = new ActionsMenuState();
|
||||
readonly noAccountWarning: NoAccountWarningState;
|
||||
readonly sync = new SyncState();
|
||||
@@ -96,6 +99,10 @@ export class AppState {
|
||||
application,
|
||||
this.appEventObserverRemovers
|
||||
);
|
||||
this.accountMenu2 = new AccountMenuState2(
|
||||
// application,
|
||||
// this.appEventObserverRemovers
|
||||
);
|
||||
this.searchOptions = new SearchOptionsState(
|
||||
application,
|
||||
this.appEventObserverRemovers
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
ng-if='ctrl.showAccountMenu',
|
||||
application='ctrl.application'
|
||||
)
|
||||
account-menu2()
|
||||
.sk-app-bar-item
|
||||
a.no-decoration.sk-label.title(
|
||||
href='https://standardnotes.org/help',
|
||||
|
||||
@@ -62,6 +62,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
public user?: any
|
||||
private offline = true
|
||||
public showAccountMenu = false
|
||||
public showAccountMenu2 = false
|
||||
private didCheckForOffline = false
|
||||
private queueExtReload = false
|
||||
private reloadInProgress = false
|
||||
@@ -115,6 +116,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
this.autorun(() => {
|
||||
const showBetaWarning = this.appState.showBetaWarning;
|
||||
this.showAccountMenu = this.appState.accountMenu.show;
|
||||
this.showAccountMenu2 = this.appState.accountMenu2.show;
|
||||
this.setState({
|
||||
showBetaWarning: showBetaWarning,
|
||||
showDataUpgrade: !showBetaWarning
|
||||
@@ -254,6 +256,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
this.didCheckForOffline = true;
|
||||
if (this.offline && this.application.getNoteCount() === 0) {
|
||||
this.appState.accountMenu.setShow(true);
|
||||
this.appState.accountMenu2.setShow(true);
|
||||
}
|
||||
}
|
||||
this.syncUpdated();
|
||||
@@ -435,7 +438,9 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
}
|
||||
|
||||
accountMenuPressed() {
|
||||
console.log('here');
|
||||
this.appState.accountMenu.toggleShow();
|
||||
this.appState.accountMenu2.toggleShow();
|
||||
this.closeAllRooms();
|
||||
}
|
||||
|
||||
@@ -445,6 +450,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
|
||||
closeAccountMenu() {
|
||||
this.appState.accountMenu.setShow(false);
|
||||
this.appState.accountMenu2.setShow(false);
|
||||
}
|
||||
|
||||
lockApp() {
|
||||
@@ -562,6 +568,7 @@ class FooterViewCtrl extends PureViewCtrl<unknown, {
|
||||
return;
|
||||
}
|
||||
this.appState.accountMenu.setShow(false);
|
||||
this.appState.accountMenu2.setShow(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
}
|
||||
|
||||
#account-panel,
|
||||
#account-panel-vardan,
|
||||
#sync-resolution-menu {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user