From 0fe7a2c56e0acda47168cd672f3c40e83b710443 Mon Sep 17 00:00:00 2001
From: JR Frazier <justinfrazier@jrs-mbp-2.lan>
Date: Sun, 13 Oct 2024 19:30:09 -0400
Subject: [PATCH] added form validations

---
 src/components/forms/apply-form.tsx  | 11 +++++++++++
 src/components/forms/mentor-form.tsx |  2 ++
 src/utils/formValidations.ts         | 28 ++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 src/utils/formValidations.ts

diff --git a/src/components/forms/apply-form.tsx b/src/components/forms/apply-form.tsx
index 57e98f268..1f201f1d7 100644
--- a/src/components/forms/apply-form.tsx
+++ b/src/components/forms/apply-form.tsx
@@ -6,6 +6,7 @@ import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
 import Feedback from "@ui/form-elements/feedback";
+import { linkedinRegex, githubRegex } from "@utils/formValidations";
 
 interface IFormValues {
     firstName: string;
@@ -280,6 +281,11 @@ const ApplyForm = () => {
                         showState={!!hasKey(errors, "linkedInAccountName")}
                         {...register("linkedInAccountName", {
                             required: "LinkedIn Account Name is required",
+                            pattern: {
+                                value: linkedinRegex,
+                                message:
+                                    "Please enter your Linkedin profile URL. For example, linkedin.com/in/your-name",
+                            },
                         })}
                     />
                 </div>
@@ -303,6 +309,11 @@ const ApplyForm = () => {
                         showState={!!hasKey(errors, "githubAccountName")}
                         {...register("githubAccountName", {
                             required: "GitHub Account Name is required",
+                            pattern: {
+                                value: githubRegex,
+                                message:
+                                    "Please enter your Github profile URL. For example, github.com/your-name",
+                            },
                         })}
                     />
                 </div>
diff --git a/src/components/forms/mentor-form.tsx b/src/components/forms/mentor-form.tsx
index ae2d3e3fb..c5d478872 100644
--- a/src/components/forms/mentor-form.tsx
+++ b/src/components/forms/mentor-form.tsx
@@ -6,6 +6,7 @@ import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
 import Feedback from "@ui/form-elements/feedback";
+import { validateProfileLink } from "@utils/formValidations";
 
 interface IFormValues {
     name: string;
@@ -159,6 +160,7 @@ const MentorForm = () => {
                         {...register("github-portfolio-or-linkedin", {
                             required:
                                 "GitHub Portfolio or LinkedIn is required",
+                            validate: validateProfileLink,
                         })}
                     />
                 </div>
diff --git a/src/utils/formValidations.ts b/src/utils/formValidations.ts
new file mode 100644
index 000000000..ba4937488
--- /dev/null
+++ b/src/utils/formValidations.ts
@@ -0,0 +1,28 @@
+// ^(https?:\/\/)? : Matches an optional "http" or "https" at the start, followed by "://". The "?" makes it optional.
+// (www\.)? : Matches the optional "www." subdomain.
+// github\.com\/ : Matches "github.com/" exactly. The backslash escapes the dot.
+// [A-Za-z0-9_-]+ : Matches one or more alphanumeric characters, underscores, or hyphens (used for GitHub usernames).
+// \/? : Matches an optional trailing forward slash.
+// $ : End of the string, ensuring there are no extra characters after the valid GitHub username.
+
+export const githubRegex: RegExp =
+    /^(https?:\/\/)?(www\.)?github\.com\/[A-Za-z0-9_-]+\/?$/;
+
+// ^(https?:\/\/)? : Matches an optional "http" or "https" at the start, followed by "://". The "?" makes it optional.
+// (www\.)? : Matches the optional "www." subdomain.
+// linkedin\.com\/in\/ : Matches "linkedin.com/in/" exactly. The backslash escapes the dots.
+// [A-Za-z0-9_-]+ : Matches one or more alphanumeric characters, underscores, or hyphens (used for LinkedIn profile URLs).
+// \/? : Matches an optional trailing forward slash.
+// $ : End of the string, ensuring there are no extra characters after the valid LinkedIn profile URL.
+export const linkedinRegex: RegExp =
+    /^(https?:\/\/)?(www\.)?linkedin\.com\/in\/[A-Za-z0-9_-]+\/?$/;
+
+export function validateProfileLink(url: string): string | boolean {
+    if (githubRegex.test(url)) {
+        return true;
+    } else if (linkedinRegex.test(url)) {
+        return true;
+    } else {
+        return "The value entered is not a valid Linkedin or Github profile link";
+    }
+}