No Validation on Mobile number of sign up

[Claire-Bear]

• On the mobile field, I can't input "+" for an international number. When I use the alternative by placing "0027" I run out of number length
• I can still create an account with a bogus number. I placed (999) 999-99-99

[Claire-Bear]

Validation should be shown to the user on invalid number formats

[PiDelport]

Relevant code:

nautilus-wallet/web-client/src/app/views/register/register.page.ts

Lines 25 to 30 in 1772a8b

	// TODO(Pi): We should replace this with something that handles international numbers (probably libphonenumber-based?)
	// (See also: E-164 hack in SessionService.)
	phoneInputMask = createMask({
	mask: '(999) 999-99-99',
	autoUnmask: true,
	});

nautilus-wallet/web-client/src/app/state/session.service.ts

Lines 165 to 167 in 1772a8b

	// FIXME(Pi): Hack country code in, for now.
	// (See also: comments in RegisterPage.)
	const to_phone_number = wallet.phone_number.replace(/^0/, '+27');

[PiDelport]

As per the comments, we almost certainly want to replace this with something libphonenumber based that parses and validates the number to E.164 at entry time.

I didn't find a purpose-made Angular widget with a cursory search, so we may just want to pull in libphonenumber-js and hook that into the existing Angular form validation.

[IscoRuta98]

@PiDelport, would somehting like this: How to add Angular phone number format, work?

[PiDelport]

Maybe, though that seems to use the heavier-weight google-libphonenumber port, rather than libphonenumber-js. I'm also wary of that widget's UI styling not necessarily working with our app; particularly, the fact that it seems to be based on ngx-bootstrap.

Googling a bit more, maybe this is worth a try? https://github.com/azzamasghar1/ion-intl-tel-input

[IscoRuta98]

Thanks Pi!
Checking it now. Quick question: are the forms we use template-driven or reactive?

[PiDelport]

Reactive.