new sign up page UI

- new layout
- added new input boxes
- changed navbar location

client/src/app/signup/page.tsx

@@ -1,41 +1,90 @@
+import React from "react";
 import Navbar from "@/components/navbar";
-import Background from "@/components/background";
-import Footer from "@/components/footer";
-import { CredentialsForm } from "@/components/credentialsForm";
-import { GoogleSignInButton } from "@/components/authButtons";
+// import Footer from "@/components/footer"; Do we need a footer?
 import Link from "next/link";
+import { CredentialsFormDark } from "@/components/credentialsFormDark";
+import { getServerSession } from "next-auth";
+import { authConfig } from "@/lib/auth";
+import { redirect } from "next/navigation";
 
-export default function LogoutPage() {
-	return (
-		<>
-			<Navbar pageLocation="Login" hideInitialNav={false} />
-			<Background>
-				<div className="grid grid-rows-1 m-auto sm:w-2/3 md:w-1/2 lg:w-1/3">
-					<div className="w-full bg-zinc-800 mt-20 sm:m-0 p-10 text-white rounded-t-md">
-						<div className="text-center py-4">
-							<span className="text-5xl">Welcome</span>
-						</div>
-						<GoogleSignInButton />
-					</div>
-					<div className="w-full bg-zinc-700 p-10 pt-0 text-white rounded-b-md">
-						<div className="inline-flex items-center justify-center w-full">
-							<hr className="w-full md:w-24 lg:w-32 h-px bg-gray-200 border-0" />
-							<span className="px-3 font-medium">or</span>
-							<hr className="w-full md:w-24 lg:w-32 h-px bg-gray-200 border-0" />
-						</div>
-						<CredentialsForm buttonText="Sign up" />
-						<div className="text-center p-4">
-							<span>
-								Already have an account?{" "}
-								<Link href="/login" className="text-blue-500">
-									Log in
-								</Link>{" "}
-							</span>
-						</div>
-					</div>
-				</div>
-			</Background>
-			<Footer />
-		</>
-	);
+export default async function SignupPage() {
+  const session = await getServerSession(authConfig);
+  if (session) return redirect("/dashboard");
+
+  const styles = {
+    pageBackground: {
+      width: "100vw",
+      height: "100vh",
+      // Full-page image or color
+      backgroundImage: 'url("/images/signupPage1.png")',
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      position: "relative",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    overlayBackground: {
+      width: "1366px",
+      height: "768px",
+      backgroundColor: "rgba(255, 255, 255, 0.2)", // more transparent
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    signupCard: {
+      width: "400px",
+      backgroundColor: "rgba(0, 0, 0, 0.7)", // less transparent
+      borderRadius: "15px",
+      padding: "2rem",
+      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+    },
+    heading: {
+      fontSize: "2rem",
+      color: "white",
+      marginBottom: "20px",
+      textAlign: "center",
+    },
+    textCenter: {
+      textAlign: "center",
+	  color: "white",
+      marginTop: "20px",
+    },
+  };
+
+  return (
+    <>
+      {/* Render the navbar with only the logo (remove later if we want full navbar?) */}
+      <Navbar onlyLogoLight />
+
+      {/* Layer 1: Full-page background */}
+      <div style={styles.pageBackground}>
+
+        {/* Layer 2: 1366 x 768 background box */}
+        <div style={styles.overlayBackground}>
+
+          {/* Layer 3: The signup card */}
+          <div style={styles.signupCard}>
+            <h1 style={styles.heading}>Welcome!</h1>
+
+            {/* Credentials form (Email/Password) */}
+            <CredentialsFormDark 
+
+            buttonText="Sign up" />
+
+            <div style={styles.textCenter}>
+              <span>
+                Already have an account?{" "}
+                <Link href="/login" className="text-blue-500">
+                  Log in
+                </Link>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* <Footer /> */}
+    </>
+  );
 }

client/src/app/signup/styles.css

@@ -0,0 +1,3 @@
+.focus:focus {
+    outline: 2px solid rgb(255, 255, 255)
+}

client/src/components/credentialsFormDark.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import prisma from "@/lib/prisma";
+import { signIn } from "next-auth/react";
+import { redirect } from "next/navigation";
+import { useState } from "react";
+import bcrypt from "bcryptjs";
+import { loginAuthentication, signup } from "@/utils/login-utils";
+import "../app/signup/styles.css"
+
+interface CredentialsFormProps {
+	csrfToken?: string;
+	buttonText: string;
+}
+
+export function CredentialsFormDark(props: CredentialsFormProps) {
+	const [error, setError] = useState<string | null>(null);
+
+	const handleSubmit = async (e: any) => {
+		e.preventDefault();
+		const data = new FormData(e.currentTarget);
+
+		// switch (props.buttonText) {
+		// 	case "Sign up":
+		// 		const user = await prisma.user.create({
+		// 			data: {
+		// 				email: data.get("email") as string,
+		// 				password: bcrypt.hashSync(data.get("password") as string, 10),
+		// 			},
+		// 		});
+		// 		break;
+		// 	case "Sign in":
+		// }
+
+		// const signInResponse = await signIn("credentials", {
+		// 	email: data.get("email"),
+		// 	password: data.get("password"),
+		// 	redirect: false,
+		// });
+
+		// if (signInResponse && !signInResponse.error) {
+		// 	redirect("/profile/edit");
+		// } else {
+		// 	setError("Your email or password was incorrect.");
+		// }
+
+        const email = data.get("email") as String;
+        const password = data.get("password") as String;
+        if(props.buttonText==='Sign up'){
+            const response: any = await signup(email,password);
+            if(response.status !== 200){// Response not Okay so the status is 401
+                setError(response.message);
+            }
+            // TASK: DO SOMETHING ON SUCCESSFUL SIGNUP
+        } else{
+            const response: any = await loginAuthentication(email,password);
+            if(response.status !== 200){// Response not Okay so the status is 401
+                setError(response.message);
+            }
+            // TASK: DO SOMETHING ON SUCCESSFUL LOGIN
+        }
+	};
+
+	return (
+		<form className="w-full bg-blue rounded-sm" onSubmit={handleSubmit}>
+			<input
+				type="name" // should these just be names?
+				name="first name"
+				placeholder="First Name"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+			<input
+				type="name"
+				name="last name"
+				placeholder="Last Name"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+			<input
+				type="email"
+				name="email"
+				placeholder="Email ([email protected])"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{
+					backgroundColor: 'rgba(0, 0, 0, 0.5)',
+
+				  }}
+			/>
+			<input
+				type="password"
+				name="password"
+				placeholder="Password"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+			<input
+				type="password"
+				name="confirm password"
+				placeholder="Confirm Password"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+				<input
+				type="major" // what should this type be?
+				name="major"
+				placeholder="Major (Philosophical Engineering)"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+				{/*
+				<input 
+
+				//**FIGURE OUT HOW TO FIX**
+				//If this is here, it becomes too long and the page looks broken.
+
+				
+				type="graduation"
+				name="graduation"
+				placeholder="Graduation Year (2027)"
+				required
+				className="p-4 my-2 rounded-md w-full text-white focus"
+				style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			/>
+				*/}
+
+			<button
+				type="submit"
+				className="block bg-black bg-opacity-50 p-4 mt-4 rounded-lg m-auto text-white font-semibold hover:bg-white hover:shadow-2xl shadow-blue-400 hover:text-black transition" 
+				// style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} 
+			>
+				{props.buttonText}
+			</button>
+		</form>
+	);
+}

client/src/components/navbar.tsx

@@ -9,15 +9,17 @@ export default function Navbar({
 	pageLocation,
 	hideInitialNav,
 	onlyLogo = false, // New prop to toggle the minimal navbar
+	onlyLogoLight = false,
 }: {
 	pageLocation: string;
 	hideInitialNav: boolean;
 	onlyLogo?: boolean; // New prop
+	onlyLogoLight?: boolean; // For the signup page
 }) {
 	// Check if the navbar should only show the logo
 	if (onlyLogo) {
 		return (
-			<div className="bg-transparent text-white p-4 z-30 w-full fixed flex justify-center">
+			<div className="bg-transparent text-white p-4 z-30 w-full fixed flex justify-left">
 				<a href="/">
 					<Image
 						src="/images/logoDark.svg"
@@ -30,6 +32,22 @@ export default function Navbar({
 		);
 	}
 
+	// Check if we're using light logo (for the signup page)
+	if (onlyLogoLight) {
+		return (
+			<div className="bg-transparent text-white p-4 z-30 w-full fixed flex justify-left">
+				<a href="/">
+					<Image
+						src="/images/logo.svg"
+						width={200}
+						height={65}
+						alt="ECE USC Logo"
+					/>
+				</a>
+			</div>
+		);
+	}
+
 	const [scrollPosition, setScrollPosition] = useState(0);
 	const [navbarOpen, setNavbarOpen] = useState(false);