1650222 - Editing a credit card number through preferences fails

Status: VERIFIED FIXED

(Toolkit :: Form Autofill, defect, P2)

Description

[Jim Mathies [:jimm]]

STR:

1. Add a credit card through preferences using a test number -
   4111111111111111
2. save
3. edit the card
4. change the last 1 to a 2
5. save

expected: the card is saved or an error displays
result: clicking save does nothing.

Comment 1

[Jim Mathies [:jimm]]

Missing/invalid cc-number FormAutofillStorage.jsm:1947
_validateFields resource://formautofill/FormAutofillStorage.jsm:1947
update resource://formautofill/FormAutofillStorage.jsm:512
AsyncFunctionNext self-hosted:684
(Async: async)
saveRecord chrome://formautofill/content/editDialog.js:57
AsyncFunctionNext self-hosted:684
(Async: async)
handleSubmit chrome://formautofill/content/editDialog.js:195
handleClick chrome://formautofill/content/editDialog.js:108
handleEvent chrome://formautofill/content/editDialog.js:75
(Async: EventListener.handleEvent)
attachEventListeners chrome://formautofill/content/editDialog.js:148
init chrome://formautofill/content/editDialog.js:33
handleEvent chrome://formautofill/content/editDialog.js:71
(Async: EventListener.handleEvent)
AutofillEditDialog chrome://formautofill/content/editDialog.js:28
EditCreditCardDialog chrome://formautofill/content/editDialog.js:179
<anonymous> chrome://formautofill/content/editCreditCard.xhtml:96
AsyncFunctionNext self-hosted:684
(Async: async)
<anonymous> chrome://formautofill/content/editCreditCard.xhtml:103

Comment 2

[Zibi Braniecki [:zbraniecki][:gandalf]]

That's because 4111111111111111 is a valid credit card number, while 4111111111111112 is not.

See https://www.freeformatter.com/credit-card-number-generator-validator.html

Comment 3

[Zibi Braniecki [:zbraniecki][:gandalf]]

I think we can morph this bug into UI feedback on trying to type or save invalid CC number (we don't need to wait for save button to be pressed to calculate that it's invalid).

Comment 4

[Zibi Braniecki [:zbraniecki][:gandalf]]

Holly, do we have any UX designs for flagging field inputs in Autofill Preferences as invalid?

Comment 5

[[e-mail]]

For this error, and any other credit card field user input errors dealing with required fields, we should follow the standard described in Photon (https://design.firefox.com/photon/patterns/errors.html):

• Error is triggered after typing an incomplete credit card number and moving focus out of the field, or if that's not possible, on form submit
• Highlight the problem field in red
• Display a flag under the field describing the issue (In this case, "Enter a 16-digit credit card number")

Lockwise example: https://mozilla.invisionapp.com/share/EJRHBMEDKF8#/screens/383026385

Comment 6

[Zibi Braniecki [:zbraniecki][:gandalf]]

Thank you! We should re-triage it.

Comment 7

[Adam Roach [:abr]]

(A quick note on the string: it should be "a valid 14 to 19 digit credit card number" or something like that)

Comment 8

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: Bug 1650222 - Verify CC number validity when editing the CC entry. r?abr

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/289f06e14208
Verify CC number validity when editing the CC entry. r=abr

Comment 10

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/289f06e14208

Comment 11

[Alin Ilea, Desktop Test Engineering]

Reproduced the initial issue with an old Nightly build 80.0a1 (2020-07-13) on Windows 10.
Verified - Fixed in latest Nightly 80.0a1 (2020-07-15) (build id: 20200715215205). The Card Number field has a red border when trying to save an invalid CC number and "Please enter a valid card number" message is displayed.