From e71e0c5ef15eaf9908246a68655034b21ea0dbe2 Mon Sep 17 00:00:00 2001
From: Bharat <bharatkalluri@protonmail.com>
Date: Thu, 1 Apr 2021 18:56:42 +0530
Subject: [PATCH 1/3] Added URL as a property on the frontend

---
 webapp/src/components/propertyValueElement.tsx | 7 ++++++-
 webapp/src/widgets/propertyMenu.tsx            | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 5267fe73e6d..e0ef115b526 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -75,7 +75,12 @@ const PropertyValueElement = (props:Props): JSX.Element => {
         )
     }
 
-    if (propertyTemplate.type === 'text' || propertyTemplate.type === 'number' || propertyTemplate.type === 'email') {
+    if (
+        propertyTemplate.type === 'text' ||
+        propertyTemplate.type === 'number' ||
+        propertyTemplate.type === 'email' ||
+        propertyTemplate.type === 'url'
+    ) {
         if (!readOnly) {
             return (
                 <Editable
diff --git a/webapp/src/widgets/propertyMenu.tsx b/webapp/src/widgets/propertyMenu.tsx
index 50c2bf85c3c..fdaa744083b 100644
--- a/webapp/src/widgets/propertyMenu.tsx
+++ b/webapp/src/widgets/propertyMenu.tsx
@@ -103,6 +103,11 @@ const PropertyMenu = React.memo((props: Props) => {
                     name={typeDisplayName(intl, 'email')}
                     onClick={() => props.onTypeChanged('email')}
                 />
+                <Menu.Text
+                    id='url'
+                    name={typeDisplayName(intl, 'url')}
+                    onClick={() => props.onTypeChanged('url')}
+                />
                 <Menu.Text
                     id='select'
                     name={typeDisplayName(intl, 'select')}

From cb6a8a0189a1946e9fc20ba7c76eda938fdd36cf Mon Sep 17 00:00:00 2001
From: Bharat <bharatkalluri@protonmail.com>
Date: Thu, 1 Apr 2021 19:09:18 +0530
Subject: [PATCH 2/3] Updated snapshot to include URL in dropdown

---
 .../__snapshots__/propertyMenu.test.tsx.snap      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
index 89c00e901ad..18500859269 100644
--- a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
+++ b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
@@ -111,6 +111,21 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                     class="noicon"
                   />
                 </div>
+                <div
+                  class="MenuOption TextOption menu-option"
+                >
+                  <div
+                    class="noicon"
+                  />
+                  <div
+                    class="menu-name"
+                  >
+                    URL
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
                 <div
                   class="MenuOption TextOption menu-option"
                 >

From 9e145fea13379c6f68047ac6a4b65f0ee478a23d Mon Sep 17 00:00:00 2001
From: Bharat <bharatkalluri@protonmail.com>
Date: Fri, 9 Apr 2021 01:34:33 +0530
Subject: [PATCH 3/3] Added URL regex match

---
 webapp/src/components/propertyValueElement.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 313afaa8080..6833dffc6a8 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -40,6 +40,10 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             const emailRegexp = /^(([^<>()[\]\\.,;:\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,}))$/
             return emailRegexp.test(val.toLowerCase())
         }
+        case 'url': {
+            const urlRegexp = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/
+            return urlRegexp.test(val.toLowerCase())
+        }
         case 'text':
             return true
         default: