Skip to content
Snippets Groups Projects
Commit 1beaa964 authored by COURTES Guillaume's avatar COURTES Guillaume
Browse files

add athenticate navigation to access to authorized screens with login screen

parent bacd0669
Branches
No related tags found
No related merge requests found
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import HomeScreen from './components/HomeScreen'
import DiscussionsScreen from './components/DiscussionsScreen'
import ProfileScreen from './components/ProfileScreen'
const Tab = createBottomTabNavigator ();
import AuthenticateNavigation from './components/AuthenticateNavigation'
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
inactiveColor="#ffffff55"
barStyle={{ backgroundColor: '#5352ed' }}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Accueil',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'home'} solid color={color} size={20} />
),
}}
/>
<Tab.Screen
name="Discussions"
component={DiscussionsScreen}
options={{
tabBarLabel: 'Discussions',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'comments'} solid color={color} size={20} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profil',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'user-alt'} solid color={color} size={20} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
<AuthenticateNavigation />
);
}
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { AsyncStorage, ActivityIndicator, View } from 'react-native';
import HomeScreen from './HomeScreen'
import DiscussionsScreen from './DiscussionsScreen'
import ProfileScreen from './ProfileScreen'
import LoginScreen from './LoginScreen'
const Tab = createBottomTabNavigator();
class AuthenticateNavigation extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false,
isLoading: true
}
}
async componentDidMount() {
try {
const token = await AsyncStorage.getItem('@token');
if (token !== null) {
this.setState({ isAuthenticated: true });
}
} catch (error) {
// Error retrieving data
}
this.setState({ isLoading: false });
}
updateAuthentication() {
this.setState((state) => {
return {
isAuthenticated: !state.isAuthenticated,
};
});
}
checkLogin(username, password) {
let status = null;
//login to API
fetch('http://localhost:3000/users/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password,
})
})
.then(response => {
status = response.status;
return response.json();
})
.then(async (json) => {
//OK Status : we store the token & the user in local storage
if (status == 200) {
try {
await AsyncStorage.setItem(
'@token',
json.token
);
} catch (error) {
//Error saving data
}
try {
const jsonUser = JSON.stringify(json.user)
await AsyncStorage.setItem(
'@user',
jsonUser
);
} catch (error) {
//Error saving data
}
//user is logged, we update isAuthenticated to true
this.updateAuthentication();
}
//Handled error status
else if ("error" in json) {
console.warn(json.error);
}
//Unhandled error status
else {
console.warn("Unhandled error");
}
})
.catch(async (error) => {
//Error fetching url
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator size="large" />
</View>
)
}
else if (this.state.isAuthenticated)
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
inactiveColor="#ffffff55"
barStyle={{ backgroundColor: '#5352ed' }}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Accueil',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'home'} solid color={color} size={20} />
),
}}
/>
<Tab.Screen
name="Discussions"
children={(props) => <DiscussionsScreen {...props} updateAuthentication={this.updateAuthentication.bind(this)} />}
options={{
tabBarLabel: 'Discussions',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'comments'} solid color={color} size={20} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profil',
tabBarIcon: ({ color }) => (
<FontAwesome5 name={'user-alt'} solid color={color} size={20} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
else
return (
<LoginScreen checkLogin={this.checkLogin} updateAuthentication={this.updateAuthentication.bind(this)} />
)
}
};
export default AuthenticateNavigation;
\ No newline at end of file
import React from 'react';
import {
View,
StyleSheet
} from 'react-native';
import { Input, Button, Text } from 'react-native-elements';
class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
}
}
checkLogin() {
this.props.checkLogin(this.state.username, this.state.password);
}
updateAuthentication() {
this.props.updateAuthentication();
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<Text h1>Bonjour !</Text>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<Input
placeholder="Pseudonyme"
style={{ fontSize: 16, borderBottomColor: "grey" }}
leftIcon={{ type: 'font-awesome', name: 'user', color: "black" }}
onChangeText={value => this.setState({ username: value })}
placeholderTextColor={"black"}
/>
<Input
placeholder="Mot de passe"
style={{ fontSize: 16, borderBottomColor: "grey" }}
leftIcon={{ type: 'font-awesome', name: 'lock', color: "black" }}
onChangeText={value => this.setState({ password: value })}
secureTextEntry={true}
placeholderTextColor={"black"}
/>
<Button
containerStyle={styles.customButton}
title="Se connecter"
onPress={this.checkLogin.bind(this)}
/>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}>
<Text
onPress={() => null}>
Pas encore de compte ? S'incrire
</Text>
</View>
</View>
)
}
};
const styles = StyleSheet.create({
customButton: {
borderRadius: 1000,
width: '65%',
textAlign: 'center',
}
})
export default LoginScreen;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment