be-components 0.1.1

package/lib/typescript/src/Components/Text.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import '../font.css';
+export interface TextProps {
+    weight?: 'bold' | 'semibold' | 'regular' | 'light';
+    color?: string;
+    size?: number;
+    children: any;
+    textAlign?: 'left' | 'center' | 'right';
+    style?: any;
+}
+declare const Text: ({ weight, color, size, children, textAlign, style }: TextProps) => React.JSX.Element;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

package/lib/typescript/src/Components/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/Components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,aAAa,CAAC;AAIrB,MAAM,WAAW,SAAS;IACtB,MAAM,CAAC,EAAC,MAAM,GAAC,UAAU,GAAC,SAAS,GAAC,OAAO,CAAC;IAC5C,KAAK,CAAC,EAAC,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAC,GAAG,CAAC;IACb,SAAS,CAAC,EAAC,MAAM,GAAC,QAAQ,GAAC,OAAO,CAAC;IACnC,KAAK,CAAC,EAAC,GAAG,CAAA;CACb;AAED,QAAA,MAAM,IAAI,wDAAyD,SAAS,sBAiB3E,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/typescript/src/Components/TextInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type TextInputProps = {
+    value?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    keyboardType?: string;
+    textContentType?: string;
+    secureTextEntry?: boolean;
+    placeholderTextColor?: string;
+    onChangeText: (text: string) => void;
+    style?: any;
+};
+declare const TextInput: ({ onChangeText, placeholderTextColor, value, placeholder, style, autoFocus, keyboardType, textContentType, secureTextEntry }: TextInputProps) => React.JSX.Element;
+export default TextInput;
+//# sourceMappingURL=TextInput.d.ts.map

package/lib/typescript/src/Components/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/Components/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,cAAc,GAAG;IAClB,KAAK,CAAC,EAAC,MAAM,CAAC;IACd,WAAW,CAAC,EAAC,MAAM,CAAC;IACpB,SAAS,CAAC,EAAC,OAAO,CAAC;IACnB,YAAY,CAAC,EAAC,MAAM,CAAC;IACrB,eAAe,CAAC,EAAC,MAAM,CAAC;IACxB,eAAe,CAAC,EAAC,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAC,MAAM,CAAC;IAC7B,YAAY,EAAC,CAAC,IAAI,EAAC,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAC,GAAG,CAAA;CACb,CAAA;AAED,QAAA,MAAM,SAAS,iIAAmI,cAAc,sBAyB/J,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/typescript/src/Components/index.d.ts

@@ -0,0 +1,8 @@
+import Button from './Button';
+import Text from './Text';
+import Spring from './Spring';
+import TextInput from './TextInput';
+import Icons from './Icons';
+import Checkbox from './Checkbox';
+export { Button, Text, Spring, TextInput, Checkbox, Icons };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/Components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EACH,MAAM,EACN,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,KAAK,EACR,CAAA"}

package/lib/typescript/src/constants/colors.d.ts

@@ -0,0 +1,60 @@
+declare const Colors: {
+    brand: {
+        cobalt: string;
+        midnight: string;
+        midnightTopGradient: string;
+        electric: string;
+        cyan: string;
+        slate: string;
+        mint: string;
+        yellow: string;
+        facebook: string;
+        new: string;
+    };
+    chart: {
+        cyan: string;
+        electric: string;
+    };
+    shades: {
+        white: string;
+        shade100: string;
+        shade200: string;
+        shade300: string;
+        shade400: string;
+        shade500: string;
+        shade600: string;
+        black: string;
+        black_faded: string;
+        black_faded_heavy: string;
+        black_faded_super_heavy: string;
+    };
+    accents: {
+        accent100: string;
+        accent200: string;
+    };
+    highlights: {
+        highlight100: string;
+        highlight100Faded: string;
+        highlight200: string;
+        highlight200Faded: string;
+        highlight300: string;
+        highlight300Faded: string;
+        highlight400: string;
+        highlight400Faded: string;
+        highlight500: string;
+        highlight500Faded: string;
+    };
+    utility: {
+        success: string;
+        error: string;
+        warning: string;
+    };
+    incentive: {
+        gold: string;
+        gold_faded: string;
+        silver: string;
+        bronze: string;
+    };
+};
+export default Colors;
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/src/constants/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/constants/colors.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DT,CAAA;AACD,eAAe,MAAM,CAAA"}

package/lib/typescript/src/constants/styles.d.ts

