Added login functionality and a redirect if not logged in

This commit is contained in:
cami 2021-06-23 00:15:43 +02:00
parent 27e4d10b78
commit 8e67a91dc1
5 changed files with 54 additions and 5 deletions

View file

@ -8,8 +8,10 @@ import Ueber from "./components/pages/Ueber";
import Lizenzen from "./components/pages/lizenzen"; import Lizenzen from "./components/pages/lizenzen";
import Privacy from "./components/pages/Privacy"; import Privacy from "./components/pages/Privacy";
import Login from "./components/pages/Login"; import Login from "./components/pages/Login";
import Register from "./components/pages/Register" import Register from "./components/pages/Register";
import Manual from "./components/pages/Manual"; import Manual from "./components/pages/Manual";
import Secret from "./components/pages/Secret";
import PrivateRoute from "./auth/PrivateRoute";
function App() { function App() {
return ( return (
@ -25,6 +27,8 @@ function App() {
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/register" component={Register} /> <Route path="/register" component={Register} />
<Route path="/manual" component={Manual} /> <Route path="/manual" component={Manual} />
<Route path="/ueber" component={Ueber} />
<PrivateRoute path="/secret" component={Secret} />
</Switch> </Switch>
</Router> </Router>
</> </>

View file

@ -0,0 +1,18 @@
import { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import { useAuth } from "./AuthProvider";
const PrivateRoute = ({ component: Component, ...rest }) => {
const [logged] = useAuth();
return (
<Route
{...rest}
render={(props) =>
logged ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
};
export default PrivateRoute

View file

@ -66,7 +66,7 @@ function Navbar() {
</li> </li>
<li> <li>
<Link <Link
to="/sign-up" to="/login"
className="nav-links-mobile" className="nav-links-mobile"
onClick={closeMobileMenu} onClick={closeMobileMenu}
> >

View file

@ -4,7 +4,8 @@ import "../../App.css";
import Footer from "../../Footer"; import Footer from "../../Footer";
import InputField from "../InputField"; import InputField from "../InputField";
import SubmitField from "../SubmitField"; import SubmitField from "../SubmitField";
import { login, useAuth, logout } from "../../auth/AuthProvider"; import { login, authFetch, useAuth, logout } from "../../auth/AuthProvider";
import Secret from "./Secret";
export default function Login() { export default function Login() {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
@ -12,7 +13,6 @@ export default function Login() {
const onSubmitClick = (e) => { const onSubmitClick = (e) => {
e.preventDefault(); e.preventDefault();
console.log("You pressed login");
let opts = { let opts = {
username: username, username: username,
password: password, password: password,
@ -26,7 +26,6 @@ export default function Login() {
.then((token) => { .then((token) => {
if (token.access_token) { if (token.access_token) {
login(token); login(token);
console.log(token);
} else { } else {
console.log("Please type in the correct username / password"); console.log("Please type in the correct username / password");
} }
@ -65,7 +64,10 @@ export default function Login() {
<SubmitField onClick={onSubmitClick} LabelName="Einloggen" /> <SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
</form> </form>
) : ( ) : (
<>
<Secret/>
<button onClick={() => logout()}>Logout</button> <button onClick={() => logout()}>Logout</button>
</>
)} )}
</div> </div>
<Footer /> <Footer />

View file

@ -0,0 +1,25 @@
import { useEffect, useState } from "react/cjs/react.development";
import {authFetch} from "../../auth/AuthProvider.js"
function Secret() {
const [message, setMessage] = useState("");
useEffect(() => {
authFetch("/api/protected")
.then((response) => {
if (response.status === 401) {
setMessage("Sorry, du bist nicht angemeldet");
return null;
}
return response.json();
})
.then((response) => {
if (response && response.message) {
setMessage(response.message);
}
});
}, []);
return <h2>Secret: {message}</h2>;
}
export default Secret;