Add Login and Auth components

Author: ahamed-dd

Frontend/package-lock.json

@@ -10,6 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.10.9",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "axios": "^1.13.2",
+    "framer-motion": "^12.23.25",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.6"

Frontend/package.json

@@ -5,17 +5,26 @@ import { Home } from './Pages/Home'
 import { Login } from './Pages/Login'
 import { Register } from './Pages/Register'
 import { Navbar } from './Components/Navbar'
+import { Tasks } from './Pages/Tasks'
+import { ChakraProvider } from '@chakra-ui/react'
+import { AuthProvider } from './Contexts/useAuth'
+import PrivateRoute from './Components/PrivateRoute'
 
 function App () {
   return(
-    <>
-    <Navbar/>
-    <Routes>
-      <Route path='/' element={<Home/>}/>
-      <Route path='/login' element={<Login/>}/>
-      <Route path='/Register' element={<Register/>}/>
-    </Routes>
-    </>
+    
+    <ChakraProvider>
+      <Navbar/>
+
+      <AuthProvider>
+        <Routes>
+          <Route path='/' element={<Home/>}/>
+          <Route path='/login' element={<Login/>}/>
+          <Route path='/Register' element={<Register/>}/>
+          <Route path='/tasks' element={<PrivateRoute><Tasks/></PrivateRoute>}/>
+        </Routes>
+      </AuthProvider>
+    </ChakraProvider>
   )
 }
 

Frontend/src/App.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../Contexts/useAuth';
+import { Heading } from '@chakra-ui/react';
+
+import { useNavigate } from 'react-router-dom';
+
+const PrivateRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+  const nav = useNavigate();
+  
+  if (loading) return <Heading>Loading...</Heading>;
+
+  if (user) {
+    return children
+  }
+  else {
+    nav('/login')
+  }
+
+};
+
+export default PrivateRoute;

Frontend/src/Components/PrivateRoute.tsx

@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useState, useEffect } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom';
+import { userName, loginUser, logOut } from '../api/loginapi';
+
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({children}) => {
+    const [user, setUser] = useState(null)
+    const [loading, setLoading] = useState(true)
+    const nav = useNavigate()
+    const location = useLocation();
+
+    const getAuthenticatedUser = async () => {
+        try{
+            const user = await userName();
+            setUser(user);
+        } catch (err) {
+
+            setUser(null);
+        }finally{
+            setLoading(false);
+        }
+    }
+
+    const logoutUser = async () => {
+        try{
+        await logOut();
+        } catch (err) {
+          console.log(err)
+        } finally{
+            setUser(null)
+            nav('/home')
+        }
+    }
+    
+    // not yet used
+    const registerUser = async (username, email, password, confirm_password) => {
+      try {
+        if (password === confirm_password) {
+          await register(username, email, password)
+          alert('User successfully registered')
+          nav('/login')
+        }
+      } catch {
+        alert('error registering user')
+      }
+    }
+
+    const login = async (username, password) => {
+        const user = await loginUser(username, password)
+        if (user) {
+          setUser(user)
+          nav('/tasks')
+        } else {
+          alert('Incorrect username or password')
+        }
+    }
+
+    useEffect(() => {
+        getAuthenticatedUser();
+    }, [location.pathname])
+
+    return (
+  <AuthContext.Provider value={{ user, loading, login, logoutUser }}>
+    {children}
+  </AuthContext.Provider>
+);
+
+
+}
+export const useAuth = () => useContext(AuthContext);

Frontend/src/Contexts/useAuth.tsx

@@ -1,11 +1,49 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { loginUser } from "../api/loginapi";
+import { VStack, Button, FormControl, FormLabel } from "@chakra-ui/react";
+import { useAuth } from "../Contexts/useAuth";
 
