Karmveer/feature/27/auth pages

web/src/App.tsx

@@ -3,18 +3,15 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 
 const App = () => {
-
-  return (
-    <>
-      <Header />
-      <main>
-        <div>
-          <Outlet />
+    return (
+        <div className="flex flex-col min-h-screen">
+            <Header />
+            <main className="flex-grow flex flex-col">
+                <Outlet />
+            </main>
+            <Footer />
         </div>
-      </main>
-      <Footer />
-    </>
-  );
+    );
 };
 
 export default App;

web/src/components/FormInput.tsx

@@ -0,0 +1,52 @@
+
+interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    id?: string;
+    className?: string;
+    name?: string;
+    options?: string[];
+    errorMessage?: string
+}
+
+const FormInput: React.FC<FormInputProps> = ({
+                                                 label,
+                                                 placeholder,
+                                                 type = "text", id,
+                                                 className = "mt-2 w-full px-3 py-2 border border-black rounded-lg focus:outline-none focus:border-black focus:ring-black",
+                                                 options = [""],
+                                                 ...props
+}) => {
+    if(type==="radio" && options.length > 0){
+        return (
+            <div className="mb-4 mt-4">
+                <div className="mt-2">
+                    {options.map((option,index) => (
+                        <label key={option} className={`inline-flex items-center ${index !== 0 ? 'ml-6' : ''}`}>
+                            <input type="radio" name={props.name} value={option} />
+                            <span className="ml-2">{option}</span>
+                        </label>
+                    ))}
+                </div>
+            </div>
+        )
+    }else{
+        return (
+            <div className="form-input">
+                {label && <label htmlFor={id} className="">{label}</label>}
+                <input
+                    placeholder={placeholder}
+                    type={type}
+                    id={id}
+                    className={` ${className}`}
+                    {...props}
+                />
+                {props.errorMessage && <span className="text-red-500">{props.errorMessage}</span>}
+            </div>
+        );
+    }
+
+}
+
+export default FormInput;

web/src/components/Header.tsx

@@ -3,6 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 import { IoMdClose, IoMdMenu } from "react-icons/io";
 import peacockLogo from "../assets/peacock-logo.png";
 import whiteName from "../assets/auis_white.png";
+import {SignedIn, SignedOut, SignOutButton} from "@clerk/clerk-react";
 
 function Header() {
   const [navBar, setNavBar] = useState(false);
@@ -67,24 +68,34 @@ function Header() {
             </li>
           ))}
           <div className="flex flex-col lg:flex-row items-center gap-8 mt-4 lg:mt-0 lg:ml-8">
-            <a href="/login">
-              <button
-              type="button"
-                className="bg-primary-orange hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
-                style={{ borderRadius: "10px" }}
-              >
-                Log-in
-              </button>
-            </a>
-            <a href="/signup">
-              <button
-              type="button"
-                className="bg-primary-orange hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
-                style={{ borderRadius: "10px" }}
-              >
-                Sign-up
-              </button>
-            </a>
+            <SignedOut>
+              <a href="/login">
+                <button
+                    type="button"
+                    className="bg-primary-orange hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
+                    style={{ borderRadius: "10px" }}
+                >
+                  Log-in
+                </button>
+              </a>
+              <a href="/signup">
+                <button
+                    type="button"
+                    className="bg-primary-orange hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
+                    style={{ borderRadius: "10px" }}
+                >
+                  Sign-up
+                </button>
+              </a>
+            </SignedOut>
+            <SignedIn >
+              <div className="bg-primary-orange hover:bg-[#fc7300] text-black px-[18px] py-[10px] text-xl"
+                   style={{ borderRadius: "10px" }}>
+                <SignOutButton />
+              </div>
+
+            </SignedIn>
+
           </div>
         </div>
       </nav>

web/src/components/UserInformationForm.tsx

@@ -0,0 +1,57 @@
+import FormInput from "@components/FormInput.tsx";
+import {useState} from "react";
+
+
+function UserInformationForm() {
+    const [values, setValues] = useState({
+        firstName: "",
+        lastName: "",
+        university: "",
+        graudationYear: "",
+        UPI: "",
+        studentID: "",
+        studyOption: ""
+    });
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        // Need to do validation here
+        setValues({ ...values, [e.target.name]: e.target.value });
+        console.log(values)
+    };
+
+    const residencyOptions = ["International", "Domestic"];
+    const paymentOptions = ["One Semester ($8)", "Two Semesters ($15)"];
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>){
+        e.preventDefault();
+        console.log("submitted");
+    }
+    return (
+        <div className="flex items-center justify-center  ">
+            <div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full">
+                <h2 className="text-2xl font-semibold mb-6 text-center">We need some more information for your membership</h2>
+
+                <form onSubmit={handleSubmit} >
+                    <FormInput placeholder={"First Name"} id="firstName" errorMessage="First Name is Required" onChange={onChange} />
+                    <FormInput placeholder={"Last Name"} id="lastName" errorMessage="Last Name is Required" onChange={onChange}/>
+                    <FormInput placeholder={"University (or alumni)"} id="university" errorMessage="Your Univeristiy is Required" onChange={onChange}/>
+                    <FormInput placeholder={"What year are you in (or alumni)"} id="year" errorMessage="Your Graduation Year is Required" onChange={onChange}/>
+                    <FormInput placeholder={"UPI (if you have one)"} id="upi" onChange={onChange}/>
+                    <FormInput placeholder={"Student ID (if you have one)"} id="studentId" onChange={onChange}/>
+                    <FormInput placeholder={"What are you studying)"} id="study" onChange={onChange}/>
+
+                    <FormInput type="radio" name="residency" options={residencyOptions}/>
+                    <FormInput type="radio" name="duration" options={paymentOptions}/>
+
+                    <button className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800" >
+                        Purchase membership
+                    </button>
+                </form>
+
+            </div>
+        </div>
+
+    );
+}
+
+export default UserInformationForm;

