feat: Show sign in error message in a view rather than alert

Does not require a delay to show what's going on
See #144

app.json.dist

@@ -10,7 +10,7 @@
       "ios",
       "android"
     ],
-    "version": "0.8.6",
+    "version": "0.8.8",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "splash": {

src/Authentication.js

@@ -8,7 +8,6 @@ import {
 import randomatic from 'randomatic'
 import { Connection } from './Connection'
 import { logger } from './Logger'
-import { alertAsync } from './AsyncAlert'
 import qs from 'qs'
 
 /*
@@ -57,24 +56,12 @@ export default class Authentication {
         throw new Error('OAuth state mismatch')
       }
 
-      let token = await this.getOAuthToken(codeVerifier, result.params.code)
-
-      return token
+      return this.getOAuthToken(codeVerifier, result.params.code)
     } else if (
       result.type === 'dismiss' ||
       (result.type === 'error' && result.errorCode === 'login-declined')
     ) {
-      // FIXME: alert never pops without delay here, despite the if correctly evaluating true
-      // Any way to check if the window has closed, if that's the issue?
-      await new Promise((resolve) => setTimeout(resolve, 15000))
-
-      let retry = await alertAsync(
-        'Authentication dismissed',
-        'Cancel signing in?',
-        'Try again',
-        'Exit'
-      )
-      return retry ? this.loginWithAuth0() : false
+      return false
     }
     logger.error('Login failed', result)
     throw new Error('Error signing in')
@@ -105,18 +92,16 @@ export default class Authentication {
    *
    * @memberof Authentication
    */
-  getOAuthToken = async (codeVerifier, code) => {
+  getOAuthToken = (codeVerifier, code) => {
     logger.info('Getting OAuth token')
 
-    let content = await this.connection.post('oauth/token', {
+    return this.connection.post('oauth/token', {
       grant_type: 'authorization_code',
       client_id: auth0ClientId,
       code_verifier: codeVerifier,
       code: code,
       redirect_uri: auth0RedirectUri
     })
-
-    return content
   }
 
   /**
@@ -162,8 +147,6 @@ export default class Authentication {
     this.connection.addHeaders({
       'Authorization': 'Bearer ' + apiToken
     })
-    let user = await this.connection.get('userinfo')
-
-    return user
+    return this.connection.get('userinfo')
   }
 }

src/screens/SignInScreen.js

@@ -15,7 +15,6 @@ import Colors from '../../constants/Colors'
 import Layout from '../../constants/Layout'
 import Button from '../components/form/Button'
 import { logger } from '../Logger'
-import { alertAsync } from '../AsyncAlert'
 import VersionTag from '../components/VersionTag'
 
 export default
@@ -25,7 +24,8 @@ export default
 class SignInScreen extends React.Component {
   state = {
     loading: false,
-    loadingMessage: 'Loading...'
+    loadingMessage: 'Loading...',
+    error: false
   }
 
   authenticate = async () => {
@@ -35,8 +35,8 @@ class SignInScreen extends React.Component {
     let token = await auth.loginWithAuth0()
     if (!token || !token.access_token) {
       logger.error('Login failed', { token: token })
-      alertAsync('Login failed!')
-      this.setState({ loading: false })
+      // alertAsync('Login failed!')
+      this.setState({ loading: false, error: true })
       return
     }
     this.props.ApplicationStore.updateAccessToken(token.access_token)
@@ -107,6 +107,11 @@ class SignInScreen extends React.Component {
           </View>
           <Button title='Get started!' onPress={this.authenticate} />
           <VersionTag style={styles.versionTag} />
+          {this.state.error && <Text style={styles.errorText}>
+            Error signing in!
+
+            Please try again or let us know if the problem persists!
+          </Text>}
         </View>
     )
   }
@@ -138,5 +143,8 @@ const styles = StyleSheet.create({
   versionTag: {
     bottom: 0,
     position: 'absolute'
+  },
+  errorText: {
+    color: Colors.warningText
   }
 })