zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

StepInfo tweaks

zio/stable
Eric Bailey 2024-03-20 16:42:07 -05:00
parent aa239451af
commit bcffaffc07
2 changed files with 38 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/screens/Signup/StepInfo.tsx
View File

@ -2,19 +2,20 @@ 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 {Policies} from 'view/com/auth/create/Policies'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {is13, is18, useSignupContext} from '#/screens/Signup/state'
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 {is13, is18, useSignupContext} from '#/screens/Signup/state'
import * as DateField from '#/components/forms/DateField'
import {logger} from '#/logger'
import {Loader} from '#/components/Loader'
import {Policies} from 'view/com/auth/create/Policies'
import {HostingProvider} from '#/components/forms/HostingProvider'
import {FormError} from '#/components/forms/FormError'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
function sanitizeDate(date: Date): Date {
if (!date || date.toString() === 'Invalid Date') {
@ -32,7 +33,7 @@ export function StepInfo() {
return (
<ScreenTransition>
<View style={[a.gap_lg]}>
<View style={[a.gap_md]}>
<FormError error={state.error} />
<View>
<TextField.Label>

90
src/view/com/auth/create/Policies.tsx
View File

@ -1,50 +1,39 @@
import React from 'react'
import {Linking, StyleSheet, View} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {View} from 'react-native'
import {ComAtprotoServerDescribeServer} from '@atproto/api'
import {TextLink} from '../../util/Link'
import {Text} from '../../util/text/Text'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {Trans, msg} from '@lingui/macro'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
import {atoms as a, useTheme} from '#/alf'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {InlineLink} from '#/components/Link'
import {Text} from '#/components/Typography'
export const Policies = ({
serviceDescription,
needsGuardian,
under13,
}: {
serviceDescription: ServiceDescription
serviceDescription: ComAtprotoServerDescribeServer.OutputSchema
needsGuardian: boolean
under13: boolean
}) => {
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
if (!serviceDescription) {
return <View />
}
const tos = validWebLink(serviceDescription.links?.termsOfService)
const pp = validWebLink(serviceDescription.links?.privacyPolicy)
if (!tos && !pp) {
return (
<View style={[styles.policies, {flexDirection: 'row'}]}>
<View
style={[
styles.errorIcon,
{borderColor: pal.colors.text, marginTop: 1},
]}>
<FontAwesomeIcon
icon="exclamation"
style={pal.textLight as FontAwesomeIconStyle}
size={10}
/>
</View>
<Text style={[pal.textLight, s.pl5, s.flex1]}>
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
<CircleInfo size="md" fill={t.atoms.text_contrast_low.color} />
<Text style={[t.atoms.text_contrast_medium]}>
<Trans>
This service has not provided terms of service or a privacy policy.
</Trans>
@ -52,50 +41,45 @@ export const Policies = ({
</View>
)
}
const els = []
if (tos) {
els.push(
<TextLink
key="tos"
href={tos}
text={_(msg`Terms of Service`)}
style={[pal.link, s.underline]}
onPress={() => Linking.openURL(tos)}
/>,
<InlineLink key="tos" to={tos}>
{_(msg`Terms of Service`)}
</InlineLink>,
)
}
if (pp) {
els.push(
<TextLink
key="pp"
href={pp}
text={_(msg`Privacy Policy`)}
style={[pal.link, s.underline]}
onPress={() => Linking.openURL(pp)}
/>,
<InlineLink key="pp" to={pp}>
{_(msg`Privacy Policy`)}
</InlineLink>,
)
}
if (els.length === 2) {
els.splice(
1,
0,
<Text key="and" style={pal.textLight}>
<Text key="and" style={[t.atoms.text_contrast_medium]}>
{' '}
and{' '}
</Text>,
)
}
return (
<View style={styles.policies}>
<Text style={pal.textLight}>
<View style={[a.gap_sm]}>
<Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
<Trans>By creating an account you agree to the {els}.</Trans>
</Text>
{under13 ? (
<Text style={[pal.textLight, s.bold]}>
<Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
You must be 13 years of age or older to sign up.
</Text>
) : needsGuardian ? (
<Text style={[pal.textLight, s.bold]}>
<Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
<Trans>
If you are not yet an adult according to the laws of your country,
your parent or legal guardian must read these Terms on your behalf.
@ -111,19 +95,3 @@ function validWebLink(url?: string): string | undefined {
? url
: undefined
}
const styles = StyleSheet.create({
policies: {
flexDirection: 'column',
gap: 8,
},
errorIcon: {
borderWidth: 1,
borderColor: colors.white,
borderRadius: 30,
width: 16,
height: 16,
alignItems: 'center',
justifyContent: 'center',
},
})