Closed Bug 1650222 Opened 3 months ago Closed 2 months ago

Editing a credit card number through preferences fails

Categories

(Toolkit :: Form Autofill, defect, P2)

Desktop
Windows
defect

Tracking

()

VERIFIED FIXED
mozilla80
Tracking Status
firefox80 --- verified

People

(Reporter: jimm, Assigned: zbraniecki, NeedInfo)

Details

(Whiteboard: [cc-autofill-mvp])

Attachments

(1 file)

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.

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

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

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).

Assignee: nobody → gandalf
Status: NEW → ASSIGNED

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

Flags: needinfo?(hcollier)

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

Flags: needinfo?(hcollier) → needinfo?(mheubusch)

Thank you! We should re-triage it.

Assignee: gandalf → nobody
Severity: S3 → --
Status: ASSIGNED → NEW
Priority: P2 → --
Whiteboard: [cc-autofill-mvp] → [ccautofill]

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

Assignee: nobody → gandalf
Severity: -- → S4
Priority: -- → P2
Whiteboard: [ccautofill] → [cc-autofill-mvp]
Pushed by zbraniecki@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/289f06e14208
Verify CC number validity when editing the CC entry. r=abr
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla80

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.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.