Commit 56225f1d authored by Laurent's avatar Laurent

Implémentation de redux + login form

parent d38333f0
const API_BASE_URL = "https://crsmons.jsb.be/api1/";
export function getJeunes(){
const url = API_BASE_URL + "jeunes";
return fetch(url, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + API_TOKEN,
}
})
.then((response) => response.json())
.catch((error) => console.error(error))
}
export function login(login,pass){
const url = API_BASE_URL + "login_check";
return fetch(url,{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
_username: login,
_password: pass,
})
})
.then((response) => response.json())
.catch((error) => console.error(error))
;
}
import React from 'react';
import { StyleSheet, Button, Text, View, TextInput } from 'react-native';
import { StyleSheet, Text, View } from 'react-native';
import * as Font from 'expo-font';
import LoginForm from './LoginForm';
import { Provider } from 'react-redux';
import Store from './Store/configureStore';
class App extends React.Component {
......@@ -24,12 +27,12 @@ class App extends React.Component {
titre = <Text >Bienvenue sur CRS Mons App !</Text>;
}
return(
<View style={styles.container}>
{titre}
<TextInput placeholder="Nom d'utilisateur"/>
<TextInput placeholder="Mot de passe"/>
<Button title='Se connecter'/>
</View>
<Provider store={Store}>
<View style={styles.container}>
{titre}
<LoginForm />
</View>
</Provider>
)
;
}
......
import React from 'react';
import { StyleSheet, Button, Text, View, TextInput, Alert, ActivityIndicator } from 'react-native';
import { login } from './API/CRSMonsApi';
import { connect } from 'react-redux';
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
login: null,
pass: null,
loading: false,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
if(this.state.login == null || this.state.login.length < 3){
Alert.alert("Attention","Merci d'entrer un nom d'utilisateur d'au moins 3 caractères");
}else{
if(this.state.pass == null || this.state.pass.length < 3){
Alert.alert("Attention","Merci d'entrer un mot de passe valide");
}else{
this.setState({loading: true})
login(this.state.login, this.state.pass).then(data => this._gestionAPIResponse(data));
}
}
}
_gestionAPIResponse(data){
if(data.hasOwnProperty('token')){
const action = { type: "SET_TOKEN", value: data.token};
this.props.dispatch(action);
}
if(data.hasOwnProperty('code')){
switch (data.code) {
case 401: Alert.alert("Oups","Les identifiants ne sont pas correctes"); break;
default : Alert.alert("Oups", "Il n'a pas été possible de vous connecter");
}
}
this.setState({ loading: false})
}
render() {
let placeHolderLogin = null;
let placeHolderMDP = null;
if(this.state.login == null){
placeHolderLogin = "Nom d'utilisateur"
}
if(this.state.pass == null){
placeHolderMDP = "Mot de passe"
}
return (
<View>
<TextInput name='login' placeholder={placeHolderLogin} value={this.state.login} onChangeText={(text) => { this.setState({login: text}) }} underlineColorAndroid="#00ff00"/>
<TextInput name='pass' placeholder={placeHolderMDP} value={this.state.pass} onChangeText={(text) => { this.setState({pass: text})}} secureTextEntry={true} />
<Button title='Se connecter' onPress={this.handleClick}/>
{this.state.loading && <View style={styles.loading}><ActivityIndicator size='large' /></View>}
</View>
);
}
}
const styles = StyleSheet.create({
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
export default connect()(LoginForm);
\ No newline at end of file
const initialState = { token: null };
function setToken(state = initialState, action){
let nextState;
console.log(state);
switch (action.type) {
case 'SET_TOKEN' : nextState = {
...state,
token: action.value
}
return nextState || state;
default : return state;
}
}
export default setToken;
\ No newline at end of file
import { createStore } from 'redux';
import setToken from './Reducers/tokenReducer';
export default createStore(setToken)
\ No newline at end of file
......@@ -3434,6 +3434,14 @@
}
}
},
"hoist-non-react-statics": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "2.8.4",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.4.tgz",
......@@ -5407,6 +5415,19 @@
"react-deep-force-update": "^1.0.0"
}
},
"react-redux": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz",
"integrity": "sha512-QsW0vcmVVdNQzEkrgzh2W3Ksvr8cqpAv5FhEk7tNEft+5pp7rXxAudTz3VOPawRkLIepItpkEIyLcN/VVXzjTg==",
"requires": {
"@babel/runtime": "^7.5.5",
"hoist-non-react-statics": "^3.3.0",
"invariant": "^2.2.4",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^16.9.0"
}
},
"react-timer-mixin": {
"version": "0.13.4",
"resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
......@@ -5454,6 +5475,15 @@
"util-deprecate": "~1.0.1"
}
},
"redux": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.4.tgz",
"integrity": "sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==",
"requires": {
"loose-envify": "^1.4.0",
"symbol-observable": "^1.2.0"
}
},
"regenerate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
......@@ -6379,6 +6409,11 @@
"has-flag": "^3.0.0"
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
},
"temp": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment