From 08b9938a32d2a3c977f97083f82ad2f08b4c62de Mon Sep 17 00:00:00 2001 From: Unnati Goyal Date: Sun, 2 Feb 2025 22:25:21 -0800 Subject: [PATCH 1/8] Signup Page --- frontend/src/app/signupPage.tsx | 123 ++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 frontend/src/app/signupPage.tsx diff --git a/frontend/src/app/signupPage.tsx b/frontend/src/app/signupPage.tsx new file mode 100644 index 0000000..1144b3f --- /dev/null +++ b/frontend/src/app/signupPage.tsx @@ -0,0 +1,123 @@ +"use client"; + +import React, { useState } from "react"; + +interface FormData { + firstName: string; + lastName: string; + email: string; + password: string; +} + +const SignUpPage = () => { + const [formData, setFormData] = useState({ + firstName: "", + lastName: "", + email: "", + password: "", + }); + + const [isFormValid, setIsFormValid] = useState(false); + + const validateForm = (data: FormData) => { + const isValid = Boolean( + data.firstName && data.lastName && data.email && data.password.length >= 8, + ); + setIsFormValid(isValid); + }; + + const handleInputChange = (field: keyof FormData, value: string) => { + const updatedFormData = { ...formData, [field]: value }; + setFormData(updatedFormData); + validateForm(updatedFormData); + }; + + const handleSubmit = (e: { preventDefault: () => void }) => { + e.preventDefault(); + if (isFormValid) { + alert("Signed Up!"); + } + }; + + return ( +
+
+

Get started

+

Welcome to SPAGen

+
+
+ {/* First Name Input */} +
+ + { + handleInputChange("firstName", e.target.value); + }} + className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 placeholder-disabled" + placeholder="Enter your first name" + /> +
+ + {/* Last Name Input */} +
+ + { + handleInputChange("lastName", e.target.value); + }} + className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 placeholder-disabled" + placeholder="Enter your last name" + /> +
+
+ + {/* Email Input */} +
+ + { + handleInputChange("email", e.target.value); + }} + className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 placeholder-disabled" + placeholder="Enter your email" + /> +
+ + {/* Create a Password */} +
+ + { + handleInputChange("password", e.target.value); + }} + className="w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 placeholder-disabled" + placeholder="Create a password" + /> +
+ +
+ +
+
+
+
+ ); +}; + +export default SignUpPage; From 1e5b19dfef077777207a9fa4e9709a923449b905 Mon Sep 17 00:00:00 2001 From: r800360 Date: Wed, 5 Feb 2025 14:14:54 -0800 Subject: [PATCH 2/8] Addresses simpler fixes for the PR like moving the file, linter warning, coloring issues, and type issues --- .../app/{signupPage.tsx => signup/page.tsx} | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) rename frontend/src/app/{signupPage.tsx => signup/page.tsx} (80%) diff --git a/frontend/src/app/signupPage.tsx b/frontend/src/app/signup/page.tsx similarity index 80% rename from frontend/src/app/signupPage.tsx rename to frontend/src/app/signup/page.tsx index 1144b3f..989ab86 100644 --- a/frontend/src/app/signupPage.tsx +++ b/frontend/src/app/signup/page.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; -interface FormData { +type FormData = { firstName: string; lastName: string; email: string; @@ -42,7 +42,11 @@ const SignUpPage = () => { return (
-

Get started

+ {/* Updated text color to #3B3B62 according to Figma*/} + {/*

Get started

*/} +

+ Get started +

Welcome to SPAGen

@@ -79,7 +83,7 @@ const SignUpPage = () => {
{ handleInputChange("email", e.target.value); @@ -93,7 +97,7 @@ const SignUpPage = () => {
{ handleInputChange("password", e.target.value); @@ -107,8 +111,16 @@ const SignUpPage = () => {