forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add 'is 13' checkbox to account creation
+57
-3
+57
-3
src/view/com/login/CreateAccount.tsx
+57
-3
src/view/com/login/CreateAccount.tsx
···
15
15
import {Logo} from './Logo'
16
16
import {Picker} from '../util/Picker'
17
17
import {TextLink} from '../util/Link'
18
+
import {ToggleButton} from '../util/forms/ToggleButton'
18
19
import {Text} from '../util/text/Text'
19
20
import {s, colors} from '../../lib/styles'
20
21
import {
···
39
40
const [email, setEmail] = useState<string>('')
40
41
const [password, setPassword] = useState<string>('')
41
42
const [handle, setHandle] = useState<string>('')
43
+
const [is13, setIs13] = useState<boolean>(false)
42
44
43
45
useEffect(() => {
44
46
let aborted = false
···
128
130
if (tos) {
129
131
els.push(
130
132
<TextLink
133
+
key="tos"
131
134
href={tos}
132
135
text="Terms of Service"
133
136
style={[s.white, s.underline]}
···
137
140
if (pp) {
138
141
els.push(
139
142
<TextLink
143
+
key="pp"
140
144
href={pp}
141
145
text="Privacy Policy"
142
146
style={[s.white, s.underline]}
···
144
148
)
145
149
}
146
150
if (els.length === 2) {
147
-
els.splice(1, 0, <Text style={s.white}> and </Text>)
151
+
els.splice(
152
+
1,
153
+
0,
154
+
<Text key="and" style={s.white}>
155
+
{' '}
156
+
and{' '}
157
+
</Text>,
158
+
)
148
159
}
149
160
return (
150
161
<View style={styles.policies}>
···
155
166
)
156
167
}
157
168
169
+
const isReady = !!email && !!password && !!handle && is13
158
170
return (
159
171
<ScrollView style={{flex: 1}}>
160
172
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
···
296
308
</Text>
297
309
</View>
298
310
</View>
311
+
<View style={[styles.group]}>
312
+
<View style={styles.groupTitle}>
313
+
<Text style={[s.white, s.f18, s.bold]}>Legal</Text>
314
+
</View>
315
+
<View style={styles.groupContent}>
316
+
<TouchableOpacity
317
+
style={styles.textBtn}
318
+
onPress={() => setIs13(!is13)}>
319
+
<View style={is13 ? styles.checkboxFilled : styles.checkbox}>
320
+
{is13 && (
321
+
<FontAwesomeIcon icon="check" style={s.blue3} size={14} />
322
+
)}
323
+
</View>
324
+
<Text style={[styles.textBtnLabel, s.f16]}>
325
+
I am 13 years old or older
326
+
</Text>
327
+
</TouchableOpacity>
328
+
</View>
329
+
</View>
299
330
<Policies />
300
331
</>
301
332
) : undefined}
302
-
<View style={[s.flexRow, s.pl20, s.pr20, {paddingBottom: 200}]}>
333
+
<View style={[s.flexRow, s.pl20, s.pr20]}>
303
334
<TouchableOpacity onPress={onPressBack}>
304
335
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
305
336
</TouchableOpacity>
306
337
<View style={s.flex1} />
307
-
{serviceDescription ? (
338
+
{isReady ? (
308
339
<TouchableOpacity onPress={onPressNext}>
309
340
{isProcessing ? (
310
341
<ActivityIndicator color="#fff" />
···
312
343
<Text style={[s.white, s.f18, s.bold, s.pr5]}>Next</Text>
313
344
)}
314
345
</TouchableOpacity>
346
+
) : !serviceDescription ? (
347
+
<>
348
+
<ActivityIndicator color="#fff" />
349
+
<Text style={[s.white, s.f18, s.pl5, s.pr5]}>Connecting...</Text>
350
+
</>
315
351
) : undefined}
316
352
</View>
353
+
<View style={{height: 100}} />
317
354
</KeyboardAvoidingView>
318
355
</ScrollView>
319
356
)
···
408
445
},
409
446
pickerIcon: {
410
447
color: colors.white,
448
+
},
449
+
checkbox: {
450
+
borderWidth: 1,
451
+
borderColor: colors.white,
452
+
borderRadius: 2,
453
+
width: 16,
454
+
height: 16,
455
+
marginLeft: 16,
456
+
},
457
+
checkboxFilled: {
458
+
borderWidth: 1,
459
+
borderColor: colors.white,
460
+
backgroundColor: colors.white,
461
+
borderRadius: 2,
462
+
width: 16,
463
+
height: 16,
464
+
marginLeft: 16,
411
465
},
412
466
policies: {
413
467
flexDirection: 'row',