-export function Login () {
-    return(
-        <>
-        <h2>Login Page</h2>
-        <input type="text" placeholder="Username"/>
-        <input type="text" placeholder="Password"/>
-        <button>Login</button>
-        </>
-    )
-}
+export function Login() {
+  const [Username, setUsername] = useState("");
+  const [Password, setPassword] = useState("");
+  const [err, setErr] = useState("");
+  const nav = useNavigate();
+  const { login } = useAuth()
+
+  const handlelogin = async (username, password) => {
+    try{
+      await login(username, password)
+    } catch (err) {
+      console.log(err)
+    }
+  };
+
+  return (
+    <VStack>
+      <h2>Login Page</h2>
+      <br></br>
+      <FormControl>
+        <FormLabel>Username</FormLabel>
+        <input
+        type="text"
+        value={Username}
+        placeholder="Username"
+        onChange={(e) => setUsername(e.target.value)}
+        />
+      </FormControl>
+      
+      <FormControl>
+        <FormLabel>Password</FormLabel>
+        <input
+        type="password"
+        value={Password}
+        placeholder="Password"
+        onChange={(e) => setPassword(e.target.value)}
+        />
+        {err && <div style={{ color: "red" }}>{err}</div>}
+      </FormControl>
+      
+      <Button onClick={() => {handlelogin(Username, Password)}}>Login</Button>
+    </VStack>
+)}

Frontend/src/Pages/Login.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react"
 import { registerUser } from "../api/loginapi"
+import { Button } from "@chakra-ui/react"
 
 export function Register () {
     const [username, setUsername] = useState("")
@@ -83,6 +84,7 @@ export function Register () {
         <>
         <h2>Register Page</h2>
         <label>
+        <br></br>
         <h4>Username</h4>
         <input 
         type="text" 
@@ -113,11 +115,11 @@ export function Register () {
         {errors.confirm && <div style={{ color: "red" }}>{errors.confirm}</div>}
         {serverError && <div style={{ color: "red", marginTop: 8 }}>{serverError}</div>}
         <br></br>
-        <button
+        <Button
         onClick={handleRegister}
         disabled={!isFormValid || isSubmitting}
         style={{ marginTop: 12 }}>
-            {isSubmitting ? "Registering..." : "Register"}</button>
+            {isSubmitting ? "Registering..." : "Register"}</Button>
 
         </>
     )

Frontend/src/Pages/Register.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react"
+import { logOut, userName } from "../api/loginapi"
+import { Button } from "@chakra-ui/react"
+import { useNavigate } from "react-router-dom"
+import { path } from "framer-motion/client"
+
+
+export function Tasks () {
+    const [user, setUser] = useState("")
+    const nav = useNavigate()
+
+    useEffect(() => {
+        const fetchName = async () => {
+            const name = await userName()
+            setUser(name)
+        }
+    })
+
+    const logout = async () => {
+        const wait = await logOut()
+        if (wait) {
+            nav('/')
+        }
+
+    }
+
+    return(
+        <>
+        <h1>Tasks</h1>
+        <h5>Welcome back {user}</h5>
+        <Button colorScheme="red" onClick={logout} >Logout</Button>
+        </>
+    )
+
+}

Frontend/src/Pages/Tasks.tsx

@@ -1,3 +1,8 @@
+import { Fade, Tr } from "@chakra-ui/react";
+import axios from "axios"
+import { tr } from "framer-motion/client";
+
+
 const BASE_URL = 'http://127.0.0.1:8000/'
 
 export const registerUser = async<DT> (user: DT) => {
@@ -15,4 +20,65 @@ export const registerUser = async<DT> (user: DT) => {
         console.log("Post Error", err)
     }
 
+}
+
+export async function loginUser<DT>(username: DT, password: DT) {
+    
+    const response = await axios.post(`${BASE_URL}accounts/token/`, 
+        {username: username, password: password},
+        {withCredentials: true}
+    )
+    return response.data.success
+    }
+
+
+export async function refreshToken () {
+    try{
+        await axios.post(`${BASE_URL}accounts/token/refresh/`, 
+        {},
+        {withCredentials:true}
+    )
+    return true
+    } catch (err){
+        return false
+    }
+}
+
+export async function userName() {
+    try{
+        const response = await axios.get(`${BASE_URL}accounts/me/`,
+            {withCredentials:true}
+         )
+         return response.data
+        } catch (err) {
+
+            return callRefresh(err, await axios.get(`${BASE_URL}accounts/me/`,
+            {withCredentials:true}
+         ) )
+
+        }
+
+}
+
+export async function callRefresh(err, func) {
+    if (err.response && err.response.status === 401){
+        const tokenRefreshed = await refreshToken();
+        if (tokenRefreshed){
+            const retryResponse = await func()
+            return retryResponse.data
+        }
+    }
+    return false
+}
+
+export async function logOut() {
+    try{
+        await axios.post(`${BASE_URL}accounts/logout/`,
+            {},
+            {withCredentials:true}
+        )
+        return true
+    } catch (err) {
+        return false
+    }
 }