@rownd/react-native 0.1.1

package/lib/module/components/SignIn.js

@@ -0,0 +1,593 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as Linking from 'expo-linking';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { differenceInMinutes } from 'date-fns';
+import { View, Text, StyleSheet, Pressable, Image, ActivityIndicator } from 'react-native';
+import { SvgCssUri } from 'react-native-svg';
+import tw from '../utils/tailwind';
+import phone from 'phone';
+import jwt_decode from 'jwt-decode';
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { useApi, useInterval, useNav, useDeviceFingerprint } from '../hooks';
+import { useGlobalContext } from './GlobalContext';
+import { ActionType } from '../data/actions';
+import { renderField } from '../utils/form'; // Image imports
+
+import ImageEmailVerifyWaiting from '../assets/images/email-verify-waiting.svg';
+import ImagePhoneVerifyWaiting from '../assets/images/phone-verify-waiting.svg';
+import ImageCheckmarkFilled from '../assets/images/checkmark--filled.svg';
+var LoginStep;
+
+(function (LoginStep) {
+  LoginStep["INIT"] = "init";
+  LoginStep["WAITING"] = "waiting";
+  LoginStep["SUCCESS"] = "success";
+  LoginStep["FAILURE"] = "failure";
+  LoginStep["ERROR"] = "error";
+})(LoginStep || (LoginStep = {}));
+
+var LoginVerificationStatus;
+
+(function (LoginVerificationStatus) {
+  LoginVerificationStatus["PENDING"] = "pending";
+  LoginVerificationStatus["EXPIRED"] = "expired";
+  LoginVerificationStatus["VERIFIED"] = "verified";
+})(LoginVerificationStatus || (LoginVerificationStatus = {}));
+
+export function SignIn() {
+  var _decodedAccessToken, _nav$options, _app$config2, _app$config2$hub, _app$config2$hub$auth, _nav$options4, _nav$options5, _nav$options8, _state$config3, _nav$options10, _state$config5, _app$config5, _app$config6, _app$config6$hub, _app$config6$hub$auth, _app$config7, _app$config7$hub, _app$config7$hub$auth;
+
+  const navTo = useNav();
+  const {
+    getFingerprint,
+    getChallengeIfPresent,
+    clearFingerprint
+  } = useDeviceFingerprint();
+  const {
+    state,
+    dispatch
+  } = useGlobalContext();
+  const {
+    config,
+    nav,
+    app,
+    user
+  } = state;
+  let decodedAccessToken;
+
+  if (state.auth.access_token) {
+    decodedAccessToken = jwt_decode(state.auth.access_token);
+  }
+
+  const [userIdentifier, setUserIdentifier] = useState('');
+  const [fieldError, setFieldError] = useState(null);
+  const [step, setStep] = useState(state.auth.access_token && ((_decodedAccessToken = decodedAccessToken) === null || _decodedAccessToken === void 0 ? void 0 : _decodedAccessToken['https://auth.rownd.io/is_verified_user']) !== false ? LoginStep.SUCCESS : LoginStep.INIT);
+  const [error, setError] = useState('');
+  const allowedIdentifiers = useMemo(() => ['email', 'phone'], []);
+  const [requestId, setRequestId] = useState(null);
+  const [loginPollStart, setLoginPollStart] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loginType, setLoginType] = useState(null); // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  const [_phoneDetails, setPhoneDetails] = useState(null); // TODO: For parity with web, need to use `phoneDetails` to update the input visuals
+
+  const [isValidUserIdentifier, setIsValidUserIdentifier] = useState(false);
+  const [requiresAdditionalFields, setRequiresAdditionalFields] = useState(nav === null || nav === void 0 ? void 0 : (_nav$options = nav.options) === null || _nav$options === void 0 ? void 0 : _nav$options.init_data);
+  const bottomSheetModalRef = useRef(null);
+  useEffect(() => {
+    if (bottomSheetModalRef.current) {
+      bottomSheetModalRef.current.present();
+    }
+  }, []);
+  const addlFieldInit = useCallback(currentState => {
+    var _app$config, _app$config$hub, _app$config$hub$auth, _nav$options2, _nav$options3;
+
+    const addlFields = app === null || app === void 0 ? void 0 : (_app$config = app.config) === null || _app$config === void 0 ? void 0 : (_app$config$hub = _app$config.hub) === null || _app$config$hub === void 0 ? void 0 : (_app$config$hub$auth = _app$config$hub.auth) === null || _app$config$hub$auth === void 0 ? void 0 : _app$config$hub$auth.additional_fields;
+    const addlInputs = (nav === null || nav === void 0 ? void 0 : (_nav$options2 = nav.options) === null || _nav$options2 === void 0 ? void 0 : _nav$options2.init_data) || (nav === null || nav === void 0 ? void 0 : (_nav$options3 = nav.options) === null || _nav$options3 === void 0 ? void 0 : _nav$options3.default_values) || {};
+    const newState = {};
+
+    if (addlFields !== null && addlFields !== void 0 && addlFields.length) {
+      for (const field of addlFields) {
+        if (field !== null && field !== void 0 && field.options) {
+          newState[field.name] = (addlInputs === null || addlInputs === void 0 ? void 0 : addlInputs[field.name]) || field.options[0].value;
+        }
+      }
+    }
+
+    return { ...currentState,
+      ...newState
+    };
+  }, [app === null || app === void 0 ? void 0 : (_app$config2 = app.config) === null || _app$config2 === void 0 ? void 0 : (_app$config2$hub = _app$config2.hub) === null || _app$config2$hub === void 0 ? void 0 : (_app$config2$hub$auth = _app$config2$hub.auth) === null || _app$config2$hub$auth === void 0 ? void 0 : _app$config2$hub$auth.additional_fields, nav === null || nav === void 0 ? void 0 : (_nav$options4 = nav.options) === null || _nav$options4 === void 0 ? void 0 : _nav$options4.default_values, nav === null || nav === void 0 ? void 0 : (_nav$options5 = nav.options) === null || _nav$options5 === void 0 ? void 0 : _nav$options5.init_data]);
+  const fieldReducer = useCallback((currentState, action) => {
+    console.log('fieldReducer', action);
+
+    switch (action.type) {
+      case 'reset':
+        return addlFieldInit(currentState);
+
+      default:
+        return { ...currentState,
+          ...action.payload
+        };
+    }
+  }, [addlFieldInit]);
+  const [addlFieldValues, addlFieldDispatch] = useReducer(fieldReducer, {}, addlFieldInit);
+  const {
+    client: api
+  } = useApi();
+
+  function validateEmail(email) {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const isValid = re.test(String(email).toLowerCase());
+
+    if (!isValid) {
+      setFieldError('Invalid email address');
+      return false;
+    }
+
+    setFieldError(null);
+    return true;
+  }
+
+  const isValidPhone = useCallback(() => {
+    const phoneResult = phone(userIdentifier);
+
+    if (!phoneResult.isValid) {
+      setLoginType(null);
+      setPhoneDetails(null);
+      return false;
+    }
+
+    setLoginType('phone');
+    setPhoneDetails(phoneResult);
+    setUserIdentifier(phoneResult.phoneNumber);
+    return true;
+  }, [userIdentifier]);
+  const isValidEmail = useCallback(() => {
+    const emailAtIdx = userIdentifier === null || userIdentifier === void 0 ? void 0 : userIdentifier.indexOf('@');
+    const emailSuffixIdx = userIdentifier === null || userIdentifier === void 0 ? void 0 : userIdentifier.substring(emailAtIdx).indexOf('.');
+
+    if (emailAtIdx > 0 && emailSuffixIdx > 0 && (userIdentifier === null || userIdentifier === void 0 ? void 0 : userIdentifier.substring(emailAtIdx + emailSuffixIdx).length) >= 3) {
+      return validateEmail(userIdentifier);
+    }
+
+    return false;
+  }, [userIdentifier]);
+  const validateInput = useCallback(() => {
+    const validations = [];
+
+    if (allowedIdentifiers.includes('phone')) {
+      validations.push(isValidPhone);
+    }
+
+    if (allowedIdentifiers.includes('email')) {
+      validations.push(isValidEmail);
+    }
+
+    if (!validations.some(fn => fn())) {
+      setIsValidUserIdentifier(false);
+    } else {
+      setIsValidUserIdentifier(true);
+    }
+  }, [allowedIdentifiers, isValidEmail, isValidPhone]); // Fire validation as data changes in field
+
+  useEffect(validateInput, [validateInput]);
+  const pollLoginStatus = useCallback(async () => {
+    try {
+      const resp = await api.post(`hub/auth/challenge_status`, {
+        headers: {
+          'x-rownd-app-key': config === null || config === void 0 ? void 0 : config.appKey
+        },
+        json: {
+          challenge_id: requestId,
+          [loginType === 'phone' ? 'phone' : 'email']: userIdentifier
+        }
+      }).json();
+      let err;
+
+      switch (resp.status) {
+        case 'pending':
+          err = new Error('Login challenge is still pending');
+          err.code = LoginVerificationStatus.PENDING;
+          throw err;
+
+        case 'expired':
+          err = new Error('Login challenge is still pending');
+          err.code = LoginVerificationStatus.PENDING;
+          throw err;
+
+        case 'verified':
+          break;
+
+        default:
+          err = new Error('Unknown login challenge status');
+          throw err;
+      }
+
+      dispatch({
+        type: ActionType.LOGIN_SUCCESS,
+        payload: resp
+      });
+      setStep(LoginStep.SUCCESS);
+    } catch (err) {
+      // logger.log('login poll error', err);
+      // If network error, try again up to 1 minute, else fail
+      if (!err.code && differenceInMinutes(Date.now(), loginPollStart) > 0) {
+        setStep(LoginStep.ERROR);
+        setError('Network error. Please try again later.');
+        return;
+      } // If request expires, then fail (assume > 6 mins is a failure/expiration)
+
+
+      if ((err.status || err.code) && differenceInMinutes(Date.now(), loginPollStart) > 6) {
+        setStep(LoginStep.ERROR);
+        setError('The sign in request expired.');
+        return;
+      }
+
+      if (err.status && err.status >= 400) {
+        setStep(LoginStep.FAILURE);
+        setError('Sign in unsuccessful.');
+      }
+    }
+  }, [api, config === null || config === void 0 ? void 0 : config.appKey, dispatch, loginPollStart, loginType, requestId, userIdentifier]); // Polling when a login flow is in progress
+
+  useInterval(pollLoginStatus, step === LoginStep.WAITING ? 5000 : null); // login polling manager
+
+  useEffect(() => {
+    if (step === LoginStep.SUCCESS) {
+      var _nav$options6, _state$config;
+
+      if (nav !== null && nav !== void 0 && (_nav$options6 = nav.options) !== null && _nav$options6 !== void 0 && _nav$options6.post_login_redirect || (_state$config = state.config) !== null && _state$config !== void 0 && _state$config.postLoginUrl) {
+        var _nav$options7, _state$config2;
+
+        Linking.openURL((nav === null || nav === void 0 ? void 0 : (_nav$options7 = nav.options) === null || _nav$options7 === void 0 ? void 0 : _nav$options7.post_login_redirect) || ((_state$config2 = state.config) === null || _state$config2 === void 0 ? void 0 : _state$config2.postLoginUrl));
+      }
+
+      dispatch({
+        type: ActionType.CHANGE_ROUTE,
+        payload: {
+          route: '/'
+        }
+      }); // Reset modal state if this user is unverified, since we'll need to re-submit at some point
+
+      if (!state.auth.is_verified_user) {
+        setStep(LoginStep.INIT);
+      }
+    }
+  }, [dispatch, nav === null || nav === void 0 ? void 0 : (_nav$options8 = nav.options) === null || _nav$options8 === void 0 ? void 0 : _nav$options8.post_login_redirect, pollLoginStatus, state.auth.is_verified_user, (_state$config3 = state.config) === null || _state$config3 === void 0 ? void 0 : _state$config3.postLoginUrl, step]);
+  const initSignIn = useCallback(async () => {
+    var _nav$options9, _state$config4, _app$config3;
+
+    if (step === LoginStep.WAITING) {
+      return;
+    } // Validation
+
+
+    if (fieldError) {
+      return;
+    }
+
+    const payload = {
+      [loginType === 'phone' ? 'phone' : 'email']: userIdentifier,
+      return_url: (nav === null || nav === void 0 ? void 0 : (_nav$options9 = nav.options) === null || _nav$options9 === void 0 ? void 0 : _nav$options9.post_login_redirect) || ((_state$config4 = state.config) === null || _state$config4 === void 0 ? void 0 : _state$config4.postLoginUrl),
+      user_data: Object.values(user.data).some(f => f !== null && f !== undefined) ? user.data : {} // Include user.data if at least one field is defined
+
+    }; // Set the user_id to the application's default user id format if it is defined
+
+    if ((_app$config3 = app.config) !== null && _app$config3 !== void 0 && _app$config3.default_user_id_format) {
+      var _app$config4;
+
+      payload.user_id = (_app$config4 = app.config) === null || _app$config4 === void 0 ? void 0 : _app$config4.default_user_id_format;
+    }
+
+    if (requiresAdditionalFields) {
+      payload.user_data = { ...payload.user_data,
+        ...addlFieldValues
+      };
+    } // Submission
+
+
+    try {
+      var _payload$fingerprint;
+
+      setIsSubmitting(true); // Get the browser fingerprint for future sign-ins that don't require re-verification
+
+      const fingerprint = await getFingerprint();
+      const challengeEntry = await getChallengeIfPresent(app.id, [userIdentifier]);
+      payload.fingerprint = {
+        hash: fingerprint.visitorId,
+        challenge: challengeEntry === null || challengeEntry === void 0 ? void 0 : challengeEntry.value
+      };
+      const resp = await api.post('hub/auth/init', {
+        headers: {
+          'x-rownd-app-key': config === null || config === void 0 ? void 0 : config.appKey
+        },
+        json: payload
+      }).json(); // This will only be true when a user is signing in for the very first time and
+      // the app allows unverified users OR the user was successfully fingerprinted.
+
+      if (resp.auth_tokens) {
+        dispatch({
+          type: ActionType.LOGIN_SUCCESS,
+          payload: { ...resp.auth_tokens,
+            app_id: app.id
+          }
+        });
+        setStep(LoginStep.SUCCESS);
+        return;
+      } else if (payload !== null && payload !== void 0 && (_payload$fingerprint = payload.fingerprint) !== null && _payload$fingerprint !== void 0 && _payload$fingerprint.challenge) {
+        // The fingerprint is probably expired, so delete the challenge for re-registration
+        try {
+          clearFingerprint(payload.fingerprint.challenge);
+        } catch (err) {// no-op, but not likely to throw anyway
+        }
+      }
+
+      setRequestId(resp.challenge_id);
+      setStep(LoginStep.WAITING);
+      setLoginPollStart(Date.now());
+    } catch (err) {
+      // logger.error(err);
+      if (err.response.status === 400) {
+        setStep(LoginStep.INIT);
+        setRequiresAdditionalFields(true);
+        return;
+      }
+
+      setStep(LoginStep.ERROR);
+      setError(err.message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [step, fieldError, loginType, userIdentifier, nav === null || nav === void 0 ? void 0 : (_nav$options10 = nav.options) === null || _nav$options10 === void 0 ? void 0 : _nav$options10.post_login_redirect, (_state$config5 = state.config) === null || _state$config5 === void 0 ? void 0 : _state$config5.postLoginUrl, user.data, (_app$config5 = app.config) === null || _app$config5 === void 0 ? void 0 : _app$config5.default_user_id_format, app.id, requiresAdditionalFields, addlFieldValues, getFingerprint, getChallengeIfPresent, api, config === null || config === void 0 ? void 0 : config.appKey, dispatch, clearFingerprint]);
+
+  const launchRowndWebsite = () => {
+    Linking.openURL('https://rownd.io');
+  };
+
+  const handleAddlFieldChange = evt => {
+    const target = evt.target;
+    const {
+      value,
+      name
+    } = target;
+    addlFieldDispatch({
+      type: 'default',
+      payload: {
+        [name]: value
+      }
+    });
+  };
+
+  const handleClose = useCallback(() => {
+    setTimeout(() => {
+      navTo({
+        hide: true
+      });
+    }, 150);
+  }, [navTo]);
+  const snapPoints = useMemo(() => ['25%', '70%'], []);
+  const renderBackdrop = useCallback(cbProps => /*#__PURE__*/React.createElement(BottomSheetBackdrop, _extends({}, cbProps, {
+    pressBehavior: "close"
+  })), []);
+  return /*#__PURE__*/React.createElement(BottomSheetModal, {
+    snapPoints: snapPoints,
+    index: 1,
+    backdropComponent: renderBackdrop,
+    keyboardBehavior: "fillParent",
+    android_keyboardInputMode: "adjustResize",
+    enablePanDownToClose: true,
+    onDismiss: handleClose,
+    style: styles.bottomSheet,
+    ref: bottomSheetModalRef
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.innerContainer
+  }, step === LoginStep.INIT && /*#__PURE__*/React.createElement(React.Fragment, null, (app === null || app === void 0 ? void 0 : (_app$config6 = app.config) === null || _app$config6 === void 0 ? void 0 : (_app$config6$hub = _app$config6.hub) === null || _app$config6$hub === void 0 ? void 0 : (_app$config6$hub$auth = _app$config6$hub.auth) === null || _app$config6$hub$auth === void 0 ? void 0 : _app$config6$hub$auth.show_app_icon) && (app === null || app === void 0 ? void 0 : app.icon) && (app.icon_content_type === 'image/svg+xml' ? /*#__PURE__*/React.createElement(SvgCssUri, {
+    uri: app.icon,
+    style: styles.appLogo
+  }) : /*#__PURE__*/React.createElement(Image, {
+    style: styles.appLogo,
+    source: {
+      uri: app.icon
+    }
+  })), /*#__PURE__*/React.createElement(Text, {
+    style: styles.dialogHeading
+  }, "Sign in or sign up"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.inputLabel
+  }, "Email or phone number"), /*#__PURE__*/React.createElement(BottomSheetTextInput, {
+    style: styles.identifierInput,
+    placeholder: "Enter here",
+    keyboardType: "email-address",
+    textContentType: "emailAddress",
+    returnKeyLabel: "Sign in",
+    returnKeyType: "go",
+    enablesReturnKeyAutomatically: true,
+    autoCapitalize: "none",
+    onChangeText: text => setUserIdentifier(text.trim()),
+    onBlur: validateInput,
+    value: userIdentifier,
+    onSubmitEditing: initSignIn
+  }), requiresAdditionalFields && (app === null || app === void 0 ? void 0 : (_app$config7 = app.config) === null || _app$config7 === void 0 ? void 0 : (_app$config7$hub = _app$config7.hub) === null || _app$config7$hub === void 0 ? void 0 : (_app$config7$hub$auth = _app$config7$hub.auth) === null || _app$config7$hub$auth === void 0 ? void 0 : _app$config7$hub$auth.additional_fields.map(field => {
+    return renderField({ ...field,
+      value: addlFieldValues[field.name] || '',
+      [['input', 'text', 'tel', 'email'].includes(field.type) ? 'onInput' : 'onChange']: handleAddlFieldChange
+    });
+  })), /*#__PURE__*/React.createElement(Pressable, {
+    style: _ref => {
+      let {
+        pressed
+      } = _ref;
+      return [styles.button, !isValidUserIdentifier && styles.buttonDisabled, pressed && styles.buttonPressed, isSubmitting && styles.buttonSubmitting];
+    },
+    disabled: !isValidUserIdentifier || isSubmitting,
+    onPress: initSignIn
+  }, /*#__PURE__*/React.createElement(Text, null, isSubmitting && /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "small",
+    color: "#efefef"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.buttonText
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: isValidUserIdentifier ? styles.buttonContent : { ...styles.buttonContent,
+      ...styles.buttonDisabledText
+    }
+  }, isSubmitting ? 'Just a sec...' : 'Continue')))), /*#__PURE__*/React.createElement(Text, {
+    style: styles.signInNoticeText
+  }, "By continuing, you're agreeing to the terms of service that govern this app and to receive email or text messages for verification purposes.")), step === LoginStep.WAITING && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    style: styles.dialogHeading
+  }, "Thanks! Verify your", ' ', loginType === 'phone' ? 'phone number' : 'email', " to finish"), /*#__PURE__*/React.createElement(Text, {
+    style: tw.style('py-6')
+  }, "Click the link in the message we just sent to", ' ', /*#__PURE__*/React.createElement(Text, {
+    style: tw.style('italic')
+  }, userIdentifier), " to verify and finish.", /*#__PURE__*/React.createElement(Text, {
+    style: [styles.link],
+    onPress: () => setStep(LoginStep.INIT)
+  }, "\xA0Re-send message")), /*#__PURE__*/React.createElement(View, {
+    style: styles.signInVerificationImage
+  }, loginType === 'phone' ? /*#__PURE__*/React.createElement(ImagePhoneVerifyWaiting, null) : /*#__PURE__*/React.createElement(ImageEmailVerifyWaiting, null)), /*#__PURE__*/React.createElement(Pressable, {
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [styles.button, pressed && styles.buttonPressed];
+    },
+    onPress: () => setStep(LoginStep.INIT)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.buttonContent
+  }, "Try a different", ' ', loginType === 'phone' ? 'phone number' : 'email'))), step === LoginStep.SUCCESS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.signInVerificationImage
+  }, /*#__PURE__*/React.createElement(ImageCheckmarkFilled, null))), step === LoginStep.FAILURE && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    style: tw.style('text-base')
+  }, "Whoops, that didn't work!"), /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.button,
+    onPress: () => setStep(LoginStep.INIT)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.buttonContent
+  }, "Try again"))), step === LoginStep.ERROR && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    style: tw.style('text-base')
+  }, "An error occurred while signing you in."), !!error && /*#__PURE__*/React.createElement(Text, {
+    style: tw.style('text-rose-800')
+  }, error), /*#__PURE__*/React.createElement(Pressable, {
+    style: styles.button,
+    onPress: () => setStep(LoginStep.INIT)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.buttonContent
+  }, "Try again"))), /*#__PURE__*/React.createElement(Text, null, "Powered by", ' ', /*#__PURE__*/React.createElement(Text, {
+    style: styles.link,
+    onPress: launchRowndWebsite
+  }, "Rownd"))));
+}
+const styles = StyleSheet.create({
+  modal: {// flex: 1,
+  },
+  bottomSheet: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.58,
+    shadowRadius: 16.0,
+    elevation: 24
+  },
+  innerContainer: {
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 0,
+    padding: 25
+  },
+  container: {
+    flex: 1,
+    padding: 24
+  },
+  header: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    paddingVertical: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  },
+  panelHandle: {
+    width: 40,
+    height: 2,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+    borderRadius: 4
+  },
+  appLogo: {
+    padding: 50,
+    width: 75,
+    height: 75,
+    resizeMode: 'center',
+    textAlign: 'center',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: 20
+  },
+  dialogHeading: {
+    fontSize: 24
+  },
+  inputLabel: {
+    marginTop: 20,
+    marginBottom: 5
+  },
+  identifierInput: {
+    backgroundColor: '#eee',
+    borderRadius: 8,
+    padding: 10,
+    fontSize: 18
+  },
+  button: {
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 20,
+    marginBottom: 30,
+    elevation: 0,
+    backgroundColor: '#5b0ae0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonDisabled: {
+    backgroundColor: '#eee'
+  },
+  buttonPressed: {
+    opacity: 0.5
+  },
+  buttonContent: {
+    textAlign: 'center',
+    fontSize: 18,
+    color: '#fff'
+  },
+  buttonText: {
+    marginLeft: 10,
+    paddingLeft: 10,
+    fontSize: 18
+  },
+  buttonTextInner: {
+    fontSize: 18
+  },
+  buttonDisabledText: {
+    color: '#8e8e8e'
+  },
+  buttonSubmitting: {
+    backgroundColor: '#2f0492',
+    color: '#c7c7c7'
+  },
+  loadingIndicator: {
+    textAlignVertical: 'center',
+    padding: 20,
+    margin: 20
+  },
+  signInNoticeText: {
+    fontSize: 12,
+    marginBottom: 20
+  },
+  signInVerificationImage: {
+    alignItems: 'center'
+  },
+  link: {
+    color: '#6114e1'
+  }
+});
+//# sourceMappingURL=SignIn.js.map