fix signature toggle

Dockerfile

@@ -2,7 +2,7 @@ FROM ruby:3.3.1-alpine3.18 as fonts
 
 WORKDIR /fonts
 
-RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
+RUN apk --no-cache add fontforge wget && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Regular.ttf && wget https://github.com/satbyy/go-noto-universal/releases/download/v7.0/GoNotoKurrent-Bold.ttf && wget https://github.com/impallari/DancingScript/raw/master/fonts/v2031/DancingScript-Regular.otf && wget https://cdn.jsdelivr.net/gh/notofonts/notofonts.github.io/fonts/NotoSansSymbols2/hinted/ttf/NotoSansSymbols2-Regular.ttf && wget https://github.com/Maxattax97/gnu-freefont/raw/master/ttf/FreeSans.ttf && wget https://github.com/impallari/DancingScript/raw/master/OFL.txt
 
 RUN fontforge -lang=py -c 'font1 = fontforge.open("FreeSans.ttf"); font2 = fontforge.open("NotoSansSymbols2-Regular.ttf"); font1.mergeFonts(font2); font1.generate("FreeSans.ttf")'
 

app/controllers/submit_form_draw_signature_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SubmitFormDrawSignatureController < ApplicationController
+  layout false
+
+  around_action :with_browser_locale, only: %i[show]
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def show
+    @submitter = Submitter.find_by!(slug: params[:slug])
+
+    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+
+    if @submitter.submission.template.archived_at? || @submitter.submission.archived_at?
+      return redirect_to submit_form_path(@submitter.slug)
+    end
+
+    render :show
+  end
+end

app/controllers/submit_form_values_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class SubmitFormValuesController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  def index
+    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+
+    return render json: {} if submitter.completed_at?
+    return render json: {} if submitter.submission.template.archived_at? || submitter.submission.archived_at?
+
+    value = submitter.values[params['field_uuid']]
+    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
+
+    render json: {
+      value:,
+      attachment: attachment&.as_json(only: %i[uuid], methods: %i[url filename content_type])
+    }, head: :ok
+  end
+end

app/controllers/submitters_autocomplete_controller.rb

@@ -25,7 +25,7 @@ class SubmittersAutocompleteController < ApplicationController
 
       term = "#{params[:q].downcase}%"
 
-      submitters.where(column.matches(term, false, true))
+      submitters.where(column.matches(term))
     else
       Submitters.search(submitters, params[:q])
     end

app/controllers/template_documents_controller.rb

@@ -4,7 +4,9 @@ class TemplateDocumentsController < ApplicationController
   load_and_authorize_resource :template
 
   def create
-    return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
+    if params[:blobs].blank? && params[:files].blank?
+      return render json: { error: 'File is missing' }, status: :unprocessable_entity
+    end
 
     old_fields_hash = @template.fields.hash
 

app/controllers/user_initials_controller.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class UserInitialsController < ApplicationController
+  before_action :load_user_config
+  authorize_resource :user_config
+
+  def edit; end
+
+  def update
+    file = params[:file]
+
+    return redirect_to settings_profile_index_path, notice: 'Unable to save initials' if file.blank?
+
+    blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
+                                                  filename: file.original_filename,
+                                                  content_type: file.content_type)
+
+    attachment = ActiveStorage::Attachment.create!(
+      blob:,
+      name: 'initials',
+      record: current_user
+    )
+
+    if @user_config.update(value: attachment.uuid)
+      redirect_to settings_profile_index_path, notice: 'Initials has been saved'
+    else
+      redirect_to settings_profile_index_path, notice: 'Unable to save initials'
+    end
+  end
+
+  def destroy
+    @user_config.destroy
+
+    redirect_to settings_profile_index_path, notice: 'Initials has been removed'
+  end
+
+  private
+
+  def load_user_config
+    @user_config =
+      UserConfig.find_or_initialize_by(user: current_user, key: UserConfig::INITIALS_KEY)
+  end
+end

app/controllers/users_controller.rb

@@ -27,6 +27,7 @@ class UsersController < ApplicationController
     if existing_user
       existing_user.archived_at = nil
       existing_user.assign_attributes(user_params)
+      existing_user.account = current_account
 
       @user = existing_user
     end

app/javascript/draw.js

@@ -0,0 +1,113 @@
+import SignaturePad from 'signature_pad'
+import { cropCanvasAndExportToPNG } from './submission_form/crop_canvas'
+
+window.customElements.define('draw-signature', class extends HTMLElement {
+  connectedCallback () {
+    const scale = 3
+
+    this.canvas.width = this.canvas.parentNode.clientWidth * scale
+    this.canvas.height = this.canvas.parentNode.clientHeight * scale
+
+    this.canvas.getContext('2d').scale(scale, scale)
+
+    this.pad = new SignaturePad(this.canvas)
+
+    this.pad.addEventListener('endStroke', () => {
+      this.updateSubmitButtonVisibility()
+    })
+
+    this.clearButton.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.clearSignaturePad()
+    })
+
+    this.form.addEventListener('submit', (e) => {
+      e.preventDefault()
+
+      this.submitButton.disabled = true
+
+      this.submitImage().then((data) => {
+        this.valueInput.value = data.uuid
+
+        return fetch(this.form.action, {
+          method: 'PUT',
+          body: new FormData(this.form)
+        }).then((response) => {
+          this.form.classList.add('hidden')
+          this.success.classList.remove('hidden')
+
+          return response
+        })
+      }).finally(() => {
+        this.submitButton.disabled = false
+      })
+    })
+  }
+
+  clearSignaturePad () {
+    this.pad.clear()
+    this.updateSubmitButtonVisibility()
+  }
+
+  updateSubmitButtonVisibility () {
+    if (this.pad.isEmpty()) {
+      this.submitButton.style.display = 'none'
+      this.placeholderButton.style.display = 'block'
+    } else {
+      this.submitButton.style.display = 'block'
+      this.placeholderButton.style.display = 'none'
+    }
+  }
+
+  async submitImage () {
+    return new Promise((resolve, reject) => {
+      cropCanvasAndExportToPNG(this.canvas, { errorOnTooSmall: true }).then(async (blob) => {
+        const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+        const formData = new FormData()
+
+        formData.append('file', file)
+        formData.append('submitter_slug', this.dataset.slug)
+        formData.append('name', 'attachments')
+
+        return fetch('/api/attachments', {
+          method: 'POST',
+          body: formData
+        }).then((resp) => resp.json()).then((attachment) => {
+          return resolve(attachment)
+        })
+      }).catch((error) => {
+        return reject(error)
+      })
+    })
+  }
+
+  get submitButton () {
+    return this.querySelector('button[type="submit"]')
+  }
+
+  get clearButton () {
+    return this.querySelector('button[aria-label="Clear"]')
+  }
+
+  get placeholderButton () {
+    return this.querySelector('button[disabled]')
+  }
+
+  get canvas () {
+    return this.querySelector('canvas')
+  }
+
+  get valueInput () {
+    return this.querySelector('input[name^="values"]')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+
+  get success () {
+    return this.querySelector('#success')
+  }
+})

