Loading ...
46 |
47 | return (
48 | This is the content.
;
11 | }
12 |
13 | export default Content;
--------------------------------------------------------------------------------
/frontend/src/components/Login.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext, useEffect } from 'react';
2 | import { navigate } from '@reach/router';
3 | import { UserContext } from '../App';
4 |
5 | const Login = () => {
6 | const [user, setUser] = useContext(UserContext);
7 | const [email, setEmail] = useState('');
8 | const [password, setPassword] = useState('');
9 |
10 | const handleSubmit = async e => {
11 | e.preventDefault();
12 | const result = await (await fetch('http://localhost:4000/login', {
13 | method: 'POST',
14 | credentials: 'include', // Needed to include the cookie
15 | headers: {
16 | 'Content-Type': 'application/json',
17 | },
18 | body: JSON.stringify({
19 | email: email,
20 | password: password,
21 | }),
22 | })).json();
23 |
24 | if (result.accesstoken) {
25 | setUser({
26 | accesstoken: result.accesstoken,
27 | });
28 | navigate('/');
29 | } else {
30 | console.log(result.error);
31 | }
32 | };
33 |
34 | useEffect(() => {
35 | console.log(user)
36 | }, [user])
37 |
38 | const handleChange = e => {
39 | if (e.currentTarget.name === 'email') {
40 | setEmail(e.currentTarget.value);
41 | } else {
42 | setPassword(e.currentTarget.value);
43 | }
44 | };
45 |
46 | return (
47 |
61 | );
62 | };
63 |
64 | export default Register;
65 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background:steelblue ;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | .app {
11 | text-align: center;
12 | min-height: 100vh;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | color: #fff;
18 | font-size: 16px;
19 | }
20 |
21 | .login-wrapper {
22 | min-height: 200px;
23 | min-width: 300px;
24 | background: #fff;
25 | padding: 20px;
26 | border-top: 5px lightblue solid;
27 | color: #000;
28 | }
29 |
30 | .login-input button {
31 | background: lightblue;
32 | display: block;
33 | width: 100%;
34 | height: 50px;
35 | }
36 |
37 | .login-input input {
38 | display: block;
39 | padding: 20px;
40 | width: 100%;
41 | height: 50px;
42 | margin: 10px 0;
43 | box-sizing: border-box;
44 | }
45 |
46 | ul {
47 | list-style-type: none;
48 | margin: 40px auto;
49 | width: 300px;
50 | padding: 0;
51 | }
52 |
53 | ul li {
54 | display: inline-block;
55 | margin: 10px;
56 | }
57 |
58 | a {
59 | color: white;
60 | text-decoration: none;
61 | }
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(