Skip to content
My Docs

HomeScreen Page

This is the first page a user sees when they visit the platform, it prompts them to login

Documentation for HomePage Component

Overview

The HomePage component is the landing page of the Orbtronics Payment Dashboard, primarily functioning as the login interface for users.

Implementation Details

  • Context: Utilizes UserContext to globally manage user state.
  • Login Functionality: Employs loginUser function from usersApi for authentication.
  • Navigation: Redirects to appropriate dashboard (admin-dashboard or client) based on user role.
  • Loading State: Includes a SmallLoadingSpinner component to indicate ongoing login processes.

Code Block

import React, { useState, useContext } from "react";
import "./HomePage.css";
// ... other imports


const HomePage = () => {
  // State declarations
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isloading, setIsLoading] = useState(false);
  const { setUser } = useContext(UserContext);
  const navigate = useNavigate();


  // Function to handle form submission
  const onSubmit = async (e) => {
    // ... form submission logic
  };


  return (
    // JSX for the component
  );
};


export default HomePage;

API Interaction

  • loginUser: Authenticates user credentials.

Usage

  • Inputs: Email and password fields for user credentials.
  • Submit: The submit button initiates the login process.
  • Validation: User feedback provided through ToastContainer.

Style and Layout

  • The component uses MDBReact UI Kit for styling.
  • Features a two-column layout with a background image on larger screens.

Enhancements

  • Responsive design ensures usability across devices.
  • Remember me functionality and forgot password link (to be implemented).

Additional Notes

  • Ensure environment variables are set for API interactions.
  • User authentication and management is crucial for security.

This documentation provides a comprehensive guide to the HomePage component. For more detailed API documentation, refer to the specific function definitions in usersApi.js.