Introduction to the AuthenticationPage Component

AuthenticationPage: Secure Login with Dynamic Styles and Password Reset

The AuthenticationPage component provides a secure login interface for the Kundima admin platform. It includes a user authentication form, password reset functionality, and dynamic background styling to enhance the user experience.

This page utilizes Next.js features such as useEffect for applying dynamic styles and useDisclosure for managing the modal state for password reset. It ensures that the page is visually appealing and functional with minimal distraction.

Full Code

'use client'
import { useDisclosure } from "@nextui-org/react"
import { UserAuthForm } from "@/app/pages/authentication/admin/components/signin"
import ResetKundima from "./components/reset"
import { useEffect } from "react";
 
export default function AuthenticationPage() {
  const { isOpen: isOpenReset, onOpen: onOpenReset, onClose: onCloseReset } = useDisclosure();
 
  useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      /* Experimental */
      body::after { 
        background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
        radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
        radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
        linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
        linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
        background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
        background-repeat: no-repeat;
        background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
        content: "";
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.17;
        position: fixed;
        z-index: 0;
        pointer-events: none;  /* Prevent the pseudo-element from blocking interactions */
      }
    `;
    document.head.appendChild(style);
 
    // Cleanup when the component unmounts
    return () => {
      document.head.removeChild(style);
    };
  }, []);
 
 
  return (
    <>
      <div className="container relative   h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
        <div className="flex h-screen w-screen items-center justify-center">
          <div className="lg:p-8">
            <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
              <div className="flex flex-col space-y-2 text-center">
                <h1 className="text-2xl font-semibold tracking-tight">
                  Kundima Admin Login
                </h1>
                <p className="text-sm text-muted-foreground">
                  Enter your email & password below to login your Kundima Account
                </p>
              </div>
              <UserAuthForm />
              <p onClick={onOpenReset} className="px-8 text-center text-sm text-muted-foreground cursor-pointer">
                Forgot Password? 
              </p> 
            </div>
          </div>
        </div>
 
        <ResetKundima isOpen={isOpenReset} onClose={onCloseReset} />
      </div>
 
      <div className="fixed bottom-0 w-full">
        <p 
          className="px-8 py-4 text-center text-xs text-muted-foreground cursor-pointer"
        >
          ©{new Date().getFullYear()} Kundima Platforms
        </p>
      </div>
    </>
  )
}

Key Features

1. Dynamic Background Styling

The page features an experimental background effect that uses multiple gradient layers for a visually striking appearance. The background is applied through the body::after pseudo-element and is dynamically injected into the page.

useEffect(() => {
  const style = document.createElement('style');
  style.innerHTML = `/* Experimental styles */`;
  document.head.appendChild(style);
 
  return () => {
    document.head.removeChild(style);
  };
}, []);

2. User Authentication Form

The UserAuthForm component is used to handle user login, allowing admins to input their email and password to access the platform. This form ensures secure access to the admin console.

<UserAuthForm />

The page includes a password reset feature implemented with useDisclosure from NextUI. When the user clicks the “Forgot Password?” link, a modal is opened where they can initiate the reset process.

const { isOpen: isOpenReset, onOpen: onOpenReset, onClose: onCloseReset } = useDisclosure();

4. Responsive Design

The layout adjusts according to the screen size. It uses a grid layout for larger screens and centers the content vertically and horizontally on smaller screens to ensure the page is usable across devices.

<div className="container relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">

5. Footer

A footer section displays the current year and credits for Kundima Platforms. It is fixed to the bottom of the page to remain visible as the user interacts with the page.

<div className="fixed bottom-0 w-full">
  <p className="px-8 py-4 text-center text-xs text-muted-foreground cursor-pointer">
    ©{new Date().getFullYear()} Kundima Platforms
  </p>
</div>

Structure and Workflow

Dynamic Styles with `useEffect`

The useEffect hook is used to inject dynamic background styles into the page, enhancing its visual appeal. The styles are added on component mount and removed when the component unmounts, ensuring no memory leaks.

User Authentication

The page checks if the user is authenticated before displaying the login form. The UserAuthForm handles the submission of login credentials. If the user forgets their password, they can initiate a password reset by clicking the “Forgot Password?” link, which triggers the onOpenReset function.

Benefits

Enhanced User Interface: Dynamic background effects make the login page more visually engaging.
Secure Authentication: Login and password reset functionality ensure that only authorized users can access the admin console.
Responsive Layout: The page adjusts its layout to provide an optimal experience on various screen sizes.
Modular Components: The authentication form and reset modal are separate components, allowing for easy maintenance and future enhancements.

Code Breakdown

<div className="container relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
  <div className="flex h-screen w-screen items-center justify-center">
    <div className="lg:p-8">
      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
        <div className="flex flex-col space-y-2 text-center">
          <h1 className="text-2xl font-semibold tracking-tight">Kundima Admin Login</h1>
          <p className="text-sm text-muted-foreground">
            Enter your email & password below to login your Kundima Account
          </p>
        </div>
        <UserAuthForm />
        <p onClick={onOpenReset} className="px-8 text-center text-sm text-muted-foreground cursor-pointer">
          Forgot Password?
        </p> 
      </div>
    </div>
  </div>
  <ResetKundima isOpen={isOpenReset} onClose={onCloseReset} />
</div>

This section of the code handles the layout and structure of the login form, the password reset functionality, and the footer. The use of conditional rendering ensures the page adapts based on user interaction.

By integrating these features, the AuthenticationPage ensures that users have a secure and visually appealing login experience, while also offering the ability to reset passwords if needed.

Stylesheet Admin Console