Merge pull request #1765 from ProcessMaker/FOUR-19778

FOUR-19778 Encrypted field does not have read-only mode
ProcessMaker · Oct 29, 2024 · fd14fa4 · fd14fa4
2 parents 83aaa2e + 4661f6e
commit fd14fa4
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git 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
@@ -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);
   });
-});
+
+  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);
+  });
+});