[User Story] Provide Basic Personal Information

[chriscoderdr]

[User Story] Provide Basic Personal Information

Description:

As a new driver, I want to provide my basic personal information so that I can create an account in the app.

Acceptance Criteria:

• A form to input basic details (e.g., name, email, phone number, password) is available for new drivers.
• Data is validated (e.g., email format, phone number length) before submission.
• The account is successfully created after the information is submitted and verified.

Tasks:

Backend:

• Set up API endpoint for new driver registration.
• Validate personal information on the server (email, phone number, etc.).
• Store driver data securely in the database.
• Implement error handling for validation failures and data submission.

Mobile:

• Build sign-up form for inputting personal information. #15
• Add front-end validation for inputs (e.g., required fields, email format).
• Send data to the backend for account creation.
• Display success or error messages based on backend response.

Labels:

• User Story

Related

• Parent Epic [[Epic] Sign Up for the Morro Taxi App #4]

[chriscoderdr]

Task is overdue due to prioritizing task #12 which took longer than expected and also power and internet outages yesterday caused by kristine typhon

[chriscoderdr]

We will be using this figma design as a base https://www.figma.com/design/cLIvhFjrCdxfL1zt4M6pTY/Registration-UI-templates-(Sign-up%2FLog-in)-(Community)?node-id=0-1&node-type=canvas&t=U62ChCk5IQPR9CsM-0

[chriscoderdr]

Wanted to support autofill of password but find out this issue:

facebook/react-native#21911

I'm disabling it for now, maybe later we find a solution

[chriscoderdr]

Test Cases for Registration Form

1. Form Field Validation (Front-end Validation)

ID	Test Case	Preconditions	Steps	Expected Result
1	Validate that the email field is required	Registration form is open	1. Leave the email field empty. 2. Click "Register".	An error message should appear indicating that the email field is required.
2	Validate that the email field has the correct format	Registration form is open	1. Enter text without an email format (e.g., "user") in the email field. 2. Click "Register".	An error message should appear indicating that the email is invalid.
3	Validate that the password field has at least 8 characters	Registration form is open	1. Enter a password with fewer than 8 characters. 2. Click "Register".	An error message should appear indicating that the password must have at least 8 characters.
4	Validate that passwords match	Registration form is open	1. Enter a password in "Create a password". 2. Enter a different password in "Confirm Password". 3. Click "Register".	An error message should appear indicating that the passwords do not match.
5	Validate that the password confirmation has at least 8 characters	Registration form is open	1. Enter a valid password in "Create a password". 2. Enter a password with fewer than 8 characters in "Confirm Password". 3. Click "Register".	An error message should appear indicating that the confirmation password is invalid.

2. Data Submission to Backend for Account Creation

ID	Test Case	Preconditions	Steps	Expected Result
6	Submit valid data to the backend	All fields contain valid data	1. Fill in all fields with valid data. 2. Click "Register".	The data should be successfully sent to the backend.
7	Submit data to the backend with front-end validation errors	One or more fields have validation errors	1. Fill in the fields with invalid data. 2. Click "Register".	Data should not be sent, and the form should display error messages according to front-end validation.
8	Submit data to the backend without filling all required fields	Required fields are not completed	1. Leave one or more required fields empty. 2. Click "Register".	Data should not be sent, and the form should display error messages.

3. Display Success or Error Messages Based on Backend Response

ID	Test Case	Preconditions	Steps	Expected Result
9	Display success message when the account is successfully created	Valid data submitted	1. Submit valid data to the backend. 2. Receive a success response from the backend.	A success message should appear indicating that the account has been created.
10	Display error message when the backend returns an error	Data submitted with error	1. Submit data with an error (e.g., duplicate email). 2. Receive an error message from the backend.	An error message should appear indicating the specific reason for the failure.
11	Handle network errors when submitting data	Connection issues	1. Fill out the form. 2. Click "Register". 3. Simulate a network failure.	An error message should appear indicating connection issues.
12	Handle server errors when submitting data	Server issues	1. Fill out the form. 2. Click "Register". 3. Receive a 500 error from the server.	An error message should appear indicating a server problem.

[chriscoderdr]

Method HTTP: POST
Route: /api/drivers/register
Expected Data:

{
  "name": "John Doe",
  "email": "johndoe@example.com",
  "phone": "+123456789",
  "password": "securepassword123"
}

[chriscoderdr]

Adding the phone input I modified the styles in the package https://www.npmjs.com/package/react-native-phone-number-input#props to match ours
also I encapsulated in our own input and put in the input field component, also I wanted formatting separating by dash and library didn't support so made a patch using patch-package

[chriscoderdr]

closed by #18