Complete the UI for Link Shortner Add Link Screen

[tarashagarwal]

path: /link/add

We need to bring back the existing Link Shortener Elements to the the migrated app.

Previous App:

The theme of the new app should meet that of the Management UI Theme, so please avoid adding new CSS if not essential.

Concept Screen:

Thanks @EthM370 for pointing out:
Refer the following Regex to validate the input slug: #### ^(https?://)?[a-zA-Z0-9-._/]*$ ####

if the verification of the above Regex fails. Red outline the box and display message "Invalid input: Only alphanumeric characters, '-', '_', '/', and '.' are allowed". - all these features should be included in the manticore package, please explore... or check how it is already being done in the Management UI, we can copy that.

Hard-code any data that is required for now... do not aim to call APIs untill they are developed.

Features to be added:
Instead of multiple check boxes, we will use multi-select drop-down: https://mantine.dev/core/multi-select/
Need to add a generate URL Button as in the original app - generates

Reach Out for Any Questions!!

Update:
Following function could be used to generate random URL string

const getRandomURL = () => Array.from({ length: 6 }, () => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'[ Math.floor(Math.random() * 52) ]).join(''); undefined

[tarashagarwal]

Great job! There are just a few updates needed as per the wireframe:

Prepend Domain to URL Field

• Add "https://domain/" before the random URL text box.
• Retrieve this domain dynamically from the current URL. Button Alignment

Shift the "Create" button to be vertically aligned with the "Generate" button.
Regex Validation

Have you added the regex validation for the URL field? Please ensure it’s in place.
Label Update

Update the label above the text box to match the wireframe.
Form Validation

When the user clicks Submit/Create, check if all three fields are filled.
If any field is empty, either:

• Show an alert prompting the user to fill in all fields.
• Or, simply disable the Submit button until all fields are completed.

Sorry for pointing out all of this ... but these things needs to be in place.

Let me know if you need help with these or have any questions.