hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech
206 stars 265 forks source link

[Improvement]: Add Phone Number Input Field to Profile Settings Page #1090

Open Zaraorji opened 2 months ago

Zaraorji commented 2 months ago

Description

Add a phone number input field to the Profile Settings page to allow users to enter or update their phone number.

User Story:

As a user, I want to be able to add or update my phone number in the Profile Settings page so that I can ensure my contact information is up-to-date .

Requirements:

  1. : Include an input field labeled "Phone Number" in the Profile Settings page.
  2. : Ensure the input field matches the design and styling outlined in the Figma design.
  3. Include a dropdown field to select the the country code.
  4. Implement basic validation to ensure the phone number format is correct.

Acceptance Criteria

  1. A "Phone Number" input field is visible on the Profile Settings page.
  2. The field includes a dropdown to select country code. 3.The design of the phone number field matches the Figma design.
  3. The phone number format validation is in place.

Expected Outcome:

  1. Users can enter and update their phone number in the Profile Settings page.
  2. The phone number input field is correctly styled and functional.

Links

| FIGMA LINK

Images

image

Zaraorji commented 2 months ago

Screen Shot 2024-08-22 at 3 10 30 AM Screen Shot 2024-08-22 at 3 11 21 AM

Muneerat commented 2 months ago

Working on this