暂无描述

createAccount.js 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import * as React from 'react';
  2. import * as WebBrowser from 'expo-web-browser';
  3. import * as Google from 'expo-auth-session/providers/google';
  4. import { StyleSheet, View, Image, TouchableOpacity} from 'react-native';
  5. import { StatusBar } from 'expo-status-bar';
  6. import { Button, Text, TextInput, Divider } from 'react-native-paper';
  7. WebBrowser.maybeCompleteAuthSession();
  8. export default function About({navigation}) {
  9. const [accessToken, setAccessToken] = React.useState(null);
  10. const [user, setUser] = React.useState(null);
  11. const [text, setText] = React.useState(null);
  12. const [text2, setText2] = React.useState(null);
  13. const [text3, setText3] = React.useState(null);
  14. const [request, response, promptAsync] = Google.useAuthRequest({
  15. clientId:"651131042419-nku2iod9kjulk7g2ipj8v51v842c1j9o.apps.googleusercontent.com",
  16. iosClientId: "651131042419-7lu7jen40pbkifledd8ed8itkvo6255b.apps.googleusercontent.com",
  17. });
  18. React.useEffect(() => {
  19. if(response?.type === "success") {
  20. setAccessToken(response.authentication.accessToken);
  21. accessToken && fetchUserInfo();
  22. }
  23. }, [response, accessToken])
  24. const fetchUserInfo = async () => {
  25. let response = await fetch("https://www.googleapis.com/userinfo/v2/me", {
  26. headers: {Authorization: `Bearer ${accessToken}`}
  27. })
  28. response.json().then(data => {
  29. setUser(data);
  30. })
  31. }
  32. const ShowUserInfo = () => {
  33. if(user) {
  34. return(
  35. <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
  36. <Text style={{fontSize: 35, fontWeight: 'bold', marginBottom: 20}}>Welcome</Text>
  37. <Image source={{uri: user.picture}} style={styles.profilePic} />
  38. {console.log(user.name)}
  39. </View>
  40. )
  41. }
  42. }
  43. const InsertDataToServer = () => {
  44. fetch('https://ada.uprrp.edu/~pablo.puig1/TPMG/loginUserAdd.php', {
  45. method: 'POST',
  46. headers: {
  47. 'Accept': 'application/json',
  48. 'Content-Type': 'application/json',
  49. },
  50. body: JSON.stringify({
  51. name: text,
  52. email: text2,
  53. phone: text3
  54. })
  55. }).then((response) => response.json())
  56. .then((responseJson) => {
  57. // Showing response message coming from server after inserting records.
  58. Alert.alert(responseJson);
  59. }).catch((error) => {
  60. console.error(error);
  61. });
  62. }
  63. return (
  64. <View style={styles.container}>
  65. <Text style={{fontSize:30, fontWeight:"bold", marginVertical: 0, marginHorizontal: 80}}>
  66. Crear Cuenta
  67. </Text>
  68. <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
  69. label="Nombre"
  70. value={text}
  71. mode = "outlined"
  72. outlineColor='#327ABC'
  73. onChangeText={text => setText(text)}
  74. />
  75. <TextInput style={{width: 350, marginVertical: -20, marginHorizontal: 10}}
  76. label="Email"
  77. value={text2}
  78. mode = "outlined"
  79. outlineColor='#327ABC'
  80. onChangeText={text2 => setText2(text2)}
  81. />
  82. <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
  83. label="Número de telefono"
  84. value={text3}
  85. mode = "outlined"
  86. outlineColor='#327ABC'
  87. onChangeText={text3 => setText3(text3)}
  88. />
  89. <Button style={{width: 250, marginVertical: 40, marginHorizontal: 60}}
  90. buttonColor = "#327ABC"
  91. mode="contained"
  92. onPress={()=> {InsertDataToServer(); navigation.navigate('Profile', {userName:text, email:text2, phone:text3})}}>
  93. Crear cuenta
  94. </Button>
  95. <Divider style={{marginVertical: -20}}
  96. horizontalInset='true' />
  97. <Button style={{width: 250, marginVertical: 70, marginHorizontal: 60}}
  98. buttonColor = "teal"
  99. mode="contained"
  100. onPress={accessToken ? fetchUserInfo: () => promptAsync({useProxy:true, showInRecents:true})}>
  101. Crear cuenta con Google
  102. </Button>
  103. </View>
  104. );
  105. }
  106. const styles = StyleSheet.create({
  107. container: {
  108. padding: 24
  109. },
  110. profilePic: {
  111. width: 50,
  112. height: 50
  113. },
  114. userInfo: {
  115. alignItems: 'center',
  116. justifyContent: 'center'
  117. }
  118. });