@@ -0,0 +1,34 @@
+export declare const view_styles: {
+    container: {
+        backgroundColor: string;
+        borderTopRightRadius: number;
+        borderTopLeftRadius: number;
+    };
+};
+export declare const text_styles: {
+    dark_heading_1: {
+        fontSize: number;
+        color: string;
+    };
+    dark_heading_2: {
+        fontSize: number;
+        color: string;
+    };
+    dark_heading_3: {
+        fontSize: number;
+        color: string;
+    };
+    light_heading_1: {
+        fontSize: number;
+        color: string;
+    };
+    light_heading_2: {
+        fontSize: number;
+        color: string;
+    };
+    light_heading_3: {
+        fontSize: number;
+        color: string;
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/constants/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/constants/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;CAMtB,CAAA;AAGF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;CAyBtB,CAAA"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,4 @@
+import AuthenticateWizard from "./AuthenticateWizard";
+import { Text, Button, Spring } from './Components';
+export { AuthenticateWizard, Text, Button, Spring };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EACL,kBAAkB,EAClB,IAAI,EACJ,MAAM,EACN,MAAM,EACP,CAAA"}

package/package.json

@@ -0,0 +1,167 @@
+{
+  "name": "be-components",
+  "version": "0.1.1",
+  "description": "Components for BettorEdge Apps",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace be-components-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://www.bettoredge.com.git"
+  },
+  "author": "BettorEdge <james@bettoredge.com> (https://www.bettoredge.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://www.bettoredge.com/issues"
+  },
+  "homepage": "https://www.bettoredge.com#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^15.0.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@react-spring/web": "^9.7.3",
+    "axios": "^1.6.8",
+    "expo-linear-gradient": "^12.7.2"
+  },
+  "directories": {
+    "example": "example"
+  }
+}

package/src/AuthenticateWizard/Components/StrategyForm.tsx

