Upload files to 'screens'

screens/createAccount.js

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import * as WebBrowser from 'expo-web-browser';
+import * as Google from 'expo-auth-session/providers/google';
+import { StyleSheet, View, Image, TouchableOpacity} from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { Button, Text, TextInput, Divider } from 'react-native-paper';
+
+WebBrowser.maybeCompleteAuthSession();    
+
+export default function About({navigation}) {
+    const [accessToken, setAccessToken] = React.useState(null);
+    const [user, setUser] = React.useState(null);
+    const [text, setText] = React.useState(null);
+    const [text2, setText2] = React.useState(null);
+    const [text3, setText3] = React.useState(null);
+    const [request, response, promptAsync] = Google.useAuthRequest({
+        clientId:"651131042419-nku2iod9kjulk7g2ipj8v51v842c1j9o.apps.googleusercontent.com",
+        iosClientId: "651131042419-7lu7jen40pbkifledd8ed8itkvo6255b.apps.googleusercontent.com",
+    });
+
+    React.useEffect(() => {
+        if(response?.type === "success") {
+            setAccessToken(response.authentication.accessToken);
+            accessToken && fetchUserInfo();
+        }
+    }, [response, accessToken])
+    
+    const fetchUserInfo = async () => {
+        let response = await fetch("https://www.googleapis.com/userinfo/v2/me", {
+            headers: {Authorization: `Bearer ${accessToken}`}
+        })
+        
+        response.json().then(data => {
+            setUser(data);
+        })
+    }
+
+    const ShowUserInfo = () => {
+        if(user) {
+            return(
+                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+                  <Text style={{fontSize: 35, fontWeight: 'bold', marginBottom: 20}}>Welcome</Text>
+                  <Image source={{uri: user.picture}} style={styles.profilePic} />
+                  {console.log(user.name)}
+                </View>
+              )
+        }
+    }
+
+    const InsertDataToServer = () => {
+        
+        fetch('https://ada.uprrp.edu/~pablo.puig1/TPMG/loginUserAdd.php', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+        
+            name: text,
+        
+            email: text2,
+        
+            phone: text3
+        
+        })
+    }).then((response) => response.json())
+        .then((responseJson) => {
+    
+    // Showing response message coming from server after inserting records.
+            Alert.alert(responseJson);
+    
+        }).catch((error) => {
+            console.error(error);
+        });
+
+  }
+
+    return (
+        <View style={styles.container}>
+        
+        <Text style={{fontSize:30, fontWeight:"bold",  marginVertical: 0, marginHorizontal: 80}}>
+              Crear Cuenta
+          </Text>
+
+          <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
+              label="Nombre"
+              value={text}
+              mode = "outlined"
+              outlineColor='#327ABC'
+              onChangeText={text => setText(text)}
+          />
+
+        <TextInput style={{width: 350, marginVertical: -20, marginHorizontal: 10}}
+              label="Email"
+              value={text2}
+              mode = "outlined"
+              outlineColor='#327ABC'
+              onChangeText={text2 => setText2(text2)}
+          />
+
+        <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
+              label="Número de telefono"
+              value={text3}
+              mode = "outlined"
+              outlineColor='#327ABC'
+              onChangeText={text3 => setText3(text3)}
+          />
+
+<Button style={{width: 250, marginVertical: 40, marginHorizontal: 60}}
+          buttonColor = "#327ABC"
+          mode="contained"
+          onPress={()=> {InsertDataToServer(); navigation.navigate('Profile', {userName:text, email:text2, phone:text3})}}>
+              Crear cuenta
+          </Button>
+
+
+
+
+          <Divider style={{marginVertical: -20}}
+          horizontalInset='true' />
+
+        
+          
+          <Button style={{width: 250, marginVertical: 70, marginHorizontal: 60}}
+          buttonColor = "teal"
+          mode="contained"
+          onPress={accessToken ? fetchUserInfo: () => promptAsync({useProxy:true, showInRecents:true})}>
+              Crear cuenta con Google
+          </Button>
+		
+	    </View>
+    );
+
+    
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    },
+    profilePic: {
+        width: 50,
+        height: 50
+    },
+    userInfo: {
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});

screens/loggedIn.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Alert, View, Linking} from 'react-native';
+import { Button, Text, TextInput, Divider } from 'react-native-paper';
+import { useCallback } from "react";
+import { createStackNavigator, createAppContainer } from 'react-navigation';  
+
+const supportedURL = "https://docs.google.com/forms/d/e/1FAIpQLSe93-cuCFQ084AxVbzhwFJHjtPhrXFJ624ezAcqKU5qUsBqwg/viewform";
+
+const OpenURLButton = ({ url, children }) => {
+    const handlePress = useCallback(async () => {
+      // Checking if the link is supported for links with custom URL scheme.
+      const supported = await Linking.canOpenURL(url);
+  
+      if (supported) {
+        // Opening the link with some app, if the URL scheme is "http" the web link should be opened
+        // by some browser in the mobile
+        await Linking.openURL(url);
+      } else {
+        Alert.alert(`Don't know how to open this URL: ${url}`);
+      }
+    }, [url]);
+  
+    return <Button buttonColor = "purple" 
+            textColor= "white"
+            style={{width: 250, marginVertical: 40, marginHorizontal: 90}}
+            onPress={handlePress}>
+                Llenar formulario de voluntario
+            </Button> ;
+  };
+
+
+const MyComponent = () => {
+    const [text, setText] = React.useState("");
+    const [text2, setText2] = React.useState("");
+
+
+  return (
+    <View >
+
+        <Text style={{fontSize:30, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
+            Mi Cuenta
+        </Text>
+    
+        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
+            Nombre:
+        </Text>
+
+        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
+            Email:
+        </Text>
+
+        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
+            Teléfono:
+        </Text>
+    
+        <OpenURLButton 
+        url={"https://docs.google.com/forms/d/e/1FAIpQLSe93-cuCFQ084AxVbzhwFJHjtPhrXFJ624ezAcqKU5qUsBqwg/viewform"}>
+            Llenar formulario de voluntario
+        </OpenURLButton>
+        
+    </View>
+  );
+};
+
+export default MyComponent;