web/src/main.tsx

@@ -18,22 +18,26 @@ import SignUpScreen from "./screens/SignUpScreen.tsx";
 import PhotosScreen from "./screens/PhotosScreen.tsx";
 import PVVScreen from "./screens/PVVScreen.tsx";
 import LoginScreen from "./screens/LoginScreen.tsx";
+import InformationScreen from "./screens/InformationScreen.tsx";
 import { ClerkProvider } from "@clerk/clerk-react";
 import { graphqlClient } from "./graphql/client.ts";
 
 //Add any routes for screens below
 const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route path="/" element={<App />}>
-      <Route index={true} element={<HomeScreen />} />
-      <Route path="/test" element={<TestScreen />} />
-      <Route path="/exec" element={<ExecScreen />} />
-      <Route path="/login" element={<LoginScreen />} />
-      <Route path="/signup" element={<SignUpScreen />} />
-      <Route path="/pvv" element={<PVVScreen />} />
-      <Route path="/photos" element={<PhotosScreen />} />
-    </Route>
-  )
+
+    createRoutesFromElements(
+        <Route path="/"  element={<App />}>
+            <Route index={true} element={<HomeScreen />} />
+            <Route path="/test" element={<TestScreen />} />
+            <Route path="/exec" element={<ExecScreen />} />
+            <Route path="/login" element={<LoginScreen />} />
+            <Route path="/signup" element={<SignUpScreen />} />
+            <Route path="/user-info" element={<InformationScreen />} />
+            <Route path="/pvv" element={<PVVScreen />} />
+            <Route path="/photos" element={<PhotosScreen />} />
+        </Route>
+    )
+
 );
 // Import your publishable key
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

web/src/screens/InformationScreen.tsx

@@ -0,0 +1,11 @@
+import UserInformationForm from "@components/UserInformationForm.tsx";
+
+function InformationScreen() {
+    return (
+        <div className="flex-grow flex flex-col justify-center  bg-gradient-to-t from-blue-500 via-blue-400 to-blue-300">
+            <UserInformationForm />
+        </div>
+    );
+}
+
+export default InformationScreen;

web/src/screens/LoginScreen.tsx

@@ -1,9 +1,27 @@
+import { SignIn } from "@clerk/clerk-react";
+
 function LoginScreen() {
-  return (
-    <div>
-      <h2> Login Screen</h2>
-    </div>
-  );
+    return (
+        <div className="flex-grow flex flex-col h-full">
+            <div className="flex flex-grow justify-center">
+                <div className="flex flex-1 items-center justify-center">
+                    <SignIn  />
+                </div>
+                <div className="flex flex-col flex-1 items-center justify-top text-center pt-20 "
+                     style={{
+                         background: 'linear-gradient(to top, #ccf2ff 50%, #ffffff 100%)',
+                     }}
+                >
+                    <div className="mb-5">
+                        <img src="/src/assets/peacock.png" alt="Descriptive Text" className="max-w-[300px] max-h-[300px] " />
+                    </div>
+                    <div>
+                        <img src="/src/assets/AUIS_black_3.png" alt="Descriptive Text" className="max-w-xs max-h-xs" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default LoginScreen;

web/src/screens/SignUpScreen.tsx

@@ -1,31 +1,28 @@
-import {SignUp} from "@clerk/clerk-react";
+import { SignUp } from "@clerk/clerk-react";
 
 function SignUpScreen() {
     return (
-        <div className="flex-grow bg-white flex flex-col">
-            <div className="flex justify-center my-5">
-                <h1 className="text-black font-bold">Join Our Vibrant Community Today </h1>
-            </div>
-            <div className="flex flex-row justify-center mt-5">
-                <div className="flex flex-col flex-1 items-center justify-center text-center p-4">
+        <div className="flex-grow flex flex-col h-full ">
+            <div className="flex flex-grow justify-center ">
+
+                <div className="flex flex-col flex-1 items-center justify-top text-center pt-20 "
+                     style={{
+                         background: 'linear-gradient(to top, #fda642 50%, #ffffff 100%)',
+                     }}
+                >
                     <div className="mb-5">
-                        <img src="/src/assets/react.svg" alt="Descriptive Text" className="min-w-1000 min-h-1000"/>
+                        <img src="/src/assets/peacock.png" alt="Descriptive Text" className="max-w-[300px] max-h-[300px] " />
                     </div>
                     <div>
-                        <h1>Ready to Join Us? Let's get started and set up your account.</h1>
-                        <h2>If you already have one, sign in here to access your profile.</h2>
+                        <img src="/src/assets/AUIS_black_3.png" alt="Descriptive Text" className="max-w-xs max-h-xs" />
                     </div>
                 </div>
-
-                <div className="w-px bg-gray-300 mt-15">a</div>
-
-                <div className="flex flex-1 items-center justify-center mt-15">
-                    <SignUp/>
+                <div className="flex flex-1 items-center justify-center ">
+                    <SignUp afterSignUpUrl="/user-info"/>
                 </div>
             </div>
-
         </div>
-    )
+    );
 }
 
-export default SignUpScreen
+export default SignUpScreen;