Add 'is 13' checkbox to account creation

zio/stable
Paul Frazee 2023-01-03 11:49:40 -06:00
parent 147b85c7fb
commit 06de0129af
1 changed files with 57 additions and 3 deletions

View File

@ -15,6 +15,7 @@ import * as EmailValidator from 'email-validator'
import {Logo} from './Logo' import {Logo} from './Logo'
import {Picker} from '../util/Picker' import {Picker} from '../util/Picker'
import {TextLink} from '../util/Link' import {TextLink} from '../util/Link'
import {ToggleButton} from '../util/forms/ToggleButton'
import {Text} from '../util/text/Text' import {Text} from '../util/text/Text'
import {s, colors} from '../../lib/styles' import {s, colors} from '../../lib/styles'
import { import {
@ -39,6 +40,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
const [email, setEmail] = useState<string>('') const [email, setEmail] = useState<string>('')
const [password, setPassword] = useState<string>('') const [password, setPassword] = useState<string>('')
const [handle, setHandle] = useState<string>('') const [handle, setHandle] = useState<string>('')
const [is13, setIs13] = useState<boolean>(false)
useEffect(() => { useEffect(() => {
let aborted = false let aborted = false
@ -128,6 +130,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
if (tos) { if (tos) {
els.push( els.push(
<TextLink <TextLink
key="tos"
href={tos} href={tos}
text="Terms of Service" text="Terms of Service"
style={[s.white, s.underline]} style={[s.white, s.underline]}
@ -137,6 +140,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
if (pp) { if (pp) {
els.push( els.push(
<TextLink <TextLink
key="pp"
href={pp} href={pp}
text="Privacy Policy" text="Privacy Policy"
style={[s.white, s.underline]} style={[s.white, s.underline]}
@ -144,7 +148,14 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
) )
} }
if (els.length === 2) { if (els.length === 2) {
els.splice(1, 0, <Text style={s.white}> and </Text>) els.splice(
1,
0,
<Text key="and" style={s.white}>
{' '}
and{' '}
</Text>,
)
} }
return ( return (
<View style={styles.policies}> <View style={styles.policies}>
@ -155,6 +166,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
) )
} }
const isReady = !!email && !!password && !!handle && is13
return ( return (
<ScrollView style={{flex: 1}}> <ScrollView style={{flex: 1}}>
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}> <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
@ -296,15 +308,34 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
</Text> </Text>
</View> </View>
</View> </View>
<View style={[styles.group]}>
<View style={styles.groupTitle}>
<Text style={[s.white, s.f18, s.bold]}>Legal</Text>
</View>
<View style={styles.groupContent}>
<TouchableOpacity
style={styles.textBtn}
onPress={() => setIs13(!is13)}>
<View style={is13 ? styles.checkboxFilled : styles.checkbox}>
{is13 && (
<FontAwesomeIcon icon="check" style={s.blue3} size={14} />
)}
</View>
<Text style={[styles.textBtnLabel, s.f16]}>
I am 13 years old or older
</Text>
</TouchableOpacity>
</View>
</View>
<Policies /> <Policies />
</> </>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.pl20, s.pr20, {paddingBottom: 200}]}> <View style={[s.flexRow, s.pl20, s.pr20]}>
<TouchableOpacity onPress={onPressBack}> <TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text> <Text style={[s.white, s.f18, s.pl5]}>Back</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={s.flex1} /> <View style={s.flex1} />
{serviceDescription ? ( {isReady ? (
<TouchableOpacity onPress={onPressNext}> <TouchableOpacity onPress={onPressNext}>
{isProcessing ? ( {isProcessing ? (
<ActivityIndicator color="#fff" /> <ActivityIndicator color="#fff" />
@ -312,8 +343,14 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text> <Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
)} )}
</TouchableOpacity> </TouchableOpacity>
) : !serviceDescription ? (
<>
<ActivityIndicator color="#fff" />
<Text style={[s.white, s.f18, s.pl5, s.pr5]}>Connecting...</Text>
</>
) : undefined} ) : undefined}
</View> </View>
<View style={{height: 100}} />
</KeyboardAvoidingView> </KeyboardAvoidingView>
</ScrollView> </ScrollView>
) )
@ -409,6 +446,23 @@ const styles = StyleSheet.create({
pickerIcon: { pickerIcon: {
color: colors.white, color: colors.white,
}, },
checkbox: {
borderWidth: 1,
borderColor: colors.white,
borderRadius: 2,
width: 16,
height: 16,
marginLeft: 16,
},
checkboxFilled: {
borderWidth: 1,
borderColor: colors.white,
backgroundColor: colors.white,
borderRadius: 2,
width: 16,
height: 16,
marginLeft: 16,
},
policies: { policies: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'flex-start', alignItems: 'flex-start',