Change email form makes submission of current email easy, new email harder

[seanh]

On the new form for changing your email address, when the page first loads your current email address is pre-filled as the value of the form. I think there are two problems with this:

1. It makes it very easy to submit your current email address as your new email address, which is a silly thing to do. Don't touch the email address, just type your password and hit save. Currently doing this will result in a "That email address is already in use" error message but that's clearly silly. In this GIF I've changed that to a success message. But what should happen when you submit your current email address as the new one is a separate issue, in this item what I'm saying is that it's not ideal to make it easier to submit your current email address than to submit a new one.

   

2. It makes it unnecessarily difficult to submit a new email address. Rather than just typing your new email address, you have to first select and/or delete your old address, then type the new one:

   

---

One suggestion solution would be to use an HTML placeholder instead of a value. I could be wrong but I was under the impression that placeholder was the correct HTML feature to use for this. Using placeholder gives us four things:

1. The browser will not let you submit the current email address as the new one. You have to type a new email address before you can submit the form:

   

   (It doesn't appear in the GIF for some reason but the browser is giving me a "Please fill in this field" error message when I click the Change email address button.)

   (Actually you can still submit your current email address as the new one, but you would have to type out your current email address to do so.)

2. It makes is easier to enter a new email address, I just start typing and the placeholder automatically disappears it, I don't have to delete the old one first:

   

3. Placeholder text can be styled differently than user-entered text if we want it to be. In the GIFs above it's light grey instead of black.

4. If the user enters some text, then deletes it again, the placeholder text reappears:

   

5. Since you can't actually submit the placeholder text (you have to replace it with your own value) the placeholder can be something other than the current email address if we want it to. For example "New email address..."

   

   An obviously fake address like [email protected] is another possibility.

---

A second suggestion is to continue to use value text, but to automatically pre-select the value text so that if the user just starts typing it gets deleted. The user doesn't have to select the text first themselves. This seems to give us 2 from above but not 1, 3 or 4.

Would this work for the non-enhanced form as well? Can you automatically select text in a form field without using JavaScript?

---

Note that we have a mockup of the enhanced version of the form where the user's current email address is shown and then when you click on it, it turns into a form with email address and password fields and save and cancel buttons. It's of course fine to show the email address like this, what I'm talking about in this issue is what happens in the form that appears after you click on the email address (and in the form that is used for the unenhanced version of the page).

[seanh]

@conordelahunty Any opinion on what to do about this? I think the fix for https://github.com/hypothesis/h/issues/3731 also depends on what solution we choose for this issue

[ghost]

@robertknight The placeholder idea that Sean proposed sounds reasonable. Does this chime with how you want things done. How will this stuff be effected/improved when you have rolled out inline editing on these forms.