Skip to content
Snippets Groups Projects
Commit 540f924f authored by Vincent Seyller's avatar Vincent Seyller
Browse files

V1 TP3

parent 83bcae46
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tp/src/App.js
+ 15
− 11
View file @ 540f924f
// import { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import './App.css';
// import TodoList from './TodoList'
// import SW from './SW'
import TP3 from './TP3'
import Menu from './Menu'
// let Toggle = () => {
// let [currentValue, setCurrentValue] = useState(false);
......@@ -32,16 +34,18 @@ import TP3 from './TP3'
let App = () => {
return (
<div className="App">
{/* <Toggle />
<Toggle />
<Toggle />
<Toggle />
<Counter />
<TodoList />
<SW /> */}
<TP3 />
</div>
<Router>
<div className='App'>
{/* <Toggle />
<Toggle />
<Toggle />
<Toggle />
<Counter />
<TodoList />
<SW /> */}
<Menu />
</div>
</Router>
);
};
......
tp/src/Menu.js 0 → 100644
+ 129
− 0
View file @ 540f924f
import {
Switch,
Route,
Link,
useHistory
} from 'react-router-dom';
import {useEffect, useState} from 'react';
import Signin from './Signin'
import Signup from './Signup'
import Home from './Home'
import useLocalState from './localState';
let Menu = () => {
let history = useHistory();
let [token, setToken] = useLocalState('token', null);
let [user, setUser] = useState(null);
let [userCheck, setUserCheck] = useState(false);
let checkStatus = res => {
if (res.ok) {
return res;
} else {
return res.text()
.then(msg => { throw new Error(msg); });
}
};
let signin = (user, password) => {
return fetch(`http://127.0.0.1:4200/signin`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ 'username': user, 'password': password })
})
.then(checkStatus)
.then(res => res.json())
.then(data => {
setUser(data.user);
setToken(data.token);
history.push('/');
});
};
let signup = (user, password) => {
return fetch(`http://127.0.0.1:4200/signup`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ 'username': user, 'password': password })
})
.then(checkStatus)
.then(res => res.json())
.then(() => {
history.push('/signin');
});
};
let signout = () => {
setUser(null);
setToken(null);
}
let checkUser = () => {
setUserCheck(true);
if(token) {
fetch(`http://127.0.0.1:4200/whoami`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
}
})
.then(checkStatus)
.then(res => res.json())
.then(data => {
setUser(data);
console.log("Connecté");
})
.catch(err => { console.log(err) });
}
setUserCheck(false);
}
useEffect(() => {
checkUser();
}, []);
return (
<div>
{ userCheck ? 'Checking for Authentification...' :
<div>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
{user ?
<li>
Connected as {user.username} <button onClick={signout}> Signout</button>
</li> :
<div>
<li>
<Link to='/Signin'>Signin</Link>
</li>
<li>
<Link to='/Signup'>Signup</Link>
</li>
</div>
}
</ul>
</nav>
<Switch>
<Route path='/signin'>
<Signin signin={signin}/>
</Route>
<Route path='/signup'>
<Signup signup={signup}/>
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</div>
}
</div>
);
};
export default Menu;
tp/src/Signin.js
+ 9
− 9
View file @ 540f924f
import {useState} from "react";
import {useState} from 'react';
let Signin = ({signin}) => {
let [user, setUser] = useState("");
let [password, setPassword] = useState("");
let [error, setError] = useState("");
let [user, setUser] = useState('');
let [password, setPassword] = useState('');
let [error, setError] = useState('');
let handleSubmit = e => {
e.preventDefault();
signin(user, password)
.catch(err => { setError(err.message); console.log("test"); });
.catch(err => { setError(err.message); });
setUser('');
setPassword('');
};
......@@ -25,11 +25,11 @@ let Signin = ({signin}) => {
<h2>Signin</h2>
<form onSubmit={handleSubmit}>
<p><label>User :</label></p>
<p><input type="text" name="user" value={user} onChange={handleUserChange} /></p>
<p><input type='text' name='user' value={user} onChange={handleUserChange} /></p>
<p><label>Password :</label></p>
<p><input type="password" name="password" value={password} onChange={handlePasswordChange} /></p>
<p><button type="submit">Submit</button></p>
<p><label value={error}></label></p>
<p><input type='password' name='password' value={password} onChange={handlePasswordChange} /></p>
<p><button type='submit'>Submit</button></p>
<p>{error}</p>
</form>
</div>
};
......
tp/src/Signout.js deleted 100644 → 0
+ 0
− 5
View file @ 83bcae46
let Signout = () => {
return <h2>Signout</h2>;
};
export default Signout;
tp/src/Signup.js
+ 7
− 7
View file @ 540f924f
import {useState} from "react";
import {useState} from 'react';
let Signup = ({signup}) => {
let [user, setUser] = useState("");
let [password, setPassword] = useState("");
let [error, setError] = useState("");
let [user, setUser] = useState('');
let [password, setPassword] = useState('');
let [error, setError] = useState('');
let handleSubmit = e => {
e.preventDefault();
......@@ -25,10 +25,10 @@ let Signup = ({signup}) => {
<h2>Signup</h2>
<form onSubmit={handleSubmit}>
<p><label>User :</label></p>
<p><input type="text" name="user" value={user} onChange={handleUserChange} /></p>
<p><input type='text' name='user' value={user} onChange={handleUserChange} /></p>
<p><label>Password :</label></p>
<p><input type="password" name="password" value={password} onChange={handlePasswordChange} /></p>
<p><button type="submit">Submit</button></p>
<p><input type='password' name='password' value={password} onChange={handlePasswordChange} /></p>
<p><button type='submit'>Submit</button></p>
<p>{error}</p>
</form>
</div>
......
tp/src/TP3.js deleted 100644 → 0
+ 0
− 89
View file @ 83bcae46
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Signin from './Signin'
import Signup from './Signup'
import Signout from './Signout'
import Home from './Home'
let TP3 = () => {
let user = null;
let checkStatus = res => {
if (res.ok) {
return res;
} else {
return res.text()
.then(msg => { throw new Error(msg); });
}
};
let signin = (user, password) => {
return fetch(`http://127.0.0.1:4200/signin`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({user, password})
})
.then(checkStatus)
.then(res => res.json())
.then(data => {
console.log(data);
});
};
let signup = (user, password) => {
return fetch(`http://127.0.0.1:4200/signup`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({user, password})
})
.then(checkStatus)
.then(res => res.json())
.then(data => {
console.log(data);
});
};
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/Signin">Signin</Link>
</li>
<li>
<Link to="/Signup">Signup</Link>
</li>
<li>
<Link to="/Signout">Signout</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/signin">
<Signin signin={signin}/>
</Route>
<Route path="/signup">
<Signup signup={signup}/>
</Route>
<Route path="/signout">
<Signout />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
};
export default TP3;
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