UX improvement and close #28

[SYM01]

This pull request includes several changes across different files to improve validation messages, introduce a new BrowserFlavor enum, and enhance form handling in the AutoSwitchInput.vue component. The most important changes are summarized below.

Validation Messages Enhancements:

• public/_locales/en/messages.json: Added new validation messages for malformed URLs and CIDR formats, and updated existing messages for better clarity. [1] [2]

Introduction of BrowserFlavor Enum:

• src/adapters/base.ts: Introduced the BrowserFlavor enum and added a flavor getter to the BaseAdapter class.
• src/adapters/chrome.ts: Updated the Chrome class to override the flavor getter with BrowserFlavor.Chrome. [1] [2]
• src/adapters/web.ts: Updated the WebBrowser class to override the flavor getter with BrowserFlavor.Web. [1] [2]

Form Handling in AutoSwitchInput.vue:

• src/components/configs/AutoSwitchInput.vue: Enhanced form validation by adding a getConditionInputRule function to validate URL and CIDR inputs based on the AutoSwitchType. [1] [2]

Other Component Enhancements:

• src/components/configs/ProfileSelector.vue: Added a required constraint to the profileID model and updated the handling of the selectedProfile computed property. [1] [2] [3]
• src/components/configs/ProxyServerInput.vue: Ensured the proxyType is treated as a string in the v-model binding.

[gemini-code-assist]

Hello @SYM01, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request focuses on UX improvements, specifically addressing validation messages and form handling within the application. It introduces a BrowserFlavor enum to differentiate between browser environments and enhances the AutoSwitchInput.vue component with improved validation rules. The changes span across multiple files, including locale files, adapter definitions, and Vue components.

Highlights

• Validation Message Enhancements: New validation messages have been added to public/_locales/en/messages.json for malformed URLs and CIDR formats, providing clearer feedback to the user.
• BrowserFlavor Enum Introduction: A BrowserFlavor enum is introduced in src/adapters/base.ts to distinguish between different browser environments (Web, Chrome), with corresponding updates in src/adapters/chrome.ts and src/adapters/web.ts.
• AutoSwitchInput.vue Form Handling: The AutoSwitchInput.vue component is enhanced with a getConditionInputRule function to provide dynamic validation for URL and CIDR inputs based on the selected AutoSwitchType.
• ProfileSelector.vue Enhancements: The ProfileSelector.vue component now enforces a required constraint on the profileID model and updates the handling of the selectedProfile computed property.

Changelog

Click here to see the changelog

• public/_locales/en/messages.json
  • Added new validation messages for malformed URLs (config_section_auto_switch_type_url_malformed, config_section_auto_switch_type_url_malformed_chrome).
  • Added a validation message for malformed CIDR formats (config_section_auto_switch_type_cidr_malformed).
• src/adapters/base.ts
  • Introduced the BrowserFlavor enum with Unknown, Web, and Chrome values.
  • Added a flavor getter to the BaseAdapter class, defaulting to BrowserFlavor.Unknown.
• src/adapters/chrome.ts
  • Updated the Chrome class to override the flavor getter and return BrowserFlavor.Chrome.
• src/adapters/web.ts
  • Updated the WebBrowser class to override the flavor getter and return BrowserFlavor.Web.
• src/components/configs/AutoSwitchInput.vue
  • Added FieldRule import from '@arco-design/web-vue/es/form'.
  • Introduced the getConditionInputRule function to dynamically generate validation rules based on AutoSwitchType.
  • Implemented URL validation, including Chrome-specific restrictions on HTTPS URL path matching.
  • Implemented CIDR validation using a regular expression.
  • Wrapped the table in a form and added form items for validation.
• src/components/configs/ProfileSelector.vue
  • Added a required: true constraint to the profileID model.
  • Updated the selectedProfile computed property to only set the profile ID if a value is provided.
  • Added disabled property to the System Profile option based on props.currentProfileID.
• src/components/configs/ProxyServerInput.vue
  • Ensured that proxyType is treated as a string in the v-model binding.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

The form, a canvas, where rules reside,
Validating inputs, with nowhere to hide.
From URLs malformed to CIDRs astray,
Each field's a challenge, to brighten the day.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several UX improvements, including enhanced validation messages, a new BrowserFlavor enum, and improved form handling. The changes appear well-structured and address the intended goals. However, there are a few areas that could benefit from further attention to ensure robustness and clarity.

Summary of Findings

• Missing Sentry Release in Build Workflow: The SENTRY_RELEASE environment variable is set for Chrome and Firefox builds, but it's missing for the initial steps in the build workflow. This inconsistency could lead to incomplete or inaccurate error tracking.
• Potential Regular Expression Vulnerability: The regular expression used for CIDR validation in AutoSwitchInput.vue might be susceptible to ReDoS (Regular Expression Denial of Service) attacks. A more robust and secure validation method should be considered.
• Inconsistent use of Host.flavor: The Host.flavor is checked in AutoSwitchInput.vue to determine if Chrome's URL path matching restriction applies. However, the WebBrowser adapter also sets the flavor to BrowserFlavor.Web, which might lead to unexpected behavior in web-based environments.

Merge Readiness

The pull request is well-structured and addresses the intended goals. However, there are a few areas that could benefit from further attention to ensure robustness and clarity. I recommend addressing the high and medium severity issues before merging. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging.