zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Merge pull request #1860 from bluesky-social/eric/startup

Browse source 
Web login/signup and shell
This commit is contained in:
Eric Bailey 2023-11-10 11:31:36 -06:00 • committed by GitHub
commit 6513055d02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 695 additions and 916 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/view/com/auth/LoggedOut.tsx
View file

@ -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)}

9
src/view/com/auth/create/CreateAccount.tsx
View file

@ -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

114
src/view/com/auth/login/ChooseAccountForm.tsx
View file

@ -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>
)

2
src/view/com/auth/login/ForgotPasswordForm.tsx
View file

@ -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

11
src/view/com/auth/login/Login.tsx
View file

@ -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}

8
src/view/com/auth/login/LoginForm.tsx
View file

@ -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})

2
src/view/com/auth/login/SetNewPasswordForm.tsx
View file

@ -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

8
src/view/com/auth/withAuthRequired.tsx
View file

@ -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) {

15
src/view/com/feeds/FeedPage.tsx
View file

@ -23,6 +23,7 @@ import useAppState from 'react-native-appstate-hook'
import {logger} from '#/logger'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useSession} from '#/state/session'
export const FeedPage = observer(function FeedPageImpl({
testID,
@ -38,6 +39,7 @@ export const FeedPage = observer(function FeedPageImpl({
renderEndOfFeed?: () => JSX.Element
}) {
const store = useStores()
const {isSandbox} = useSession()
const pal = usePalette('default')
const {_} = useLingui()
const {isDesktop} = useWebMediaQueries()
@ -140,7 +142,7 @@ export const FeedPage = observer(function FeedPageImpl({
style={[pal.text, {fontWeight: 'bold'}]}
text={
<>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
{isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
{hasNew && (
<View
style={{
@ -173,7 +175,16 @@ export const FeedPage = observer(function FeedPageImpl({
)
}
return <></>
}, [isDesktop, pal.view, pal.text, pal.textLight, store, hasNew, _])
}, [
isDesktop,
pal.view,
pal.text,
pal.textLight,
store,
hasNew,
_,
isSandbox,
])
return (
<View testID={testID} style={s.h100pct}>

25
src/view/com/modals/ChangeEmail.tsx
View file

@ -6,7 +6,6 @@ import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {ErrorMessage} from '../util/error/ErrorMessage'
import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection'
@ -15,6 +14,7 @@ import {cleanError} from 'lib/strings/errors'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals'
import {useSession, useSessionApi} from '#/state/session'
enum Stages {
InputEmail,
@ -26,12 +26,11 @@ export const snapPoints = ['90%']
export const Component = observer(function Component({}: {}) {
const pal = usePalette('default')
const store = useStores()
const {agent, currentAccount} = useSession()
const {updateCurrentAccount} = useSessionApi()
const {_} = useLingui()
const [stage, setStage] = useState<Stages>(Stages.InputEmail)
const [email, setEmail] = useState<string>(
store.session.currentSession?.email || '',
)
const [email, setEmail] = useState<string>(currentAccount?.email || '')
const [confirmationCode, setConfirmationCode] = useState<string>('')
const [isProcessing, setIsProcessing] = useState<boolean>(false)
const [error, setError] = useState<string>('')
@ -39,19 +38,19 @@ export const Component = observer(function Component({}: {}) {
const {openModal, closeModal} = useModalControls()
const onRequestChange = async () => {
if (email === store.session.currentSession?.email) {
if (email === currentAccount?.email) {
setError('Enter your new email above')
return
}
setError('')
setIsProcessing(true)
try {
const res = await store.agent.com.atproto.server.requestEmailUpdate()
const res = await agent.com.atproto.server.requestEmailUpdate()
if (res.data.tokenRequired) {
setStage(Stages.ConfirmCode)
} else {
await store.agent.com.atproto.server.updateEmail({email: email.trim()})
store.session.updateLocalAccountData({
await agent.com.atproto.server.updateEmail({email: email.trim()})
updateCurrentAccount({
email: email.trim(),
emailConfirmed: false,
})
@ -79,11 +78,11 @@ export const Component = observer(function Component({}: {}) {
setError('')
setIsProcessing(true)
try {
await store.agent.com.atproto.server.updateEmail({
await agent.com.atproto.server.updateEmail({
email: email.trim(),
token: confirmationCode.trim(),
})
store.session.updateLocalAccountData({
updateCurrentAccount({
email: email.trim(),
emailConfirmed: false,
})
@ -120,8 +119,8 @@ export const Component = observer(function Component({}: {}) {
) : stage === Stages.ConfirmCode ? (
<Trans>
An email has been sent to your previous address,{' '}
{store.session.currentSession?.email || ''}. It includes a
confirmation code which you can enter below.
{currentAccount?.email || ''}. It includes a confirmation code
which you can enter below.
</Trans>
) : (
<Trans>

146
src/view/com/modals/SwitchAccount.tsx
View file

@ -6,7 +6,6 @@ import {
View,
} from 'react-native'
import {Text} from '../util/text/Text'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics'
@ -19,26 +18,91 @@ import {BottomSheetScrollView} from '@gorhom/bottom-sheet'
import {Haptics} from 'lib/haptics'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
export const snapPoints = ['40%', '90%']
function SwitchAccountCard({account}: {account: SessionAccount}) {
const pal = usePalette('default')
const {_} = useLingui()
const {track} = useAnalytics()
const {isSwitchingAccounts, currentAccount} = useSession()
const {logout} = useSessionApi()
const {data: profile} = useProfileQuery({did: account.did})
const isCurrentAccount = account.did === currentAccount?.did
const {onPressSwitchAccount} = useAccountSwitcher()
const onPressSignout = React.useCallback(() => {
track('Settings:SignOutButtonClicked')
logout()
}, [track, logout])
const contents = (
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={profile?.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
{profile?.displayName || currentAccount?.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>
{currentAccount?.handle}
</Text>
</View>
{isCurrentAccount ? (
<TouchableOpacity
testID="signOutBtn"
onPress={isSwitchingAccounts ? undefined : onPressSignout}
accessibilityRole="button"
accessibilityLabel={_(msg`Sign out`)}
accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
<Trans>Sign out</Trans>
</Text>
</TouchableOpacity>
) : (
<AccountDropdownBtn account={account} />
)}
</View>
)
return isCurrentAccount ? (
<Link
href={makeProfileLink({
did: currentAccount.did,
handle: currentAccount.handle,
})}
title="Your profile"
noFeedback>
{contents}
</Link>
) : (
<TouchableOpacity
testID={`switchToAccountBtn-${account.handle}`}
key={account.did}
style={[isSwitchingAccounts && styles.dimmed]}
onPress={
isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
{contents}
</TouchableOpacity>
)
}
export function Component({}: {}) {
const pal = usePalette('default')
const {track} = useAnalytics()
const {_: _lingui} = useLingui()
const store = useStores()
const [isSwitching, _, onPressSwitchAccount] = useAccountSwitcher()
const {isSwitchingAccounts, currentAccount, accounts} = useSession()
React.useEffect(() => {
Haptics.default()
})
const onPressSignout = React.useCallback(() => {
track('Settings:SignOutButtonClicked')
store.session.logout()
}, [track, store])
return (
<BottomSheetScrollView
style={[styles.container, pal.view]}
@ -46,62 +110,20 @@ export function Component({}: {}) {
<Text type="title-xl" style={[styles.title, pal.text]}>
<Trans>Switch Account</Trans>
</Text>
{isSwitching ? (
{isSwitchingAccounts || !currentAccount ? (
<View style={[pal.view, styles.linkCard]}>
<ActivityIndicator />
</View>
) : (
<Link href={makeProfileLink(store.me)} title="Your profile" noFeedback>
<View style={[pal.view, styles.linkCard]}>
<View style={styles.avi}>
<UserAvatar size={40} avatar={store.me.avatar} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text} numberOfLines={1}>
{store.me.displayName || store.me.handle}
</Text>
<Text type="sm" style={pal.textLight} numberOfLines={1}>
{store.me.handle}
</Text>
</View>
<TouchableOpacity
testID="signOutBtn"
onPress={isSwitching ? undefined : onPressSignout}
accessibilityRole="button"
accessibilityLabel={_lingui(msg`Sign out`)}
accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}>
<Text type="lg" style={pal.link}>
<Trans>Sign out</Trans>
</Text>
</TouchableOpacity>
</View>
</Link>
<SwitchAccountCard account={currentAccount} />
)}
{store.session.switchableAccounts.map(account => (
<TouchableOpacity
testID={`switchToAccountBtn-${account.handle}`}
key={account.did}
style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
onPress={
isSwitching ? undefined : () => onPressSwitchAccount(account)
}
accessibilityRole="button"
accessibilityLabel={`Switch to ${account.handle}`}
accessibilityHint="Switches the account you are logged in to">
<View style={styles.avi}>
<UserAvatar size={40} avatar={account.aviUrl} />
</View>
<View style={[s.flex1]}>
<Text type="md-bold" style={pal.text}>
{account.displayName || account.handle}
</Text>
<Text type="sm" style={pal.textLight}>
{account.handle}
</Text>
</View>
<AccountDropdownBtn handle={account.handle} />
</TouchableOpacity>
))}
{accounts
.filter(a => a.did !== currentAccount?.did)
.map(account => (
<SwitchAccountCard key={account.did} account={account} />
))}
</BottomSheetScrollView>
)
}

20
src/view/com/modals/VerifyEmail.tsx
View file

@ -14,7 +14,6 @@ import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {ErrorMessage} from '../util/error/ErrorMessage'
import * as Toast from '../util/Toast'
import {useStores} from 'state/index'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {isWeb} from 'platform/detection'
@ -23,6 +22,7 @@ import {cleanError} from 'lib/strings/errors'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useModalControls} from '#/state/modals'
import {useSession, useSessionApi} from '#/state/session'
export const snapPoints = ['90%']
@ -38,7 +38,8 @@ export const Component = observer(function Component({
showReminder?: boolean
}) {
const pal = usePalette('default')
const store = useStores()
const {agent, currentAccount} = useSession()
const {updateCurrentAccount} = useSessionApi()
const {_} = useLingui()
const [stage, setStage] = useState<Stages>(
showReminder ? Stages.Reminder : Stages.Email,
@ -53,7 +54,7 @@ export const Component = observer(function Component({
setError('')
setIsProcessing(true)
try {
await store.agent.com.atproto.server.requestEmailConfirmation()
await agent.com.atproto.server.requestEmailConfirmation()
setStage(Stages.ConfirmCode)
} catch (e) {
setError(cleanError(String(e)))
@ -66,11 +67,11 @@ export const Component = observer(function Component({
setError('')
setIsProcessing(true)
try {
await store.agent.com.atproto.server.confirmEmail({
email: (store.session.currentSession?.email || '').trim(),
await agent.com.atproto.server.confirmEmail({
email: (currentAccount?.email || '').trim(),
token: confirmationCode.trim(),
})
store.session.updateLocalAccountData({emailConfirmed: true})
updateCurrentAccount({emailConfirmed: true})
Toast.show('Email verified')
closeModal()
} catch (e) {
@ -112,9 +113,8 @@ export const Component = observer(function Component({
</Trans>
) : stage === Stages.ConfirmCode ? (
<Trans>
An email has been sent to{' '}
{store.session.currentSession?.email || ''}. It includes a
confirmation code which you can enter below.
An email has been sent to {currentAccount?.email || ''}. It
includes a confirmation code which you can enter below.
</Trans>
) : (
''
@ -130,7 +130,7 @@ export const Component = observer(function Component({
size={16}
/>
<Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}>
{store.session.currentSession?.email || ''}
{currentAccount?.email || ''}
</Text>
</View>
<Pressable

4
src/view/com/pager/FeedsTabBarMobile.tsx
View file

@ -19,12 +19,14 @@ import {useLingui} from '@lingui/react'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useSession} from '#/state/session'
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) {
const pal = usePalette('default')
const store = useStores()
const {isSandbox} = useSession()
const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen()
const items = useHomeTabs(store.preferences.pinnedFeeds)
@ -59,7 +61,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
</TouchableOpacity>
</View>
<Text style={[brandBlue, s.bold, styles.title]}>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
{isSandbox ? 'SANDBOX' : 'Bluesky'}
</Text>
<View style={[pal.view]}>
<Link

8
src/view/com/testing/TestCtrls.e2e.tsx
View file

@ -3,6 +3,7 @@ import {Pressable, View} from 'react-native'
import {useStores} from 'state/index'
import {navigate} from '../../../Navigation'
import {useModalControls} from '#/state/modals'
import {useSessionApi} from '#/state/session'
/**
* This utility component is only included in the test simulator
@ -14,16 +15,17 @@ const BTN = {height: 1, width: 1, backgroundColor: 'red'}
export function TestCtrls() {
const store = useStores()
const {logout, login} = useSessionApi()
const {openModal} = useModalControls()
const onPressSignInAlice = async () => {
await store.session.login({
await login({
service: 'http://localhost:3000',
identifier: 'alice.test',
password: 'hunter2',
})
}
const onPressSignInBob = async () => {
await store.session.login({
await login({
service: 'http://localhost:3000',
identifier: 'bob.test',
password: 'hunter2',
@ -45,7 +47,7 @@ export function TestCtrls() {
/>
<Pressable
testID="e2eSignOut"
onPress={() => store.session.logout()}
onPress={() => logout()}
accessibilityRole="button"
style={BTN}
/>

6
src/view/com/util/AccountDropdownBtn.tsx
View file

@ -8,11 +8,11 @@ import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
import * as Toast from '../../com/util/Toast'
import {useSessionApi} from '#/state/session'
import {useSessionApi, SessionAccount} from '#/state/session'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
export function AccountDropdownBtn({handle}: {handle: string}) {
export function AccountDropdownBtn({account}: {account: SessionAccount}) {
const pal = usePalette('default')
const {removeAccount} = useSessionApi()
const {_} = useLingui()
@ -21,7 +21,7 @@ export function AccountDropdownBtn({handle}: {handle: string}) {
{
label: 'Remove account',
onPress: () => {
removeAccount({handle})
removeAccount(account)
Toast.show('Account removed from quick access')
},
icon: {

6
src/view/com/util/PostSandboxWarning.tsx
View file

@ -1,13 +1,13 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useSession} from '#/state/session'
export function PostSandboxWarning() {
const store = useStores()
const {isSandbox} = useSession()
const pal = usePalette('default')
if (store.session.isSandbox) {
if (isSandbox) {
return (
<View style={styles.container}>
<Text