Signup Page - AgroLogi/FreshShop GitHub Wiki

The SignUp component is a user registration page created using Next.js and Tailwind CSS. Below is a detailed explanation of its structure and functionality:

1. Imports and Dependencies:

  • Next.js Components: Image for displaying images, Link for internal navigation, and useRouter for programmatic navigation.
  • React: The component uses React hooks like useState to manage form data and useEffect for side effects.
  • Custom UI Components: Input and Button are imported from a custom UI library, likely based on Tailwind CSS.
  • Utilities: GlobalApi is a utility module that contains the function registerUser for API calls.
  • Toast Notifications: sonner is used to display toast notifications, such as success or error messages.

2. State Management:

  • The component uses three state variables (username, email, and password) to manage user input for the sign-up form.

3. Effect for Authentication Check:

  • On component mount (useEffect), the component checks if there is an existing JWT token in sessionStorage.
  • If a JWT token is found, the user is redirected to the home page (router.push('/')), preventing access to the sign-up page when already authenticated.

4. Account Creation Handler:

  • The onCreateAccount function is triggered when the user clicks the "Create an Account" button.
  • It calls the registerUser function from GlobalApi with the username, email, and password.
  • If the registration is successful:
  • The user's information and JWT token are saved to sessionStorage.
  • A success toast notification ("Account Created Successfully") is displayed.
  • The user is redirected to the home page (router.push('/')).
  • If there is an error:
  • An error toast notification ("Error Creating Account") is displayed.

5. UI Structure:

  • The component is wrapped in a flex container (div) centered vertically and horizontally on the page.
  • The inner div is styled with Tailwind CSS classes like bg-green-200, p-3, and rounded-md.
  • It includes:
  • Logo: Displayed using the Image component.
  • Titles: "Welcome to Fresh Shop" and "Create An Account" titles.
  • Form Fields: Username, email, and password inputs are created using the custom Input component.
  • Create Account Button: A button that is disabled until all fields are filled.
  • Login Redirect Link: A link for users who already have an account to navigate to the login page.

6. Styling and Responsiveness:

  • The component uses Tailwind CSS for styling, making it responsive and visually appealing.
  • Elements are centered and have appropriate padding, margins, and hover effects.
  • This SignUp component provides a user-friendly interface for new users to create an account on the FreshShop platform. It also handles authentication redirection and error handling efficiently.