app/javascript/elements/download_button.js

@@ -17,13 +17,18 @@ export default targetable(class extends HTMLElement {
 
     this.toggleState()
 
-    fetch(this.dataset.src).then((response) => response.json()).then((urls) => {
+    fetch(this.dataset.src).then(async (response) => {
-      const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+      if (response.ok) {
+        const urls = await response.json()
+        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-      if (isSafariIos && urls.length > 1) {
+        if (isSafariIos && urls.length > 1) {
-        this.downloadSafariIos(urls)
+          this.downloadSafariIos(urls)
+        } else {
+          this.downloadUrls(urls)
+        }
       } else {
-        this.downloadUrls(urls)
+        alert('Failed to download files')
       }
     })
   }

app/javascript/elements/submitter_autocomplete.js

@@ -45,11 +45,7 @@ export default class extends HTMLElement {
       this.currentFetch.then(async (resp) => {
         const items = await resp.json()
 
-        if (q.length < 3) {
+        resolve(items)
-          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
-        } else {
-          resolve(items)
-        }
       }).catch(() => {
         resolve([])
       }).finally(() => {

app/javascript/elements/toggle_submit.js

@@ -0,0 +1,21 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.button.disabled = false
+
+    this.form.addEventListener('submit', () => {
+      this.button.disabled = true
+    })
+  }
+
+  disconnectedCallback () {
+    this.button.disabled = false
+  }
+
+  get button () {
+    return this.querySelector('[type="submit"]')
+  }
+
+  get form () {
+    return this.querySelector('form') || this.closest('form')
+  }
+}

app/javascript/form.js

@@ -2,10 +2,12 @@ import { createApp, reactive } from 'vue'
 
 import Form from './submission_form/form'
 import DownloadButton from './elements/download_button'
+import ToggleSubmit from './elements/toggle_submit'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
 safeRegisterElement('download-button', DownloadButton)
+safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
@@ -22,6 +24,7 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton || '{}'),
+      withQrButton: true,
       completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),

app/javascript/submission_form/completed.vue

@@ -197,13 +197,18 @@ export default {
     download () {
       this.isDownloading = true
 
-      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
+      fetch(this.baseUrl + `/submitters/${this.submitterSlug}/download`).then(async (response) => {
-        const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
+        if (response.ok) {
+          const urls = await response.json()
+          const isSafariIos = /iPhone|iPad|iPod/i.test(navigator.userAgent)
 
-        if (isSafariIos && urls.length > 1) {
+          if (isSafariIos && urls.length > 1) {
-          this.downloadSafariIos(urls)
+            this.downloadSafariIos(urls)
+          } else {
+            this.downloadUrls(urls)
+          }
         } else {
-          this.downloadUrls(urls)
+          alert('Failed to download files')
         }
       })
     },

app/javascript/submission_form/form.vue

@@ -326,6 +326,7 @@
             :attachments-index="attachmentsIndex"
             :button-text="buttonText"
             :with-disclosure="withDisclosure"
+            :with-qr-button="withQrButton"
             :submitter-slug="submitterSlug"
             :show-field-names="showFieldNames"
             @attached="attachments.push($event)"
@@ -384,7 +385,7 @@
         </div>
         <div
           v-if="currentField.type !== 'payment' || submittedValues[currentField.uuid]"
-          :class="withDisclosure && currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
         >
           <button
             id="submit_form_button"
@@ -578,6 +579,11 @@ export default {
       required: false,
       default: true
     },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
@@ -972,14 +978,16 @@ export default {
       this.$nextTick(() => {
         this.recalculateButtonDisabledKey = Math.random()
 
-        if (scrollToArea) {
+        if (!this.isCompleted) {
-          this.scrollIntoField(step[0])
+          if (scrollToArea) {
+            this.scrollIntoField(step[0])
 
-          this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
+            this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
-        }
+          }
 
-        if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
+          if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
-          this.$refs.form.querySelector('input[type="file"]')?.click()
+            this.$refs.form.querySelector('input[type="file"]')?.click()
+          }
         }
       })
     },

app/javascript/submission_form/i18n.js

@@ -5,6 +5,8 @@ const en = {
   esignature_disclosure: 'eSignature Disclosure',
   signature: 'Signature',
   initials: 'Initials',
+  drawn_signature_on_a_touchscreen_device: 'Drawn signature on a touchscreen device',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan the QR code with the camera app to open the form on mobile and draw your signature',
   date: 'Date',
   number: 'Number',
   image: 'Image',
@@ -68,6 +70,8 @@ const en = {
 }
 
 const es = {
+  drawn_signature_on_a_touchscreen_device: 'Firma dibujada en un dispositivo con pantalla táctil',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escanea el código QR con la aplicación de la cámara para abrir el formulario en el móvil y dibujar tu firma',
   by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta el',
   electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
   esignature_disclosure: 'Divulgación de eFirma',
@@ -136,6 +140,8 @@ const es = {
 }
 
 const it = {
+  drawn_signature_on_a_touchscreen_device: 'Firma disegnata su un dispositivo con schermo tattile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scansiona il codice QR con l\'app della fotocamera per aprire il modulo sul cellulare e disegnare la tua firma',
   by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti il',
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
@@ -204,6 +210,8 @@ const it = {
 }
 
 const de = {
+  drawn_signature_on_a_touchscreen_device: 'Gezeichnete Unterschrift auf einem Touchscreen-Gerät',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannen Sie den QR-Code mit der Kamera-App, um das Formular auf dem Handy zu öffnen und Ihre Unterschrift zu zeichnen',
   by_clicking_you_agree_to_the: 'Durch Klicken auf "{button}" stimmen Sie zu, dass Sie die',
   electronic_signature_disclosure: 'Elektronische Unterschriftenoffenlegung',
   esignature_disclosure: 'eSignatur Offenlegung',
@@ -272,6 +280,8 @@ const de = {
 }
 
 const fr = {
+  drawn_signature_on_a_touchscreen_device: 'Signature dessinée sur un appareil à écran tactile',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scannez le code QR avec l\'application de l\'appareil photo pour ouvrir le formulaire sur mobile et dessiner votre signature',
   by_clicking_you_agree_to_the: 'En cliquant sur "{button}", vous acceptez la',
   electronic_signature_disclosure: 'Divulgation de Signature Électronique',
   esignature_disclosure: 'Divulgation de la eSignature',
@@ -340,6 +350,8 @@ const fr = {
 }
 
 const pl = {
+  drawn_signature_on_a_touchscreen_device: 'Podpis odręczny na urządzeniu z ekranem dotykowym',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Zeskanuj kod QR za pomocą aplikacji aparatu, aby otworzyć formularz na telefonie i narysować swój podpis',
   by_clicking_you_agree_to_the: 'Klikając na "{button}", zgadzasz się na',
   electronic_signature_disclosure: 'Ujawnienie Elektronicznej Sygnatury',
   esignature_disclosure: 'Ujawnienie ePodpisu',
@@ -408,6 +420,8 @@ const pl = {
 }
 
 const uk = {
+  drawn_signature_on_a_touchscreen_device: 'Підпис на сенсорному пристрої',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Скануйте QR-код за допомогою програми камери, щоб відкрити форму на мобільному пристрої та намалювати свій підпис',
   by_clicking_you_agree_to_the: 'Натиснувши на "{button}", ви погоджуєтеся з',
   electronic_signature_disclosure: 'Розголошення Електронного Підпису',
   esignature_disclosure: 'Розголошення еПідпису',
@@ -476,6 +490,8 @@ const uk = {
 }
 
 const cs = {
+  drawn_signature_on_a_touchscreen_device: 'Namalovaný podpis na dotykovém zařízení',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Naskenujte QR kód pomocí aplikace fotoaparátu, abyste otevřeli formulář na mobilním zařízení a nakreslili svůj podpis',
   by_clicking_you_agree_to_the: 'Kliknutím na "{button}" souhlasíte s',
   electronic_signature_disclosure: 'Zveřejněním Elektronického Podpisu',
   esignature_disclosure: 'Zveřejnění ePodpisu',
@@ -544,6 +560,8 @@ const cs = {
 }
 
 const pt = {
+  drawn_signature_on_a_touchscreen_device: 'Assinatura desenhada em um dispositivo com tela sensível ao toque',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Escaneie o código QR com o aplicativo da câmera para abrir o formulário no celular e desenhar sua assinatura',
   by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com o',
   electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
   esignature_disclosure: 'Divulgação da eAssinatura',
@@ -612,6 +630,8 @@ const pt = {
 }
 
 const he = {
+  drawn_signature_on_a_touchscreen_device: 'חתימה שנוצרה במכשיר עם מסך מגע',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'סרוק את קוד ה-QR באמצעות אפליקציית המצלמה כדי לפתוח את הטופס במובייל ולצייר את החתימה שלך',
   by_clicking_you_agree_to_the: 'על ידי לחיצה על "{button}", אתה מסכים ל',
   electronic_signature_disclosure: 'חשיפת חתימה אלקטרונית',
   esignature_disclosure: 'חשיפת ה-eחתימה',
@@ -681,6 +701,8 @@ const he = {
 }
 
 const nl = {
+  drawn_signature_on_a_touchscreen_device: 'Getekende handtekening op een apparaat met een touchscreen',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'Scan de QR-code met de camera-app om het formulier op mobiel te openen en uw handtekening te tekenen',
   by_clicking_you_agree_to_the: 'Door op "{button}" te klikken, gaat u akkoord met de',
   electronic_signature_disclosure: 'Openbaarmaking van Elektronische Handtekening',
   esignature_disclosure: 'Openbaarmaking van eHandtekening',
@@ -750,6 +772,8 @@ const nl = {
 }
 
 const ar = {
+  drawn_signature_on_a_touchscreen_device: 'توقيع مرسوم على جهاز بشاشة تعمل باللمس',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: 'امسح رمز الاستجابة السريعة باستخدام تطبيق الكاميرا لفتح النموذج على الهاتف المحمول ورسم توقيعك',
   by_clicking_you_agree_to_the: 'بالنقر فوق "{button}"، أنت توافق على',
   electronic_signature_disclosure: 'كشف التوقيع الإلكتروني',
   esignature_disclosure: 'كشف التوقيع الإلكتروني',
@@ -819,6 +843,8 @@ const ar = {
 }
 
 const ko = {
+  drawn_signature_on_a_touchscreen_device: '터치스크린 장치에서 그린 서명',
+  scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature: '카메라 앱으로 QR 코드를 스캔하여 모바일에서 양식을 열고 서명을 그리세요',
   by_clicking_you_agree_to_the: '"{button}"를 클릭함으로써, 다음에 동의하게 됩니다',
   electronic_signature_disclosure: '전자 서명 공개',
   esignature_disclosure: '전자 서명 공개',

app/javascript/submission_form/signature_step.vue

@@ -28,7 +28,7 @@
             id="type_text_button"
             href="#"
             class="btn btn-outline btn-sm font-medium"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconSignature :width="16" />
             <span class="hidden sm:inline">
@@ -45,7 +45,7 @@
             id="type_text_button"
             href="#"
             class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap"
-            @click.prevent="toggleTextInput"
+            @click.prevent="[toggleTextInput(), hideQr()]"
           >
             <IconTextSize :width="16" />
             <span class="hidden sm:inline">
@@ -87,7 +87,7 @@
           v-else
           href="#"
           class="btn btn-outline btn-sm font-medium"
-          @click.prevent="clear"
+          @click.prevent="[clear(), hideQr()]"
         >
           <IconReload :width="16" />
           {{ t('clear') }}
@@ -123,12 +123,56 @@
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
       class="mx-auto bg-white border border-base-300 rounded max-h-72"
     >
-    <canvas
+    <div class="relative">
-      v-show="!modelValue && !computedPreviousValue"
+      <div
-      ref="canvas"
+        v-if="withQrButton"
-      style="padding: 1px; 0"
+        class="absolute top-1.5 right-1.5 tooltip hidden md:inline"
-      class="bg-white border border-base-300 rounded-2xl w-full"
+        :data-tip="t('drawn_signature_on_a_touchscreen_device')"
-    />
+      >
+        <a
+          v-if="!isShowQr && !isSignatureStarted && !isTextSignature && !modelValue"
+          href="#"
+          class="btn btn-sm btn-circle btn-ghost"
+          @click.prevent="showQr"
+        >
+          <IconQrcode />
+        </a>
+      </div>
+      <canvas
+        v-show="!modelValue && !computedPreviousValue"
+        ref="canvas"
+        style="padding: 1px; 0"
+        class="bg-white border border-base-300 rounded-2xl w-full"
+      />
+      <div
+        v-show="isShowQr"
+        class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
+      >
+        <div
+          class="absolute top-1.5 right-1.5 tooltip"
+        >
+          <a
+            href="#"
+            class="btn btn-sm btn-circle btn-normal btn-outline"
+            @click.prevent="hideQr"
+          >
+            <IconX />
+          </a>
+        </div>
+        <div class="flex items-center justify-center w-full h-full p-4">
+          <div
+            v-if="withQrButton"
+            ref="qr"
+            class="bg-white p-4 rounded-xl h-full"
+          >
+            <canvas
+              ref="qrCanvas"
+              class="h-full"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
     <input
       v-if="isTextSignature"
       id="signature_text_input"
@@ -140,7 +184,14 @@
       @input="updateWrittenSignature"
     >
     <div
-      v-if="withDisclosure"
+      v-if="isShowQr"
+      dir="auto"
+      class="text-base-content/60 text-xs text-center w-full mt-1"
+    >
+      {{ t('scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature') }}
+    </div>
+    <div
+      v-else-if="withDisclosure"
       dir="auto"
       class="text-base-content/60 text-xs text-center w-full mt-1"
     >
@@ -156,11 +207,15 @@
         </span>
       </a>
     </div>
+    <div
+      v-else
+      class="mt-5 md:mt-7"
+    />
   </div>
 </template>
 
 <script>
-import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2, IconQrcode, IconX } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
@@ -176,7 +231,9 @@ export default {
     AppearsOn,
     IconReload,
     IconCamera,
+    IconQrcode,
     MarkdownContent,
+    IconX,
     IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
@@ -201,6 +258,11 @@ export default {
       required: false,
       default: false
     },
+    withQrButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     buttonText: {
       type: String,
       required: false,
@@ -231,6 +293,7 @@ export default {
   data () {
     return {
       isSignatureStarted: !!this.previousValue,
+      isShowQr: false,
       isUsePreviousValue: true,
       isTextSignature: this.field.preferences?.format === 'typed',
       uploadImageInputKey: Math.random().toString()
@@ -253,6 +316,18 @@ export default {
 
         this.$refs.canvas.getContext('2d').scale(scale, scale)
       }
+
+      if (this.withQrButton) {
+        import('qr-creator').then(({ default: Qr }) => {
+          Qr.render({
+            text: `${document.location.origin}/p/${this.submitterSlug}?f=${this.field.uuid.split('-')[0]}`,
+            radius: 0.0,
+            ecLevel: 'H',
+            background: null,
+            size: 132
+          }, this.$refs.qrCanvas)
+        })
+      }
     })
 
     if (this.$refs.canvas) {
@@ -282,6 +357,7 @@ export default {
   },
   beforeUnmount () {
     this.intersectionObserver?.disconnect()
+    this.stopCheckSignature()
   },
   methods: {
     remove () {
@@ -303,6 +379,41 @@ export default {
         })
       }
     },
+    showQr () {
+      this.isShowQr = true
+
+      this.startCheckSignature()
+    },
+    hideQr () {
+      this.isShowQr = false
+
+      this.stopCheckSignature()
+    },
+    startCheckSignature () {
+      const after = JSON.stringify(new Date())
+
+      this.checkSignatureInterval = setInterval(() => {
+        this.checkSignature({ after })
+      }, 2000)
+    },
+    stopCheckSignature () {
+      if (this.checkSignatureInterval) {
+        clearInterval(this.checkSignatureInterval)
+      }
+    },
+    checkSignature (params = {}) {
+      return fetch(this.baseUrl + '/s/' + this.submitterSlug + '/values?field_uuid=' + this.field.uuid + '&after=' + params.after, {
+        method: 'GET'
+      }).then(async (resp) => {
+        const { attachment } = await resp.json()
+
+        if (attachment?.uuid) {
+          this.$emit('attached', attachment)
+          this.$emit('update:model-value', attachment.uuid)
+          this.hideQr()
+        }
+      })
+    },
     clear () {
       this.pad.clear()
 

app/jobs/send_form_completed_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormCompletedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_form_started_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormStartedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendFormViewedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_submission_archived_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendSubmissionArchivedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_submission_created_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendSubmissionCreatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_template_created_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendTemplateCreatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/jobs/send_template_updated_webhook_request_job.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class SendTemplateUpdatedWebhookRequestJob < ApplicationJob
+  queue_as :webhooks
+
   USER_AGENT = 'DocuSeal.co Webhook'
 
   MAX_ATTEMPTS = 10

app/models/user.rb

@@ -50,6 +50,7 @@ class User < ApplicationRecord
   EMAIL_REGEXP = /[^@;,<>\s]+@[^@;,<>\s]+/
 
   has_one_attached :signature
+  has_one_attached :initials
 
   belongs_to :account
   has_one :access_token, dependent: :destroy

app/models/user_config.rb

@@ -22,6 +22,7 @@
 #
 class UserConfig < ApplicationRecord
   SIGNATURE_KEY = 'signature'
+  INITIALS_KEY = 'initials'
   RECEIVE_COMPLETED_EMAIL = 'receive_completed_email'
 
   belongs_to :user

app/views/layouts/_head_tags.html.erb

@@ -1,4 +1,4 @@
 <title>
-  DocuSeal | Open Source Document Filling and Signing
+  <%= content_for(:html_title) || 'DocuSeal | Open Source Document Signing' %>
 </title>
 <%= render 'shared/meta' %>

app/views/profile/index.html.erb

@@ -31,6 +31,15 @@
       </div>
     <% end %>
     <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">Update Signature</a>
+    <p class="text-2xl font-bold mt-8 mb-4">Initials</p>
+    <% initials = UserConfigs.load_initials(current_user) %>
+    <% if initials %>
+      <div class="flex justify-center mb-4 relative">
+        <%= button_to button_title(title: 'Remove', disabled_with: 'Removing'), user_initials_path, method: :delete, class: 'right-0 top-0 absolute link' %>
+        <img src="<%= initials.url %>" style="max-height: 200px; width: auto" width="<%= initials.metadata['width'] %>" height="<%= initials.metadata['height'] %>">
+      </div>
+    <% end %>
+    <a href="<%= edit_user_initials_path %>" data-turbo-frame="modal" class="base-button w-full">Update Initials</a>
     <% if true_user == current_user && !current_account.testing? %>
       <p class="text-2xl font-bold mt-8 mb-4">Change Password</p>
       <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>

app/views/shared/_meta.html.erb

@@ -1,21 +1,25 @@
 <% if Docuseal.demo? || (request.path != '/' && !devise_controller?) %>
   <meta name="robots" content="noindex">
 <% end %>
-<meta name="description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
+<% title = content_for(:html_title) || 'DocuSeal | Open Source Document Filling and Signing' %>
-<meta property="og:title" content="DocuSeal | Open Source Document Filling and Signing">
+<% description = content_for(:html_description) || 'Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.' %>
-<meta property="og:description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
+<meta name="description" content="<%= description %>">
+<meta property="og:title" content="<%= title %>">
+<meta property="og:description" content="<%= description %>">
 <meta property="og:type" content="website">
 <meta property="og:url" content="<%= root_url %>">
 <meta property="og:site_name" content="DocuSeal">
-<meta property="og:image" content="<%= image_pack_url('images/preview.png') %>">
+<% unless content_for(:disable_image_preview) %>
-<meta property="og:image:width" content="800">
+  <meta property="og:image" content="<%= image_pack_url('images/preview.png') %>">
-<meta property="og:image:height" content="800">
+  <meta property="og:image:width" content="800">
-<meta name="twitter:image" content="<%= image_pack_url('images/preview.png') %>">
+  <meta property="og:image:height" content="800">
+  <meta name="twitter:image" content="<%= image_pack_url('images/preview.png') %>">
+<% end %>
 <meta name="twitter:card" content="summary">
 <meta name="twitter:creator" content="@docusealco">
 <meta name="twitter:site" content="@docusealco">
-<meta name="twitter:title" content="DocuSeal | Open Source Document Filling and Signing">
+<meta name="twitter:title" content="<%= title %>">
-<meta name="twitter:description" content="Open source, self-hosted tool to streamline document filling and signing. Create custom PDF forms to complete and sign with an easy to use online tool.">
+<meta name="twitter:description" content="<%= description %>">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

app/views/start_form/completed.html.erb

@@ -20,14 +20,14 @@
       <%= t('form_has_been_submitted_already') %>
     </div>
     <% if Docuseal.multitenant? || Accounts.can_send_emails?(@submitter.account) %>
-      <div>
+      <toggle-submit class="block">
-        <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
+        <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, class: 'base-button w-full' %>
-      </div>
+      </toggle-submit>
     <% end %>
     <% if @template.submitters.to_a.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false %>
-      <div>
+      <toggle-submit class="block">
-        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, class: 'white-button w-full' %>
-      </div>
+      </toggle-submit>
     <% end %>
   </div>
 </div>

app/views/start_form/show.html.erb

@@ -1,3 +1,5 @@
+<% content_for(:html_title, "#{@template.name} | DocuSeal") %>
+<% content_for(:html_description, "#{@template.account.name} has invited you to fill and sign documents online effortlessly with a secure, fast, and user-friendly digital document signing solution.") %>
 <div class="max-w-md mx-auto px-2 mt-12 mb-4">
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
@@ -24,15 +26,15 @@
       </div>
     </div>
     <% unless @template.archived_at? %>
-      <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
+      <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4' } do |f| %>
         <div dir="auto" class="form-control !mt-0">
           <%= f.label :email, t('email'), class: 'label' %>
           <%= f.email_field :email, value: current_user&.email || params[:email] || @submitter.email, required: true, class: 'base-input', placeholder: t('provide_your_email_to_start') %>
           <%= @error_message %>
         </div>
-        <div dir="auto" class="form-control">
+        <toggle-submit dir="auto" class="form-control">
           <%= f.button button_title(title: t('start'), disabled_with: t('starting')), class: 'base-button' %>
-        </div>
+        </toggle-submit>
       <% end %>
     <% end %>
   </div>

app/views/submissions/show.html.erb

@@ -1,3 +1,6 @@
+<% if params[:controller] == 'submissions_preview' %>
+  <%= render 'submissions/preview_tags' %>
+<% end %>
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
     <a href="<%= signed_in? && @submission.account_id == current_account&.id ? template_path(@submission.template) : '/' %>" class="flex items-center space-x-3 py-1">

app/views/submissions_preview/completed.html.erb

@@ -1,3 +1,4 @@
+<%= render 'submissions/preview_tags' %>
 <div class="max-w-md mx-auto px-2 mt-12 mb-4">
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
@@ -21,15 +22,15 @@
       </div>
     </div>
     <% if Docuseal.multitenant? || Accounts.can_send_emails?(@submission.account) %>
-      <%= form_for '', url: send_submission_email_index_path, method: :post, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
+      <%= form_for '', url: send_submission_email_index_path, method: :post, html: { class: 'space-y-4' } do |f| %>
         <div dir="auto" class="form-control !mt-0">
           <%= f.hidden_field :submission_slug, value: @submission.slug %>
           <%= f.label :email, t('email'), class: 'label' %>
           <%= f.email_field :email, value: current_user&.email || params[:email], required: true, class: 'base-input', placeholder: t('send_copy_to_email') %>
         </div>
-        <div dir="auto" class="form-control">
+        <toggle-submit dir="auto" class="form-control">
           <%= f.button button_title(title: t('send_copy_to_email'), disabled_with: t('starting')), class: 'base-button' %>
-        </div>
+        </toggle-submit>
       <% end %>
       <% if Docuseal.multitenant? %>
         <div class="divider uppercase"><%= t('or') %></div>

app/views/submit_form/completed.html.erb

@@ -18,7 +18,9 @@
     </div>
     <div>
       <% if (Docuseal.multitenant? || Accounts.can_send_emails?(@submitter.account)) && @submitter.email.present? %>
-        <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+        <toggle-submit>
+          <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, class: 'white-button w-full' %>
+        </toggle-submit>
         <% if @submitter.submission.template.submitters.size != 1 %>
           <div class="divider uppercase"><%= t('or') %></div>
         <% else %>
@@ -40,9 +42,9 @@
     </div>
     <% if @submitter.submission.template.submitters.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false && !@submitter.template.archived_at? %>
       <div class="divider uppercase"><%= t('or') %></div>
-      <div>
+      <toggle-submit class="block">
-        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+        <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: @submitter.slug }, method: :put, class: 'white-button w-full' %>
-      </div>
+      </toggle-submit>
     <% end %>
   </div>
 </div>

app/views/submit_form/show.html.erb

@@ -1,3 +1,5 @@
+<% content_for(:html_title, "#{@submitter.submission.template.name} | DocuSeal") %>
+<% content_for(:html_description, "#{@submitter.account.name} has invited you to fill and sign documents online effortlessly with a secure, fast, and user-friendly digital document signing solution.") %>
 <% fields_index = Templates.build_field_areas_index(@submitter.submission.template_fields || @submitter.submission.template.fields) %>
 <% values = @submitter.submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) } %>
 <% attachments_index = ActiveStorage::Attachment.where(record: @submitter.submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %>

app/views/submit_form_draw_signature/show.html.erb

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html data-theme="docuseal" lang="en">
+  <head>
+    <%= render 'layouts/head_tags' %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
+      <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
+      <%= javascript_pack_tag 'rollbar', 'draw', defer: true %>
+    <% else %>
+      <%= javascript_pack_tag 'draw', defer: true %>
+    <% end %>
+    <%= stylesheet_pack_tag 'form', media: 'all' %>
+    <%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
+  </head>
+  <body>
+    <draw-signature data-slug="<%= params[:slug] %>" class="flex items-center h-screen p-2 justify-center">
+      <%= form_for '', url: submit_form_path(params[:slug]), html: { style: 'max-width: 900px; width: 100%; margin-bottom: 120px' }, method: :put do |f| %>
+        <input value="" type="hidden" name="values[<%= (@submitter.submission.template_fields || @submitter.template.fields).find { |f| f['type'] == 'signature' && f['uuid'].starts_with?(params[:f]) }['uuid'] %>]">
+        <div class="font-semibold text-4xl text-center w-full mb-2">
+          Draw Signature
+        </div>
+        <div class="w-full bg-white rounded-2xl border relative" style="height: 300px">
+          <canvas class="w-full"></canvas>
+          <button aria-label="Clear" class="btn btn-ghost btn-sm font-medium top-0 right-0 absolute mt-1 mr-1">
+            <%= svg_icon('reload', class: 'w-5 h-5') %>
+            <span class="inline">Clear</span>
+          </button>
+        </div>
+        <div class="mt-4">
+          <button disabled class="base-button w-full">
+            Submit
+          </button>
+          <%= f.button button_title(title: 'Submit'), class: 'base-button w-full', style: 'display: none' %>
+        </div>
+      <% end %>
+      <div id="success" class="text-center p-2 hidden" style="margin-bottom: 100px">
+        <div class="flex items-center space-x-1 items-center justify-center text-2xl font-semibold mb-2">
+          <%= svg_icon('circle_check', class: 'text-green-600') %>
+          <span>
+            Signature Uploaded
+          </span>
+        </div>
+        <div>
+          Return back to your desktop device to complete the form or <a class="link" href="<%= submit_form_path(params[:slug]) %>">continue on mobile</a>
+        </div>
+      </div>
+    </draw-signature>
+  </body>
+</html>

app/views/user_initials/edit.html.erb

@@ -0,0 +1,55 @@
+<%= render 'shared/turbo_modal', title: 'Update Initials' do %>
+  <% options = [%w[Draw draw], %w[Upload upload]] %>
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
+    <div class="join">
+      <% options.each_with_index do |(label, value), index| %>
+        <span>
+          <%= radio_button_tag 'option', value, value == 'draw', class: 'peer hidden', data: { action: 'change:toggle-visible#trigger' } %>
+          <label for="option_<%= value %>" class="<%= '!rounded-s-full' if index.zero? %> btn btn-focus btn-sm join-item md:w-28 peer-checked:btn-active normal-case">
+            <%= label %>
+          </label>
+        </span>
+      <% end %>
+    </div>
+  </toggle-visible>
+  <div id="draw" class="mt-3">
+    <%= form_for @user_config, url: user_initials_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
+      <signature-form class="relative block">
+        <a class="absolute top-1 right-1 link text-sm" data-target="signature-form.clear" href="#">Clear</a>
+        <canvas data-target="signature-form.canvas" class="bg-white border border-base-300 rounded"></canvas>
+        <input name="file" class="hidden" data-target="signature-form.input" type="file" accept="image/png,image/jpeg,image/jpg">
+        <div class="form-control mt-4">
+          <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button', data: { target: 'signature-form.button' } %>
+        </div>
+      </signature-form>
+    <% end %>
+  </div>
+  <div id="upload" class="hidden mt-3">
+    <%= form_for @user_config, url: user_initials_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
+      <file-dropzone data-submit-on-upload="true" class="w-full">
+        <label for="file" class="w-full block h-32 relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed">
+          <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+            <div class="flex flex-col items-center">
+              <span data-target="file-dropzone.icon">
+                <%= svg_icon('cloud_upload', class: 'w-10 h-10') %>
+              </span>
+              <span data-target="file-dropzone.loading" class="hidden">
+                <%= svg_icon('loader', class: 'w-10 h-10 animate-spin') %>
+              </span>
+              <div class="font-medium mb-1">
+                Upload Initials
+              </div>
+              <div class="text-xs">
+                <span class="font-medium">Click to upload</span> or drag and drop
+              </div>
+            </div>
+            <input id="file" name="file" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="image/png,image/jpeg,image/jpg">
+          </div>
+        </label>
+      </file-dropzone>
+      <div class="form-control mt-4">
+        <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button' %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

app/views/users/index.html.erb

@@ -5,9 +5,7 @@
       <h1 class="text-4xl font-bold"><%= params[:status].to_s.titleize %> Users</h1>
       <div class="flex items-center space-x-4">
         <% if can?(:create, User.new(account: current_account)) %>
-          <% if Docuseal.multitenant? %>
+          <%= render 'users/extra_buttons' %>
-            <%= render 'users/extra_buttons' %>
-          <% end %>
           <% if content_for(:add_user_button) %>
             <%= content_for(:add_user_button) %>
           <% else %>
@@ -57,7 +55,7 @@
                 <%= user.last_sign_in_at ? l(user.last_sign_in_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) : '-' %>
               </td>
               <td class="flex items-center space-x-2 justify-end">
-                <% if can?(:update, user) %>
+                <% if can?(:update, user) && user.archived_at.blank? %>
                   <%= link_to edit_user_path(user), class: 'btn btn-outline btn-xs', title: 'Edit', data: { turbo_frame: 'modal' } do %>
                     Edit
                   <% end %>
@@ -68,7 +66,7 @@
                   <% end %>
                 <% end %>
                 <% if params[:status].present? && can?(:manage, user) && user != current_user %>
-                  <%= button_to user_path(user), method: :put, params: { user: { archived_at: nil } }, class: 'btn btn-outline btn-secondary btn-xs', title: 'Unarchive', data: { turbo_confirm: 'Are you sure?' } do %>
+                  <%= button_to user_path(user), method: :put, params: { user: { archived_at: nil } }, class: 'btn btn-outline btn-xs', title: 'Unarchive', data: { turbo_confirm: 'Are you sure?' } do %>
                     Unarchive
                   <% end %>
                 <% end %>

config/application.rb

@@ -11,6 +11,7 @@ require 'active_job/railtie'
 require 'rails/health_controller'
 
 require_relative '../lib/api_path_consider_json_middleware'
+require_relative '../lib/normalize_client_ip_middleware'
 
 Bundler.require(*Rails.groups)
 
@@ -32,6 +33,7 @@ module DocuSeal
     config.action_view.frozen_string_literal = true
 
     config.middleware.insert_before ActionDispatch::Static, Rack::Deflater
+    config.middleware.insert_before ActionDispatch::Static, NormalizeClientIpMiddleware
     config.middleware.insert_before ActionDispatch::Static, ApiPathConsiderJsonMiddleware
 
     config.generators.system_tests = nil

config/environments/development.rb

@@ -2,6 +2,8 @@
 
 require 'active_support/core_ext/integer/time'
 
+Rails.backtrace_cleaner.remove_silencers!
+
 Rails.application.configure do
   config.after_initialize do
     Bullet.enable        = true

config/environments/production.rb

@@ -143,6 +143,7 @@ Rails.application.configure do
           slug: (params[:slug] ||
                  params[:submitter_slug] ||
                  params[:submission_slug] ||
+                 params[:submit_form_slug] ||
                  params[:template_slug]).to_s.last(5)
         }.compact_blank,
         host: controller.request.host,

config/environments/test.rb

@@ -16,7 +16,7 @@ Rails.application.configure do
   # Eager loading loads your whole application. When running a single test locally,
   # this probably isn't necessary. It's a good idea to do in a continuous integration
   # system, or in some way before deploying your code.
-  config.eager_load = ENV['CI'].present?
+  config.eager_load = true
 
   # Configure public file server for tests with Cache-Control for performance.
   config.public_file_server.enabled = true

config/routes.rb

@@ -50,6 +50,7 @@ Rails.application.routes.draw do
   resources :enquiries, only: %i[create]
   resources :users, only: %i[new create edit update destroy]
   resource :user_signature, only: %i[edit update destroy]
+  resource :user_initials, only: %i[edit update destroy]
   resources :submissions_archived, only: %i[index], path: 'submissions/archived'
   resources :submissions, only: %i[index], controller: 'submissions_dashboard'
   resources :submissions, only: %i[show destroy]
@@ -105,9 +106,12 @@ Rails.application.routes.draw do
   end
 
   resources :submit_form, only: %i[show update], path: 's', param: 'slug' do
+    resources :values, only: %i[index], controller: 'submit_form_values'
     get :completed
   end
 
+  resources :submit_form_draw_signature, only: %i[show], path: 'p', param: 'slug'
+
   resources :submissions_preview, only: %i[show], path: 'e', param: 'slug' do
     get :completed
   end

config/sidekiq.yml

@@ -1,5 +1,6 @@
 queues:
   - [default, 1]
+  - [webhooks, 1]
   - [mailers, 1]
   - [recurrent, 1]
   - [rollbar, 1]

config/webpack/webpack.config.js

@@ -21,6 +21,10 @@ const configs = generateWebpackConfig({
           test: /\/node_modules\//,
           chunks: chunk => chunk.name === 'application'
         },
+        drawVendors: {
+          test: /\/node_modules\//,
+          chunks: chunk => chunk.name === 'draw'
+        },
         formVendors: {
           test: /\/node_modules\//,
           chunks: chunk => chunk.name === 'form'

lib/normalize_client_ip_middleware.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class NormalizeClientIpMiddleware
+  def initialize(app)
+    @app = app
+  end
+
+  def call(env)
+    if env['HTTP_CLIENT_IP'].present? && env['HTTP_X_CLIENT_IP'].present? &&
+       env['HTTP_CLIENT_IP'].starts_with?("#{env['HTTP_X_CLIENT_IP']}:")
+      env['HTTP_CLIENT_IP'] = env['HTTP_X_CLIENT_IP']
+    end
+
+    @app.call(env)
+  end
+end

lib/submissions/serialize_for_api.rb

@@ -3,7 +3,7 @@
 module Submissions
   module SerializeForApi
     SERIALIZE_PARAMS = {
-      only: %i[id source submitters_order created_at updated_at archived_at],
+      only: %i[id slug source submitters_order created_at updated_at archived_at],
       methods: %i[audit_log_url],
       include: {
         submitters: { only: %i[id slug uuid name email phone

lib/submitters/maybe_update_default_values.rb

@@ -36,6 +36,14 @@ module Submitters
         user.first_name
       elsif field_name == 'last name'
         user.last_name
+      elsif field['type'] == 'initials' && (initials = UserConfigs.load_initials(user))
+        attachment = ActiveStorage::Attachment.find_or_create_by!(
+          blob_id: initials.blob_id,
+          name: 'attachments',
+          record: submitter
+        )
+
+        attachment.uuid
       elsif field['type'] == 'signature' && (signature = UserConfigs.load_signature(user))
         attachment = ActiveStorage::Attachment.find_or_create_by!(
           blob_id: signature.blob_id,

lib/user_configs.rb

@@ -10,4 +10,12 @@ module UserConfigs
 
     ActiveStorage::Attachment.find_by(uuid:, record: user, name: 'signature') if uuid.present?
   end
+
+  def load_initials(user)
+    return if user.blank?
+
+    uuid = user.user_configs.find_or_initialize_by(key: UserConfig::INITIALS_KEY).value
+
+    ActiveStorage::Attachment.find_by(uuid:, record: user, name: 'initials') if uuid.present?
+  end
 end

package.json

@@ -25,6 +25,7 @@
     "postcss": "^8.4.23",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.0",
+    "qr-creator": "^1.0.0",
     "rollbar": "^2.26.4",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",

yarn.lock

@@ -4592,6 +4592,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+qr-creator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/qr-creator/-/qr-creator-1.0.0.tgz#f350a8f0b5be02bd1fc1ef133a038a06ef8bc5ef"
+  integrity sha512-C0cqfbS1P5hfqN4NhsYsUXePlk9BO+a45bAQ3xLYjBL3bOIFzoVEjs79Fado9u9BPBD3buHi3+vY+C8tHh4qMQ==
+
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"