feat: add sliding verification to the login form

[anncwb]

Description

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules in CONTRIBUTING.

• If you introduce new functionality, document it. You can run documentation with pnpm run docs:dev command.
• Run the tests with pnpm test.
• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a SliderCaptcha component in the login form for enhanced security.
  • Added validation rules for captcha verification to improve user authentication.

• Bug Fixes

  • Improved event handling for the captcha component to enhance compatibility.

• Localization

  • Added new messages for captcha verification prompts in English and Chinese.

• Style

  • Adjusted styling for the SelectTrigger component for better user experience.

• Chores

  • Updated the rollup package to the latest minor version for improvements.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d80c3c6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

The changes introduce a new SliderCaptcha component across multiple login.vue files, enhancing the authentication form schema with a captcha field. Validation rules are established to ensure the captcha is verified before form submission. Additionally, import statements are updated to reflect changes in module organization, and localization entries for verification prompts are added in both English and Chinese. Minor updates to styling and event handling are also included in related components.

Changes

File	Change Summary
apps/web-antd/src/views/_core/authentication/login.vue apps/web-ele/src/views/_core/authentication/login.vue apps/web-naive/src/views/_core/authentication/login.vue playground/src/views/_core/authentication/login.vue	New component SliderCaptcha added; schema entry for captcha with validation rules established.
apps/web-naive/src/api/request.ts apps/web-naive/src/router/access.ts apps/web-naive/src/store/auth.ts	Import statements updated to source message and notification from #adapter.
apps/web-naive/src/adapter/index.ts	New export statement added to re-export from naive module.
packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue	Height of component increased from h-9 to h-10.
packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue	Logic for handling mouse and touch events updated for compatibility; content width set to '100%'.
packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue	Validation check added for minDegree and maxDegree; dragging state reset at end of handleDragEnd.
packages/locales/src/langs/en-US.json packages/locales/src/langs/zh-CN.json	New localization entries added for verification messages in English and Chinese.
pnpm-workspace.yaml	Version of rollup updated from ^4.22.2 to ^4.22.4.

Possibly related PRs

• feat: tanstack query demos #4276: Introduces a new component, SliderCaptcha, in a different login.vue file, enhancing the authentication form schema.
• refactor: refactor code structure and improve demo page #4389: Adds a captcha-card.vue component, relevant to the overall captcha functionality.
• feat(@vben/common-ui): add verify component #4390: Introduces a verification component with drag-and-verify functionality, conceptually related to the captcha enhancements.
• fix: Improve the problem of inaccurate captcha accuracy #4401: Introduces a new captcha-card.vue component and refactors point-selection-captcha.vue, aligning with captcha component focus.
• fix: the brand color setting does not take effect #4405: Addresses a bug related to brand color settings, potentially impacting captcha component visuals.
• fix: improve layout boundary processing #4423: Improves layout boundary processing, which could affect captcha component display.

Suggested reviewers

• vince292007: Suggested as a reviewer for expertise in the changes made.

Poem

🐰 In the land of code where bunnies play,
A captcha now hops into the fray!
With sliders to move and rules to abide,
Verification's here, let’s take it in stride!
So click and drag, make sure it's done,
For a secure login, let’s all have fun! 🌟

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 000172e and d80c3c6.

Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

Files selected for processing (14)

• apps/web-antd/src/views/_core/authentication/login.vue (2 hunks)
• apps/web-ele/src/views/_core/authentication/login.vue (2 hunks)
• apps/web-naive/src/adapter/index.ts (1 hunks)
• apps/web-naive/src/api/request.ts (1 hunks)
• apps/web-naive/src/router/access.ts (1 hunks)
• apps/web-naive/src/store/auth.ts (1 hunks)
• apps/web-naive/src/views/_core/authentication/login.vue (2 hunks)
• packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue (1 hunks)
• packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue (2 hunks)
• packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue (4 hunks)
• packages/locales/src/langs/en-US.json (1 hunks)
• packages/locales/src/langs/zh-CN.json (1 hunks)
• playground/src/views/_core/authentication/login.vue (2 hunks)
• pnpm-workspace.yaml (1 hunks)

Additional comments not posted (25)

apps/web-naive/src/adapter/index.ts (1)

2-2: Verify no naming conflicts with the new export.

The new export statement looks good and enhances the module's interface by re-exporting entities from the naive module.

Please ensure that there are no naming conflicts between the exports of the form and naive modules to avoid any potential issues for consumers of this module.

