146 lines
5 KiB
TypeScript
146 lines
5 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {logger} from '#/logger'
|
|
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
|
|
import {is13, is18, useSignupContext} from '#/screens/Signup/state'
|
|
import {Policies} from '#/screens/Signup/StepInfo/Policies'
|
|
import {atoms as a} from '#/alf'
|
|
import * as DateField from '#/components/forms/DateField'
|
|
import {FormError} from '#/components/forms/FormError'
|
|
import {HostingProvider} from '#/components/forms/HostingProvider'
|
|
import * as TextField from '#/components/forms/TextField'
|
|
import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
|
|
import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
|
|
import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
|
|
import {Loader} from '#/components/Loader'
|
|
|
|
function sanitizeDate(date: Date): Date {
|
|
if (!date || date.toString() === 'Invalid Date') {
|
|
logger.error(`Create account: handled invalid date for birthDate`, {
|
|
hasDate: !!date,
|
|
})
|
|
return new Date()
|
|
}
|
|
return date
|
|
}
|
|
|
|
export function StepInfo() {
|
|
const {_} = useLingui()
|
|
const {state, dispatch} = useSignupContext()
|
|
|
|
return (
|
|
<ScreenTransition>
|
|
<View style={[a.gap_md]}>
|
|
<FormError error={state.error} />
|
|
<View>
|
|
<TextField.Label>
|
|
<Trans>Hosting provider</Trans>
|
|
</TextField.Label>
|
|
<HostingProvider
|
|
serviceUrl={state.serviceUrl}
|
|
onSelectServiceUrl={v =>
|
|
dispatch({type: 'setServiceUrl', value: v})
|
|
}
|
|
/>
|
|
</View>
|
|
{state.isLoading ? (
|
|
<View style={[a.align_center]}>
|
|
<Loader size="xl" />
|
|
</View>
|
|
) : state.serviceDescription ? (
|
|
<>
|
|
{state.serviceDescription.inviteCodeRequired && (
|
|
<View>
|
|
<TextField.Label>
|
|
<Trans>Invite code</Trans>
|
|
</TextField.Label>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={Ticket} />
|
|
<TextField.Input
|
|
onChangeText={value => {
|
|
dispatch({
|
|
type: 'setInviteCode',
|
|
value: value.trim(),
|
|
})
|
|
}}
|
|
label={_(msg`Required for this provider`)}
|
|
defaultValue={state.inviteCode}
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
keyboardType="email-address"
|
|
/>
|
|
</TextField.Root>
|
|
</View>
|
|
)}
|
|
<View>
|
|
<TextField.Label>
|
|
<Trans>Email</Trans>
|
|
</TextField.Label>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={Envelope} />
|
|
<TextField.Input
|
|
onChangeText={value => {
|
|
dispatch({
|
|
type: 'setEmail',
|
|
value: value.trim(),
|
|
})
|
|
}}
|
|
label={_(msg`Enter your email address`)}
|
|
defaultValue={state.email}
|
|
autoCapitalize="none"
|
|
autoComplete="email"
|
|
keyboardType="email-address"
|
|
/>
|
|
</TextField.Root>
|
|
</View>
|
|
<View>
|
|
<TextField.Label>
|
|
<Trans>Password</Trans>
|
|
</TextField.Label>
|
|
<TextField.Root>
|
|
<TextField.Icon icon={Lock} />
|
|
<TextField.Input
|
|
onChangeText={value => {
|
|
dispatch({
|
|
type: 'setPassword',
|
|
value,
|
|
})
|
|
}}
|
|
label={_(msg`Choose your password`)}
|
|
defaultValue={state.password}
|
|
secureTextEntry
|
|
autoComplete="new-password"
|
|
/>
|
|
</TextField.Root>
|
|
</View>
|
|
<View>
|
|
<DateField.Label>
|
|
<Trans>Your birth date</Trans>
|
|
</DateField.Label>
|
|
<DateField.DateField
|
|
testID="date"
|
|
value={DateField.utils.toSimpleDateString(state.dateOfBirth)}
|
|
onChangeDate={date => {
|
|
dispatch({
|
|
type: 'setDateOfBirth',
|
|
value: sanitizeDate(new Date(date)),
|
|
})
|
|
}}
|
|
label={_(msg`Date of birth`)}
|
|
accessibilityHint={_(msg`Select your date of birth`)}
|
|
/>
|
|
</View>
|
|
<Policies
|
|
serviceDescription={state.serviceDescription}
|
|
needsGuardian={!is18(state.dateOfBirth)}
|
|
under13={!is13(state.dateOfBirth)}
|
|
/>
|
|
</>
|
|
) : undefined}
|
|
</View>
|
|
</ScreenTransition>
|
|
)
|
|
}
|