Improve handling around connection failures during login

2 files changed, 29 insertions, 9 deletions

diff --git a/src/view/com/login/CreateAccount.tsx b/src/view/com/login/CreateAccount.tsx
index 971ab37b8..b68d3859e 100644
--- a/src/view/com/login/CreateAccount.tsx
+++ b/src/view/com/login/CreateAccount.tsx
@@ -32,6 +32,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE)
   const [error, setError] = useState<string>('')
+  const [retryDescribeTrigger, setRetryDescribeTrigger] = useState<any>({})
   const [serviceDescription, setServiceDescription] = useState<
     ServiceDescription | undefined
   >(undefined)
@@ -66,7 +67,9 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
     return () => {
       aborted = true
     }
-  }, [serviceUrl, store.session, store.log])
+  }, [serviceUrl, store.session, store.log, retryDescribeTrigger])
+
+  const onPressRetryConnect = () => setRetryDescribeTrigger({})
 
   const onPressSelectService = () => {
     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>
               )}
             </TouchableOpacity>
+          ) : !serviceDescription && error ? (
+            <TouchableOpacity onPress={onPressRetryConnect}>
+              <Text style={[s.white, s.f18, s.bold, s.pr5]}>Retry</Text>
+            </TouchableOpacity>
           ) : !serviceDescription ? (
             <>
               <ActivityIndicator color="#fff" />
diff --git a/src/view/com/login/Signin.tsx b/src/view/com/login/Signin.tsx
index 32c3633d3..03c634c46 100644
--- a/src/view/com/login/Signin.tsx
+++ b/src/view/com/login/Signin.tsx
@@ -30,6 +30,7 @@ enum Forms {
 export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
   const store = useStores()
   const [error, setError] = useState<string>('')
+  const [retryDescribeTrigger, setRetryDescribeTrigger] = useState<any>({})
   const [serviceUrl, setServiceUrl] = useState<string>(DEFAULT_SERVICE)
   const [serviceDescription, setServiceDescription] = useState<
     ServiceDescription | undefined
@@ -63,7 +64,9 @@ export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
     return () => {
       aborted = true
     }
-  }, [store.session, store.log, serviceUrl])
+  }, [store.session, store.log, serviceUrl, retryDescribeTrigger])
+
+  const onPressRetryConnect = () => setRetryDescribeTrigger({})
 
   return (
     <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
@@ -80,6 +83,7 @@ export const Signin = ({onPressBack}: {onPressBack: () => void}) => {
           setServiceUrl={setServiceUrl}
           onPressBack={onPressBack}
           onPressForgotPassword={gotoForm(Forms.ForgotPassword)}
+          onPressRetryConnect={onPressRetryConnect}
         />
       ) : undefined}
       {currentForm === Forms.ForgotPassword ? (
@@ -118,6 +122,7 @@ const LoginForm = ({
   serviceDescription,
   setError,
   setServiceUrl,
+  onPressRetryConnect,
   onPressBack,
   onPressForgotPassword,
 }: {
@@ -127,6 +132,7 @@ const LoginForm = ({
   serviceDescription: ServiceDescription | undefined
   setError: (v: string) => void
   setServiceUrl: (v: string) => void
+  onPressRetryConnect: () => void
   onPressBack: () => void
   onPressForgotPassword: () => void
 }) => {
@@ -185,6 +191,7 @@ const LoginForm = ({
     }
   }
 
+  const isReady = !!serviceDescription && !!handle && !!password
   return (
     <>
       <View style={styles.group}>
@@ -252,15 +259,21 @@ const LoginForm = ({
           <Text style={[s.white, s.f18, s.pl5]}>Back</Text>
         </TouchableOpacity>
         <View style={s.flex1} />
-        <TouchableOpacity onPress={onPressNext}>
-          {!serviceDescription || isProcessing ? (
+        {!serviceDescription && error ? (
+          <TouchableOpacity onPress={onPressRetryConnect}>
+            <Text style={[s.white, s.f18, s.bold, s.pr5]}>Retry</Text>
+          </TouchableOpacity>
+        ) : !serviceDescription ? (
+          <>
             <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>
-          )}
-        </TouchableOpacity>
-        {!serviceDescription || isProcessing ? (
-          <Text style={[s.white, s.f18, s.pl10]}>Connecting...</Text>
+          </TouchableOpacity>
         ) : undefined}
       </View>
     </>