From 2502355078b8204c3a65ede850f2db2b83ef5973 Mon Sep 17 00:00:00 2001
From: daedalus <44623501+ComfortablyCoding@users.noreply.github.com>
Date: Thu, 1 Aug 2024 16:12:50 -0400
Subject: [PATCH] fix: success message not rendered

---
 components/base/UForm.vue |  3 ++-
 package.json              |  3 ++-
 plugins/dompurify-html.ts |  5 +++++
 pnpm-lock.yaml            | 18 ++++++++++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 plugins/dompurify-html.ts

diff --git a/components/base/UForm.vue b/components/base/UForm.vue
index e705143..4654e1f 100644
--- a/components/base/UForm.vue
+++ b/components/base/UForm.vue
@@ -58,7 +58,8 @@ watch(
 		<div class="mb-4">
 			<VAlert v-if="error" type="error">Oops! {{ error }}</VAlert>
 			<VAlert v-if="form.on_success === 'message' && success" type="success">
-				{{ form.success_message ?? 'Success! Your form has been submitted.' }}
+				<div v-if="form.success_message" v-dompurify-html="form.success_message"></div>
+				<p v-else>Success! Your form has been submitted.</p>
 			</VAlert>
 		</div>
 		<div>
diff --git a/package.json b/package.json
index 3ea0ede..41d5e98 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,8 @@
 		"stripe": "^16.5.0",
 		"uuid": "^10.0.0",
 		"v-perfect-signature": "^1.4.0",
-		"vue": "^3.4.34"
+		"vue": "^3.4.34",
+		"vue-dompurify-html": "^5.1.0"
 	},
 	"packageManager": "pnpm@9.6.0",
 	"engines": {
diff --git a/plugins/dompurify-html.ts b/plugins/dompurify-html.ts
new file mode 100644
index 0000000..51529fa
--- /dev/null
+++ b/plugins/dompurify-html.ts
@@ -0,0 +1,5 @@
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+
+export default defineNuxtPlugin((nuxtApp) => {
+	nuxtApp.vueApp.use(VueDOMPurifyHTML);
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1a96f1..b9662a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       vue:
         specifier: ^3.4.34
         version: 3.4.34(typescript@5.5.4)
+      vue-dompurify-html:
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.4.34(typescript@5.5.4))
     devDependencies:
       '@iconify-json/material-symbols':
         specifier: ^1.1.85
@@ -2479,6 +2482,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.1.6:
+    resolution: {integrity: sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==}
+
   domutils@3.1.0:
     resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
 
@@ -5369,6 +5375,11 @@ packages:
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
+  vue-dompurify-html@5.1.0:
+    resolution: {integrity: sha512-616o2/PBdOLM2bwlRWLdzeEC9NerLkwiudqNgaIJ5vBQWXec+u7Kuzh+45DtQQrids67s4pHnTnJZLVfyPMxbA==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -8232,6 +8243,8 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.1.6: {}
+
   domutils@3.1.0:
     dependencies:
       dom-serializer: 2.0.0
@@ -11864,6 +11877,11 @@ snapshots:
 
   vue-devtools-stub@0.1.0: {}
 
+  vue-dompurify-html@5.1.0(vue@3.4.34(typescript@5.5.4)):
+    dependencies:
+      dompurify: 3.1.6
+      vue: 3.4.34(typescript@5.5.4)
+
   vue-eslint-parser@9.4.3(eslint@8.56.0):
     dependencies:
       debug: 4.3.6