From fbbebe76955f6aab3a555885d0060527e5fcea20 Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 18:09:49 +0530
Subject: [PATCH 1/6] chore: add client-side validation for email and pitcture
 url

Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 .../Community/Web-based-from/index.js         | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index dc186a7aa3f1..b881f3c04fae 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -7,6 +7,38 @@ import { Field, Formik, Form } from "formik";
 import axios from "axios";
 import { Link } from "gatsby";
 
+const validateEmail = (value) => {
+  let error;
+
+  if (!value) {
+    error = "Required";
+  } else if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
+    error = "Please enter a valid email address";
+  }
+  return error;
+};
+
+const validatePictureUrl = (value) => {
+  let error;
+  if (value) {
+
+    if (value.startsWith("data:")) {
+      error = "Data URIs are not allowed. Please provide a URL to an image file.";
+    } else {
+      try {
+        new URL(value);
+        const allowedImageExtensions = ["jpg", "jpeg", "png", "webp", "svg"];
+        const extension = value.split(".").pop().toLowerCase();
+        if (!allowedImageExtensions.includes(extension)) {
+          error = "URL must point to an image file (jpg, jpeg, png, svg or webp).";
+        }
+      } catch (_) {
+        error = "Please enter a valid URL.";
+      }
+    }
+  }
+  return error;
+};
 
 const WebBasedForm = () => {
 
@@ -99,13 +131,14 @@ const WebBasedForm = () => {
             nextStep();
           }}
         >
+       {({ errors, touched }) => (
           <Form className="form" method="post">
             <label htmlFor="fname" className="form-name">First Name <span className="required-sign">*</span></label>
             <Field type="text" className="text-field" id="firstname" name="firstname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
             <label htmlFor="lname" className="form-name">Last Name <span className="required-sign">*</span></label>
             <Field type="text" className="text-field" id="lastname" name="lastname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
             <label htmlFor="email" className="form-name">Email Address <span className="required-sign">*</span></label>
-            <Field type="text" className="text-field" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z\s]{2,4}$" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
+            <Field type="text" className="text-field" id="email" name="email" validate={validateEmail} />{errors.email && touched.email && <p style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.email}</p>}
             <label htmlFor="occupation" className="form-name">Occupation / Title</label>
             <Field type="text" className="text-field" id="occupation" name="occupation" />
             <label htmlFor="org" className="form-name">Organization / Company / School</label>
@@ -149,10 +182,12 @@ const WebBasedForm = () => {
               </label>
             </div>
             <label htmlFor="picture" className="form-name">Picture</label>
-            <Field type="url" className="text-field" id="picture" name="picture" />
+            <Field type="url" className="text-field" id="picture" name="picture"  validate={validatePictureUrl}/>
+            {errors.picture && touched.picture && <div style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.picture}</div>}
             <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members.</p>
             <Button secondary type="submit" className="btn" title="Next Step" /> <br /><br /><br /><br />
           </Form>
+          )}
         </Formik>
       </Container>
     );

From 3c974b5ac195441610d864e5eb2b43e5c018e4c1 Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 18:34:53 +0530
Subject: [PATCH 2/6] chore: fix failing eslint checks

Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 .../Community/Web-based-from/index.js         | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index b881f3c04fae..25c604b0499c 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -131,62 +131,62 @@ const WebBasedForm = () => {
             nextStep();
           }}
         >
