From f771251b7529aaf26afd159b0489305d982f8f46 Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Tue, 13 Feb 2024 20:09:17 -0500 Subject: [PATCH 01/17] feat: update signup form to be modular --- package.json | 2 +- src/app/signup/SignupForm.tsx | 214 +++++++++++++++++++++------------- 2 files changed, 136 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index 3adace8..578544c 100644 --- a/package.json +++ b/package.json @@ -31,4 +31,4 @@ "tailwindcss": "^3.3.0", "typescript": "^5" } -} \ No newline at end of file +} diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 8ec8b0a..1541869 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -6,107 +6,163 @@ import { EclipseLogoLong, Notification, } from "eclipse-components"; +import { useState } from "react"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; +import FontAwesomeIcon from "font-awesome"; /** * Signup Form Component * @returns JSX.Element */ +type FormData = { + firstName: string; + lastName: string; +}; + export default function SignupForm() { + const [formData, setFormData] = useState({ + firstName: "", + lastName: "", + }); + const [currentStep, setCurrentStep] = useState(0); - const searchParams = useSearchParams(); - return ( - <> - -
{ - e.preventDefault(); + /* + *more questions can be added to questions array + */ + const questions = [ + { + text: "What's your name?", + key: "firstName", + type: "text", + placeholder: "First Name", + }, + { + text: "What's your last name?", + key: "lastName", + type: "text", + placeholder: "Last Name", + }, + { + text: "What's your email?", + key: "email", + type: "email", + placeholder: "Email", + }, + // { text: "Create a password", key: "password", type: "password" }, these may need to be in the same step + // { text: "Confirm your password", key: "confirmPassword", type: "password" }, + ]; + + /* + *updates formData with the user's inputs + */ + const handleInputChange = (key: keyof FormData, value: string) => { + setFormData((prev) => ({ ...prev, [key]: value })); + }; + + const goToNextStep = () => { + if (currentStep < questions.length - 1) { + setCurrentStep(currentStep + 1); + } + // Add any additional actions for the last step, like submitting the form + }; + + const goToPreviousStep = () => { + if (currentStep > 0) { + setCurrentStep(currentStep - 1); + } + }; + + const handleSubmit = async (e) => { + e.preventDefault(); - const firstName = e.currentTarget.firstName.value; - const lastName = e.currentTarget.lastName.value; - const email = e.currentTarget.username.value; - const password = e.currentTarget.password.value; - const confirmPassword = e.currentTarget.confirmPassword.value; + // Validate password + if (formData.password !== formData.confirmPassword) { + console.log("Passwords do not match"); + return; + } - // Validate password - if (password !== confirmPassword) { - console.log("Passwords do not match"); - return; - } + // Send request to create user + const response = await fetch("/api/auth/signup", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(formData), + }); - // Send request to create user - const response = await fetch("api/auth/signup", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - firstName: firstName, - lastName: lastName, - }), - }); + const data = await response.json(); - const data = await response.json(); + if (response.ok) { + // Proceed with sign-in or navigate to another page + // if (response.ok) { + // await signIn("credentials", { + // username: email, + // password: password, + // callbackUrl: searchParams.get("callbackUrl") || "/", + // }); + } + }; - if (response.ok) { - await signIn("credentials", { - username: email, - password: password, - callbackUrl: searchParams.get("callbackUrl") || "/", - }); - } - }} + const searchParams = useSearchParams(); + return ( + <> + + -
- {" "} +
+

+ {questions[currentStep].text} +

{" "} - + {currentStep === 0 ? ( + <> + +

+ or press Enter +

+ + ) : ( + + )} +
+
+
+ + + +
+
+ + + +
- - - - -

- Already have an account?{" "} - - Login - -

); From d25e4aca7710c57894cc6bcc58ac9286a9bc1e7c Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Wed, 14 Feb 2024 02:36:57 -0500 Subject: [PATCH 02/17] feat: split signup into four steps --- src/app/signup/SignupForm.tsx | 110 +++++++++++++++++++++++++--------- 1 file changed, 83 insertions(+), 27 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 1541869..41f7908 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -19,14 +19,19 @@ import FontAwesomeIcon from "font-awesome"; type FormData = { firstName: string; lastName: string; + email: string; + password: string; }; export default function SignupForm() { const [formData, setFormData] = useState({ + email: "", + password: "", firstName: "", lastName: "", }); const [currentStep, setCurrentStep] = useState(0); + const [currentInput, setCurrentInput] = useState(""); /* *more questions can be added to questions array @@ -50,20 +55,34 @@ export default function SignupForm() { type: "email", placeholder: "Email", }, + { + text: "Awesome, just a few more things left:", + key: "password", + type: "password", + placeholder: "Password", + }, // { text: "Create a password", key: "password", type: "password" }, these may need to be in the same step // { text: "Confirm your password", key: "confirmPassword", type: "password" }, ]; + const STEP_LENGTH = questions.length; + /* *updates formData with the user's inputs */ - const handleInputChange = (key: keyof FormData, value: string) => { - setFormData((prev) => ({ ...prev, [key]: value })); + const handleInputChange = (value: string) => { + setCurrentInput(value); + console.log("currentInput", currentInput); }; - const goToNextStep = () => { - if (currentStep < questions.length - 1) { + const goToNextStep = (e) => { + if (currentStep < questions.length - 1 && formData[currentStep] != "") { + setFormData((prev) => ({ + ...prev, + [questions[currentStep].key]: currentInput, + })); setCurrentStep(currentStep + 1); + setCurrentInput(""); } // Add any additional actions for the last step, like submitting the form }; @@ -71,6 +90,7 @@ export default function SignupForm() { const goToPreviousStep = () => { if (currentStep > 0) { setCurrentStep(currentStep - 1); + setCurrentInput(""); } }; @@ -83,6 +103,7 @@ export default function SignupForm() { return; } + console.log("formData", formData); // Send request to create user const response = await fetch("/api/auth/signup", { method: "POST", @@ -95,11 +116,11 @@ export default function SignupForm() { if (response.ok) { // Proceed with sign-in or navigate to another page // if (response.ok) { - // await signIn("credentials", { - // username: email, - // password: password, - // callbackUrl: searchParams.get("callbackUrl") || "/", - // }); + await signIn("credentials", { + username: email, + password: password, + callbackUrl: searchParams.get("callbackUrl") || "/", + }); } }; @@ -107,10 +128,7 @@ export default function SignupForm() { return ( <> -
+

{questions[currentStep].text} @@ -119,22 +137,58 @@ export default function SignupForm() { placeholder={questions[currentStep].placeholder} type={questions[currentStep].type} name={questions[currentStep].key} + value={currentInput} required className="w-full" + onChange={(e) => handleInputChange(e.target.value)} + autoFocus > - {currentStep === 0 ? ( + {(currentStep === 0 && ( <> - -

- or press Enter -

+ - ) : ( - - )} + )) || + (currentStep === STEP_LENGTH - 1 && ( + <> + + + )) || ( + <> + + + )} +

+ or press Enter +

+
+ Already have an account?{" "} + + Login + +
-
-
+ +
+
+
-
+ +
+
+
+
- +
); } From 908e355ee5ae9fea5b7677c96f0c55876d5cb696 Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Wed, 14 Feb 2024 18:11:37 -0500 Subject: [PATCH 03/17] refactor: make flow sendable to api backend --- src/app/signup/SignupForm.tsx | 60 ++++++++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 11 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 41f7908..062913b 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -6,7 +6,7 @@ import { EclipseLogoLong, Notification, } from "eclipse-components"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; @@ -21,17 +21,20 @@ type FormData = { lastName: string; email: string; password: string; + confirmPassword: string; }; export default function SignupForm() { const [formData, setFormData] = useState({ - email: "", - password: "", firstName: "", lastName: "", + email: "", + password: "", + confirmPassword: "", }); const [currentStep, setCurrentStep] = useState(0); const [currentInput, setCurrentInput] = useState(""); + const [confirmPasswordInput, setConfirmPasswordInput] = useState(""); /* *more questions can be added to questions array @@ -72,29 +75,46 @@ export default function SignupForm() { */ const handleInputChange = (value: string) => { setCurrentInput(value); - console.log("currentInput", currentInput); }; + const handleConfirmPasswordChange = (value: string) => { + setConfirmPasswordInput(value); + }; + + useEffect(() => { + // This will run whenever formData changes, ensuring you're working with the latest state + console.log("formData updated", formData); + + // Add any additional logic you want to execute after formData has been updated + }, [formData]); + const goToNextStep = (e) => { if (currentStep < questions.length - 1 && formData[currentStep] != "") { setFormData((prev) => ({ ...prev, [questions[currentStep].key]: currentInput, })); - setCurrentStep(currentStep + 1); - setCurrentInput(""); + setCurrentStep((currentStep) => currentStep + 1); + setCurrentInput(() => ""); } // Add any additional actions for the last step, like submitting the form }; const goToPreviousStep = () => { if (currentStep > 0) { - setCurrentStep(currentStep - 1); - setCurrentInput(""); + setCurrentStep((currentStep) => currentStep - 1); + setCurrentInput(() => ""); } }; const handleSubmit = async (e) => { + setFormData((prev) => ({ + ...prev, + [questions[currentStep].key]: currentInput, + confirmPassword: confirmPasswordInput, + })); + + console.log("handlesubmit formdata", formData); e.preventDefault(); // Validate password @@ -108,7 +128,12 @@ export default function SignupForm() { const response = await fetch("/api/auth/signup", { method: "POST", headers: { "Content-Type": "application/json" }, - body: JSON.stringify(formData), + body: JSON.stringify({ + email: formData.email, + password: formData.password, + firstName: formData.firstName, + lastName: formData.lastName, + }), }); const data = await response.json(); @@ -128,7 +153,7 @@ export default function SignupForm() { return ( <> -
+

{questions[currentStep].text} @@ -143,6 +168,19 @@ export default function SignupForm() { onChange={(e) => handleInputChange(e.target.value)} autoFocus > + {currentStep === STEP_LENGTH - 1 ? ( + handleConfirmPasswordChange(e.target.value)} + className="w-full" + > + ) : ( + "" + )} {(currentStep === 0 && ( <>

-
+
- )) || ( + )) || + (currentStep === 2 && ( <> + {/* Step 3: email */} + - )} + )) || + (currentStep === 3 && ( + <> + + + + + ))}

or press Enter

From 9ab6958cce3df9b246040c64af2a330782d5fb5b Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 16 Feb 2024 22:07:54 -0500 Subject: [PATCH 08/17] fix: signup submit --- src/app/signup/SignupForm.tsx | 111 ++++++++++++++++++---------------- 1 file changed, 58 insertions(+), 53 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 4d9354f..daa707d 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -79,7 +79,8 @@ export default function SignupForm() { }, [formData]); const goToNextStep = (e) => { - if (currentStep < questions.length - 1 && formData[currentStep] != "") { + console.log("test"); + if (currentStep < questions.length - 1) { setFormData((prev) => ({ ...prev, [questions[currentStep].key]: formData[questions[currentStep].key], @@ -99,7 +100,6 @@ export default function SignupForm() { setFormData((prev) => ({ ...prev, [questions[currentStep].key]: formData[questions[currentStep].key], - confirmPassword: formData["confirmPassword"], })); console.log("handlesubmit formdata", formData); @@ -141,34 +141,54 @@ export default function SignupForm() { return ( <> -
+
{ + e.preventDefault(); + + console.log(e.currentTarget); + + if (currentStep === 3) { + handleSubmit(e); + } else { + goToNextStep(e); + } + }} + >

{questions[currentStep].text}

- {(currentStep === 0 && ( - <> - {/* Step 1: First name */} - - - - )) || + <> + {/* Step 1: First name */} + + + + {(currentStep === 0 && null) || (currentStep === 1 && ( <> {/* Step 2: Last name */} @@ -176,17 +196,12 @@ export default function SignupForm() { placeholder="Last name" type="text" name="lastName" - value="" - required + // value="" + // required className="w-full" onChange={handleInputChange} - autoFocus > - @@ -197,18 +212,13 @@ export default function SignupForm() { - @@ -219,26 +229,21 @@ export default function SignupForm() { placeholder="Password" type="password" name="password" - value="" - required + // value="" + // required className="w-full" onChange={handleInputChange} - autoFocus > - @@ -253,7 +258,7 @@ export default function SignupForm() {
-
+
@@ -251,40 +244,6 @@ export default function SignupForm() {
-
-
- -
-
- -
-
); } From a4291556bc10d442d8e5e16a5ef16a7bc086a38d Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Thu, 22 Feb 2024 01:12:56 -0500 Subject: [PATCH 11/17] refactor: import animation library --- package-lock.json | 39 ++++++ package.json | 1 + src/app/signup/SignupForm.tsx | 217 ++++++++++++++++++++-------------- 3 files changed, 167 insertions(+), 90 deletions(-) diff --git a/package-lock.json b/package-lock.json index b75a06c..a61c7a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@sendgrid/mail": "^8.1.0", "bcrypt": "^5.1.1", "eclipse-components": "^0.0.141", + "framer-motion": "^11.0.5", "next": "14.1.0", "next-auth": "^4.24.5", "prisma": "^5.9.1", @@ -63,6 +64,21 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -2378,6 +2394,29 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.5.tgz", + "integrity": "sha512-Lb0EYbQcSK/pgyQUJm+KzsQrKrJRX9sFRyzl9hSr9gFG4Mk8yP7BjhuxvRXzblOM/+JxycrJdCDVmOQBsjpYlw==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", diff --git a/package.json b/package.json index 578544c..92bafee 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@sendgrid/mail": "^8.1.0", "bcrypt": "^5.1.1", "eclipse-components": "^0.0.141", + "framer-motion": "^11.0.5", "next": "14.1.0", "next-auth": "^4.24.5", "prisma": "^5.9.1", diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index fec57ff..ad8562c 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -5,6 +5,8 @@ import { useState, useEffect } from "react"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; +import { motion } from "framer-motion"; +import { AnimatePresence } from "framer-motion"; /** * Signup Form Component @@ -27,6 +29,7 @@ export default function SignupForm() { confirmPassword: "", }); const [currentStep, setCurrentStep] = useState(0); + const [visible, setVisible] = useState(true); /* *more questions can be added to questions array @@ -151,96 +154,130 @@ export default function SignupForm() {

{questions[currentStep].text}

- <> - {/* Step 1: First name */} - - - - {(currentStep === 0 && null) || - (currentStep === 1 && ( - <> - {/* Step 2: Last name */} - - - - )) || - (currentStep === 2 && ( - <> - {/* Step 3: email */} - - - - )) || - (currentStep === 3 && ( - <> - - - - - ))} -

- or press Enter -

-
- Already have an account?{" "} - - Login - +
+ + {currentStep == 0 && ( + + {/* Step 1: First name */} + + + +

+ or press Enter +

+
+ Already have an account?{" "} + + Login + +
+ + )} + + {(currentStep === 0 && null) || + (currentStep === 1 && ( + + + {/* Step 2: Last name */} + + + + + )) || + (currentStep === 2 && ( + + + {/* Step 3: email */} + + + + + )) || + (currentStep === 3 && ( + <> + + + + + ))}
From a912553384d4f286bc19308d516011a823dcbbbe Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 09:10:11 -0500 Subject: [PATCH 12/17] style: complete animation --- src/app/signup/SignupForm.tsx | 256 +++++++++++++++++----------------- 1 file changed, 125 insertions(+), 131 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index ad8562c..661336b 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -60,9 +60,6 @@ export default function SignupForm() { placeholder: "Password", }, ]; - - const STEP_LENGTH = questions.length; - /* *updates formData with the user's inputs */ @@ -75,6 +72,104 @@ export default function SignupForm() { })); }; + const formSteps = [ + { + id: 0, + component: ( + <> + + +

+ or press Enter +

+
+ Already have an account?{" "} + + Login + +
+ + ), + }, + { + id: 1, + component: ( + <> + + + + ), + }, + { + id: 2, + component: ( + <> + + + + ), + }, + { + id: 3, + component: ( + <> + + + + + ), + }, + // Add other steps in a similar manner... + ]; + + const STEP_LENGTH = questions.length; + useEffect(() => { console.log("formData updated", formData); }, [formData]); @@ -151,134 +246,33 @@ export default function SignupForm() { }} >
-

- {questions[currentStep].text} -

-
- - {currentStep == 0 && ( - - {/* Step 1: First name */} - - - -

- or press Enter -

-
- Already have an account?{" "} - - Login - -
- - )} - - {(currentStep === 0 && null) || - (currentStep === 1 && ( - - - {/* Step 2: Last name */} - - - - - )) || - (currentStep === 2 && ( - - - {/* Step 3: email */} - - - - - )) || - (currentStep === 3 && ( - <> - - - - - ))} -
+ + {formSteps.map((step) => { + if (step.id === currentStep) { + return ( + <> + +

+ {questions[currentStep].text} +

+ {step.component} + + + ); + } + return null; + })} +
From 10fdc89c0a5acf854463e32f66b142d23735e8d8 Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 09:19:08 -0500 Subject: [PATCH 13/17] feat: password validation on frontend --- src/app/signup/SignupForm.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 661336b..13a6029 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -82,6 +82,8 @@ export default function SignupForm() { type="text" name="firstName" value={formData.firstName} + required + autoFocus onChange={handleInputChange} className="w-full" /> @@ -109,6 +111,8 @@ export default function SignupForm() { type="text" name="lastName" value={formData.lastName} + required + autoFocus onChange={handleInputChange} className="w-full" /> @@ -127,7 +131,8 @@ export default function SignupForm() { type="email" name="email" value={formData.email} - // required + required + autoFocus className="w-full" onChange={handleInputChange} > @@ -145,8 +150,11 @@ export default function SignupForm() { placeholder="Password" type="password" name="password" + pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" value={formData.password} - // required + required + autoFocus + title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" className="w-full" onChange={handleInputChange} > @@ -154,8 +162,9 @@ export default function SignupForm() { placeholder="Confirm Password" type="password" name="confirmPassword" + pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" // value="" - // required + required onChange={handleInputChange} className="w-full" > From b3b18e956ae789ff0961ce94163b9a8ab901645f Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 16:39:11 -0500 Subject: [PATCH 14/17] refactor: separate form components from signupform page --- src/app/signup/SignupForm.tsx | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 13a6029..e46eb5b 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -5,8 +5,12 @@ import { useState, useEffect } from "react"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; -import { motion } from "framer-motion"; -import { AnimatePresence } from "framer-motion"; +import { motion, AnimatePresence } from "framer-motion"; +import { + EclipseLogoTextOrbGlow, + StarBackground, + MainWrapper, +} from "eclipse-components"; /** * Signup Form Component @@ -21,6 +25,26 @@ type FormData = { }; export default function SignupForm() { + return ( +
+ + + + + +
+ ); +} + +/** + * Form Components + * + * @returns JSX.Element + */ +function Components(): JSX.Element { const [formData, setFormData] = useState({ firstName: "", lastName: "", @@ -242,7 +266,6 @@ export default function SignupForm() { const searchParams = useSearchParams(); return ( <> -
{ From 20c51bf3746f422145da91e1722d8a484c96f0ab Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 19:58:34 -0500 Subject: [PATCH 15/17] style: update logo, star background, animations --- package-lock.json | 8 +++---- package.json | 2 +- src/app/login/LoginForm.tsx | 4 ++-- src/app/signup/SignupForm.tsx | 44 +++++++++++++++++------------------ 4 files changed, 28 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index a61c7a5..338edac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@prisma/client": "^5.9.1", "@sendgrid/mail": "^8.1.0", "bcrypt": "^5.1.1", - "eclipse-components": "^0.0.141", + "eclipse-components": "^0.0.149", "framer-motion": "^11.0.5", "next": "14.1.0", "next-auth": "^4.24.5", @@ -1605,9 +1605,9 @@ "dev": true }, "node_modules/eclipse-components": { - "version": "0.0.141", - "resolved": "https://registry.npmjs.org/eclipse-components/-/eclipse-components-0.0.141.tgz", - "integrity": "sha512-1uBiEY/gYK8SBp3lY6bv3Ab+cuo5qe0YvvMkOwsbnqCVuTQu19UoFrhiXHwPbBgQEGrGQxLR2wrHmy418SR4qw==", + "version": "0.0.149", + "resolved": "https://registry.npmjs.org/eclipse-components/-/eclipse-components-0.0.149.tgz", + "integrity": "sha512-0d3gxDuoKl3X99ETLJ9JFgpe8jy52MInqGounJoF3hPRcwwpRrlwMLohtDl7msztnkjjfvuFUqRJ+ib27kY2Ew==", "peerDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/package.json b/package.json index 92bafee..75b932a 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@prisma/client": "^5.9.1", "@sendgrid/mail": "^8.1.0", "bcrypt": "^5.1.1", - "eclipse-components": "^0.0.141", + "eclipse-components": "^0.0.149", "framer-motion": "^11.0.5", "next": "14.1.0", "next-auth": "^4.24.5", diff --git a/src/app/login/LoginForm.tsx b/src/app/login/LoginForm.tsx index c15505f..5e50d54 100644 --- a/src/app/login/LoginForm.tsx +++ b/src/app/login/LoginForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { TextField, Button, EclipseLogoLong } from "eclipse-components"; +import { TextField, Button, EclipseLogoTextOrbGlow } from "eclipse-components"; import { signIn } from "next-auth/react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; @@ -14,7 +14,7 @@ export default function LoginForm() { return ( <> - + { e.preventDefault(); diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index e46eb5b..99eacec 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -27,12 +27,9 @@ type FormData = { export default function SignupForm() { return (
- - - + + +
@@ -114,15 +111,6 @@ function Components(): JSX.Element { -

- or press Enter -

-
- Already have an account?{" "} - - Login - -
), }, @@ -198,7 +186,6 @@ function Components(): JSX.Element { ), }, - // Add other steps in a similar manner... ]; const STEP_LENGTH = questions.length; @@ -267,7 +254,7 @@ function Components(): JSX.Element { return ( <> { e.preventDefault(); if (currentStep === 3) { @@ -278,7 +265,7 @@ function Components(): JSX.Element { }} >
- + {formSteps.map((step) => { if (step.id === currentStep) { return ( @@ -287,18 +274,29 @@ function Components(): JSX.Element { key={step.id} initial={ currentStep === 0 - ? { x: 0, opacity: 1 } - : { x: -50, opacity: 1 } + ? { x: 0, y: 0, opacity: 1 } + : { x: -50, opacity: 0.25 } } - animate={{ x: 0, opacity: 1 }} - exit={{ x: 30, opacity: 0 }} - transition={{ duration: 0.7 }} + animate={{ x: 0, y: 0, opacity: 1 }} + exit={{ x: 40, y: 0, opacity: 0 }} + transition={{ duration: 1, type: "intertia" }} >

{questions[currentStep].text}

{step.component} + +

+ or press  + Enter +

+
+ Already have an account?{" "} + + Login + +
); } From 00caf72bb3b15704da836dd38efc7b0e70f9f557 Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 20:08:23 -0500 Subject: [PATCH 16/17] chore: add jsDocs comments --- src/app/signup/SignupForm.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 99eacec..33ca9d9 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -53,7 +53,7 @@ function Components(): JSX.Element { const [visible, setVisible] = useState(true); /* - *more questions can be added to questions array + *Array of questions */ const questions = [ { @@ -93,6 +93,9 @@ function Components(): JSX.Element { })); }; + /* + * Components for each question / step + */ const formSteps = [ { id: 0, @@ -188,12 +191,13 @@ function Components(): JSX.Element { }, ]; - const STEP_LENGTH = questions.length; - useEffect(() => { console.log("formData updated", formData); }, [formData]); + /* + * Proceed to the next question + */ const goToNextStep = (e) => { if (currentStep < questions.length - 1) { setFormData((prev) => ({ @@ -205,12 +209,18 @@ function Components(): JSX.Element { // Add any additional actions for the last step, like submitting the form }; + /* + * Go to previous step + */ const goToPreviousStep = () => { if (currentStep > 0) { setCurrentStep((currentStep) => currentStep - 1); } }; + /* + * Submit signup data to backend and sign in + */ const handleSubmit = async (e) => { setFormData((prev) => ({ ...prev, @@ -250,6 +260,9 @@ function Components(): JSX.Element { } }; + /* + * Form return JSX + */ const searchParams = useSearchParams(); return ( <> From 4ab888fac37fe48a100d0f8b45633574a058b265 Mon Sep 17 00:00:00 2001 From: Reese Chong Date: Fri, 23 Feb 2024 20:13:12 -0500 Subject: [PATCH 17/17] feat: back button --- src/app/signup/SignupForm.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/signup/SignupForm.tsx b/src/app/signup/SignupForm.tsx index 33ca9d9..9c4311c 100644 --- a/src/app/signup/SignupForm.tsx +++ b/src/app/signup/SignupForm.tsx @@ -295,7 +295,24 @@ function Components(): JSX.Element { transition={{ duration: 1, type: "intertia" }} >

- {questions[currentStep].text} + {questions[currentStep].text}{" "} +

{step.component}