Hailey
fbdf4517c2
* web height adjustment border radius incase of dark/dim mismatch rm country codes adjust height general form refactor more form refactor refactor form submission activity indicator after finished remove remaining phone stuff adjust captcha height adjust state to reflect switch move handle to the second step pass color scheme param ts ts update state when captcha is complete web views and callbacks remove old state allow specified hosts replace phone verification with a webview * remove log * height adjustment * few changes * use the correct url * remove some debug * validate handle before continuing * explicitly check if there is a did, dont rely on error * rm throw * update allowed hosts * update redirect host for webview * fix handle * fix handle check * adjust height for full challenge
115 lines
2.9 KiB
TypeScript
115 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import {ActivityIndicator, StyleSheet, View} from 'react-native'
|
|
import {
|
|
CreateAccountState,
|
|
CreateAccountDispatch,
|
|
useSubmitCreateAccount,
|
|
} from './state'
|
|
import {StepHeader} from './StepHeader'
|
|
import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
|
|
import {isWeb} from 'platform/detection'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {nanoid} from 'nanoid/non-secure'
|
|
import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView'
|
|
import {useTheme} from 'lib/ThemeContext'
|
|
import {createFullHandle} from 'lib/strings/handles'
|
|
|
|
const CAPTCHA_PATH = '/gate/signup'
|
|
|
|
export function Step3({
|
|
uiState,
|
|
uiDispatch,
|
|
}: {
|
|
uiState: CreateAccountState
|
|
uiDispatch: CreateAccountDispatch
|
|
}) {
|
|
const {_} = useLingui()
|
|
const theme = useTheme()
|
|
const submit = useSubmitCreateAccount(uiState, uiDispatch)
|
|
|
|
const [completed, setCompleted] = React.useState(false)
|
|
|
|
const stateParam = React.useMemo(() => nanoid(15), [])
|
|
const url = React.useMemo(() => {
|
|
const newUrl = new URL(uiState.serviceUrl)
|
|
newUrl.pathname = CAPTCHA_PATH
|
|
newUrl.searchParams.set(
|
|
'handle',
|
|
createFullHandle(uiState.handle, uiState.userDomain),
|
|
)
|
|
newUrl.searchParams.set('state', stateParam)
|
|
newUrl.searchParams.set('colorScheme', theme.colorScheme)
|
|
|
|
console.log(newUrl)
|
|
|
|
return newUrl.href
|
|
}, [
|
|
uiState.serviceUrl,
|
|
uiState.handle,
|
|
uiState.userDomain,
|
|
stateParam,
|
|
theme.colorScheme,
|
|
])
|
|
|
|
const onSuccess = React.useCallback(
|
|
(code: string) => {
|
|
setCompleted(true)
|
|
submit(code)
|
|
},
|
|
[submit],
|
|
)
|
|
|
|
const onError = React.useCallback(() => {
|
|
uiDispatch({
|
|
type: 'set-error',
|
|
value: _(msg`Error receiving captcha response.`),
|
|
})
|
|
}, [_, uiDispatch])
|
|
|
|
return (
|
|
<View>
|
|
<StepHeader uiState={uiState} title={_(msg`Complete the challenge`)} />
|
|
<View style={[styles.container, completed && styles.center]}>
|
|
{!completed ? (
|
|
<CaptchaWebView
|
|
url={url}
|
|
stateParam={stateParam}
|
|
uiState={uiState}
|
|
onSuccess={onSuccess}
|
|
onError={onError}
|
|
/>
|
|
) : (
|
|
<ActivityIndicator size="large" />
|
|
)}
|
|
</View>
|
|
|
|
{uiState.error ? (
|
|
<ErrorMessage message={uiState.error} style={styles.error} />
|
|
) : undefined}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
error: {
|
|
borderRadius: 6,
|
|
marginTop: 10,
|
|
},
|
|
// @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
|
|
touchable: {
|
|
...(isWeb && {cursor: 'pointer'}),
|
|
},
|
|
container: {
|
|
minHeight: 500,
|
|
width: '100%',
|
|
paddingBottom: 20,
|
|
overflow: 'hidden',
|
|
},
|
|
center: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
})
|