From a58fdbfd3d745ae624b37a190570214886eb6e32 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Fri, 15 Nov 2024 15:24:35 +0100
Subject: [PATCH] added fix for unicde characters

---
 ccp/js/executionformcontroller.js     |  4 ++--
 ccp/js/inputwidgetcontroller.js       | 30 +++++++++++++--------------
 ccp/js/inputwidgeteditorcontroller.js |  2 +-
 ccp/js/outputwidgetcontroller.js      |  2 +-
 common/js/utils.js                    | 25 ++++++++++++++++++++++
 5 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 common/js/utils.js

diff --git a/ccp/js/executionformcontroller.js b/ccp/js/executionformcontroller.js
index 83cea27..91b7e26 100644
--- a/ccp/js/executionformcontroller.js
+++ b/ccp/js/executionformcontroller.js
@@ -491,7 +491,7 @@ class CCPExecutionForm extends HTMLElement {
             "in": (e, d) => { return Object.values(d.inputs) },
             target: "div",
             apply: (e, d) => {
-              e.innerHTML = `<d4s-ccp-input name="${d.id}" input='${btoa(JSON.stringify(d))}'></d4s-ccp-input>`
+              e.innerHTML = `<d4s-ccp-input name="${d.id}" input='${base64EncodeUnicode(JSON.stringify(d))}'></d4s-ccp-input>`
             }
           }
         ]
@@ -504,7 +504,7 @@ class CCPExecutionForm extends HTMLElement {
             "in": (e, d) => { return Object.values(d.outputs) },
             target: "div",
             apply: (e, d) => {
-              e.innerHTML = `<d4s-ccp-output name="${d.id}" output='${btoa(JSON.stringify(d))}'></d4s-ccp-output>`
+              e.innerHTML = `<d4s-ccp-output name="${d.id}" output='${base64EncodeUnicode(JSON.stringify(d))}'></d4s-ccp-output>`
             }
           }
         ]
diff --git a/ccp/js/inputwidgetcontroller.js b/ccp/js/inputwidgetcontroller.js
index abbf705..ff2ef8c 100644
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@@ -7,65 +7,65 @@ class CCPInputWidgetController extends HTMLElement {
   }
 
   connectedCallback() {
-    this.#data = JSON.parse(atob(this.getAttribute("input")))
+    this.#data = JSON.parse(base64DecodeUnicode(this.getAttribute("input")))
 
     if (this.isChecklist()) {
 
       const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
+      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
       this.querySelector("d4s-ccp-input-checklist").default = this.#data.schema.default
 
     } else if (this.isEnum()) {
 
       const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
+      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
       this.querySelector("d4s-ccp-input-enum").default = this.#data.schema.default
 
     } else if (this.isCode()) {
       
-      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
+      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
       this.querySelector("d4s-ccp-input-textarea").default = this.#data.schema.default
 
     } else if (this.isDateTime()) {
       
       const t = this.#data.schema.format.toLowerCase() === "datetime" ?
         "datetime-local" : this.#data.schema.format.toLowerCase()
-      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
       this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
 
     } else if (this.isFile()) {
       
-      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
+      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
       this.querySelector("d4s-ccp-input-file").default = this.#data.schema.default
 
     } else if (this.isRemoteFile()) {
       
-      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
       this.querySelector("d4s-ccp-input-remotefile").default = this.#data.schema.default
 
     } else if (this.isGeo()) {
       
-      this.innerHTML += `<d4s-ccp-input-geo readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+      this.innerHTML += `<d4s-ccp-input-geo readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
       this.querySelector("d4s-ccp-input-geo").default = this.#data.schema.default
 
     } else if (this.isSecret()) {
       
-      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
+      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
       this.querySelector("d4s-ccp-input-secret").default = this.#data.schema.default
 
     } else if (this.isBoolean()) {
       
-      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
+      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
       this.querySelector("d4s-ccp-input-boolean").default = this.#data.schema.default
 
     } else if (this.isNumber()) {
       
-      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
       this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
 
     } else {
       
-      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${base64EncodeUnicode(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
       this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
 
     }
@@ -173,7 +173,7 @@ class CCPBaseInputWidgetController extends HTMLElement {
     this.#rootdoc = this//this.attachShadow({ mode: "open" });
     this.#name = this.getAttribute("name")
     this.#title = this.getAttribute("title")
-    this.#description = this.getAttribute("description")
+    this.#description = base64DecodeUnicode(this.getAttribute("description"))
     //this.#default = this.getAttribute("default")
     this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
     this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
@@ -296,7 +296,7 @@ class CCPBaseInputWidgetController extends HTMLElement {
             </div>
           </div>
           <div>
-            <small class="text-muted">${atob(this.#description)}</small>
+            <small class="text-muted">${this.#description}</small>
           </div>
           <div name="content">
           </div>
@@ -616,7 +616,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
           </div>
           <small class="text-muted m-0">Select an item or drag and drop it to a proper input</small>
         </div>
-        <div style="min-width:500px; max-width:640px;overflow:auto;etxt-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
+        <div style="min-width:500px; max-width:640px;overflow:auto;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
           <d4s-storage-tree 
             base-url="${addresses[iss]}"
             file-download-enabled="true" 
diff --git a/ccp/js/inputwidgeteditorcontroller.js b/ccp/js/inputwidgeteditorcontroller.js
index 4dc3aca..6bb8f91 100644
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@@ -66,7 +66,7 @@ class CCPInputWidgetEditorController extends HTMLElement {
   }
 
   renderDefaultByType() {
-    return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
+    return `<d4s-ccp-input name="default" input="${base64EncodeUnicode(JSON.stringify(this.#input))}"></d4s-ccp-input>`
   }
 
   renderDeleteButton() {
diff --git a/ccp/js/outputwidgetcontroller.js b/ccp/js/outputwidgetcontroller.js
index f8661ec..ff62b06 100644
--- a/ccp/js/outputwidgetcontroller.js
+++ b/ccp/js/outputwidgetcontroller.js
@@ -4,7 +4,7 @@ class CCPOutputWidgetController extends HTMLElement {
   
   constructor(){
     super()
-    this.#output = JSON.parse(atob(this.getAttribute("output")))
+    this.#output = JSON.parse(base64DecodeUnicode(this.getAttribute("output")))
   }
   
   connectedCallback(){
diff --git a/common/js/utils.js b/common/js/utils.js
new file mode 100644
index 0000000..d77a92c
--- /dev/null
+++ b/common/js/utils.js
@@ -0,0 +1,25 @@
+function base64EncodeUnicode(str) {
+    // Encode the string as UTF-8 bytes
+    const utf8Bytes = new TextEncoder().encode(str);
+    
+    // Convert the bytes to a binary string
+    let binary = '';
+    utf8Bytes.forEach(byte => {
+        binary += String.fromCharCode(byte);
+    });
+    
+    // Encode the binary string to Base64
+    return btoa(binary);
+}
+
+function base64DecodeUnicode(base64) {
+    // Decode the Base64 string to a binary string
+    const binary = atob(base64);
+    
+    // Convert the binary string to a Uint8Array
+    const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
+    
+    // Decode the UTF-8 bytes back to a Unicode string
+    const decoder = new TextDecoder();
+    return decoder.decode(bytes);
+}
\ No newline at end of file