be-components 0.1.2 → 0.1.3

package/src/ProfileManager/Components/EmailManager.tsx

@@ -0,0 +1,205 @@
+
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps } from '../api/types';
+import { view_styles } from '../../constants/styles';
+import { ProfileApi, ProfileHelpers } from '../api';
+
+
+type EmailManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onClose:() => void,
+    onNext:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const EmailManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:EmailManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ verify_token, setVerifyToken ] = useState({
+        loading:false,
+        visible: false,
+        token: ''
+    })
+    const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player)
+    const [ update_error, setUpdateError ] = useState<string>();
+    const [ verify_error, setVerifyError ] = useState<string>();
+
+    useEffect(() => {
+        setDraftPlayer(player);
+    },[player])
+
+    const { valid, error } = ProfileHelpers.isEmailValid(draft_player.email)
+
+    const is_changed = draft_player.email?.toLowerCase() != player.email?.toLowerCase() ? true : false
+    const token_valid = verify_token.token != '' ? true : false
+    const update_allowed = valid && is_changed ? true : false
+    const handleUpdatePlayer = async() => {
+        try {
+            setLoading(true);
+            await ProfileApi.updatePlayerEmail(draft_player.email);
+            setTimeout(() => {
+                setLoading(false);
+                setVerifyToken({
+                    loading:false,
+                    visible:true,
+                    token: ''
+                })
+            }, 1000);
+        } catch (e) {
+            setLoading(false);
+            setUpdateError('Unable to use this email.  Please try again')
+        }
+    }
+
+    const handleVerifyEmail = async() => {
+        try {
+            console.log(update_error, verify_error)
+            setVerifyToken({ ...verify_token, loading:true });
+            const player = await ProfileApi.confirmPlayerEmail(verify_token.token);
+            setTimeout(() => {
+                setLoading(false);
+                setVerifyToken({
+                    loading:false,
+                    visible:false,
+                    token: ''
+                })
+                if(onNext){ onNext() }
+            }, 1000);
+            onPlayerUpdate(player)
+        } catch (e) {
+            setVerifyToken({ ...verify_token, loading:false });
+            setVerifyError('Invalid Token.  Please try again')
+        }
+    }
+
+    const handleCancelUpdate = () => {
+        setVerifyToken({ visible:false, loading:false, token: '' })
+        setDraftPlayer(player)
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+                <View style={{ flex:1 }}>
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>My Email Address</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>A valid email is required to verify your account</Text>
+                </View>
+                <View style={{ padding:10 }}>
+                    <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            <Icons.EmailIcon
+                                color={Colors.brand.midnight}
+                                size={18}
+                            />
+                        </View>
+                        <TextInput
+                            value={draft_player.email}
+                            keyboardType='email-address'
+                            style={{ flex:1, borderRadius:0 }}
+                            onChangeText={(text) => setDraftPlayer({ ...draft_player, email: text })}
+                        />
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            {loading ?
+                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                            :
+                            <View>
+                                { valid ?
+                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                : verify_token.visible ?
+                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                :
+                                <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                }
+                            </View>
+                            }
+                        </View>
+                    </View>
+                    {error ?
+                    <Text size={14} color={Colors.utility.warning}>{error}</Text>
+                    :<></>}
+                </View>
+                </View>
+
+
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                {!is_changed && player.verified ?
+                <Button
+                    title='CONFIRM MY PHONE'
+                    style={{ flex:3 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onNext()}
+                />
+                :
+                <Button
+                    title='NEXT'
+                    style={{ flex:3, opacity:update_allowed ? 1 : 0.5 }}
+                    padding={15}
+                    disabled={!update_allowed}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleUpdatePlayer()}
+                />
+                }
+            </View>
+            {verify_token.visible ?
+                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ padding:20, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                        <View style={{ padding:10 }}>
+                            <Text size={14} weight='semibold' color={Colors.brand.midnight} textAlign='center'>Enter Code Sent To</Text>
+                            <Text size={18} style={{ marginTop:10 }} weight='bold' color={Colors.brand.midnight} textAlign='center'>{draft_player.email}</Text>
+                        </View>
+                        <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                            
+                            <TextInput
+                                value={verify_token.token}
+                                textContentType='oneTimeCode'
+                                style={{ flex:1}}
+                                placeholder='00000'
+                                placeholderTextColor={Colors.brand.slate}
+                                onChangeText={(text) => setVerifyToken({ ...verify_token, token: text })}
+                            />
+                        </View>
+                        <Button
+                            title='CONFIRM'
+                            style={{ marginTop:20, opacity:token_valid && !loading ? 1 : 0.5 }}
+                            disabled={!token_valid || loading}
+                            padding={15}
+                            loading={verify_token.loading}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.utility.success}
+                            onPress={() => handleVerifyEmail()}
+                        />
+                        <Button
+                            title='CANCEL'
+                            style={{ marginTop:10 }}
+                            disabled={loading}
+                            padding={15}
+                            loading={verify_token.loading}
+                            title_color={Colors.brand.electric}
+                            borderWidth={1}
+                            borderColor={Colors.brand.electric}
+                            onPress={() => handleCancelUpdate()}
+                        />
+                    </View>
+                </View>
+                :<></>}
+        </View>
+    )
+}
+
+export default EmailManager