-       {({ errors, touched }) => (
-          <Form className="form" method="post">
-            <label htmlFor="fname" className="form-name">First Name <span className="required-sign">*</span></label>
-            <Field type="text" className="text-field" id="firstname" name="firstname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
-            <label htmlFor="lname" className="form-name">Last Name <span className="required-sign">*</span></label>
-            <Field type="text" className="text-field" id="lastname" name="lastname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
-            <label htmlFor="email" className="form-name">Email Address <span className="required-sign">*</span></label>
-            <Field type="text" className="text-field" id="email" name="email" validate={validateEmail} />{errors.email && touched.email && <p style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.email}</p>}
-            <label htmlFor="occupation" className="form-name">Occupation / Title</label>
-            <Field type="text" className="text-field" id="occupation" name="occupation" />
-            <label htmlFor="org" className="form-name">Organization / Company / School</label>
-            <Field type="text" className="text-field" id="org" name="org" />
-            <label htmlFor="github" className="form-name">GitHub</label>
-            <Field type="url" placeholder="https://github.com/" className="text-field" id="github" name="github" pattern="http(s?)(:\/\/)((www.)?)github.com(\/)([a-zA-z0-9\-_]+)" />
-            <label htmlFor="twitter" className="form-name">Twitter</label>
-            <Field type="url" placeholder="https://twitter.com/" className="text-field" id="twitter" name="twitter" pattern="http(s?)(:\/\/)((www.)?)(twitter|x).com(\/)([a-zA-z0-9\-_]+)" />
-            <label htmlFor="linkedin" className="form-name">Linkedin</label>
-            <Field type="url" placeholder="https://www.linkedin.com/" className="text-field" id="linkedin" name="linkedin" />
-            <label htmlFor="tshirtSize" className="form-name">T-shirt size</label>
-            <div role="group" aria-labelledby="my-radio-group">
-              <label>
-                <Field type="radio" name="tshirtSize" value="XS" />
+          {({ errors, touched }) => (
+            <Form className="form" method="post">
+              <label htmlFor="fname" className="form-name">First Name <span className="required-sign">*</span></label>
+              <Field type="text" className="text-field" id="firstname" name="firstname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
+              <label htmlFor="lname" className="form-name">Last Name <span className="required-sign">*</span></label>
+              <Field type="text" className="text-field" id="lastname" name="lastname" maxLength="32" pattern="[A-Za-z\s]{1,32}" required onInvalid={e => e.target.setCustomValidity("Please fill-in this field")} onInput={e => e.target.setCustomValidity("")} />
+              <label htmlFor="email" className="form-name">Email Address <span className="required-sign">*</span></label>
+              <Field type="text" className="text-field" id="email" name="email" validate={validateEmail} />{errors.email && touched.email && <p style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.email}</p>}
+              <label htmlFor="occupation" className="form-name">Occupation / Title</label>
+              <Field type="text" className="text-field" id="occupation" name="occupation" />
+              <label htmlFor="org" className="form-name">Organization / Company / School</label>
+              <Field type="text" className="text-field" id="org" name="org" />
+              <label htmlFor="github" className="form-name">GitHub</label>
+              <Field type="url" placeholder="https://github.com/" className="text-field" id="github" name="github" pattern="http(s?)(:\/\/)((www.)?)github.com(\/)([a-zA-z0-9\-_]+)" />
+              <label htmlFor="twitter" className="form-name">Twitter</label>
+              <Field type="url" placeholder="https://twitter.com/" className="text-field" id="twitter" name="twitter" pattern="http(s?)(:\/\/)((www.)?)(twitter|x).com(\/)([a-zA-z0-9\-_]+)" />
+              <label htmlFor="linkedin" className="form-name">Linkedin</label>
+              <Field type="url" placeholder="https://www.linkedin.com/" className="text-field" id="linkedin" name="linkedin" />
+              <label htmlFor="tshirtSize" className="form-name">T-shirt size</label>
+              <div role="group" aria-labelledby="my-radio-group">
+                <label>
+                  <Field type="radio" name="tshirtSize" value="XS" />
                 XS
-              </label>
-              <br></br>
-              <label>
-                <Field type="radio" name="tshirtSize" value="S" />
+                </label>
+                <br></br>
+                <label>
+                  <Field type="radio" name="tshirtSize" value="S" />
                 S
-              </label>
-              <br></br>
-              <label>
-                <Field type="radio" name="tshirtSize" value="M" />
+                </label>
+                <br></br>
+                <label>
+                  <Field type="radio" name="tshirtSize" value="M" />
                 M
-              </label>
-              <br></br>
-              <label>
-                <Field type="radio" name="tshirtSize" value="L" />
+                </label>
+                <br></br>
+                <label>
+                  <Field type="radio" name="tshirtSize" value="L" />
                 L
-              </label>
-              <br></br>
-              <label>
-                <Field type="radio" name="tshirtSize" value="XL" />
+                </label>
+                <br></br>
+                <label>
+                  <Field type="radio" name="tshirtSize" value="XL" />
                 XL
-              </label>
-              <br></br>
-              <label>
-                <Field type="radio" name="tshirtSize" value="XXL" />
+                </label>
+                <br></br>
+                <label>
+                  <Field type="radio" name="tshirtSize" value="XXL" />
                 XXL
-              </label>
-            </div>
-            <label htmlFor="picture" className="form-name">Picture</label>
-            <Field type="url" className="text-field" id="picture" name="picture"  validate={validatePictureUrl}/>
-            {errors.picture && touched.picture && <div style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.picture}</div>}
-            <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members.</p>
-            <Button secondary type="submit" className="btn" title="Next Step" /> <br /><br /><br /><br />
-          </Form>
+                </label>
+              </div>
+              <label htmlFor="picture" className="form-name">Picture</label>
+              <Field type="url" className="text-field" id="picture" name="picture"  validate={validatePictureUrl}/>
+              {errors.picture && touched.picture && <div style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.picture}</div>}
+              <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members.</p>
+              <Button secondary type="submit" className="btn" title="Next Step" /> <br /><br /><br /><br />
+            </Form>
           )}
         </Formik>
       </Container>