@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Checkbox, Icons, Text, TextInput } from "../../Components";
+import Colors from "../../constants/colors";
+import type { AuthExecutionRequestProps, AuthStrategyIdentifierProps, AuthStrategyProps, CompanyProps } from '../api/types';
+import { AuthenticateApi, AuthenticateHelpers } from '../api';
+import { Image, Linking, TouchableOpacity, View , FlatList} from 'react-native';
+
+type StrategyFormProps = {
+    visible:boolean,
+    auth_strategy_id:string,
+    width:number,
+    company_id?:string,
+    device_id?:string,
+    source:string,
+    opt_in_url?:string,
+    referral_code?:string,
+    onAuthenticated: (access_token:string, refresh_token:string, expire_datetime:any) => void
+}
+
+const StrategyForm = ({ visible, auth_strategy_id, company_id, device_id, source, referral_code, width, opt_in_url, onAuthenticated }:StrategyFormProps) => {
+
+    const [ action_loading, setActionLoading ] = useState(false);
+    const [ active_view, setActiveView ] = useState('authenticate');
+    const [ opted_in, setOptedIn ] = useState(true);
+    const [ token, setToken ] = useState('');
+    const [ verify_error, setVerifyError ] = useState<string|undefined>();
+    const [ verify_attempt_allowed, setVeryAttemptAllowed ] = useState(true);
+    const [ authenticated, setAuthenticated ] = useState(false);
+    console.log(authenticated)
+    const [ auth_execution_request, setAuthExecutionRequest ] = useState<AuthExecutionRequestProps>({
+        auth_strategy_id: auth_strategy_id,
+        device_id,
+        source,
+        referral_code,
+        attributes: []
+    })
+    const [ verify_state, setVerifyState ] = useState<{
+        verification_session_id:string,
+        session_expire_datetime:any,
+        auth_strategy_identifier_id:string
+    } | undefined>(undefined)
+    const [ strategy, setStrategy ] = useState<{
+        loading:boolean,
+        company?:CompanyProps,
+        auth_strategy?:AuthStrategyProps,
+        auth_strategy_identifiers:AuthStrategyIdentifierProps[]
+    }>({
+        loading: false,
+        company:undefined,
+        auth_strategy:undefined,
+        auth_strategy_identifiers:[]
+    });
+
+    const { company, auth_strategy_identifiers } = strategy;
+    const verify_strategy_identifier = auth_strategy_identifiers.find(asi => asi.auth_strategy_identifier_id == verify_state?.auth_strategy_identifier_id);
+
+    useEffect(() => {
+        if(!auth_strategy_id || !visible){ return }
+        setUpWizard(auth_strategy_id)
+    },[auth_strategy_id, visible])
+
+    const setUpWizard = async(auth_strategy_id:string) => {
+        setStrategy({ ...strategy, loading:true });
+        //Get auth strategy from server
+        const { auth_strategy, auth_strategy_identifiers } = await AuthenticateApi.getAuthStrategyById(auth_strategy_id);
+        let company:CompanyProps|undefined = undefined
+        if(company_id){ 
+            const company_resp = await AuthenticateApi.getCompanyById(company_id)
+            company = company_resp.company 
+        }
+        let unique_attributes = auth_strategy_identifiers.map(asi => {
+            //if(!asi.auth_identifier){ return }
+            return { attribute: asi.auth_identifier?.attribute ?? '', value: '' }
+        })
+
+        setAuthExecutionRequest({
+            auth_strategy_id,
+            device_id,
+            source,
+            referral_code,
+            attributes: unique_attributes
+        })
+
+        setStrategy({
+            ...strategy,
+            auth_strategy,
+            company,
+            auth_strategy_identifiers,
+            loading:false
+        })
+    }
+
+    const verifyAuthStrategyIdentifier = async() => {
+        if(!verify_state){ return  }
+        if(action_loading){ return } //No mashy mashy
+        if(!verify_attempt_allowed){ return } 
+        setVeryAttemptAllowed(false);
+        setActionLoading(true);
+        const { result, access_token, refresh_token, expire_datetime } = await AuthenticateApi.verifyAuthStrategyIdentifier(verify_state.auth_strategy_identifier_id, verify_state.verification_session_id, token, device_id);
+        if(result == 'fail' || !access_token || !refresh_token){
+            setVerifyError(`Invalid code / password.  Please try again after 10 seconds`)
+            setTimeout(() => {
+                setVeryAttemptAllowed(true);
+                setVerifyError(undefined)
+            }, 10000);
+        } else {
+            setAuthenticated(true);
+            setTimeout(() => {
+                onAuthenticated(access_token, refresh_token, expire_datetime);
+            }, 1500);
+        }
+        setActionLoading(false);
+        
+        
+    }
+
+    const executeAuthStrategy = async() => {
+        setActionLoading(true);
+        const { result, verification_session_id, session_expire_datetime, auth_strategy_identifier_id } = await AuthenticateApi.executeAuthStrategy(auth_execution_request);
+        if(result == 'fail'){
+            setActionLoading(false);
+            return
+        }
+        setVerifyState({
+            verification_session_id,
+            session_expire_datetime,
+            auth_strategy_identifier_id
+        })
+        setActiveView('verify');
+        setActionLoading(false);
+    }
+
+    const renderAuthStrategyIdentifiers = (data: { item:AuthStrategyIdentifierProps, index: number }) => {
+        if(!data.item.auth_identifier){ return <></> }
+        const auth_request = auth_execution_request.attributes.find(a => a.attribute == data.item.auth_identifier?.attribute)
+        if(!auth_request){ return <></> }
+        const is_valid = AuthenticateHelpers.isAttributeValid(auth_request.attribute, auth_request.value)
+        return (
+            <View>
+                <View style={{ margin:10 }}>
+                    <Text size={16} color={Colors.brand.midnight} weight='bold'>{data.item.label}</Text>
+                    <Text style={{ marginTop:4 }} size={14} color={Colors.brand.midnight} weight='regular'>{data.item.description}</Text>
+                    <View style={{ marginTop:5, flexDirection:'row', alignItems:'center', borderRadius:22, borderWidth:1, borderColor:Colors.shades.shade600 }}>
+                        <TextInput
+                            style={{ flex:1 }}
+                            value={auth_request.pretty_value ?? auth_request.value}
+                            placeholder={`${data.item.label}`}
+                            autoFocus={data.item.priority == 1 ? true : false}
+                            placeholderTextColor={Colors.brand.slate}
+                            onChangeText={(text) => {
+                                let pretty_value:string | undefined = undefined
+                                if(auth_request.attribute == 'phone'){
+                                    text = AuthenticateHelpers.unformatPhone(text)
+                                    pretty_value = AuthenticateHelpers.formatPhone(text)
+                                }
+                                setAuthExecutionRequest({ 
+                                    ...auth_execution_request, 
+                                    attributes: auth_execution_request.attributes.filter(a => a.attribute != auth_request.attribute).concat({ 
+                                        attribute: auth_request.attribute, 
+                                        value: text,
+                                        pretty_value
+                                    }) 
+                                })
+                            }}
+                        />
+                        {auth_request.value ?
+                        <View style={{ padding:10 }}>
+                            { is_valid.valid ?
+                            <Icons.CheckCirlceIcon color={Colors.utility.success} size={14} />
+                            :
+                            <Icons.AlertIcon color={Colors.utility.warning} size={14} />
+                            }
+                        </View>
+                        :<></>}
+                    </View>
+                    {auth_request.value && !is_valid.valid ?
+                    <Text style={{ marginTop:2 }} size={12} color={Colors.utility.warning} weight='semibold' textAlign="right">{is_valid.error}</Text>
+                    :<></>}
+                </View>
+            </View>
+        )
+    }
+
+    const strategy_valid = AuthenticateHelpers.isStrategyValid(auth_execution_request)
+    if(!visible){ return <></> }
+    return (
+        <View>
+            {company ?
+            <View style={{ padding:20, flexDirection:'row', alignItems:'center', borderTopRightRadius:22, borderTopLeftRadius:22, borderBottomWidth:1, borderColor:Colors.accents.accent200 }}>
+                <View style={{ flex:1, marginRight:10 }}>
+                    <Text size={28} weight='bold' color={Colors.brand.midnight}>Welcome!</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} weight='semibold' textAlign='left'>Continue to sign up with BettorEdge</Text>
+                </View>
+                <View>
+                    <Image
+                        source={{ uri: company?.company_image?.url }}
+                        style={{ width: width * 0.15, height: width * 0.15, borderRadius:8 }}
+                        resizeMode='cover'
+                    />
+                </View>         
+            </View>
+            :<></>}
+            
+            {active_view == 'authenticate' ?
+            
+            <View nativeID="sign_up" style={{ flex:1 }}>
+                <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>
+                {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, padding:12,  borderRadius:8, 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={verify_attempt_allowed? '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