diff --git a/app/mobile/src/access/admin/Admin.jsx b/app/mobile/src/access/admin/Admin.jsx
index 08d033ca..9e5fc68f 100644
--- 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() {
)}
- { state.enabled && (
+
+
+
+ View Terms of Service
+
+ actions.agree(!state.agree)}>
+ { state.agree && (
+
+ )}
+ { !state.agree && (
+
+ )}
+ I agree to Terms of Service
+
+
+
+ { state.enabled && state.agree && (
{ state.busy && (
@@ -63,7 +81,7 @@ export function Admin() {
)}
)}
- { !state.enabled && (
+ { (!state.enabled || !state.agree) && (
Access
@@ -73,6 +91,23 @@ export function Admin() {
v{ state.version }
+
+
+
+ Terms of Use and User Policy
+ { tos.message }
+
+
+ Done
+
+
+
);
}
diff --git a/app/mobile/src/access/admin/Admin.styled.js b/app/mobile/src/access/admin/Admin.styled.js
index a8032a5c..c83afec4 100644
--- 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,
diff --git a/app/mobile/src/access/admin/useAdmin.hook.js b/app/mobile/src/access/admin/useAdmin.hook.js
index 24cb180d..91591a14 100644
--- 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 {
diff --git a/app/mobile/src/access/create/Create.jsx b/app/mobile/src/access/create/Create.jsx
index 2969964c..43e426ff 100644
--- a/app/mobile/src/access/create/Create.jsx
+++ b/app/mobile/src/access/create/Create.jsx
@@ -138,25 +138,23 @@ export function Create() {
)}
- { Platform.OS !== 'ios' && (
-
-
- View Terms of Service
-
- actions.agree(!state.agree)}>
- { state.agree && (
-
- )}
- { !state.agree && (
-
- )}
- I agree to Terms of Service
-
-
- )}
+
+
+ View Terms of Service
+
+ actions.agree(!state.agree)}>
+ { state.agree && (
+
+ )}
+ { !state.agree && (
+
+ )}
+ I agree to Terms of Service
+
+
- { state.enabled && (state.agree || Platform.OS === 'ios') && (
+ { state.enabled && state.agree && (
{ state.busy && (
@@ -166,7 +164,7 @@ export function Create() {
)}
)}
- { (!state.enabled || (!state.agree && Platform.OS !== 'ios')) && (
+ { (!state.enabled || !state.agree) && (
Create Account
diff --git a/app/mobile/src/access/login/Login.jsx b/app/mobile/src/access/login/Login.jsx
index b43f0ee3..cc1f6028 100644
--- 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() {
)}
- { state.enabled && (
+
+
+
+ View Terms of Service
+
+ actions.agree(!state.agree)}>
+ { state.agree && (
+
+ )}
+ { !state.agree && (
+
+ )}
+ I agree to Terms of Service
+
+
+
+ { state.enabled && state.agree && (
{ state.busy && (
@@ -70,7 +88,7 @@ export function Login() {
)}
)}
- { !state.enabled && (
+ { (!state.enabled || !state.agree) && (
Login
@@ -85,6 +103,23 @@ export function Login() {
+
+
+
+ Terms of Use and User Policy
+ { tos.message }
+
+
+ Done
+
+
+
);
}
diff --git a/app/mobile/src/access/login/Login.styled.js b/app/mobile/src/access/login/Login.styled.js
index 5db5e9d6..1180f096 100644
--- 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,
diff --git a/app/mobile/src/access/login/useLogin.hook.js b/app/mobile/src/access/login/useLogin.hook.js
index 0b2d0987..ef08c516 100644
--- 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 });
diff --git a/app/mobile/src/access/reset/Reset.jsx b/app/mobile/src/access/reset/Reset.jsx
index 0af739aa..14f01516 100644
--- 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} />
- { state.enabled && (
+
+
+
+ View Terms of Service
+
+ actions.agree(!state.agree)}>
+ { state.agree && (
+
+ )}
+ { !state.agree && (
+
+ )}
+ I agree to Terms of Service
+
+
+
+ { state.enabled && state.agree && (
{ state.busy && (
@@ -55,7 +73,7 @@ export function Reset() {
)}
)}
- { !state.enabled && (
+ { (!state.enabled || !state.agree) && (
Access
@@ -65,6 +83,23 @@ export function Reset() {
+
+
+
+ Terms of Use and User Policy
+ { tos.message }
+
+
+ Done
+
+
+
);
}
diff --git a/app/mobile/src/access/reset/Reset.styled.js b/app/mobile/src/access/reset/Reset.styled.js
index c7303542..6a39288b 100644
--- 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,
diff --git a/app/mobile/src/access/reset/useReset.hook.js b/app/mobile/src/access/reset/useReset.hook.js
index 8ce36af8..9bfcf7f3 100644
--- 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 {