|
1 |
| -import React, { useState, useEffect } from "react" |
2 |
| -import { Link, Navigate, useSearchParams } from "react-router-dom" |
3 |
| -import axios from "axios" |
| 1 | +import React, { useState, useEffect } from "react"; |
| 2 | +import { Link, Navigate, useSearchParams } from "react-router-dom"; |
| 3 | +import axios from "axios"; |
4 | 4 | // import logo from './logo.svg';
|
5 |
| -import "./Login.css" |
| 5 | +import "./Login.css"; |
6 | 6 |
|
7 | 7 | const Signup = props => {
|
8 |
| - let [urlSearchParams] = useSearchParams() // get access to the URL query string parameters |
| 8 | + // let [urlSearchParams] = useSearchParams() // get access to the URL query string parameters |
9 | 9 |
|
10 | 10 | // create state variables to hold username and password
|
11 |
| - const [response, setResponse] = useState({}) // the API will return an object with a JWT token, if the user logs in successfully |
12 |
| - const [errorMessage, setErrorMessage] = useState("") |
| 11 | + const [response, setResponse] = useState({}); // the API will return an object with a JWT token, if the user logs in successfully |
| 12 | + const [errorMessage, setErrorMessage] = useState(""); |
13 | 13 |
|
14 | 14 | // if the user's logged-in status changes, save the token we receive from the server
|
15 | 15 | useEffect(() => {
|
16 | 16 | // if the user is logged-in, save the token to local storage
|
17 | 17 | if (response.success && response.token) {
|
18 |
| - console.log(`User successfully logged in: ${response.username}`) |
19 |
| - localStorage.setItem("token", response.token) // store the token into localStorage |
| 18 | + console.log(`User successfully logged in: ${response.username}`); |
| 19 | + localStorage.setItem("token", response.token); // store the token into localStorage |
20 | 20 | }
|
21 |
| - }, [response]) |
| 21 | + }, [response]); |
22 | 22 |
|
23 | 23 | // what to do when the user clicks the submit buton on the form
|
24 | 24 | const handleSubmit = async e => {
|
25 | 25 | // prevent the HTML form from actually submitting... we use React's javascript code instead
|
26 |
| - e.preventDefault() |
| 26 | + e.preventDefault(); |
27 | 27 |
|
28 | 28 | try {
|
29 | 29 | // create an object with the data we want to send to the server
|
30 | 30 | const requestData = {
|
31 | 31 | username: e.target.username.value, // gets the value of the field in the submitted form with name='username'
|
32 | 32 | password: e.target.password.value, // gets the value of the field in the submitted form with name='password',
|
33 |
| - } |
| 33 | + }; |
34 | 34 | // send a POST request with the data to the server api to authenticate
|
35 | 35 | const response = await axios.post(
|
36 | 36 | `${process.env.REACT_APP_BACKEND}/auth/signup`,
|
37 | 37 | requestData
|
38 |
| - ) |
| 38 | + ); |
39 | 39 | // store the response data into s the data state variable
|
40 |
| - console.log(`Server response: ${JSON.stringify(response.data, null, 0)}`) |
41 |
| - setResponse(response.data) |
| 40 | + console.log(`Server response: ${JSON.stringify(response.data, null, 0)}`); |
| 41 | + setResponse(response.data); |
42 | 42 | } catch (err) {
|
43 | 43 | // request failed... user entered invalid credentials
|
44 | 44 | setErrorMessage(
|
45 | 45 | "The username or password you entered are not valid. Try harder! "
|
46 |
| - ) |
| 46 | + ); |
47 | 47 | }
|
48 |
| - } |
| 48 | + }; |
49 | 49 |
|
50 | 50 | // if the user is not logged in, show the signup form
|
51 | 51 | if (!response.success)
|
@@ -74,10 +74,10 @@ const Signup = props => {
|
74 | 74 | </p>
|
75 | 75 | </section>
|
76 | 76 | </div>
|
77 |
| - ) |
| 77 | + ); |
78 | 78 | // otherwise, if the user has successfully logged-in, redirect them to a different page
|
79 | 79 | // in this example, we simply redirect to the home page, but a real app would redirect to a page that shows content only available to logged-in users
|
80 |
| - else return <Navigate to="/" /> |
81 |
| -} |
| 80 | + else return <Navigate to="/" />; |
| 81 | +}; |
82 | 82 |
|
83 |
| -export default Signup |
| 83 | +export default Signup; |
0 commit comments