From 0e1dd2ddbef2edbe21bca495f95208364849516f Mon Sep 17 00:00:00 2001
From: "felix.gateru" <felix.gateru@gmail.com>
Date: Tue, 5 Mar 2024 17:49:22 +0300
Subject: [PATCH] Make uuid pattern accessible to all modals

Signed-off-by: felix.gateru <felix.gateru@gmail.com>
---
 ui/service.go                                 |  3 ++
 ui/web/templates/charts/alarmcountmodal.html  |  4 +-
 ui/web/templates/charts/alarmstablemodal.html |  4 +-
 .../templates/charts/arealinechartmodal.html  |  4 +-
 ui/web/templates/charts/barchartmodal.html    |  4 +-
 ui/web/templates/charts/donutmodal.html       |  4 +-
 .../templates/charts/doublebarchartmodal.html |  4 +-
 .../charts/dynamicdatachartmodal.html         |  4 +-
 .../templates/charts/entitiestablemodal.html  |  4 +-
 ui/web/templates/charts/entitycountmodal.html |  4 +-
 ui/web/templates/charts/gaugemodal.html       |  4 +-
 .../charts/horizontalbarchartmodal.html       |  4 +-
 ui/web/templates/charts/labelmodal.html       |  4 +-
 ui/web/templates/charts/linechartmodal.html   |  4 +-
 .../templates/charts/multibarchartmodal.html  |  4 +-
 ui/web/templates/charts/multigaugemodal.html  |  4 +-
 .../charts/multiplelinechartmodal.html        |  4 +-
 ui/web/templates/charts/piechartmodal.html    |  4 +-
 ui/web/templates/charts/progressbarmodal.html |  4 +-
 .../templates/charts/shareddatasetmodal.html  |  4 +-
 ui/web/templates/charts/speedgaugemodal.html  |  4 +-
 .../charts/stackedlinechartmodal.html         |  4 +-
 ui/web/templates/charts/stepchartmodal.html   |  4 +-
 ui/web/templates/charts/tempgaugemodal.html   |  4 +-
 ui/web/templates/charts/valuecardmodal.html   |  4 +-
 ui/web/templates/dashboard.html               | 48 +++++++++----------
 26 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/ui/service.go b/ui/service.go
index d846e1cf8..d52eda4f7 100644
--- a/ui/service.go
+++ b/ui/service.go
@@ -231,6 +231,7 @@ var (
 	domainRelations = []string{"administrator", "editor", "viewer", "member"}
 	groupRelations  = []string{"administrator", "editor", "viewer"}
 	statusOptions   = []string{"all", "enabled", "disabled"}
+	uuidPattern     = "^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
 )
 
 // Service specifies service API.
