2FA - Replace Phone Number With UK Mobile Phone Number

This ticket is part of the following epic: https://github.com/jac-uk/apply/issues/1220

Background

As part of implementing 2FA we would like to replace the phone number field with one for UK mobile number. However old applications will still have phone numbers associated with them so this field still needs to be supported so that it displays in both admin and apply (a separate ticket needs to be created for this in admin). Also a ticket needs to be created in DP to ensure the mobile number gets validated on the server side as well as the client side.

User Story

As a candidate, I would like UK mobile number field to be implemented in the candidate profile on Apply and also the personal details page in the application. Note that the phone field should not be displayed unless it is already populated in both the profile and the personal details sections. Add a mobileVerifiedAt timestamp to the db too. This will be used further down the line when SMS is sent out to verify the number. We should indicate that the number is verified/unverified with a nice icon or some text next to the value/form field. When it is displayed in the profile page we should add a button next to the value to resend the verification (if the value is unverified). In the application we can add some text to tell the user that if they need to verify the number they should go to the Profile page (similar to the message for NIN and DoB).

The new fields in the db will be at: applications/{id}}personalDetails/mobile (string) candidate/documents/personalDetails/mobile (string) candidate/documents/personalDetails/mobileVerifiedAt (timestamp)

The mobile phone field should be validated as a UK mobile phone number.

See: https://design-system.service.gov.uk/patterns/phone-numbers/ https://github.com/jackocnr/intl-tel-input/tree/master/vue

Benefit(s) to user (if not already clear from User story)

The mobile phone number will be used as part of 2FA and the number will be verified so we know it belongs to the owner

Feature(s) Description

[x] Add UK Mobile Phone number field to Candidate profile and Personal Details on Apply, it should be a required field and in the Personal Details section it should work similarly to the NIN, in that it can be edited once there then subsequently the user is given a msg to go to the Profile page to edit it
[x] Create a mobile number component in jac-kit with features as given below. It should accept the following props: mobile (number/default:null), verifiedAt(number/default:null), showResendButton (boolen/default:false)
[x] In the mobile number component we should indicate that the number is verified/unverified with a nice icon or some text next to the value/form field for the mobile number. When it is displayed in the profile page we should add a button next to the value to resend the verification (if the value is unverified).
[x] Only display the phone number if it is already set in the Candidate profile and Personal Details on Apply
[x] In the application we can add some text to tell the user that if they need to verify the mobile number they should go to the Profile page (similar to the message for NIN and DoB)
[x] Add instructions: Please input your UK Mobile phone number in the format 0xxxxxxxxxx. This number will be verified and used for Two-factor authentication.
[x] Add candidate/documents/personalDetails/mobileVerifiedAt (timestamp) to the db when the mobile phone number is created/changed and set it to null.

jac-uk / apply