[PLA-1766] require password settings

[zlayine]

PR Type

Enhancement, Bug fix

---

Description

• Updated Modal component to change close prop type to Function and modified its usage.
• Integrated VerifyPasswordModal component in Settings and SettingsChangeEmail pages for password verification.
• Created a new VerifyPasswordModal component to handle password verification with optional reCAPTCHA.
• Simplified route redirection logic for beams and marketplace in the router configuration.

---

Changes walkthrough 📝

	Relevant files
Enhancement	Modal.vue Update `close` prop type and usage in Modal component        resources/js/components/Modal.vue Changed close prop type to Function. Modified Dialog component to use close as any. +2/-2      Settings.vue Integrate password verification modal in Settings page      resources/js/components/pages/Settings.vue Adjusted spacing in the layout. Added VerifyPasswordModal component. Updated modal handling logic for account deletion. +8/-1      SettingsChangeEmail.vue Add password verification for email change                              resources/js/components/pages/SettingsChangeEmail.vue Added VerifyPasswordModal component. Updated email change logic to include password verification. +11/-0    VerifyPasswordModal.vue Create VerifyPasswordModal component for password verification resources/js/components/pages/VerifyPasswordModal.vue Created new VerifyPasswordModal component. Implemented password verification with optional reCAPTCHA. +115/-0
Bug fix	index.ts Simplify route redirection for beams and marketplace          resources/js/router/index.ts Simplified route redirection for beams and marketplace. +2/-8

---

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

[github-actions]

PR Description updated to latest commit (856c34e)

[github-actions]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	3, because the PR involves multiple changes across different components and files, including updates to Vue components, integration of new modal functionality, and modifications to routing logic. The changes are moderate in complexity, involving both front-end and potential backend implications.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The use of close as any in Modal.vue might suppress type checking, potentially leading to runtime errors if the close function does not conform to expected usage.
🔒 Security concerns	No

Code feedback:

---

relevant file	resources/js/components/Modal.vue
suggestion	Consider removing the type assertion as any for the close function to maintain type safety. If there's a type mismatch, it's better to address the underlying issue rather than using a type assertion. [important]
relevant line

---

relevant file	resources/js/components/pages/Settings.vue
suggestion	Ensure that the spacing change from space-y-8 to space-y-4 in the Settings page layout does not disrupt the visual consistency or user experience. If this change was not intended for a specific UX improvement, consider reverting it. [medium]
relevant line

---

relevant file	resources/js/components/pages/VerifyPasswordModal.vue
suggestion	Implement error handling for the loadCaptchaScript function to manage cases where the reCAPTCHA script fails to load, ensuring the application remains functional even if the script is unavailable. [important]
relevant line	const loadCaptchaScript = async () => {

---

relevant file	resources/js/router/index.ts
suggestion	Verify that the direct redirection to specific children routes (platform.beams.list and platform.marketplace.bids) does not unintentionally bypass any necessary intermediate logic that might have been executed in the previously existing empty path redirects. [medium]
relevant line	redirect: { name: 'platform.beams.list' },

---

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Robustness	Add error handling for reCAPTCHA script loading failure Consider adding error handling for the scenario where the reCAPTCHA script fails to load, to enhance the robustness of the captcha functionality. resources/js/components/pages/VerifyPasswordModal.vue [77-94] const loadCaptchaScript = async () => { if (!hasCaptcha) { isCaptchaBadgeVisible.value = true; return; } if (!document.getElementById('recaptcha-script')) { const script = document.createElement('script'); script.type = 'text/javascript'; script.id = 'recaptcha-script'; script.async = true; script.defer = true; script.src = 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit&hl=:1'; document.getElementsByTagName('head')[0].appendChild(script); + script.onerror = () => { + snackbar.error({ + title: 'Error', + text: 'Failed to load reCAPTCHA script', + }); + }; } isCaptchaBadgeVisible.value = true; }; Suggestion importance[1-10]: 9 Why: Adding error handling for the reCAPTCHA script loading failure significantly enhances the robustness and reliability of the captcha functionality, which is crucial for security and user experience.	9
Best practice	Improve type safety and clarity in event handling Replace the @close="close as any" with a proper type casting or handling to ensure type safety and clarity in the event handling. resources/js/components/Modal.vue [3] -<Dialog as="div" @close="close as any" class="relative z-50"> +<Dialog as="div" @close="close" class="relative z-50"> Suggestion importance[1-10]: 8 Why: The suggestion improves type safety and clarity in event handling, which is important for maintainability and avoiding potential runtime errors.	8
Maintainability	Maintain consistent spacing in the flex container Ensure that the spacing between child components in the flex container is consistent by reverting to the original 'space-y-8' or adjusting other related spacings. resources/js/components/pages/Settings.vue [14] -<div class="flex flex-col space-y-4"> +<div class="flex flex-col space-y-8"> Suggestion importance[1-10]: 7 Why: Maintaining consistent spacing improves the visual layout and readability of the UI, which is important for user experience and maintainability.	7
	Clean up redundant routing configurations Remove redundant redirect rules for empty paths, as they are now explicitly defined, to clean up the routing configuration. resources/js/router/index.ts [63] -redirect: { name: 'platform.beams.list' } +# No change needed, just remove the old redundant redirect. Suggestion importance[1-10]: 6 Why: Cleaning up redundant routing configurations improves code maintainability and readability, though it is a minor improvement.	6

[enjinabner]

Let's integrate the new changes in the API