824828 - The reset pages needs mobile optimization

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[David Weir (satdav)]

Hello the following pages needs mobilised 

My password isn't working

https://support.mozilla.org/users/pwreset

I forgot my username

https://support.mozilla.org/users/forgot-username

The reset conformation email


https://support.mozilla.org/users/resendconfirmation

Comment 1

[Bram Pitoyo [:bram]]

Attachment: password reset

Comment 2

[Bram Pitoyo [:bram]]

Attachment: send username

Comment 3

[Bram Pitoyo [:bram]]

Attachment: resend confirmation email

Comment 4

[Bram Pitoyo [:bram]]

This bug is easy enough to fix, but we should probably deploy some sort of a CSS rule to prevent us from having to style loose, one-off pages over and over again?

Comment 5

[David Weir (satdav)]

after speaking to Michelle Luna she conformed what also the page after you verify needs mobileised

Comment 6

[Kadir Topal [:atopal]]

Bram, if we can come up with a generic solution, that would be much better. Rehan, do you think that's possible?

Comment 7

[Rehan Dalal (Inactive)]

Should be do-able.

Comment 8

[Bram Pitoyo [:bram]]

Because all three pages essentially asks for the same information (an email address), I am envisioning a catch-all page that will contain a button. When tapped, this button will lead to three options:
* Reset password
* Resend username
* Resend account confirmation email

However, I am not sure on the copy to put on this page, because it will need to say all user will be able to do all three things, but it can’t be too long, or the text won’t get read. I will continue thinking about the right text to put in this page, but if anybody could help, that would be great.

Comment 9

[Kadir Topal [:atopal]]

I guess combining the first and second is no issue, the account confirmation mail on the other hand: not sure how to make that fit.

Comment 10

[Bram Pitoyo [:bram]]

Attachment: reset, send and resend - explanation

The particular design I’m thinking about is an overlay similar to the topic chooser on the product landing page.

When user tap on the “Submit” button, the overlay will cover the screen, allowing user to choose the action he wants to perform with the email address that was entered.

Comment 11

[Kadir Topal [:atopal]]

This is great! Thanks, Bram!

Comment 12

[Ricky Rosario [:rrosario, :r1cky]]

rdalal says 2pts!

Comment 13

[Ricky Rosario [:rrosario, :r1cky]]

he meant 1!

Comment 14

[Will Kahn-Greene [:willkg] ET needinfo? me]

In a pull request: https://github.com/mozilla/kitsune/pull/1110

Comment 15

[Rehan Dalal (Inactive)]

Landed:
d73c4a5a0380799c773f6065cce4b229ae97dc8b

Pushed to prod by Ricky, right now.