Login Page (pages/login.tsx)¶

Overview¶

Authentication page that handles user login and password reset functionality.

Features¶

User login with email and password
Password reset functionality
Loading state animations
Error handling with banner notifications
Responsive design

URL Parameters¶

None - public route

Implementation¶

State Management¶

const [errorMessage, setErrorMessage] = useState<string>("");
const [isResetPasswordMode, setIsResetPasswordMode] = useState(false);
const [isResetPasswordLinkSent, setIsResetPasswordLinkSent] = useState(false);
const [isLoading, setIsLoading] = useState(false);

Methods¶

async function handleSubmit(event: FormEvent<HTMLFormElement>)
// Handles form submission for both login and password reset
// Manages authentication flow and error states

const handleClose = () => 
// Closes error message banner

HTML Structure¶

<div className="flex justify-center items-center min-h-screen w-screen bg-blue-925">
  <div className="flex justify-center flex-col w-screen max-w-lg border rounded-lg shadow-lg p-8 bg-blue-925">
    <form className="flex flex-col">
      {/* Login/Reset Password Form Fields */}
    </form>
  </div>
  <object className="relative top-0 right-0 w-1/3 h-auto" data="/app/bidscript_side_svg_white.svg" />
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

Banner

API Routes¶

/api/auth/signin (NextAuth)
/api/email (Password reset)

Routes to Page¶

Direct: /login
From: Session expiration
From: Unauthenticated access attempts

Dependencies¶

import { signIn } from "next-auth/react"
import { useRouter } from "next/router"
import { useSession } from "next-auth/react"
import { motion } from "framer-motion"

Notes¶

Handles both login and password reset flows
Uses NextAuth for authentication
Includes loading animations
Responsive design with mobile support