From 6b61a544bc5d0f09cfc04fb9066a9f8406978d46 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 24 Oct 2019 11:48:58 -0400 Subject: [PATCH] add email to syncPassword component and more sync cleanup --- src/ui/component/app/index.js | 7 +- src/ui/component/app/view.jsx | 47 +- src/ui/component/syncPassword/index.js | 3 +- src/ui/component/syncPassword/view.jsx | 9 +- .../component/walletSecurityAndSync/index.js | 61 --- .../component/walletSecurityAndSync/view.jsx | 405 ------------------ src/ui/index.jsx | 2 +- src/ui/redux/actions/app.js | 16 +- src/ui/redux/reducers/settings.js | 2 +- 9 files changed, 22 insertions(+), 530 deletions(-) delete mode 100644 src/ui/component/walletSecurityAndSync/index.js delete mode 100644 src/ui/component/walletSecurityAndSync/view.jsx diff --git a/src/ui/component/app/index.js b/src/ui/component/app/index.js index 950513b88..b4fc3cdb8 100644 --- a/src/ui/component/app/index.js +++ b/src/ui/component/app/index.js @@ -6,15 +6,13 @@ import { doRewardList, doFetchRewardedContent, doFetchAccessToken, - selectAccessToken, selectGetSyncErrorMessage, selectUploadCount, } from 'lbryinc'; -import { doFetchTransactions, doFetchChannelListMine, selectBalance } from 'lbry-redux'; +import { doFetchTransactions, doFetchChannelListMine } from 'lbry-redux'; import { makeSelectClientSetting, selectThemePath } from 'redux/selectors/settings'; import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app'; import { doDownloadUpgradeRequested, doSignIn, doSyncWithPreferences } from 'redux/actions/app'; -import { doSetClientSetting } from 'redux/actions/settings'; import App from './view'; const select = state => ({ @@ -23,10 +21,8 @@ const select = state => ({ language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), autoUpdateDownloaded: selectAutoUpdateDownloaded(state), isUpgradeAvailable: selectIsUpgradeAvailable(state), - balance: selectBalance(state), syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state), syncError: selectGetSyncErrorMessage(state), - accessToken: selectAccessToken(state), uploadCount: selectUploadCount(state), }); @@ -39,7 +35,6 @@ const perform = dispatch => ({ signIn: () => dispatch(doSignIn()), requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()), checkSync: () => dispatch(doSyncWithPreferences()), - setSyncEnabled: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_SYNC, value)), }); export default hot( diff --git a/src/ui/component/app/view.jsx b/src/ui/component/app/view.jsx index 965112736..9147cf825 100644 --- a/src/ui/component/app/view.jsx +++ b/src/ui/component/app/view.jsx @@ -1,6 +1,5 @@ // @flow import * as ICONS from 'constants/icons'; -import * as ACTIONS from 'constants/action_types'; import * as PAGES from 'constants/pages'; import React, { useEffect, useRef, useState } from 'react'; import classnames from 'classnames'; @@ -16,8 +15,6 @@ import FileViewer from 'component/fileViewer'; import { withRouter } from 'react-router'; import usePrevious from 'effects/use-previous'; import Button from 'component/button'; -import usePersistedState from 'effects/use-persisted-state'; -import { Lbryio } from 'lbryinc'; export const MAIN_WRAPPER_CLASS = 'main-wrapper'; // @if TARGET='app' @@ -45,7 +42,6 @@ type Props = { isUpgradeAvailable: boolean, autoUpdateDownloaded: boolean, checkSync: () => void, - setSyncEnabled: boolean => void, syncEnabled: boolean, uploadCount: number, balance: ?number, @@ -66,12 +62,9 @@ function App(props: Props) { autoUpdateDownloaded, isUpgradeAvailable, requestDownloadUpgrade, - setSyncEnabled, syncEnabled, checkSync, uploadCount, - balance, - accessToken, history, syncError, } = props; @@ -79,7 +72,6 @@ function App(props: Props) { const appRef = useRef(); const isEnhancedLayout = useKonamiListener(); const [hasSignedIn, setHasSignedIn] = useState(false); - const [hasDeterminedIfNewUser, setHasDeterminedIfNewUser] = usePersistedState('is-new-user', false); const userId = user && user.id; const hasVerifiedEmail = user && user.has_verified_email; const isRewardApproved = user && user.is_reward_approved; @@ -95,41 +87,6 @@ function App(props: Props) { uri = newpath + hash; } catch (e) {} - // This should not be needed and will be removed after 37 is released - // We should just be able to default the enableSync setting to true, but we don't want - // to automatically opt-in existing users. Only users that go through the new sign in flow - // should be automatically opted-in (they choose to uncheck the option and turn off sync still) - useEffect(() => { - if (balance === undefined || accessToken === undefined || hasDeterminedIfNewUser) { - return; - } - - // Manually call subscription/list once because I was dumb and wasn't persisting it in redux - Lbryio.call('subscription', 'list').then(response => { - if (response && response.length) { - const subscriptions = response.map(value => { - const { channel_name: channelName, claim_id: claimId } = value; - return { - channelName, - uri: buildURI({ channelName, channelClaimId: claimId }), - }; - }); - - window.store.dispatch({ - type: ACTIONS.FETCH_SUBSCRIPTIONS_SUCCESS, - data: subscriptions, - }); - } - - // Yeah... this isn't the best check, but it works for now - const newUser = balance === 0; - if (newUser) { - setSyncEnabled(true); - } - setHasDeterminedIfNewUser(true); - }); - }, [balance, accessToken, hasDeterminedIfNewUser, setHasDeterminedIfNewUser]); - useEffect(() => { if (!uploadCount) return; const handleBeforeUnload = event => { @@ -187,7 +144,7 @@ function App(props: Props) { }, [hasVerifiedEmail, signIn, hasSignedIn]); useEffect(() => { - if (hasVerifiedEmail && syncEnabled && hasDeterminedIfNewUser) { + if (hasVerifiedEmail && syncEnabled) { checkSync(); let syncInterval = setInterval(() => { @@ -198,7 +155,7 @@ function App(props: Props) { clearInterval(syncInterval); }; } - }, [hasVerifiedEmail, syncEnabled, checkSync, hasDeterminedIfNewUser]); + }, [hasVerifiedEmail, syncEnabled, checkSync]); useEffect(() => { if (syncError) { diff --git a/src/ui/component/syncPassword/index.js b/src/ui/component/syncPassword/index.js index 021ac6b9d..d65ccc231 100644 --- a/src/ui/component/syncPassword/index.js +++ b/src/ui/component/syncPassword/index.js @@ -1,10 +1,11 @@ import { connect } from 'react-redux'; -import { doGetSync, selectGetSyncIsPending } from 'lbryinc'; +import { doGetSync, selectGetSyncIsPending, selectUserEmail } from 'lbryinc'; import { doSetClientSetting } from 'redux/actions/settings'; import SyncPassword from './view'; const select = state => ({ getSyncIsPending: selectGetSyncIsPending(state), + email: selectUserEmail(state), }); const perform = dispatch => ({ diff --git a/src/ui/component/syncPassword/view.jsx b/src/ui/component/syncPassword/view.jsx index 1d128a601..42e16ed10 100644 --- a/src/ui/component/syncPassword/view.jsx +++ b/src/ui/component/syncPassword/view.jsx @@ -9,10 +9,11 @@ import usePersistedState from 'effects/use-persisted-state'; type Props = { getSync: (?string) => void, getSyncIsPending: boolean, + email: string, }; function SyncPassword(props: Props) { - const { getSync, getSyncIsPending } = props; + const { getSync, getSyncIsPending, email } = props; const [password, setPassword] = React.useState(''); const [rememberPassword, setRememberPassword] = usePersistedState(true); @@ -25,12 +26,14 @@ function SyncPassword(props: Props) {
setPassword(e.target.value)} /> diff --git a/src/ui/component/walletSecurityAndSync/index.js b/src/ui/component/walletSecurityAndSync/index.js deleted file mode 100644 index 0652588b6..000000000 --- a/src/ui/component/walletSecurityAndSync/index.js +++ /dev/null @@ -1,61 +0,0 @@ -import { connect } from 'react-redux'; -import { - doWalletStatus, - doWalletEncrypt, - doWalletDecrypt, - selectWalletEncryptSucceeded, - selectWalletEncryptPending, - selectWalletEncryptResult, - selectWalletIsEncrypted, - selectHasTransactions, -} from 'lbry-redux'; -import WalletSecurityAndSync from './view'; -import { - doCheckSync, - doGetSync, - doSetDefaultAccount, - doSyncApply, - selectHasSyncedWallet, - selectGetSyncIsPending, - selectSetSyncIsPending, - selectSyncApplyIsPending, - selectSyncApplyErrorMessage, - selectSyncData, - selectSyncHash, - selectHashChanged, - selectUser, -} from 'lbryinc'; -import { doSetClientSetting } from 'redux/actions/settings'; - -const select = state => ({ - walletEncryptSucceeded: selectWalletEncryptSucceeded(state), - walletEncryptPending: selectWalletEncryptPending(state), - walletEncryptResult: selectWalletEncryptResult(state), - walletEncrypted: selectWalletIsEncrypted(state), - walletHasTransactions: selectHasTransactions(state), - user: selectUser(state), - hasSyncedWallet: selectHasSyncedWallet(state), - getSyncIsPending: selectGetSyncIsPending(state), - setSyncIsPending: selectSetSyncIsPending(state), - syncApplyIsPending: selectSyncApplyIsPending(state), - syncApplyErrorMessage: selectSyncApplyErrorMessage(state), - syncData: selectSyncData(state), - syncHash: selectSyncHash(state), - hashChanged: selectHashChanged(state), -}); - -const perform = dispatch => ({ - encryptWallet: password => dispatch(doWalletEncrypt(password)), - decryptWallet: () => dispatch(doWalletDecrypt()), - updateWalletStatus: () => dispatch(doWalletStatus()), - syncApply: (hash, data, password) => dispatch(doSyncApply(hash, data, password)), - getSync: password => dispatch(doGetSync(password, true)), - checkSync: () => dispatch(doCheckSync()), - setDefaultAccount: () => dispatch(doSetDefaultAccount()), - setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), -}); - -export default connect( - select, - perform -)(WalletSecurityAndSync); diff --git a/src/ui/component/walletSecurityAndSync/view.jsx b/src/ui/component/walletSecurityAndSync/view.jsx deleted file mode 100644 index 5a3b410a3..000000000 --- a/src/ui/component/walletSecurityAndSync/view.jsx +++ /dev/null @@ -1,405 +0,0 @@ -export default () => null; -// // @flow -// import React, { useState } from 'react'; -// import { Form, FormField, Submit } from 'component/common/form'; -// import Button from 'component/button'; -// import UserEmail from 'component/userEmail'; -// import * as ICONS from 'constants/icons'; - -// import { getSavedPassword, setSavedPassword, deleteAuthToken } from 'util/saved-passwords'; - -// type Props = { -// // wallet statuses -// walletEncryptSucceeded: boolean, -// walletEncryptPending: boolean, -// walletDecryptSucceeded: boolean, -// walletDecryptPending: boolean, -// updateWalletStatus: boolean, -// walletEncrypted: boolean, -// // wallet methods -// encryptWallet: (?string) => void, -// decryptWallet: (?string) => void, -// updateWalletStatus: () => void, -// // housekeeping -// setPasswordSaved: () => void, -// syncEnabled: boolean, -// setClientSetting: (string, boolean | string) => void, -// isPasswordSaved: boolean, -// // data -// user: any, -// // sync statuses -// hasSyncedWallet: boolean, -// getSyncIsPending?: boolean, -// syncApplyErrorMessage?: string, -// hashChanged: boolean, -// // sync data -// syncData: string | null, -// syncHash: string | null, -// // sync methods -// syncApply: (string | null, string | null, string) => void, -// checkSync: () => void, -// setDefaultAccount: () => void, -// hasTransactions: boolean, -// }; - -// type State = { -// newPassword: string, -// newPasswordConfirm: string, -// passwordMatch: boolean, -// understandConfirmed: boolean, -// understandError: boolean, -// submitted: boolean, -// failMessage: ?string, -// rememberPassword: boolean, -// showEmailReg: boolean, -// failed: boolean, -// enableSync: boolean, -// encryptWallet: boolean, -// obscurePassword: boolean, -// advancedMode: boolean, -// showPasswordFields: boolean, -// }; - -// function WalletSecurityAndSync(props: Props) { -// const { -// // walletEncryptSucceeded, -// // walletEncryptPending, -// // walletDecryptSucceeded, -// // walletDecryptPending, -// // updateWalletStatus, -// walletEncrypted, -// encryptWallet, -// decryptWallet, -// syncEnabled, -// user, -// hasSyncedWallet, -// getSyncIsPending, -// syncApplyErrorMessage, -// hashChanged, -// syncData, -// syncHash, -// syncApply, -// checkSync, -// hasTransactions, -// // setDefaultAccount, -// } = props; - -// const defaultComponentState: State = { -// newPassword: '', -// newPasswordConfirm: '', -// passwordMatch: false, -// understandConfirmed: false, -// understandError: false, -// submitted: false, // Prior actions could be marked complete -// failMessage: undefined, -// rememberPassword: false, -// showEmailReg: false, -// failed: false, -// enableSync: syncEnabled, -// encryptWallet: walletEncrypted, -// obscurePassword: true, -// advancedMode: false, -// showPasswordFields: false, -// }; -// const [componentState, setComponentState] = useState(defaultComponentState); - -// const safeToSync = !hasTransactions || !hashChanged; - -// // on mount -// // useEffect(() => { -// // checkSync(); -// // getSavedPassword().then(p => { -// // if (p) { -// // setComponentState({ -// // ...componentState, -// // newPassword: p, -// // newPasswordConfirm: p, -// // showPasswordFields: true, -// // rememberPassword: true, -// // }); -// // } -// // }); -// // }, []); - -// // useEffect(() => { -// // setComponentState({ -// // ...componentState, -// // passwordMatch: componentState.newPassword === componentState.newPasswordConfirm, -// // }); -// // }, [componentState.newPassword, componentState.newPasswordConfirm]); - -// const isEmailVerified = user && user.primary_email && user.has_verified_email; -// // const syncDisabledMessage = 'You cannot sync without an email'; - -// function onChangeNewPassword(event: SyntheticInputEvent<>) { -// setComponentState({ ...componentState, newPassword: event.target.value || '' }); -// } - -// function onChangeRememberPassword(event: SyntheticInputEvent<>) { -// if (componentState.rememberPassword) { -// deleteAuthToken(); -// } -// setComponentState({ ...componentState, rememberPassword: event.target.checked }); -// } - -// function onChangeNewPasswordConfirm(event: SyntheticInputEvent<>) { -// setComponentState({ ...componentState, newPasswordConfirm: event.target.value || '' }); -// } - -// function onChangeUnderstandConfirm(event: SyntheticInputEvent<>) { -// setComponentState({ ...componentState, understandConfirmed: /^.?i understand.?$/i.test(event.target.value) }); -// } - -// function onChangeSync(event: SyntheticInputEvent<>) { -// if (componentState.enableSync) { -// setComponentState({ ...componentState, enableSync: false, newPassword: '', newPasswordConfirm: '' }); -// setComponentState({ ...componentState, enableSync: false, newPassword: '', newPasswordConfirm: '' }); -// } -// if (!(walletEncrypted || syncApplyErrorMessage || componentState.advancedMode)) { -// easyApply(); -// } else { -// setComponentState({ ...componentState, enableSync: true }); -// } -// } - -// function onChangeEncrypt(event: SyntheticInputEvent<>) { -// setComponentState({ ...componentState, encryptWallet: event.target.checked }); -// } - -// async function easyApply() { -// return new Promise((resolve, reject) => { -// return syncApply(syncHash, syncData, componentState.newPassword); -// }) -// .then(() => { -// setComponentState({ ...componentState, enableSync: event.target.checked }); -// }) -// .catch(); -// } - -// async function apply() { -// setComponentState({ ...componentState, failed: false }); - -// await checkSync(); - -// if (componentState.enableSync) { -// await syncApply(syncHash, syncData, componentState.newPassword); -// if (syncApplyErrorMessage) { -// setComponentState({ ...componentState, failed: true }); -// } -// } - -// if (walletEncrypted) { -// await decryptWallet(); -// } - -// if (componentState.encryptWallet && !componentState.failed) { -// await encryptWallet(componentState.newPassword) -// .then(() => {}) -// .catch(() => { -// setComponentState({ ...componentState, failed: false }); -// }); -// } - -// if (componentState.rememberPassword && !componentState.failed) { -// setSavedPassword(componentState.newPassword); -// } -// } - -// return ( -// -//
-//

