The reason your username and password are on different pages is to handle federated identities. Take a typical saas product. Initially you build your own login username and password. As you grow your users ask to login using gmail, LinkedIn or Microsoft so they don’t have to remember multiple usernames and passwords. If you enable third party login it means you have to redirect the site to the third party login page to authenticate.

To accomodate that you design your page so the user first enters username. In your system you check based on email who the identity provider is and redirect to that login journey.

For e.g. if Microsoft you redirect to Microsoft login page to authenticate.

If successful the third party login provider will send you back to your app with a JWT. In your app you check if the JWT is valid - if so allow access.

On first entering email on login, If your login provider is your own app, you redirect to your own login password page.