#13 Made login page that actually send request to backend. CORS stuff.

backend/app/__init__.py

@@ -8,8 +8,6 @@ from config import Config
 db = SQLAlchemy()
 migrate = Migrate()
 login = LoginManager()
-login.login_view = "login"
-login.login_message = "Please log in to access this page."
 
 
 def create_app(config_class=Config):

backend/app/routes.py

@@ -1,6 +1,6 @@
-from flask_login import login_user, logout_user
+from flask_login import login_required, login_user, logout_user
 from app.bp import bp
-from flask import Response, jsonify, request
+from flask import jsonify, request
 from app.errors import error_response
 from flask_login import current_user
 
@@ -20,10 +20,10 @@ def login_route():
     if current_user.is_authenticated:
         return error_response(400, "A user is already logged in!")
 
-    if not data.get("user_id") or not data.get("password"):
-        return error_response(400, "Must supply user_id and password")
+    if not data.get("username") or not data.get("password"):
+        return error_response(400, "Must supply username and password")
 
-    user = User.query.get(data.get("user_id"))
+    user = User.query.filter_by(username=data["username"]).first()
     if not user:
         return error_response(400, "User not found")
 
@@ -36,10 +36,8 @@ def login_route():
 
 
 @bp.route("/logout", methods=["POST"])
+@login_required
 def logout_route():
-    if not current_user.is_authenticated:
-        return error_response(400, "No users are logged in!")
-
     resp = jsonify(current_user.to_dict())
     logout_user()
     return resp

backend/main.py

@@ -3,10 +3,12 @@ dotenv.load_dotenv()
 
 from app import create_app, db
 from app.models import User
+from flask_cors import CORS
 
 app = create_app()
+CORS(app, supports_credentials=True, resources={r"/.*": {"origins": r".*localhost.*"}})
+
 
 @app.shell_context_processor
 def make_shell_context():
-    return {'db': db, 'User': User}
-
+    return {"db": db, "User": User}

backend/requirements.txt

@@ -1,6 +1,7 @@
 alembic==1.10.2
 click==8.1.3
 Flask==2.2.3
+Flask-Cors==3.0.10
 Flask-HTTPAuth==4.7.0
 Flask-Login==0.6.2
 Flask-Migrate==4.0.4
@@ -12,6 +13,7 @@ Jinja2==3.1.2
 Mako==1.2.4
 MarkupSafe==2.1.2
 python-dotenv==1.0.0
+six==1.16.0
 SQLAlchemy==2.0.6
 typing_extensions==4.5.0
 Werkzeug==2.2.3

frontend/src/components/MyNavbar.jsx

@@ -1,4 +1,4 @@
-import { Nav, Container, Navbar, NavDropdown } from "react-bootstrap";
+import { Nav, Container, Navbar } from "react-bootstrap";
 
 const MyNavbar = () => {
   return (

frontend/src/pages/LoginPage.jsx

@@ -1,27 +1,61 @@
-import React from "react";
-import { Col, Container, Form, Row } from "react-bootstrap";
+import React, { useState } from "react";
+import { Button, Col, Container, Form, Row } from "react-bootstrap";
 import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
 
 const LoginPage = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const sendLoginRequest = async () => {
+    // await makeRequest({
+    //   url: "http://localhost:5000/login",
+    //   method: "POST",
+    //   body: { username, password },
+    // })
+    //   .then((resp) => resp.json())
+    //   .then((data) => {
+    //     console.log(data);
+    //   });
+  };
+
   return (
     <React.Fragment>
       <MyNavbar />
       <Container className="p-5">
         <Form>
           <Form.Group as={Row} className="mb-3" controlId="username">
-            <Form.Label column sm={2}>
+            <Form.Label column sm={2} className="me-2">
               Username
             </Form.Label>
-            <Col sm={10}>
-              <Form.Control type="username" placeholder="username" />
+            <Col sm={9}>
+              <Form.Control
+                type="username"
+                placeholder="username"
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                }}
+              />
             </Col>
           </Form.Group>
           <Form.Group as={Row} className="mb-3" controlId="password">
-            <Form.Label column sm={2}>
+            <Form.Label column sm={2} className="me-2">
               Password
             </Form.Label>
-            <Col sm={10}>
-              <Form.Control type="password" placeholder="password" />
+            <Col sm={9}>
+              <Form.Control
+                type="password"
+                placeholder="password"
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                }}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row} className="mb-3" controlId="submit">
+            <Col sm={2}></Col>
+            <Col sm={2}>
+              <Button type="submit">Submit</Button>
             </Col>
           </Form.Group>
           <Form.Group as={Row}>