moving terms to account create screen

2025-04-22 09:35:16 +00:00 · 2023-03-07 09:56:06 -08:00 · 2023-03-07 09:56:06 -08:00 · 4db08d7ebe
commit 4db08d7ebe
parent ed59da1803
6 changed files with 132 additions and 75 deletions
--- a/app/mobile/src/access/create/Create.jsx
+++ b/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>
  );
 }
--- a/app/mobile/src/access/create/Create.styled.js
+++ b/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',
--- a/app/mobile/src/access/create/useCreate.hook.js
+++ b/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 {
--- a/app/mobile/src/session/Session.jsx
+++ b/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)}>
-                { state.agree && (
-                  <MatIcons name={'checkbox-outline'} size={20} color={Colors.text} />
-                )}
-                { !state.agree && (
-                  <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.text} />
-                )}
-                <Text style={styles.agreeText}>I Agree to the Terms and Policy</Text> 
+              <View style={styles.step}>
+                <Ionicons name={'user'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Setup Your Profile</Text>
+              </View>
+              <View style={styles.step}>
+                <Ionicons name={'contacts'} size={18} color={Colors.white} />
+                <Text style={styles.stepText}>Connect With People</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() {
 }


+
--- a/app/mobile/src/session/Session.styled.js
+++ b/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%',
-    opacity: 0.5,
+    maxHeight: '50%',
+  },
+  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,
  },
 });
+
--- a/app/mobile/src/session/useSession.hook.js
+++ b/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 };
 }

+