adding tos to all access screens

app/mobile/src/access/admin/Admin.jsx

@@ -1,8 +1,10 @@
-import { KeyboardAvoidingView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { KeyboardAvoidingView, Modal, ScrollView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Admin.styled';
 import Ionicons from 'react-native-vector-icons/AntDesign';
 import { useAdmin } from './useAdmin.hook';
 import Colors from 'constants/Colors';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { tos } from 'constants/TermsOfService';
 
 export function Admin() {
 
@@ -53,7 +55,23 @@ export function Admin() {
               )}
             </TouchableOpacity>
           </View>
-          { state.enabled && (
+
+          <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>
+
+          { state.enabled && state.agree && (
             <TouchableOpacity style={styles.reset} onPress={admin}>
               { state.busy && (
                 <ActivityIndicator size="small" color="#ffffff" />
@@ -63,7 +81,7 @@ export function Admin() {
               )}
             </TouchableOpacity>
           )}
-          { !state.enabled && (
+          { (!state.enabled || !state.agree) && (
             <View style={styles.noreset}>
               <Text style={styles.noresettext}>Access</Text>
             </View>
@@ -73,6 +91,23 @@ export function Admin() {
           <Text style={styles.versiontext}>v{ state.version }</Text>
         </View>
       </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/admin/Admin.styled.js

@@ -15,6 +15,63 @@ export const styles = StyleSheet.create({
   space: {
     width: 32,
   },
+  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',
+  },
   container: {
     flexDirection: 'column',
     backgroundColor: Colors.formBackground,

app/mobile/src/access/admin/useAdmin.hook.js

@@ -18,6 +18,8 @@ export function useAdmin() {
     token: null,
     plainText: false,
     version: null,
+    agree: false,
+    showTerms: false,
   });
 
   const updateState = (value) => {
@@ -62,6 +64,15 @@ export function useAdmin() {
     hidePass: () => {
       updateState({ plainText: false });
     },
+    showTerms: () => {
+      updateState({ showTerms: true });
+    },
+    hideTerms: () => {
+      updateState({ showTerms: false });
+    },
+    agree: (agree) => {
+      updateState({ agree });
+    },
     access: async () => {
       if (!state.busy) {
         try {

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

@@ -138,25 +138,23 @@ export function Create() {
             </View>
           )}
 
-          { Platform.OS !== 'ios' && (
+          <View style={styles.tos}>
-            <View style={styles.tos}>
+            <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
-              <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
+              <Text style={styles.viewtermstext}>View Terms of Service</Text>
-                <Text style={styles.viewtermstext}>View Terms of Service</Text>
+            </TouchableOpacity>
-              </TouchableOpacity>
+            <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
-              <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
+              { state.agree && (
-                { state.agree && (
+                <MatIcons name={'checkbox-outline'} size={20} color={Colors.primary} />
-                  <MatIcons name={'checkbox-outline'} size={20} color={Colors.primary} />
+              )}
-                )}
+              { !state.agree && (
-                { !state.agree && (
+                <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
-                  <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
+              )}
-                )}
+              <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
-                <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
+            </TouchableOpacity>
-              </TouchableOpacity>
+          </View>
-            </View>
-          )}
  
           <View style={styles.buttons}>
-            { state.enabled && (state.agree || Platform.OS === 'ios') && (
+            { state.enabled && state.agree && (
               <TouchableOpacity style={styles.create} onPress={create}>
                 { state.busy && (
                   <ActivityIndicator size="small" color="#ffffff" />
@@ -166,7 +164,7 @@ export function Create() {
                 )}
               </TouchableOpacity>
             )}
-            { (!state.enabled || (!state.agree && Platform.OS !== 'ios')) && (
+            { (!state.enabled || !state.agree) && (
               <View style={styles.nocreate}>
                 <Text style={styles.nocreatetext}>Create Account</Text>
               </View>

app/mobile/src/access/login/Login.jsx

@@ -1,8 +1,10 @@
-import { KeyboardAvoidingView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { KeyboardAvoidingView, ActivityIndicator, Modal, ScrollView, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Login.styled';
 import Ionicons from 'react-native-vector-icons/AntDesign';
 import { useLogin } from './useLogin.hook';
 import { Colors } from 'constants/Colors';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { tos } from 'constants/TermsOfService';
 
 export function Login() {
 
@@ -60,7 +62,23 @@ export function Login() {
               </TouchableOpacity>
             </View>
           )}
-          { state.enabled && (
+
+          <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>
+
+          { state.enabled && state.agree && (
             <TouchableOpacity style={styles.login} onPress={login}>
               { state.busy && (
                 <ActivityIndicator size="small" color="#ffffff" />
@@ -70,7 +88,7 @@ export function Login() {
               )}
             </TouchableOpacity>
           )}
-          { !state.enabled && (
+          { (!state.enabled || !state.agree) && (
             <View style={styles.nologin}>
               <Text style={styles.nologintext}>Login</Text>
             </View>
@@ -85,6 +103,23 @@ export function Login() {
           </View>
         </View>      
       </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/login/Login.styled.js

@@ -15,6 +15,63 @@ export const styles = StyleSheet.create({
   space: {
     width: 32,
   },
+  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',
+  },
   container: {
     flexDirection: 'column',
     backgroundColor: Colors.formBackground,

app/mobile/src/access/login/useLogin.hook.js

@@ -14,6 +14,8 @@ export function useLogin() {
     login: null,
     password: null,
     showPassword: false,
+    agree: false,
+    showTerms: false,
   });
 
   const updateState = (value) => {
@@ -57,6 +59,15 @@ export function useLogin() {
     hidePassword: () => {
       updateState({ showPassword: false });
     },
+    showTerms: () => {
+      updateState({ showTerms: true });
+    },
+    hideTerms: () => {
+      updateState({ showTerms: false });
+    },
+    agree: (agree) => {
+      updateState({ agree });
+    },
     login: async () => {
       if (!state.busy) {
         updateState({ busy: true });

app/mobile/src/access/reset/Reset.jsx

@@ -1,8 +1,10 @@
-import { KeyboardAvoidingView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { KeyboardAvoidingView, ActivityIndicator, Modal, ScrollView, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Reset.styled';
 import Ionicons from 'react-native-vector-icons/AntDesign';
 import { useReset } from './useReset.hook';
 import Colors from 'constants/Colors';
+import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { tos } from 'constants/TermsOfService';
 
 export function Reset() {
 
@@ -45,7 +47,23 @@ export function Reset() {
                 autoCapitalize="none" placeholder="token" placeholderTextColor={Colors.grey} />
             <View style={styles.space} />
           </View>
-          { state.enabled && (
+
+          <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>
+
+          { state.enabled && state.agree && (
             <TouchableOpacity style={styles.reset} onPress={reset}>
               { state.busy && (
                 <ActivityIndicator size="small" color="#ffffff" />
@@ -55,7 +73,7 @@ export function Reset() {
               )}
             </TouchableOpacity>
           )}
-          { !state.enabled && (
+          { (!state.enabled || !state.agree) && (
             <View style={styles.noreset}>
               <Text style={styles.noresettext}>Access</Text>
             </View>
@@ -65,6 +83,23 @@ export function Reset() {
           </TouchableOpacity>
         </View>      
       </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/reset/Reset.styled.js

@@ -15,6 +15,63 @@ export const styles = StyleSheet.create({
   space: {
     width: 32,
   },
+  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',
+  },
   container: {
     flexDirection: 'column',
     backgroundColor: Colors.formBackground,

app/mobile/src/access/reset/useReset.hook.js

@@ -13,6 +13,8 @@ export function useReset() {
     enabled: false,
     server: null,
     token: null,
+    agree: false,
+    showTerms: false,
   });
 
   const updateState = (value) => {
@@ -47,6 +49,15 @@ export function useReset() {
     login: () => {
       navigate('/login');
     },
+    showTerms: () => {
+      updateState({ showTerms: true });
+    },
+    hideTerms: () => {
+      updateState({ showTerms: false });
+    },
+    agree: (agree) => {
+      updateState({ agree });
+    },
     access: async () => {
       if (!state.busy) {
         try {