Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug 1933585 - Fix TOTP form layout on Account Verification page #2366

Merged
merged 2 commits into from
Nov 26, 2024

Conversation

kyoshino
Copy link
Collaborator

@kyoshino kyoshino commented Nov 26, 2024

I haven’t filed a bug, but I believe this is a fallout from #2334. When you sign in, you’ll probably enter a 6-digit verification code on the Account Verification page. Currently, the Submit button is displayed in full width, which is not an intended layout. This PR fixes it.

(The UI could be better than this, but it’s out of scope 😉)

Before

image

After

image

Copy link
Collaborator

@dklawren dklawren left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Submit button needs to be below the input field since there is a hidden span next to the input field. When a user enters their mfa code, it does a pre-check via API and displays an error next to the input field if the value is wrong. If the submit button is next to it, would it not slide over?

@kyoshino
Copy link
Collaborator Author

kyoshino commented Nov 26, 2024

I missed the error message. I’ve modified the markup and style so the message now appears below the input instead of to the right. And I’ve also removed the red background because it was hard to read the text due to low contrast.

image

@kyoshino kyoshino requested a review from dklawren November 26, 2024 21:35
@kyoshino kyoshino changed the title no bug - Fix 2FA Account Verification page layout no bug - Fix TOTP form layout on Account Verification page Nov 26, 2024
@dklawren dklawren changed the title no bug - Fix TOTP form layout on Account Verification page Bug 1933585 - Fix TOTP form layout on Account Verification page Nov 26, 2024
@dklawren dklawren merged commit b9a8837 into mozilla-bteam:master Nov 26, 2024
17 checks passed
@dklawren
Copy link
Collaborator

Thanks!

@kyoshino kyoshino deleted the 2fa-verification branch November 26, 2024 22:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants