diff options
Diffstat (limited to 'src/view/com/auth')
| -rw-r--r-- | src/view/com/auth/LoggedOut.tsx | 7 | ||||
| -rw-r--r-- | src/view/com/auth/create/CreateAccount.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/auth/login/ChooseAccountForm.tsx | 114 | ||||
| -rw-r--r-- | src/view/com/auth/login/ForgotPasswordForm.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/auth/login/Login.tsx | 11 | ||||
| -rw-r--r-- | src/view/com/auth/login/LoginForm.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/auth/login/SetNewPasswordForm.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/auth/withAuthRequired.tsx | 8 |
8 files changed, 78 insertions, 83 deletions
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index 3e2c9c1bf..0d8172964 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -6,7 +6,6 @@ import {CreateAccount} from 'view/com/auth/create/CreateAccount' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' -import {useStores} from 'state/index' import {useAnalytics} from 'lib/analytics/analytics' import {SplashScreen} from './SplashScreen' import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' @@ -19,7 +18,6 @@ enum ScreenState { export const LoggedOut = observer(function LoggedOutImpl() { const pal = usePalette('default') - const store = useStores() const setMinimalShellMode = useSetMinimalShellMode() const {screen} = useAnalytics() const [screenState, setScreenState] = React.useState<ScreenState>( @@ -31,10 +29,7 @@ export const LoggedOut = observer(function LoggedOutImpl() { setMinimalShellMode(true) }, [screen, setMinimalShellMode]) - if ( - store.session.isResumingSession || - screenState === ScreenState.S_LoginOrCreateAccount - ) { + if (screenState === ScreenState.S_LoginOrCreateAccount) { return ( <SplashScreen onPressSignin={() => setScreenState(ScreenState.S_Login)} diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 8e2bbed85..65f9ba26d 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -18,6 +18,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useOnboardingDispatch} from '#/state/shell' +import {useSessionApi} from '#/state/session' import {Step1} from './Step1' import {Step2} from './Step2' @@ -34,6 +35,7 @@ export const CreateAccount = observer(function CreateAccountImpl({ const model = React.useMemo(() => new CreateAccountModel(store), [store]) const {_} = useLingui() const onboardingDispatch = useOnboardingDispatch() + const {createAccount} = useSessionApi() React.useEffect(() => { screen('CreateAccount') @@ -64,14 +66,17 @@ export const CreateAccount = observer(function CreateAccountImpl({ model.next() } else { try { - await model.submit(onboardingDispatch) + await model.submit({ + onboardingDispatch, + createAccount, + }) } catch { // dont need to handle here } finally { track('Try Create Account') } } - }, [model, track, onboardingDispatch]) + }, [model, track, onboardingDispatch, createAccount]) return ( <LoggedOutLayout diff --git a/src/view/com/auth/login/ChooseAccountForm.tsx b/src/view/com/auth/login/ChooseAccountForm.tsx index 596a8e411..8c94ef2da 100644 --- a/src/view/com/auth/login/ChooseAccountForm.tsx +++ b/src/view/com/auth/login/ChooseAccountForm.tsx @@ -1,52 +1,90 @@ import React from 'react' -import { - ActivityIndicator, - ScrollView, - TouchableOpacity, - View, -} from 'react-native' +import {ScrollView, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' import {UserAvatar} from '../../util/UserAvatar' import {s} from 'lib/styles' -import {RootStoreModel} from 'state/index' -import {AccountData} from 'state/models/session' import {usePalette} from 'lib/hooks/usePalette' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {styles} from './styles' +import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +function AccountItem({ + account, + onSelect, +}: { + account: SessionAccount + onSelect: (account: SessionAccount) => void +}) { + const pal = usePalette('default') + const {_} = useLingui() + const {data: profile} = useProfileQuery({did: account.did}) + + const onPress = React.useCallback(() => { + onSelect(account) + }, [account, onSelect]) + + return ( + <TouchableOpacity + testID={`chooseAccountBtn-${account.handle}`} + key={account.did} + style={[pal.view, pal.border, styles.account]} + onPress={onPress} + accessibilityRole="button" + accessibilityLabel={_(msg`Sign in as ${account.handle}`)} + accessibilityHint="Double tap to sign in"> + <View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}> + <View style={s.p10}> + <UserAvatar avatar={profile?.avatar} size={30} /> + </View> + <Text style={styles.accountText}> + <Text type="lg-bold" style={pal.text}> + {profile?.displayName || account.handle}{' '} + </Text> + <Text type="lg" style={[pal.textLight]}> + {account.handle} + </Text> + </Text> + <FontAwesomeIcon + icon="angle-right" + size={16} + style={[pal.text, s.mr10]} + /> + </View> + </TouchableOpacity> + ) +} export const ChooseAccountForm = ({ - store, onSelectAccount, onPressBack, }: { - store: RootStoreModel - onSelectAccount: (account?: AccountData) => void + onSelectAccount: (account?: SessionAccount) => void onPressBack: () => void }) => { const {track, screen} = useAnalytics() const pal = usePalette('default') - const [isProcessing, setIsProcessing] = React.useState(false) const {_} = useLingui() + const {accounts} = useSession() + const {initSession} = useSessionApi() React.useEffect(() => { screen('Choose Account') }, [screen]) - const onTryAccount = async (account: AccountData) => { - if (account.accessJwt && account.refreshJwt) { - setIsProcessing(true) - if (await store.session.resumeSession(account)) { + const onSelect = React.useCallback( + async (account: SessionAccount) => { + if (account.accessJwt) { + await initSession(account) track('Sign In', {resumedSession: true}) - setIsProcessing(false) - return + } else { + onSelectAccount(account) } - setIsProcessing(false) - } - onSelectAccount(account) - } + }, + [track, initSession, onSelectAccount], + ) return ( <ScrollView testID="chooseAccountForm" style={styles.maxHeight}> @@ -55,35 +93,8 @@ export const ChooseAccountForm = ({ style={[pal.text, styles.groupLabel, s.mt5, s.mb10]}> <Trans>Sign in as...</Trans> </Text> - {store.session.accounts.map(account => ( - <TouchableOpacity - testID={`chooseAccountBtn-${account.handle}`} - key={account.did} - style={[pal.view, pal.border, styles.account]} - onPress={() => onTryAccount(account)} - accessibilityRole="button" - accessibilityLabel={_(msg`Sign in as ${account.handle}`)} - accessibilityHint="Double tap to sign in"> - <View - style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}> - <View style={s.p10}> - <UserAvatar avatar={account.aviUrl} size={30} /> - </View> - <Text style={styles.accountText}> - <Text type="lg-bold" style={pal.text}> - {account.displayName || account.handle}{' '} - </Text> - <Text type="lg" style={[pal.textLight]}> - {account.handle} - </Text> - </Text> - <FontAwesomeIcon - icon="angle-right" - size={16} - style={[pal.text, s.mr10]} - /> - </View> - </TouchableOpacity> + {accounts.map(account => ( + <AccountItem key={account.did} account={account} onSelect={onSelect} /> ))} <TouchableOpacity testID="chooseNewAccountBtn" @@ -112,7 +123,6 @@ export const ChooseAccountForm = ({ </Text> </TouchableOpacity> <View style={s.flex1} /> - {isProcessing && <ActivityIndicator />} </View> </ScrollView> ) diff --git a/src/view/com/auth/login/ForgotPasswordForm.tsx b/src/view/com/auth/login/ForgotPasswordForm.tsx index 9bfab18b5..a794665c9 100644 --- a/src/view/com/auth/login/ForgotPasswordForm.tsx +++ b/src/view/com/auth/login/ForgotPasswordForm.tsx @@ -15,7 +15,6 @@ import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' import {s} from 'lib/styles' import {toNiceDomain} from 'lib/strings/url-helpers' -import {RootStoreModel} from 'state/index' import {ServiceDescription} from 'state/models/session' import {isNetworkError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' @@ -36,7 +35,6 @@ export const ForgotPasswordForm = ({ onPressBack, onEmailSent, }: { - store: RootStoreModel error: string serviceUrl: string serviceDescription: ServiceDescription | undefined diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx index 401b7d980..27d08812c 100644 --- a/src/view/com/auth/login/Login.tsx +++ b/src/view/com/auth/login/Login.tsx @@ -4,7 +4,6 @@ import {useAnalytics} from 'lib/analytics/analytics' import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' import {useStores, DEFAULT_SERVICE} from 'state/index' import {ServiceDescription} from 'state/models/session' -import {AccountData} from 'state/models/session' import {usePalette} from 'lib/hooks/usePalette' import {logger} from '#/logger' import {ChooseAccountForm} from './ChooseAccountForm' @@ -14,6 +13,7 @@ import {SetNewPasswordForm} from './SetNewPasswordForm' import {PasswordUpdatedForm} from './PasswordUpdatedForm' import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useSession, SessionAccount} from '#/state/session' enum Forms { Login, @@ -26,6 +26,7 @@ enum Forms { export const Login = ({onPressBack}: {onPressBack: () => void}) => { const pal = usePalette('default') const store = useStores() + const {accounts} = useSession() const {track} = useAnalytics() const {_} = useLingui() const [error, setError] = useState<string>('') @@ -36,10 +37,10 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { >(undefined) const [initialHandle, setInitialHandle] = useState<string>('') const [currentForm, setCurrentForm] = useState<Forms>( - store.session.hasAccounts ? Forms.ChooseAccount : Forms.Login, + accounts.length ? Forms.ChooseAccount : Forms.Login, ) - const onSelectAccount = (account?: AccountData) => { + const onSelectAccount = (account?: SessionAccount) => { if (account?.service) { setServiceUrl(account.service) } @@ -95,7 +96,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { title={_(msg`Sign in`)} description={_(msg`Enter your username and password`)}> <LoginForm - store={store} error={error} serviceUrl={serviceUrl} serviceDescription={serviceDescription} @@ -114,7 +114,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { title={_(msg`Sign in as...`)} description={_(msg`Select from an existing account`)}> <ChooseAccountForm - store={store} onSelectAccount={onSelectAccount} onPressBack={onPressBack} /> @@ -126,7 +125,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { title={_(msg`Forgot Password`)} description={_(msg`Let's get your password reset!`)}> <ForgotPasswordForm - store={store} error={error} serviceUrl={serviceUrl} serviceDescription={serviceDescription} @@ -143,7 +141,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { title={_(msg`Forgot Password`)} description={_(msg`Let's get your password reset!`)}> <SetNewPasswordForm - store={store} error={error} serviceUrl={serviceUrl} setError={setError} diff --git a/src/view/com/auth/login/LoginForm.tsx b/src/view/com/auth/login/LoginForm.tsx index 166a7cbd8..be3a95131 100644 --- a/src/view/com/auth/login/LoginForm.tsx +++ b/src/view/com/auth/login/LoginForm.tsx @@ -15,7 +15,6 @@ import {Text} from '../../util/text/Text' import {s} from 'lib/styles' import {createFullHandle} from 'lib/strings/handles' import {toNiceDomain} from 'lib/strings/url-helpers' -import {RootStoreModel} from 'state/index' import {ServiceDescription} from 'state/models/session' import {isNetworkError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' @@ -29,7 +28,6 @@ import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' export const LoginForm = ({ - store, error, serviceUrl, serviceDescription, @@ -40,7 +38,6 @@ export const LoginForm = ({ onPressBack, onPressForgotPassword, }: { - store: RootStoreModel error: string serviceUrl: string serviceDescription: ServiceDescription | undefined @@ -106,11 +103,6 @@ export const LoginForm = ({ identifier: fullIdent, password, }) - await store.session.login({ - service: serviceUrl, - identifier: fullIdent, - password, - }) } catch (e: any) { const errMsg = e.toString() logger.warn('Failed to login', {error: e}) diff --git a/src/view/com/auth/login/SetNewPasswordForm.tsx b/src/view/com/auth/login/SetNewPasswordForm.tsx index 04eaa2842..2bb614df2 100644 --- a/src/view/com/auth/login/SetNewPasswordForm.tsx +++ b/src/view/com/auth/login/SetNewPasswordForm.tsx @@ -10,7 +10,6 @@ import {BskyAgent} from '@atproto/api' import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' import {s} from 'lib/styles' -import {RootStoreModel} from 'state/index' import {isNetworkError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' @@ -27,7 +26,6 @@ export const SetNewPasswordForm = ({ onPressBack, onPasswordSet, }: { - store: RootStoreModel error: string serviceUrl: string setError: (v: string) => void diff --git a/src/view/com/auth/withAuthRequired.tsx b/src/view/com/auth/withAuthRequired.tsx index 898f81051..4b8b31d6c 100644 --- a/src/view/com/auth/withAuthRequired.tsx +++ b/src/view/com/auth/withAuthRequired.tsx @@ -6,7 +6,6 @@ import { TouchableOpacity, } from 'react-native' import {observer} from 'mobx-react-lite' -import {useStores} from 'state/index' import {CenteredView} from '../util/Views' import {LoggedOut} from './LoggedOut' import {Onboarding} from './Onboarding' @@ -14,17 +13,18 @@ import {Text} from '../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {STATUS_PAGE_URL} from 'lib/constants' import {useOnboardingState} from '#/state/shell' +import {useSession} from '#/state/session' export const withAuthRequired = <P extends object>( Component: React.ComponentType<P>, ): React.FC<P> => observer(function AuthRequired(props: P) { - const store = useStores() + const {isInitialLoad, hasSession} = useSession() const onboardingState = useOnboardingState() - if (store.session.isResumingSession) { + if (isInitialLoad) { return <Loading /> } - if (!store.session.hasSession) { + if (!hasSession) { return <LoggedOut /> } if (onboardingState.isActive) { |