more frontend + backend stuff

backend/utils.py

@@ -16,7 +16,10 @@ def create_tables(conn):
             age INTEGER,
             personality TEXT,
             image_path TEXT,
-            adoption_status TEXT DEFAULT 'Available'
+            adoption_status TEXT DEFAULT 'Available',
+            size TEXT,
+            location TEXT,
+            history TEXT
         )
     """
     )

frontend/src/App.tsx

@@ -1,31 +1,38 @@
-import { Routes, Route } from 'react-router-dom';
-import NavBar from './components/NavBar';
-import Home from './pages/Home';
-import Search from './pages/Search';
-import MoreInfo from "./pages/MoreInfo";
-import PetProfile from './pages/PetProfile';
-import Profile from './pages/Profile';
+import { Routes, Route, Navigate, useLocation } from "react-router-dom";
+import Home from "./pages/Home";
+import Profile from "./pages/Profile";
+import PetProfile from "./pages/PetPage";
 import PetDetails from "./pages/PetDetails";
+import Search from "./pages/Search";
+import MyList from "./pages/MyList";
+import MoreInfo from "./pages/MoreInfo";
 import AdoptionPage from "./pages/AdoptionPage";
-import MyList from './pages/MyList';
+import NavBar from "./components/NavBar";
+import { JSX } from "react";
+
+function ProtectedRoute({ children }: { children: JSX.Element }) {
+  const isLoggedIn = localStorage.getItem("loggedIn") === "true";
+  return isLoggedIn ? children : <Navigate to="/profile" />;
+}
 
+export default function App() {
+  const location = useLocation();
+  const hideNav = location.pathname === "/profile" || location.pathname === "/more-info";
 
-function App() {
   return (
     <>
-      <NavBar />
+      {!hideNav && <NavBar />}
+
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/search" element={<Search />} />
-        <Route path="/pets" element={<PetProfile />} />
-        <Route path="/pets/:id" element={<PetDetails />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/more-info" element={<MoreInfo />} />
-        <Route path="/adopt/:name" element={<AdoptionPage />} />
-        <Route path="/my-list" element={<MyList />} />
+        <Route path="/pets" element={<ProtectedRoute><PetProfile /></ProtectedRoute>} />
+        <Route path="/pets/:id" element={<ProtectedRoute><PetDetails /></ProtectedRoute>} />
+        <Route path="/search" element={<ProtectedRoute><Search /></ProtectedRoute>} />
+        <Route path="/adopt/:name" element={<ProtectedRoute><AdoptionPage /></ProtectedRoute>} />
+        <Route path="/my-list" element={<ProtectedRoute><MyList /></ProtectedRoute>} />
       </Routes>
     </>
   );
 }
-
-export default App;

frontend/src/components/Layout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+import Navbar from "./NavBar"; 
+
+export default function Layout() {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+}

frontend/src/components/NavBar.tsx

@@ -1,7 +1,25 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { FaHome, FaSearch, FaUser } from "react-icons/fa";
+import { useState, useEffect } from "react";
 
 export default function NavBar() {
+  const [loggedIn, setLoggedIn] = useState(localStorage.getItem("loggedIn") === "true");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setLoggedIn(localStorage.getItem("loggedIn") === "true");
+    };
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("loggedIn");
+    setLoggedIn(false);
+    navigate("/profile");
+  };
+
   return (
     <nav style={{
       backgroundColor: "black",
@@ -11,10 +29,34 @@ export default function NavBar() {
       gap: "1rem"
     }}>
       <Link to="/" style={{ color: "white" }}><FaHome /></Link>
-      <Link to="/search" style={{ color: "white" }}><FaSearch /></Link>
-      <Link to="/profile" style={{ color: "white" }}><FaUser /></Link>
-      <Link to="/pets" style={{ color: "white" }}>Pet Profile</Link>
-      <Link to="/my-list" style={{ color: "white" }}>My List</Link>
+
+      {loggedIn && (
+        <>
+          <Link to="/search" style={{ color: "white" }}><FaSearch /></Link>
+          <Link to="/pets" style={{ color: "white" }}>Pets</Link>
+          <Link to="/my-list" style={{ color: "white" }}>My List</Link>
+        </>
+      )}
+
+      <Link to="/profile" style={{ color: "white" }}>
+        <FaUser />
+      </Link>
+
+      {loggedIn && (
+        <button
+          onClick={handleLogout}
+          style={{
+            background: "none",
+            border: "none",
+            color: "white",
+            cursor: "pointer",
+            fontSize: "1rem",
+            padding: 0
+          }}
+        >
+          Logout
+        </button>
+      )}
     </nav>
   );
-}
+}

frontend/src/main.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
 import { BrowserRouter } from 'react-router-dom';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>,
-);
+  </React.StrictMode>
+);

frontend/src/pages/MoreInfo.tsx

@@ -59,7 +59,7 @@ export default function MoreInfo() {
             style={buttonStyle}
             onClick={() => {
               if (agree) {
-                navigate("/dashboard");
+                navigate("/");
               } else {
                 alert("Please agree to continue.");
               }

frontend/src/pages/Profile.tsx

@@ -1,9 +1,5 @@
 import { useState, CSSProperties } from "react";
-import { Link } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
-
-
-
 import dogImage from "../assets/dog-profile.png";
 import instagramLogo from "../assets/instagram_logo.png";
 import facebookLogo from "../assets/facebook_logo.png";
@@ -13,7 +9,37 @@ import menuLogo from "../assets/menu_logo.png";
 
 export default function Profile() {
   const [isSignUp, setIsSignUp] = useState(false);
-  const navigate = useNavigate()
+  const [loginUsername, setLoginUsername] = useState("");
+  const [loginPassword, setLoginPassword] = useState("");
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    fetch("http://localhost:5000/api/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        username: loginUsername,
+        password: loginPassword,
+      }),
+    })
+      .then((res) => {
+        if (res.ok) {
+          localStorage.setItem("loggedIn", "true");
+          navigate("/");
+        } else {
+          alert("Invalid credentials");
+        }
+      })
+      .catch((err) => {
+        console.error("Login error:", err);
+        alert("Something went wrong.");
+      });
+  };
+
+  const handleSignup = () => {
+    localStorage.setItem("loggedIn", "true");
+    navigate("/more-info");
+  };
 
   return (
     <div style={containerStyle}>
@@ -22,14 +48,18 @@ export default function Profile() {
           <h2 style={headerStyle}>{isSignUp ? "Sign Up" : "Sign In"}</h2>
 
           <input
-            type={isSignUp ? "email" : "text"}
-            placeholder={isSignUp ? "Email" : "Username / Email"}
+            type="text"
+            placeholder="Username"
             style={inputStyle}
+            value={loginUsername}
+            onChange={(e) => setLoginUsername(e.target.value)}
           />
           <input
             type="password"
             placeholder="Password"
             style={inputStyle}
+            value={loginPassword}
+            onChange={(e) => setLoginPassword(e.target.value)}
           />
 
           {isSignUp && (
@@ -39,22 +69,7 @@ export default function Profile() {
             </ul>
           )}
 
-          {!isSignUp && (
-            <div style={forgotStyle}>
-              <Link to="#">Forgot Password?</Link>
-            </div>
-          )}
-
-          <button
-            style={buttonStyle}
-            onClick={() => {
-              if (isSignUp) {
-                navigate("/more-info"); // only for new users
-              } else {
-                console.log("User signed in successfully!"); // or call your login logic
-              }
-            }}
-          >
+          <button style={buttonStyle} onClick={isSignUp ? handleSignup : handleLogin}>
             {isSignUp ? "Continue" : "Sign In"}
           </button>
 
@@ -87,9 +102,7 @@ export default function Profile() {
           <img src={twitterLogo} alt="Twitter" style={iconStyle} />
           <img src={youtubeLogo} alt="YouTube" style={iconStyle} />
         </div>
-        <div>
-          <img src={menuLogo} alt="Menu" style={iconStyle} />
-        </div>
+        <img src={menuLogo} alt="Menu" style={iconStyle} />
       </footer>
     </div>
   );
@@ -99,15 +112,15 @@ const containerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
   minHeight: "100vh",
-  backgroundColor: "rgb(180, 164, 143)"
+  backgroundColor: "rgb(180, 164, 143)",
 };
 
 const contentWrapperStyle: CSSProperties = {
   display: "flex",
   flex: 1,
-  flexWrap: "wrap", 
+  flexWrap: "wrap",
   justifyContent: "center",
-  alignItems: "stretch"
+  alignItems: "stretch",
 };
 
 const formBoxStyle: CSSProperties = {
@@ -122,7 +135,6 @@ const formBoxStyle: CSSProperties = {
   flexDirection: "column",
   alignItems: "center",
   color: "white",
-  boxSizing: "border-box"
 };
 
 const inputStyle: CSSProperties = {
@@ -132,12 +144,7 @@ const inputStyle: CSSProperties = {
   border: "none",
   margin: "0.5rem 0",
   fontSize: "1rem",
-  backgroundColor: "#e0d9d9"
-};
-
-const headerStyle: CSSProperties = {
-  fontSize: "2rem",
-  marginBottom: "1rem"
+  backgroundColor: "#e0d9d9",
 };
 
 const buttonStyle: CSSProperties = {
@@ -148,26 +155,25 @@ const buttonStyle: CSSProperties = {
   padding: "0.75rem 2rem",
   fontSize: "1rem",
   cursor: "pointer",
-  margin: "1rem 0"
+  margin: "1rem 0",
 };
 
-const forgotStyle: CSSProperties = {
-  width: "100%",
-  textAlign: "right",
-  fontSize: "0.85rem"
+const headerStyle: CSSProperties = {
+  fontSize: "2rem",
+  marginBottom: "1rem",
 };
 
 const footerTextStyle: CSSProperties = {
   fontSize: "0.9rem",
   textAlign: "center",
-  marginTop: "1rem"
+  marginTop: "1rem",
 };
 
 const requirementsStyle: CSSProperties = {
   textAlign: "left",
   fontSize: "0.85rem",
   margin: "0.5rem 0 1rem",
-  color: "#ddd"
+  color: "#ddd",
 };
 
 const sideImageStyle: CSSProperties = {
@@ -176,7 +182,7 @@ const sideImageStyle: CSSProperties = {
   maxWidth: "600px",
   height: "100vh",
   objectFit: "cover",
-  display: "block"
+  display: "block",
 };
 
 const footerStyle: CSSProperties = {
@@ -187,23 +193,22 @@ const footerStyle: CSSProperties = {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  flexWrap: "wrap", 
-  boxSizing: "border-box"
+  boxSizing: "border-box",
 };
 
 const footerLeftStyle: CSSProperties = {
   display: "flex",
   gap: "1.5rem",
-  flexWrap: "wrap"
+  flexWrap: "wrap",
 };
 
 const iconStyle: CSSProperties = {
   width: "36px",
-  height: "36px"
+  height: "36px",
 };
 
 const linkStyle: CSSProperties = {
   color: "#fff",
   textDecoration: "underline",
-  cursor: "pointer"
+  cursor: "pointer",
 };