65 sign up page needs to be populated

app/signup/layout.jsx

@@ -0,0 +1,4 @@
+"use client";
+export default function Layout({ children }) {
+  return <div className="mt-12 flex flex-col items-center">{children}</div>;
+}

app/signup/page.tsx

@@ -1,8 +1,11 @@
 "use client";
-export default function Signup() {
+import { Suspense } from "react";
+import SignInPage from "../../components/SignInPage/SignInPage";
+
+export default function Page() {
   return (
-    <div>
-      <h1>Signup</h1>
-    </div>
+    <Suspense>
+      <SignInPage />
+    </Suspense>
   );
 }

components/SignInPage/AlternativeSignups.jsx

@@ -0,0 +1,75 @@
+"use client";
+
+const AlternativeSignUps = () => {
+  const handleSignUp = (e, social) => {
+    e.preventDefault();
+    console.log(`signing up with ${social}`);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center dark:bg-gray-800">
+      <button
+        type="button"
+        className="relative mb-4 flex min-w-60 items-center justify-center rounded-lg bg-[#3b5998] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#3b5998]/90"
+        onClick={(e) => handleSignUp(e, "facebook")}
+      >
+        <svg
+          className="absolute left-5 h-4 w-4"
+          aria-hidden="true"
+          focusable="false"
+          data-social="facebook-f"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+        >
+          <path
+            fill="currentColor"
+            d="M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 124.7v70.62H22.89V288h81.39v224h100.2V288z"
+          ></path>
+        </svg>
+        Sign Up with Facebook
+      </button>
+      <button
+        type="button"
+        className="relative mb-4 flex min-w-60 items-center justify-center rounded-lg bg-[#1da1f2] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#1da1f2]/90"
+        onClick={(e) => handleSignUp(e, "twitter")}
+      >
+        <svg
+          className="absolute left-5 h-4 w-4"
+          aria-hidden="true"
+          focusable="false"
+          data-social="twitter"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            fill="currentColor"
+            d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"
+          ></path>
+        </svg>
+        Sign Up with Twitter
+      </button>
+      <button
+        type="button"
+        className="relative flex min-w-60 items-center justify-center rounded-lg bg-[#4285F4] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#4285F4]/90"
+        onClick={(e) => handleSignUp(e, "google")}
+      >
+        <svg
+          className="absolute left-5 h-4 w-4"
+          aria-hidden="true"
+          focusable="false"
+          data-icon="google"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 488 512"
+        >
+          <path
+            fill="currentColor"
+            d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+          ></path>
+        </svg>
+        Sign Up with Google
+      </button>
+    </div>
+  );
+};
+
+export default AlternativeSignUps;

components/SignInPage/SignInForm.jsx

@@ -0,0 +1,111 @@
+"use client";
+
+export default function SignInForm({ handleSubmit }) {
+  return (
+    <div className="mx-5 mt-5 flex flex-col">
+      <form onSubmit={handleSubmit}>
+        <p className="mb-10 text-xl tracking-wide">Create An Account</p>
+        <div className="relative mt-6">
+          <input
+            type="text"
+            name="firstName"
+            id="firstName"
+            placeholder="First Name"
+            className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
+            autoComplete="firstName"
+          />
+          <label
+            htmlFor="firstName"
+            className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
+          >
+            First Name
+          </label>
+        </div>
+        <div className="relative mt-6">
+          <input
+            type="text"
+            name="lastName"
+            id="lastName"
+            placeholder="Last Name"
+            className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
+            autoComplete="Last Name"
+          />
+          <label
+            htmlFor="lastName"
+            className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
+          >
+            Last Name
+          </label>
+        </div>
+        <div className="relative mt-6">
+          <input
+            type="email"
+            name="email"
+            id="email"
+            placeholder="Email Address"
+            className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
+            autoComplete="email"
+          />
+          <label
+            htmlFor="email"
+            className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
+          >
+            Email Address
+          </label>
+        </div>
+        <div className="relative mt-6">
+          <input
+            type="password"
+            name="password"
+            id="password"
+            required
+            autoComplete="current-password"
+            placeholder="Password"
+            className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
+          />
+          <label
+            htmlFor="password"
+            className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
+          >
+            Password
+          </label>
+        </div>
+        <div className="relative mt-6">
+          <input
+            type="password"
+            name="confirmPassword"
+            id="confirmPassword"
+            required
+            autoComplete="current-password"
+            placeholder="Confirm Password"
+            className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
+          />
+          <label
+            htmlFor="confirmPassword"
+            className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
+          >
+            Confirm Password
+          </label>
+        </div>
+        <div className="my-12 flex justify-center">
+          <button
+            type="submit"
+            className="w-11/12 rounded-full bg-blue-800 p-1.5 text-white hover:bg-blue-900"
+          >
+            Create Account
+          </button>
+        </div>
+        <div className="flex text-center text-sm text-gray-500">
+          <p>Already have an account?</p>
+          <a
+            href="/login"
+            className="ml-1 font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none"
+          >
+            Sign In
+          </a>
+          .
+        </div>
+      </form>
+    </div>
+  );
+}

components/SignInPage/SignInPage.jsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { SECRET_ROUTE } from "lib/routes";
+import { signUp, useUser } from "lib/auth";
+import SignInForm from "./SignInForm";
+import SignInSeparator from "./SignInSeparator";
+import AlternativeSignups from "./AlternativeSignups";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const user = useUser();
+
+  const continueTo = searchParams?.get("continueTo") ?? SECRET_ROUTE;
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const firstName = form.firstName.value 
+    const lastName = form.lastName.value 
+    const email = form.email.value;
+    const password = form.password.value;
+    const confirmPassword = form.confirmPassword.value;
+    const isAdmin = false;
+
+    if (password !== confirmPassword) {
+      alert('passwords do not match')
+      return;
+    }
+
+    const data = {firstName, lastName, email, isAdmin}
+
+    try {
+      await signUp(email, password)
+      router.replace(continueTo);
+    } catch (error) {
+      window.alert(error);
+    }
+  }
+
+  if (user) {
+    router.replace(continueTo);
+    return null;
+  }
+
+  return (
+    <main className="flex">
+      <section className="flex flex-row px-16 py-12">  
+        <SignInForm handleSubmit={handleSubmit} />
+        <SignInSeparator />
+        <AlternativeSignups />
+      </section>
+    </main>
+  );
+}

