fix(client): register login form validations implementation

[Gunasrini18]

Description

Implemented validation messages for both Register and Login forms to improve user experience and error handling.

Changes Made

LoginPage.tsx

• Added formState.errors and enabled validation using onChange mode.
• Defined validation rules with custom error messages.
• Introduced password strength tooltip content.
• Wrapped alert messages with appropriate severity and ensured alerts reset on successful actions.

monolith.store.ts

• Wrapped axios calls in try/catch blocks using validateStatus.
• Threw errors using response.errorMessage for more accurate error handling.
• Removed chained .catch() blocks to improve error propagation and debugging clarity.

How to Test

1. Navigate to the Login page.
2. Click the Register Now button to open the registration form.
3. Click the Register button without entering any values — required field validation messages should appear.
4. Fill in valid registration details and submit — it should register the user and redirect to the Login page.
5. On the Login page, click the Login button without entering credentials — validation messages should appear.
6. Enter valid credentials and submit — the user should be successfully logged into the application.

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

fix(client): register login form validations implementation

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement, Bug fix

---

Description

• Add client-side form validation and error messages
• Introduce password strength tooltip and rules
• Reset registration form and clear alerts on success
• Enhance auth API error handling in store

---

Changes walkthrough 📝

	Relevant files
Enhancement	LoginPage.tsx Improve form validations and UI feedback                                  packages/client/src/pages/LoginPage.tsx • Added formState errors and onChange validation mode • Defined validation rules with custom error messages • Introduced password strength tooltip content • Wrapped alerts with severity and reset on success +205/-114
Error handling	monolith.store.ts Add error handling to auth API calls                                          packages/client/src/stores/monolith/monolith.store.ts • Wrapped axios calls in try/catch with validateStatus • Threw errors based on response.errorMessage • Removed chained catch and improved error propagation +35/-26

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Phone Validation The PHONE controller now applies a strict 10-digit pattern on every change, causing empty inputs (which were previously allowed) to be flagged as invalid. Consider making the pattern check conditional so that blank values pass validation for an optional field. <Controller name={'PHONE'} control={ registerControl } rules={{ pattern: { value: /^\d{10}$/, message: 'Please enter valid Phone Number', }, }} Error Handling The new axios calls in login and createUser always return true or rethrow based on error.message, without checking HTTP status codes or preserving response details. This can mask server errors and make debugging harder. Consider validating status codes and including full error context. try { const response = await axios.post( `${Env.MODULE}/api/auth/login`, postData, { headers: { 'content-type': 'application/x-www-form-urlencoded', }, validateStatus: () => true, }, ); if (response?.data?.errorMessage) { throw new Error(response.data.errorMessage); } return true; } catch (error) { throw new Error(error.message); }

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Narrow axios status validation Restrict validateStatus to only allow successful HTTP statuses and treat errors properly, so real failures aren't masked. packages/client/src/stores/monolith/monolith.store.ts [187] -validateStatus: () => true, +validateStatus: status => status < 400, Suggestion importance[1-10]: 7 __ Why: Using validateStatus: status < 400 avoids masking real HTTP errors and ensures only genuine successes are treated as such.	Medium
	Make phone validation optional Allow empty phone inputs by validating only when a value is provided. This prevents errors when the phone field is left blank during registration. packages/client/src/pages/LoginPage.tsx [863-867] rules={{ - pattern: { - value: /^\d{10}$/, - message: 'Please enter valid Phone Number', - }, + validate: value => + !value || /^\d{10}$/.test(value) || 'Please enter valid Phone Number', }} Suggestion importance[1-10]: 6 __ Why: The phone field is optional so switching to conditional validation prevents errors when left blank while still enforcing the 10-digit format.	Low
	Check HTTP status for errors Also throw for any non-2xx HTTP status even without an explicit errorMessage, ensuring all failures surface correctly. packages/client/src/stores/monolith/monolith.store.ts [191-193] -if (response?.data?.errorMessage) { - throw new Error(response.data.errorMessage); +if (response.status >= 400) { + throw new Error(response.data?.errorMessage || `Request failed with status ${response.status}`); } Suggestion importance[1-10]: 6 __ Why: Throwing on any non-2xx status guarantees failures surface even without an explicit errorMessage, improving error handling.	Low
General	Clear loading state on success Ensure the loading state is cleared after registration succeeds by moving setIsLoading(false) into a finally block or immediately after reset(). packages/client/src/pages/LoginPage.tsx [481-489] .then((res) => { if (res) { setError(''); setRegister(false); setSuccess( 'Account registration successful. Log in below.', ); reset(); } }) +.finally(() => setIsLoading(false)); Suggestion importance[1-10]: 7 __ Why: Adding a .finally(() => setIsLoading(false)) ensures the loading indicator is cleared on both success and error paths.	Medium

[github-actions]

@CodiumAI-Agent /update_changelog