Login page re-design

Is your feature request related to a problem? Please describe. I know we’ve recently re-designed our login page, but I think we can still do a better job on making sure it is consistent with our design guidelines .

Describe the solution you’d like The login page on BTCPay Server is the front page user sees before logging in. It appears even before user creates an account. The goal of this page is to:

• Have a clear CTA (user needs to create an account / log in to access BTCPay)
• Welcome user and explain concisely what BTCPay Server is
• Show prominent supporters of the BTCPay Server Foundation and link for the rest
• If Tor is enabled, we’d like to show .onion access link (currently the way we show it may not be clear enough for regular folks at all, luckily if user already accesses btcpay over Tor we’ll notify them via Tor Browser)

Problems with current login page:

• If user does not have an account, create account is not that prominently displayed (I’ve seen users asking questions about this one)
• Tor .onion url may seem confusing for those unfamiliar with it
• forgot password page does not look consistent with login page
• Page looks all over the place, it could use some consistency and cleanup (imo)

Current login page design

Provide examples There are mockups of different iterations of the login page on Figma.

Another thing, is that login page is available for several themes, while we don’t need design for several themes, it’s good to keep that in mind.

Additional context Designer interested in tackling this should create mockups on Figma so that devs can easier implement it. Examples above are just for the reference purposes, feel free to be creative and provide your own solutions. I am particularly interested in how we can show that .onion url in a more clear way to those who need it, yet avoid confusing those who don’t need it.

One thing you shouldn’t forget is that front page should provide a certain sense of accomplishment. Lots of people like that celebratory moment when they deploy their BTCPay Server. It would be really good to have it all above the fold, so that supporters are visible as well.

[dstrukt]

Also explored some options… i couldn’t resist pushing some further, even though there’s a lot more to do.

The supports would be limited a row of five, but each would cycle through subtly, will provide an animation as well.

[dennisreimann]

Incorporated the feedback in my PR and posted some new screenshots. If it fits the direction we want to go towards, let’s work out the details in #1712.