feat(platform): Add warning sonner toast for invalid otp

[PriyobrotoKar]

User description

Description

Added sonner rich text warning message for invalid otp

Fixes #332

Dependencies

shadcn/ui-Sonner

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

Screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

Enhancement, Bug fix

---

Description

• Added a warning toast message using sonner for invalid OTP input.
• Prevented default form submission behavior on OTP verification button click.
• Simplified the setOtp function call in the OTP input component.
• Added type definition for OTPInputProps in the InputOTP component.

---

Changes walkthrough 📝

Relevant files

Enhancement

page.tsx Add warning toast and improve OTP handling                              apps/platform/src/app/auth/otp/page.tsx Added toast.warning for invalid OTP input. Prevented default form submission on OTP verification. Simplified setOtp function call. +7/-2      input-otp.tsx Add type definition and simplify InputOTP component            apps/platform/src/components/ui/input-otp.tsx Added type definition for OTPInputProps. Simplified InputOTP component definition. +15/-13

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

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

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Possible Bug: The toast.warning function is called when the response status is 401, which is appropriate for showing an error. However, the function might not handle other error statuses that could also indicate issues with the OTP or other parts of the process. Consider handling other relevant HTTP status codes. Code Duplication: The setOtp function call has been simplified from setOtp(otpVal as string) to setOtp(otpVal). Ensure that this change does not affect the expected type and behavior of the setOtp function, especially if otpVal is not always a string. UI Feedback: The addition of e.preventDefault() in the button's onClick handler is a good practice to stop the form from submitting traditionally, but ensure that this change is tested across all browsers for consistency in behavior.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Prevent multiple toast popups during loading state Consider adding a check for the isLoading state before displaying the toast to prevent multiple toast popups if the user repeatedly submits while the request is still processing. apps/platform/src/app/auth/otp/page.tsx [65-67] -toast.warning( - 'The OTP you entered is not valid, Please enter the right OTP' -) +if (!isLoading) { + toast.warning( + 'The OTP you entered is not valid, Please enter the right OTP' + ) +} Apply this suggestion Suggestion importance[1-10]: 9 Why: This suggestion prevents multiple toast popups during the loading state, improving user experience and avoiding potential confusion.	9
Best practice	Add type to the event parameter for better type safety Ensure that the event e is typed to provide better type safety and to leverage TypeScript's capabilities. apps/platform/src/app/auth/otp/page.tsx [140-142] -onClick={(e) => { +onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.preventDefault() void handleVerifyOTP(email, otp) }} Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding type to the event parameter enhances type safety and leverages TypeScript's capabilities, which is a good practice.	8
	Handle exceptions from asynchronous operations It's a good practice to handle potential exceptions from asynchronous operations. Consider adding a try-catch block around the handleVerifyOTP function call. apps/platform/src/app/auth/otp/page.tsx [142] -void handleVerifyOTP(email, otp) +try { + void handleVerifyOTP(email, otp) +} catch (error) { + console.error('Failed to verify OTP:', error) +} Apply this suggestion Suggestion importance[1-10]: 7 Why: Handling exceptions from asynchronous operations is a good practice, but the suggestion could be more specific about where to place the try-catch block.	7
	Explicitly manage value and onChange props for controlled component behavior To ensure that the InputOTP component is fully controlled and its state is predictable, consider managing the value and onChange props explicitly if not already handled. apps/platform/src/components/ui/input-otp.tsx [11-19] <OTPInput className={cn('disabled:cursor-not-allowed', className)} containerClassName={cn( 'flex items-center justify-center gap-2 has-[:disabled]:opacity-50', containerClassName )} ref={ref} + value={props.value} + onChange={props.onChange} {...props} /> Suggestion importance[1-10]: 6 Why: Explicitly managing value and onChange props can improve the predictability of the component's state, but it assumes these props are not already handled elsewhere.	6

[kriptonian1]

LGTM 🚀

[kriptonian1]

@rajdip-b you can merge this

[kriptonian1]

LGTM