{__('Wallet Sync and Security')}

-// {!isEmailVerified && ( -// -//

-// {__(`It looks like we don't have your email.`)}{' '} -//

- -// {/* Testing stuff and Diagnostics */} - -//
-//
-// -// ); -// } - -// export default WalletSecurityAndSync; diff --git a/src/ui/index.jsx b/src/ui/index.jsx index 8aad15f27..5a9bd6920 100644 --- a/src/ui/index.jsx +++ b/src/ui/index.jsx @@ -72,7 +72,7 @@ Lbryio.setOverride( { auth_token: '', language: 'en', - // app_id: status.installation_id, + app_id: status.installation_id, }, 'post' ).then(response => { diff --git a/src/ui/redux/actions/app.js b/src/ui/redux/actions/app.js index ecf73e34e..3333fd35a 100644 --- a/src/ui/redux/actions/app.js +++ b/src/ui/redux/actions/app.js @@ -38,7 +38,7 @@ import { doAuthenticate, doGetSync } from 'lbryinc'; import { lbrySettings as config, version as appVersion } from 'package.json'; import { push } from 'connected-react-router'; import analytics from 'analytics'; -import { deleteAuthToken, getSavedPassword, getAuthToken } from 'util/saved-passwords'; +import { deleteAuthToken, deleteSavedPassword, getSavedPassword, getAuthToken } from 'util/saved-passwords'; // @if TARGET='app' const { autoUpdater } = remote.require('electron-updater'); @@ -475,12 +475,14 @@ export function doSyncWithPreferences() { } function failCb() { - dispatch( - doToast({ - isError: true, - message: __('Unable to load your saved preferences.'), - }) - ); + deleteSavedPassword().then(() => { + dispatch( + doToast({ + isError: true, + message: __('Unable to load your saved preferences.'), + }) + ); + }); } doPreferenceGet('shared', successCb, failCb); diff --git a/src/ui/redux/reducers/settings.js b/src/ui/redux/reducers/settings.js index 5d77d1da6..f4290aa07 100644 --- a/src/ui/redux/reducers/settings.js +++ b/src/ui/redux/reducers/settings.js @@ -11,7 +11,7 @@ const defaultState = { // UX [SETTINGS.NEW_USER_ACKNOWLEDGED]: false, [SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED]: false, - [SETTINGS.ENABLE_SYNC]: false, + [SETTINGS.ENABLE_SYNC]: true, // UI [SETTINGS.LANGUAGE]: window.localStorage.getItem(SETTINGS.LANGUAGE) || 'en',