feat: validate social links

[vinayak-vohra]

Related Issue

223

Description

This PR achieves the following:

• Added regular expressions (regex) to validate the following social links:

  • [x] Email
  • [x] Mobile
  • [x] Instagram
  • [ ] Facebook
  • [x] Whatsapp
  • [x] Github
  • [ ] Website

• Regex also validates usernames for GitHub and Instagram. (see below)

• Validation checks are not performed in development environment (npm run dev) to avoid testing hinderance.

• Regex is optional. Input value is only tested if corresponding regex is available.

• UI changes:

  • Added toast notifications in case of invalid values.
  • Error border to highlight input with invalid value.
  • Auto focus on input with invalid value.

Screenshots

https://github.com/user-attachments/assets/eb11c15e-d6b2-4609-8a43-07cd2cf846eb

https://github.com/user-attachments/assets/cf32c979-6dcf-4cfa-9603-c21480966e18

Additional Information

Username Criteria:

1. GitHub
   • May only contain alphanumeric characters or hyphens.
   • Cannot have multiple consecutive hyphens.
   • Cannot begin or end with a hyphen.
   • Maximum is 39 characters.
2. Instagram
   • May only contain alphanumeric characters, period (.) or underscore (_).
   • Cannot start or end with period (.).
   • Cannot contain consecutive periods (.).
   • Must have at least on alphabet.
   • Maximum is 30 characters.

Regex used:

Email:

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

Mobile/Whatsapp:

/((\+*)((0[ -]*)*|((91 )*))((\d{12})+|(\d{10})+))|\d{5}([- ]*)\d{6}/

Github:

/^http(s)?:\/\/(www.)?github.com\/([a-z0-9](-?[a-z0-9]){0,38})$/i

Instagram:

/^https?:\/\/(www\.)?instagram\.com\/(?:(?=.*[a-zA-Z]))([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)$/

[vercel[bot]]

@vinayak-vohra is attempting to deploy a commit to the punyakrit's projects Team on Vercel.

A member of the Team first needs to authorize it.