From 9e754cf6c548e0e8ac1275943b219f7d2f74c297 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Tue, 19 Sep 2023 13:12:56 +0500
Subject: [PATCH 01/10] Adding a redacting box to hide the information on the
 document for invited submitters

---
 app/javascript/application.scss               |  3 ++
 app/javascript/submission_form/area.vue       | 47 +++++++++++++++++--
 app/javascript/submission_form/form.vue       | 11 +++++
 app/javascript/submission_form/i18n.js        |  9 ++++
 .../submission_form/redact_step.vue           |  5 ++
 app/javascript/template_builder/area.vue      | 17 +++++++
 .../template_builder/field_type.vue           |  9 ++--
 tailwind.config.js                            |  1 +
 8 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/submission_form/redact_step.vue

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 4cb86b4f7..ea130f21d 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -74,3 +74,6 @@ button[disabled] .enabled {
 .base-select {
   @apply select base-input w-full font-normal;
 }
+.bg-redact{
+  background: black;
+}
\ No newline at end of file
diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 7f057babe..263f74097 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -1,5 +1,44 @@
 <template>
   <div
+    v-if="field.type === 'redact'"
+    class="flex absolute"
+    :style="{ ...computedStyle, backgroundColor: 'black' }"
+    :class="{ 'cursor-default ': !submittable, 'border ': submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
+  >
+    <div
+      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
+      class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
+    >
+      <span
+        v-if="field"
+        class="flex justify-center items-center h-full opacity-50"
+      >
+        <component
+          :is="fieldIcons[field.type]"
+          width="100%"
+          height="100%"
+          class="max-h-10 text-base-content text-white"
+        />
+      </span>
+    </div>
+    <div
+      v-else
+      class="flex items-center px-0.5"
+    >
+      <span v-if="Array.isArray(modelValue)">
+        {{ modelValue.join(', ') }}
+      </span>
+      <span v-else-if="field.type === 'date'">
+        {{ formattedDate }}
+      </span>
+      <span v-else>
+        {{ modelValue }}
+      </span>
+    </div>
+  </div>
+
+  <div
+    v-else
     class="flex absolute text-[1.5vw] lg:text-base"
     :style="computedStyle"
     :class="{ 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
@@ -113,7 +152,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconBarrierBlock } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -180,7 +219,8 @@ export default {
         checkbox: 'Checkbox',
         radio: 'Radio',
         multiple: 'Multiple Select',
-        phone: 'Phone'
+        phone: 'Phone',
+        redact: 'redact'
       }
     },
     fieldIcons () {
@@ -195,7 +235,8 @@ export default {
         radio: IconCircleDot,
         cells: IconColumns3,
         multiple: IconChecks,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        redact: IconBarrierBlock
       }
     },
     image () {
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index d9bca6c06..0f31e4976 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -275,6 +275,15 @@
             @focus="$refs.areas.scrollIntoField(currentField)"
             @submit="submitStep"
           />
+          <RedactStep
+            v-else-if="currentField.type === 'redact'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @submit="submitStep"
+          />
         </div>
         <div class="mt-6 md:mt-8">
           <button
@@ -331,6 +340,7 @@ import SignatureStep from './signature_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
+import RedactStep from './redact_step.vue'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import { t } from './i18n'
@@ -346,6 +356,7 @@ export default {
     IconInnerShadowTop,
     IconArrowsDiagonal,
     PhoneStep,
+    RedactStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
   },
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 7efeb39dc..fd8c5b3c7 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -15,6 +15,7 @@ const en = {
   signed_with: 'Signed with',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
+  redact: 'redact',
   use_international_format: 'Use internatioanl format: +1xxx',
   six_digits_code: '6-digit code',
   change_phone_number: 'Change phone number',
@@ -41,6 +42,7 @@ const es = {
   signed_with: 'Firmado con',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
+  redact: 'redact',
   use_international_format: 'Usar formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Cambiar número de teléfono',
@@ -67,6 +69,7 @@ const it = {
   signed_with: 'Firmato con',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
+  redact: 'redact',
   use_international_format: 'Usa formato internazionale: +1xxx',
   six_digits_code: 'Codice a 6 cifre',
   change_phone_number: 'Cambia numero di telefono',
@@ -93,6 +96,7 @@ const de = {
   signed_with: 'Unterschrieben mit',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer überprüfen',
+  redact: 'redact',
   use_international_format: 'Internationales Format verwenden: +1xxx',
   six_digits_code: '6-stelliger Code',
   change_phone_number: 'Telefonnummer ändern',
@@ -119,6 +123,7 @@ const fr = {
   signed_with: 'Signé avec',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
+  redact: 'redact',
   use_international_format: 'Utiliser le format international : +1xxx',
   six_digits_code: 'Code à 6 chiffres',
   change_phone_number: 'Changer le numéro de téléphone',
@@ -145,6 +150,7 @@ const pl = {
   signed_with: 'Podpisane za pomocą',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
+  redact: 'redact',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
   six_digits_code: '6-cyfrowy kod',
   change_phone_number: 'Zmień numer telefonu',
@@ -171,6 +177,7 @@ const uk = {
   signed_with: 'Підписано за допомогою',
   open_source_documents_software: 'відкритий програмний засіб для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
+  redact: 'redact',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
   six_digits_code: '6-значний код',
   change_phone_number: 'Змінити номер телефону',
@@ -197,6 +204,7 @@ const cs = {
   signed_with: 'Podepsáno pomocí',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
+  redact: 'redact',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
   six_digits_code: '6-místný kód',
   change_phone_number: 'Změnit telefonní číslo',
@@ -223,6 +231,7 @@ const pt = {
   signed_with: 'Assinado com',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
+  redact: 'redact',
   use_international_format: 'Use formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Alterar número de telefone',
diff --git a/app/javascript/submission_form/redact_step.vue b/app/javascript/submission_form/redact_step.vue
new file mode 100644
index 000000000..99089b672
--- /dev/null
+++ b/app/javascript/submission_form/redact_step.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p class="text-center">This portion is redacted</p>
+  </div>
+</template>
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 7d09b75ed..67d706cda 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -92,6 +92,23 @@
       </button>
     </div>
     <div
+      v-if="field.type === 'redact'"
+      class="opacity-100 flex items-center justify-center h-full w-full bg-redact"
+    >
+      <span
+        v-if="field"
+        class="flex justify-center items-center space-x-1 h-full"
+      >
+        <component
+          :is="fieldIcons[field.type]"
+          width="100%"
+          height="100%"
+          class="max-h-10 text-white"
+        />
+      </span>
+    </div>
+    <div
+      v-else
       class="opacity-50 flex items-center justify-center h-full w-full"
       :class="bgColors[submitterIndex]"
     >
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 6dbaf9acc..838034987 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -43,8 +43,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
-
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconBarrierBlock } from '@tabler/icons-vue'
 export default {
   name: 'FiledTypeDropdown',
   inject: ['withPhone'],
@@ -83,7 +82,8 @@ export default {
         multiple: 'Multiple',
         radio: 'Radio',
         cells: 'Cells',
-        phone: 'Phone'
+        phone: 'Phone',
+        redact: 'redact'
       }
     },
     fieldIcons () {
@@ -98,7 +98,8 @@ export default {
         cells: IconColumns3,
         multiple: IconChecks,
         radio: IconCircleDot,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        redact: IconBarrierBlock
       }
     }
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index d6c5b9bf9..37e065d0e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
           secondary: '#ef9fbc',
           accent: '#eeaf3a',
           neutral: '#291334',
+          black: '#000000',
           'base-100': '#faf7f5',
           'base-200': '#efeae6',
           'base-300': '#e7e2df',

From dc528b1a68f347b1bac0e059e9133a679691aa5b Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Thu, 5 Oct 2023 20:27:49 +0500
Subject: [PATCH 02/10] create image variant with permanent redact fields for
 submitter

---
 config/initializers/active_storage.rb |  1 +
 lib/templates/process_document.rb     | 33 +++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/config/initializers/active_storage.rb b/config/initializers/active_storage.rb
index ac62272d6..cd26ba943 100644
--- a/config/initializers/active_storage.rb
+++ b/config/initializers/active_storage.rb
@@ -4,6 +4,7 @@
   attribute :uuid, :string, default: -> { SecureRandom.uuid }
 
   has_many_attached :preview_images
+  has_many_attached :preview_secured_images
 end
 
 ActiveStorage::LogSubscriber.detach_from(:active_storage) if Rails.env.production?
diff --git a/lib/templates/process_document.rb b/lib/templates/process_document.rb
index 41913c208..fa1167aac 100644
--- a/lib/templates/process_document.rb
+++ b/lib/templates/process_document.rb
@@ -5,6 +5,7 @@ module ProcessDocument
     DPI = 200
     FORMAT = '.jpg'
     ATTACHMENT_NAME = 'preview_images'
+    SECURED_ATTACHMENT_NAME = 'preview_secured_images'
 
     PDF_CONTENT_TYPE = 'application/pdf'
     Q = 35
@@ -60,5 +61,37 @@ def generate_pdf_preview_images(attachment, data)
         )
       end
     end
+
+    def generate_pdf_secured_preview_images(template, attachment, data)
+      ActiveStorage::Attachment.where(name: SECURED_ATTACHMENT_NAME, record: attachment).destroy_all
+      number_of_pages = PDF::Reader.new(StringIO.new(data)).pages.size - 1
+      (0..number_of_pages).each do |page_number|
+        pdf = Vips::Image.new_from_buffer(data, '', dpi: DPI, page: page_number)
+        pdf = pdf.resize(MAX_WIDTH / pdf.width.to_f)
+        redacted_boxes = template.fields.select { |field| field['type'] == 'redact' && field['areas'][0]['page'] == page_number }
+        if !redacted_boxes.empty?
+          redacted_boxes.each do |box|
+            x = (box['areas'][0]['x'] * pdf.width).to_i
+            y = (box['areas'][0]['y'] * pdf.height).to_i
+            w = (box['areas'][0]['w'] * pdf.width).to_i
+            h = (box['areas'][0]['h'] * pdf.height).to_i
+            black_rect = Vips::Image.black(w, h)
+            pdf = pdf.insert(black_rect, x, y)
+          end
+        end
+        
+        io = StringIO.new(pdf.write_to_buffer(FORMAT, Q: Q))
+  
+        ActiveStorage::Attachment.create!(
+          blob: ActiveStorage::Blob.create_and_upload!(
+            io: io, filename: "#{page_number}#{FORMAT}",
+            metadata: { analyzed: true, identified: true, width: pdf.width, height: pdf.height }
+          ),
+          name: SECURED_ATTACHMENT_NAME,
+          record: attachment
+        )
+      end
+    end
+
   end
 end

From 614e3bc4e4e76a9bf893d3c5cc4d9ced6af4b82b Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Fri, 6 Oct 2023 19:25:01 +0500
Subject: [PATCH 03/10] after_save callback method for secured_image generation
 lib function

---
 app/models/template.rb | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/models/template.rb b/app/models/template.rb
index 47d32483f..5138262ec 100644
--- a/app/models/template.rb
+++ b/app/models/template.rb
@@ -52,4 +52,13 @@ class Template < ApplicationRecord
   has_many :submissions, dependent: :destroy
 
   scope :active, -> { where(deleted_at: nil) }
+
+  after_save :create_secure_images
+
+  def create_secure_images
+      documents.each do |doc|
+        document_data = doc.blob.download
+        Templates::ProcessDocument.generate_pdf_secured_preview_images(self, doc, document_data)
+      end
+  end
 end

From 9c35677c01193b1b587afe33ddeed57b63609496 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Fri, 6 Oct 2023 20:45:28 +0500
Subject: [PATCH 04/10] show redacted image to the submitter

---
 app/views/submit_form/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 7813e0c4d..f561b1662 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -10,7 +10,7 @@
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
-        <% document.preview_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
+        <% document.preview_secured_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
           <div class="relative my-4 shadow-md">
             <img src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>" loading="lazy">
             <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">

From 43840ecea74ee6fd536e569b4c0c93df9dce582c Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Mon, 9 Oct 2023 15:53:54 +0500
Subject: [PATCH 05/10] adding redacting box on submitter pdf

---
 lib/submissions/generate_result_attachments.rb | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 83fe58311..d79c72e57 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -52,7 +52,9 @@ def call(submitter)
 
           value = submitter.values[field['uuid']]
 
-          next if Array.wrap(value).compact_blank.blank?
+          if !field['type']=='redact'
+            next if Array.wrap(value).compact_blank.blank?
+          end
 
           canvas = page.canvas(type: :overlay)
           canvas.font(FONT_NAME, size: font_size)
@@ -149,6 +151,15 @@ def call(submitter)
                            .draw(canvas, ((area['x'] * width) + (cell_width * index)),
                                  height - (area['y'] * height))
             end
+          when 'redact'
+            x = area['x'] * width
+            y = height - (area['y'] * height) - (area['h'] * height)
+            w = area['w'] * width
+            h = area['h'] * height
+          
+            canvas.fill_color(0, 0, 0) # Set fill color to black
+            canvas.rectangle(x, y, w, h)
+            canvas.fill
           else
             value = I18n.l(Date.parse(value), format: :long, locale: account.locale) if field['type'] == 'date'
 
@@ -260,7 +271,7 @@ def build_pdf_from_image(attachment)
       page.box.height = attachment.metadata['height'] * scale
 
       page.canvas.image(
-        StringIO.new(attachment.preview_images.first.download),
+        StringIO.new(attachment.preview_secured_images.first.download),
         at: [0, 0],
         width: page.box.width,
         height: page.box.height

From b9ecb8e0516e1bbf4aa8b24f33a147590061bf54 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Tue, 19 Sep 2023 13:12:56 +0500
Subject: [PATCH 06/10] Adding a redacting box to hide the information on the
 document for invited submitters

---
 app/javascript/application.scss               |  3 ++
 app/javascript/submission_form/area.vue       | 47 +++++++++++++++++--
 app/javascript/submission_form/form.vue       | 11 +++++
 app/javascript/submission_form/i18n.js        |  9 ++++
 .../submission_form/redact_step.vue           |  5 ++
 app/javascript/template_builder/area.vue      | 17 +++++++
 .../template_builder/field_type.vue           |  9 ++--
 tailwind.config.js                            |  1 +
 8 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/submission_form/redact_step.vue

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 4cb86b4f7..ea130f21d 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -74,3 +74,6 @@ button[disabled] .enabled {
 .base-select {
   @apply select base-input w-full font-normal;
 }
+.bg-redact{
+  background: black;
+}
\ No newline at end of file
diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 7f057babe..263f74097 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -1,5 +1,44 @@
 <template>
   <div
+    v-if="field.type === 'redact'"
+    class="flex absolute"
+    :style="{ ...computedStyle, backgroundColor: 'black' }"
+    :class="{ 'cursor-default ': !submittable, 'border ': submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
+  >
+    <div
+      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
+      class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
+    >
+      <span
+        v-if="field"
+        class="flex justify-center items-center h-full opacity-50"
+      >
+        <component
+          :is="fieldIcons[field.type]"
+          width="100%"
+          height="100%"
+          class="max-h-10 text-base-content text-white"
+        />
+      </span>
+    </div>
+    <div
+      v-else
+      class="flex items-center px-0.5"
+    >
+      <span v-if="Array.isArray(modelValue)">
+        {{ modelValue.join(', ') }}
+      </span>
+      <span v-else-if="field.type === 'date'">
+        {{ formattedDate }}
+      </span>
+      <span v-else>
+        {{ modelValue }}
+      </span>
+    </div>
+  </div>
+
+  <div
+    v-else
     class="flex absolute text-[1.5vw] lg:text-base"
     :style="computedStyle"
     :class="{ 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
@@ -113,7 +152,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconBarrierBlock } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -180,7 +219,8 @@ export default {
         checkbox: 'Checkbox',
         radio: 'Radio',
         multiple: 'Multiple Select',
-        phone: 'Phone'
+        phone: 'Phone',
+        redact: 'redact'
       }
     },
     fieldIcons () {
@@ -195,7 +235,8 @@ export default {
         radio: IconCircleDot,
         cells: IconColumns3,
         multiple: IconChecks,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        redact: IconBarrierBlock
       }
     },
     image () {
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index d9bca6c06..0f31e4976 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -275,6 +275,15 @@
             @focus="$refs.areas.scrollIntoField(currentField)"
             @submit="submitStep"
           />
+          <RedactStep
+            v-else-if="currentField.type === 'redact'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :submitter-slug="submitterSlug"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @submit="submitStep"
+          />
         </div>
         <div class="mt-6 md:mt-8">
           <button
@@ -331,6 +340,7 @@ import SignatureStep from './signature_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
+import RedactStep from './redact_step.vue'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import { t } from './i18n'
@@ -346,6 +356,7 @@ export default {
     IconInnerShadowTop,
     IconArrowsDiagonal,
     PhoneStep,
+    RedactStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
   },
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 7efeb39dc..fd8c5b3c7 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -15,6 +15,7 @@ const en = {
   signed_with: 'Signed with',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
+  redact: 'redact',
   use_international_format: 'Use internatioanl format: +1xxx',
   six_digits_code: '6-digit code',
   change_phone_number: 'Change phone number',
@@ -41,6 +42,7 @@ const es = {
   signed_with: 'Firmado con',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
+  redact: 'redact',
   use_international_format: 'Usar formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Cambiar número de teléfono',
@@ -67,6 +69,7 @@ const it = {
   signed_with: 'Firmato con',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
+  redact: 'redact',
   use_international_format: 'Usa formato internazionale: +1xxx',
   six_digits_code: 'Codice a 6 cifre',
   change_phone_number: 'Cambia numero di telefono',
@@ -93,6 +96,7 @@ const de = {
   signed_with: 'Unterschrieben mit',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer überprüfen',
+  redact: 'redact',
   use_international_format: 'Internationales Format verwenden: +1xxx',
   six_digits_code: '6-stelliger Code',
   change_phone_number: 'Telefonnummer ändern',
@@ -119,6 +123,7 @@ const fr = {
   signed_with: 'Signé avec',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
+  redact: 'redact',
   use_international_format: 'Utiliser le format international : +1xxx',
   six_digits_code: 'Code à 6 chiffres',
   change_phone_number: 'Changer le numéro de téléphone',
@@ -145,6 +150,7 @@ const pl = {
   signed_with: 'Podpisane za pomocą',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
+  redact: 'redact',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
   six_digits_code: '6-cyfrowy kod',
   change_phone_number: 'Zmień numer telefonu',
@@ -171,6 +177,7 @@ const uk = {
   signed_with: 'Підписано за допомогою',
   open_source_documents_software: 'відкритий програмний засіб для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
+  redact: 'redact',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
   six_digits_code: '6-значний код',
   change_phone_number: 'Змінити номер телефону',
@@ -197,6 +204,7 @@ const cs = {
   signed_with: 'Podepsáno pomocí',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
+  redact: 'redact',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
   six_digits_code: '6-místný kód',
   change_phone_number: 'Změnit telefonní číslo',
@@ -223,6 +231,7 @@ const pt = {
   signed_with: 'Assinado com',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
+  redact: 'redact',
   use_international_format: 'Use formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Alterar número de telefone',
diff --git a/app/javascript/submission_form/redact_step.vue b/app/javascript/submission_form/redact_step.vue
new file mode 100644
index 000000000..99089b672
--- /dev/null
+++ b/app/javascript/submission_form/redact_step.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p class="text-center">This portion is redacted</p>
+  </div>
+</template>
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 7d09b75ed..67d706cda 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -92,6 +92,23 @@
       </button>
     </div>
     <div
+      v-if="field.type === 'redact'"
+      class="opacity-100 flex items-center justify-center h-full w-full bg-redact"
+    >
+      <span
+        v-if="field"
+        class="flex justify-center items-center space-x-1 h-full"
+      >
+        <component
+          :is="fieldIcons[field.type]"
+          width="100%"
+          height="100%"
+          class="max-h-10 text-white"
+        />
+      </span>
+    </div>
+    <div
+      v-else
       class="opacity-50 flex items-center justify-center h-full w-full"
       :class="bgColors[submitterIndex]"
     >
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 6dbaf9acc..838034987 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -43,8 +43,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
-
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconBarrierBlock } from '@tabler/icons-vue'
 export default {
   name: 'FiledTypeDropdown',
   inject: ['withPhone'],
@@ -83,7 +82,8 @@ export default {
         multiple: 'Multiple',
         radio: 'Radio',
         cells: 'Cells',
-        phone: 'Phone'
+        phone: 'Phone',
+        redact: 'redact'
       }
     },
     fieldIcons () {
@@ -98,7 +98,8 @@ export default {
         cells: IconColumns3,
         multiple: IconChecks,
         radio: IconCircleDot,
-        phone: IconPhoneCheck
+        phone: IconPhoneCheck,
+        redact: IconBarrierBlock
       }
     }
   },
diff --git a/tailwind.config.js b/tailwind.config.js
index d6c5b9bf9..37e065d0e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
           secondary: '#ef9fbc',
           accent: '#eeaf3a',
           neutral: '#291334',
+          black: '#000000',
           'base-100': '#faf7f5',
           'base-200': '#efeae6',
           'base-300': '#e7e2df',

From 1292197677acf9c3e8a5e4dd1a29c58cc4019e26 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Thu, 5 Oct 2023 20:27:49 +0500
Subject: [PATCH 07/10] create image variant with permanent redact fields for
 submitter

---
 config/initializers/active_storage.rb |  1 +
 lib/templates/process_document.rb     | 33 +++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/config/initializers/active_storage.rb b/config/initializers/active_storage.rb
index ac62272d6..cd26ba943 100644
--- a/config/initializers/active_storage.rb
+++ b/config/initializers/active_storage.rb
@@ -4,6 +4,7 @@
   attribute :uuid, :string, default: -> { SecureRandom.uuid }
 
   has_many_attached :preview_images
+  has_many_attached :preview_secured_images
 end
 
 ActiveStorage::LogSubscriber.detach_from(:active_storage) if Rails.env.production?
diff --git a/lib/templates/process_document.rb b/lib/templates/process_document.rb
index b5ee7c3cd..424f7e2ab 100644
--- a/lib/templates/process_document.rb
+++ b/lib/templates/process_document.rb
@@ -5,6 +5,7 @@ module ProcessDocument
     DPI = 200
     FORMAT = '.jpg'
     ATTACHMENT_NAME = 'preview_images'
+    SECURED_ATTACHMENT_NAME = 'preview_secured_images'
 
     PDF_CONTENT_TYPE = 'application/pdf'
     Q = 35
@@ -60,5 +61,37 @@ def generate_pdf_preview_images(attachment, data)
         )
       end
     end
+
+    def generate_pdf_secured_preview_images(template, attachment, data)
+      ActiveStorage::Attachment.where(name: SECURED_ATTACHMENT_NAME, record: attachment).destroy_all
+      number_of_pages = PDF::Reader.new(StringIO.new(data)).pages.size - 1
+      (0..number_of_pages).each do |page_number|
+        pdf = Vips::Image.new_from_buffer(data, '', dpi: DPI, page: page_number)
+        pdf = pdf.resize(MAX_WIDTH / pdf.width.to_f)
+        redacted_boxes = template.fields.select { |field| field['type'] == 'redact' && field['areas'][0]['page'] == page_number }
+        if !redacted_boxes.empty?
+          redacted_boxes.each do |box|
+            x = (box['areas'][0]['x'] * pdf.width).to_i
+            y = (box['areas'][0]['y'] * pdf.height).to_i
+            w = (box['areas'][0]['w'] * pdf.width).to_i
+            h = (box['areas'][0]['h'] * pdf.height).to_i
+            black_rect = Vips::Image.black(w, h)
+            pdf = pdf.insert(black_rect, x, y)
+          end
+        end
+        
+        io = StringIO.new(pdf.write_to_buffer(FORMAT, Q: Q))
+  
+        ActiveStorage::Attachment.create!(
+          blob: ActiveStorage::Blob.create_and_upload!(
+            io: io, filename: "#{page_number}#{FORMAT}",
+            metadata: { analyzed: true, identified: true, width: pdf.width, height: pdf.height }
+          ),
+          name: SECURED_ATTACHMENT_NAME,
+          record: attachment
+        )
+      end
+    end
+
   end
 end

From 277758e59d348e15c1eaf3dd267980501eab01eb Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Fri, 6 Oct 2023 19:25:01 +0500
Subject: [PATCH 08/10] after_save callback method for secured_image generation
 lib function

---
 app/models/template.rb | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/models/template.rb b/app/models/template.rb
index 47d32483f..5138262ec 100644
--- a/app/models/template.rb
+++ b/app/models/template.rb
@@ -52,4 +52,13 @@ class Template < ApplicationRecord
   has_many :submissions, dependent: :destroy
 
   scope :active, -> { where(deleted_at: nil) }
+
+  after_save :create_secure_images
+
+  def create_secure_images
+      documents.each do |doc|
+        document_data = doc.blob.download
+        Templates::ProcessDocument.generate_pdf_secured_preview_images(self, doc, document_data)
+      end
+  end
 end

From 9e511046f3a97a3804b1cf713dc8e71cfda7d82d Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Fri, 6 Oct 2023 20:45:28 +0500
Subject: [PATCH 09/10] show redacted image to the submitter

---
 app/views/submit_form/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 7813e0c4d..f561b1662 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -10,7 +10,7 @@
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
-        <% document.preview_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
+        <% document.preview_secured_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
           <div class="relative my-4 shadow-md">
             <img src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>" loading="lazy">
             <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">

From bd7f12d1d1ba68d93c440e21ecc2010d95859ef9 Mon Sep 17 00:00:00 2001
From: iozeey <zeeshan.za.ahmad@gmail.com>
Date: Mon, 9 Oct 2023 15:53:54 +0500
Subject: [PATCH 10/10] adding redacting box on submitter pdf

---
 lib/submissions/generate_result_attachments.rb | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 44dbf0f89..4278b7409 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -52,7 +52,9 @@ def call(submitter)
 
           value = submitter.values[field['uuid']]
 
-          next if Array.wrap(value).compact_blank.blank?
+          if !field['type']=='redact'
+            next if Array.wrap(value).compact_blank.blank?
+          end
 
           canvas = page.canvas(type: :overlay)
           canvas.font(FONT_NAME, size: font_size)
@@ -149,6 +151,15 @@ def call(submitter)
                            .draw(canvas, ((area['x'] * width) + (cell_width * index)),
                                  height - (area['y'] * height))
             end
+          when 'redact'
+            x = area['x'] * width
+            y = height - (area['y'] * height) - (area['h'] * height)
+            w = area['w'] * width
+            h = area['h'] * height
+          
+            canvas.fill_color(0, 0, 0) # Set fill color to black
+            canvas.rectangle(x, y, w, h)
+            canvas.fill
           else
             value = I18n.l(Date.parse(value), format: :default, locale: account.locale) if field['type'] == 'date'
 
@@ -260,7 +271,7 @@ def build_pdf_from_image(attachment)
       page.box.height = attachment.metadata['height'] * scale
 
       page.canvas.image(
-        StringIO.new(attachment.preview_images.first.download),
+        StringIO.new(attachment.preview_secured_images.first.download),
         at: [0, 0],
         width: page.box.width,
         height: page.box.height