Merge branch 'main' into filterpage_sahej

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/MainScreenWrapper.css

@@ -1,63 +0,0 @@
-html, body {
-    height: 100%;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #0C2D48;
-    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
-  }
-  
-  .filter-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    background: #B1D4E0;
-    gap: 15;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* shadow */
-  }
-
-  .logo {
-    height: 100px; /* Adjust this value as needed */
-    width: auto; /* Keep the logo's aspect ratio */
-    margin-bottom: 15px; /* Gap between logo and search box */
-  }
-  
-  .filter-item + .filter-item {
-    margin-top: 20px; /* space between filter items */
-  }
-  
-  label {
-    margin-bottom: 5px;
-    font-weight: bold;
-  }
-  
-  .filter-item > select {
-    padding: 8px;
-    border: 1px solid #2E8BC0;
-    border-radius: 4px;
-    width: 100%;
-}
-
-.filter-item {
-    width: 100%;
-}
-
-  .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;
-  }
-  
-  .submit-button:hover {
-    background-color: #1D6A96; /* Darker shade for hover effect */
-  }
-  

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>
+    );
+}