Briany/create aro login pages

gs/frontend/aro/package.json

@@ -13,10 +13,10 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.90.2",
-    "leaflet": "^1.9.4",
     "@tanstack/react-table": "^8.21.3",
     "@types/react-router-dom": "^5.3.3",
-    "react": "^19.1.1",
+    "leaflet": "^1.9.4",
+    "react": "^19.2.0",
     "react-dom": "^19.1.1",
     "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.9.2",
@@ -40,7 +40,7 @@
     "jsdom": "^27.0.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.44.0",
-    "vite": "^7.1.9",
+    "vite": "^7.2.2",
     "vitest": "^3.2.4"
   }
 }

gs/frontend/aro/src/App.tsx

@@ -4,6 +4,9 @@ import 'react-toastify/dist/ReactToastify.css';
 import Nav from "./components/Nav";
 import Background from "./components/Background";
 import NewRequestForm from "./components/new-request/new-request-form.tsx";
+import Login from "./components/auth/login.tsx"
+import Signup from "./components/auth/sign-up.tsx"
+import Verify from "./components/auth/verify.tsx"
 
 /**
  * @brief App component displaying the main application
@@ -21,9 +24,11 @@ function App() {
         <Route path="/commands" element={<Commands />} />
         <Route path="/new-request" element={<NewRequestForm />} />
         <Route path="/requests" element={<Requests />} />
-        <Route path="/profile" element={<Profile />} />
-        <Route path="/login" element={<Login />} /> */}
-        {<Route path="/new-request" element={<NewRequestForm />} />}
+        <Route path="/profile" element={<Profile />} />*/}
+        <Route path="/login" element={<Login />} />
+        <Route path="/verify" element={<Verify />} />
+        <Route path="/sign-up" element={<Signup />} />
+        <Route path="/new-request" element={<NewRequestForm />} />
       </Routes>
       <ToastContainer />
     </>

gs/frontend/aro/src/components/auth/login.tsx

@@ -0,0 +1,67 @@
+/**
+ * @brief Login component for ARO
+ * @return tsx element of Login component
+ */
+function Login() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen px-4">
+            <div className="w-full max-w-xl bg-white rounded-lg p-6 pt-6">
+                <div className="flex flex-col gap-y-1 mb-8">
+                    <h1 className="text-black text-lg font-medium text-center">
+                        Login to your ARO Account
+                    </h1>
+                    <h2 className="text-gray-500 text-center">
+                        Enter your email below to login to your account
+                    </h2>
+                </div>
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="email" className="text-black block mb-1">
+                            Email
+                        </label>
+                        <input
+                            type="text"
+                            id="email"
+                            className="w-full text-gray-600 px-4 py-2 rounded-lg border border-gray-600"
+                            placeholder="Enter Email"
+                        />
+                    </div>
+                    <div>
+                        <div className="flex justify-between">
+                            <label htmlFor="password" className="text-black block mb-1">
+                                Password
+                            </label>
+                            <a className="hover:underline cursor-pointer">Forgot Your Pasword? </a>
+                        </div>
+                        <input
+                            type="password"
+                            id="password"
+                            className="w-full text-gray-600 px-4 py-2 rounded-lg border border-gray-600"
+                            placeholder="Enter Password"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-700 transition-colors cursor-pointer"
+                    >
+                        Login
+                    </button>
+                </form>
+                <button
+                    type="button"
+                    className="w-full shadow bg-white text-black py-2 rounded-lg hover:bg-gray-200 transition-colors border border-gray-700/20 mt-2 cursor-pointer"
+                >
+                    Login with Google
+                </button>
+
+                <footer className="flex gap-x-2 items-center justify-center mt-5 mb-5">
+                    <p>Don't have an Account?</p>
+                    <a href="/sign-up" className="underline">Sign Up</a>
+                </footer>
+
+            </div>
+        </div>
+    );
+}
+
+export default Login;

gs/frontend/aro/src/components/auth/sign-up.tsx

@@ -0,0 +1,59 @@
+/**
+ * @brief Signup component for ARO
+ * @return tsx element of Signup component
+ */
+function Signup() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen px-4 ">
+            <div className="w-full max-w-xl bg-white rounded-lg p-6 pt-6">
+                <div className="flex flex-col gap-y-1 mb-7">
+                    <h1 className="text-black text-lg font-medium text-center">
+                        Sign Up a New Aro Account
+                    </h1>
+                    <h2 className="text-gray-500 text-center">
+                        Enter your email below to login to your account
+                    </h2>
+                </div>
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="email" className="text-black block mb-1">
+                            Email
+                        </label>
+                        <input
+                            type="text"
+                            id="email"
+                            className="w-full text-gray-600 px-4 py-2 rounded-lg border border-gray-600"
+                            placeholder="Enter Email"
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="password" className="text-black block mb-1">
+                            Password
+                        </label>
+                        <input
+                            type="password"
+                            id="password"
+                            className="w-full text-gray-600 px-4 py-2 rounded-lg border border-gray-600"
+                            placeholder="Enter Password"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-700 transition-colors cursor-pointer"
+                    >
+                        Sign Up
+                    </button>
+                </form>
+                <button
+                    type="button"
+                    className="w-full shadow bg-white text-black py-2 rounded-lg hover:bg-gray-200 transition-colors border border-gray-700/20 mt-2 mb-15 cursor-pointer"
+                >
+                    Continue with Google
+                </button>
+
+            </div>
+        </div>
+    );
+}
+
+export default Signup;

gs/frontend/aro/src/components/auth/verify.tsx

@@ -0,0 +1,50 @@
+/**
+ * @brief Verify Component showing ARO OTP verificataion form
+ * @return tsx element of Verify component
+ */
+const email = "johndoe@gmail.com";
+
+function Verify() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen px-4 ">
+            <div className="w-full max-w-xl bg-white rounded-lg p-6 pt-6">
+                <div className="flex flex-col gap-y-1 mb-8">
+                    <h1 className="text-black text-lg font-medium text-center">
+                        Verify Your Account
+                    </h1>
+                    <h2 className="text-gray-500 text-center">
+                        Please Enter the verification code that we sent to {email} in order to verify your account
+                    </h2>
+                </div>
+                <form className="space-y-6">
+                    <div>
+                        <label htmlFor="otp-code" className="text-black block mb-1">
+                            OTP Verification Code
+                        </label>
+                        <input
+                            type="text"
+                            id="opt-code"
+                            className="w-full text-gray-600 px-4 py-2 rounded-lg border border-gray-600"
+                            placeholder="Enter Verification Code"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-700 transition-colors cursor-pointer"
+                    >
+                        Confirm Code
+                    </button>
+                </form>
+                <button
+                    type="button"
+                    className="w-full shadow bg-white text-black py-2 rounded-lg hover:bg-gray-200 transition-colors border border-gray-700/20 mt-2 mb-15 cursor-pointer"
+                >
+                    Resend Code
+                </button>
+
+            </div>
+        </div>
+    );
+}
+
+export default Verify;

gs/frontend/aro/src/index.css

@@ -1,16 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&display=swap');
 @import "tailwindcss";
 
+@theme inline {
+  --font-geist: var(--font-geist)
+}
 
 @layer base {
   body {
     overflow: hidden;
     display: flex;
-    font-family: var(--font-default);
+    font-family: var(--font-geist);
   }
 
   #root {
     height: 100%;
     width: 100%;
     overflow: hidden;
+    --font-geist: 'Geist', sans-serif;
   }
 }