Merge pull request #90 from Arquisoft/publicKeyToStore

Public key to store

mobileapp/HomeScreen.js

@@ -5,7 +5,6 @@ import styles from './MyStyles'
 import MyMenu from './MyMenu'
 import fetchFriends from './FetchFriends'
 
-
 {/*Esto debería ir en el return delante de Navigation container pero.. cosas raras con comentarios
     <SafeAreaView>
       <TouchableOpacity
@@ -44,7 +43,7 @@ export default function HomeScreen({ navigation }) {
         {
           parsedNames.map((u) => {
             return (
-              <Card containerStyle={styles.card}>
+              <Card containerStyle={styles.card} key={u}>
                 <Card.Title>{u}</Card.Title>
                 <Card.Divider />
                 <Text style={styles.name}>1 km</Text>

mobileapp/LoginScreen.js

@@ -1,37 +1,70 @@
-import React from 'react';
-import { Image } from 'react-native';
-import { View, Text, TextInput, Button, Linking} from 'react-native';
-import { Card} from 'react-native-elements'
-import styles from './MyStyles'
+import React, { useState } from 'react';
+import { BackHandler, Image } from 'react-native';
+import { View, Text, TextInput, Button, Linking, StyleSheet } from 'react-native';
+import { Card } from 'react-native-elements';
+import styles from './MyStyles';
+import { BarCodeScanner } from "expo-barcode-scanner";
+import * as SecureStore from "expo-secure-store";
+
+export default function LoginScreen({ navigation }) {
+  const [hasCameraPermission, setHasCameraPermission] = useState(null);
+  const [scanned, setScanned] = useState(false);
+  const [showScanner, setShowScanner] = useState(false);
+
+
+  async function save(key, value) {
+    await SecureStore.setItemAsync(key, value);
+  }
 
-export default function LoginScreen({navigation}) {
   React.useLayoutEffect(() => {
     navigation.setOptions({
       headerLeft: (() => (
         <View style={styles.iconWrapper}>
-        <Image
-        style={styles.icon}
-        source={require('./assets/icon.png')}
-      />
-      </View>
-      )
-  ),
-    });
+          <Image
+            style={styles.icon}
+            source={require('./assets/icon.png')}
+          />
+        </View>
+      )),
+    }),
+      (async () => {
+        const { status } = await BarCodeScanner.requestPermissionsAsync();
+        setHasCameraPermission(status == 'granted');
+      })();
   }, [navigation]);
 
-  return (
-    <View style={styles.container}>
-      <Card containerStyle={styles.card}>
-            <Card.Title style={styles.signinCardTitle}>Sign in</Card.Title>
-            <Card.Divider/>
-            <Text style={styles.normalText}>Introduce your provider URL:</Text>
-            <TextInput placeholder='https://inrupt.net' style={styles.textInput}></TextInput>
-            <Text style={styles.smallText}>Don't have one? You can get it here: <Text style={{color: '#3f51b5'}} onPress={() => {Linking.openURL('https://inrupt.com/')}}> Inrupt </Text> </Text>
-            <View style={styles.cardButton}>
-            <Button color="#3f51b5" title='Log in'onPress={() => {navigation.navigate('Radarin')}}>Login</Button>
-            </View>
-      </Card>
-
-    </View>
-  );
+  const handleQrScanned = ({ type, data }) => {
+    setScanned(true);
+    alert(data);
+    save("op234iyu5v6oy234iuv6", data);
+    navigation.navigate('Radarin');
+  };
+
+  function changeShowScanner() {
+    setShowScanner(true);
+  }
+
+  if (showScanner) {
+    return (
+      <BarCodeScanner
+        onBarCodeScanned={scanned ? undefined : handleQrScanned}
+        style={StyleSheet.absoluteFillObject}
+      />
+    );
+  } else {
+    return (
+      <View style={styles.container}>
+        <Card containerStyle={styles.card}>
+          <Card.Title style={styles.signinCardTitle}>Sign in</Card.Title>
+          <Card.Divider />
+          <Text style={styles.normalText}>Click the button and scan the QR:</Text>
+          <Text style={styles.smallText}>Don't have the QR? You can get it here: <Text style={{ color: '#3f51b5' }} onPress={() => { Linking.openURL('https://inrupt.com/') }}> Inrupt </Text> </Text>
+          <View style={styles.cardButton}>
+            <Button color="#3f51b5" title='Scan' onPress={changeShowScanner}>Scan</Button>
+          </View>
+        </Card>
+
+      </View>
+    );
+  }
 }

mobileapp/MyStyles.js

@@ -97,5 +97,5 @@ export default StyleSheet.create({
     alignSelf: 'center',
     padding:10,
     paddingBottom:30,
-  }
+  },
 });

mobileapp/package.json

@@ -15,6 +15,8 @@
     "@react-navigation/stack": "^5.14.3",
     "events": "^3.3.0",
     "expo": "~40.0.0",
+    "expo-barcode-scanner": "^10.0.0",
+    "expo-secure-store": "^10.0.0",
     "expo-status-bar": "~1.0.3",
     "graphql-tag": "^2.11.0",
     "navigationbar-react-native": "0.0.5",