Improve handling around connection failures during login

zio/stable
Paul Frazee 2023-01-03 12:17:07 -06:00
parent 06de0129af
commit 1acef14a1c
2 changed files with 29 additions and 9 deletions

View File

@ -32,6 +32,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
const [isProcessing, setIsProcessing] = useState<boolean>(false) const [isProcessing, setIsProcessing] = useState<boolean>(false)
const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE) const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE)
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
const [retryDescribeTrigger, setRetryDescribeTrigger] = useState<any>({})
const [serviceDescription, setServiceDescription] = useState< const [serviceDescription, setServiceDescription] = useState<
ServiceDescription | undefined ServiceDescription | undefined
>(undefined) >(undefined)
@ -66,7 +67,9 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
return () => { return () => {
aborted = true aborted = true
} }
}, [serviceUrl, store.session, store.log]) }, [serviceUrl, store.session, store.log, retryDescribeTrigger])
const onPressRetryConnect = () => setRetryDescribeTrigger({})
const onPressSelectService = () => { const onPressSelectService = () => {
store.shell.openModal(new ServerInputModal(serviceUrl, setServiceUrl)) store.shell.openModal(new ServerInputModal(serviceUrl, setServiceUrl))
@ -343,6 +346,10 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text> <Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
) : !serviceDescription && error ? (
<TouchableOpacity onPress={onPressRetryConnect}>
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Retry</Text>
</TouchableOpacity>
) : !serviceDescription ? ( ) : !serviceDescription ? (
<> <>
<ActivityIndicator color="#fff" /> <ActivityIndicator color="#fff" />

View File

@ -30,6 +30,7 @@ enum Forms {
export const Signin = ({onPressBack}: {onPressBack: () => void}) => { export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
const store = useStores() const store = useStores()
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
const [retryDescribeTrigger, setRetryDescribeTrigger] = useState<any>({})
const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE) const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE)
const [serviceDescription, setServiceDescription] = useState< const [serviceDescription, setServiceDescription] = useState<
ServiceDescription | undefined ServiceDescription | undefined
@ -63,7 +64,9 @@ export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
return () => { return () => {
aborted = true aborted = true
} }
}, [store.session, store.log, serviceUrl]) }, [store.session, store.log, serviceUrl, retryDescribeTrigger])
const onPressRetryConnect = () => setRetryDescribeTrigger({})
return ( return (
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}> <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
@ -80,6 +83,7 @@ export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
setServiceUrl={setServiceUrl} setServiceUrl={setServiceUrl}
onPressBack={onPressBack} onPressBack={onPressBack}
onPressForgotPassword={gotoForm(Forms.ForgotPassword)} onPressForgotPassword={gotoForm(Forms.ForgotPassword)}
onPressRetryConnect={onPressRetryConnect}
/> />
) : undefined} ) : undefined}
{currentForm === Forms.ForgotPassword ? ( {currentForm === Forms.ForgotPassword ? (
@ -118,6 +122,7 @@ const LoginForm = ({
serviceDescription, serviceDescription,
setError, setError,
setServiceUrl, setServiceUrl,
onPressRetryConnect,
onPressBack, onPressBack,
onPressForgotPassword, onPressForgotPassword,
}: { }: {
@ -127,6 +132,7 @@ const LoginForm = ({
serviceDescription: ServiceDescription | undefined serviceDescription: ServiceDescription | undefined
setError: (v: string) => void setError: (v: string) => void
setServiceUrl: (v: string) => void setServiceUrl: (v: string) => void
onPressRetryConnect: () => void
onPressBack: () => void onPressBack: () => void
onPressForgotPassword: () => void onPressForgotPassword: () => void
}) => { }) => {
@ -185,6 +191,7 @@ const LoginForm = ({
} }
} }
const isReady = !!serviceDescription && !!handle && !!password
return ( return (
<> <>
<View style={styles.group}> <View style={styles.group}>
@ -252,15 +259,21 @@ const LoginForm = ({
<Text style={[s.white, s.f18, s.pl5]}>Back</Text> <Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={s.flex1} /> <View style={s.flex1} />
<TouchableOpacity onPress={onPressNext}> {!serviceDescription && error ? (
{!serviceDescription || isProcessing ? ( <TouchableOpacity onPress={onPressRetryConnect}>
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Retry</Text>
</TouchableOpacity>
) : !serviceDescription ? (
<>
<ActivityIndicator color="#fff" /> <ActivityIndicator color="#fff" />
) : ( <Text style={[s.white, s.f18, s.pl10]}>Connecting...</Text>
</>
) : isProcessing ? (
<ActivityIndicator color="#fff" />
) : isReady ? (
<TouchableOpacity onPress={onPressNext}>
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text> <Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)} </TouchableOpacity>
</TouchableOpacity>
{!serviceDescription || isProcessing ? (
<Text style={[s.white, s.f18, s.pl10]}>Connecting...</Text>
) : undefined} ) : undefined}
</View> </View>
</> </>