First-Time Login Password and PIN Setup

I'll create a first-time login flow that prompts users to set a new password and PIN after their initial login. This will include validation for the password and PIN requirements you specified.

How It Works

This implementation creates a first-time login flow with two steps:

1. Step 1: Password Creation

   • Users must create a password that meets all requirements:

     • At least 8 characters
     • At least 1 uppercase letter
     • At least 1 lowercase letter
     • At least 1 number
     • At least 1 special character
   • Real-time validation with visual indicators shows which requirements are met
   • Passwords must match before proceeding

2. Step 2: PIN Creation

   • Users must create a 6-digit PIN
   • Input is restricted to numbers only and limited to 6 digits
   • The form validates that the PIN is exactly 6 digits before submission

Implementation Details

• The component maintains the same visual style as your existing login page
• The layout is responsive with a split-screen design
• Password fields have show/hide toggles for better usability
• Real-time validation provides immediate feedback
• The API route is set up to handle the credential update (you'll need to implement the actual database update logic)

Integration

To integrate this with your existing login flow:

1. After a successful first login, redirect users to /first-login
2. In your authentication logic, check if a user needs to complete this setup (e.g., by having a firstLogin flag in your user database)
3. After successful completion, update the user's record to indicate they've completed the setup

You can customize the styling and behavior further to match your application's needs.