feat: captcha for invite user flow #31715

AnaghHegde · 2024-03-13T05:15:17Z

Description

Add captcha for the invite user flow.

Fixes https://theappsmith.slack.com/archives/CGBPVEJ5C/p1710134091696379
#31789

Automation

/ok-to-test tags="@tag.Workspace"

🔍 Cypress test results

Important

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8321963367
Commit: 769030f0a3deb09e256c38cba7d6d30a9a80a379
Cypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉

Summary by CodeRabbit

New Features
- Integrated Google reCAPTCHA in the user invitation form to enhance security during form submissions.
Enhancements
- Improved handling of URL parameters in utility functions for more robust data processing.

…o feat/captcha-invite-user

coderabbitai · 2024-03-13T05:15:26Z

Walkthrough

The recent updates primarily focus on integrating Google reCAPTCHA into the user invitation process for enhanced security. This involves modifications across various files to handle the reCAPTCHA token, including adding necessary imports and logic for reCAPTCHA validation during form submission. Furthermore, the InviteUserRequest interface now supports an optional recaptchaToken field, and the URL parameter handling has been refined to improve the processing of object parameters.

Changes

Files	Change Summary
`.../workspace/InviteUsersForm.tsx`	Integrated Google reCAPTCHA; updated imports; added logic for reCAPTCHA token handling in form submission.
`.../api/UserApi.tsx`	Added `recaptchaToken` field to `InviteUserRequest`; updated `inviteUser` for reCAPTCHA token URL parameter.
`.../utils/URLUtils.ts`	Modified `convertObjectToQueryParams` to enhance object parameter processing.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit-tests for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit tests for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit tests.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

AnaghHegde · 2024-03-13T05:15:40Z

/build-deploy-preview skip-tests=true

github-actions · 2024-03-13T05:16:04Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8259833023.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

app/client/src/ce/pages/workspace/InviteUsersForm.tsx

github-actions · 2024-03-13T05:30:21Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

AnaghHegde · 2024-03-13T09:30:32Z

/build-deploy-preview skip-tests=true

github-actions · 2024-03-13T09:30:55Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8262374710.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

github-actions · 2024-03-13T09:44:59Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

…gnupURL

github-actions · 2024-03-13T10:46:33Z

Failed server tests

com.appsmith.server.services.WorkspaceServiceTest#validUpdateWorkspaceValidWebsite

…horg/appsmith into feat/captcha-invite-user

AnaghHegde · 2024-03-13T11:29:31Z

/build-deploy-preview skip-tests=true

github-actions · 2024-03-13T11:29:53Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8263889038.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

github-actions · 2024-03-13T11:45:14Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

ankitakinger

Since the PR consists of changes on CE files, which has respective EE files on the EE repo, you will have to take care of those too. Else things won't work as expected on EE.

github-actions · 2024-03-15T09:21:59Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8293970042.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

github-actions · 2024-03-15T09:36:27Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

…horg/appsmith into feat/captcha-invite-user

AnaghHegde · 2024-03-16T17:46:51Z

/build-deploy-preview skip-tests=true

github-actions · 2024-03-16T17:47:11Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8309461981.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

github-actions · 2024-03-16T17:59:38Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

coderabbitai · 2024-03-18T06:03:59Z

app/client/src/ce/pages/workspace/InviteUsersForm.tsx

+  const recaptchaStatus = useScript(
+    `https://www.google.com/recaptcha/api.js?render=${googleRecaptchaSiteKey.apiKey}`,
+    AddScriptTo.HEAD,
+  );


The use of the useScript hook to dynamically load the Google reCAPTCHA script is a good practice for optimizing load times and ensuring the script is only loaded when necessary. However, as previously mentioned, adding error handling or a timeout mechanism could improve resilience and user experience in case the script fails to load or is delayed.

Consider enhancing the useScript hook to include error handling and a timeout mechanism. This could involve adding state variables to track loading errors and implementing a timeout to handle cases where the script loading is significantly delayed.

coderabbitai · 2024-03-18T06:03:59Z

app/client/src/ce/pages/workspace/InviteUsersForm.tsx

+  const captchaWrappedInviteUsersSubmitHandler = handleSubmit(
+    async (values: any, dispatch: any) => {
+      try {
+        if (
+          googleRecaptchaSiteKey.enabled &&
+          recaptchaStatus === ScriptStatus.READY
+        ) {
+          const token = await window.grecaptcha.execute(
+            googleRecaptchaSiteKey.apiKey,
+            {
+              action: "submit",
+            },
+          );
+
+          return inviteUsersSubmitHandler(values, dispatch, token);
+        } else {
+          return inviteUsersSubmitHandler(values, dispatch);
+        }
+      } catch (error) {
+        log.error(error);
+        throw error; // This will cause the form submission to fail
+      }
+    },
+  );


The wrapping of the form submission handler with captcha verification logic is well-implemented. It conditionally includes the captcha token based on the reCAPTCHA configuration and script readiness. This approach ensures that the captcha verification step is integrated seamlessly into the form submission process.

