Merge pull request #8 from AmanTahiliani/alexa-auth-frontend

Auth frontend

backend/api/user_login.py

@@ -18,7 +18,9 @@ class LoginView(APIView):
             user = authenticate(username=username, password=password)
             if user:
                 token, _ = Token.objects.get_or_create(user=user)
-                return Response({"token": token.key})
+                response = Response({"token": token.key}, status=status.HTTP_200_OK)
+                response.set_cookie("token", token.key)
+                return response
             else:
                 return Response(
                     {"error": "Invalid credentials"},

backend/peer_notes/settings.py

@@ -134,3 +134,7 @@ STATIC_URL = "static/"
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 AUTH_USER_MODEL = "api.PeerUser"
 CORS_ALLOW_ALL_ORIGINS = True
+# CORS_ALLOWED_ORIGINS = [
+# "http://localhost:5173"
+# ]
+CORS_ALLOW_CREDENTIALS = True

frontend/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.64",
@@ -569,6 +570,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
@@ -2373,6 +2382,36 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.64",

frontend/src/App.tsx

@@ -1,22 +1,56 @@
-import './App.css'
+import "./styles/App.css";
+import { Link, useNavigate } from 'react-router-dom';
 import MainSearch from './components/MainSearch';
+import { SessionContext, destroySessionCookie, getSessionCookie } from "./contexts/session";
+import { useState, useEffect, useContext } from "react";
 
-function App() {
+export default function App() {
+  const [session, setSession] = useState(getSessionCookie());
+  const navigate = useNavigate();
+
+  // Redirect to login if session is undefined
+  useEffect(
+    () => {
+      setSession(getSessionCookie());
+      if (session === undefined) {
+        navigate("/login");
+      }
+    },
+    [session, navigate]
+  ); 
 
   return (
     <>
-      <div className="App" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh' , gap: 15}}>
-      <img
-        src="/PeerNotes.png" 
-        alt="PeerNotes Logo" 
-        style={{ 
-          height: "100px"
-        }} 
-      />
-     <MainSearch />
-    </div>
+      <SessionContext.Provider value={session}>
+          <Navbar />
+          <div className="App" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '90vh' , gap: 15}}>
+            <img
+              src="/PeerNotes.png" 
+              alt="PeerNotes Logo" 
+              style={{ 
+                height: "100px"
+              }} 
+            />
+            <MainSearch />
+          </div>
+        </SessionContext.Provider>
     </>
   )
 }
+function Navbar() {
+  const session = useContext(SessionContext);
 
-export default App
+  const links = session ? (
+    <>
+      <Link to="/">Home</Link>
+      <Link to="/login" onClick={destroySessionCookie}>Logout</Link>
+    </>
+  ): (
+      <Link to="/login">Login</Link>
+  )
+  return (
+    <nav>
+     {links}
+    </nav>
+  );
+}

frontend/src/components/MainSearch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../screens/MainScreenWrapper.css';
+import '../styles/MainScreenWrapper.css';
 
 const MainSearch: React.FC = () => {
   return (

frontend/src/contexts/session.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+type SessionContextType = string | undefined;
+
+export const getSessionCookie = () => {
+    const sessionCookie = document.cookie
+        .split('; ')
+        .find(row => row.startsWith('token='))
+        ?.split('=')[1];
+    return sessionCookie;
+}
+export const destroySessionCookie = () => {
+    document.cookie = "token=; Max-Age=0;"
+}
+
+export const SessionContext = React.createContext<SessionContextType>(getSessionCookie());
+

frontend/src/hooks/sessionRedirect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { SessionContext } from "../contexts/session";
+
+export const useSessionRedirect = () => {
+  const session = useContext(SessionContext);
+  const navigate = useNavigate();
+  // Redirect to home if session is defined
+  useEffect(() => {
+    if (session !== undefined) {
+        navigate('/');
+    }
+  }, [session, navigate])
+}

frontend/src/main.tsx

@@ -2,9 +2,33 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Login from './screens/Login.tsx';
+import Signup from './screens/Signup.tsx';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      // add more routes here
+    ]
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/signup",
+    element: <Signup />,
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

frontend/src/screens/Login.tsx

@@ -0,0 +1,48 @@
+import { Link, useNavigate } from "react-router-dom"
+import "../styles/Login.css"
+import { FormEvent } from "react";
+import { useSessionRedirect } from "../hooks/sessionRedirect";
+
+export default function Login() {
+  const navigate = useNavigate();
+  
+  useSessionRedirect();
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const username = formData.get('username');
+    const password = formData.get('password');
+    fetch('http://localhost:8000/api/login/', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+    })
+    .then(() => {
+      navigate('/');
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+    });
+  }
+  return (
+      <main>
+        <form className="login-container" onSubmit={handleSubmit}>
+          <h1>Login</h1>
+          <div className="form-input">
+            <label htmlFor="username">Username</label>
+            <input type="text" name="username" id="username" />
+          </div>
+          <div className="form-input">
+            <label htmlFor="password">Password</label>
+            <input type="password" name="password" id="password" />
+          </div>
+          <button className="submit-button">Login</button>
+          <p>or <Link to="/signup">Sign up</Link></p>
+        </form>
+      </main>
+  );
+}

frontend/src/screens/Signup.tsx

@@ -0,0 +1,51 @@
+import { Link, useNavigate } from "react-router-dom";
+import "../styles/Login.css"
+import { FormEvent } from "react";
+import { useSessionRedirect } from "../hooks/sessionRedirect";
+export default function Signup() {
+    const navigate = useNavigate();
+    useSessionRedirect();
+
+    function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        const formData = new FormData(e.target as HTMLFormElement);
+        const email = formData.get('email');
+        const username = formData.get('username');
+        const password = formData.get('password');
+        fetch('http://localhost:8000/api/signup/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ email, username, password }),
+        })
+        .then(response => response.json())
+        .then(() => {
+            navigate('/login');
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
+    }
+    return (
+        <main>
+            <form className="login-container" onSubmit={handleSubmit}>
+                <h1>Sign Up</h1>
+                <div className="form-input">
+                    <label htmlFor="email">Email</label>
+                    <input type="email" name="email" id="email" />
+                </div>
+                <div className="form-input">
+                    <label htmlFor="username">Username</label>
+                    <input type="text" name="username" id="username" />
+                </div>
+                <div className="form-input">
+                    <label htmlFor="password">Password</label>
+                    <input type="password" name="password" id="password" />
+                </div>
+                <button className="submit-button">Sign up</button>
+                <p>or <Link to="/login">Login</Link></p>
+            </form>
+        </main>
+    );
+}

frontend/src/styles/App.css

@@ -0,0 +1,10 @@
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    border: 3px solid #f1f1f1;
+    border-radius: 5px;
+    color: black;
+    background-color: white;
+}

frontend/src/styles/Login.css

@@ -0,0 +1,42 @@
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+}
+main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+h1 {
+    text-align: center;
+}
+
+.form-input {
+    display: flex;
+    flex-direction: column;
+}
+
+  .login-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #B1D4E0;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* shadow */;
+    width: 40vh;
+  }
+
+ .submit-button {
+    padding: 8px 16px;
+    margin-top: 20px; /* Adds space above the button */
+    background-color: #2E8BC0; /* Example background color */
+    color: white; /* Text color */
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
+  }