index.tsx)¶

Overview¶

Password reset interface that allows users to set a new password using a valid reset token.

Features¶

Password reset form
Password confirmation
Token validation
Error handling
Success notifications
Automatic redirection
Server-side token verification
Expiration handling

URL Parameters¶

Parameter	Type	Description
token	string	Reset password token

Implementation¶

State Management¶

const [isPasswordReset, setIsPasswordReset] = useState(false);
const [errorMessage, setErrorMessage] = useState<string>("");
const [loading, setLoading] = useState(false);

Methods¶

async function handleSubmit(event: FormEvent<HTMLFormElement>) =>
// Handles password reset form submission

const handleClose = () =>
// Closes error/success notifications

export const getServerSideProps: GetServerSideProps =>
// Validates token and fetches user data server-side

HTML Structure¶

<div className="flex justify-center items-center min-h-screen w-screen bg-blue-925">
  <div className="flex justify-center w-screen max-w-lg border rounded-lg shadow-lg p-8 bg-blue-925">
    <div className="w-full bg-white rounded-lg p-6">
      {/* Error/Success Banners */}
      <form className="flex flex-col space-y-6">
        {/* Password Input Fields */}
        <button type="submit">Reset Password</button>
      </form>
    </div>
  </div>
</div>

Props¶

interface Props {
  userId: number;  // User ID from token validation
}

Components/API Routes Used¶

Components¶

Banner

API Routes¶

/api/resetPassword - Handles password reset
Database queries for token validation

Routes to Page¶

Direct: /reset-password/[token]
From: Password reset email links
From: Expired token redirect

Dependencies¶

import { signIn } from "next-auth/react"
import { useRouter } from "next/router"
import { GetServerSideProps } from "next"
import prismadb from "@/lib/prismadb"

Notes¶

Requires valid reset token
Server-side token validation
Token expiration handling
Password confirmation check
Automatic redirect after success
Error handling for invalid tokens
Uses Prisma for database operations
Styled with Tailwind CSS