@@ -2552,6 +2553,7 @@ func (us *uiService) ViewDashboard(s Session, dashboardID string) ([]byte, error
 		Dashboard      Dashboard
 		Breadcrumbs    []breadcrumb
 		Session        Session
+		UUIDPattern    string
 	}{
 		dashboardsActive,
 		dashboardsActive,
@@ -2559,6 +2561,7 @@ func (us *uiService) ViewDashboard(s Session, dashboardID string) ([]byte, error
 		dashboard,
 		crumbs,
 		s,
+		uuidPattern,
 	}
 
 	if err := us.tpls.ExecuteTemplate(&btpl, "dashboard", data); err != nil {
diff --git a/ui/web/templates/charts/alarmcountmodal.html b/ui/web/templates/charts/alarmcountmodal.html
index dfb9e449e..e9aea0f1f 100644
--- a/ui/web/templates/charts/alarmcountmodal.html
+++ b/ui/web/templates/charts/alarmcountmodal.html
@@ -28,7 +28,7 @@ <h5 class="modal-title" id="alarmCountModalLabel">Alarm Count Card</h5>
               <label for="channel-id" class="form-label">Channel ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="channel"
                 id="channel-id"
@@ -41,7 +41,7 @@ <h5 class="modal-title" id="alarmCountModalLabel">Alarm Count Card</h5>
               <label for="thing-id" class="form-label">Thing ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="thing"
                 id="thing-id"
diff --git a/ui/web/templates/charts/alarmstablemodal.html b/ui/web/templates/charts/alarmstablemodal.html
index 7e2c2e7ea..fc969cb18 100644
--- a/ui/web/templates/charts/alarmstablemodal.html
+++ b/ui/web/templates/charts/alarmstablemodal.html
@@ -28,7 +28,7 @@ <h5 class="modal-title" id="alarmsTableModalLabel">Alarms Table</h5>
               <label for="channel-id" class="form-label">Channel ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="channel"
                 id="channel-id"
@@ -41,7 +41,7 @@ <h5 class="modal-title" id="alarmsTableModalLabel">Alarms Table</h5>
               <label for="thing-id" class="form-label">Thing IDs</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="thing"
                 id="thing-id"
diff --git a/ui/web/templates/charts/arealinechartmodal.html b/ui/web/templates/charts/arealinechartmodal.html
index 12c7933a1..fd0dced28 100644
--- a/ui/web/templates/charts/arealinechartmodal.html
+++ b/ui/web/templates/charts/arealinechartmodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="areaLineChartModalLabel">Area Line Charts</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="areaLineChartModalLabel">Area Line Charts</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html
index 673e89bdc..457593d40 100644
--- a/ui/web/templates/charts/barchartmodal.html
+++ b/ui/web/templates/charts/barchartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="barChartModalLabel">Time Series Bar Chart</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/donutmodal.html b/ui/web/templates/charts/donutmodal.html
index ca586a7b2..6ed1c46d7 100644
--- a/ui/web/templates/charts/donutmodal.html
+++ b/ui/web/templates/charts/donutmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="donutModalLabel">Donut chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="donutModalLabel">Donut chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/doublebarchartmodal.html b/ui/web/templates/charts/doublebarchartmodal.html
index dcd11acfc..fdabd6143 100644
--- a/ui/web/templates/charts/doublebarchartmodal.html
+++ b/ui/web/templates/charts/doublebarchartmodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="doubleBarChartModalLabel">Double Bar Chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/dynamicdatachartmodal.html b/ui/web/templates/charts/dynamicdatachartmodal.html
index 8721825e3..3ffabcbe9 100644
--- a/ui/web/templates/charts/dynamicdatachartmodal.html
+++ b/ui/web/templates/charts/dynamicdatachartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="dynamicDataChartModalLabel">Dynamic Data Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="dynamicDataChartModalLabel">Dynamic Data Chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/entitiestablemodal.html b/ui/web/templates/charts/entitiestablemodal.html
index 6825d10e8..eff5fe473 100644
--- a/ui/web/templates/charts/entitiestablemodal.html
+++ b/ui/web/templates/charts/entitiestablemodal.html
@@ -28,7 +28,7 @@ <h5 class="modal-title" id="entitiesTableModalLabel">Entities table</h5>
               <label for="channel-id" class="form-label">Channel ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="channel"
                 id="channel-id"
@@ -41,7 +41,7 @@ <h5 class="modal-title" id="entitiesTableModalLabel">Entities table</h5>
               <label for="thing-id" class="form-label">Thing IDs</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="thing"
                 id="thing-id"
diff --git a/ui/web/templates/charts/entitycountmodal.html b/ui/web/templates/charts/entitycountmodal.html
index bbb815911..289467875 100644
--- a/ui/web/templates/charts/entitycountmodal.html
+++ b/ui/web/templates/charts/entitycountmodal.html
@@ -28,7 +28,7 @@ <h5 class="modal-title" id="entityCountModalLabel">Entity Count Card</h5>
               <label for="channel-id" class="form-label">Channel ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="channel"
                 id="channel-id"
@@ -41,7 +41,7 @@ <h5 class="modal-title" id="entityCountModalLabel">Entity Count Card</h5>
               <label for="domain-id" class="form-label">Domain ID</label>
               <input
                 type="text"
-                pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                pattern="{{ .UUIDPattern }}"
                 class="form-control mb-3"
                 name="domain"
                 id="domain-id"
diff --git a/ui/web/templates/charts/gaugemodal.html b/ui/web/templates/charts/gaugemodal.html
index 935cdd689..d5fec14f2 100644
--- a/ui/web/templates/charts/gaugemodal.html
+++ b/ui/web/templates/charts/gaugemodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="gaugeModalLabel">Simple Analogue Gauge</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="gaugeModalLabel">Simple Analogue Gauge</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index 8ab996d5f..bfe2eadd8 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/labelmodal.html b/ui/web/templates/charts/labelmodal.html
index 36f9438c4..7064fd9a4 100644
--- a/ui/web/templates/charts/labelmodal.html
+++ b/ui/web/templates/charts/labelmodal.html
@@ -27,7 +27,7 @@ <h5 class="modal-title" id="labelModalLabel">Label Card</h5>
             <label for="channel-id" class="form-label">Channel ID</label>
             <input
               type="text"
-              pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+              pattern="{{ .UUIDPattern }}"
               class="form-control mb-3"
               name="channel"
               id="channel-id"
@@ -40,7 +40,7 @@ <h5 class="modal-title" id="labelModalLabel">Label Card</h5>
             <label for="thing-id" class="form-label">Thing ID</label>
             <input
               type="text"
-              pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+              pattern="{{ .UUIDPattern }}"
               class="form-control mb-3"
               name="thing"
               id="thing-id"
diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
index e660c6df7..6e24757fd 100644
--- a/ui/web/templates/charts/linechartmodal.html
+++ b/ui/web/templates/charts/linechartmodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/multibarchartmodal.html b/ui/web/templates/charts/multibarchartmodal.html
index 89059ff74..5d20d1b68 100644
--- a/ui/web/templates/charts/multibarchartmodal.html
+++ b/ui/web/templates/charts/multibarchartmodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="multiBarChartModalLabel">Multiple Bar Chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/multigaugemodal.html b/ui/web/templates/charts/multigaugemodal.html
index 38253719f..5b50ddf1a 100644
--- a/ui/web/templates/charts/multigaugemodal.html
+++ b/ui/web/templates/charts/multigaugemodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="multiGaugeModalLabel">Multi Gauge Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="multiGaugeModalLabel">Multi Gauge Chart</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/multiplelinechartmodal.html b/ui/web/templates/charts/multiplelinechartmodal.html
index 977ce54e5..ca95a4d69 100644
--- a/ui/web/templates/charts/multiplelinechartmodal.html
+++ b/ui/web/templates/charts/multiplelinechartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="multipleLineChartModalLabel">Time series line charts
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="multipleLineChartModalLabel">Time series line charts
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/piechartmodal.html b/ui/web/templates/charts/piechartmodal.html
index 48e017095..9c9207c77 100644
--- a/ui/web/templates/charts/piechartmodal.html
+++ b/ui/web/templates/charts/piechartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="pieChartModalLabel">Pie chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="pieChartModalLabel">Pie chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/progressbarmodal.html b/ui/web/templates/charts/progressbarmodal.html
index 76dbba552..63aef6139 100644
--- a/ui/web/templates/charts/progressbarmodal.html
+++ b/ui/web/templates/charts/progressbarmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="progressBarModalLabel">Progress bar</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="progressBarModalLabel">Progress bar</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/shareddatasetmodal.html b/ui/web/templates/charts/shareddatasetmodal.html
index 82f9d9982..abab468bf 100644
--- a/ui/web/templates/charts/shareddatasetmodal.html
+++ b/ui/web/templates/charts/shareddatasetmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="sharedDatasetModalLabel">Shared Dataset Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="sharedDatasetModalLabel">Shared Dataset Chart</h5>
                   <label for="thing-id" class="form-label">Thing IDs</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/speedgaugemodal.html b/ui/web/templates/charts/speedgaugemodal.html
index 5a9b21911..d5daf2282 100644
--- a/ui/web/templates/charts/speedgaugemodal.html
+++ b/ui/web/templates/charts/speedgaugemodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="speedGaugeModalLabel">Analogue Speed Gauge</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="speedGaugeModalLabel">Analogue Speed Gauge</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html
index d4ddb39ac..51ec43b04 100644
--- a/ui/web/templates/charts/stackedlinechartmodal.html
+++ b/ui/web/templates/charts/stackedlinechartmodal.html
@@ -68,7 +68,7 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -81,7 +81,7 @@ <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked Line Charts</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/stepchartmodal.html b/ui/web/templates/charts/stepchartmodal.html
index 6c3c6825e..7bc2e8a9a 100644
--- a/ui/web/templates/charts/stepchartmodal.html
+++ b/ui/web/templates/charts/stepchartmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="stepChartModalLabel">Step Chart</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="stepChartModalLabel">Step Chart</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/tempgaugemodal.html b/ui/web/templates/charts/tempgaugemodal.html
index 08fbf04be..e31372579 100644
--- a/ui/web/templates/charts/tempgaugemodal.html
+++ b/ui/web/templates/charts/tempgaugemodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="tempGaugeModalLabel">Analogue Temperature Gauge</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="tempGaugeModalLabel">Analogue Temperature Gauge</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/charts/valuecardmodal.html b/ui/web/templates/charts/valuecardmodal.html
index 417de38c4..869db4ee8 100644
--- a/ui/web/templates/charts/valuecardmodal.html
+++ b/ui/web/templates/charts/valuecardmodal.html
@@ -67,7 +67,7 @@ <h5 class="modal-title" id="valueCardModalLabel">Value card</h5>
                   <label for="channel-id" class="form-label">Channel ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="channel"
                     id="channel-id"
@@ -80,7 +80,7 @@ <h5 class="modal-title" id="valueCardModalLabel">Value card</h5>
                   <label for="thing-id" class="form-label">Thing ID</label>
                   <input
                     type="text"
-                    pattern="^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$"
+                    pattern="{{ .UUIDPattern }}"
                     class="form-control mb-3"
                     name="thing"
                     id="thing-id"
diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html
index a21642cc3..3ddcf4294 100644
--- a/ui/web/templates/dashboard.html
+++ b/ui/web/templates/dashboard.html
@@ -96,30 +96,30 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
                 </div>
               </div>
 
-              {{ template "gaugemodal" }}
-              {{ template "linechartmodal" }}
-              {{ template "barchartmodal" }}
-              {{ template "piechartmodal" }}
-              {{ template "donutmodal" }}
-              {{ template "speedgaugemodal" }}
-              {{ template "tempgaugemodal" }}
-              {{ template "stackedlinechartmodal" }}
-              {{ template "arealinechartmodal" }}
-              {{ template "horizontalbarchartmodal" }}
-              {{ template "dynamicdatachartmodal" }}
-              {{ template "doublebarchartmodal" }}
-              {{ template "multiplelinechartmodal" }}
-              {{ template "stepchartmodal" }}
-              {{ template "multigaugemodal" }}
-              {{ template "multibarchartmodal" }}
-              {{ template "shareddatasetmodal" }}
-              {{ template "valuecardmodal" }}
-              {{ template "alarmcountmodal" }}
-              {{ template "alarmstablemodal" }}
-              {{ template "entitiestablemodal" }}
-              {{ template "entitycountmodal" }}
-              {{ template "progressbarmodal" }}
-              {{ template "labelmodal" }}
+              {{ template "gaugemodal" . }}
+              {{ template "linechartmodal" . }}
+              {{ template "barchartmodal" . }}
+              {{ template "piechartmodal" . }}
+              {{ template "donutmodal" . }}
+              {{ template "speedgaugemodal" . }}
+              {{ template "tempgaugemodal" . }}
+              {{ template "stackedlinechartmodal" . }}
+              {{ template "arealinechartmodal" . }}
+              {{ template "horizontalbarchartmodal" . }}
+              {{ template "dynamicdatachartmodal" . }}
+              {{ template "doublebarchartmodal" . }}
+              {{ template "multiplelinechartmodal" . }}
+              {{ template "stepchartmodal" . }}
+              {{ template "multigaugemodal" . }}
+              {{ template "multibarchartmodal" . }}
+              {{ template "shareddatasetmodal" . }}
+              {{ template "valuecardmodal" . }}
+              {{ template "alarmcountmodal" . }}
+              {{ template "alarmstablemodal" . }}
+              {{ template "entitiestablemodal" . }}
+              {{ template "entitycountmodal" . }}
+              {{ template "progressbarmodal" . }}
+              {{ template "labelmodal" . }}
             </div>
           </div>
         </div>