Show logged out view when adding accounts (#2020)
* show logged out view when adding accounts * Handle existing signed-in account * Show which account is currently logged in * Fix showing toasts --------- Co-authored-by: Eric Bailey <git@esb.lol>zio/stable
parent
6fe2b52f68
commit
620e002841
|
@ -7,22 +7,34 @@ import {useAnalytics} from '#/lib/analytics/analytics'
|
|||
import {useSessionApi, SessionAccount} from '#/state/session'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
import {useCloseAllActiveElements} from '#/state/util'
|
||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||
|
||||
export function useAccountSwitcher() {
|
||||
const {track} = useAnalytics()
|
||||
const {selectAccount, clearCurrentAccount} = useSessionApi()
|
||||
const closeAllActiveElements = useCloseAllActiveElements()
|
||||
const navigation = useNavigation<NavigationProp>()
|
||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||
|
||||
const onPressSwitchAccount = useCallback(
|
||||
async (acct: SessionAccount) => {
|
||||
async (account: SessionAccount) => {
|
||||
track('Settings:SwitchAccountButtonClicked')
|
||||
|
||||
try {
|
||||
closeAllActiveElements()
|
||||
navigation.navigate(isWeb ? 'Home' : 'HomeTab')
|
||||
await selectAccount(acct)
|
||||
Toast.show(`Signed in as ${acct.handle}`)
|
||||
if (account.accessJwt) {
|
||||
closeAllActiveElements()
|
||||
navigation.navigate(isWeb ? 'Home' : 'HomeTab')
|
||||
await selectAccount(account)
|
||||
setTimeout(() => {
|
||||
Toast.show(`Signed in as @${account.handle}`)
|
||||
}, 100)
|
||||
} else {
|
||||
setShowLoggedOut(true)
|
||||
Toast.show(
|
||||
`Please sign in as @${account.handle}`,
|
||||
'circle-exclamation',
|
||||
)
|
||||
}
|
||||
} catch (e) {
|
||||
Toast.show('Sorry! We need you to enter your password.')
|
||||
clearCurrentAccount() // back user out to login
|
||||
|
@ -34,6 +46,7 @@ export function useAccountSwitcher() {
|
|||
selectAccount,
|
||||
closeAllActiveElements,
|
||||
navigation,
|
||||
setShowLoggedOut,
|
||||
],
|
||||
)
|
||||
|
||||
|
|
|
@ -1,23 +1,30 @@
|
|||
import React from 'react'
|
||||
import {ScrollView, TouchableOpacity, View} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
} 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 {s, colors} from 'lib/styles'
|
||||
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'
|
||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
|
||||
function AccountItem({
|
||||
account,
|
||||
onSelect,
|
||||
isCurrentAccount,
|
||||
}: {
|
||||
account: SessionAccount
|
||||
onSelect: (account: SessionAccount) => void
|
||||
isCurrentAccount: boolean
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
|
@ -48,11 +55,19 @@ function AccountItem({
|
|||
{account.handle}
|
||||
</Text>
|
||||
</Text>
|
||||
<FontAwesomeIcon
|
||||
icon="angle-right"
|
||||
size={16}
|
||||
style={[pal.text, s.mr10]}
|
||||
/>
|
||||
{isCurrentAccount ? (
|
||||
<FontAwesomeIcon
|
||||
icon="check"
|
||||
size={16}
|
||||
style={[{color: colors.green3} as FontAwesomeIconStyle, s.mr10]}
|
||||
/>
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon="angle-right"
|
||||
size={16}
|
||||
style={[pal.text, s.mr10]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
|
@ -67,8 +82,9 @@ export const ChooseAccountForm = ({
|
|||
const {track, screen} = useAnalytics()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const {accounts} = useSession()
|
||||
const {accounts, currentAccount} = useSession()
|
||||
const {initSession} = useSessionApi()
|
||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||
|
||||
React.useEffect(() => {
|
||||
screen('Choose Account')
|
||||
|
@ -77,13 +93,21 @@ export const ChooseAccountForm = ({
|
|||
const onSelect = React.useCallback(
|
||||
async (account: SessionAccount) => {
|
||||
if (account.accessJwt) {
|
||||
await initSession(account)
|
||||
track('Sign In', {resumedSession: true})
|
||||
if (account.did === currentAccount?.did) {
|
||||
setShowLoggedOut(false)
|
||||
Toast.show(`Already signed in as @${account.handle}`)
|
||||
} else {
|
||||
await initSession(account)
|
||||
track('Sign In', {resumedSession: true})
|
||||
setTimeout(() => {
|
||||
Toast.show(`Signed in as @${account.handle}`)
|
||||
}, 100)
|
||||
}
|
||||
} else {
|
||||
onSelectAccount(account)
|
||||
}
|
||||
},
|
||||
[track, initSession, onSelectAccount],
|
||||
[currentAccount, track, initSession, onSelectAccount, setShowLoggedOut],
|
||||
)
|
||||
|
||||
return (
|
||||
|
@ -94,7 +118,12 @@ export const ChooseAccountForm = ({
|
|||
<Trans>Sign in as...</Trans>
|
||||
</Text>
|
||||
{accounts.map(account => (
|
||||
<AccountItem key={account.did} account={account} onSelect={onSelect} />
|
||||
<AccountItem
|
||||
key={account.did}
|
||||
account={account}
|
||||
onSelect={onSelect}
|
||||
isCurrentAccount={account.did === currentAccount?.did}
|
||||
/>
|
||||
))}
|
||||
<TouchableOpacity
|
||||
testID="chooseNewAccountBtn"
|
||||
|
|
|
@ -10,11 +10,7 @@ import {
|
|||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {
|
||||
useFocusEffect,
|
||||
useNavigation,
|
||||
StackActions,
|
||||
} from '@react-navigation/native'
|
||||
import {useFocusEffect, useNavigation} from '@react-navigation/native'
|
||||
import {
|
||||
FontAwesomeIcon,
|
||||
FontAwesomeIconStyle,
|
||||
|
@ -74,6 +70,8 @@ import {STATUS_PAGE_URL} from 'lib/constants'
|
|||
import {Trans, msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useQueryClient} from '@tanstack/react-query'
|
||||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||||
import {useCloseAllActiveElements} from '#/state/util'
|
||||
|
||||
function SettingsAccountCard({account}: {account: SessionAccount}) {
|
||||
const pal = usePalette('default')
|
||||
|
@ -155,13 +153,14 @@ export function SettingsScreen({}: Props) {
|
|||
const {screen, track} = useAnalytics()
|
||||
const {openModal} = useModalControls()
|
||||
const {isSwitchingAccounts, accounts, currentAccount} = useSession()
|
||||
const {clearCurrentAccount} = useSessionApi()
|
||||
const [debugHeaderEnabled, toggleDebugHeader] = useDebugHeaderSetting(
|
||||
getAgent(),
|
||||
)
|
||||
const {mutate: clearPreferences} = useClearPreferencesMutation()
|
||||
const {data: invites} = useInviteCodesQuery()
|
||||
const invitesAvailable = invites?.available?.length ?? 0
|
||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||
const closeAllActiveElements = useCloseAllActiveElements()
|
||||
|
||||
const primaryBg = useCustomPalette<ViewStyle>({
|
||||
light: {backgroundColor: colors.blue0},
|
||||
|
@ -190,10 +189,9 @@ export function SettingsScreen({}: Props) {
|
|||
|
||||
const onPressAddAccount = React.useCallback(() => {
|
||||
track('Settings:AddAccountButtonClicked')
|
||||
navigation.navigate('HomeTab')
|
||||
navigation.dispatch(StackActions.popToTop())
|
||||
clearCurrentAccount()
|
||||
}, [track, navigation, clearCurrentAccount])
|
||||
setShowLoggedOut(true)
|
||||
closeAllActiveElements()
|
||||
}, [track, setShowLoggedOut, closeAllActiveElements])
|
||||
|
||||
const onPressChangeHandle = React.useCallback(() => {
|
||||
track('Settings:ChangeHandleButtonClicked')
|
||||
|
|
Loading…
Reference in New Issue