95 rivejä
No EOL
3,5 KiB
JavaScript
95 rivejä
No EOL
3,5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import Icon from '@iconify/react';
|
|
import plusIcon from '@iconify/icons-fa-solid/plus';
|
|
import '../../css/Components/connection.css'
|
|
import axios from 'axios';
|
|
import { Redirect } from 'react-router';
|
|
|
|
class Connection extends Component {
|
|
|
|
constructor(props){
|
|
super(props)
|
|
this.state={
|
|
identifyer:'',
|
|
password:'',
|
|
redirect:false,
|
|
errors:[]
|
|
}
|
|
}
|
|
|
|
handleIdentifyerChange = event => {
|
|
this.setState({identifyer : event.target.value})
|
|
}
|
|
|
|
handlePasswordChange = event => {
|
|
this.setState({password : event.target.value})
|
|
}
|
|
|
|
handleSubmit = (event) => {
|
|
event.preventDefault()
|
|
console.log(this.state.password);
|
|
|
|
let bodyFormData = new FormData();
|
|
bodyFormData.set('identifyer',this.state.identifyer);
|
|
bodyFormData.set('password',this.state.password)
|
|
|
|
axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/login',bodyFormData)
|
|
.then(res => {
|
|
sessionStorage.setItem('token',res.data.api_token)
|
|
this.setState({redirect:true})
|
|
console.log(res.data.api_token);
|
|
})
|
|
.catch(error => {
|
|
if(error.response.status === 401){
|
|
this.setState({errors:error.response.data.errors})
|
|
}
|
|
console.log(error.response);
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if (this.state.redirect){
|
|
return (<Redirect to="/stock"/>)
|
|
}
|
|
return (
|
|
<div id="transp">
|
|
<div id="formBody">
|
|
<div id="formHead">
|
|
<div id="formHeadTxt">Connexion</div>
|
|
<div id="crossClose" onClick={this.props.handleCloseAbove}>
|
|
<Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '3vw'}} />
|
|
</div>
|
|
</div>
|
|
<div id="formMainContent">
|
|
<form method='POST' onSubmit={this.handleSubmit}>
|
|
<div id="identifyerBlock">
|
|
<div id="identifyerBlockInput">
|
|
<label htmlFor="identifyerBox">Identifiant</label>
|
|
<input id="identifyerBox" onChange={this.handleIdentifyerChange} type="text"/>
|
|
</div>
|
|
<div id="errorIdentifyerBlock">
|
|
<p id="errorIdentifyer">{this.state.errors.identifyer}</p>
|
|
</div>
|
|
</div>
|
|
<div id="passwordBlock">
|
|
<div id="passwordBlockInput">
|
|
<label htmlFor="passwordBox">Mot de Passe</label>
|
|
<input id="passwordBox" onChange={this.handlePasswordChange} type="password"/>
|
|
</div>
|
|
<div id="errorPasswordBlock">
|
|
{this.state.errors === 'bad_pwd'?
|
|
<p id="errorPassword">Mot de passe incorrect</p>
|
|
:
|
|
<p id="errorPassword">{this.state.errors.password}</p>}
|
|
</div>
|
|
</div>
|
|
<button id="button" type='submit'>Se connecter</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Connection; |