apps/web-naive/src/router/access.ts (1)

9-9: Verify the impact of the import statement change on the codebase.

The import statement for the message module has been changed from import { message } from '#/naive'; to import { message } from '#/adapter';. This change indicates a shift in the source of the message functionality.

Please ensure that:

1. The new implementation in #/adapter is compatible with the existing usage of the message module in the codebase.
2. The behavior of the message module remains consistent after this change.

Run the following script to verify the usage of the message module in the codebase:

Verification successful

---

Import statement change is consistent and part of a refactoring

The change in the import statement from import { message } from '#/naive'; to import { message } from '#/adapter'; has been verified and appears to be part of a larger refactoring effort. Here are the key findings:

1. The new import statement is consistently used in relevant files, including apps/web-naive/src/router/access.ts and apps/web-naive/src/api/request.ts.
2. The message module is now exported from apps/web-naive/src/adapter/naive.ts, which aligns with the new import source.
3. The usage of the message module in the codebase remains consistent with typical message functionality (e.g., loading messages, error handling).

This change likely centralizes UI component imports through the adapter, which can improve maintainability and consistency across the project. The impact on the codebase appears to be intentional and controlled.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the `message` module in the codebase.

# Test 1: Search for the usage of the `message` module. 
# Expect: Occurrences of `message` module usage.
rg --type typescript -A 5 $'message\.'

# Test 2: Search for the implementation of the `message` module in `#/adapter`. 
# Expect: Existence of the `message` module implementation in `#/adapter`.
fd --extension ts --exec rg $'export \{ message \}' apps/web-naive/src/adapter

Length of output: 154

---

Script:

#!/bin/bash
# Description: Verify the usage and implementation of the `message` module in the codebase.

# Test 1: Search for the usage of the `message` module in all text files
echo "Searching for usage of 'message' module:"
rg --type-add 'ts:*.ts' --type ts -A 5 'message\.'

# Test 2: Check the existence of the adapter directory and list its contents
echo "Checking adapter directory:"
ls -R apps/web-naive/src/adapter

# Test 3: Search for any export of 'message' in TypeScript files
echo "Searching for 'message' export:"
rg --type-add 'ts:*.ts' --type ts 'export.*message'

# Test 4: Search for import statements of 'message' from '#/adapter'
echo "Searching for imports of 'message' from '#/adapter':"
rg --type-add 'ts:*.ts' --type ts 'import.*message.*from.*#/adapter'

Length of output: 4271

packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue (1)

30-30: LGTM!

The change to increase the height of the SelectTrigger component from h-9 to h-10 is a minor styling adjustment that does not introduce any issues. The updated height maintains consistency with other styling properties.

apps/web-antd/src/views/_core/authentication/login.vue (2)

5-7: LGTM!

The imports are necessary for the formSchema computed property and the new captcha field. The changes look good.

---

81-87: The new captcha field schema looks good!

The SliderCaptcha component is correctly integrated into the form schema, and the validation rules ensure that the captcha must be verified for the form to be considered valid. The use of $t for the validation message is a good practice for localization support.

This addition enhances the security of the login form by preventing automated attacks.

apps/web-ele/src/views/_core/authentication/login.vue (3)

5-5: LGTM!

The imports of computed and markRaw from vue are necessary for the functionality added in this file.

---

7-7: LGTM!

The imports of AuthenticationLogin, SliderCaptcha, z from @vben/common-ui, and $t from @vben/locales are necessary for the functionality added in this file.

---

81-87: LGTM!

The addition of the SliderCaptcha component to the form schema, along with the validation rule, is consistent with the PR objectives and the AI-generated summary. The code segment is well-structured and follows best practices.

apps/web-naive/src/views/_core/authentication/login.vue (3)

5-5: LGTM!

The imports are correctly used in the code. computed is used to create a computed property for the form schema, and markRaw is used to mark the SliderCaptcha component as non-reactive when adding it to the schema.

---

7-7: LGTM!

The imports are correctly used in the code. SliderCaptcha is the new component being introduced in this PR, and z is used for defining validation rules in the form schema.

---

81-87: LGTM!

The new schema entry for the captcha field is correctly defined:

• It uses the SliderCaptcha component and marks it as non-reactive using markRaw, which is necessary to prevent issues with reactivity.
• The validation rule effectively ensures that the captcha is verified (i.e., the value must be true) before form submission.
• The error message for the captcha verification is correctly defined using the $t function for localization.

