Changeset 5a9c93b for my-react-app/src/components/AppContent.js

Timestamp:

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

Author:

Aleksandar Panovski <apano77@…>

Branches:

main

Children:

db39d9e

Parents:

a2c6c2b

Message:

Authorization layer

File:

• my-react-app/src/components/AppContent.js (modified) (1 diff)

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>
         )