Format check of CPEs in Frontend

[KS-DR]

Current Behavior

If you create a new component in a project, or try to update an existing component with an invalid CPE, the green checkmark in the CPE input field is always present, no matter what you type in indicating the typed CPE is correct.

When saving, the UI indicates via a pop up, that an error occurred, but only in the Networking-Tab in the browsers developer-tools it is visible, what the problem is.

This is especially confusing for users used to use croped CPEs like cpe:2.3:a:boost:boost:1.71.0, that the NVD search (https://nvd.nist.gov/products/cpe/search) will mark as valid, but Dependency-Track will not accept.

Tested with DT v4.12.1

---

Images:

Checkmark in UI:

Pop-Up indicating an error on saving:

Log in networking tab in browsers developer-tools:

NVD search indicating croped CPE is valid:

Proposed Behavior

The UI checks while typing, or at least at saving, if the input follows correct CPE format. If not, the input field should be highlighted red, to indicate that the input is not correct. In this case, the user should not be able to save the form / The frontend should not send the POST request to update the component. Users would than better understand why they can't save a component when using a croped or otherwise invalid CPE.

Checklist

• [x] I have read and understand the contributing guidelines
• [x] I have checked the existing issues for whether this enhancement was already requested