Changeset 5a9c93b for my-react-app

Timestamp:

03/05/24 14:15:44 (15 months ago)

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

db39d9e

Parents:

a2c6c2b

Message:

Authorization layer

Location:

my-react-app/src

Files:

• axios_helper.js (modified) (1 diff)
• components/AppContent.js (modified) (1 diff)
• components/Buttons.js (added)
• components/LoginForm.js (added)

my-react-app/src/axios_helper.js

@@ -4 +4 @@
 axios.defaults.headers.post["Content-Type"] = 'application/json'
 
+export const getAuthToken = () => {
+    return window.localStorage.getItem("auth_token");
+}
+
+export const setAuthToken = (token) => {
+    window.localStorage.setItem("auth_token", token);
+}
+
 export const request = (method, url, data) => {
+    let headers = {};
+    if(getAuthToken() !== null && getAuthToken() !== "null") {
+        headers = {"Authorization" : `Bearer ${getAuthToken()}`};
+    }
+
     return axios({
         method: method,

my-react-app/src/components/AppContent.js

@@ -2 +2 @@
 import WelcomeContent from "./WelcomeContent";
 import AuthContent from "./AuthContent";
+import LoginForm from "./LoginForm";
+import { request, setAuthToken } from "../axios_helper";
+import Buttons from './Buttons'
 
 export default class AppContent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            componentToShow: "welcome"
+        };
+    };
+
+    login = () => {
+        this.setState({componentToShow: "login"})
+    }
+
+    logout = () => {
+        this.setState({componentToShow: "welcome"})
+    }
+
+    onLogin = (e, email, password) => {
+        e.preventDefault();
+        request(
+            "POST",
+            "/api/login",
+            {login: email, password: password}
+        ).then((response) => {
+            this.setState({componentToShow: "restaurants"})
+            setAuthToken(response.data.token);
+        }).catch((error) => {
+            this.setState({componentToShow: "welcome"})
+        });
+    };
+
+    onRegister = (e, firstName, lastName, email, password) => {
+        e.preventDefault();
+        request(
+            "POST",
+            "/api/register",
+            {
+                firstName: firstName,
+                lastName: lastName,
+                login: email,
+                password: password
+            }
+        ).then((response) => {
+            this.setState({componentToShow: "restaurants"})
+            setAuthToken(response.data.token);
+        }).catch((error) => {
+            this.setState({componentToShow: "welcome"})
+        });
+    };
+
     render() {
         return (
             <div>
-                <WelcomeContent/>
-                <AuthContent/>
+                <Buttons login={this.login} logout={this.logout}></Buttons>
+                {this.state.componentToShow === "welcome" && <WelcomeContent/>}
+                {this.state.componentToShow === "restaurants" && <AuthContent/>}
+                {this.state.componentToShow === "login" && <LoginForm onLogin={this.onLogin} onRegister={this.onRegister}/>}
             </div>
         )