aaAa

frontend/src/App.js

@@ -1,18 +1,22 @@
+import React from "react";
 import './App.css';
 import HomePage from './pages/HomePage'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { AuthProvider } from "./context/AuthContext";
 import AuthPage from './pages/AuthPage'
 
 function App() {
   return (
-    <Router>
 
+    <Router>
+    <AuthProvider>
     <Routes>
     <Route path="/auth" element={<AuthPage />} />
     <Route path="/" element={<div className="App">
       <HomePage />
       </div>} />
     </Routes>
+    </AuthProvider>
     </Router>
 
   );

frontend/src/components/LoginForm.jsx

@@ -14,10 +14,12 @@ import {
 from 'mdb-react-ui-kit';
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
+import { useContext } from "react";
+import AuthContext from "../context/AuthContext";
 
 const LoginForm = () => {
 
-  const [justifyActive, setJustifyActive] = useState('tab1');;
+  const [justifyActive, setJustifyActive] = useState('tab1');
 
   const handleJustifyClick = (value) => {
     if (value === justifyActive) {
@@ -27,6 +29,14 @@ const LoginForm = () => {
     setJustifyActive(value);
   };
 
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+
+  const { loginUser } = useContext(AuthContext);
+  const handleLoginSubmit = () => {
+    username.length > 0 && loginUser(username, password);
+  };
+
   return (
     <MDBContainer className="p-3 my-5 d-flex flex-column w-50">
 
@@ -47,14 +57,19 @@ const LoginForm = () => {
 
         <MDBTabsPane show={justifyActive === 'tab1'}>
 
-          <MDBInput wrapperClass='mb-4' label='Username' id='form1' type='email'/>
-          <MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
+          <MDBInput wrapperClass='mb-4' label='Username' id='form1' type='username' value={username} onInput={e => setUsername(e.target.value)}/>
+          <MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'value={password} onInput={e => setPassword(e.target.value)}/>
 
           <div className="d-flex justify-content-between mx-4 mb-4">
             <MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
           </div>
 
-          <MDBBtn className="mb-4 w-100">Sign in</MDBBtn>
+          <MDBBtn
+            className="mb-4 w-100"
+            onClick={handleLoginSubmit}
+          >
+            Sign in
+          </MDBBtn>
           <p className="text-center">Not a member? <a href="#!" onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>Register</a></p>
 
         </MDBTabsPane>

frontend/src/components/MainCard.jsx

@@ -14,7 +14,7 @@ import {Link} from 'react-router-dom';
 
 const MainCard = () => {
   return (
-      <MDBCard style={{width: "80%"}}>
+      <MDBCard>
         <MDBCardBody>
           <MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
           <MDBCardText>

frontend/src/context/AuthContext.jsx

@@ -1,8 +1,8 @@
 import { createContext, useState, useEffect } from "react";
 import jwt_decode from "jwt-decode";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
-const AuthContext = createContext();
+const AuthContext = createContext("");
 
 export default AuthContext;
 
@@ -19,13 +19,14 @@ export const AuthProvider = ({ children }) => {
   );
   const [loading, setLoading] = useState(true);
 
-  const history = useHistory();
+  const history = useNavigate();
 
   const loginUser = async (username, password) => {
     const response = await fetch("http://127.0.0.1:8000/api/auth/token/", {
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
       },
       body: JSON.stringify({
         username,
@@ -35,6 +36,7 @@ export const AuthProvider = ({ children }) => {
     const data = await response.json();
 
     if (response.status === 200) {
+      console.log(response, data)
       setAuthTokens(data);
       setUser(jwt_decode(data.access));
       localStorage.setItem("authTokens", JSON.stringify(data));
@@ -44,16 +46,16 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  const registerUser = async (username, password, password2) => {
+  const registerUser = async (username, password) => {
     const response = await fetch("http://127.0.0.1:8000/api/auth/register/", {
       method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
       },
       body: JSON.stringify({
         username,
-        password,
-        password2
+        password
       })
     });
     if (response.status === 201) {