From cd869f354505b3c8c214f71ed36dac25915cc47d Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 19:00:51 +0530
Subject: [PATCH 3/6] Update src/sections/Community/Web-based-from/index.js

Co-authored-by: Lee Calcote <leecalcote@gmail.com>
Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 src/sections/Community/Web-based-from/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index 25c604b0499c..1fd048e0df42 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -33,7 +33,7 @@ const validatePictureUrl = (value) => {
           error = "URL must point to an image file (jpg, jpeg, png, svg or webp).";
         }
       } catch (_) {
-        error = "Please enter a valid URL.";
+        error = "Please enter a URL to an image file.";
       }
     }
   }

From d20d3d92392bbaf4814284bfdb1a544b1e6114f2 Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 19:01:07 +0530
Subject: [PATCH 4/6] Update src/sections/Community/Web-based-from/index.js

Co-authored-by: Lee Calcote <leecalcote@gmail.com>
Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 src/sections/Community/Web-based-from/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index 1fd048e0df42..293d576788a5 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -23,7 +23,7 @@ const validatePictureUrl = (value) => {
   if (value) {
 
     if (value.startsWith("data:")) {
-      error = "Data URIs are not allowed. Please provide a URL to an image file.";
+      error = "Data URIs are not allowed. Please provide a URL, starting with http:// or https:// to an image file.";
     } else {
       try {
         new URL(value);

From 5e609048f3624509e663649db1a198a9bb610f7c Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 19:04:46 +0530
Subject: [PATCH 5/6] Allows gif

Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 src/sections/Community/Web-based-from/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index 293d576788a5..1a7ea5b1d1a9 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -27,7 +27,7 @@ const validatePictureUrl = (value) => {
     } else {
       try {
         new URL(value);
-        const allowedImageExtensions = ["jpg", "jpeg", "png", "webp", "svg"];
+        const allowedImageExtensions = ["jpg", "jpeg", "png", "webp", "svg", "gif"];
         const extension = value.split(".").pop().toLowerCase();
         if (!allowedImageExtensions.includes(extension)) {
           error = "URL must point to an image file (jpg, jpeg, png, svg or webp).";

From 95596dd2d7541f0f1f219594c60f33e998b5f59e Mon Sep 17 00:00:00 2001
From: Vivek Vishal <vishalvivek488@gmail.com>
Date: Sun, 1 Sep 2024 19:05:10 +0530
Subject: [PATCH 6/6] update error message to include gif

Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
---
 src/sections/Community/Web-based-from/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js
index 1a7ea5b1d1a9..e2517b5ed2ba 100644
--- a/src/sections/Community/Web-based-from/index.js
+++ b/src/sections/Community/Web-based-from/index.js
@@ -30,7 +30,7 @@ const validatePictureUrl = (value) => {
         const allowedImageExtensions = ["jpg", "jpeg", "png", "webp", "svg", "gif"];
         const extension = value.split(".").pop().toLowerCase();
         if (!allowedImageExtensions.includes(extension)) {
-          error = "URL must point to an image file (jpg, jpeg, png, svg or webp).";
+          error = "URL must point to an image file (jpg, jpeg, png, svg, webp or gif).";
         }
       } catch (_) {
         error = "Please enter a URL to an image file.";