SignIn Page - AgroLogi/FreshShop GitHub Wiki

The SignIn component is a login page for the FreshShop platform, developed using Next.js and Tailwind CSS. Here’s a detailed breakdown of its structure and functionality:

1. Imports and Dependencies:

Next.js Components:

  • Image is used to display the logo.
  • Link is used for internal navigation to the sign-up page.
  • useRouter is used for programmatic navigation. React:
  • React hooks useState and useEffect are used for state management and side effects. Custom Components:
  • Input and Button components are imported from a custom UI library, which are likely built using Tailwind CSS. API Utility:
  • GlobalApi is used for handling the login API request. Toast Notifications:
  • sonner is used to display notifications for login success or failure.

2. State Management:

Two state variables are defined using useState:

  • email: Stores the user’s email input.
  • password: Stores the user’s password input.

3. Effect for Authentication Check:

  • On component mount (useEffect), it checks if a JWT token exists in sessionStorage.
  • If a token is found, the user is redirected to the home page (router.push('/')), preventing access to the login page when already authenticated.

4. Login Handler:

  • onLoginAccount is a function that handles the login process when the "Login" button is clicked.
  • It calls the Login function from GlobalApi with the email and password as arguments. If the login is successful:
  • User details and JWT token are stored in sessionStorage.
  • The user is redirected to the home page (router.push('/')).
  • A success toast notification ("Login Successful") is displayed. If the login fails:
  • An error toast notification ("Login Failed") is shown.

5. UI Structure:

  • The entire component is centered on the page using flexbox (flex and justify-center classes).
  • The inner div has a light green background (bg-green-200), padding (p-3), and a border with rounded corners (rounded-lg). The layout includes:
  • Logo: Displayed using the Image component. Titles:
  • "Welcome to Fresh Shop" and "Login" are prominently displayed using font-bold and text size classes. Form Fields:
  • Two Input fields for entering email and password. Login Button:
  • The button is disabled until both the email and password fields are filled. Sign-Up Redirect Link:
  • For users without an account, a link to the "Sign Up" page is provided.

6. Styling and Responsiveness:

  • Tailwind CSS is used for consistent styling and layout.
  • Elements are well-spaced, and the component is designed to be visually appealing and easy to use.

7. Functionality Summary:

  • The component ensures that authenticated users cannot access the login page.
  • It provides a simple and effective interface for users to log in to the FreshShop platform.
  • Error handling and success messages provide feedback to the user, enhancing the user experience.
  • This SignIn component is well-structured and effectively handles the login process for the FreshShop platform, providing a seamless experience for users.