New Sign Up Page Design

frontend/src/Register.tsx

@@ -1,228 +1,110 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useNavigate } from "react-router-dom";
-import logo from "./images/logo.svg";
 import { useAuthContext } from "./context/auth/authContext";
+import { SignUpForm, BrandingPanel } from "./sign-up";
 import "./styles/index.css";
 
+const PASSWORD_REGEX =
+  /^(?=.*[!@#$%^&*])(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{8,}$/;
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
 /**
- * Register a new BCAN user
+ * Register a new BCAN user. Uses sign-up components and matches Figma layout.
  */
 const Register = observer(() => {
-  const [username, setUsername] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordRe, setPasswordRe] = useState("");
-  const [failure, setFailure] = useState({
-    state: false,
-    message: "",
-    item: "",
-  });
   const navigate = useNavigate();
-
   const { register } = useAuthContext();
-  const passswordRegex: RegExp =
-    /^(?=.*[!@#$%^&*])(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{8,}$/;
-  const emailRegex: RegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  const defaultPasswordMessage: string = `• Passwords must have at least one special character (!@#$%^&*)
-• Passwords must have at least one digit character ('0'-'9')
-• Passwords must have at least one uppercase letter ('A'-'Z') and one lowercase letter ('a'-'z')
-• Passwords must be at least 8 characters long`;
+
+  const [values, setValues] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    passwordRe: "",
+  });
+  const [failure, setFailure] = useState<{
+    state: boolean;
+    message: string;
+    item: string;
+  }>({ state: false, message: "", item: "" });
+
+  const updateField = (field: keyof typeof values, value: string) => {
+    setValues((prev) => ({ ...prev, [field]: value }));
+    if (failure.state) {
+      setFailure({ state: false, message: "", item: "" });
+    }
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Input validation
-    if (!emailRegex.test(email)) {
+
+    if (!EMAIL_REGEX.test(values.email)) {
       setFailure({
         state: true,
         message: "Please enter a valid email address.",
         item: "email",
       });
       return;
     }
-    if (!passswordRegex.test(password)) {
+    if (!PASSWORD_REGEX.test(values.password)) {
       setFailure({
         state: true,
-        message: defaultPasswordMessage,
+        message:
+          "Password must have at least one special character (!@#$%^&*), one digit, one uppercase, one lowercase, and be at least 8 characters long.",
         item: "password",
       });
       return;
     }
-    const success = await register(username, password, email);
-    if (password === passwordRe && success.state) {
-      navigate("/registered");
-    } else {
-      setFailure({
-        state: true,
-        message: "Registration failed: " + success.message,
-        item: "registration",
-      });
-      console.warn("Registration failed");
-    }
-  };
-
-  // Handlers for password and password confirmation inputs
-  const handlePassword = (e: string) => {
-    setPassword(e);
-    if (e !== passwordRe && passwordRe !== "") {
+    if (values.password !== values.passwordRe) {
       setFailure({
         state: true,
         message: "Passwords do not match.",
         item: "password",
       });
-    } else {
-      setFailure({ state: false, message: "", item: "" });
+      return;
     }
-  };
 
-  const handlePasswordMatch = (e: string) => {
-    setPasswordRe(e);
-    if (e !== password) {
+    const first = values.firstName.trim();
+    const last = values.lastName.trim();
+    const username =
+      first || last
+        ? `${first}_${last}`.replace(/\s+/g, "_").replace(/_+/g, "_")
+        : values.email;
+    const success = await register(username, values.password, values.email);
+
+    if (success.state) {
+      navigate("/registered");
+    } else {
       setFailure({
         state: true,
-        message: "Passwords do not match.",
-        item: "password",
+        message: success.message,
+        item: "registration",
       });
-    } else {
-      setFailure({ state: false, message: "", item: "" });
     }
   };
 
   return (
-    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
-      <div className="h-full px-20 flex flex-col justify-center items-start">
-        {/*/ Left side: Registration form */}
-        <div className="mb-4">
-          <h1 className="text-[32px]">Get Started Now</h1>
-        </div>
-
-        <form onSubmit={handleSubmit} className="w-full">
-          <div className="grid grid-cols-1 gap-x-6 gap-y-4">
-            <div className="">
-              <label htmlFor="username" className="block">
-                Username
-              </label>
-              <div className="flex items-center rounded-md pt-2">
-                <input
-                  id="username"
-                  type="text"
-                  name="username"
-                  value={username}
-                  required
-                  onChange={(e) => setUsername(e.target.value)}
-                  placeholder="Enter your username"
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-grey-400"
-                />
-              </div>
-            </div>
-            <div className="">
-              <label htmlFor="email" className="block">
-                Email address
-              </label>
-              <div className="flex items-center rounded-md pt-2">
-                <input
-                  id="email"
-                  type="text"
-                  name="email"
-                  value={email}
-                  required
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Enter your email"
-                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
-                    failure.item === "email"
-                      ? "border-red"
-                      : "border-grey-400"
-                  }`}
-                />
-              </div>
-            </div>
-            <div className="">
-              <label htmlFor="password" className="block">
-                Password
-              </label>
-              <div className="flex items-center rounded-md pt-2">
-                <input
-                  id="password"
-                  type="password"
-                  name="password"
-                  value={password}
-                  required
-                  onChange={(e) => handlePassword(e.target.value)}
-                  placeholder="Enter your password"
-                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
-                    failure.item === "password"
-                      ? "border-red"
-                      : "border-grey-400"
-                  }`}
-                />
-              </div>
-            </div>
-            <div className="">
-              <label htmlFor="password-re" className="block">
-                Confirm Password
-              </label>
-              <div className="flex items-center rounded-md pt-2">
-                <input
-                  id="password-re"
-                  type="password"
-                  name="password-re"
-                  value={passwordRe}
-                  onChange={(e) => handlePasswordMatch(e.target.value)}
-                  required
-                  placeholder="Re-enter your password"
-                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
-                    failure.item === "password"
-                      ? "border-red"
-                      : "border-grey-400"
-                  }`}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="items-center">
-            <div
-              className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left ${
-                failure.state
-                  ? "text-red bg-red-light"
-                  : "text-grey-600 bg-grey-200"
-              }`}
-            >
-              {failure.state ? failure.message : defaultPasswordMessage}
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            className="w-full block mt-8 min-w-0 rounded-md grow bg-primary-900 text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-          >
-            Register
-          </button>
-          <div className="flex items-center justify-between gap-4 mt-4">
-            <hr className="border-grey-600 w-[45%]" />
-            <div className="text-grey-600">or</div>
-            <hr className="border-grey-600 w-[45%]" />
-          </div>
-          <div className="flex items-center mt-4 justify-center">
-            Have an account?{" "}
-            <button
-              type="button"
-              onClick={() => navigate("/login")}
-              className="inline ml-2 text-secondary-500 text-left"
-            >
-              Sign in
-            </button>
-          </div>
-        </form>
+    <div className="flex h-screen w-screen overflow-hidden bg-white">
+      <div className="flex w-[58%] flex-col justify-center px-16 py-14">
+        <SignUpForm
+          values={values}
+          onChange={updateField}
+          onSubmit={handleSubmit}
+          error={failure}
+          passwordRequirementsMet={PASSWORD_REGEX.test(values.password)}
+          allFieldsFilled={
+            values.firstName.trim() !== "" &&
+            values.lastName.trim() !== "" &&
+            values.email.trim() !== "" &&
+            values.password !== "" &&
+            values.passwordRe !== ""
+          }
+          passwordsMatch={values.password === values.passwordRe}
+        />
       </div>
-      {/*/ Right side: logo */}
-      <div className="h-full flex flex-col justify-center items-center">
-        <div className="w-full h-full  bg-primary-800 rounded-l-4xl flex flex-col justify-center items-center">
-          <img
-            className="w-[60%] h-[60%] object-contain p-10 mb-40"
-            src={logo}
-            alt="BCAN Logo"
-          />
-        </div>
+      <div className="w-[42%]">
+        <BrandingPanel />
       </div>
     </div>
   );

frontend/src/sign-up/BrandingPanel.tsx

@@ -0,0 +1,17 @@
+import logo from "../images/logo.svg";
+
+/**
+ * Right-hand branding panel with orange background and BostonCAN logo.
+ * Uses Tailwind and primary-800 for panel background.
+ */
+export default function BrandingPanel() {
+  return (
+    <div className="flex h-full flex-col justify-center items-center rounded-r-3xl bg-primary-800 p-10">
+      <img
+        className="max-h-[60%] w-auto max-w-[70%] object-contain"
+        src={logo}
+        alt="BostonCAN"
+      />
+    </div>
+  );
+}

frontend/src/sign-up/InputField.tsx

@@ -0,0 +1,38 @@
+import type { InputHTMLAttributes } from "react";
+
+type InputFieldProps = {
+  id: string;
+  label: string;
+  required?: boolean;
+  error?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "className">;
+
+/**
+ * Reusable text input with label and optional required asterisk.
+ * Uses Tailwind and project color tokens (grey-400, red, etc.).
+ */
+export default function InputField({
+  id,
+  label,
+  required,
+  error,
+  ...inputProps
+}: InputFieldProps) {
+  return (
+    <div className="w-full">
+      <label htmlFor={id} className="block text-left font-bold text-black">
+        {label}
+        {required && <span className="text-red">*</span>}
+      </label>
+      <div className="mt-2 flex items-center rounded-md">
+        <input
+          id={id}
+          className={`block w-full rounded-md border bg-white py-2.5 pl-4 pr-3 text-base placeholder:text-grey-500 ${
+            error ? "border-red" : "border-grey-400"
+          }`}
+          {...inputProps}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/sign-up/LoginPrompt.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from "react-router-dom";
+
+/**
+ * "Already have an account? Log in here" prompt with link.
+ * Uses Tailwind and secondary-500 for link.
+ */
+export default function LoginPrompt() {
+  const navigate = useNavigate();
+
+  return (
+    <p className="mt-6 text-center text-sm text-grey-600">
+      Already have an account?{" "}
+      <button
+        type="button"
+        onClick={() => navigate("/login")}
+        className="font-medium text-secondary-500 hover:underline"
+      >
+        Log in here
+      </button>
+    </p>
+  );
+}