adding tos to all access screens

2025-02-14 12:39:17 +00:00 · 2023-03-07 15:19:29 -08:00 · 2023-03-07 15:19:29 -08:00 · 5e181d090f
commit 5e181d090f
parent 5a0a2a8af2
10 changed files with 334 additions and 27 deletions
--- a/app/mobile/src/access/admin/Admin.jsx
+++ b/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>
  );
 }
--- a/app/mobile/src/access/admin/Admin.styled.js
+++ b/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,
--- a/app/mobile/src/access/admin/useAdmin.hook.js
+++ b/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 {
--- a/app/mobile/src/access/create/Create.jsx
+++ b/app/mobile/src/access/create/Create.jsx
@ -138,25 +138,23 @@ export function Create() {
            </View>
          )}

-          { Platform.OS !== 'ios' && (
-            <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.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.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>
--- a/app/mobile/src/access/login/Login.jsx
+++ b/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>
  );
 }
--- a/app/mobile/src/access/login/Login.styled.js
+++ b/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,
--- a/app/mobile/src/access/login/useLogin.hook.js
+++ b/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 });
--- a/app/mobile/src/access/reset/Reset.jsx
+++ b/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>
  );
 }
--- a/app/mobile/src/access/reset/Reset.styled.js
+++ b/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,
--- a/app/mobile/src/access/reset/useReset.hook.js
+++ b/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 {