DAST Site profiles - Form MVC - Create the basic form - Frontend

• backend counterpart: #225404 (closed)

Summary

This is the frontend part for the DAST Site profile form MVC. Here, we'll focus on creating a simple form for creating a site profile. To keep things as simple as possible in this first iteration, the form will have only 2 fields:

• The profile's name
• The site's URL

Designs

• Figma file: https://www.figma.com/file/7CaJqOTOpPEOzkYkoU5bs5/DAST-Ondemand-Profile

Implementation plan

• Create a new Vue app responsible for rendering the New Site Profile form containing the following fields:
  • Profile name: required, should be unique to the project.
  • Website: basic URL scheme validation
  • Save profile button: submits the form
    • Clicking on the button triggers a GraphQL mutation for saving the form with all of the user's inout
    • Once the profile has been saved successfully, redirect back to the landing page. This behavior will change when we add edit capability to the form.
  • Cancel button: asks the user to confirm the action, then redirects back to the On-demand Scans landing page.