convert base login component and ChooseAccountForm
This commit is contained in:
Samuel Newman
parent
44b3a37f65
commit
f5b39f2755
6 changed files with 363 additions and 330 deletions
|
|
@ -154,6 +154,12 @@ export const atoms = {
|
||||||
align_end: {
|
align_end: {
|
||||||
alignItems: 'flex-end',
|
alignItems: 'flex-end',
|
||||||
},
|
},
|
||||||
|
align_baseline: {
|
||||||
|
alignItems: 'baseline',
|
||||||
|
},
|
||||||
|
align_stretch: {
|
||||||
|
alignItems: 'stretch',
|
||||||
|
},
|
||||||
self_auto: {
|
self_auto: {
|
||||||
alignSelf: 'auto',
|
alignSelf: 'auto',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
183
src/screens/Login/ChooseAccountForm.tsx
Normal file
183
src/screens/Login/ChooseAccountForm.tsx
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {ScrollView, TouchableOpacity, View} from 'react-native'
|
||||||
|
import {Trans, msg} from '@lingui/macro'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
|
import flattenReactChildren from 'react-keyed-flatten-children'
|
||||||
|
|
||||||
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
|
import {UserAvatar} from '../../view/com/util/UserAvatar'
|
||||||
|
import {colors} from 'lib/styles'
|
||||||
|
import {styles} from '../../view/com/auth/login/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'
|
||||||
|
import {Button} from '#/components/Button'
|
||||||
|
import {atoms as a, useTheme} from '#/alf'
|
||||||
|
import {Text} from '#/components/Typography'
|
||||||
|
import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
|
||||||
|
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
|
||||||
|
|
||||||
|
function Group({children}: {children: React.ReactNode}) {
|
||||||
|
const t = useTheme()
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
a.rounded_md,
|
||||||
|
a.overflow_hidden,
|
||||||
|
a.border,
|
||||||
|
t.atoms.border_contrast_low,
|
||||||
|
]}>
|
||||||
|
{flattenReactChildren(children).map((child, i) => {
|
||||||
|
return React.isValidElement(child) ? (
|
||||||
|
<React.Fragment key={i}>
|
||||||
|
{i > 0 ? (
|
||||||
|
<View style={[a.border_b, t.atoms.border_contrast_low]} />
|
||||||
|
) : null}
|
||||||
|
{React.cloneElement(child, {
|
||||||
|
// @ts-ignore
|
||||||
|
style: {
|
||||||
|
borderRadius: 0,
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
</React.Fragment>
|
||||||
|
) : null
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccountItem({
|
||||||
|
account,
|
||||||
|
onSelect,
|
||||||
|
isCurrentAccount,
|
||||||
|
}: {
|
||||||
|
account: SessionAccount
|
||||||
|
onSelect: (account: SessionAccount) => void
|
||||||
|
isCurrentAccount: boolean
|
||||||
|
}) {
|
||||||
|
const t = useTheme()
|
||||||
|
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={[a.flex_1]}
|
||||||
|
onPress={onPress}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
|
||||||
|
accessibilityHint={_(msg`Double tap to sign in`)}>
|
||||||
|
<View style={[a.flex_1, a.flex_row, a.align_center, {height: 48}]}>
|
||||||
|
<View style={a.p_md}>
|
||||||
|
<UserAvatar avatar={profile?.avatar} size={24} />
|
||||||
|
</View>
|
||||||
|
<Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
|
||||||
|
<Text style={[a.font_bold]}>
|
||||||
|
{profile?.displayName || account.handle}{' '}
|
||||||
|
</Text>
|
||||||
|
<Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text>
|
||||||
|
</Text>
|
||||||
|
{isCurrentAccount ? (
|
||||||
|
<Check size="sm" style={[{color: colors.green3}, a.mr_md]} />
|
||||||
|
) : (
|
||||||
|
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export const ChooseAccountForm = ({
|
||||||
|
onSelectAccount,
|
||||||
|
onPressBack,
|
||||||
|
}: {
|
||||||
|
onSelectAccount: (account?: SessionAccount) => void
|
||||||
|
onPressBack: () => void
|
||||||
|
}) => {
|
||||||
|
const {track, screen} = useAnalytics()
|
||||||
|
const {_} = useLingui()
|
||||||
|
const t = useTheme()
|
||||||
|
const {accounts, currentAccount} = useSession()
|
||||||
|
const {initSession} = useSessionApi()
|
||||||
|
const {setShowLoggedOut} = useLoggedOutViewControls()
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
screen('Choose Account')
|
||||||
|
}, [screen])
|
||||||
|
|
||||||
|
const onSelect = React.useCallback(
|
||||||
|
async (account: SessionAccount) => {
|
||||||
|
if (account.accessJwt) {
|
||||||
|
if (account.did === currentAccount?.did) {
|
||||||
|
setShowLoggedOut(false)
|
||||||
|
Toast.show(_(msg`Already signed in as @${account.handle}`))
|
||||||
|
} else {
|
||||||
|
await initSession(account)
|
||||||
|
track('Sign In', {resumedSession: true})
|
||||||
|
setTimeout(() => {
|
||||||
|
Toast.show(_(msg`Signed in as @${account.handle}`))
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onSelectAccount(account)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[currentAccount, track, initSession, onSelectAccount, setShowLoggedOut, _],
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollView testID="chooseAccountForm" style={styles.maxHeight}>
|
||||||
|
<Text style={[a.mt_md, a.mb_lg, a.font_bold]}>
|
||||||
|
<Trans>Sign in as...</Trans>
|
||||||
|
</Text>
|
||||||
|
<Group>
|
||||||
|
{accounts.map(account => (
|
||||||
|
<AccountItem
|
||||||
|
key={account.did}
|
||||||
|
account={account}
|
||||||
|
onSelect={onSelect}
|
||||||
|
isCurrentAccount={account.did === currentAccount?.did}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<TouchableOpacity
|
||||||
|
testID="chooseNewAccountBtn"
|
||||||
|
style={[a.flex_1]}
|
||||||
|
onPress={() => onSelectAccount(undefined)}
|
||||||
|
accessibilityRole="button"
|
||||||
|
accessibilityLabel={_(msg`Login to account that is not listed`)}
|
||||||
|
accessibilityHint="">
|
||||||
|
<View style={[a.flex_row, a.flex_row, a.align_center, {height: 48}]}>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
a.align_baseline,
|
||||||
|
a.flex_1,
|
||||||
|
a.flex_row,
|
||||||
|
a.py_sm,
|
||||||
|
{paddingLeft: 48},
|
||||||
|
]}>
|
||||||
|
<Trans>Other account</Trans>
|
||||||
|
</Text>
|
||||||
|
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Group>
|
||||||
|
<View style={[a.flex_row, a.mt_lg]}>
|
||||||
|
<Button
|
||||||
|
label={_(msg`Back`)}
|
||||||
|
variant="solid"
|
||||||
|
color="secondary"
|
||||||
|
size="small"
|
||||||
|
onPress={onPressBack}>
|
||||||
|
<Trans>Back</Trans>
|
||||||
|
</Button>
|
||||||
|
<View style={[a.flex_1]} />
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
)
|
||||||
|
}
|
||||||
166
src/screens/Login/index.tsx
Normal file
166
src/screens/Login/index.tsx
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
import React from 'react'
|
||||||
|
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||||
|
import {useLingui} from '@lingui/react'
|
||||||
|
import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
|
||||||
|
import {SessionAccount, useSession} from '#/state/session'
|
||||||
|
import {DEFAULT_SERVICE} from '#/lib/constants'
|
||||||
|
import {useLoggedOutView} from '#/state/shell/logged-out'
|
||||||
|
import {useServiceQuery} from '#/state/queries/service'
|
||||||
|
import {msg} from '@lingui/macro'
|
||||||
|
import {logger} from '#/logger'
|
||||||
|
import {atoms as a} from '#/alf'
|
||||||
|
import {KeyboardAvoidingView} from 'react-native'
|
||||||
|
import {ChooseAccountForm} from './ChooseAccountForm'
|
||||||
|
import {ForgotPasswordForm} from '#/view/com/auth/login/ForgotPasswordForm'
|
||||||
|
import {SetNewPasswordForm} from '#/view/com/auth/login/SetNewPasswordForm'
|
||||||
|
import {PasswordUpdatedForm} from '#/view/com/auth/login/PasswordUpdatedForm'
|
||||||
|
import {LoginForm} from '#/view/com/auth/login/LoginForm'
|
||||||
|
|
||||||
|
enum Forms {
|
||||||
|
Login,
|
||||||
|
ChooseAccount,
|
||||||
|
ForgotPassword,
|
||||||
|
SetNewPassword,
|
||||||
|
PasswordUpdated,
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Login = ({onPressBack}: {onPressBack: () => void}) => {
|
||||||
|
const {_} = useLingui()
|
||||||
|
|
||||||
|
const {accounts} = useSession()
|
||||||
|
const {track} = useAnalytics()
|
||||||
|
const {requestedAccountSwitchTo} = useLoggedOutView()
|
||||||
|
const requestedAccount = accounts.find(
|
||||||
|
acc => acc.did === requestedAccountSwitchTo,
|
||||||
|
)
|
||||||
|
|
||||||
|
const [error, setError] = React.useState<string>('')
|
||||||
|
const [serviceUrl, setServiceUrl] = React.useState<string>(
|
||||||
|
requestedAccount?.service || DEFAULT_SERVICE,
|
||||||
|
)
|
||||||
|
const [initialHandle, setInitialHandle] = React.useState<string>(
|
||||||
|
requestedAccount?.handle || '',
|
||||||
|
)
|
||||||
|
const [currentForm, setCurrentForm] = React.useState<Forms>(
|
||||||
|
requestedAccount
|
||||||
|
? Forms.Login
|
||||||
|
: accounts.length
|
||||||
|
? Forms.ChooseAccount
|
||||||
|
: Forms.Login,
|
||||||
|
)
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: serviceDescription,
|
||||||
|
error: serviceError,
|
||||||
|
refetch: refetchService,
|
||||||
|
} = useServiceQuery(serviceUrl)
|
||||||
|
|
||||||
|
const onSelectAccount = (account?: SessionAccount) => {
|
||||||
|
if (account?.service) {
|
||||||
|
setServiceUrl(account.service)
|
||||||
|
}
|
||||||
|
setInitialHandle(account?.handle || '')
|
||||||
|
setCurrentForm(Forms.Login)
|
||||||
|
}
|
||||||
|
|
||||||
|
const gotoForm = (form: Forms) => () => {
|
||||||
|
setError('')
|
||||||
|
setCurrentForm(form)
|
||||||
|
}
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (serviceError) {
|
||||||
|
setError(
|
||||||
|
_(
|
||||||
|
msg`Unable to contact your service. Please check your Internet connection.`,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
logger.warn(`Failed to fetch service description for ${serviceUrl}`, {
|
||||||
|
error: String(serviceError),
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
setError('')
|
||||||
|
}
|
||||||
|
}, [serviceError, serviceUrl, _])
|
||||||
|
|
||||||
|
const onPressRetryConnect = () => refetchService()
|
||||||
|
const onPressForgotPassword = () => {
|
||||||
|
track('Signin:PressedForgotPassword')
|
||||||
|
setCurrentForm(Forms.ForgotPassword)
|
||||||
|
}
|
||||||
|
|
||||||
|
let content = null
|
||||||
|
let title = ''
|
||||||
|
let description = ''
|
||||||
|
|
||||||
|
switch (currentForm) {
|
||||||
|
case Forms.Login:
|
||||||
|
title = _(msg`Sign in`)
|
||||||
|
description = _(msg`Enter your username and password`)
|
||||||
|
content = (
|
||||||
|
<LoginForm
|
||||||
|
error={error}
|
||||||
|
serviceUrl={serviceUrl}
|
||||||
|
serviceDescription={serviceDescription}
|
||||||
|
initialHandle={initialHandle}
|
||||||
|
setError={setError}
|
||||||
|
setServiceUrl={setServiceUrl}
|
||||||
|
onPressBack={onPressBack}
|
||||||
|
onPressForgotPassword={onPressForgotPassword}
|
||||||
|
onPressRetryConnect={onPressRetryConnect}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
break
|
||||||
|
case Forms.ChooseAccount:
|
||||||
|
title = _(msg`Sign in`)
|
||||||
|
description = _(msg`Select from an existing account`)
|
||||||
|
content = (
|
||||||
|
<ChooseAccountForm
|
||||||
|
onSelectAccount={onSelectAccount}
|
||||||
|
onPressBack={onPressBack}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
break
|
||||||
|
case Forms.ForgotPassword:
|
||||||
|
title = _(msg`Forgot Password`)
|
||||||
|
description = _(msg`Let's get your password reset!`)
|
||||||
|
content = (
|
||||||
|
<ForgotPasswordForm
|
||||||
|
error={error}
|
||||||
|
serviceUrl={serviceUrl}
|
||||||
|
serviceDescription={serviceDescription}
|
||||||
|
setError={setError}
|
||||||
|
setServiceUrl={setServiceUrl}
|
||||||
|
onPressBack={gotoForm(Forms.Login)}
|
||||||
|
onEmailSent={gotoForm(Forms.SetNewPassword)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
break
|
||||||
|
case Forms.SetNewPassword:
|
||||||
|
title = _(msg`Forgot Password`)
|
||||||
|
description = _(msg`Let's get your password reset!`)
|
||||||
|
content = (
|
||||||
|
<SetNewPasswordForm
|
||||||
|
error={error}
|
||||||
|
serviceUrl={serviceUrl}
|
||||||
|
setError={setError}
|
||||||
|
onPressBack={gotoForm(Forms.ForgotPassword)}
|
||||||
|
onPasswordSet={gotoForm(Forms.PasswordUpdated)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
break
|
||||||
|
case Forms.PasswordUpdated:
|
||||||
|
title = _(msg`Password updated`)
|
||||||
|
description = _(msg`You can now sign in with your new password.`)
|
||||||
|
content = <PasswordUpdatedForm onPressNext={gotoForm(Forms.Login)} />
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
|
||||||
|
<LoggedOutLayout leadin="" title={title} description={description}>
|
||||||
|
{content}
|
||||||
|
</LoggedOutLayout>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -5,16 +5,16 @@ import {useLingui} from '@lingui/react'
|
||||||
import {Trans, msg} from '@lingui/macro'
|
import {Trans, msg} from '@lingui/macro'
|
||||||
import {useNavigation} from '@react-navigation/native'
|
import {useNavigation} from '@react-navigation/native'
|
||||||
|
|
||||||
import {isIOS, isNative} from 'platform/detection'
|
import {isIOS, isNative} from '#/platform/detection'
|
||||||
import {Login} from 'view/com/auth/login/Login'
|
import {Login} from '#/screens/Login'
|
||||||
import {CreateAccount} from 'view/com/auth/create/CreateAccount'
|
import {CreateAccount} from '#/view/com/auth/create/CreateAccount'
|
||||||
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
|
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
|
||||||
import {s} from 'lib/styles'
|
import {s} from '#/lib/styles'
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
import {usePalette} from '#/lib/hooks/usePalette'
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||||
import {SplashScreen} from './SplashScreen'
|
import {SplashScreen} from './SplashScreen'
|
||||||
import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
|
import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
|
||||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||||
import {
|
import {
|
||||||
useLoggedOutView,
|
useLoggedOutView,
|
||||||
useLoggedOutViewControls,
|
useLoggedOutViewControls,
|
||||||
|
|
|
||||||
|
|
@ -1,158 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import {ScrollView, TouchableOpacity, View} from 'react-native'
|
|
||||||
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, 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()
|
|
||||||
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={_(msg`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>
|
|
||||||
{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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export const ChooseAccountForm = ({
|
|
||||||
onSelectAccount,
|
|
||||||
onPressBack,
|
|
||||||
}: {
|
|
||||||
onSelectAccount: (account?: SessionAccount) => void
|
|
||||||
onPressBack: () => void
|
|
||||||
}) => {
|
|
||||||
const {track, screen} = useAnalytics()
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const {_} = useLingui()
|
|
||||||
const {accounts, currentAccount} = useSession()
|
|
||||||
const {initSession} = useSessionApi()
|
|
||||||
const {setShowLoggedOut} = useLoggedOutViewControls()
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
screen('Choose Account')
|
|
||||||
}, [screen])
|
|
||||||
|
|
||||||
const onSelect = React.useCallback(
|
|
||||||
async (account: SessionAccount) => {
|
|
||||||
if (account.accessJwt) {
|
|
||||||
if (account.did === currentAccount?.did) {
|
|
||||||
setShowLoggedOut(false)
|
|
||||||
Toast.show(_(msg`Already signed in as @${account.handle}`))
|
|
||||||
} else {
|
|
||||||
await initSession(account)
|
|
||||||
track('Sign In', {resumedSession: true})
|
|
||||||
setTimeout(() => {
|
|
||||||
Toast.show(_(msg`Signed in as @${account.handle}`))
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
onSelectAccount(account)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[currentAccount, track, initSession, onSelectAccount, setShowLoggedOut, _],
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ScrollView testID="chooseAccountForm" style={styles.maxHeight}>
|
|
||||||
<Text
|
|
||||||
type="2xl-medium"
|
|
||||||
style={[pal.text, styles.groupLabel, s.mt5, s.mb10]}>
|
|
||||||
<Trans>Sign in as...</Trans>
|
|
||||||
</Text>
|
|
||||||
{accounts.map(account => (
|
|
||||||
<AccountItem
|
|
||||||
key={account.did}
|
|
||||||
account={account}
|
|
||||||
onSelect={onSelect}
|
|
||||||
isCurrentAccount={account.did === currentAccount?.did}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<TouchableOpacity
|
|
||||||
testID="chooseNewAccountBtn"
|
|
||||||
style={[pal.view, pal.border, styles.account, styles.accountLast]}
|
|
||||||
onPress={() => onSelectAccount(undefined)}
|
|
||||||
accessibilityRole="button"
|
|
||||||
accessibilityLabel={_(msg`Login to account that is not listed`)}
|
|
||||||
accessibilityHint="">
|
|
||||||
<View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
|
|
||||||
<Text style={[styles.accountText, styles.accountTextOther]}>
|
|
||||||
<Text type="lg" style={pal.text}>
|
|
||||||
<Trans>Other account</Trans>
|
|
||||||
</Text>
|
|
||||||
</Text>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="angle-right"
|
|
||||||
size={16}
|
|
||||||
style={[pal.text, s.mr10]}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
|
|
||||||
<TouchableOpacity onPress={onPressBack} accessibilityRole="button">
|
|
||||||
<Text type="xl" style={[pal.link, s.pl5]}>
|
|
||||||
<Trans>Back</Trans>
|
|
||||||
</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<View style={s.flex1} />
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,164 +0,0 @@
|
||||||
import React, {useState, useEffect} from 'react'
|
|
||||||
import {KeyboardAvoidingView} from 'react-native'
|
|
||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
|
||||||
import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
|
|
||||||
import {DEFAULT_SERVICE} from '#/lib/constants'
|
|
||||||
import {usePalette} from 'lib/hooks/usePalette'
|
|
||||||
import {logger} from '#/logger'
|
|
||||||
import {ChooseAccountForm} from './ChooseAccountForm'
|
|
||||||
import {LoginForm} from './LoginForm'
|
|
||||||
import {ForgotPasswordForm} from './ForgotPasswordForm'
|
|
||||||
import {SetNewPasswordForm} from './SetNewPasswordForm'
|
|
||||||
import {PasswordUpdatedForm} from './PasswordUpdatedForm'
|
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
import {msg} from '@lingui/macro'
|
|
||||||
import {useSession, SessionAccount} from '#/state/session'
|
|
||||||
import {useServiceQuery} from '#/state/queries/service'
|
|
||||||
import {useLoggedOutView} from '#/state/shell/logged-out'
|
|
||||||
|
|
||||||
enum Forms {
|
|
||||||
Login,
|
|
||||||
ChooseAccount,
|
|
||||||
ForgotPassword,
|
|
||||||
SetNewPassword,
|
|
||||||
PasswordUpdated,
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Login = ({onPressBack}: {onPressBack: () => void}) => {
|
|
||||||
const {_} = useLingui()
|
|
||||||
const pal = usePalette('default')
|
|
||||||
|
|
||||||
const {accounts} = useSession()
|
|
||||||
const {track} = useAnalytics()
|
|
||||||
const {requestedAccountSwitchTo} = useLoggedOutView()
|
|
||||||
const requestedAccount = accounts.find(
|
|
||||||
a => a.did === requestedAccountSwitchTo,
|
|
||||||
)
|
|
||||||
|
|
||||||
const [error, setError] = useState<string>('')
|
|
||||||
const [serviceUrl, setServiceUrl] = useState<string>(
|
|
||||||
requestedAccount?.service || DEFAULT_SERVICE,
|
|
||||||
)
|
|
||||||
const [initialHandle, setInitialHandle] = useState<string>(
|
|
||||||
requestedAccount?.handle || '',
|
|
||||||
)
|
|
||||||
const [currentForm, setCurrentForm] = useState<Forms>(
|
|
||||||
requestedAccount
|
|
||||||
? Forms.Login
|
|
||||||
: accounts.length
|
|
||||||
? Forms.ChooseAccount
|
|
||||||
: Forms.Login,
|
|
||||||
)
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: serviceDescription,
|
|
||||||
error: serviceError,
|
|
||||||
refetch: refetchService,
|
|
||||||
} = useServiceQuery(serviceUrl)
|
|
||||||
|
|
||||||
const onSelectAccount = (account?: SessionAccount) => {
|
|
||||||
if (account?.service) {
|
|
||||||
setServiceUrl(account.service)
|
|
||||||
}
|
|
||||||
setInitialHandle(account?.handle || '')
|
|
||||||
setCurrentForm(Forms.Login)
|
|
||||||
}
|
|
||||||
|
|
||||||
const gotoForm = (form: Forms) => () => {
|
|
||||||
setError('')
|
|
||||||
setCurrentForm(form)
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (serviceError) {
|
|
||||||
setError(
|
|
||||||
_(
|
|
||||||
msg`Unable to contact your service. Please check your Internet connection.`,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
logger.warn(`Failed to fetch service description for ${serviceUrl}`, {
|
|
||||||
error: String(serviceError),
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
setError('')
|
|
||||||
}
|
|
||||||
}, [serviceError, serviceUrl, _])
|
|
||||||
|
|
||||||
const onPressRetryConnect = () => refetchService()
|
|
||||||
const onPressForgotPassword = () => {
|
|
||||||
track('Signin:PressedForgotPassword')
|
|
||||||
setCurrentForm(Forms.ForgotPassword)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<KeyboardAvoidingView testID="signIn" behavior="padding" style={pal.view}>
|
|
||||||
{currentForm === Forms.Login ? (
|
|
||||||
<LoggedOutLayout
|
|
||||||
leadin=""
|
|
||||||
title={_(msg`Sign in`)}
|
|
||||||
description={_(msg`Enter your username and password`)}>
|
|
||||||
<LoginForm
|
|
||||||
error={error}
|
|
||||||
serviceUrl={serviceUrl}
|
|
||||||
serviceDescription={serviceDescription}
|
|
||||||
initialHandle={initialHandle}
|
|
||||||
setError={setError}
|
|
||||||
setServiceUrl={setServiceUrl}
|
|
||||||
onPressBack={onPressBack}
|
|
||||||
onPressForgotPassword={onPressForgotPassword}
|
|
||||||
onPressRetryConnect={onPressRetryConnect}
|
|
||||||
/>
|
|
||||||
</LoggedOutLayout>
|
|
||||||
) : undefined}
|
|
||||||
{currentForm === Forms.ChooseAccount ? (
|
|
||||||
<LoggedOutLayout
|
|
||||||
leadin=""
|
|
||||||
title={_(msg`Sign in as...`)}
|
|
||||||
description={_(msg`Select from an existing account`)}>
|
|
||||||
<ChooseAccountForm
|
|
||||||
onSelectAccount={onSelectAccount}
|
|
||||||
onPressBack={onPressBack}
|
|
||||||
/>
|
|
||||||
</LoggedOutLayout>
|
|
||||||
) : undefined}
|
|
||||||
{currentForm === Forms.ForgotPassword ? (
|
|
||||||
<LoggedOutLayout
|
|
||||||
leadin=""
|
|
||||||
title={_(msg`Forgot Password`)}
|
|
||||||
description={_(msg`Let's get your password reset!`)}>
|
|
||||||
<ForgotPasswordForm
|
|
||||||
error={error}
|
|
||||||
serviceUrl={serviceUrl}
|
|
||||||
serviceDescription={serviceDescription}
|
|
||||||
setError={setError}
|
|
||||||
setServiceUrl={setServiceUrl}
|
|
||||||
onPressBack={gotoForm(Forms.Login)}
|
|
||||||
onEmailSent={gotoForm(Forms.SetNewPassword)}
|
|
||||||
/>
|
|
||||||
</LoggedOutLayout>
|
|
||||||
) : undefined}
|
|
||||||
{currentForm === Forms.SetNewPassword ? (
|
|
||||||
<LoggedOutLayout
|
|
||||||
leadin=""
|
|
||||||
title={_(msg`Forgot Password`)}
|
|
||||||
description={_(msg`Let's get your password reset!`)}>
|
|
||||||
<SetNewPasswordForm
|
|
||||||
error={error}
|
|
||||||
serviceUrl={serviceUrl}
|
|
||||||
setError={setError}
|
|
||||||
onPressBack={gotoForm(Forms.ForgotPassword)}
|
|
||||||
onPasswordSet={gotoForm(Forms.PasswordUpdated)}
|
|
||||||
/>
|
|
||||||
</LoggedOutLayout>
|
|
||||||
) : undefined}
|
|
||||||
{currentForm === Forms.PasswordUpdated ? (
|
|
||||||
<LoggedOutLayout
|
|
||||||
leadin=""
|
|
||||||
title={_(msg`Password updated`)}
|
|
||||||
description={_(msg`You can now sign in with your new password.`)}>
|
|
||||||
<PasswordUpdatedForm onPressNext={gotoForm(Forms.Login)} />
|
|
||||||
</LoggedOutLayout>
|
|
||||||
) : undefined}
|
|
||||||
</KeyboardAvoidingView>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue