From 4661f6ebccb81b1515bce3f9073e0e216bd2f546 Mon Sep 17 00:00:00 2001
From: Julio Cesar Laura Avendano <contact@julio-laura.com>
Date: Mon, 28 Oct 2024 16:43:10 -0400
Subject: [PATCH] FOUR-19778 Encrypted field does not have read-only mode

---
 src/components/renderer/form-masked-input.vue | 12 +++---
 tests/e2e/specs/EncryptedField.spec.js        | 42 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/components/renderer/form-masked-input.vue b/src/components/renderer/form-masked-input.vue
index 125797398..44c810a59 100644
--- a/src/components/renderer/form-masked-input.vue
+++ b/src/components/renderer/form-masked-input.vue
@@ -41,7 +41,7 @@
       <input
         v-else
         v-model="localValue"
-        v-bind="componentConfig"
+        v-bind="componentConfigEncField"
         v-uni-id="name"
         :name="name"
         class="form-control"
@@ -231,6 +231,7 @@ export default {
       labelBtn: '',
       errorEncryptedField: '',
       concealExecuted: false,
+      componentConfigEncField: null,
     };
   },
   computed: {
@@ -289,17 +290,18 @@ export default {
      * "encrypted" attribute is enabled
      */
     if (this.encryptedConfig?.encrypted) {
+      this.componentConfigEncField = JSON.parse(JSON.stringify(this.componentConfig));
       if (uuidValidate(this.localValue)) {
         this.inputType = "password";
         this.iconBtn = "fas fa-eye";
         this.labelBtn = this.$t("Reveal");
         this.concealExecuted = true;
-        this.componentConfig.readonly = true;
+        this.componentConfigEncField.readonly = true;
       } else {
         this.inputType = "text";
         this.iconBtn = "fas fa-eye-slash";
         this.labelBtn = this.$t("Conceal");
-        this.componentConfig.readonly = false;
+        this.componentConfigEncField.readonly = this.componentConfig.readonly;
       }
     } else {
       this.inputType = this.dataType;
@@ -381,7 +383,7 @@ export default {
       this.iconBtn = "fas fa-eye";
       this.labelBtn = this.$t("Reveal");
       this.concealExecuted = true;
-      this.componentConfig.readonly = true;
+      this.componentConfigEncField.readonly = true;
       this.errorEncryptedField = "";
 
       // Assign uuid from encrypted data
@@ -392,7 +394,7 @@ export default {
       this.inputType = this.dataType;
       this.iconBtn = "fas fa-eye-slash";
       this.labelBtn = this.$t("Conceal");
-      this.componentConfig.readonly = false;
+      this.componentConfigEncField.readonly = this.componentConfig.readonly;
 
       // Assign value decrypted
       this.localValue = decryptedValue;
diff --git a/tests/e2e/specs/EncryptedField.spec.js b/tests/e2e/specs/EncryptedField.spec.js
index 48b081539..ba0dbde8e 100644
--- a/tests/e2e/specs/EncryptedField.spec.js
+++ b/tests/e2e/specs/EncryptedField.spec.js
@@ -90,4 +90,44 @@ describe("Encrypted Field", () => {
     // After conceal the value should be the same
     cy.get("[data-cy=preview-content] [name=form_input_1]").should("have.value", secretValue);
   });
-});
\ No newline at end of file
+
+  it("Encrypted field in preview with 'readonly' property enabled", () => {
+    visitAndOpenAcordeon();
+    dragFormInput();
+    // Enable "readonly" mode
+    cy.get("[data-cy=inspector-readonly]").click();
+    cy.get("[data-cy=accordion-Advanced]").click();
+    // Enable encrypted
+    cy.get("[data-cy=inspector-encryptedConfig]")
+      .children()
+      .children(".custom-control")
+      .each((control) => {
+        // forced click over the control
+        control.children("input").trigger("click");
+      });
+    // Display available users/groups
+    cy.get('[data-cy="inspector-encryptedConfig"] .multiselect').click();
+    // Select a group
+    cy.get('[data-cy="inspector-encryptedConfig"] #option-2-4').click();
+    // Go to preview mode
+    enterPreviewMode();
+    // Set initial data
+    cy.setPreviewDataInput('{"form_input_1":"Other value"}');
+    // Click in "Conceal" with data
+    cy.get('[data-cy=preview-content] [name=form_input_1]').siblings('button').click();
+    // After conceal should be keep the "readonly" mode
+    cy.get("[data-cy=preview-content] [name=form_input_1]").should("have.attr", "readonly");
+    // After conceal the value should be different
+    cy.get("[data-cy=preview-content] [name=form_input_1]").should("have.not.value", secretValue);
+    // The value in data should be the uuid returned
+    cy.assertPreviewData({
+      form_input_1: uuid,
+    });
+    // Click in "Reveal"
+    cy.get('[data-cy=preview-content] [name=form_input_1]').siblings('button').click();
+    // After conceal should be keep the "readonly" mode
+    cy.get("[data-cy=preview-content] [name=form_input_1]").should("have.attr", "readonly");
+    // After conceal the value should be the same
+    cy.get("[data-cy=preview-content] [name=form_input_1]").should("have.value", secretValue);
+  });
+});