apps/web-naive/src/api/request.ts (1)

13-13: Verify the export of the message module from the new location.

The change looks good. It updates the import statement for the message module to reflect the new location (#/adapter).

However, please ensure that the message module is correctly exported from #/adapter to avoid any runtime errors.

Run the following script to verify the export of the message module:

Verification successful

---

The export of the message module from #/adapter is correctly implemented.

The change has been verified successfully. The message module is properly exported from 'apps/web-naive/src/adapter/naive.ts' and correctly imported in 'apps/web-naive/src/api/request.ts'. The usage of the message module in the request file confirms that it's functioning as expected.

This change appears to be part of a refactoring effort to centralize UI-related exports, which is a good practice for maintaining a clean and organized codebase.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the export of the `message` module from `#/adapter`.

# Test: Search for the export of the `message` module. Expect: Occurrence of the export statement.
rg --type typescript -g '#/adapter' -e $'export \{ message \}'

Length of output: 98

---

Script:

#!/bin/bash
# Description: Verify the export of the `message` module from `#/adapter`.

# Find all JavaScript and TypeScript files in the #/adapter directory
echo "Searching for JavaScript and TypeScript files in #/adapter:"
fd -e js -e ts -e jsx -e tsx '#/adapter'

# Search for various forms of exporting 'message'
echo "\nSearching for export of 'message':"
rg -i "export.*message" $(fd -e js -e ts -e jsx -e tsx '#/adapter')

# Search for the definition of 'message'
echo "\nSearching for definition of 'message':"
rg -i "const message|let message|var message|function message" $(fd -e js -e ts -e jsx -e tsx '#/adapter')

# Search for any occurrence of 'message' to catch any other relevant usage
echo "\nSearching for any occurrence of 'message':"
rg -i "message" $(fd -e js -e ts -e jsx -e tsx '#/adapter')

Length of output: 35423

apps/web-naive/src/store/auth.ts (1)

12-12: LGTM!

The change in the import statement for the notification module looks good. As long as the notification module exported from #/adapter provides the same functionality as the one previously imported from #/naive, this change should not have any negative impact on the code.

playground/src/views/_core/authentication/login.vue (3)

5-5: LGTM!

The import statement is correct and the imported entities are used appropriately in the file.

---

7-7: LGTM!

The import statement is correct and the imported entities are used appropriately in the file.

---

98-104: LGTM!

The addition of the SliderCaptcha component and the associated validation rule enhances the security of the login form by preventing automated submissions. The code segment is implemented correctly and follows best practices.

pnpm-workspace.yaml (1)

137-137: LGTM!

The minor version upgrade of the rollup package from ^4.22.2 to ^4.22.4 is a good practice to incorporate bug fixes and minor improvements. The caret (^) symbol in the version specifier ensures that future minor and patch versions will be automatically updated.

packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue (4)

69-71: LGTM!

The validation check and warning log for minDegree exceeding maxDegree is a good defensive programming practice.

---

123-123: LGTM!

Setting state.dragging to false at the end of handleDragEnd is correct to ensure the dragging state is properly reset.

---

170-170: LGTM!

Adding the cursor-pointer class to the image wrapper div enhances the user experience by indicating the image is clickable.

---

193-195: LGTM!

Simplifying the condition for displaying the default tip by relying solely on state.dragging is a good refactor that improves code readability without changing the behavior.

packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue (2)

Line range hint 73-79: LGTM!

The updated implementation of getEventPageX simplifies the type checking by relying on property existence instead of explicit type checks. This change improves compatibility with different event types and provides a more robust way of retrieving the pageX value.

---

186-187: LGTM!

The addition of setting the content element's width to '100%' ensures that the content element's style is explicitly defined during the execution of the resume function. This change improves the consistency and reliability of the UI when resuming the verification process.

packages/locales/src/langs/zh-CN.json (1)

105-105: LGTM!

The added key-value pair provides a clear and concise message to prompt users to complete verification before proceeding, which aligns with the PR objective of introducing a sliding verification feature to the login form.

packages/locales/src/langs/en-US.json (1)

106-106: LGTM!

The new entry "verifyRequiredTip" provides an appropriate localized string for prompting users to complete verification during authentication. The key and value adhere to the JSON format and naming conventions used in the file, and the entry is placed under the relevant "authentication" section.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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>, please review it.
  -- Generate unit testing code 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 testing code 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• 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/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.