Briany/create aro login pages

gs/frontend/aro/src/App.tsx

@@ -2,6 +2,9 @@ import { Route, Routes } from "react-router-dom";
 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
@@ -19,9 +22,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>
     </>
   );

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

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&display=swap');
+
+.geist-text {
+  font-family: 'Geist', sans-serif;
+}

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

@@ -0,0 +1,69 @@
+import "./login.css"
+
+/**
+ * @brief Login component displaying the login page
+ * @return tsx element of Login component
+ */
+function Login() {
+    return (
+        <div className="geist-text 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-left">
+                        Login to your ARO Account
+                    </h1>
+                    <h2 className="text-gray-500 text-left">
+                        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,61 @@
+import "./login.css"
+
+/**
+ * @brief Signup component displaying sign up page
+ * @return tsx element of Signup component
+ */
+function Signup() {
+    return (
+        <div className="geist-text 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,49 @@
+import "./login.css"
+/**
+ * @brief Verify Component showing OTP verificataion form
+ * @return tsx element of Verify component
+ */
+function Verify() {
+    return (
+        <div className="geist-text 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 johndoe@gmail.com 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;