moving terms to account create screen

app/mobile/src/access/create/Create.jsx

@@ -1,8 +1,10 @@
-import { KeyboardAvoidingView, ScrollView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { KeyboardAvoidingView, ScrollView, ActivityIndicator, Alert, Modal, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Create.styled';
 import Ionicons from 'react-native-vector-icons/AntDesign';
 import { useCreate } from './useCreate.hook';
 import Colors from 'constants/Colors';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { tos } from 'constants/TermsOfService';
 
 export function Create() {
 
@@ -135,8 +137,24 @@ export function Create() {
               </TouchableOpacity>
             </View>
           )}
+
+          <View style={styles.tos}>
+            <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
+              <Text style={styles.viewtermstext}>View Terms of Service</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
+              { state.agree && (
+                <MatIcons name={'checkbox-outline'} size={20} color={Colors.primary} />
+              )}
+              { !state.agree && (
+                <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
+              )}
+              <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
+            </TouchableOpacity>
+          </View>
+ 
           <View style={styles.buttons}>
-            { state.enabled && (
+            { state.enabled && state.agree && (
               <TouchableOpacity style={styles.create} onPress={create}>
                 { state.busy && (
                   <ActivityIndicator size="small" color="#ffffff" />
@@ -146,9 +164,9 @@ export function Create() {
                 )}
               </TouchableOpacity>
             )}
-            { !state.enabled && (
+            { (!state.enabled || !state.agree) && (
               <View style={styles.nocreate}>
-                <Text style={styles.nocreatetext}>Create</Text>
+                <Text style={styles.nocreatetext}>Create Account</Text>
               </View>
             )}
             <TouchableOpacity style={styles.login} onPress={actions.login}>
@@ -157,6 +175,23 @@ export function Create() {
           </View>
         </ScrollView>      
       </View>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={state.showTerms}
+        supportedOrientations={['portrait', 'landscape']}
+        onRequestClose={actions.hideTerms}
+      >
+        <View style={styles.modalContainer}>
+          <ScrollView style={styles.terms} persistentScrollbar={true}>
+            <Text style={styles.termsheader}>Terms of Use and User Policy</Text>
+            <Text numberOfLines={0}>{ tos.message }</Text>
+          </ScrollView>
+          <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
+            <Text style={styles.donetext}>Done</Text>
+          </TouchableOpacity>
+        </View>
+      </Modal>
     </KeyboardAvoidingView>
   );
 }

app/mobile/src/access/create/Create.styled.js

@@ -14,6 +14,63 @@ export const styles = StyleSheet.create({
     width: 40,
     textAlign: 'center',
   },
+  modalContainer: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: Colors.grey,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tos: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  agreeterms: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  agreetermstext: {
+    color: Colors.primary,
+    paddingLeft: 8,
+    fontSize: 14,
+  },
+  viewterms: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  viewtermstext: {
+    color: Colors.primary,
+    fontSize: 14,
+  },
+  terms: {
+    borderRadius: 4,
+    maxHeight: '80%',
+    padding: 8,
+    margin: 16,
+    backgroundColor: Colors.formBackground,
+  },
+  done: {
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 4,
+    backgroundColor: Colors.white,
+    marginTop: 8,
+  },
+  donetext: {
+    color: Colors.text,
+    fontSize: 16,
+  },
+  termsheader: {
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
   demo: {
     alignItems: 'center',
     justifyContent: 'center',

app/mobile/src/access/create/useCreate.hook.js

@@ -28,6 +28,8 @@ export function useCreate() {
     tokenValid: false,
     usernameChecked: true,
     usernameValid: false,
+    agree: false,
+    showTerms: false,
   });
 
   const backoff = useRef(false);
@@ -174,6 +176,15 @@ export function useCreate() {
     hideConfirm: () => {
       updateState({ showConfirm: false });
     },
+    showTerms: () => {
+      updateState({ showTerms: true });
+    },
+    hideTerms: () => {
+      updateState({ showTerms: false });
+    },
+    agree: (agree) => {
+      updateState({ agree });
+    },
     create: async () => {
       if (!state.busy) {
         try {

app/mobile/src/session/Session.jsx

@@ -6,7 +6,6 @@ import { createDrawerNavigator } from '@react-navigation/drawer';
 import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer } from '@react-navigation/native';
 import Ionicons from 'react-native-vector-icons/AntDesign';
-import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useSession } from './useSession.hook';
 import { styles } from './Session.styled';
 import Colors from 'constants/Colors';
@@ -23,7 +22,6 @@ import { ConversationContext } from 'context/ConversationContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { ProfileIcon } from './profileIcon/ProfileIcon';
 import { CardsIcon } from './cardsIcon/CardsIcon';
-import { tos } from 'constants/TermsOfService';
 import splash from 'images/session.png';
 
 const ConversationStack = createStackNavigator();
@@ -322,36 +320,23 @@ export function Session() {
               <Text style={styles.tagText}>Communication for the Decentralized Web</Text>
             </View>
             <Image style={styles.splash} source={splash} resizeMode="contain" />
-
-            <ScrollView style={styles.terms} persistentScrollbar={true}>
-              <Text style={styles.termsheader}>Terms of Use and User Policy</Text>
-              <Text numberOfLines={0}>{ tos.message }</Text>
-            </ScrollView>
-
             <View style={styles.steps} >
-              <TouchableOpacity style={styles.agree} onPress={() => actions.setAgree(!state.agree)}>
+              <View style={styles.step}>
-                { state.agree && (
+                <Ionicons name={'user'} size={18} color={Colors.white} />
-                  <MatIcons name={'checkbox-outline'} size={20} color={Colors.text} />
+                <Text style={styles.stepText}>Setup Your Profile</Text>
-                )}
+              </View>
-                { !state.agree && (
+              <View style={styles.step}>
-                  <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.text} />
+                <Ionicons name={'contacts'} size={18} color={Colors.white} />
-                )}
+                <Text style={styles.stepText}>Connect With People</Text>
-                <Text style={styles.agreeText}>I Agree to the Terms and Policy</Text> 
+              </View>
+              <View style={styles.step}>
+                <Ionicons name={'message1'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Start a Conversation</Text>
+              </View>
+              <TouchableOpacity style={styles.start} onPress={actions.clearFirstRun}>
+                <Text style={styles.startText}>Get Started</Text>
               </TouchableOpacity>
-
-              { !state.agree && (
-                <View style={styles.nostart}>
-                  <Text style={styles.nostartText}>Continue</Text>
-                </View>
-              )}
-
-              { state.agree && (
-                <TouchableOpacity style={styles.start} onPress={actions.clearFirstRun}>
-                  <Text style={styles.startText}>Get Started</Text>
-                </TouchableOpacity>
-              )}
             </View>
-
           </SafeAreaView>
         )}
         { state.firstRun == false && (
@@ -399,3 +384,4 @@ export function Session() {
 }
 
 
+

app/mobile/src/session/Session.styled.js

@@ -7,29 +7,6 @@ export const styles = StyleSheet.create({
     height: '100%',
     backgroundColor: Colors.formBackground,
   },
-  agree: {
-    display: 'flex',
-    flexDirection: 'row',
-    marginBottom: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  agreeText: {
-    color: Colors.text,
-    paddingLeft: 8,
-    fontWeight: 'bold',
-  },
-  terms: {
-    borderRadius: 4,
-    maxHeight: '60%',
-    padding: 8,
-    margin: 16,
-    backgroundColor: Colors.formBackground,
-  },
-  termsheader: {
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
   container: {
     width: '100%',
     height: '100%',
@@ -40,13 +17,17 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.background,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 16,
-    paddingBottom: 16,
   },
   splash: {
+    width: '100%',
+    height: '100%',
     maxWidth: '80%',
-    maxHeight: '30%',
+    maxHeight: '50%',
-    opacity: 0.5,
+  },
+  steps: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'center',
   },
   step: {
     display: 'flex',
@@ -74,17 +55,6 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     fontSize: 16,
   },
-  nostart: {
-    marginTop: 16,
-    padding: 8,
-    backgroundColor: Colors.disabled,
-    borderRadius: 4,
-    display: 'flex',
-    alignItems: 'center',
-  },
-  nostartText: {
-    color: Colors.white,
-  },
   start: {
     marginTop: 16,
     padding: 8,
@@ -169,3 +139,4 @@ export const styles = StyleSheet.create({
     color: Colors.tetx,
   },
 });
+

app/mobile/src/session/useSession.hook.js

@@ -13,7 +13,6 @@ export function useSession() {
     cardId: null,
     converstaionId: null,
     firstRun: null,
-    agree: false,
   });
 
   const store = useContext(StoreContext);
@@ -49,9 +48,6 @@ export function useSession() {
   }, [dimensions]);
 
   const actions = {
-    setAgree: (agree) => {
-      updateState({ agree });
-    },
     setCardId: (cardId) => {
       updateState({ cardId });
     },
@@ -64,3 +60,4 @@ export function useSession() {
   return { state, actions };
 }
 
+