Use ALF for signup flow, improve a11y of signup (#3151)

* Use ALF for signup flow, improve a11y of signup

* adjust padding

* rm log

* org imports

* clarify allowance of hyphens

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* fix a few accessibility items

* Standardise date input across platforms (#3223)

* make the date input consistent across platforms

* integrate into new signup form

* rm log

* add transitions

* show correct # of steps

* use `FormError`

* animate buttons

* use `ScreenTransition`

* fix android text overflow via flex -> flex_1

* change button color

* (android) make date input the same height as others

* fix deps

* fix deps

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 11 insertions, 3 deletions

diff --git a/src/view/com/auth/create/Policies.tsx b/src/view/com/auth/create/Policies.tsx
index 2c7d60818..dc3c9c174 100644
--- a/src/view/com/auth/create/Policies.tsx
+++ b/src/view/com/auth/create/Policies.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {Linking, StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
@@ -15,9 +15,11 @@ type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
 export const Policies = ({
   serviceDescription,
   needsGuardian,
+  under13,
 }: {
   serviceDescription: ServiceDescription
   needsGuardian: boolean
+  under13: boolean
 }) => {
   const pal = usePalette('default')
   if (!serviceDescription) {
@@ -53,6 +55,7 @@ export const Policies = ({
         href={tos}
         text="Terms of Service"
         style={[pal.link, s.underline]}
+        onPress={() => Linking.openURL(tos)}
       />,
     )
   }
@@ -63,6 +66,7 @@ export const Policies = ({
         href={pp}
         text="Privacy Policy"
         style={[pal.link, s.underline]}
+        onPress={() => Linking.openURL(pp)}
       />,
     )
   }
@@ -81,12 +85,16 @@ export const Policies = ({
       <Text style={pal.textLight}>
         By creating an account you agree to the {els}.
       </Text>
-      {needsGuardian && (
+      {under13 ? (
+        <Text style={[pal.textLight, s.bold]}>
+          You must be 13 years of age or older to sign up.
+        </Text>
+      ) : needsGuardian ? (
         <Text style={[pal.textLight, s.bold]}>
           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.
         </Text>
-      )}
+      ) : undefined}
     </View>
   )
 }