package/src/ProfileManager/Components/PasswordManager.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react';
+import { View, FlatList } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import type { MyPlayerProps, PasswordStateProps } from '../api/types';
+import Colors from '../../constants/colors';
+import { ProfileApi, ProfileHelpers } from '../api';
+
+type PasswordManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onNext:() => void,
+    onClose:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const PasswordManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:PasswordManagerProps) => {
+    const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player);
+    const [ draft_password, setDraftPassword ] = useState({
+        change_visible:false,
+        loading:false,
+        current_password: '',
+        password: '',
+        re_password: ''
+    })
+ 
+    const { loading, change_visible, password, re_password, current_password } = draft_password;
+
+    useEffect(() => {
+        setDraftPlayer(player)
+    },[player])
+
+
+    let password_states:PasswordStateProps[] = [ 
+        { attribute:'password', type:'min_character', state: 'not_started', label:'At least 8 characters' }, 
+        { attribute:'password', type: 'case', state:'not_started', label:'Uppercase and lowercase character' }, 
+        { attribute:'password', type:'number', state:'not_started', label: 'Must use a number' }, 
+        { attribute:'password', type:'special', state:'not_started', label: 'Includes at least 1 special character' },
+        { attribute:'rePassword', type:'special', state:'not_started', label: 'Passwords do not match' },
+    ]
+
+    const validatePassword = () => {
+        let valid_states:PasswordStateProps[] = []
+        password_states.map(ps => {
+            if(ps.attribute == 'rePassword'){
+                if(re_password != password){
+                    valid_states.push({ ...ps, state: 'invalid' })
+                } else {
+                    valid_states.push({ ...ps, state: 'valid' })
+                }
+            } else {
+                valid_states.push(ProfileHelpers.isPasswordValid(password, ps))
+            }
+        })
+        return valid_states
+    }
+
+
+
+    /**
+     * Flatlist render function to render all the password statuses and their states
+     * @param data 
+     * @returns 
+     */
+    const renderPasswordStatuses = (data: { item:PasswordStateProps, index:number }) => {
+        return (
+            <View style={{flex:1, flexDirection:'row', alignItems:'center', padding:8}}>
+                <Text style={{ flex:1}} size={14} color={Colors.brand.midnight}>{data.item.label}</Text>
+                {data.item.state === 'valid' ?
+                <Icons.CheckCirlceIcon size={14} color={Colors.utility.success} />
+                :
+                <Icons.AlertIcon size={14} color={Colors.utility.warning} />
+                }
+            </View>
+        )
+    }
+
+    const valid_states = validatePassword()
+    const is_valid = !valid_states.find(vs => ['invalid'].includes(vs.state)) ? true : false
+
+
+    const handleSetPassword = async() => {
+        if(!password){ return onNext() }
+        setDraftPassword({ ...draft_password, loading:true })
+        const player = await ProfileApi.setPassword(password, re_password, current_password)
+        onPlayerUpdate(player);
+        setTimeout(() => {
+            setDraftPassword({ current_password:'', change_visible: false, loading:false, password: '', re_password: '' })
+            if(walkthrough){ onNext() }
+        }, 500);
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            {draft_player.no_password || change_visible ?
+            <View style={{ flex:1 }}>
+                <View style={{ padding:10 }}>
+                    <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>{draft_player.no_password ? 'SET MY PASSWORD': 'CHANGE MY PASSWORD'}</Text>
+                    <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>Help up secure your account with a password. Once set, you can login using your username and password</Text>
+                </View>
+                {!draft_player.no_password ?
+                <View style={{ margin:10, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Icons.LockClosedIcon
+                            color={Colors.brand.midnight}
+                            size={18}
+                        />
+                    </View>
+                    <TextInput
+                        value={draft_password.current_password}
+                        placeholder='My Current Password'
+                        secureTextEntry
+                        placeholderTextColor={Colors.brand.slate}
+                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        onChangeText={(text) => setDraftPassword({ ...draft_password, current_password : text })}
+                    />
+                </View>
+                :<></>}
+                <View style={{ margin:10, marginTop:0, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Icons.LockClosedIcon
+                            color={Colors.brand.midnight}
+                            size={18}
+                        />
+                    </View>
+                    <TextInput
+                        value={draft_password.password}
+                        placeholder='Enter Password'
+                        secureTextEntry
+                        placeholderTextColor={Colors.brand.slate}
+                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        onChangeText={(text) => setDraftPassword({ ...draft_password, password : text })}
+                    />
+                </View>
+                <View style={{ margin:10, marginTop:0, backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                    <View style={{ paddingLeft:15, paddingRight:15 }}>
+                        <Icons.LockClosedIcon
+                            color={Colors.brand.midnight}
+                            size={18}
+                        />
+                    </View>
+                    <TextInput
+                        value={draft_password.re_password}
+                        placeholder='Re-Enter Password'
+                        secureTextEntry
+                        placeholderTextColor={Colors.brand.slate}
+                        style={{ flex:1, borderTopLeftRadius:0, borderBottomLeftRadius:0 }}
+                        onChangeText={(text) => setDraftPassword({ ...draft_password, re_password : text })}
+                    />
+                </View>
+                <View style={{ padding:10 }}>
+                    <FlatList data={valid_states} renderItem={renderPasswordStatuses} keyExtractor={(item) => item.type??item.attribute}/>
+                </View>
+
+            </View>
+            :
+            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
+                <View style={{ borderRadius:8, backgroundColor:Colors.shades.shade600, justifyContent:'center', alignItems:'center', padding:30 }}>
+                    
+                    <Text style={{ marginBottom:30 }} size={24} color={Colors.brand.midnight} weight='bold'>Password Set</Text>
+                    
+                    <Icons.LockClosedIcon size={40} color={Colors.utility.success} />
+                    <Button
+                        title='CHANGE'
+                        style={{ marginTop:20, padding:15, paddingLeft:40, paddingRight:40 }}
+                        
+                        title_color={Colors.shades.white}
+                        backgroundColor={Colors.brand.electric}
+                        onPress={() => setDraftPassword({ ...draft_password, change_visible: true })}
+                    />
+                </View>
+            </View>
+            }
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                <Button
+                    title={'NEXT'}
+                    style={{ flex:3, opacity:is_valid ? 1 : 0.5 }}
+                    padding={15}
+                    loading={loading}
+                    disabled={!is_valid}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleSetPassword()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default PasswordManager

package/src/ProfileManager/Components/PhoneManager.tsx

@@ -0,0 +1,210 @@
+
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { Button, Icons, Text, TextInput } from '../../Components';
+import Colors from '../../constants/colors';
+import type { MyPlayerProps } from '../api/types';
+import { view_styles } from '../../constants/styles';
+import { ProfileApi, ProfileHelpers } from '../api';
+
+
+type PhoneManagerProps = {
+    player:MyPlayerProps,
+    walkthrough?:boolean,
+    onNext:() => void,
+    onClose:() => void,
+    onPlayerUpdate:(player:MyPlayerProps) => void
+}
+
+const PhoneManager = ({ player, walkthrough, onPlayerUpdate, onNext, onClose }:PhoneManagerProps) => {
+    const [ loading, setLoading ] = useState(false);
+    const [ verify_token, setVerifyToken ] = useState({
+        loading:false,
+        visible: false,
+        token: ''
+    })
+    const [ draft_player, setDraftPlayer ] = useState<MyPlayerProps>(player)
+    const [ update_error, setUpdateError ] = useState<string>();
+    const [ verify_error, setVerifyError ] = useState<string>();
+
+    useEffect(() => {
+        setDraftPlayer(player);
+    },[player])
+
+
+    const handlePhoneChange = (text:string) => {
+        let phone = ProfileHelpers.unformatPhone(text)
+        setDraftPlayer({ ...draft_player, phone })
+    }
+
+    const { valid, error } = ProfileHelpers.isPhoneValid(draft_player.phone)
+
+    const is_changed = draft_player.phone.toLowerCase() != player.phone.toLowerCase() ? true : false
+    const token_valid = verify_token.token != '' ? true : false
+    const update_allowed = valid && is_changed ? true : false
+    const handleUpdatePlayer = async() => {
+        try {
+            console.log(update_error, verify_error)
+            setLoading(true);
+            await ProfileApi.updatePlayerPhone(draft_player.phone);
+            setTimeout(() => {
+                setLoading(false);
+                setVerifyToken({
+                    loading:false,
+                    visible:true,
+                    token: ''
+                })
+            }, 1000);
+        } catch (e) {
+            setLoading(false);
+            setUpdateError('Unable to use this phone number.  Please try again')
+        }
+    }
+
+    const handleVerifyPhone = async() => {
+        try {
+            setVerifyToken({ ...verify_token, loading:true });
+            const player = await ProfileApi.confirmPlayerPhone(verify_token.token);
+            setTimeout(() => {
+                setLoading(false);
+                setVerifyToken({
+                    loading:false,
+                    visible:false,
+                    token: ''
+                })
+                if(onNext){ onNext() }
+            }, 1000);
+            onPlayerUpdate(player)
+        } catch (e) {
+            setVerifyToken({ ...verify_token, loading:false });
+            setVerifyError('Invalid Token.  Please try again')
+        }
+    }
+
+    const handleCancelUpdate = () => {
+        setVerifyToken({ visible:false, loading:false, token: '' })
+        setDraftPlayer(player)
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }}>
+                    <View style={{ padding:10 }}>
+                        <Text weight='bold' size={16} textAlign='left' color={Colors.brand.midnight}>My Phone Number</Text>
+                        <Text style={{ marginTop:5 }} color={Colors.brand.midnight} size={14} textAlign='left'>A valid phone number is required to verify your account</Text>
+                    </View>
+                    <View style={{ padding:10 }}>
+
+                    <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            <Icons.PhoneIcon
+                                color={Colors.brand.midnight}
+                                size={18}
+                            />
+                        </View>
+                        <TextInput
+                            value={ProfileHelpers.formatPhone(draft_player.phone)}
+                            keyboardType='phone-pad'
+                            style={{ flex:1, borderRadius:0 }}
+                            onChangeText={(text) => handlePhoneChange(text)}
+                        />
+                        <View style={{ paddingLeft:15, paddingRight:15 }}>
+                            {loading ?
+                            <ActivityIndicator size='small' color={Colors.brand.midnight}/>
+                            :
+                            <View>
+                                { valid ?
+                                <Icons.CheckIcon size={16} color={Colors.utility.success} />
+                                : verify_token.visible ?
+                                <Icons.AlertIcon size={16} color={Colors.utility.warning} />
+                                :
+                                <Icons.CloseIcon size={14} color={Colors.utility.error} />
+                                }
+                            </View>
+                            }
+                        </View>
+                    </View>
+                    </View>
+                    {error ?
+                    <Text size={14} color={Colors.utility.warning}>{error}</Text>
+                    :<></>}
+                </View>
+            <View nativeID='action_row' style={{ flexDirection:'row', padding:10 }}>
+                <Button
+                    title={walkthrough ? 'SKIP' : 'CLOSE'}
+                    style={{ flex:1, marginRight:5 }}
+                    borderColor={Colors.brand.electric}
+                    title_color={Colors.brand.electric}
+                    borderWidth={1}
+                    padding={15}
+                    onPress={() => walkthrough ? onNext() : onClose()}
+                />
+                {!is_changed && player.phone_verified ?
+                <Button
+                    title='SET MY DATE OF BIRTH'
+                    style={{ flex:3 }}
+                    padding={15}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => onNext()}
+                />
+                :
+                <Button
+                    title='UPDATE'
+                    style={{ flex:3, opacity:update_allowed ? 1 : 0.5 }}
+                    padding={15}
+                    disabled={!update_allowed}
+                    backgroundColor={Colors.utility.success}
+                    title_color={Colors.shades.white}
+                    onPress={() => handleUpdatePlayer()}
+                />
+                }
+            </View>
+            {verify_token.visible ?
+                <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                    <View style={{ padding:20, backgroundColor:Colors.shades.white, borderRadius:8, ...view_styles.float }}>
+                        <View style={{ padding:10 }}>
+                            <Text size={14} weight='semibold' color={Colors.brand.midnight} textAlign='center'>Enter Code Sent To</Text>
+                            <Text size={18} style={{ marginTop:10 }} weight='bold' color={Colors.brand.midnight} textAlign='center'>{draft_player.phone}</Text>
+                        </View>
+                        <View style={{ backgroundColor:Colors.shades.white, borderRadius:22, flexDirection:'row', alignItems:'center' }}>
+                            
+                            <TextInput
+                                value={verify_token.token}
+                                textContentType='oneTimeCode'
+                                style={{ flex:1}}
+                                placeholder='00000'
+                                placeholderTextColor={Colors.brand.slate}
+                                onChangeText={(text) => setVerifyToken({ ...verify_token, token: text })}
+                            />
+                        </View>
+                        <Button
+                            title='CONFIRM'
+                            style={{ marginTop:20, opacity:token_valid && !loading ? 1 : 0.5 }}
+                            disabled={!token_valid || loading}
+                            padding={15}
+                            loading={verify_token.loading}
+                            title_color={Colors.shades.white}
+                            backgroundColor={Colors.utility.success}
+                            onPress={() => handleVerifyPhone()}
+                        />
+                        <Button
+                            title='CANCEL'
+                            style={{ marginTop:10 }}
+                            disabled={loading}
+                            padding={15}
+                            loading={verify_token.loading}
+                            title_color={Colors.brand.electric}
+                            borderWidth={1}
+                            borderColor={Colors.brand.electric}
+                            onPress={() => handleCancelUpdate()}
+                        />
+                    </View>
+                </View>
+                :<></>}
+        </View>
+    )
+}
+
+export default PhoneManager