be-components 3.3.6 → 3.3.8

package/src/Authenticator/Components/LoginForm.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity } from "react-native"
-import { Button, Icons, Text, TextInput } from '../../Components';
+import { Keyboard, TouchableOpacity } from "react-native"
+import { Icons } from '../../Components';
 import Colors from '../../constants/colors';
 import { AuthenticateApi, AuthenticateHelpers } from '../api';
 import type { AuthenticatedProps } from '../api/types';
+import { Text, View, Button, TextInput } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
 
 
 type LoginFormProps = {
     visible:boolean,
-    width:number,
+    maxWidth?:number,
     onTryAuthenticate:(attribute:string, result:'success'|'fail') => void,
     onRegister: () => void,
     onAuthenticated: (auth_response:AuthenticatedProps) => void
@@ -16,7 +18,8 @@ type LoginFormProps = {
 
 
 const attribute_options = ['username', 'email', 'phone']
-const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthenticate }:LoginFormProps) => {
+const LoginForm = ({ maxWidth, visible, onRegister, onAuthenticated, onTryAuthenticate }:LoginFormProps) => {
+    const C = useColors();
     const [ authenticated, setAuthenticated ] = useState(false);
     console.log(authenticated)
     const [ auth_check, setAuthCheck ] = useState<{
@@ -49,6 +52,7 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
 
     const handleAuthCheck = async() => {
         if(loading){ return } //No mashy mashy
+        Keyboard.dismiss();
         setAuthCheck({ ...auth_check, loading:true })
         const { result, message, verification_session_id, next } = await AuthenticateApi.authCheck(attribute, value);
         if(result == 'fail'){
@@ -68,6 +72,7 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
     }
 
     const handleForgot = async() => {
+        Keyboard.dismiss();
         const resp = await AuthenticateApi.authForgot(attribute, value)
         if(resp.result == 'fail'){
             setAuthCheckError(resp.message)
@@ -83,11 +88,10 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
     }
 
     const handleLogin = async() => {
+        Keyboard.dismiss();
         setLoginTry({ ...login_try, loading:true })
-        console.log('trying login')
         const { result, player_id, new_player, message, access_token, refresh_token, expire_datetime } = await AuthenticateApi.authLogin(attribute, value, pass_token, verification_session_id)
-        console.log('result')
-        console.log(result)
+
         if(result == 'fail' || !access_token || !refresh_token || !player_id){
             setLoginTry({ ...login_try, error:message, loading:false })
             setHalted(true)
@@ -108,10 +112,10 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
 
     const getAttributeIcon = () => {
         switch(attribute){
-            case 'email': return <Icons.EmailIcon size={20} color={Colors.brand.midnight}/>
-            case 'phone': return <Icons.PhoneIcon size={20} color={Colors.brand.midnight} />
-            case 'username': return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
-            default: return <Icons.UserIcon size={20} color={Colors.brand.midnight} />
+            case 'email': return <Icons.EmailIcon size={20} color={C.text.h1}/>
+            case 'phone': return <Icons.PhoneIcon size={20} color={C.text.h1} />
+            case 'username': return <Icons.UserIcon size={20} color={C.text.h1} />
+            default: return <Icons.UserIcon size={20} color={C.text.h1} />
         }
     }
 
@@ -121,29 +125,28 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
     if(!visible){ return <></> }
 
     return (
-        <View style={{ flex:1, width }}>
+        <View style={{ flexGrow:1, maxWidth }}>
             {!login_try.visible ?
-            <View style={{ flex:1 }}>
+            <View style={{ flexGrow:1 }}>
                 <View style={{ padding:20 }}>
                     <View>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>Login Using My:</Text>
+                        <Text theme='h1'>Login Using My:</Text>
                     </View>
                     <View nativeID='attribute_toggle' style={{ marginTop:10, flexDirection:'row', borderRadius:22, borderWidth:1, backgroundColor:Colors.shades.shade400, borderColor:Colors.shades.shade600 }}>
                         {attribute_options.map((a,i) => {
                             const selected = a == attribute ? true : false
                             return (
                                 <Button
-                                    style={{ flex:1 }}
                                     title={a.toUpperCase()}
-                                    borderRadiusOverride={{
+                                    style={{
+                                        flex:1,
+                                        padding:15,
                                         borderTopLeftRadius: i == 0 ? 22 : 0,
                                         borderBottomLeftRadius: i == 0 ? 22 : 0,
                                         borderTopRightRadius: i == attribute_options.length -1 ? 22 : 0,
                                         borderBottomRightRadius: i == attribute_options.length -1 ? 22 : 0,
                                     }}
                                     title_color={selected ? Colors.shades.white : Colors.brand.electric}
-                                    padding={15}
-                                    title_weight={selected ? 'bold' : 'regular'}
                                     backgroundColor={selected ? Colors.brand.electric : 'transparent'}
                                     onPress={() => setAuthCheck({ attribute:a as 'username'|'email'|'phone', value: '', loading:false })}
                                 />
@@ -151,19 +154,20 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                         })}
                     </View>
                 </View>
-                <View style={{ flex:1 }}>
-                <View style={{ backgroundColor:Colors.shades.shade100, borderRadius:8, padding:30 }}>
+                <View style={{ flexGrow:1 }}>
+                <View style={{padding:30 }}>
                     <View style={{  marginBottom:10 }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>ENTER {attribute.toUpperCase()}</Text>
-                        <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Please enter your {attribute} to continue.</Text>
+                        <Text theme='h1'>ENTER {attribute.toUpperCase()}</Text>
+                        <Text style={{ marginTop:5 }} theme='h2'>Please enter your {attribute} to continue.</Text>
                     </View>
-                    <View style={{ marginTop:5, flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
-                        <View style={{ paddingLeft:10, paddingRight:15 }}>
+                    <View type='input' style={{ marginTop:5, flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ paddingLeft:10, paddingRight:10 }}>
                             {getAttributeIcon()}
                         </View>
                         <TextInput
                             style={{ flex:1 }}
                             value={value}
+                            transparent
                             placeholder={attribute.toUpperCase()}
                             autoFocus={true}
                             placeholderTextColor={Colors.brand.slate}
@@ -171,11 +175,11 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                                 setAuthCheck({ ...auth_check, value: text })
                             }}
                         />
-                        <View style={{ padding:10 }}>
+                        <View transparent style={{ padding:10 }}>
                             { valid ?
-                            <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                            <Icons.CheckCirlceIcon color={C.text.success} size={14} />
                             :
-                            <Icons.AlertIcon color={Colors.utility.warning} size={14} />
+                            <Icons.AlertIcon color={C.text.warning} size={20} />
                             }
                         </View>
                     </View>
@@ -187,23 +191,20 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                     :<></>}
                     </View>
                 </View>
-                <View style={{ padding:20 }}>
+                <View type='footer' style={{ padding:10, paddingLeft:20, paddingRight:20 }}>
                     <Button
                         title='LOGIN'
                         style={{ opacity:!valid||loading?0.5:1 }}
-                        title_color={Colors.shades.white}
                         loading={loading}
-                        backgroundColor={Colors.brand.electric}
                         disabled={!valid||loading}
-                        padding={15}
+                        type='success'
                         onPress={() => handleAuthCheck()}
                     />
                 </View>
-                <View style={{ padding:15, backgroundColor:Colors.shades.shade100 }}>
+                <View style={{ padding:10 }}>
                     <Button
                         title='Are You New?  Sign Up Here'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
+                        type='text'
                         onPress={() => onRegister()}
                     />
                 </View>
@@ -213,38 +214,39 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                 <View style={{ flex:1 }}>
                 <View style={{  borderRadius:8, padding:30 }}>
                     <View style={{  marginBottom:10 }}>
-                        <Text size={18} color={Colors.brand.midnight} weight='bold'>MY {attribute.toUpperCase()}</Text>
+                        <Text theme='h1'>MY {attribute.toUpperCase()}</Text>
                     </View>   
-                    <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
-                        <View style={{ paddingLeft:10, paddingRight:15 }}>
+                    <View type='input' style={{ flexDirection:'row', alignItems:'center' }}>
+                        <View transparent style={{ paddingLeft:10, paddingRight:15 }}>
                             {getAttributeIcon()}
                         </View>
                         <TextInput
                             value={value}
+                            transparent
                             editable={false}
-                            style={{ flex:1, backgroundColor:Colors.shades.shade100 }}
+                            style={{ flex:1  }}
                             placeholderTextColor={Colors.brand.slate}
                             onChangeText={() => console.log('')}
                         />
-                        <View style={{ padding:10 }}>
-                            <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                        <View transparent style={{ padding:10 }}>
+                            <Icons.CheckCirlceIcon color={C.text.success} size={14} />
                         </View>
                     </View>
                     </View>
-                    <View style={{ borderRadius:8, padding:30, backgroundColor:Colors.shades.shade100 }}>
+                    <View style={{ borderRadius:8, padding:30 }}>
                         <View style={{  marginBottom:10 }}>
-                            <Text size={18} color={Colors.brand.midnight} weight='bold'>ENTER {type.toUpperCase()}</Text>
+                            <Text theme='h1'>ENTER {type.toUpperCase()}</Text>
                             {type == 'token' ?
-                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>We sent a one-time token to {value}.  Please enter it below.</Text>
+                            <Text style={{ marginTop:5 }} theme='h2'>We sent a one-time token to {value}.  Please enter it below.</Text>
                             :
-                            <Text style={{ marginTop:5 }} size={14} color={Colors.brand.midnight} weight='regular'>Please enter the password associated with the {attribute} {value}.</Text>
+                            <Text style={{ marginTop:5 }} theme='h2'>Please enter the password associated with the {attribute} {value}.</Text>
                             }
                         </View>
-                        <View style={{ flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
-                            <View style={{ paddingLeft:10, paddingRight:15 }}>
+                        <View type='input' style={{ flexDirection:'row', alignItems:'center' }}>
+                            <View transparent style={{ paddingLeft:10, paddingRight:15 }}>
                                 <Icons.LockClosedIcon
                                     size={20}
-                                    color={Colors.brand.midnight}
+                                    color={C.text.h1}
                                 />
                             </View>
                             <TextInput
@@ -263,11 +265,11 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                                     })
                                 }}
                             />
-                            <View style={{ padding:10 }}>
+                            <View transparent style={{ padding:10 }}>
                                 { login_valid ?
-                                <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                                <Icons.CheckCirlceIcon color={C.text.h1} size={14} />
                                 :
-                                <Icons.AlertIcon color={Colors.utility.warning} size={14} />
+                                <Icons.AlertIcon color={C.text.warning} size={18} />
                                 }
                             </View>
                         </View>
@@ -284,10 +286,7 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                         title='BACK'
                         style={{ marginRight:5, flex:1 }}
                         title_color={Colors.brand.electric}
-                        backgroundColor={Colors.shades.white}
-                        borderWidth={1}
-                        borderColor={Colors.brand.electric}
-                        padding={15}
+                        type='close'
                         onPress={() => {
                             setLoginTry({ ...login_try, pass_token: '', visible:false });
                         }}
@@ -297,9 +296,8 @@ const LoginForm = ({ width, visible, onRegister, onAuthenticated, onTryAuthentic
                         style={{ flex:3, opacity:!login_valid||loading?0.5:1 }}
                         title_color={Colors.shades.white}
                         loading={login_try.loading}
-                        backgroundColor={Colors.brand.electric}
+                        type='success'
                         disabled={!login_valid||loading}
-                        padding={15}
                         onPress={() => handleLogin()}
                     />
                 </View>

package/src/Authenticator/Components/StrategyForm.tsx

@@ -1,23 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Checkbox, Icons, Text, TextInput } from "../../Components";
-import Colors from "../../constants/colors";
+import { Checkbox, Icons } from "../../Components";
+
 import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, AuthenticatedProps } from '../api/types';
 import { AuthenticateApi, AuthenticateHelpers } from '../api';
-import { Linking, TouchableOpacity, View , FlatList, Image } from 'react-native';
+import { Linking, TouchableOpacity , FlatList } from 'react-native';
 import type { CompanyProps, PlayerReferralProps, PromoProps, PublicPlayerProps } from '../../types';
-import { view_styles } from '../../constants/styles';
 import { ProfileHelpers } from '../../ProfileManager/api';
 import AuthStrategyIdentifier from './AuthStrategyIdentifier';
+import { useColors } from '../../constants/useColors';
+import { Text, View, Button, TextInput } from '../../Components/Themed';
 
 type StrategyFormProps = {
     visible:boolean,
     auth_strategy_id:string,
     strategy: { auth_strategy?:AuthStrategyProps, auth_strategy_identifiers:AuthStrategyIdentifierProps[] }
-    width:number,
+    maxWidth?:number,
     company_id?:string,
     distinct_id:string,
     source:string,
-    theme?:'full'|'mini',
     company?:CompanyProps,
     opt_in_url?:string,
     show_referral?:boolean,
@@ -26,10 +26,10 @@ type StrategyFormProps = {
     onAuthenticated: (auth_response:AuthenticatedProps) => void
 }
 
-const mini_steps = ['intro', 'execution', 'verify']
-
-const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, company_id, distinct_id, source, show_referral, referral_code, width, opt_in_url, onAuthenticated, onLogin }:StrategyFormProps) => {
+//const mini_steps = ['intro', 'execution', 'verify']
 
+const StrategyForm = ({ visible, strategy, auth_strategy_id, company_id, distinct_id, source, show_referral, referral_code, maxWidth, opt_in_url, onAuthenticated, onLogin }:StrategyFormProps) => {
+    const C = useColors();
     const [ action_loading, setActionLoading ] = useState(false);
     const [ active_view, setActiveView ] = useState('authenticate');
     const [ code_details, setCodeDetails ] = useState<{
@@ -37,9 +37,9 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
         promo?:PromoProps,
         referrer?:PublicPlayerProps
     }>({})
-    const [ active_mini_index, setActiveMiniIndex ] = useState(0);
+    //const [ active_mini_index, setActiveMiniIndex ] = useState(0);
     const [ opted_in, setOptedIn ] = useState(true);
-    const [ active_index, setActiveIndex ] = useState<number>(0)
+    //const [ active_index, setActiveIndex ] = useState<number>(0)
     const [ token, setToken ] = useState('');
     const [ verify_error, setVerifyError ] = useState<string|undefined>();
     const [ verify_attempt_allowed, setVeryAttemptAllowed ] = useState(true);
@@ -69,7 +69,7 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
     },[auth_strategy, referral_code])
 
     const setUpWizard = async(auth_strategy_id:string) => {
-        console.log('setting up wizard!!')
+
         //Get auth strategy from server
         if(referral_code && show_referral){
             const code_response = await AuthenticateApi.getReferralByCode(referral_code)
@@ -94,17 +94,14 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
     }
 
     const verifyAuthStrategyIdentifier = async() => {
-        console.log(`verifying strategy!`)
-        console.log(authenticated)
+
         if(authenticated){ return }
         if(!verify_state){ return  }
         if(action_loading){ return } //No mashy mashy
         if(!verify_attempt_allowed){ return } 
         setVeryAttemptAllowed(false);
         setActionLoading(true);
-        console.log('Submitting password!!!')
         const { result, player_id, access_token, refresh_token, expire_datetime } = await AuthenticateApi.verifyAuthStrategyIdentifier(verify_state.auth_strategy_identifier_id, verify_state.verification_session_id, token, distinct_id);
-        console.log(result)
         if(result == 'fail' || !access_token || !refresh_token || !player_id || !auth_strategy_id){
             setVerifyError(`Invalid code / password.  Please try again after 10 seconds`)
             setTimeout(() => {
@@ -128,7 +125,6 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
     }
 
     const executeAuthStrategy = async() => {
-        console.log('exeuting strategy!!!')
         setActionLoading(true);
         const { result, verification_session_id, session_expire_datetime, auth_strategy_identifier_id, new_player } = await AuthenticateApi.executeAuthStrategy(auth_execution_request);
         if(result == 'fail'){
@@ -172,6 +168,127 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
     const strategy_valid = AuthenticateHelpers.isStrategyValid(auth_execution_request)
     if(!visible || !auth_strategy){ return <></> }
 
+
+    return (
+        <View style={{ maxWidth, flexGrow:1 }}>
+            {active_view == 'authenticate' ?
+            <View nativeID="sign_up" style={{ flexGrow:1 }}>
+                {show_referral && code_details.player_referral && code_details.promo ?
+                <View float style={{ margin:15, flexDirection:'row', borderRadius:8 }}>
+                    <View transparent style={{ padding:10, justifyContent:'center' }}>
+                        <Icons.GiftIcon size={40} color={C.text.gold} />
+                    </View>
+                    <View transparent style={{flex:1, backgroundColor:C.views.gold, padding:10, borderTopRightRadius:8, borderBottomRightRadius:8 }}>
+                        <Text theme='h1'>@{code_details.referrer?.username} has a gift for you</Text>
+                        <Text style={{ paddingTop:5 }} theme='h2'>{ProfileHelpers.getReferralDescription(code_details.promo)}</Text>
+                    </View>
+                </View>
+                :<></>}
+                <View style={{ padding:20, flexGrow:1 }}>
+                    <FlatList
+                        data={auth_strategy_identifiers.sort((a,b) => a.priority - b.priority)}
+                        renderItem={renderAuthStrategyIdentifiers}
+                        keyExtractor={(item) => item.auth_strategy_identifier_id.toString()}
+                    />
+                </View>
+                <View nativeID="action_row" type='footer' style={{ padding:10, paddingLeft:20, paddingRight:20 }}>
+                    <Button
+                        title={`Let's Go!`}
+                        loading={action_loading}
+                        style={{ opacity:strategy_valid && opted_in?1:0.5 }}
+                        disabled={action_loading || !strategy_valid || !opted_in}
+                        type='success'
+                        onPress={() => {
+                            executeAuthStrategy()
+                        }}
+                    />
+                </View>
+                {auth_strategy?.allow_login ?
+                <View style={{ padding:10 }}>
+                    <Button
+                        title='Already Signed Up? Login Here'
+                        type='text'
+                        onPress={() => onLogin()}
+                    />
+                </View>
+                :<></>}
+                {active_view == 'authenticate' && opt_in_url ?
+                <View style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
+                    <Checkbox 
+                        size={25}
+                        checked={opted_in}
+                        onSelect={(checked) => setOptedIn(checked)}
+                    />
+                    <Text style={{ marginLeft:15 }} theme='h2'>By continuing, you agree to the terms and conditions outlined
+                    <TouchableOpacity onPress={() => Linking.openURL(opt_in_url) }>
+                        <Text size={14} color={C.text.action} weight='bold'> here.</Text>
+                    </TouchableOpacity>
+                    </Text>
+                </View>
+                :<></>}
+            </View>
+            
+            : active_view == 'verify' && verify_strategy_identifier ?
+            
+            <View nativeID="sign_up" style={{ flex:1 }}>
+                <View style={{ flex:1, justifyContent:'center', alignItems:'center', padding:20 }}>
+                    <Text theme='h1' size={20} textAlign="center">{verify_strategy_identifier.verify_label??'Enter Verification Code'}</Text>
+                    <View type='input' style={{ marginTop:15 }}>
+                        <TextInput
+                            style={{ textAlign:'center', minWidth:200 }}
+                            value={token}
+                            transparent
+                            placeholder='00000'
+                            keyboardType='default'
+                            autoFocus
+                            textContentType={verify_strategy_identifier.secure_text_entry ? undefined : 'oneTimeCode'}
+                            secureTextEntry={verify_strategy_identifier.secure_text_entry}
+                            placeholderTextColor={C.text.description}
+                            onChangeText={(text) => {
+                                setToken(text);
+                            }}
+                        />
+                    </View>
+                    {verify_error ?
+                    <Text style={{ marginTop:10 }} theme='warning'>{verify_error}</Text>
+                    :<></>}
+                </View>
+                <View nativeID="action_row" style={{ flexDirection:'row', padding:10, paddingLeft:20, paddingRight:20 }}>
+                <Button
+                        title={'BACK'}
+                        loading={action_loading}
+                        style={{ flex:1, marginRight:5 }}
+                        type='close'
+                        onPress={() => {
+                            setActiveView('authenticate');
+                            setVerifyState(undefined)
+                        }}
+                    />
+                    <Button
+                        title={verify_attempt_allowed && !action_loading? 'Verify': 'Retry in 10 seconds'}
+                        loading={action_loading}
+                        style={{ flex:3, opacity:token&&verify_attempt_allowed?1:0.5 }}
+                        disabled={!token || action_loading || !verify_attempt_allowed}
+                        type='success'
+                        onPress={() => {
+                            verifyAuthStrategyIdentifier()
+                        }}
+                    />
+                </View>
+            </View>
+            
+            :<></>}
+        </View>
+    )
+}
+
+export default StrategyForm
+
+
+
+
+/*
+
     if(theme == 'mini'){
         const active_mini_step = mini_steps[active_mini_index];
         const active_strategy_identifier = auth_strategy_identifiers[active_index]
@@ -179,9 +296,9 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
         const last_index = auth_strategy_identifiers.length - 1 == active_index ? true : false
         if(!auth_request || !active_mini_step){ return <></> }
         return (
-            <View style={{ width }}>
+            <View style={{ maxWidth }}>
                 {active_mini_step == 'intro' ?
-                <View style={{ flex:1 }}>
+                <View style={{ }}>
                     <View style={{ flexDirection:'row' }}>
                         {company ?
                         <View style={{ padding:10 }}>
@@ -296,7 +413,7 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
                     </View>
                 </View>
                 : active_view == 'verify' && verify_strategy_identifier ?
-                <View nativeID="sign_up" style={{ flex:1, maxWidth:600 }}>
+                <View nativeID="sign_up" style={{ maxWidth:600 }}>
                 <View style={{ padding:10 }}>
                     <Text size={18} color={Colors.brand.midnight} weight='semibold'>{verify_strategy_identifier.verify_label??'Enter Verification Code'}</Text>
                     <View style={{ padding:10 }}>
@@ -357,130 +474,4 @@ const StrategyForm = ({ visible, company, theme, strategy, auth_strategy_id, com
         )
     }
 
-    return (
-        <View style={{ width:width, flex:1 }}>
-            {active_view == 'authenticate' ?
-            <View nativeID="sign_up" style={{ flex:1 }}>
-                {show_referral && code_details.player_referral && code_details.promo ?
-                <View style={{ margin:15, flexDirection:'row', backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
-                    <View style={{ padding:10, justifyContent:'center' }}>
-                        <Icons.GiftIcon size={40} color={Colors.incentive.gold} />
-                    </View>
-                    <View style={{flex:1, backgroundColor:Colors.incentive.gold_faded, padding:10 }}>
-                        <Text style={{ paddingBottom:10, borderBottomWidth:1, borderBottomColor:Colors.shades.shade600 }} size={16} color={Colors.brand.midnight} weight='bold'>@{code_details.referrer?.username} has a gift for you</Text>
-                        <Text style={{ paddingTop:5 }} size={12} color={Colors.brand.midnight} weight='semibold'>{ProfileHelpers.getReferralDescription(code_details.promo)}</Text>
-                    </View>
-                </View>
-                :<></>}
-                <View style={{ flex:1, padding:10 }}>
-                    <View style={{ padding:10 }}>
-                        <FlatList
-                            data={auth_strategy_identifiers.sort((a,b) => a.priority - b.priority)}
-                            renderItem={renderAuthStrategyIdentifiers}
-                            keyExtractor={(item) => item.auth_strategy_identifier_id.toString()}
-                        />
-                    </View>
-                </View>
-                <View nativeID="action_row" style={{ padding:10, paddingLeft:20, paddingRight:20 }}>
-                    <Button
-                        title={`Let's Go!`}
-                        loading={action_loading}
-                        style={{ opacity:strategy_valid && opted_in?1:0.5 }}
-                        disabled={action_loading || !strategy_valid || !opted_in}
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.brand.electric}
-                        //borderRadius={8}
-                        padding={15}
-                        onPress={() => {
-                            executeAuthStrategy()
-                        }}
-                    />
-                </View>
-                {auth_strategy?.allow_login ?
-                <View style={{ padding:10, backgroundColor:Colors.shades.shade100 }}>
-                    <Button
-                        title='Already Signed Up? Login Here'
-                        title_color={Colors.brand.electric}
-                        backgroundColor='transparent'
-                        onPress={() => onLogin()}
-                    />
-                </View>
-                :<></>}
-                {active_view == 'authenticate' && opt_in_url ?
-                <View style={{ flexDirection:'row', alignItems:'center', padding:20 }}>
-                    <Checkbox 
-                        size={25}
-                        checked={opted_in}
-                        onSelect={(checked) => setOptedIn(checked)}
-                    />
-                    <Text style={{ marginLeft:15 }} size={14} color={Colors.brand.midnight}>By continuing, you agree to the terms and conditions outlined
-                    <TouchableOpacity onPress={() => Linking.openURL(opt_in_url) }>
-                        <Text size={14} color={Colors.brand.electric} weight='bold'> here.</Text>
-                    </TouchableOpacity>
-                    </Text>
-                </View>
-                :<></>}
-            </View>
-            
-            : active_view == 'verify' && verify_strategy_identifier ?
-            
-            <View nativeID="sign_up" style={{ flex:1 }}>
-                <View style={{ flex:1, justifyContent:'center', alignItems:'center', padding:20 }}>
-                    <Text size={18} color={Colors.brand.midnight} weight='semibold' textAlign="center">{verify_strategy_identifier.verify_label??'Enter Verification Code'}</Text>
-                    <View style={{ padding:10 }}>
-                        <TextInput
-                            style={{ textAlign:'center', fontFamily:'barlow-bold', fontSize:14, borderWidth:1, borderColor:Colors.shades.shade600 }}
-                            value={token}
-                            keyboardType='default'
-                            autoFocus
-                            textContentType={verify_strategy_identifier.secure_text_entry ? undefined : 'oneTimeCode'}
-                            secureTextEntry={verify_strategy_identifier.secure_text_entry}
-                            placeholderTextColor={Colors.brand.slate}
-                            onChangeText={(text) => {
-                                setToken(text);
-                            }}
-                        />
-                    </View>
-                    {verify_error ?
-                    <Text style={{ marginTop:10 }} size={14} color={Colors.utility.warning}>{verify_error}</Text>
-                    :<></>}
-                </View>
-                <View nativeID="action_row" style={{ flexDirection:'row', padding:10, paddingLeft:20, paddingRight:20 }}>
-                <Button
-                        title={'BACK'}
-                        loading={action_loading}
-                        style={{ flex:1, marginRight:5 }}
-                        //disabled={!token || action_loading || !verify_attempt_allowed}
-                        title_color={Colors.brand.electric}
-                        borderColor={Colors.brand.electric}
-                        borderWidth={1}
-                        //backgroundColor={Colors.utility.success}
-                        //borderRadius={8}
-                        padding={15}
-                        onPress={() => {
-                            setActiveView('authenticate');
-                            setVerifyState(undefined)
-                        }}
-                    />
-                    <Button
-                        title={verify_attempt_allowed && !action_loading? 'Verify': 'Retry in 10 seconds'}
-                        loading={action_loading}
-                        style={{ flex:3, opacity:token&&verify_attempt_allowed?1:0.5 }}
-                        disabled={!token || action_loading || !verify_attempt_allowed}
-                        title_color={Colors.shades.white}
-                        backgroundColor={Colors.utility.success}
-                        //borderRadius={8}
-                        padding={15}
-                        onPress={() => {
-                            verifyAuthStrategyIdentifier()
-                        }}
-                    />
-                </View>
-            </View>
-            
-            :<></>}
-        </View>
-    )
-}
-
-export default StrategyForm
+*/