feat(auth): implement initial sign up UI components (draft) #287

Homvi · 2025-02-04T14:20:08Z

Description

This draft PR introduces the initial changes for the new onboarding flow.

Progress Checklist

Rename SignInPage to SignUpPage
Build sign up form layout and basic UI components
Finalize UI based on Figma mockups (excluding last mockup)
Add validation to input fields
Store values in client state
Go to a certain step via clicking the stepper

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Manual testing

Test Instructions:
1. Open a browser and navigate to http://localhost:3000/sign-up.
2. You should see the onboarding form with multiple steps.
3. The user should be able to navigate through the different steps by clicking the "Back" or "Continue" buttons, depending on the current step.
4. Ensure that the design and layout of the onboarding form match the provided design specifications.
5. At each step, the user should be able to view the correct content corresponding to that step in the onboarding process.
6. On the last step, the "Submit" button should be visible but disabled for now.
Expected Behavior:
- The onboarding form should load correctly with multiple steps.
- Navigation between the steps should work by clicking the "Back" and "Continue" buttons.
- The form's design should reflect the correct layout and style as per the design specifications.
- The form should display all steps properly, and users should be able to proceed through them without errors.
- The "Submit" button on the last step should be disabled until the form submission logic is implemented.

TBD: Tests will be added as the implementation progresses.

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

Note:
This PR focuses solely on implementing the initial UI for the sign up form.
Future commits will add additional functionality and refinements based on team feedback.

Feedback on the current UI structure and component naming is welcome!

vercel · 2025-02-04T14:20:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
chingu-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 11, 2025 5:36pm

…pFormContainer

…dingContainer

Updated `<main>` element in `layout.tsx` to use `relative` positioning. This allows child elements to use `position: absolute` for better layout flexibility. Removed unnecessary whitespace inside the child container.

Created `WelcomeChingu` component for the onboarding process. Includes an illustration, a welcome message, and a "Begin" button to start onboarding.

Added `OnboardingContainer` component to manage the onboarding steps. Includes a stepper, navigation buttons, and step-specific content.

…gContainer - Updated step names for better clarity - Added padding to the first name and last name input section - Added padding to the "What features are you most excited about?" section - Adjusted layout and removed unnecessary flex container for "How did you hear about us" - Added padding to the "If you are on LinkedIn, what is your profile URL?" section

Replaced the static UI in step 3 of the onboarding process with the `WhatFeatures` component to improve modularity and maintainability.

Implemented the `WhatFeatures` component to allow users to select up to three features they are most excited about. If the limit is reached, unchecked options are disabled dynamically.

- Replaced "Data Analytics" with "Support" and updated description - Replaced "Custom Integration" with "Challenge" and updated description - Replaced "Team Collaboration" with "Specific Study Groups" and updated description - Replaced "Solidarity" with "Teamwork" and updated description - Replaced "Data Analytics" with "Accountability" and updated description with "Having an "Accountability Buddy" to help me stay motivated" - Replaced "Custom Integration" with "Workshops" and updated description - Replaced "Team Collaboration" with "Pair Programming" and updated description

…nUrl" - Imported and added "HowDidYouHear" component for step 5 - Imported and added "LinkedInUrl" component for step 7 - Replaced static text for "How did you hear about us" with the "HowDidYouHear" component - Replaced static text for LinkedIn URL prompt with the "LinkedInUrl" component

- Added a new "LinkedInUrl" component to prompt users for their LinkedIn profile URL - Included optional text and styling for the component

- Added a new "HowDidYouHear" component to prompt users for how they heard about the service - Included two columns with radio options for various sources (dev.to, FreeCodeCamp, LinkedIn, etc.) - Managed selected option state and event handling for radio buttons

…esign consistency

…p` hook - Removed `useState` for step management in `OnboardingContainer` - Integrated `useOnboardingStep` to handle step navigation centrally - Simplified `goToStep`, `handleNext`, and `handleBack` by delegating logic to the hook

- Created `useOnboardingStep` to manage step state and navigation logic - Provides `currentStep`, `goToStep`, `handleNext`, and `handleBack` for reusable step control

…gStepper` - Removed inline stepper status logic and simplified step navigation - Integrated new `OnboardingStepper` component to handle step rendering - Cleaned up code related to stepper condition and status management