components/SignInPage/SignInSeparator.jsx

@@ -0,0 +1,13 @@
+"use client";
+
+export default function SignInSeparator() {
+  return (
+    <div className="between m-auto mx-20 flex flex-col">
+      <div className="relative left-[50%] m-[-1.5px] h-[110px] w-px border-l-[1px] bg-[#aaa]"></div>
+      <div className="m-0 h-[60px] w-[60px] rounded-full border-[1px] border-[#aaa] p-0 text-center leading-[60px]">
+        <span>OR</span>
+      </div>
+      <div className="relative left-[50%] m-[-1.5px] mt-0 h-[110px] w-px border-l-[1px] bg-[#aaa]"></div>
+    </div>
+  );
+}

lib/auth.tsx

@@ -8,6 +8,7 @@ import {
   browserSessionPersistence,
   setPersistence,
   signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
   onAuthStateChanged,
 } from "firebase/auth";
 
@@ -29,6 +30,14 @@ export async function signOut() {
   return firebaseSignOut(auth);
 }
 
+export async function signUp(
+  email: string,
+  password: string,
+) {
+
+  return createUserWithEmailAndPassword(auth, email, password);
+}
+
 export function useUser() {
   const [user, setUser] = useState<FirebaseUser | null | false>(false);
 

package.json

@@ -15,7 +15,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "firebase": "^10.8.1",
+    "firebase": "^10.12.2",
     "lucide-react": "^0.314.0",
     "next": "^14.2.3",
     "next-auth": "^4.24.6",

tsconfig.json

@@ -32,7 +32,7 @@
     ".next/types/**/*.ts",
     "**/*.ts",
     "**/*.tsx"
-, "components/LandingPage/CategoryLinks.jsx", "components/UIcomponents/NavigationMenu.jsx"  ],
+, "components/LandingPage/CategoryLinks.jsx", "components/UIcomponents/NavigationMenu.jsx", "components/SignInPage/SignInPage.jsx"  ],
   "exclude": [
     "node_modules"
   ]