Implement terms-of-service and privacy-policy links in signup

zio/stable
Paul Frazee 2022-12-06 11:39:46 -06:00
parent 5c1519b9ee
commit d60de5e214
2 changed files with 66 additions and 0 deletions

View File

@ -68,6 +68,9 @@ export const s = StyleSheet.create({
light: {fontWeight: '300'},
fw200: {fontWeight: '200'},
// text decoration
underline: {textDecorationLine: 'underline'},
// font sizes
f9: {fontSize: 9},
f10: {fontSize: 10},

View File

@ -15,6 +15,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import * as EmailValidator from 'email-validator'
import {observer} from 'mobx-react-lite'
import {Picker} from '../com/util/Picker'
import {TextLink} from '../com/util/Link'
import {s, colors} from '../lib/styles'
import {
makeValidHandle,
@ -370,6 +371,55 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
</>
)
const Policies = () => {
if (!serviceDescription) {
return <View />
}
const tos = validWebLink(serviceDescription.links?.termsOfService)
const pp = validWebLink(serviceDescription.links?.privacyPolicy)
if (!tos && !pp) {
return (
<View style={styles.policies}>
<View style={[styles.errorIcon, s.mt2]}>
<FontAwesomeIcon icon="exclamation" style={s.white} size={10} />
</View>
<Text style={[s.white, s.pl5, s.flex1]}>
This service has not provided terms of service or a privacy policy.
</Text>
</View>
)
}
const els = []
if (tos) {
els.push(
<TextLink
href={tos}
text="Terms of Service"
style={[s.white, s.underline]}
/>,
)
}
if (pp) {
els.push(
<TextLink
href={pp}
text="Privacy Policy"
style={[s.white, s.underline]}
/>,
)
}
if (els.length === 2) {
els.splice(1, 0, <Text style={s.white}> and </Text>)
}
return (
<View style={styles.policies}>
<Text style={s.white}>
By creating an account you agree to the {els}.
</Text>
</View>
)
}
return (
<ScrollView style={{flex: 1}}>
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
@ -510,6 +560,7 @@ const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => {
</Text>
</View>
</View>
<Policies />
<View style={[s.flexRow, s.pl20, s.pr20, {paddingBottom: 200}]}>
<TouchableOpacity onPress={onPressBack}>
<Text style={[s.white, s.f18, s.pl5]}>Back</Text>
@ -567,6 +618,12 @@ export const Login = observer(
},
)
function validWebLink(url?: string): string | undefined {
return url && (url.startsWith('http://') || url.startsWith('https://'))
? url
: undefined
}
const styles = StyleSheet.create({
outer: {
flex: 1,
@ -692,6 +749,12 @@ const styles = StyleSheet.create({
pickerIcon: {
color: colors.white,
},
policies: {
flexDirection: 'row',
alignItems: 'flex-start',
paddingHorizontal: 20,
paddingBottom: 20,
},
error: {
borderWidth: 1,
borderColor: colors.red5,