- Added `OnboardingStepper` component to manage and display step navigation in onboarding - Utilized Chingu's `Stepper` component for step progression visualization - Conditioned rendering of stepper based on current step

…pply FormWrapper - Moved PersonalInfoForm, WhatFeatures, HowDidYouHear, and LinkedInUrl to a new 'forms' folder for better organization. - Created FormWrapper component to wrap form content and applied it to the form components.

- Extracted OptionalLabel, QuestionHeader, and FormsSpacer into separate components. - Improved reusability and maintainability of the form components.

Refactored the component layout to enhance readability and maintainability. Wrapped elements in structured flex containers with appropriate gaps, improving spacing and alignment.

Updated `FormWrapper` to use a `flex` column layout with a small gap between child elements, improving spacing and structure.

Refactored `HowDidYouHear` to wrap the question header and optional label in separate divs, improving structure and readability.

Refactored `LinkedInUrl` to wrap the question header and spacer in a div, improving structure and consistency with other form components.

Updated the height of `OptionalLabel` from `h-8` to `h-6` for better spacing and alignment with other form elements.

…ility - Merged `optionsDataFirstCol` and `optionsDataSecondCol` into a single `options` array. - Removed redundant `formatOption` function and integrated option formatting directly into JSX. - Improved layout structure by wrapping the header and description inside a container. - Adjusted checkbox styling for better UI consistency.

Dan-Y-Ko · 2025-02-28T22:48:32Z

@Homvi please resolve the merge conflicts

refactor(auth): rename SignInPage to SignUpPage

3c8d64f

Homvi self-assigned this Feb 4, 2025

Homvi added the team/FE Frontend Team label Feb 4, 2025

refactor(auth): remove disabled attribute from submit button in SignU…

7976ca8

…pFormContainer

vercel bot deployed to Preview February 4, 2025 14:33 View deployment

Homvi added 7 commits February 4, 2025 19:46

feat(assets): add onboarding dark mode illustration

cbde0e8

feat(assets): add onboarding light mode illustration

53de891

refactor(auth): remove AuthBannerContainer from layout

960563e

feat(auth): add AuthBannerContainer to sign-in page

2af7437

refactor(sign-up): rename handleConfirmationContainer to handleOnboar…

ccff741

…dingContainer

refactor(sign-up): replace confirmation flow with onboarding flow

5a16cf5

feat(sign-up): add OnboardingContainer component

25848b5

vercel bot deployed to Preview February 4, 2025 18:51 View deployment

Homvi added 4 commits February 5, 2025 19:25

feat(assets): add onboarding images

247668a

refactor(auth-layout): set main container to relative positioning

0ec9976

Updated `<main>` element in `layout.tsx` to use `relative` positioning. This allows child elements to use `position: absolute` for better layout flexibility. Removed unnecessary whitespace inside the child container.

feat(onboarding): add WelcomeChingu component

b848c6b

Created `WelcomeChingu` component for the onboarding process. Includes an illustration, a welcome message, and a "Begin" button to start onboarding.

feat(onboarding): implement OnboardingContainer component

e40b21e

Added `OnboardingContainer` component to manage the onboarding steps. Includes a stepper, navigation buttons, and step-specific content.

vercel bot deployed to Preview February 5, 2025 18:34 View deployment

vercel bot deployed to Preview February 5, 2025 19:00 View deployment

Homvi added 2 commits February 6, 2025 10:21

feat(onboarding): integrate WhatFeatures component into step 3

49496ae

Replaced the static UI in step 3 of the onboarding process with the `WhatFeatures` component to improve modularity and maintainability.

feat(sign-up): add WhatFeatures component with selection limit

553ebe8

Implemented the `WhatFeatures` component to allow users to select up to three features they are most excited about. If the limit is reached, unchecked options are disabled dynamically.

vercel bot deployed to Preview February 6, 2025 09:26 View deployment

Homvi added 4 commits February 6, 2025 11:38