However, the error handling in the catch block simply logs the error and rethrows it. While this is sufficient for debugging, it might not provide the best user experience in case of failures.

Consider adding user-friendly error handling in the catch block of the captchaWrappedInviteUsersSubmitHandler function. This could involve displaying a toast notification or updating the UI to inform the user about the issue, in addition to logging the error for debugging purposes.

ankitakinger

LGTM

rahulbarwal · 2024-03-18T07:35:06Z

/build-deploy-preview skip-tests=true

github-actions · 2024-03-18T07:35:31Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/8322859726.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 31715.
recreate: .

github-actions · 2024-03-18T07:48:55Z

Deploy-Preview-URL: https://ce-31715.dp.appsmith.com

AnaghHegde and others added 6 commits March 12, 2024 12:00

add captcha for invite user flow

b764c64

fix reference error

78e712a

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

f833193

…o feat/captcha-invite-user

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

da3e492

…o feat/captcha-invite-user

fix compilation issue

dbf6843

Add recaptchaToken support to inviteUser API

18cb969

AnaghHegde self-assigned this Mar 13, 2024

AnaghHegde requested a review from ankitakinger as a code owner March 13, 2024 05:15

github-actions bot added the Enhancement New feature or request label Mar 13, 2024

AnaghHegde marked this pull request as draft March 13, 2024 05:16

coderabbitai bot reviewed Mar 13, 2024

View reviewed changes

app/client/src/ce/pages/workspace/InviteUsersForm.tsx Outdated Show resolved Hide resolved

Refactor UserApi inviteUser method

d63da89

appsmithorg deleted a comment from github-actions bot Mar 13, 2024

Refactor UserApi inviteUser method to use inviteUserUrl instead of si…

ebfddff

…gnupURL

AnaghHegde added 2 commits March 13, 2024 16:57

update the API contract

3a5669c

Merge branch 'feat/captcha-invite-user' of https://github.com/appsmit…

9514023

…horg/appsmith into feat/captcha-invite-user

AnaghHegde requested a review from sharat87 March 13, 2024 11:29

AnaghHegde marked this pull request as ready for review March 13, 2024 11:29

ankitakinger requested changes Mar 13, 2024

View reviewed changes

ankitakinger added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Mar 15, 2024

ankitakinger previously approved these changes Mar 15, 2024

View reviewed changes

ankitakinger added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Mar 15, 2024

AnaghHegde added 2 commits March 16, 2024 23:07

make recaptcha token optional in API contract

0c21312

Merge branch 'feat/captcha-invite-user' of https://github.com/appsmit…

f871cf2

…horg/appsmith into feat/captcha-invite-user

AnaghHegde dismissed ankitakinger’s stale review via f871cf2 March 16, 2024 17:38

AnaghHegde requested a review from ankitakinger March 16, 2024 17:39

AnaghHegde added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Mar 16, 2024

AnaghHegde added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Mar 18, 2024

Refactor inviteUsersSubmitHandler function to return the result.

769030f

rahulbarwal added Templates Pod Issues related to Templates Templates Issues related to templates ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Mar 18, 2024

coderabbitai bot reviewed Mar 18, 2024

View reviewed changes

ankitakinger approved these changes Mar 18, 2024

View reviewed changes

AnaghHegde merged commit 997fd96 into release Mar 18, 2024
49 of 51 checks passed

AnaghHegde deleted the feat/captcha-invite-user branch March 18, 2024 14:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: captcha for invite user flow #31715

feat: captcha for invite user flow #31715

AnaghHegde commented Mar 13, 2024 •

edited by github-actions bot

coderabbitai bot commented Mar 13, 2024 •

edited

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

ankitakinger left a comment

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

AnaghHegde commented Mar 16, 2024

github-actions bot commented Mar 16, 2024

github-actions bot commented Mar 16, 2024

coderabbitai bot Mar 18, 2024

coderabbitai bot Mar 18, 2024

ankitakinger left a comment

rahulbarwal commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

feat: captcha for invite user flow #31715

feat: captcha for invite user flow #31715

Conversation

AnaghHegde commented Mar 13, 2024 • edited by github-actions bot

Description

Automation

🔍 Cypress test results

Summary by CodeRabbit

Summary by CodeRabbit

coderabbitai bot commented Mar 13, 2024 • edited

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

Failed server tests

AnaghHegde commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Mar 13, 2024

ankitakinger left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 15, 2024

github-actions bot commented Mar 15, 2024

AnaghHegde commented Mar 16, 2024

github-actions bot commented Mar 16, 2024

github-actions bot commented Mar 16, 2024

coderabbitai bot Mar 18, 2024

Choose a reason for hiding this comment

coderabbitai bot Mar 18, 2024

Choose a reason for hiding this comment

ankitakinger left a comment

Choose a reason for hiding this comment

rahulbarwal commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

github-actions bot commented Mar 18, 2024

AnaghHegde commented Mar 13, 2024 •

edited by github-actions bot

coderabbitai bot commented Mar 13, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)