Merge branch '18-authentication' into 'master'

Resolve "Authentication"

Closes #18

See merge request !18

salamander-app/.gitignore

@@ -8,6 +8,6 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
-
+.idea
 # macOS
 .DS_Store

salamander-app/APIkit.js

+import axios from 'axios';
+
+// Create axios client, pre-configured with baseURL
+let APIKit = axios.create({
+  baseURL: 'http://10.22.205.170:5000',
+  timeout: 10000,
+  headers: {'Content-Type': 'multipart/form-data'}
+});
+
+// Set JSON Web Token in Client to be included in all calls
+export const setClientToken = token => {
+  APIKit.interceptors.request.use(function(config) {
+    config.headers.Authorization = `Bearer ${token}`;
+    return config;
+  });
+};
+
+export default APIKit;
\ No newline at end of file

salamander-app/App.js

@@ -13,13 +13,9 @@ export default function App() {
 
   const authContext = React.useMemo(() => {
     return {
-      signIn: () => {
+      signInApp: () => {
         setIsLoading(false); 
-        setUserToken('asdf'); 
-      }, 
-      signUp: () => {
-        setIsLoading(false); 
-        setUserToken('asdf'); 
+        setUserToken(true); 
       }, 
       signOut: () => {
         setIsLoading(false); 
@@ -39,3 +35,4 @@ export default function App() {
   );
 }
 
+

salamander-app/components/MyTextField.js

@@ -3,7 +3,6 @@ import { TextInput } from 'react-native-paper';
 import { StyleSheet } from 'react-native'
 
 const MyTextField = (props) => {
-  const [text, setText] = React.useState('');
 
   return (
     <TextInput
@@ -12,8 +11,8 @@ const MyTextField = (props) => {
       secureTextEntry={props.secureTextEntry} 
       mode={props.mode}
       placeholder={props.placeholder}
-      value={text}
-      onChangeText={text => setText(text)}
+      value={props.text}
+      onChangeText={props.onChangeText}
     />
   );
 };

salamander-app/screens/ProfileScreen.js

-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { StyleSheet, Text, View, ScrollView } from 'react-native'
 import { Divider } from 'react-native-paper';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useAsyncStorage } from '@react-native-async-storage/async-storage';
 
 import MyTouchableOpacity from '../components/MyTouchableOpacity';
 import { AuthContext } from '../constants/context';
@@ -9,14 +11,26 @@ const ProfileScreen = ({ navigation }) => {
 
     const { signOut } = React.useContext(AuthContext); 
 
+    const [value, setValue] = React.useState({});
+    
+    const readItemFromStorage = async () => {
+        const jsonValue = await AsyncStorage.getItem('@user')
+        let user = JSON.parse(jsonValue); 
+        setValue(user);
+    };
+
+    useEffect(() => {
+        readItemFromStorage();  
+    }, []);
+
     return (
         <ScrollView>
             <View style={styles.container}>
                 <Text style={styles.text}>Personal Data</Text>
                 <Divider />
-                <MyTouchableOpacity title="Name" placeholder="Ola Nordmann" icon="chevron-right" onPress={() => navigation.push("ChangeName")} />
+                <MyTouchableOpacity title="Name" placeholder={value.name} icon="chevron-right" onPress={() => navigation.push("ChangeName")} />
                 <Divider />
-                <MyTouchableOpacity title="Email" placeholder="ola@nordmann.com" icon="chevron-right" onPress={() => navigation.push("ChangeEmailVerify")} />
+                <MyTouchableOpacity title="Email" placeholder={value.email} icon="chevron-right" onPress={() => navigation.push("ChangeEmailVerify")} />
                 <Divider />
                 <MyTouchableOpacity title="Password"  icon="chevron-right" onPress={() => navigation.push("ChangePasswordVerify")} />
                 <Divider />

salamander-app/screens/SignInScreen.js

 import React from 'react'
 import { StyleSheet, Text, View, Image, ScrollView } from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import MyButton from '../components/MyButton'
 import { AuthContext } from '../constants/context'
 import MyTextField from '../components/MyTextField'
+import APIKit, {setClientToken} from '../APIkit'; 
 
 const SignInScreen = ({ navigation }) => {
 
-    const { signIn } = React.useContext(AuthContext);
+    const { signInApp } = React.useContext(AuthContext);
+
+    const [email, setEmail] = React.useState('');
+    const [password, setPassword] = React.useState('');
+
+    function signIn() {
+        let bodyFormData = new FormData();
+        bodyFormData.append("email", email)
+        bodyFormData.append("password", password)
+
+        APIKit.post('/login', bodyFormData)
+            .then(function (response) {
+                if (response.data.access_token) {
+                    setClientToken(response.data.access_token);
+                    signInApp(response.data.access_token); 
+                    storeData(response.data); 
+                }
+                console.log(response.data); 
+            })
+            .catch(function (response) {
+                //handle error
+                console.log(response);
+            });
+    }
+
+    const storeData = async (value) => {
+        try {
+          const jsonValue = JSON.stringify(value)
+          await AsyncStorage.setItem('@user', jsonValue)
+        } catch (e) {
+          // saving error
+        }
+    }
 
     return (
         <ScrollView style={styles.scrollView}> 
@@ -18,8 +52,8 @@ const SignInScreen = ({ navigation }) => {
                         source={require('../assets/images/ninaLogo.png')}
                     />
                 </View>
-                <MyTextField style={styles.textfield} mode='outlined' placeholder='Email' label='Email'/>
-                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Password' label='password'/>
+                <MyTextField style={styles.textfield} mode='outlined' placeholder='Email' label='Email' onChangeText={email => setEmail(email)} value={email} />
+                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Password' label='password' onChangeText={password => setPassword(password)} value={password}/>
                 <MyButton style={styles.button} title="Sign In" onPress={() => signIn()} />
                 <Text style={styles.text} onPress={() => navigation.push("SignUp")}>Don't have a user?</Text>
             </View>

salamander-app/screens/SignUpScreen.js

-import React from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, Text, View, Image, ScrollView } from 'react-native'
 import MyTextField from '../components/MyTextField'
 import MyButton from '../components/MyButton'
+import APIKit from '../APIkit'; 
+
 
 const SignUpScreen = ({ navigation }) => {
+
+    const [name, setName] = React.useState('');
+    const [email, setEmail] = React.useState('');
+    const [password, setPassword] = React.useState('');
+    const [confirmPassword, setConfirmPassword] = React.useState('');
+
+    function signUp() {
+        let bodyFormData = new FormData();
+        bodyFormData.append("name", name)
+        bodyFormData.append("email", email)
+        bodyFormData.append("password", password)
+        bodyFormData.append("confirmPassword", confirmPassword)
+
+
+        APIKit.post('/user', bodyFormData)
+            .then(function (response) {
+                //handle success
+                console.log(response.data.message);
+            })
+            .catch(function (response) {
+                //handle error
+                console.log(response);
+            });
+    }
+
     return (
         <ScrollView style={styles.scrollView}>
             <View style={styles.container}>
@@ -13,11 +40,11 @@ const SignUpScreen = ({ navigation }) => {
                         source={require('../assets/images/ninaLogo.png')}
                     />
                 </View>
-                <MyTextField style={styles.textfield} mode='outlined' placeholder='Name' label='Name'/>
-                <MyTextField style={styles.textfield} mode='outlined' placeholder='Email' label='Email'/>
-                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Password' label='password'/>
-                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Confirm Password' label='Confirm Password'/>
-                <MyButton style={styles.button} title="Sign Up" onPress={() => console.log("Pressed")} />
+                <MyTextField style={styles.textfield} mode='outlined' placeholder='Name' label='Name' onChangeText={name => setName(name)} value={name} />
+                <MyTextField style={styles.textfield} mode='outlined' placeholder='Email' label='Email' onChangeText={email => setEmail(email)} value={email} />
+                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Password' label='password' onChangeText={password => setPassword(password)} value={password} />
+                <MyTextField style={styles.textfield} mode='outlined' secureTextEntry={true} placeholder='Confirm Password' label='Confirm Password' onChangeText={confirmPassword => setConfirmPassword(confirmPassword)} value={confirmPassword} />
+                <MyButton style={styles.button} title="Sign Up" onPress={() => signUp()} />
                 <Text style={styles.text} onPress={() => navigation.push("SignIn")}>Already have a user?</Text>
             </View>
         </ScrollView>