feat(auth): create LinkedInUrl component for onboarding step

41c0d8c

- Added a new "LinkedInUrl" component to prompt users for their LinkedIn profile URL - Included optional text and styling for the component

vercel bot deployed to Preview February 6, 2025 10:42 View deployment

feat: add LinkedIn URL input field with icon and placeholder

8522aa3

Homvi added 2 commits February 8, 2025 12:47

feat: add OnboardingImage component with border radius for improved d…

cb83b99

…esign consistency

chore: update import path for OnboardingContainer to use absolute path

ffa03ba

vercel bot deployed to Preview February 8, 2025 11:51 View deployment

Homvi added 2 commits February 8, 2025 12:58

refactor: extract onboarding navigation into separate component

a7e201e

feat: add OnboardingNavigation component for improved code modularity

92d2a92

vercel bot deployed to Preview February 8, 2025 12:00 View deployment

Homvi added 2 commits February 8, 2025 13:14

feat(hooks): add useOnboardingStep hook for step navigation

50014e7

- Created `useOnboardingStep` to manage step state and navigation logic - Provides `currentStep`, `goToStep`, `handleNext`, and `handleBack` for reusable step control

vercel bot deployed to Preview February 8, 2025 12:16 View deployment

Homvi added 2 commits February 8, 2025 13:21

feat(onboarding): create OnboardingStepper component

6df5208

- Added `OnboardingStepper` component to manage and display step navigation in onboarding - Utilized Chingu's `Stepper` component for step progression visualization - Conditioned rendering of stepper based on current step

vercel bot deployed to Preview February 8, 2025 12:24 View deployment

Homvi added 4 commits February 8, 2025 13:39

feat: refactor onboarding container to use dynamic step content

510d578

feat: create dynamic onboarding steps configuration

fd596c2

feat: create PersonalInfoForm component for user input

67d123d

fix: make handleBegin prop optional in WelcomeChingu component

b33097e

vercel bot deployed to Preview February 8, 2025 12:42 View deployment

vercel bot deployed to Preview February 8, 2025 13:15 View deployment

refactor(onboarding): extract reusable components for forms

c3954cf

- Extracted OptionalLabel, QuestionHeader, and FormsSpacer into separate components. - Improved reusability and maintainability of the form components.

vercel bot deployed to Preview February 8, 2025 13:33 View deployment

feat(onboarding): improve layout structure in WelcomeChingu component

010a3d4

Refactored the component layout to enhance readability and maintainability. Wrapped elements in structured flex containers with appropriate gaps, improving spacing and alignment.

vercel bot deployed to Preview February 11, 2025 17:13 View deployment

Homvi added 5 commits February 11, 2025 18:31

style(form-wrapper): add flex column layout with gap

9bd2a72

Updated `FormWrapper` to use a `flex` column layout with a small gap between child elements, improving spacing and structure.

refactor(how-did-you-hear): wrap header and label in separate divs

18a5673

Refactored `HowDidYouHear` to wrap the question header and optional label in separate divs, improving structure and readability.

refactor(linkedin-url): wrap question header and spacer in a div

53447af

Refactored `LinkedInUrl` to wrap the question header and spacer in a div, improving structure and consistency with other form components.

style(optional-label): adjust height from 8 to 6

ad7f292

Updated the height of `OptionalLabel` from `h-8` to `h-6` for better spacing and alignment with other form elements.

vercel bot deployed to Preview February 11, 2025 17:36 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(auth): implement initial sign up UI components (draft) #287

feat(auth): implement initial sign up UI components (draft) #287

Homvi commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading

Dan-Y-Ko commented Feb 28, 2025

feat(auth): implement initial sign up UI components (draft) #287

Are you sure you want to change the base?

feat(auth): implement initial sign up UI components (draft) #287

Conversation

Homvi commented Feb 4, 2025 • edited Loading

Description

Progress Checklist

Type of change

How Has This Been Tested?

Manual testing

Checklist:

vercel bot commented Feb 4, 2025 • edited Loading

Dan-Y-Ko commented Feb 28, 2025

Homvi commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading