Merge from docusealco/wip

This reverts commit 56da326709.

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -37,7 +37,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -89,7 +89,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Cache gems
         uses: actions/cache@v4
         with:
@@ -104,7 +104,7 @@ jobs:
           bundle install --jobs 4 --retry 4
           yarn install
           sudo apt-get update
-          sudo apt-get install libvips
+          sudo apt-get install libvips liblept5
       - name: Run Brakeman
         run: bundle exec brakeman -q --exit-on-warn
 
@@ -132,7 +132,7 @@ jobs:
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 4.0.1
+          ruby-version: 4.0.5
       - name: Set up Node
         uses: actions/setup-node@v1
         with:
@@ -162,8 +162,8 @@ jobs:
           bundle install --jobs 4 --retry 4
           yarn install
           sudo apt-get update
-          sudo apt-get install -y libvips
-          wget -O pdfium-linux.tgz "https://github.com/docusealco/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz"
+          sudo apt-get install -y libvips liblept5
+          wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz"
           sudo tar -xzf pdfium-linux.tgz --strip-components=1 -C /usr/lib lib/libpdfium.so
           rm -f pdfium-linux.tgz
       - name: Run

.github/workflows/docker.yml

@@ -30,7 +30,9 @@ jobs:
       uses: docker/setup-buildx-action@v3
 
     - name: Create .version file
-      run: echo ${{ github.ref_name }} > .version
+      env:
+        REF_NAME: ${{ github.ref_name }}
+      run: echo "$REF_NAME" > .version
 
     - name: Login to Docker Hub
       uses: docker/login-action@v3

Dockerfile

@@ -1,19 +1,23 @@
-FROM ruby:4.0.1-alpine AS download
+FROM ruby:4.0.5-alpine AS download
 
 WORKDIR /fonts
 
-RUN apk --no-cache add wget && \
+RUN apk --no-cache add wget unzip && \
     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://raw.githubusercontent.com/impallari/DancingScript/master/OFL.txt && \
     wget https://raw.githubusercontent.com/notofonts/noto-fonts/refs/heads/main/LICENSE && \
     wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
-    wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-musl-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
+    wget -O pdfium-linux.zip "https://github.com/docusealco/pdfium-binaries/releases/download/20260613/pdfium-musl-$(uname -m).zip" && \
+    case "$(uname -m)" in \
+      x86_64)  echo "2c953ff72ee2dda07e7fc577e25841cc3d6464468a7c5adfaea574efcbc3b90b  pdfium-linux.zip" ;; \
+      aarch64) echo "23bbe287d2753fdb05741c7660647eb0ef0d2e4da2ce0722bfa9d9d455bd64e2  pdfium-linux.zip" ;; \
+    esac | sha256sum -c - && \
     mkdir -p /pdfium-linux && \
-    tar -xzf pdfium-linux.tgz -C /pdfium-linux
+    unzip -q pdfium-linux.zip -d /pdfium-linux
 
-FROM ruby:4.0.1-alpine AS webpack
+FROM ruby:4.0.5-alpine AS webpack
 
 ENV RAILS_ENV=production
 ENV NODE_ENV=production
@@ -40,7 +44,7 @@ COPY ./app/views ./app/views
 
 RUN echo "gem 'shakapacker'" > Gemfile && ./bin/shakapacker
 
-FROM ruby:4.0.1-alpine AS app
+FROM ruby:4.0.5-alpine AS app
 
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
@@ -48,7 +52,8 @@ ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
 
 WORKDIR /app
 
-RUN apk add --no-cache libpq vips redis vips-heif onnxruntime
+RUN apk add --no-cache libpq vips redis onnxruntime leptonica && \
+    rm -f /usr/bin/onnx_test_runner /usr/bin/onnxruntime_test
 
 RUN addgroup -g 2000 docuseal && adduser -u 2000 -G docuseal -s /bin/sh -D -h /home/docuseal docuseal
 
@@ -81,7 +86,7 @@ COPY --chown=docuseal:docuseal .version ./public/version
 
 COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts/LICENSE /fonts/
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
-COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
+COPY --from=download /pdfium-linux/licenses/ /usr/lib/libpdfium-licenses/
 COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
 COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs
 
@@ -94,6 +99,7 @@ WORKDIR /data/docuseal
 ENV HOME=/home/docuseal
 ENV WORKDIR=/data/docuseal
 ENV VIPS_MAX_COORD=17000
+ENV VIPS_BLOCK_UNTRUSTED=1
 
 EXPOSE 3000
 CMD ["/app/bin/bundle", "exec", "puma", "-C", "/app/config/puma.rb", "--dir", "/app"]

Gemfile

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-ruby '4.0.1'
+ruby '4.0.5'
 
 gem 'addressable'
 gem 'arabic-letter-connector', require: false
@@ -21,11 +21,9 @@ gem 'faraday'
 gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
-gem 'image_processing'
 gem 'jwt', require: false
 gem 'lograge'
 gem 'numo-narray-alt', require: false
-gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false

Gemfile.lock

@@ -116,7 +116,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (4.1.0)
+    bigdecimal (4.1.2)
     bindex (0.8.1)
     bootsnap (1.23.0)
       msgpack (~> 1.2)
@@ -144,12 +144,12 @@ GEM
     cldr-plurals-runtime-rb (1.1.0)
     cmdparse (3.0.7)
     coderay (1.1.3)
-    concurrent-ruby (1.3.6)
+    concurrent-ruby (1.3.7)
     connection_pool (3.0.2)
     crack (1.0.1)
       bigdecimal
       rexml
-    crass (1.0.6)
+    crass (1.0.7)
     csv (3.3.5)
     csv-safe (3.3.1)
       csv (~> 3.0)
@@ -161,7 +161,7 @@ GEM
       irb (~> 1.10)
       reline (>= 0.3.8)
     declarative (0.0.20)
-    devise (5.0.3)
+    devise (5.0.4)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 7.0)
@@ -195,13 +195,13 @@ GEM
       railties (>= 6.1.0)
     faker (3.6.1)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.14.3)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
     faraday-follow_redirects (0.5.0)
       faraday (>= 1, < 3)
-    faraday-net_http (3.4.2)
+    faraday-net_http (3.4.4)
       net-http (~> 0.5)
     ferrum (0.17.2)
       addressable (~> 2.5)
@@ -257,25 +257,22 @@ GEM
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
     hashdiff (1.2.1)
-    hexapdf (1.6.0)
+    hexapdf (1.7.0)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
       strscan (>= 3.1.2)
     i18n (1.14.8)
       concurrent-ruby (~> 1.0)
-    image_processing (1.14.0)
-      mini_magick (>= 4.9.5, < 6)
-      ruby-vips (>= 2.0.17, < 3)
     io-console (0.8.2)
-    irb (1.17.0)
+    irb (1.18.0)
       pp (>= 0.6.0)
       prism (>= 1.3.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.19.3)
-    jwt (3.1.2)
+    json (2.19.9)
+    jwt (3.2.0)
       base64
     language_server-protocol (3.17.0.5)
     launchy (3.1.1)
@@ -296,7 +293,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.25.1)
+    loofah (2.25.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.9.0)
@@ -308,17 +305,15 @@ GEM
     marcel (1.1.0)
     matrix (0.4.3)
     method_source (1.1.0)
-    mini_magick (5.3.1)
-      logger
     mini_mime (1.1.5)
-    minitest (6.0.3)
+    minitest (6.0.6)
       drb (~> 2.0)
       prism (~> 1.5)
     msgpack (1.8.0)
     multi_json (1.19.1)
     net-http (0.9.1)
       uri (>= 0.11.1)
-    net-imap (0.6.3)
+    net-imap (0.6.4.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -328,20 +323,17 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.5)
-    nokogiri (1.19.2-aarch64-linux-gnu)
+    nokogiri (1.19.4-aarch64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-aarch64-linux-musl)
+    nokogiri (1.19.4-aarch64-linux-musl)
       racc (~> 1.4)
-    nokogiri (1.19.2-arm64-darwin)
+    nokogiri (1.19.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.19.4-x86_64-linux-gnu)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-musl)
+    nokogiri (1.19.4-x86_64-linux-musl)
       racc (~> 1.4)
     numo-narray-alt (0.10.3)
-    oj (3.16.16)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
     onnxruntime (0.10.1-aarch64-linux)
       ffi
     onnxruntime (0.10.1-arm64-darwin)
@@ -351,7 +343,6 @@ GEM
     openssl (4.0.1)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.3)
     package_json (0.2.0)
     pagy (43.4.4)
       json
@@ -382,7 +373,7 @@ GEM
       date
       stringio
     public_suffix (7.0.5)
-    puma (7.2.0)
+    puma (8.0.2)
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (3.2.6)
@@ -413,8 +404,8 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.7.0)
-      loofah (~> 2.25)
+    rails-html-sanitizer (1.7.1)
+      loofah (~> 2.25, >= 2.25.2)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rails-i18n (8.1.0)
       i18n (>= 0.7, < 2)
@@ -429,12 +420,12 @@ GEM
       tsort (>= 0.2)
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
-    rake (13.3.1)
+    rake (13.4.2)
     rdoc (7.2.0)
       erb
       psych (>= 4.0.0)
       tsort
-    redis-client (0.28.0)
+    redis-client (0.29.0)
       connection_pool
     regexp_parser (2.11.3)
     reline (0.6.3)
@@ -516,12 +507,12 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    sidekiq (8.1.2)
+    sidekiq (8.1.6)
       connection_pool (>= 3.0.0)
       json (>= 2.16.0)
       logger (>= 1.7.0)
       rack (>= 3.2.0)
-      redis-client (>= 0.26.0)
+      redis-client (>= 0.29.0)
     signet (0.21.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -624,12 +615,10 @@ DEPENDENCIES
   foreman
   google-cloud-storage
   hexapdf
-  image_processing
   jwt
   letter_opener_web
   lograge
   numo-narray-alt
-  oj
   onnxruntime
   pagy
   pg
@@ -662,7 +651,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-  ruby 4.0.1
+  ruby 4.0.5
 
 BUNDLED WITH
   4.0.3

README.md

@@ -50,7 +50,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 - Company logo and white-label
 - User roles
 - Automated reminders
-- Invitation and identify verification via SMS
+- Invitation and identity verification via SMS
 - Conditional fields and formulas
 - Bulk send with CSV, XLSX spreadsheet import
 - SSO / SAML
@@ -74,7 +74,7 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 docker run --name docuseal -p 3000:3000 -v.:/data docuseal/docuseal
 ```
 
-By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.
+By default DocuSeal docker container uses an SQLite database to store data and configurations. Alternatively, it is possible to use PostgreSQL or MySQL databases by specifying the `DATABASE_URL` env variable.
 
 #### Docker Compose
 

app/controllers/api/active_storage_blobs_proxy_controller.rb

@@ -9,7 +9,9 @@ module Api
 
     before_action :set_cors_headers
     before_action :set_noindex_headers
+    before_action :set_security_headers
 
+    # rubocop:disable Metrics
     def show
       blob_uuid, purp, exp = ApplicationRecord.signed_id_verifier.verified(params[:signed_uuid])
 
@@ -21,6 +23,12 @@ module Api
 
       blob = ActiveStorage::Blob.find_by!(uuid: blob_uuid)
 
+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
       attachment = blob.attachments.take
 
       @record = attachment.record
@@ -33,12 +41,19 @@ module Api
       else
         http_cache_forever public: true do
           response.headers['Accept-Ranges'] = 'bytes'
-          response.headers['Content-Length'] = blob.byte_size.to_s
 
-          send_blob_stream blob, disposition: params[:disposition]
+          if request.head?
+            response.headers['Content-Type'] = blob.content_type_for_serving
+            head :ok
+          else
+            send_blob_stream blob, disposition: params[:disposition]
+          end
+
+          response.headers['Content-Length'] = blob.byte_size.to_s
         end
       end
     end
+    # rubocop:enable Metrics
 
     private
 
@@ -57,8 +72,6 @@ module Api
         return if !require_ttl && !require_auth
       end
 
-      Rollbar.error('Blob unauthorized') if defined?(Rollbar)
-
       raise CanCan::AccessDenied
     end
   end

app/controllers/api/active_storage_blobs_proxy_legacy_controller.rb

@@ -9,6 +9,7 @@ module Api
 
     before_action :set_cors_headers
     before_action :set_noindex_headers
+    before_action :set_security_headers
 
     # rubocop:disable Metrics
     def show
@@ -18,6 +19,12 @@ module Api
 
       return head :not_found unless blob
 
+      if Submitters::DANGEROUS_EXTENSIONS.include?(blob.filename.extension.to_s.downcase)
+        Rollbar.error('Dangerous extension') if defined?(Rollbar)
+
+        return head :unprocessable_content
+      end
+
       is_permitted = blob.attachments.any? do |a|
         (current_user && a.record.account.id == current_user.account_id) ||
           a.record.account.account_configs.any? { |e| e.key == 'legacy_blob_proxy' } ||

app/controllers/api/api_base_controller.rb

@@ -102,6 +102,10 @@ module Api
       headers['X-Robots-Tag'] = 'noindex'
     end
 
+    def set_security_headers
+      response.headers['X-Content-Type-Options'] = 'nosniff'
+    end
+
     def set_cors_headers
       headers['Access-Control-Allow-Origin'] = '*'
       headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT, PATCH, DELETE, OPTIONS'

app/controllers/api/attachments_controller.rb

@@ -8,35 +8,37 @@ module Api
     COOKIE_STORE_LIMIT = 10
 
     def create
-      submitter = Submitter.find_by!(slug: params[:submitter_slug])
-
-      unless can_upload?(submitter)
-        Rollbar.error("Can't upload: #{submitter.id}") if defined?(Rollbar)
+      @submitter = Submitter.find_by!(slug: params[:submitter_slug])
 
+      unless can_upload?(@submitter)
         return render json: { error: I18n.t('form_has_been_archived') }, status: :unprocessable_content
       end
 
+      file = params[:file]
+
       if params[:type].in?(%w[initials signature])
-        image = Vips::Image.new_from_file(params[:file].path)
+        image = ImageUtils.load_vips(file.read, content_type: file.content_type)
 
         if ImageUtils.blank?(image)
-          Rollbar.error("Empty signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Empty signature: #{@submitter.id}") if defined?(Rollbar)
 
           return render json: { error: "#{params[:type]} is empty" }, status: :unprocessable_content
         end
 
         if ImageUtils.error?(image)
-          Rollbar.error("Error signature: #{submitter.id}") if defined?(Rollbar)
+          Rollbar.error("Error signature: #{@submitter.id}") if defined?(Rollbar)
 
           return render json: { error: "#{params[:type]} error, try to sign on another device" },
                         status: :unprocessable_content
         end
+
+        metadata = { analyzed: true, identified: true, width: image.width, height: image.height }
       end
 
-      attachment = Submitters.create_attachment!(submitter, params)
+      attachment = Submitters.create_attachment!(@submitter, file, metadata:)
 
-      if params[:remember_signature] == 'true' && submitter.email.present?
-        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(submitter, attachment)
+      if params[:remember_signature] == 'true' && @submitter.email.present?
+        cookies.encrypted[:signature_uuids] = build_new_cookie_signatures_json(@submitter, attachment)
       end
 
       render json: attachment.as_json(only: %i[uuid created_at], methods: %i[url filename content_type])

app/controllers/api/submission_documents_controller.rb

@@ -9,7 +9,7 @@ module Api
                  (@submission.schema_documents || @submission.template.schema_documents).size > 1
 
       documents =
-        if @submission.submitters.all?(&:completed_at?)
+        if @submission.completed_at?
           build_completed_documents(@submission, merge: is_merge)
         else
           build_preview_documents(@submission, merge: is_merge)
@@ -30,7 +30,7 @@ module Api
     private
 
     def build_completed_documents(submission, merge: false)
-      last_submitter = submission.submitters.max_by(&:completed_at)
+      last_submitter = submission.submitters.select(&:completed_at?).max_by(&:completed_at)
 
       if merge
         if submission.merged_document_attachment.blank?

app/controllers/api/submission_events_controller.rb

@@ -5,7 +5,7 @@ module Api
     load_and_authorize_resource :submission, parent: false
 
     def index
-      submissions = build_completed_query(@submissions)
+      submissions = @submissions.active.where.not(completed_at: nil)
 
       params[:after] = Time.zone.at(params[:after].to_i) if params[:after].present?
       params[:before] = Time.zone.at(params[:before].to_i) if params[:before].present?
@@ -36,20 +36,5 @@ module Api
         }
       }
     end
-
-    private
-
-    def build_completed_query(submissions)
-      submissions = submissions.where(
-        Submitter.where(completed_at: nil).where(
-          Submitter.arel_table[:submission_id].eq(Submission.arel_table[:id])
-        ).select(1).arel.exists.not
-      )
-
-      submissions.joins(:submitters)
-                 .group(:id)
-                 .select(Submission.arel_table[Arel.star],
-                         Submitter.arel_table[:completed_at].maximum.as('completed_at'))
-    end
   end
 end

app/controllers/api/submissions_controller.rb

@@ -2,21 +2,39 @@
 
 module Api
   class SubmissionsController < ApiBaseController
+    SUBMISSION_COLUMNS = %i[id name slug source submitters_order expire_at completed_at created_at updated_at
+                            archived_at variables template_id template_submitters created_by_user_id].freeze
+    TEMPLATE_COLUMNS = %i[id name external_id created_at updated_at folder_id submitters].freeze
+
     load_and_authorize_resource :template, only: :create
-    load_and_authorize_resource :submission, only: %i[show index destroy]
+    load_and_authorize_resource :submission, only: %i[show index update destroy]
 
     before_action only: :create do
       authorize!(:create, Submission)
     end
 
+    before_action :maybe_return_template_error, only: :create
+
     def index
       submissions = Submissions.search(current_user, @submissions, params[:q])
       submissions = filter_submissions(submissions, params)
 
-      submissions = paginate(submissions.preload(:created_by_user, :submitters,
-                                                 template: { folder: :parent_folder },
-                                                 combined_document_attachment: :blob,
-                                                 audit_trail_attachment: :blob))
+      with_fields = params[:include].to_s.include?('fields') || params[:include].to_s.include?('combined_document_url')
+
+      submissions = paginate(
+        submissions.select(with_fields ? nil : SUBMISSION_COLUMNS)
+                   .preload(:created_by_user, :submitters, combined_document_attachment: :blob,
+                                                           audit_trail_attachment: :blob)
+      )
+
+      ActiveRecord::Associations::Preloader.new(
+        records: submissions,
+        associations: :template,
+        scope: with_fields ? nil : Template.select(TEMPLATE_COLUMNS)
+      ).call
+
+      ActiveRecord::Associations::Preloader.new(records: submissions.filter_map(&:template),
+                                                associations: { folder: :parent_folder }).call
 
       expires_at = Accounts.link_expires_at(current_account)
 
@@ -42,7 +60,7 @@ module Api
         end
       end
 
-      if @submission.audit_trail_attachment.blank? && submitters.all?(&:completed_at?)
+      if @submission.audit_trail_attachment.blank? && @submission.completed_at?
         @submission.audit_trail_attachment = Submissions::EnsureAuditGenerated.call(@submission)
       end
 
@@ -52,14 +70,6 @@ module Api
     def create
       Params::SubmissionCreateValidator.call(params)
 
-      return render json: { error: 'Template not found' }, status: :unprocessable_content if @template.nil?
-
-      if @template.fields.blank?
-        Rollbar.warning("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
-
-        return render json: { error: 'Template does not contain fields' }, status: :unprocessable_content
-      end
-
       params[:send_email] = true unless params.key?(:send_email)
       params[:send_sms] = false unless params.key?(:send_sms)
 
@@ -70,10 +80,17 @@ module Api
       Submissions.send_signature_requests(submissions)
 
       submissions.each do |submission|
+        if submission.submitters.all? { |s| s.viewer? || s.completed_at? } &&
+           Submissions.maybe_update_completed_at(submission)
+          last_submitter = submission.submitters.reject(&:viewer?).max_by(&:completed_at)
+        end
+
         submission.submitters.each do |submitter|
           next unless submitter.completed_at?
 
-          ProcessSubmitterCompletionJob.perform_async('submitter_id' => submitter.id, 'send_invitation_email' => false)
+          ProcessSubmitterCompletionJob.perform_async('submitter_id' => submitter.id,
+                                                      'is_last' => submitter == last_submitter,
+                                                      'send_invitation_email' => false)
         end
       end
 
@@ -87,6 +104,25 @@ module Api
       render json: { error: e.message }, status: :unprocessable_content
     end
 
+    def update
+      @submission = assign_submission_attrs(@submission, submission_params)
+
+      @submission.save!
+
+      if @submission.saved_change_to_archived_at? && @submission.archived_at?
+        WebhookUrls.enqueue_events(@submission, 'submission.archived')
+      end
+
+      if @submission.saved_change_to_expire_at? && @submission.expire_at?
+        ProcessSubmissionExpiredJob.perform_at(@submission.expire_at, 'submission_id' => @submission.id,
+                                                                      'expire_at' => @submission.expire_at.to_i)
+      end
+
+      SearchEntries.enqueue_reindex(@submission) if @submission.saved_change_to_name?
+
+      render json: Submissions::SerializeForApi.call(@submission, nil, params, with_events: false)
+    end
+
     def destroy
       if params[:permanently].in?(['true', true])
         @submission.destroy!
@@ -101,6 +137,41 @@ module Api
 
     private
 
+    def assign_submission_attrs(submission, attrs)
+      archived = attrs.key?(:archived) ? attrs[:archived] : attrs[:archived_at]
+
+      if archived.in?([true, false, 'true', 'false']) && current_ability.can?(:destroy, submission)
+        submission.archived_at = archived.in?(Submitters::TRUE_VALUES) ? Time.current : nil
+      end
+
+      submission.name = attrs[:name] if attrs.key?(:name)
+      submission.expire_at = attrs[:expire_at].presence if attrs.key?(:expire_at)
+
+      submission
+    end
+
+    def submission_params
+      submission_params = params.key?(:submission) ? params.require(:submission) : params
+
+      submission_params.permit(:name, :expire_at, :archived, :archived_at)
+    end
+
+    def maybe_return_template_error
+      return render json: { error: 'Template not found' }, status: :unprocessable_content if @template.nil?
+
+      if @template.archived_at?
+        Rollbar.warning("Archived template submission: #{@template.id}") if defined?(Rollbar)
+
+        return render json: { error: 'Template has been archived' }, status: :unprocessable_content
+      end
+
+      return if @template.fields.present?
+
+      Rollbar.warning("Template does not contain fields: #{@template.id}") if defined?(Rollbar)
+
+      render json: { error: 'Template does not contain fields' }, status: :unprocessable_content
+    end
+
     def filter_submissions(submissions, params)
       submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
       submissions = submissions.where(slug: params[:slug]) if params[:slug].present?

app/controllers/api/submitters_controller.rb

@@ -4,6 +4,8 @@ module Api
   class SubmittersController < ApiBaseController
     load_and_authorize_resource :submitter
 
+    before_action :maybe_return_submitter_error, only: :update
+
     def index
       submitters = Submitters.search(current_user, @submitters, params[:q])
 
@@ -36,14 +38,6 @@ module Api
 
     # rubocop:disable Metrics/MethodLength
     def update
-      if @submitter.completed_at?
-        return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_content
-      end
-
-      if @submitter.declined_at?
-        return render json: { error: 'Submitter has already declined the submission.' }, status: :unprocessable_content
-      end
-
       submission = @submitter.submission
       role = submission.template_submitters.find { |e| e['uuid'] == @submitter.uuid }['name']
 
@@ -73,7 +67,9 @@ module Api
       end
 
       if @submitter.completed_at?
-        ProcessSubmitterCompletionJob.perform_async('submitter_id' => @submitter.id)
+        is_last = Submissions.maybe_update_completed_at(@submitter.submission)
+
+        ProcessSubmitterCompletionJob.perform_async('submitter_id' => @submitter.id, 'is_last' => is_last)
       elsif normalized_params[:send_email] || normalized_params[:send_sms]
         Submitters.send_signature_requests([@submitter])
       end
@@ -104,7 +100,17 @@ module Api
 
     private
 
-    def maybe_filder_by_completed_at(submitters, params)
+    def maybe_return_submitter_error
+      if @submitter.completed_at? || @submitter.submission.completed_at?
+        return render json: { error: 'Submitter has already completed the submission.' }, status: :unprocessable_content
+      end
+
+      return unless @submitter.declined_at?
+
+      render json: { error: 'Submitter has already declined the submission.' }, status: :unprocessable_content
+    end
+
+    def maybe_filter_by_completed_at(submitters, params)
       if params[:completed_after].present?
         submitters = submitters.where(completed_at: Time.zone.parse(params[:completed_after])..)
       end
@@ -177,7 +183,7 @@ module Api
         submitters = submitters.joins(:submission).where(submissions: { template_id: params[:template_id] })
       end
 
-      maybe_filder_by_completed_at(submitters, params)
+      maybe_filter_by_completed_at(submitters, params)
     end
 
     def assign_external_id(submitter, attrs)
@@ -203,10 +209,15 @@ module Api
 
       submitter.preferences['send_sms'] = submitter_preferences['send_sms'] if submitter_preferences.key?('send_sms')
       submitter.preferences['reply_to'] = submitter_preferences['reply_to'] if submitter_preferences.key?('reply_to')
+
       if submitter_preferences.key?('require_phone_2fa')
         submitter.preferences['require_phone_2fa'] = submitter_preferences['require_phone_2fa']
       end
 
+      if submitter_preferences.key?('require_email_2fa')
+        submitter.preferences['require_email_2fa'] = submitter_preferences['require_email_2fa']
+      end
+
       if submitter_preferences.key?('go_to_last')
         submitter.preferences['go_to_last'] = submitter_preferences['go_to_last']
       end

app/controllers/api/templates_controller.rb

@@ -5,24 +5,13 @@ module Api
     load_and_authorize_resource :template
 
     def index
+      @templates = Templates.shared(current_user) if params[:shared].in?(['true', true])
+
       templates = filter_templates(@templates, params)
 
       templates = paginate(templates.preload(:author, folder: :parent_folder))
 
-      schema_documents =
-        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
-                                        record_type: 'Template',
-                                        name: :documents,
-                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
-                                 .preload(:blob)
-
-      preview_image_attachments =
-        ActiveStorage::Attachment.joins(:blob)
-                                 .where(blob: { filename: ['0.png', '0.jpg'] })
-                                 .where(record_id: schema_documents.map(&:id),
-                                        record_type: 'ActiveStorage::Attachment',
-                                        name: :preview_images)
-                                 .preload(:blob)
+      schema_documents, dynamic_documents, preview_image_attachments = preload_relations(templates)
 
       expires_at = Accounts.link_expires_at(current_account)
 
@@ -30,6 +19,7 @@ module Api
         data: templates.map do |t|
           Templates::SerializeForApi.call(t,
                                           schema_documents: schema_documents.select { |e| e.record_id == t.id },
+                                          dynamic_documents:,
                                           preview_image_attachments:,
                                           expires_at:)
         end,
@@ -60,16 +50,19 @@ module Api
 
       archived = params.key?(:archived) ? params[:archived] : params.dig(:template, :archived)
 
-      if archived.in?([true, false])
+      if archived.in?([true, false]) && current_ability.can?(:destroy, @template)
         @template.archived_at = archived == true ? Time.current : nil
       end
 
       @template.update!(template_params)
 
-      SearchEntries.enqueue_reindex(@template)
+      SearchEntries.enqueue_reindex(@template) if @template.saved_change_to_name?
 
       WebhookUrls.enqueue_events(@template, 'template.updated')
-      WebhookUrls.enqueue_events(@template, 'template.archived') if archived == true
+
+      if @template.saved_change_to_archived_at? && @template.archived_at?
+        WebhookUrls.enqueue_events(@template, 'template.archived')
+      end
 
       render json: @template.as_json(only: %i[id updated_at])
     end
@@ -88,8 +81,49 @@ module Api
 
     private
 
+    def preload_relations(templates)
+      schema_documents =
+        ActiveStorage::Attachment.where(record_id: templates.map(&:id),
+                                        record_type: 'Template',
+                                        name: :documents,
+                                        uuid: templates.flat_map { |t| t.schema.pluck('attachment_uuid') })
+                                 .preload(:blob)
+
+      dynamic_document_uuids =
+        templates.flat_map { |t| t.schema.select { |item| item['dynamic'] }.pluck('attachment_uuid') }
+
+      dynamic_documents =
+        if dynamic_document_uuids.present?
+          DynamicDocument.where(template: templates.map(&:id))
+                         .where(uuid: dynamic_document_uuids)
+                         .preload(current_version: { document_attachment: :blob })
+                         .select(:id, :uuid, :template_id, :sha1, :created_at, :updated_at)
+        else
+          DynamicDocument.none
+        end
+
+      preview_attachment_ids =
+        schema_documents.map(&:id) + dynamic_documents.filter_map { |d| d.current_version&.document_attachment&.id }
+
+      preview_image_attachments =
+        ActiveStorage::Attachment.joins(:blob)
+                                 .where(blob: { filename: ['0.png', '0.jpg'] })
+                                 .where(record_id: preview_attachment_ids,
+                                        record_type: 'ActiveStorage::Attachment',
+                                        name: :preview_images)
+                                 .preload(:blob)
+
+      [schema_documents, dynamic_documents, preview_image_attachments]
+    end
+
     def filter_templates(templates, params)
-      templates = Templates.search(current_user, templates, params[:q])
+      templates =
+        if params[:shared].in?(['true', true])
+          Templates.search_shared(current_user, templates, params[:q])
+        else
+          Templates.search(current_user, templates, params[:q])
+        end
+
       templates = params[:archived].in?(['true', true]) ? templates.archived : templates.active
       templates = templates.where(external_id: params[:application_key]) if params[:application_key].present?
       templates = templates.where(external_id: params[:external_id]) if params[:external_id].present?

app/controllers/email_smtp_settings_controller.rb

@@ -3,7 +3,7 @@
 class EmailSmtpSettingsController < ApplicationController
   before_action :load_encrypted_config
   authorize_resource :encrypted_config, only: :index
-  authorize_resource :encrypted_config, parent: false, only: :create
+  authorize_resource :encrypted_config, parent: false, only: %i[create destroy]
 
   def index; end
 
@@ -23,6 +23,12 @@ class EmailSmtpSettingsController < ApplicationController
     render :index, status: :unprocessable_content
   end
 
+  def destroy
+    @encrypted_config.destroy!
+
+    redirect_to settings_email_index_path, notice: I18n.t('smtp_settings_have_been_reset')
+  end
+
   private
 
   def load_encrypted_config

app/controllers/esign_settings_controller.rb

@@ -14,8 +14,7 @@ class EsignSettingsController < ApplicationController
   prepend_before_action :maybe_redirect_com, only: %i[show]
 
   before_action :load_encrypted_config
-  authorize_resource :encrypted_config, parent: false, only: %i[new create]
-  authorize_resource :encrypted_config, only: %i[update destroy show]
+  authorize_resource :encrypted_config, parent: false
 
   def show
     cert_data = @encrypted_config.value || {}

app/controllers/mcp/create_template_controller.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Mcp
+  class CreateTemplateController < McpBaseController
+    SCHEMA = {
+      name: 'create_template',
+      title: 'Create Template',
+      description: 'Create a document template. Provide a URL to upload a PDF/DOCX file, or provide only a name ' \
+                   'to create an empty template and receive an edit URL where the file can be uploaded via the UI.',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Template name (used as the template name and required when url is not provided)'
+          },
+          url: {
+            type: 'string',
+            description: 'Optional URL of a PDF or DOCX file to upload. If omitted, an empty template is ' \
+                         'created and the returned edit_url can be used to upload a file via the UI.'
+          }
+        },
+        required: %w[name]
+      },
+      annotations: {
+        readOnlyHint: false,
+        destructiveHint: false,
+        idempotentHint: false,
+        openWorldHint: true
+      }
+    }.freeze
+
+    # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+    def call
+      account = current_user.account
+
+      @template = Template.new(
+        account:,
+        author: current_user,
+        folder: account.default_template_folder,
+        source: :mcp,
+        name: mcp_params['name'].to_s.presence || 'New Template',
+        fields: [],
+        schema: []
+      )
+
+      authorize!(:create, @template)
+
+      if mcp_params['url'].present?
+        tempfile = Tempfile.new
+        tempfile.binmode
+        tempfile.write(DownloadUtils.call(mcp_params['url'], validate: true).body)
+        tempfile.rewind
+
+        filename = File.basename(URI.decode_www_form_component(mcp_params['url']))
+
+        file = ActionDispatch::Http::UploadedFile.new(
+          tempfile:,
+          filename:,
+          type: Marcel::MimeType.for(tempfile)
+        )
+
+        @template.name = mcp_params['name'].presence || File.basename(filename, '.*')
+        @template.save!
+
+        documents, = Templates::CreateAttachments.call(@template, { files: [file] }, extract_fields: true)
+        schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
+
+        if @template.fields.blank?
+          @template.fields = Templates::ProcessDocument.normalize_attachment_fields(@template, documents)
+        end
+
+        @template.update!(schema:)
+      else
+        @template.save!
+      end
+
+      WebhookUrls.enqueue_events(@template, 'template.created')
+
+      SearchEntries.enqueue_reindex(@template)
+
+      render_tool_result(
+        id: @template.id,
+        name: @template.name,
+        edit_url: edit_template_url(@template)
+      )
+    end
+    # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+  end
+end

app/controllers/mcp/load_template_controller.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Mcp
+  class LoadTemplateController < McpBaseController
+    SCHEMA = {
+      name: 'load_template',
+      title: 'Load Template',
+      description: 'Load a template with its fields. Each field includes name, type, and the signing role name.',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          template_id: {
+            type: 'integer',
+            description: 'Template identifier'
+          }
+        },
+        required: %w[template_id]
+      },
+      annotations: {
+        readOnlyHint: true,
+        destructiveHint: false,
+        idempotentHint: true,
+        openWorldHint: false
+      }
+    }.freeze
+
+    def call
+      @template = Template.accessible_by(current_ability).find(mcp_params['template_id'])
+
+      authorize!(:read, @template)
+
+      submitters_index = @template.submitters.index_by { |s| s['uuid'] }
+
+      roles = @template.submitters.pluck('name')
+
+      fields = @template.fields.filter_map do |field|
+        next if field['name'].blank?
+
+        {
+          name: field['name'],
+          type: field['type'],
+          role: submitters_index[field['submitter_uuid']]&.dig('name')
+        }
+      end
+
+      render_tool_result(
+        id: @template.id,
+        name: @template.name,
+        roles: roles,
+        fields: fields
+      )
+    end
+  end
+end

app/controllers/mcp/mcp_base_controller.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Mcp
+  class McpBaseController < ActionController::API
+    wrap_parameters false
+
+    before_action :authenticate_user!
+    before_action :verify_mcp_enabled!
+    check_authorization
+
+    before_action do
+      raise CanCan::AccessDenied unless can?(:manage, :mcp)
+    end
+
+    rescue_from CanCan::AccessDenied do
+      render_error(-32_603, 'Forbidden', status: :forbidden)
+    end
+
+    rescue_from ActiveRecord::RecordNotFound do
+      render_tool_error('Not found')
+    end
+
+    private
+
+    def default_url_options
+      Docuseal.default_url_options
+    end
+
+    def mcp_body
+      request.request_parameters
+    end
+
+    def mcp_params
+      mcp_body.dig('params', 'arguments') || {}
+    end
+
+    def render_result(result)
+      render json: { jsonrpc: '2.0', id: mcp_body['id'], result: }
+    end
+
+    def render_error(code, message, id: nil, status: :ok)
+      render json: { jsonrpc: '2.0', id:, error: { code:, message: } }, status:
+    end
+
+    def render_tool_result(data)
+      render_result(content: [{ type: 'text', text: data.to_json }])
+    end
+
+    def render_tool_error(message)
+      render_result(content: [{ type: 'text', text: message }], isError: true)
+    end
+
+    def authenticate_user!
+      render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
+    end
+
+    def verify_mcp_enabled!
+      return if Docuseal.multitenant?
+
+      return if AccountConfig.exists?(account_id: current_user.account_id,
+                                      key: AccountConfig::ENABLE_MCP_KEY,
+                                      value: true)
+
+      render json: { error: 'MCP is disabled' }, status: :forbidden
+    end
+
+    def current_user
+      @current_user ||= user_from_api_key
+    end
+
+    def user_from_api_key
+      token = request.headers['Authorization'].to_s[/\ABearer\s+(.+)\z/, 1]
+
+      return if token.blank?
+
+      sha256 = Digest::SHA256.hexdigest(token)
+
+      User.joins(:mcp_tokens).active.find_by(mcp_tokens: { sha256:, archived_at: nil })
+    end
+  end
+end

app/controllers/mcp/protocol_controller.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Mcp
+  class ProtocolController < McpBaseController
+    skip_authorization_check
+
+    def ok
+      head :ok
+    end
+
+    def initialize_request
+      render_result(
+        protocolVersion: '2025-11-25',
+        serverInfo: {
+          name: 'DocuSeal',
+          version: Docuseal.version.to_s
+        },
+        capabilities: {
+          tools: {
+            listChanged: false
+          }
+        }
+      )
+    end
+
+    def initialized_notification
+      head :accepted
+    end
+
+    def ping
+      render_result({})
+    end
+
+    def tools_list
+      render_result(tools: McpController::TOOLS)
+    end
+
+    def method_not_found
+      render_error(-32_601, "Method not found: #{mcp_body['method']}", id: mcp_body['id'])
+    end
+
+    def tool_not_found
+      render_error(-32_602, "Unknown tool: #{mcp_body.dig('params', 'name')}", id: mcp_body['id'])
+    end
+
+    def parse_error
+      render_error(-32_700, 'Parse error', status: :bad_request)
+    end
+  end
+end

app/controllers/mcp/search_documents_controller.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Mcp
+  class SearchDocumentsController < McpBaseController
+    SCHEMA = {
+      name: 'search_documents',
+      title: 'Search Documents',
+      description: 'Search signed or pending documents by submitter name, email, phone, or template name',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          q: {
+            type: 'string',
+            description: 'Search by submitter name, email, phone, or template name'
+          },
+          limit: {
+            type: 'integer',
+            description: 'The number of results to return (default 10)'
+          }
+        },
+        required: %w[q]
+      },
+      annotations: {
+        readOnlyHint: true,
+        destructiveHint: false,
+        idempotentHint: true,
+        openWorldHint: false
+      }
+    }.freeze
+
+    def call
+      authorize!(:read, Submission)
+
+      submissions = Submissions.search(current_user, Submission.accessible_by(current_ability).active,
+                                       mcp_params['q'], search_template: true)
+
+      limit = mcp_params.fetch('limit', 10).to_i
+      limit = 10 if limit <= 0
+      limit = [limit, 100].min
+      submissions = submissions.preload(:submitters, :template)
+                               .order(id: :desc)
+                               .limit(limit)
+
+      data = submissions.map do |submission|
+        {
+          id: submission.id,
+          template_name: submission.template&.name,
+          status: Submissions::SerializeForApi.build_status(submission, submission.submitters),
+          submitters: submission.submitters.map do |s|
+            { email: s.email, name: s.name, phone: s.phone, status: s.status }
+          end,
+          documents_url: submission_url(submission.id)
+        }
+      end
+
+      render_tool_result(data)
+    end
+  end
+end

app/controllers/mcp/search_templates_controller.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Mcp
+  class SearchTemplatesController < McpBaseController
+    SCHEMA = {
+      name: 'search_templates',
+      title: 'Search Templates',
+      description: 'Search document templates by name',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          q: {
+            type: 'string',
+            description: 'Search query to filter templates by name'
+          },
+          limit: {
+            type: 'integer',
+            description: 'The number of templates to return (default 10)'
+          }
+        },
+        required: %w[q]
+      },
+      annotations: {
+        readOnlyHint: true,
+        destructiveHint: false,
+        idempotentHint: true,
+        openWorldHint: false
+      }
+    }.freeze
+
+    def call
+      authorize!(:read, Template)
+
+      templates = Templates.search(current_user, Template.accessible_by(current_ability).active, mcp_params['q'])
+
+      limit = mcp_params.fetch('limit', 10).to_i
+      limit = 10 if limit <= 0
+      limit = [limit, 100].min
+      templates = templates.order(id: :desc).limit(limit)
+
+      render_tool_result(templates.map { |t| { id: t.id, name: t.name } })
+    end
+  end
+end

app/controllers/mcp/send_documents_controller.rb

@@ -0,0 +1,120 @@
+# frozen_string_literal: true
+
+module Mcp
+  class SendDocumentsController < McpBaseController
+    SCHEMA = {
+      name: 'send_documents',
+      title: 'Send Documents',
+      description: 'Send a document template for signing to specified submitters',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          template_id: {
+            type: 'integer',
+            description: 'Template identifier'
+          },
+          submitters: {
+            type: 'array',
+            description: 'The list of submitters (signers)',
+            items: {
+              type: 'object',
+              properties: {
+                email: {
+                  type: 'string',
+                  description: 'Submitter email address'
+                },
+                name: {
+                  type: 'string',
+                  description: 'Submitter name'
+                },
+                phone: {
+                  type: 'string',
+                  description: 'Submitter phone number in E.164 format'
+                },
+                role: {
+                  type: 'string',
+                  description: 'Signing role name from the template'
+                },
+                fields: {
+                  type: 'array',
+                  description: 'Prefill field values for this submitter (fields become readonly)',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      name: {
+                        type: 'string',
+                        description: 'Field name'
+                      },
+                      value: {
+                        description: 'Prefilled value for the field'
+                      }
+                    },
+                    required: %w[name value]
+                  }
+                }
+              }
+            }
+          }
+        },
+        required: %w[template_id submitters]
+      },
+      annotations: {
+        readOnlyHint: false,
+        destructiveHint: true,
+        idempotentHint: false,
+        openWorldHint: true
+      }
+    }.freeze
+
+    # rubocop:disable Metrics
+    def call
+      @template = Template.accessible_by(current_ability).find(mcp_params['template_id'])
+
+      authorize!(:read, @template)
+
+      return render_tool_error('Template has been archived') if @template.archived_at?
+
+      authorize!(:create, Submission.new(template: @template, account_id: current_user.account_id))
+
+      return render_tool_error('Template has no fields') if @template.fields.blank?
+
+      submitters = (mcp_params['submitters'] || []).map do |s|
+        attrs = s.slice('email', 'name', 'role', 'phone').compact_blank
+
+        fields = Array.wrap(s['fields']).filter_map do |f|
+          next if f['name'].blank?
+
+          { 'name' => f['name'], 'default_value' => f['value'], 'readonly' => true }
+        end
+
+        attrs['fields'] = fields if fields.present?
+
+        attrs.with_indifferent_access
+      end
+
+      submissions = Submissions.create_from_submitters(
+        template: @template,
+        user: current_user,
+        source: :mcp,
+        submitters_order: @template.preferences['submitters_order'].presence || 'random',
+        submissions_attrs: { submitters: },
+        params: { 'send_email' => true, 'submitters' => submitters }
+      )
+
+      return render_tool_error('No valid submitters provided') if submissions.blank?
+
+      WebhookUrls.enqueue_events(submissions, 'submission.created')
+
+      Submissions.send_signature_requests(submissions)
+
+      SearchEntries.enqueue_reindex(submissions)
+
+      submission = submissions.first
+
+      render_tool_result(id: submission.id, status: 'pending')
+    rescue Submissions::CreateFromSubmitters::BaseError => e
+      render_tool_error(e.message)
+    end
+    # rubocop:enable Metrics
+  end
+end

app/controllers/mcp_controller.rb

@@ -1,58 +1,44 @@
 # frozen_string_literal: true
 
-class McpController < ActionController::API
-  before_action :authenticate_user!
-  before_action :verify_mcp_enabled!
+class McpController < ActionController::Metal
+  TOOL_CONTROLLERS = {
+    'search_templates' => Mcp::SearchTemplatesController,
+    'load_template' => Mcp::LoadTemplateController,
+    'create_template' => Mcp::CreateTemplateController,
+    'send_documents' => Mcp::SendDocumentsController,
+    'search_documents' => Mcp::SearchDocumentsController
+  }.freeze
 
-  before_action do
-    authorize!(:manage, :mcp)
-  end
+  TOOLS = TOOL_CONTROLLERS.map { |_, controller| controller::SCHEMA }.freeze
 
   def call
-    return head :ok if request.raw_post.blank?
+    return Mcp::ProtocolController.dispatch(:ok, request, response) if request.raw_post.blank?
 
     body = JSON.parse(request.raw_post)
+    body = nil unless body.is_a?(Hash)
 
-    result = Mcp::HandleRequest.call(body, current_user, current_ability)
+    request.request_parameters = body || {}
 
-    if result
-      render json: result
-    else
-      head :accepted
-    end
-  rescue CanCan::AccessDenied
-    render json: { jsonrpc: '2.0', id: nil, error: { code: -32_603, message: 'Forbidden' } }, status: :forbidden
+    action =
+      case body&.dig('method')
+      when 'initialize' then :initialize_request
+      when 'notifications/initialized' then :initialized_notification
+      when 'ping' then :ping
+      when 'tools/list' then :tools_list
+      when 'tools/call'
+        tool = TOOL_CONTROLLERS[body.dig('params', 'name')]
+
+        return tool.dispatch(:call, request, response) if tool
+
+        :tool_not_found
+      else
+        :method_not_found
+      end
+
+    Mcp::ProtocolController.dispatch(action, request, response)
   rescue JSON::ParserError
-    render json: { jsonrpc: '2.0', id: nil, error: { code: -32_700, message: 'Parse error' } }, status: :bad_request
-  end
+    request.request_parameters = {}
 
-  private
-
-  def authenticate_user!
-    render json: { error: 'Not authenticated' }, status: :unauthorized unless current_user
-  end
-
-  def verify_mcp_enabled!
-    return if Docuseal.multitenant?
-
-    return if AccountConfig.exists?(account_id: current_user.account_id,
-                                    key: AccountConfig::ENABLE_MCP_KEY,
-                                    value: true)
-
-    render json: { error: 'MCP is disabled' }, status: :forbidden
-  end
-
-  def current_user
-    @current_user ||= user_from_api_key
-  end
-
-  def user_from_api_key
-    token = request.headers['Authorization'].to_s[/\ABearer\s+(.+)\z/, 1]
-
-    return if token.blank?
-
-    sha256 = Digest::SHA256.hexdigest(token)
-
-    User.joins(:mcp_tokens).active.find_by(mcp_tokens: { sha256:, archived_at: nil })
+    Mcp::ProtocolController.dispatch(:parse_error, request, response)
   end
 end

app/controllers/preview_document_page_controller.rb

@@ -25,7 +25,10 @@ class PreviewDocumentPageController < ActionController::API
     preview_image = attachment.preview_images.joins(:blob)
                               .find_by(blob: { filename: ["#{params[:id]}.png", "#{params[:id]}.jpg"] })
 
-    return redirect_to preview_image.url, allow_other_host: true if preview_image
+    if preview_image
+      return redirect_to preview_image.url(time: ActiveStorage::Attachment.service_url_time),
+                         allow_other_host: true
+    end
 
     file_path =
       if attachment.service.name == :disk
@@ -37,11 +40,11 @@ class PreviewDocumentPageController < ActionController::API
     preview_image =
       Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
 
-    redirect_to preview_image.url, allow_other_host: true
+    redirect_to preview_image.url(time: ActiveStorage::Attachment.service_url_time), allow_other_host: true
   end
 
   def find_or_create_document_tempfile_path(attachment)
-    file_path = "#{Dir.tmpdir}/#{attachment.uuid}"
+    file_path = "#{Dir.tmpdir}/attachment-#{Digest::SHA1.hexdigest("#{attachment.id}-#{attachment.uuid}")}"
 
     File.open(file_path, File::RDWR | File::CREAT, 0o644) do |f|
       f.flock(File::LOCK_EX)

app/controllers/reveal_access_token_controller.rb

@@ -1,6 +1,14 @@
 # frozen_string_literal: true
 
 class RevealAccessTokenController < ApplicationController
+  rate_limit to: 4, within: 1.minute, only: %i[create], by: -> { current_user.id }, with: lambda {
+    Rollbar.error('Rate limit api key') if defined?(Rollbar)
+
+    render turbo_stream: turbo_stream.replace(:modal, template: 'reveal_access_token/show',
+                                                      locals: { error_message: I18n.t(:too_many_attempts) }),
+           status: :unprocessable_content
+  }
+
   def show
     authorize!(:manage, current_user.access_token)
   end

app/controllers/send_submission_email_controller.rb

@@ -14,22 +14,22 @@ class SendSubmissionEmailController < ApplicationController
       template = Template.find_by!(slug: params[:template_slug])
 
       @submitter =
-        Submitter.completed.where(submission: template.submissions).find_by!(email: params[:email].to_s.downcase)
+        Submitter.completed.where(submission: template.submissions).find_by(email: params[:email].to_s.downcase)
     elsif params[:submission_slug]
-      submission = Submission.find_by(slug: params[:submission_slug])
+      submission = Submission.find_by!(slug: params[:submission_slug])
 
-      if submission
-        @submitter = Submitter.completed.find_by(submission: submission, email: params[:email].to_s.downcase)
-      end
+      @submitter = submission.submitters.order(:completed_at).find_by(email: params[:email].to_s.downcase)
 
       return redirect_to submissions_preview_completed_path(params[:submission_slug], status: :error) unless @submitter
     else
-      @submitter = Submitter.completed.find_by!(slug: params[:submitter_slug])
+      @submitter = Submitter.find_by!(slug: params[:submitter_slug])
     end
 
-    RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
+    if @submitter && completed_submitter?(@submitter)
+      RateLimit.call("send-email-#{@submitter.id}", limit: 2, ttl: 5.minutes)
 
-    SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+      SubmitterMailer.documents_copy_email(@submitter, sig: true).deliver_later! if can_send?(@submitter)
+    end
 
     respond_to do |f|
       f.html { render :success }
@@ -39,6 +39,10 @@ class SendSubmissionEmailController < ApplicationController
 
   private
 
+  def completed_submitter?(submitter)
+    submitter.completed_at? || (submitter.viewer? && submitter.submission.completed_at?)
+  end
+
   def can_send?(submitter)
     return false if submitter.account.archived_at?
     return false if EmailEvent.exists?(tag: :submitter_documents_copy, email: submitter.email, emailable: submitter,

app/controllers/start_form_controller.rb

@@ -93,20 +93,34 @@ class StartFormController < ApplicationController
 
     SearchEntries.enqueue_reindex(submitter)
 
-    return unless submitter.submission.expire_at?
+    expire_at = submitter.submission.expire_at
 
-    ProcessSubmissionExpiredJob.perform_at(submitter.submission.expire_at, 'submission_id' => submitter.submission_id)
+    return unless expire_at
+
+    ProcessSubmissionExpiredJob.perform_at(expire_at, 'submission_id' => submitter.submission_id,
+                                                      'expire_at' => expire_at.to_i)
   end
 
   def load_resubmit_submitter
     @resubmit_submitter =
       if params[:resubmit].present? && !params[:resubmit].in?([true, 'true'])
-        Submitter.find_by(slug: params[:resubmit])
+        submitter = Submitter.find_by(slug: params[:resubmit])
+
+        submitter if submitter && can_resubmit?(submitter)
       end
   end
 
+  def can_resubmit?(submitter)
+    submitter.completed_at? && submitter.completed_at > 14.days.ago &&
+      %w[api embed mcp].exclude?(submitter.submission.source) &&
+      submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false
+  end
+
   def authorize_start!
-    return redirect_to start_form_path(@template.slug) if @template.archived_at?
+    is_archived = @template.archived_at? || @template.account.archived_at?
+
+    return redirect_to submit_form_path(@resubmit_submitter.slug) if @resubmit_submitter && is_archived
+    return redirect_to start_form_path(@template.slug) if is_archived
 
     return if @resubmit_submitter
     return if @template.shared_link? || (current_user && current_ability.can?(:read, @template))
@@ -127,8 +141,7 @@ class StartFormController < ApplicationController
 
     submitter ||=
       Submitter
-      .where(submission: template.submissions.where(expire_at: Time.current..)
-                                 .or(template.submissions.where(expire_at: nil)).where(archived_at: nil))
+      .where(submission: template.submissions.non_expired.active)
       .order(id: :desc)
       .where(declined_at: nil)
       .where(external_id: nil)
@@ -136,6 +149,8 @@ class StartFormController < ApplicationController
       .then { |rel| params[:resubmit].present? || params[:selfsign].present? ? rel.where(completed_at: nil) : rel }
       .find_or_initialize_by(find_params)
 
+    submitter = Submitter.new(find_params) if submitter.submission&.completed_at? && submitter.viewer?
+
     submitter.name = required_params['name'] if submitter.new_record?
 
     unless @resubmit_submitter

app/controllers/submissions_archived_controller.rb

@@ -7,17 +7,27 @@ class SubmissionsArchivedController < ApplicationController
     @submissions = @submissions.left_joins(:template)
     @submissions = @submissions.where.not(archived_at: nil)
                                .or(@submissions.where.not(templates: { archived_at: nil }))
-                               .preload(:template_accesses, :created_by_user, template: :author)
+                               .preload(:template_accesses, :created_by_user)
 
     @submissions = Submissions.search(current_user, @submissions, params[:q], search_template: true)
     @submissions = Submissions::Filter.call(@submissions, current_user, params)
 
-    @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
-                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
-                   else
-                     @submissions.order(id: :desc)
-                   end
+    @submissions =
+      if params[:status] == 'completed' || params[:completed_at_from].present? || params[:completed_at_to].present?
+        @submissions.order(completed_at: :desc)
+      else
+        @submissions.order(id: :desc)
+      end
 
-    @pagy, @submissions = pagy_auto(@submissions.preload(submitters: :start_form_submission_events))
+    @pagy, @submissions = pagy_auto(@submissions.select_for_list.preload(submitters: :start_form_submission_events))
+
+    template_scope = @submissions.all?(&:template_submitters) ? Template.select_for_list : nil
+
+    ActiveRecord::Associations::Preloader.new(records: @submissions,
+                                              associations: :template,
+                                              scope: template_scope).call
+
+    ActiveRecord::Associations::Preloader.new(records: @submissions.filter_map(&:template),
+                                              associations: :author).call
   end
 end

app/controllers/submissions_controller.rb

@@ -1,9 +1,7 @@
 # frozen_string_literal: true
 
 class SubmissionsController < ApplicationController
-  before_action :load_template, only: %i[new create]
-  authorize_resource :template, only: %i[new create]
-
+  load_and_authorize_resource :template, only: %i[new create]
   load_and_authorize_resource :submission, only: %i[show destroy]
 
   prepend_before_action :maybe_redirect_com, only: %i[show]
@@ -23,7 +21,7 @@ class SubmissionsController < ApplicationController
   def show
     @submission = Submissions.preload_with_pages(@submission)
 
-    unless @submission.submitters.all?(&:completed_at?)
+    unless @submission.completed_at?
       ActiveRecord::Associations::Preloader.new(
         records: [@submission],
         associations: [{ submitters: :start_form_submission_events }]
@@ -38,6 +36,8 @@ class SubmissionsController < ApplicationController
   end
 
   def create
+    return redirect_to template_path(@template), alert: I18n.t('template_has_been_archived') if @template.archived_at?
+
     save_template_message(@template, params) if params[:save_message] == '1'
 
     [params.delete(:subject), params.delete(:body)] if params[:is_custom_message] != '1'
@@ -87,6 +87,8 @@ class SubmissionsController < ApplicationController
   private
 
   def create_submissions(template, submissions_params, params)
+    normalize_message_submitter_uuids!(params)
+
     submissions_attrs = submissions_params[:submission].to_h.values
 
     submissions_attrs, _, new_fields =
@@ -112,7 +114,22 @@ class SubmissionsController < ApplicationController
     params.permit(submission: { submitters: [:uuid, :email, :phone, :name, { values: {} }] })
   end
 
-  def load_template
-    @template = Template.accessible_by(current_ability).find(params[:template_id])
+  def normalize_message_submitter_uuids!(params)
+    return if params[:request_email_per_submitter] == '1'
+
+    uuids = params[:email_message_submitter_uuids]
+
+    return if uuids.blank?
+    return if params[:subject].blank? && params[:body].blank?
+
+    params[:submitter_preferences] =
+      Array.wrap(uuids).index_with { { 'subject' => params[:subject], 'body' => params[:body] } }
+
+    params[:request_email_per_submitter] = '1'
+
+    params.delete(:subject)
+    params.delete(:body)
+
+    params
   end
 end

app/controllers/submissions_dashboard_controller.rb

@@ -8,17 +8,27 @@ class SubmissionsDashboardController < ApplicationController
 
     @submissions = @submissions.where(archived_at: nil)
                                .where(templates: { archived_at: nil })
-                               .preload(:template_accesses, :created_by_user, template: :author)
+                               .preload(:template_accesses, :created_by_user)
 
     @submissions = Submissions.search(current_user, @submissions, params[:q], search_template: true)
     @submissions = Submissions::Filter.call(@submissions, current_user, params)
 
-    @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
-                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
-                   else
-                     @submissions.order(id: :desc)
-                   end
+    @submissions =
+      if params[:status] == 'completed' || params[:completed_at_from].present? || params[:completed_at_to].present?
+        @submissions.order(completed_at: :desc)
+      else
+        @submissions.order(id: :desc)
+      end
 
-    @pagy, @submissions = pagy_auto(@submissions.preload(submitters: :start_form_submission_events))
+    @pagy, @submissions = pagy_auto(@submissions.select_for_list.preload(submitters: :start_form_submission_events))
+
+    template_scope = @submissions.all?(&:template_submitters) ? Template.select_for_list : nil
+
+    ActiveRecord::Associations::Preloader.new(records: @submissions,
+                                              associations: :template,
+                                              scope: template_scope).call
+
+    ActiveRecord::Associations::Preloader.new(records: @submissions.filter_map(&:template),
+                                              associations: :author).call
   end
 end

app/controllers/submissions_preview_controller.rb

@@ -25,7 +25,7 @@ class SubmissionsPreviewController < ApplicationController
 
     raise ActionController::RoutingError, I18n.t('not_found') if @submission.account.archived_at?
 
-    if !@submission.submitters.all?(&:completed_at?) && !signature_valid &&
+    if !@submission.completed_at? && !signature_valid &&
        (!current_user || !current_ability.can?(:read, @submission))
       raise ActionController::RoutingError, I18n.t('not_found')
     end

app/controllers/submissions_resend_email_controller.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class SubmissionsResendEmailController < ApplicationController
+  load_and_authorize_resource :submission
+
+  before_action do
+    authorize!(:manage, :resend_all)
+    authorize!(:update, @submission)
+  end
+
+  def create
+    submitters = @submission.submitters.reject(&:completed_at?).select { |s| s.email.present? && !s.declined_at? }
+
+    if Docuseal.multitenant?
+      recent_submitter_ids =
+        SubmissionEvent.where(submitter_id: submitters.map(&:id),
+                              event_type: 'send_email',
+                              created_at: 10.hours.ago..Time.current).pluck(:submitter_id).to_set
+
+      submitters = submitters.reject { |s| recent_submitter_ids.include?(s.id) }
+    end
+
+    submitters.each do |submitter|
+      SendSubmitterInvitationEmailJob.perform_async('submitter_id' => submitter.id)
+
+      submitter.sent_at ||= Time.current
+      submitter.save!
+    end
+
+    notice =
+      if submitters.empty?
+        I18n.t('email_has_been_sent_already')
+      else
+        I18n.t('emails_have_been_sent_to_n_recipients', count: submitters.size)
+      end
+
+    redirect_back(fallback_location: submission_path(@submission), notice:)
+  end
+end

app/controllers/submissions_unarchive_controller.rb

@@ -4,6 +4,8 @@ class SubmissionsUnarchiveController < ApplicationController
   load_and_authorize_resource :submission
 
   def create
+    authorize!(:destroy, @submission)
+
     @submission.update!(archived_at: nil)
 
     redirect_to submission_path(@submission), notice: I18n.t('submission_has_been_unarchived')

app/controllers/submit_form_completed_download_controller.rb

@@ -19,7 +19,7 @@ class SubmitFormCompletedDownloadController < ApplicationController
 
     @submitter ||= Submitter.find_by!(slug: submitter_slug)
 
-    Submissions::EnsureResultGenerated.call(@submitter)
+    Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?
 
     last_submitter = @submitter.submission.submitters.where.not(completed_at: nil).order(:completed_at).last
 
@@ -28,11 +28,7 @@ class SubmitFormCompletedDownloadController < ApplicationController
     Submissions::EnsureResultGenerated.call(last_submitter)
 
     if !signature_valid && !current_user_submitter?(last_submitter)
-      unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
-        Rollbar.info("2FA download error: #{last_submitter.id}") if defined?(Rollbar)
-
-        return head :not_found
-      end
+      return head :not_found unless Submitters::AuthorizedForForm.call(@submitter, current_user, request)
 
       if last_submitter.completed_at < TTL.ago
         Rollbar.info("TTL: #{last_submitter.id}") if defined?(Rollbar)

app/controllers/submit_form_controller.rb

@@ -18,7 +18,10 @@ class SubmitFormController < ApplicationController
     submission = @submitter.submission
 
     return render :email_2fa unless Submitters::AuthorizedForForm.pass_email_2fa?(@submitter, request)
-    return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
+
+    if @submitter.completed_at? || submission.completed_at?
+      return redirect_to submit_form_completed_path(@submitter.slug)
+    end
 
     @form_configs = Submitters::FormConfigs.call(@submitter, CONFIG_KEYS)
 
@@ -71,6 +74,12 @@ class SubmitFormController < ApplicationController
                     status: :unprocessable_content
     end
 
+    if @submitter.viewer?
+      Rollbar.warning("Submit viewer: #{@submitter.id}") if defined?(Rollbar)
+
+      return render json: { error: I18n.t('form_is_view_only') }, status: :unprocessable_content
+    end
+
     Submitters::SubmitValues.call(@submitter, params, request)
 
     head :ok

app/controllers/submit_form_decline_controller.rb

@@ -7,11 +7,13 @@ class SubmitFormDeclineController < ApplicationController
   before_action :load_submitter
 
   def create
-    return redirect_to submit_form_path(@submitter.slug) if @submitter.declined_at? ||
+    return redirect_to submit_form_path(@submitter.slug) if declining_disabled? ||
+                                                            @submitter.declined_at? ||
                                                             @submitter.completed_at? ||
                                                             @submitter.submission.archived_at? ||
                                                             @submitter.submission.expired? ||
                                                             @submitter.submission.template&.archived_at? ||
+                                                            @submitter.viewer? ||
                                                             !Submitters::AuthorizedForForm.call(@submitter,
                                                                                                 current_user,
                                                                                                 request)
@@ -35,6 +37,10 @@ class SubmitFormDeclineController < ApplicationController
 
   private
 
+  def declining_disabled?
+    @submitter.account.account_configs.find_by(key: AccountConfig::ALLOW_TO_DECLINE_KEY)&.value == false
+  end
+
   def load_submitter
     @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
   end

app/controllers/submit_form_delegate_controller.rb

@@ -12,6 +12,7 @@ class SubmitFormDelegateController < ApplicationController
                                                             @submitter.submission.archived_at? ||
                                                             @submitter.submission.expired? ||
                                                             @submitter.submission.template&.archived_at? ||
+                                                            @submitter.viewer? ||
                                                             !Submitters::AuthorizedForForm.call(@submitter,
                                                                                                 current_user,
                                                                                                 request)

app/controllers/submit_form_download_controller.rb

@@ -14,6 +14,7 @@ class SubmitFormDownloadController < ApplicationController
     return head :unprocessable_content if @submitter.declined_at? ||
                                           @submitter.submission.archived_at? ||
                                           @submitter.submission.expired? ||
+                                          @submitter.submission.completed_at? ||
                                           @submitter.submission.template&.archived_at? ||
                                           AccountConfig.exists?(account_id: @submitter.account_id,
                                                                 key: AccountConfig::ALLOW_TO_PARTIAL_DOWNLOAD_KEY,

app/controllers/submit_form_draw_signature_controller.rb

@@ -12,6 +12,8 @@ class SubmitFormDrawSignatureController < ApplicationController
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
 
+    return redirect_to submit_form_path(@submitter.slug) if @submitter.viewer?
+
     if @submitter.submission.template&.archived_at? || @submitter.submission.archived_at? ||
        !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
       return redirect_to submit_form_path(@submitter.slug)

app/controllers/submit_form_invite_controller.rb

@@ -5,12 +5,12 @@ class SubmitFormInviteController < ApplicationController
   skip_authorization_check
 
   def create
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return head :unprocessable_content unless can_invite?(submitter)
+    return head :unprocessable_content unless can_invite?(@submitter)
 
-    invite_submitters = filter_invite_submitters(submitter, 'invite_by_uuid')
-    optional_invite_submitters = filter_invite_submitters(submitter, 'optional_invite_by_uuid')
+    invite_submitters = filter_invite_submitters(@submitter, 'invite_by_uuid')
+    optional_invite_submitters = filter_invite_submitters(@submitter, 'optional_invite_by_uuid')
 
     ApplicationRecord.transaction do
       (invite_submitters + optional_invite_submitters).each do |item|
@@ -21,18 +21,18 @@ class SubmitFormInviteController < ApplicationController
 
         email = Submissions.normalize_email(attrs[:email])
 
-        submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: submitter.account_id)
+        @submitter.submission.submitters.create!(uuid: attrs[:uuid], email:, account_id: @submitter.account_id)
 
-        SubmissionEvents.create_with_tracking_data(submitter, 'invite_party', request, { uuid: submitter.uuid })
+        SubmissionEvents.create_with_tracking_data(@submitter, 'invite_party', request, { uuid: @submitter.uuid })
       end
 
-      submitter.submission.update!(submitters_order: :preserved)
+      @submitter.submission.update!(submitters_order: :preserved)
     end
 
-    submitter.submission.submitters.reload
+    @submitter.submission.submitters.reload
 
-    if invite_submitters.all? { |s| submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
-      Submitters::SubmitValues.call(submitter, ActionController::Parameters.new(completed: 'true'), request)
+    if invite_submitters.all? { |s| @submitter.submission.submitters.any? { |e| e.uuid == s['uuid'] } }
+      Submitters::SubmitValues.call(@submitter, ActionController::Parameters.new(completed: 'true'), request)
 
       head :ok
     else
@@ -48,6 +48,7 @@ class SubmitFormInviteController < ApplicationController
       !submitter.submission.archived_at? &&
       !submitter.submission.expired? &&
       !submitter.submission.template&.archived_at? &&
+      !submitter.viewer? &&
       Submitters::AuthorizedForForm.call(submitter, current_user, request)
   end
 

app/controllers/submit_form_metadata_controller.rb

@@ -5,19 +5,13 @@ class SubmitFormMetadataController < ApplicationController
   skip_authorization_check
 
   def index
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return head :not_found if submitter.declined_at? ||
-                              submitter.completed_at? ||
-                              submitter.submission.archived_at? ||
-                              submitter.submission.expired? ||
-                              submitter.submission.template&.archived_at? ||
-                              submitter.account.archived_at? ||
-                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)
+    return head :not_found unless authorized_submitter?(@submitter)
 
-    submission = submitter.submission
+    submission = @submitter.submission
     values = submission.submitters.reduce({}) { |acc, sub| acc.merge(sub.values) }
-    schema = Submissions.filtered_conditions_schema(submission, values:, include_submitter_uuid: submitter.uuid)
+    schema = Submissions.filtered_conditions_schema(submission, values:, include_submitter_uuid: @submitter.uuid)
 
     documents = schema.filter_map do |item|
       submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] }
@@ -34,4 +28,17 @@ class SubmitFormMetadataController < ApplicationController
 
     render json: { text_runs: }
   end
+
+  private
+
+  def authorized_submitter?(submitter)
+    !submitter.declined_at? &&
+      !submitter.completed_at? &&
+      !submitter.submission.archived_at? &&
+      !submitter.submission.completed_at? &&
+      !submitter.submission.expired? &&
+      !submitter.submission.template&.archived_at? &&
+      !submitter.account.archived_at? &&
+      Submitters::AuthorizedForForm.call(submitter, current_user, request)
+  end
 end

app/controllers/submit_form_values_controller.rb

@@ -5,21 +5,21 @@ class SubmitFormValuesController < ApplicationController
   skip_authorization_check
 
   def index
-    submitter = Submitter.find_by!(slug: params[:submit_form_slug])
+    @submitter = Submitter.find_by!(slug: params[:submit_form_slug])
 
-    return render json: {} if submitter.completed_at? ||
-                              submitter.declined_at? ||
-                              submitter.submission.template&.archived_at? ||
-                              submitter.submission.archived_at? ||
-                              submitter.submission.expired? ||
-                              !Submitters::AuthorizedForForm.call(submitter, current_user, request)
+    return render json: {} if @submitter.completed_at? ||
+                              @submitter.declined_at? ||
+                              @submitter.submission.template&.archived_at? ||
+                              @submitter.submission.archived_at? ||
+                              @submitter.submission.expired? ||
+                              !Submitters::AuthorizedForForm.call(@submitter, current_user, request)
 
-    value = submitter.values[params['field_uuid']]
-    attachment = submitter.attachments.where(created_at: params[:after]..).find_by(uuid: value) if value.present?
+    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 created_at], methods: %i[url filename content_type])
-    }, head: :ok
+    }
   end
 end

app/controllers/submitters_controller.rb

@@ -13,7 +13,7 @@ class SubmittersController < ApplicationController
   def update
     submission = @submitter.submission
 
-    if @submitter.submission_events.exists?(event_type: 'start_form') || submission.archived_at? || submission.expired?
+    unless submitter_editable?(submission)
       return redirect_back fallback_location: submission_path(submission), alert: I18n.t('submitter_cannot_be_updated')
     end
 
@@ -48,11 +48,17 @@ class SubmittersController < ApplicationController
 
   private
 
+  def submitter_editable?(submission)
+    !@submitter.submission_events.exists?(event_type: 'start_form') &&
+      !@submitter.completed_at? && !@submitter.declined_at? && !submission.completed_at? &&
+      !submission.archived_at? && !submission.expired? && !submission.template&.archived_at?
+  end
+
   def maybe_resend_email_sms(submitter, params)
     if params[:send_email] == '1' && submitter.email.present?
       is_sent_recently = Docuseal.multitenant? &&
                          EmailEvent.exists?(email: submitter.email,
-                                            tag: 'submitter_invitation',
+                                            tag: %w[submitter_invitation submitter_view_invitation],
                                             emailable: submitter,
                                             event_type: 'send',
                                             created_at: 4.hours.ago..Time.current)

app/controllers/submitters_resubmit_controller.rb

@@ -5,6 +5,8 @@ class SubmittersResubmitController < ApplicationController
 
   def update
     return redirect_to submit_form_path(slug: @submitter.slug) if @submitter.email != current_user.email
+    return redirect_to submit_form_path(slug: @submitter.slug) if @submitter.completed_at.blank? ||
+                                                                  @submitter.completed_at < 1.month.ago
 
     submission = @submitter.account.submissions.new(created_by_user: current_user,
                                                     submitters_order: :preserved,

app/controllers/submitters_send_email_controller.rb

@@ -4,6 +4,8 @@ class SubmittersSendEmailController < ApplicationController
   load_and_authorize_resource :submitter
 
   def create
+    authorize!(:update, @submitter)
+
     if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
                                                         event_type: 'send_email',
                                                         created_at: 10.hours.ago..Time.current)

app/controllers/template_documents_controller.rb

@@ -10,6 +10,8 @@ class TemplateDocumentsController < ApplicationController
   end
 
   def create
+    authorize!(:update, @template)
+
     if params[:blobs].blank? && params[:files].blank?
       return render json: { error: I18n.t('file_is_missing') }, status: :unprocessable_content
     end

app/controllers/template_documents_crop_controller.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsCropController < ApplicationController
+  load_and_authorize_resource :template
+  before_action :load_attachment
+
+  rescue_from Leptonica::LeptonicaError do
+    render json: { error: I18n.t(:unable_to_save) }, status: :unprocessable_content
+  end
+
+  def index
+    render json: { corners: Leptonica.detect_document_corners(@attachment.download) }
+  end
+
+  def create
+    authorize!(:update, @template)
+
+    document = Templates::CreateDocumentCrop.call(@template, @attachment, crop_params)
+
+    render json: {
+      document: document.as_json(
+        methods: %i[metadata signed_key],
+        include: {
+          preview_images: { methods: %i[url metadata filename] }
+        }
+      )
+    }
+  end
+
+  private
+
+  def load_attachment
+    @attachment = @template.documents_attachments.find_by!(uuid: params[:attachment_uuid])
+  end
+
+  def crop_params
+    params.permit(:scan, :rotate, :flip_h, :flip_v, corners: [%i[x y]])
+  end
+end

app/controllers/template_documents_modify_controller.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsModifyController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    authorize!(:update, @template)
+
+    documents_layout =
+      params.require(:documents).map do |item|
+        item.permit(:attachment_uuid,
+                    pages: [:attachment_uuid, :page, :rotate,
+                            { redact: [%i[x y w h color]], replaced_page: %i[attachment_uuid page] }]).to_h
+      end
+
+    Templates::ModifyDocuments.call(@template, documents_layout)
+
+    render json: {
+      schema: @template.schema,
+      fields: @template.fields,
+      submitters: @template.submitters,
+      documents: @template.schema_documents.reload.preload(:blob, preview_images_attachments: :blob).as_json(
+        methods: %i[metadata signed_key],
+        include: {
+          preview_images: { methods: %i[url metadata filename] }
+        }
+      )
+    }
+  rescue Templates::ModifyDocuments::InvalidLayout
+    render json: { error: I18n.t(:unable_to_save) }, status: :unprocessable_content
+  end
+end

app/controllers/template_documents_page_objects_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class TemplateDocumentsPageObjectsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def index
+    attachment = @template.documents_attachments.find_by!(uuid: params[:attachment_uuid])
+
+    render json: Templates::ModifyDocuments.page_objects(attachment, params[:page].to_i)
+  end
+end

app/controllers/template_folders_controller.rb

@@ -30,9 +30,11 @@ class TemplateFoldersController < ApplicationController
           (@template_folders.size < 7 ? 9 : 6)
         end
 
-      @pagy, @templates = pagy_auto(@templates, limit:)
+      @pagy, @templates = pagy_auto(@templates.select_for_list, limit:)
 
-      load_related_submissions if params[:q].present? && @templates.blank?
+      if params[:q].present? && @templates.blank?
+        @related_submissions_pagy, @related_submissions = load_related_submissions(@template_folder)
+      end
     else
       @pagy, @template_folders = pagy(@template_folders, limit: FOLDERS_PER_PAGE)
 
@@ -55,11 +57,10 @@ class TemplateFoldersController < ApplicationController
 
   def selected_order
     @selected_order ||=
-      if cookies.permanent[:dashboard_templates_order].blank? ||
-         (cookies.permanent[:dashboard_templates_order] == 'used_at' && can?(:manage, :countless))
+      if can?(:manage, :countless)
         'created_at'
       else
-        cookies.permanent[:dashboard_templates_order]
+        cookies.permanent[:dashboard_templates_order].presence || 'created_at'
       end
   end
 
@@ -67,20 +68,20 @@ class TemplateFoldersController < ApplicationController
     params.require(:template_folder).permit(:name)
   end
 
-  def load_related_submissions
-    @related_submissions =
+  def load_related_submissions(template_folder)
+    related_submissions =
       Submission.accessible_by(current_ability)
                 .where(archived_at: nil)
                 .where(template_id: current_account.templates.active
-                                                   .where(folder: [@template_folder, *@template_folder.subfolders])
+                                                   .where(folder: [template_folder, *template_folder.subfolders])
                                                    .select(:id))
                 .preload(:template_accesses, :created_by_user,
                          template: :author,
                          submitters: :start_form_submission_events)
 
-    @related_submissions = Submissions.search(current_user, @related_submissions, params[:q])
-                                      .order(id: :desc)
+    related_submissions = Submissions.search(current_user, related_submissions, params[:q])
+                                     .order(id: :desc)
 
-    @related_submissions_pagy, @related_submissions = pagy_auto(@related_submissions, limit: 5)
+    pagy_auto(related_submissions.select_for_list, limit: 5)
   end
 end

app/controllers/templates_archived_controller.rb

@@ -10,11 +10,17 @@ class TemplatesArchivedController < ApplicationController
 
     @templates = Templates.search(current_user, @templates, params[:q])
 
-    @pagy, @templates = pagy_auto(@templates, limit: 12)
+    @pagy, @templates = pagy_auto(@templates.select_for_list, limit: 12)
 
     return unless params[:q].present? && @templates.blank?
 
-    @related_submissions =
+    @related_submissions_pagy, @related_submissions = load_related_submissions
+  end
+
+  private
+
+  def load_related_submissions
+    related_submissions =
       Submission.accessible_by(current_ability)
                 .joins(:template)
                 .where.not(templates: { archived_at: nil })
@@ -22,9 +28,9 @@ class TemplatesArchivedController < ApplicationController
                          template: :author,
                          submitters: :start_form_submission_events)
 
-    @related_submissions = Submissions.search(current_user, @related_submissions, params[:q])
-                                      .order(id: :desc)
+    related_submissions = Submissions.search(current_user, related_submissions, params[:q])
+                                     .order(id: :desc)
 
-    @related_submissions_pagy, @related_submissions = pagy_auto(@related_submissions, limit: 5)
+    pagy_auto(related_submissions.select_for_list, limit: 5)
   end
 end

app/controllers/templates_archived_submissions_controller.rb

@@ -10,12 +10,12 @@ class TemplatesArchivedSubmissionsController < ApplicationController
     @submissions = Submissions::Filter.call(@submissions, current_user, params)
 
     @submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
-                     @submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                     @submissions.order(completed_at: :desc)
                    else
                      @submissions.order(id: :desc)
                    end
 
-    @pagy, @submissions = pagy_auto(@submissions.preload(submitters: :start_form_submission_events))
+    @pagy, @submissions = pagy_auto(@submissions.select_for_list.preload(submitters: :start_form_submission_events))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end

app/controllers/templates_clone_and_replace_controller.rb

@@ -13,6 +13,9 @@ class TemplatesCloneAndReplaceController < ApplicationController
 
     cloned_template = Templates::Clone.call(@template, author: current_user)
     cloned_template.name = File.basename(params[:files].first.original_filename, '.*')
+
+    authorize!(:create, cloned_template)
+
     cloned_template.save!
 
     documents = Templates::ReplaceAttachments.call(cloned_template, params, extract_fields: true)

app/controllers/templates_controller.rb

@@ -14,12 +14,13 @@ class TemplatesController < ApplicationController
     submissions = Submissions::Filter.filter_by_status(submissions, params)
 
     submissions = if params[:completed_at_from].present? || params[:completed_at_to].present?
-                    submissions.order(Submitter.arel_table[:completed_at].maximum.desc)
+                    submissions.order(completed_at: :desc)
                   else
                     submissions.order(id: :desc)
                   end
 
-    @pagy, @submissions = pagy_auto(submissions.preload(:template_accesses, submitters: :start_form_submission_events))
+    @pagy, @submissions =
+      pagy_auto(submissions.select_for_list.preload(:template_accesses, submitters: :start_form_submission_events))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end
@@ -27,18 +28,7 @@ class TemplatesController < ApplicationController
   def new; end
 
   def edit
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: [:blob, { preview_images_attachments: :blob }] }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)
 
     render :edit, layout: 'plain'
   end

app/controllers/templates_dashboard_controller.rb

@@ -11,86 +11,126 @@ class TemplatesDashboardController < ApplicationController
   helper_method :selected_order
 
   def index
+    @default_folder = current_account.default_template_folder
+
     @template_folders =
       TemplateFolders.filter_active_folders(@template_folders.where(parent_folder_id: nil), @templates)
 
+    @template_folders = @template_folders.where.not(id: @default_folder.id) if params[:q].blank?
+
     @template_folders = TemplateFolders.search(@template_folders, params[:q])
     @template_folders = TemplateFolders.sort(@template_folders, current_user, selected_order)
 
-    @pagy, @template_folders = pagy(
-      @template_folders,
-      limit: FOLDERS_PER_PAGE,
-      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
-    )
+    @shared_templates = Templates.shared(current_user).active
+
+    @pagy, @template_folders, @show_default_folder, @show_shared_folder, @show_shared_inline =
+      load_folders(@template_folders, @templates, @shared_templates)
 
     if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
       @templates = @templates.none
     else
-      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
-      @templates = filter_templates(@templates).preload(:author, :template_accesses)
-      @templates = Templates::Order.call(@templates, current_user, selected_order)
+      if @show_shared_inline
+        @templates = @shared_templates.preload(:template_sharings)
+      else
+        @templates = @templates.active
+        @templates = @templates.where(folder_id: @default_folder.id) if params[:q].blank?
+      end
 
-      limit =
-        if @template_folders.size < 4
-          TEMPLATES_PER_PAGE
-        else
-          (@template_folders.size < 7 ? 9 : 6)
-        end
+      @pagy, @templates = load_templates(@templates.select_for_list, @pagy.count,
+                                         show_shared_inline: @show_shared_inline)
 
-      @pagy, @templates = pagy_auto(@templates, limit:)
-
-      load_related_submissions if params[:q].present? && @templates.blank?
+      if params[:q].present? && @templates.blank?
+        @related_submissions_pagy, @related_submissions = load_related_submissions
+      end
     end
   end
 
   private
 
-  def filter_templates(templates)
-    rel = templates.active
+  def load_templates(templates, folders_count, show_shared_inline: false)
+    templates = templates.preload(:author, :template_accesses)
 
-    if params[:q].blank?
-      if Docuseal.multitenant? ? current_account.testing? : current_account.linked_account_account
-        shared_account_ids = [current_user.account_id]
-        shared_account_ids << TemplateSharing::ALL_ID if !Docuseal.multitenant? && !current_account.testing?
-
-        shared_template_ids = TemplateSharing.where(account_id: shared_account_ids).select(:template_id)
-
-        rel = Template.where(
-          Template.arel_table[:id].in(
-            rel.where(folder_id: current_account.default_template_folder.id).select(:id).arel
-               .union(:all, shared_template_ids.arel)
-          )
-        )
+    templates =
+      if show_shared_inline
+        Templates.search_shared(current_user, templates, params[:q])
       else
-        rel = rel.where(folder_id: current_account.default_template_folder.id)
+        Templates.search(current_user, templates, params[:q])
       end
-    end
 
-    Templates.search(current_user, rel, params[:q])
+    templates = Templates::Order.call(templates, current_user, selected_order)
+
+    limit =
+      if folders_count < 4
+        TEMPLATES_PER_PAGE
+      else
+        (folders_count < 7 ? 9 : 6)
+      end
+
+    pagy_auto(templates, limit:)
+  end
+
+  def load_folders(template_folders, templates, shared_templates)
+    if params[:q].present?
+      pagy(template_folders, limit: FOLDERS_PER_PAGE,
+                             page: template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1)
+    else
+      load_folders_with_pinned(template_folders, templates, shared_templates)
+    end
+  end
+
+  def load_folders_with_pinned(template_folders, templates, shared_templates)
+    folders_count = template_folders.count
+
+    shared_exists = shared_templates.exists?
+    default_has_templates = templates.active.exists?(folder_id: current_account.default_template_folder.id)
+
+    show_inline_folders =
+      folders_count + (shared_exists && default_has_templates ? 1 : 0) <= SHOW_TEMPLATES_FOLDERS_THRESHOLD
+
+    show_shared_inline = shared_exists && !default_has_templates && show_inline_folders
+
+    show_shared_in_grid = shared_exists && !show_shared_inline
+    show_default_in_grid = !show_inline_folders && default_has_templates
+
+    pinned_count = (show_default_in_grid ? 1 : 0) + (show_shared_in_grid ? 1 : 0)
+
+    pagy = Pagy::Offset.new(count: folders_count + pinned_count,
+                            page: show_inline_folders ? 1 : [params[:page].to_s.to_i, 1].max,
+                            limit: FOLDERS_PER_PAGE,
+                            raise_range_error: true)
+
+    show_default_folder = show_default_in_grid && pagy.page == 1
+    show_shared_folder = show_shared_in_grid && pagy.page == 1
+
+    folder_offset = pagy.page == 1 ? 0 : pagy.offset - pinned_count
+    folder_limit = pagy.page == 1 ? FOLDERS_PER_PAGE - pinned_count : FOLDERS_PER_PAGE
+
+    template_folders = template_folders.offset(folder_offset).limit(folder_limit)
+
+    [pagy, template_folders, show_default_folder, show_shared_folder, show_shared_inline]
   end
 
   def selected_order
     @selected_order ||=
-      if cookies.permanent[:dashboard_templates_order].blank? ||
-         (cookies.permanent[:dashboard_templates_order] == 'used_at' && can?(:manage, :countless))
+      if can?(:manage, :countless)
         'created_at'
       else
-        cookies.permanent[:dashboard_templates_order]
+        cookies.permanent[:dashboard_templates_order].presence || 'created_at'
       end
   end
 
   def load_related_submissions
-    @related_submissions = Submission.accessible_by(current_ability)
-                                     .left_joins(:template)
-                                     .where(archived_at: nil)
-                                     .where(templates: { archived_at: nil })
-                                     .preload(:template_accesses, :created_by_user,
-                                              template: :author,
-                                              submitters: :start_form_submission_events)
+    related_submissions = Submission.accessible_by(current_ability)
+                                    .left_joins(:template)
+                                    .where(archived_at: nil)
+                                    .where(templates: { archived_at: nil })
+                                    .preload(:template_accesses, :created_by_user,
+                                             template: :author,
+                                             submitters: :start_form_submission_events)
 
-    @related_submissions = Submissions.search(current_user, @related_submissions, params[:q])
-                                      .order(id: :desc)
+    related_submissions = Submissions.search(current_user, related_submissions, params[:q])
+                                     .order(id: :desc)
 
-    @related_submissions_pagy, @related_submissions = pagy_auto(@related_submissions, limit: 5)
+    pagy_auto(related_submissions.select_for_list, limit: 5)
   end
 end

app/controllers/templates_detect_fields_controller.rb

@@ -16,7 +16,12 @@ class TemplatesDetectFieldsController < ApplicationController
     page_number = params[:page].presence&.to_i
 
     documents.each do |document|
-      io = StringIO.new(document.download)
+      io =
+        if document.image?
+          StringIO.new(document.preview_images.joins(:blob).find_by(blob: { filename: ['0.png', '0.jpg'] }).download)
+        else
+          StringIO.new(document.download)
+        end
 
       Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
         sse.write({ attachment_uuid:, page:, fields: })

app/controllers/templates_folders_controller.rb

@@ -6,6 +6,8 @@ class TemplatesFoldersController < ApplicationController
   def edit; end
 
   def update
+    authorize!(:update, @template)
+
     name = [params[:parent_name], params[:name]].compact_blank.join(' / ')
 
     @template.folder = TemplateFolders.find_or_create_by_name(current_user, name)

app/controllers/templates_preferences_controller.rb

@@ -5,6 +5,8 @@ class TemplatesPreferencesController < ApplicationController
 
   RESETTABLE_PREFERENCE_KEYS = {
     AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY => %w[request_email_subject request_email_body submitters],
+    AccountConfig::SUBMITTER_VIEW_INVITATION_EMAIL_KEY => %w[invitation_view_email_subject
+                                                             invitation_view_email_body],
     AccountConfig::SUBMITTER_INVITATION_REMINDER_EMAIL_KEY => %w[invitation_reminder_email_subject
                                                                  invitation_reminder_email_body],
     AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => %w[documents_copy_email_subject documents_copy_email_body],
@@ -48,12 +50,12 @@ class TemplatesPreferencesController < ApplicationController
   def template_params
     params.require(:template).permit(
       preferences: %i[bcc_completed request_email_subject request_email_body
+                      invitation_view_email_subject invitation_view_email_body
                       invitation_reminder_email_subject invitation_reminder_email_body
                       documents_copy_email_subject documents_copy_email_body
                       documents_copy_email_enabled documents_copy_email_attach_audit
                       documents_copy_email_attach_documents documents_copy_email_reply_to
-                      completed_notification_email_attach_documents
-                      completed_redirect_url validate_unique_submitters
+                      completed_notification_email_attach_documents completed_redirect_url validate_unique_submitters
                       require_all_submitters submitters_order require_phone_2fa require_email_2fa
                       default_expire_at_duration shared_link_2fa default_expire_at request_email_enabled
                       completed_notification_email_subject completed_notification_email_body

app/controllers/templates_preview_controller.rb

@@ -4,18 +4,7 @@ class TemplatesPreviewController < ApplicationController
   load_and_authorize_resource :template
 
   def show
-    ActiveRecord::Associations::Preloader.new(
-      records: [@template],
-      associations: [{ schema_documents: { preview_images_attachments: :blob } }]
-    ).call
-
-    @template_data =
-      @template.as_json.merge(
-        documents: @template.schema_documents.as_json(
-          methods: %i[metadata signed_key],
-          include: { preview_images: { methods: %i[url metadata filename] } }
-        )
-      ).to_json
+    @template_data = Templates.serialize_for_builder(@template)
 
     render :show, layout: 'plain'
   end

app/controllers/templates_restore_controller.rb

@@ -4,6 +4,8 @@ class TemplatesRestoreController < ApplicationController
   load_and_authorize_resource :template
 
   def create
+    authorize!(:destroy, @template)
+
     @template.update!(archived_at: nil)
 
     WebhookUrls.enqueue_events(@template, 'template.updated')

app/controllers/templates_shared_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class TemplatesSharedController < ApplicationController
+  def index
+    authorize!(:read, Template)
+
+    @is_archived = params[:archived] == 'true'
+
+    @templates = Templates.shared(current_user)
+
+    @has_archived = !@is_archived && @templates.archived.exists?
+
+    @templates = @is_archived ? @templates.archived : @templates.active
+
+    @templates = @templates.preload(:author, :template_accesses, :template_sharings)
+                           .order(id: :desc)
+
+    @templates = Templates.search_shared(current_user, @templates, params[:q])
+
+    @pagy, @templates = pagy_auto(@templates.select_for_list, limit: 12)
+
+    return unless params[:q].present? && @templates.blank?
+
+    @related_submissions_pagy, @related_submissions = load_related_submissions(is_archived: @is_archived)
+  end
+
+  private
+
+  def load_related_submissions(is_archived:)
+    shared_templates = Templates.shared(current_user)
+    shared_templates = is_archived ? shared_templates.archived : shared_templates.active
+
+    related_submissions =
+      Submission.accessible_by(current_ability)
+                .where(template_id: shared_templates.select(:id))
+                .preload(:template_accesses, :created_by_user,
+                         template: :author,
+                         submitters: :start_form_submission_events)
+
+    related_submissions = related_submissions.where(archived_at: nil) unless is_archived
+
+    related_submissions = Submissions.search(current_user, related_submissions, params[:q])
+                                     .order(id: :desc)
+
+    pagy_auto(related_submissions.select_for_list, limit: 5)
+  end
+end

app/controllers/templates_uploads_controller.rb

@@ -5,7 +5,9 @@ class TemplatesUploadsController < ApplicationController
 
   layout 'plain'
 
-  def show; end
+  def show
+    redirect_to root_path if params[:url].blank?
+  end
 
   def create
     url_params = create_file_params_from_url if params[:url].present?

app/controllers/templates_versions_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class TemplatesVersionsController < ApplicationController
+  load_and_authorize_resource :template
+
+  def index
+    versions = @template.template_versions.order(id: :desc).preload(:author)
+
+    render json: versions.as_json(TemplateVersions::SERIALIZE_PARAMS)
+  end
+
+  def show
+    version = @template.template_versions.find(params[:id])
+
+    render json: TemplateVersions.serialize(version)
+  end
+
+  def create
+    authorize!(:update, @template)
+
+    TemplateVersions.find_or_create_for(@template, author: current_user)
+
+    head :ok
+  end
+end

app/controllers/testing_accounts_controller.rb

@@ -3,7 +3,7 @@
 class TestingAccountsController < ApplicationController
   skip_authorization_check only: :destroy
 
-  def show
+  def create
     authorize!(:manage, current_account)
     authorize!(:manage, current_user)
 

app/controllers/user_initials_controller.rb

@@ -11,6 +11,12 @@ class UserInitialsController < ApplicationController
 
     return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_initials') if file.blank?
 
+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
     blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                   filename: file.original_filename,
                                                   content_type: file.content_type)

app/controllers/user_signatures_controller.rb

@@ -11,6 +11,12 @@ class UserSignaturesController < ApplicationController
 
     return redirect_to settings_profile_index_path, notice: I18n.t('unable_to_save_signature') if file.blank?
 
+    extension = File.extname(file.original_filename).delete_prefix('.').downcase
+
+    if Submitters::DANGEROUS_EXTENSIONS.include?(extension)
+      raise Submitters::MaliciousFileExtension, "File type '.#{extension}' is not allowed."
+    end
+
     blob = ActiveStorage::Blob.create_and_upload!(io: file.open,
                                                   filename: file.original_filename,
                                                   content_type: file.content_type)

app/controllers/webhook_hmac_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class WebhookHmacController < ApplicationController
+  load_and_authorize_resource :webhook_url, parent: false
+
+  def show; end
+end

app/javascript/application.js

@@ -21,6 +21,7 @@ import SubmittersAutocomplete from './elements/submitter_autocomplete'
 import FolderAutocomplete from './elements/folder_autocomplete'
 import SignatureForm from './elements/signature_form'
 import SubmitForm from './elements/submit_form'
+import ConvertUpload from './elements/convert_upload'
 import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleSubmit from './elements/toggle_submit'
@@ -41,19 +42,20 @@ import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
 import MarkdownEditor from './elements/markdown_editor'
+import HtmlEditor from './elements/html_editor'
 import MountOnClick from './elements/mount_on_click'
 import RemoveOnEvent from './elements/remove_on_event'
 import ScrollTo from './elements/scroll_to'
 import SetValue from './elements/set_value'
 import ReviewForm from './elements/review_form'
 import ShowOnValue from './elements/show_on_value'
-import CustomValidation from './elements/custom_validation'
 import ToggleClasses from './elements/toggle_classes'
 import AutosizeField from './elements/autosize_field'
 import GoogleDriveFilePicker from './elements/google_drive_file_picker'
 import OpenModal from './elements/open_modal'
 import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
+import ConfirmUpload from './elements/confirm_upload'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -112,6 +114,7 @@ safeRegisterElement('submitters-autocomplete', SubmittersAutocomplete)
 safeRegisterElement('folder-autocomplete', FolderAutocomplete)
 safeRegisterElement('signature-form', SignatureForm)
 safeRegisterElement('submit-form', SubmitForm)
+safeRegisterElement('convert-upload', ConvertUpload)
 safeRegisterElement('prompt-password', PromptPassword)
 safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
@@ -133,19 +136,20 @@ safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
 safeRegisterElement('markdown-editor', MarkdownEditor)
+safeRegisterElement('html-editor', HtmlEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
 safeRegisterElement('remove-on-event', RemoveOnEvent)
 safeRegisterElement('scroll-to', ScrollTo)
 safeRegisterElement('set-value', SetValue)
 safeRegisterElement('review-form', ReviewForm)
 safeRegisterElement('show-on-value', ShowOnValue)
-safeRegisterElement('custom-validation', CustomValidation)
 safeRegisterElement('toggle-classes', ToggleClasses)
 safeRegisterElement('autosize-field', AutosizeField)
 safeRegisterElement('google-drive-file-picker', GoogleDriveFilePicker)
 safeRegisterElement('open-modal', OpenModal)
 safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
+safeRegisterElement('confirm-upload', ConfirmUpload)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {
@@ -160,6 +164,7 @@ safeRegisterElement('template-builder', class extends HTMLElement {
     this.app = createApp(TemplateBuilder, {
       template,
       customFields: reactive(JSON.parse(this.dataset.customFields || '[]')),
+      dateFormats: JSON.parse(this.dataset.dateFormats || '[]'),
       dynamicDocuments: reactive(JSON.parse(this.dataset.dynamicDocuments || '[]')),
       backgroundColor: '#faf7f5',
       locale: this.dataset.locale,
@@ -170,6 +175,8 @@ safeRegisterElement('template-builder', class extends HTMLElement {
       withLogo: this.dataset.withLogo !== 'false',
       withFieldsDetection: this.dataset.withFieldsDetection === 'true',
       withDetectExistingFields: this.dataset.withDetectExistingFields === 'true',
+      withRevisions: true,
+      withRevisionsMenu: this.dataset.withRevisionsMenu === 'true',
       editable: this.dataset.editable !== 'false',
       authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       withCustomFields: true,
@@ -195,10 +202,35 @@ safeRegisterElement('template-builder', class extends HTMLElement {
   }
 
   onSubmit = (e) => {
-    if (e.detail.success && e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
-      e.detail.fetchResponse.response.json().then((data) => {
-        this.component.template.submitters = data.submitters
-      })
+    if (e.detail.success) {
+      if (e.detail?.formSubmission?.formElement?.id === 'submitters_form') {
+        e.detail.fetchResponse.response.json().then((data) => {
+          this.component.template.submitters = data.submitters
+        })
+      }
+
+      if (e.detail?.formSubmission?.formElement?.action?.endsWith('/prefillable_fields')) {
+        e.detail.fetchResponse.response.text().then((data) => {
+          const doc = new DOMParser().parseFromString(data, 'text/html')
+          const fragment = doc.querySelector('turbo-stream template').content
+
+          const prefillableUuidsIndex = {}
+
+          fragment.querySelectorAll('[name="field_uuid"]').forEach((field) => {
+            prefillableUuidsIndex[field.value] = true
+          })
+
+          this.component.template.fields.forEach((field) => {
+            if (prefillableUuidsIndex[field.uuid]) {
+              field.prefillable = true
+              field.readonly = true
+            } else if (field.prefillable) {
+              delete field.prefillable
+              delete field.readonly
+            }
+          })
+        })
+      }
     }
   }
 

app/javascript/draw.js

@@ -11,6 +11,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
     this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return
 
         const { width, height } = this.canvas
 
@@ -89,7 +90,7 @@ window.customElements.define('draw-signature', class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/elements/confirm_upload.js

@@ -0,0 +1,27 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = [
+    'prompt',
+    'processing',
+    'logo'
+  ]
+
+  connectedCallback () {
+    this.form.addEventListener('submit', this.onSubmit)
+  }
+
+  disconnectedCallback () {
+    this.form.removeEventListener('submit', this.onSubmit)
+  }
+
+  onSubmit = () => {
+    this.prompt.classList.add('hidden')
+    this.processing.classList.remove('hidden')
+    this.logo.classList.add('animate-bounce')
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+})

app/javascript/elements/convert_upload.js

@@ -0,0 +1,73 @@
+export function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
+export async function convertImagesInInput (input) {
+  if (!input.files || input.files.length === 0) return
+
+  const dt = new DataTransfer()
+  let didConvert = false
+
+  for (const file of Array.from(input.files)) {
+    let converted = file
+
+    try {
+      if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+        converted = await convertImage(file, 'image/png')
+        didConvert = true
+      } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+        converted = await convertImage(file, 'image/jpeg', 0.9)
+        didConvert = true
+      }
+    } catch (e) {
+      alert(e.message)
+    }
+
+    dt.items.add(converted)
+  }
+
+  if (didConvert) {
+    input.files = dt.files
+  }
+}
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input[type="file"]')
+    const form = input.form
+
+    input.addEventListener('change', async () => {
+      await convertImagesInInput(input)
+
+      form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+
+      form.requestSubmit()
+    })
+  }
+}

app/javascript/elements/custom_validation.js

@@ -1,14 +0,0 @@
-export default class extends HTMLElement {
-  connectedCallback () {
-    const input = this.querySelector('input')
-    const invalidMessage = this.dataset.invalidMessage || ''
-
-    input.addEventListener('invalid', () => {
-      input.setCustomValidity(input.value ? invalidMessage : '')
-    })
-
-    input.addEventListener('input', () => {
-      input.setCustomValidity('')
-    })
-  }
-}

app/javascript/elements/dashboard_dropzone.js

@@ -1,4 +1,5 @@
 import { target, targets, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'
 
 const loadingIconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -150,12 +151,16 @@ export default targetable(class extends HTMLElement {
     if (!this.isLoading) this.hideDraghover()
   }
 
-  uploadFiles (files, url) {
+  async uploadFiles (files, url) {
     this.isLoading = true
 
     this.form.action = url
 
-    this.form.querySelector('[type="file"]').files = files
+    const input = this.form.querySelector('[type="file"]')
+
+    input.files = files
+
+    await convertImagesInInput(input)
 
     this.form.querySelector('[type="submit"]').click()
   }

app/javascript/elements/email_editor.js

@@ -9,8 +9,9 @@ function loadCodeMirror () {
       import(/* webpackChunkName: "email-editor" */ '@codemirror/commands'),
       import(/* webpackChunkName: "email-editor" */ '@codemirror/language'),
       import(/* webpackChunkName: "email-editor" */ '@codemirror/lang-html'),
+      import(/* webpackChunkName: "email-editor" */ '@codemirror/lint'),
       import(/* webpackChunkName: "email-editor" */ '@specious/htmlflow')
-    ]).then(([view, commands, language, html, htmlflow]) => {
+    ]).then(([view, commands, language, html, lint, htmlflow]) => {
       return {
         minimalSetup: [
           commands.history(),
@@ -19,6 +20,8 @@ function loadCodeMirror () {
         ],
         EditorView: view.EditorView,
         html: html.html,
+        htmlLanguage: html.htmlLanguage,
+        linter: lint.linter,
         htmlflow: htmlflow.default || htmlflow
       }
     })
@@ -46,6 +49,70 @@ export default targetable(class extends HTMLElement {
 
     this.previewViewTab.addEventListener('click', this.showPreviewView)
     this.codeViewTab.addEventListener('click', this.showCodeView)
+
+    this.form = this.closest('form')
+    this.form?.addEventListener('submit', this.validateOnSubmit)
+  }
+
+  disconnectedCallback () {
+    this.form?.removeEventListener('submit', this.validateOnSubmit)
+  }
+
+  validateOnSubmit = (e) => {
+    if (!this.htmlLanguage) return
+
+    const bodyType = this.form.querySelector('input[name$="[body_type]"]:checked')?.value
+
+    if (bodyType && bodyType !== 'html') return
+
+    const diagnostics = this.buildDiagnostics(this.input.value)
+
+    if (diagnostics.length === 0) return
+
+    e.preventDefault()
+
+    this.showCodeView()
+
+    const pos = Math.min(diagnostics[0].from, this.editorView.state.doc.length)
+
+    this.editorView.dispatch({ selection: { anchor: pos }, scrollIntoView: true })
+    this.editorView.focus()
+
+    alert(diagnostics[0].message)
+  }
+
+  buildDiagnostics (value) {
+    const diagnostics = []
+
+    if (!value.trim()) return diagnostics
+
+    if (!/^\s*(<!doctype[^>]*>\s*)?<html/i.test(value)) {
+      diagnostics.push({
+        from: 0,
+        to: Math.min(5, value.length),
+        severity: 'error',
+        message: 'The email template must start with the <html> tag'
+      })
+    }
+
+    const seen = new Set()
+
+    this.htmlLanguage.parser.parse(value).iterate({
+      enter: (node) => {
+        if (!node.type.isError || seen.has(node.from) || seen.size >= 20) return
+
+        seen.add(node.from)
+
+        diagnostics.push({
+          from: node.from,
+          to: Math.min(node.to + 1, value.length),
+          severity: 'error',
+          message: 'The email template contains invalid HTML'
+        })
+      }
+    })
+
+    return diagnostics
   }
 
   showCodeView = () => {
@@ -76,7 +143,9 @@ export default targetable(class extends HTMLElement {
     this.input = this.querySelector('input[type="hidden"]')
     this.input.style.display = 'none'
 
-    const { EditorView, minimalSetup, html, htmlflow } = await loadCodeMirror()
+    const { EditorView, minimalSetup, html, htmlLanguage, linter, htmlflow } = await loadCodeMirror()
+
+    this.htmlLanguage = htmlLanguage
 
     this.editorView = new EditorView({
       doc: this.input.value,
@@ -85,8 +154,11 @@ export default targetable(class extends HTMLElement {
         html(),
         minimalSetup,
         EditorView.lineWrapping,
+        linter((view) => this.buildDiagnostics(view.state.doc.toString()), { delay: 600 }),
         EditorView.updateListener.of(update => {
-          if (update.docChanged) this.input.value = update.state.doc.toString()
+          if (update.docChanged) {
+            this.input.value = update.state.doc.toString()
+          }
         }),
         EditorView.theme({
           '&': {

app/javascript/elements/file_dropzone.js

@@ -1,5 +1,6 @@
 import { actionable } from '@github/catalyst/lib/actionable'
 import { target, targetable } from '@github/catalyst/lib/targetable'
+import { convertImagesInInput } from './convert_upload'
 
 export default actionable(targetable(class extends HTMLElement {
   static [target.static] = [
@@ -38,17 +39,21 @@ export default actionable(targetable(class extends HTMLElement {
     this.classList.add('border-base-300', 'hover:bg-base-200/30')
   }
 
-  onDrop (e) {
+  async onDrop (e) {
     e.preventDefault()
 
     this.input.files = e.dataTransfer.files
 
-    this.uploadFiles(e.dataTransfer.files)
+    await convertImagesInInput(this.input)
+
+    this.uploadFiles(this.input.files)
   }
 
-  onSelectFiles (e) {
+  async onSelectFiles (e) {
     e.preventDefault()
 
+    await convertImagesInInput(this.input)
+
     this.uploadFiles(this.input.files)
   }
 

app/javascript/elements/html_editor.js

@@ -0,0 +1,667 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { actionable } from '@github/catalyst/lib/actionable'
+import { LinkTooltip } from './markdown_editor'
+
+async function loadTiptap () {
+  const [core, document, text, hardBreak, gapcursor, dropcursor, extensions, pmState, pmView] = await Promise.all([
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/core'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-document'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-text'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-hard-break'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-gapcursor'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extension-dropcursor'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/extensions'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/state'),
+    import(/* webpackChunkName: "markdown-editor" */ '@tiptap/pm/view')
+  ])
+
+  return {
+    Editor: core.Editor,
+    Extension: core.Extension,
+    Node: core.Node,
+    Mark: core.Mark,
+    Document: document.default || document,
+    Text: text.default || text,
+    HardBreak: hardBreak.default || hardBreak,
+    Gapcursor: gapcursor.default || gapcursor,
+    Dropcursor: dropcursor.default || dropcursor,
+    UndoRedo: extensions.UndoRedo,
+    Plugin: pmState.Plugin,
+    Decoration: pmView.Decoration,
+    DecorationSet: pmView.DecorationSet
+  }
+}
+
+const editorStylesheet = new CSSStyleSheet()
+
+editorStylesheet.replaceSync(`
+:host {
+  display: block;
+  max-height: 360px;
+  overflow: auto;
+  border-radius: 0 0 1rem 1rem;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  outline: none;
+  min-height: 220px;
+  padding: 12px;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+.variable-highlight {
+  background-color: #fef3c7;
+  padding: 1px 2px;
+  border-radius: 4px;
+}
+`)
+
+const DROP_ATTRS = [
+  'srcdoc', 'xlink:href', 'srcset', 'action', 'formaction', 'poster',
+  'background', 'data', 'cite', 'ping', 'longdesc', 'manifest', 'profile'
+]
+
+const SAFE_URL_REGEXP = /^(?:https?:\/\/|data:image\/|blob:|mailto:|tel:|\{|#)/i
+
+function isSafeAttr (name, value) {
+  const lowerName = name.toLowerCase()
+
+  if (lowerName.startsWith('on') || DROP_ATTRS.includes(lowerName)) return false
+  if ((lowerName === 'href' || lowerName === 'src') && !SAFE_URL_REGEXP.test(value.trim())) return false
+
+  return true
+}
+
+function collectDomAttrs (dom) {
+  const attrs = {}
+
+  for (let i = 0; i < dom.attributes.length; i++) {
+    const { name, value } = dom.attributes[i]
+
+    if (isSafeAttr(name, value)) attrs[name] = value
+  }
+
+  return { htmlAttrs: attrs }
+}
+
+function collectSpanDomAttrs (dom) {
+  const result = collectDomAttrs(dom)
+
+  if (result.htmlAttrs.style) {
+    const temp = document.createElement('span')
+
+    temp.style.cssText = result.htmlAttrs.style
+
+    if (['bold', '700'].includes(temp.style.fontWeight)) {
+      temp.style.removeProperty('font-weight')
+    }
+
+    if (temp.style.fontStyle === 'italic') {
+      temp.style.removeProperty('font-style')
+    }
+
+    if (temp.style.textDecoration === 'underline') {
+      temp.style.removeProperty('text-decoration')
+    }
+
+    if (temp.style.cssText) {
+      result.htmlAttrs.style = temp.style.cssText
+    } else {
+      delete result.htmlAttrs.style
+    }
+  }
+
+  return result
+}
+
+function buildExtensions ({ Node, Mark, Extension, Plugin, Decoration, DecorationSet }) {
+  const blockNode = (name, tag, content, extra = {}) => Node.create({
+    name,
+    group: 'block',
+    content: content || 'block+',
+    ...extra,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag, getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ node }) {
+      return [tag, node.attrs.htmlAttrs, 0]
+    }
+  })
+
+  const attrsMark = (name, tag) => Mark.create({
+    name,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag, getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ mark }) {
+      return [tag, mark.attrs.htmlAttrs, 0]
+    }
+  })
+
+  const SpanMark = Mark.create({
+    name: 'span',
+    excludes: '',
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag: 'span', getAttrs: collectSpanDomAttrs }]
+    },
+    renderHTML ({ mark }) {
+      return ['span', mark.attrs.htmlAttrs, 0]
+    }
+  })
+
+  const toggleMark = (name, renderTag, parseRules, shortcuts) => Mark.create({
+    name,
+    parseHTML () {
+      return parseRules
+    },
+    renderHTML () {
+      return [renderTag, 0]
+    },
+    addCommands () {
+      const commandName = `toggle${name[0].toUpperCase()}${name.slice(1)}`
+
+      return {
+        [commandName]: () => ({ commands }) => commands.toggleMark(name)
+      }
+    },
+    addKeyboardShortcuts () {
+      return {
+        [shortcuts]: () => this.editor.commands.toggleMark(name)
+      }
+    }
+  })
+
+  const Heading = Node.create({
+    name: 'heading',
+    group: 'block',
+    content: 'inline*',
+    addAttributes () {
+      return {
+        htmlAttrs: { default: {} },
+        level: { default: 1 }
+      }
+    },
+    parseHTML () {
+      return [1, 2, 3, 4, 5, 6].map((level) => ({
+        tag: `h${level}`,
+        getAttrs: (dom) => ({ ...collectDomAttrs(dom), level })
+      }))
+    },
+    renderHTML ({ node }) {
+      return [`h${node.attrs.level}`, node.attrs.htmlAttrs, 0]
+    }
+  })
+
+  const ImageNode = Node.create({
+    name: 'image',
+    inline: true,
+    group: 'inline',
+    draggable: true,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag: 'img', getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ node }) {
+      return ['img', node.attrs.htmlAttrs]
+    }
+  })
+
+  const HrNode = Node.create({
+    name: 'horizontalRule',
+    group: 'block',
+    atom: true,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag: 'hr', getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ node }) {
+      return ['hr', node.attrs.htmlAttrs]
+    }
+  })
+
+  const StyleNode = Node.create({
+    name: 'style',
+    group: 'block',
+    atom: true,
+    selectable: false,
+    addAttributes () {
+      return {
+        htmlAttrs: { default: {} },
+        css: { default: '' }
+      }
+    },
+    parseHTML () {
+      return [{ tag: 'style', getAttrs: (dom) => ({ ...collectDomAttrs(dom), css: dom.textContent }) }]
+    },
+    renderHTML ({ node }) {
+      return ['style', node.attrs.htmlAttrs, node.attrs.css]
+    }
+  })
+
+  const EmptySpanNode = Node.create({
+    name: 'emptySpan',
+    inline: true,
+    group: 'inline',
+    atom: true,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{
+        tag: 'span',
+        priority: 60,
+        getAttrs (dom) {
+          if (dom.childNodes.length === 0 && dom.attributes.length > 0) {
+            return collectDomAttrs(dom)
+          }
+
+          return false
+        }
+      }]
+    },
+    renderHTML ({ node }) {
+      return ['span', node.attrs.htmlAttrs]
+    }
+  })
+
+  const LinkMark = Mark.create({
+    name: 'link',
+    inclusive: true,
+    addAttributes () {
+      return { htmlAttrs: { default: {} } }
+    },
+    parseHTML () {
+      return [{ tag: 'a', getAttrs: collectDomAttrs }]
+    },
+    renderHTML ({ mark }) {
+      return ['a', mark.attrs.htmlAttrs, 0]
+    },
+    addCommands () {
+      return {
+        setLink: ({ href }) => ({ editor, commands }) => {
+          const htmlAttrs = { ...(editor.getAttributes('link').htmlAttrs || {}), href }
+
+          return commands.setMark('link', { htmlAttrs })
+        },
+        unsetLink: () => ({ commands }) => commands.unsetMark('link', { extendEmptyMarkRange: true })
+      }
+    }
+  })
+
+  const buildDecorations = (doc) => {
+    const decorations = []
+    const regex = /\{\{?[a-zA-Z0-9_.-]+\}\}?/g
+
+    doc.descendants((node, pos) => {
+      if (!node.isText) return
+
+      let match
+
+      while ((match = regex.exec(node.text)) !== null) {
+        decorations.push(
+          Decoration.inline(pos + match.index, pos + match.index + match[0].length, {
+            class: 'variable-highlight'
+          })
+        )
+      }
+    })
+
+    return DecorationSet.create(doc, decorations)
+  }
+
+  const VariableHighlight = Extension.create({
+    name: 'variableHighlight',
+    addProseMirrorPlugins () {
+      return [new Plugin({
+        state: {
+          init (_, { doc }) {
+            return buildDecorations(doc)
+          },
+          apply (tr, oldSet) {
+            return tr.docChanged ? buildDecorations(tr.doc) : oldSet
+          }
+        },
+        props: {
+          decorations (state) {
+            return this.getState(state)
+          }
+        }
+      })]
+    }
+  })
+
+  return [
+    blockNode('paragraph', 'p', 'inline*'),
+    Heading,
+    blockNode('section', 'section'),
+    blockNode('article', 'article', null, { isolating: true }),
+    blockNode('header', 'header', null, { isolating: true }),
+    blockNode('footer', 'footer', null, { isolating: true }),
+    blockNode('div', 'div'),
+    blockNode('center', 'center'),
+    blockNode('blockquote', 'blockquote'),
+    blockNode('pre', 'pre'),
+    blockNode('orderedList', 'ol', '(listItem | block)+'),
+    blockNode('bulletList', 'ul', '(listItem | block)+'),
+    blockNode('listItem', 'li', 'block+', { group: null }),
+    blockNode('table', 'table', '(colgroup | tableHead | tableBody | tableFoot | tableRow)+'),
+    blockNode('tableHead', 'thead', 'tableRow+', { group: null }),
+    blockNode('tableBody', 'tbody', 'tableRow+', { group: null }),
+    blockNode('tableFoot', 'tfoot', 'tableRow+', { group: null }),
+    blockNode('tableRow', 'tr', '(tableCell | tableHeader)+', { group: null }),
+    blockNode('tableCell', 'td', 'block*', { group: null }),
+    blockNode('tableHeader', 'th', 'block*', { group: null }),
+    blockNode('colgroup', 'colgroup', 'col*', { group: null }),
+    Node.create({
+      name: 'col',
+      atom: true,
+      addAttributes () {
+        return { htmlAttrs: { default: {} } }
+      },
+      parseHTML () {
+        return [{ tag: 'col', getAttrs: collectDomAttrs }]
+      },
+      renderHTML ({ node }) {
+        return ['col', node.attrs.htmlAttrs]
+      }
+    }),
+    ImageNode,
+    HrNode,
+    StyleNode,
+    EmptySpanNode,
+    SpanMark,
+    LinkMark,
+    toggleMark('bold', 'strong', [{ tag: 'strong' }, { tag: 'b' }, { style: 'font-weight=bold' }, { style: 'font-weight=700' }], 'Mod-b'),
+    toggleMark('italic', 'em', [{ tag: 'em' }, { tag: 'i' }, { style: 'font-style=italic' }], 'Mod-i'),
+    toggleMark('underline', 'u', [{ tag: 'u' }, { style: 'text-decoration=underline' }], 'Mod-u'),
+    toggleMark('strike', 's', [{ tag: 's' }, { tag: 'del' }, { tag: 'strike' }, { style: 'text-decoration=line-through' }], 'Mod-Shift-s'),
+    attrsMark('subscript', 'sub'),
+    attrsMark('superscript', 'sup'),
+    VariableHighlight
+  ]
+}
+
+export default actionable(targetable(class extends HTMLElement {
+  static [target.static] = [
+    'textarea',
+    'editorElement',
+    'boldButton',
+    'italicButton',
+    'underlineButton',
+    'linkButton',
+    'linkTooltipTemplate'
+  ]
+
+  async connectedCallback () {
+    if (!this.textarea || !this.editorElement) return
+
+    this.textarea.style.display = 'none'
+    this.adjustShortcutsForPlatform()
+
+    const tiptap = await loadTiptap()
+
+    const { Editor, Extension, Document, Text, HardBreak, UndoRedo, Gapcursor, Dropcursor } = tiptap
+
+    this.emailDocument = new DOMParser().parseFromString(this.textarea.value, 'text/html')
+
+    const shadow = this.editorElement.attachShadow({ mode: 'open' })
+
+    shadow.adoptedStyleSheets = [editorStylesheet]
+
+    this.emailDocument.head.querySelectorAll('style').forEach((style) => {
+      shadow.appendChild(style.cloneNode(true))
+    })
+
+    const container = document.createElement('div')
+    const bodyStyle = this.emailDocument.body.getAttribute('style')
+
+    if (bodyStyle) container.setAttribute('style', bodyStyle)
+
+    shadow.appendChild(container)
+
+    const LinkShortcut = Extension.create({
+      name: 'linkShortcut',
+      addKeyboardShortcuts: () => ({
+        'Mod-k': () => {
+          this.toggleLink()
+
+          return true
+        }
+      })
+    })
+
+    this.editor = new Editor({
+      element: container,
+      extensions: [
+        Document,
+        Text,
+        HardBreak,
+        UndoRedo,
+        Gapcursor,
+        Dropcursor,
+        ...buildExtensions(tiptap),
+        LinkShortcut
+      ],
+      content: this.emailDocument.body.innerHTML,
+      injectCSS: false,
+      editorProps: {
+        attributes: {
+          dir: 'auto'
+        },
+        handleDOMEvents: {
+          click: (_, event) => {
+            if (event.target.closest('a')) event.preventDefault()
+
+            return false
+          }
+        }
+      },
+      onUpdate: ({ editor }) => {
+        this.emailDocument.body.innerHTML = editor.getHTML()
+
+        this.textarea.value = this.emailDocument.documentElement.outerHTML
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }))
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateToolbarState()
+        this.handleLinkTooltip(editor)
+      },
+      onBlur: () => {
+        setTimeout(() => {
+          if (!this.linkTooltip.tooltip.contains(document.activeElement)) {
+            this.linkTooltip.hide()
+          }
+        }, 0)
+      }
+    })
+
+    this.linkTooltip = new LinkTooltip(this, this.editor, this.linkTooltipTemplate)
+  }
+
+  adjustShortcutsForPlatform () {
+    if ((navigator.userAgentData?.platform)?.toLowerCase()?.includes('mac')) {
+      this.querySelectorAll('.tooltip[data-tip]').forEach(tooltip => {
+        const tip = tooltip.getAttribute('data-tip')
+
+        if (tip && tip.includes('Ctrl')) {
+          tooltip.setAttribute('data-tip', tip.replace(/Ctrl/g, '⌘'))
+        }
+      })
+    }
+  }
+
+  bold (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleBold().run()
+    this.updateToolbarState()
+  }
+
+  italic (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleItalic().run()
+    this.updateToolbarState()
+  }
+
+  underline (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().toggleUnderline().run()
+    this.updateToolbarState()
+  }
+
+  linkSelection (e) {
+    e.preventDefault()
+
+    this.toggleLink()
+    this.updateToolbarState()
+  }
+
+  undo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().undo().run()
+    this.updateToolbarState()
+  }
+
+  redo (e) {
+    e.preventDefault()
+
+    this.editor.chain().focus().redo().run()
+    this.updateToolbarState()
+  }
+
+  updateToolbarState () {
+    this.boldButton.classList.toggle('bg-base-200', this.editor.isActive('bold'))
+    this.italicButton.classList.toggle('bg-base-200', this.editor.isActive('italic'))
+    this.underlineButton.classList.toggle('bg-base-200', this.editor.isActive('underline'))
+    this.linkButton.classList.toggle('bg-base-200', this.editor.isActive('link'))
+  }
+
+  handleLinkTooltip (editor) {
+    const { from } = editor.state.selection
+    const mark = editor.state.doc.resolve(from).marks().find(m => m.type.name === 'link')
+
+    if (!mark) {
+      if (this.linkTooltip.isVisible()) this.linkTooltip.hide()
+
+      return
+    }
+
+    if (this.linkTooltip.isVisible() && this.linkTooltip.currentMark === mark) return
+
+    let linkStart = from
+    const start = editor.state.doc.resolve(from).start()
+
+    for (let i = from - 1; i >= start; i--) {
+      if (editor.state.doc.resolve(i).marks().some(m => m.eq(mark))) {
+        linkStart = i
+      } else {
+        break
+      }
+    }
+
+    this.linkTooltip.hide()
+    this.linkTooltip.show(mark.attrs.htmlAttrs?.href, linkStart > start ? linkStart - 1 : linkStart)
+    this.linkTooltip.currentMark = mark
+  }
+
+  toggleLink () {
+    if (this.editor.isActive('link')) {
+      this.linkTooltip.hide()
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      this.updateToolbarState()
+    } else {
+      const { from } = this.editor.state.selection
+
+      this.linkTooltip.hide()
+      this.linkTooltip.show(this.editor.getAttributes('link').htmlAttrs?.href, from, { focus: true })
+    }
+  }
+
+  insertVariable (e) {
+    const variable = e.target.closest('[data-variable]')?.dataset.variable
+
+    if (variable) {
+      const { from, to } = this.editor.state.selection
+
+      if (variable.includes('link') && from !== to) {
+        this.editor.chain().focus().setLink({ href: `{${variable}}` }).run()
+      } else {
+        this.editor.chain().focus().insertContent(`{${variable}}`).run()
+      }
+    }
+  }
+
+  disconnectedCallback () {
+    this.linkTooltip?.hide()
+
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  }
+}))

app/javascript/elements/markdown_editor.js

@@ -35,7 +35,7 @@ function loadTiptap () {
   }))
 }
 
-class LinkTooltip {
+export class LinkTooltip {
   constructor (container, editor, templateEl) {
     this.container = container
     this.editor = editor

app/javascript/elements/search_input.js

@@ -1,19 +1,5 @@
 export default class extends HTMLElement {
   connectedCallback () {
-    this.input.addEventListener('focus', () => {
-      if (this.title) {
-        this.title.classList.add('hidden', 'md:block')
-        this.input.classList.add('w-60')
-      }
-    })
-
-    this.input.addEventListener('blur', (e) => {
-      if (this.title && !e.target.value) {
-        this.title.classList.remove('hidden')
-        this.input.classList.remove('w-60')
-      }
-    })
-
     this.button.addEventListener('click', (event) => {
       if (!this.input.value && document.activeElement !== this.input) {
         event.preventDefault()
@@ -21,16 +7,22 @@ export default class extends HTMLElement {
         this.input.focus()
       }
     })
+
+    document.addEventListener('turbo:before-cache', this.onBeforeCache)
+  }
+
+  disconnectedCallback () {
+    document.removeEventListener('turbo:before-cache', this.onBeforeCache)
+  }
+
+  onBeforeCache = () => {
+    this.input.value = this.input.getAttribute('value') || ''
   }
 
   get input () {
     return this.querySelector('input')
   }
 
-  get title () {
-    return document.querySelector(this.dataset.title)
-  }
-
   get button () {
     return this.querySelector('button')
   }

app/javascript/elements/signature_form.js

@@ -14,6 +14,7 @@ export default targetable(class extends HTMLElement {
     this.resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         if (!this.canvas) return
+        if (!this.canvas.parentNode?.clientWidth) return
 
         const { width, height } = this.canvas
 
@@ -80,7 +81,7 @@ export default targetable(class extends HTMLElement {
   }
 
   redrawCanvas (oldWidth, oldHeight) {
-    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+    if (this.pad && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && this.canvas.width > 0 && this.canvas.height > 0) {
       const sx = this.canvas.width / oldWidth
       const sy = this.canvas.height / oldHeight
 

app/javascript/form.js

@@ -52,7 +52,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),
-      fields: JSON.parse(this.dataset.fields)
+      fields: JSON.parse(this.dataset.fields),
+      completeButtonContainer: document.getElementById('complete_button_container'),
+      completeButtonScrollContainer: document.getElementById('complete_button_container_scroll')
     })
 
     this.app.mount(this.appElem)

app/javascript/submission_form/appears_on.vue

@@ -42,10 +42,25 @@ export default {
       const areas = {}
 
       this.field.areas?.forEach((area) => {
-        areas[area.attachment_uuid + area.page] ||= area
+        areas[area.attachment_uuid] ||= []
+        areas[area.attachment_uuid].push(area)
       })
 
-      return Object.values(areas).slice(0, 6)
+      const sortedAreas = Object.values(areas).reduce((acc, group) => {
+        const seen = {}
+        const sortedGroup = [...group].sort((a, b) => a.page - b.page)
+
+        sortedGroup.forEach((area) => {
+          if (!seen[area.page]) {
+            seen[area.page] = true
+            acc.push(area)
+          }
+        })
+
+        return acc
+      }, [])
+
+      return sortedAreas.slice(0, 6)
     }
   }
 }

app/javascript/submission_form/area.vue

@@ -528,7 +528,7 @@ export default {
           return this.formatDate(
             this.modelValue === '{{date}}' ? new Date() : new Date(this.modelValue),
             this.field.preferences?.format || (this.locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'),
-            { withTimePlaceholders: this.modelValue === '{{date}}' }
+            { withTimePlaceholders: this.modelValue === '{{date}}', utc: this.modelValue !== '{{date}}' }
           )
         } catch {
           return this.modelValue
@@ -643,11 +643,15 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
     },
-    formatDate (date, format, { withTimePlaceholders = false } = {}) {
+    formatDate (date, format, { withTimePlaceholders = false, utc = true } = {}) {
       const monthFormats = { M: 'numeric', MM: '2-digit', MMM: 'short', MMMM: 'long' }
       const dayFormats = { D: 'numeric', DD: '2-digit' }
       const yearFormats = { YYYY: 'numeric', YYY: 'numeric', YY: '2-digit' }
@@ -669,7 +673,7 @@ export default {
       if (format.match(/m+/)) opts.minute = minuteFormats[format.match(/m+/)[0]]
       if (format.match(/s+/)) opts.second = secondFormats[format.match(/s+/)[0]]
       if (/z/.test(format)) opts.timeZoneName = 'short'
-      if (!hasTime) opts.timeZone = 'UTC'
+      if (!hasTime && utc) opts.timeZone = 'UTC'
 
       const partTypes = {
         M: 'month',

app/javascript/submission_form/date_step.vue

@@ -27,6 +27,7 @@
       </label>
       <button
         v-if="withToday"
+        type="button"
         class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
         @click.prevent="[setCurrentDate(), $emit('focus')]"
       >

app/javascript/submission_form/dropzone.vue

@@ -51,6 +51,36 @@
 <script>
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
+function convertImage (sourceFile, targetType, quality) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+
+    reader.onload = function (event) {
+      const img = new Image()
+
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(img, 0, 0)
+        canvas.toBlob(function (blob) {
+          const ext = targetType === 'image/jpeg' ? '.jpg' : '.png'
+          const newFile = new File([blob], sourceFile.name.replace(/\.\w+$/, ext), { type: targetType })
+          resolve(newFile)
+        }, targetType, quality)
+      }
+
+      img.onerror = () => reject(new Error(`browser cannot decode ${sourceFile.type || sourceFile.name}`))
+
+      img.src = event.target.result
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(sourceFile)
+  })
+}
+
 export default {
   name: 'FileDropzone',
   components: {
@@ -153,8 +183,14 @@ export default {
               }
             })
           } else {
-            if (file.type === 'image/bmp' || file.type === 'image/vnd.microsoft.icon') {
-              file = await this.convertBmpToPng(file)
+            try {
+              if (['image/bmp', 'image/vnd.microsoft.icon', 'image/svg+xml', 'image/gif'].includes(file.type)) {
+                file = await convertImage(file, 'image/png')
+              } else if (['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence', 'image/avif', 'image/avif-sequence', 'image/webp'].includes(file.type)) {
+                file = await convertImage(file, 'image/jpeg', 0.9)
+              }
+            } catch (e) {
+              alert(e.message)
             }
 
             formData.append('file', file)
@@ -181,32 +217,6 @@ export default {
       }).finally(() => {
         this.isLoading = false
       })
-    },
-    convertBmpToPng (bmpFile) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = function (event) {
-          const img = new Image()
-
-          img.onload = function () {
-            const canvas = document.createElement('canvas')
-            const ctx = canvas.getContext('2d')
-
-            canvas.width = img.width
-            canvas.height = img.height
-            ctx.drawImage(img, 0, 0)
-            canvas.toBlob(function (blob) {
-              const newFile = new File([blob], bmpFile.name.replace(/\.\w+$/, '.png'), { type: 'image/png' })
-              resolve(newFile)
-            }, 'image/png')
-          }
-
-          img.src = event.target.result
-        }
-        reader.onerror = reject
-        reader.readAsDataURL(bmpFile)
-      })
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -95,7 +95,7 @@
       v-else
       id="complete_form_button"
       class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
-      form="steps_form"
+      form="complete_form"
       type="submit"
       name="completed"
       value="true"
@@ -113,8 +113,41 @@
       </span>
     </button>
   </Teleport>
+  <Teleport
+    v-for="ref in (showCompleteButton ? [completeButtonContainer, completeButtonScrollContainer].filter(Boolean) : [])"
+    :key="ref"
+    :to="ref"
+  >
+    <button
+      class="complete-button btn btn-sm btn-neutral text-white px-4"
+      form="complete_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+          aria-hidden="true"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
+  <form
+    v-if="!isCompleted && !isInvite"
+    id="complete_form"
+    class="hidden"
+    :action="submitPath"
+    method="post"
+    @submit.prevent="submitStep"
+  />
   <button
-    v-if="!isFormVisible"
+    v-if="!isFormVisible && currentField"
     id="expand_form_button"
     class="btn btn-neutral flex text-white absolute bottom-0 w-full mb-3 expand-form-button text-base"
     style="width: 96%; margin-left: 2%"
@@ -141,6 +174,7 @@
     />
   </button>
   <div
+    v-if="currentField"
     v-show="isFormVisible"
     id="form_container"
     class="shadow-md bg-base-100 absolute bottom-0 w-full border-base-200 border p-4 rounded form-container overflow-hidden"
@@ -256,6 +290,7 @@
               :id="currentField.uuid"
               dir="auto"
               :required="currentField.required"
+              :aria-label="showFieldNames && (currentField.name || currentField.title) ? undefined : (currentField.name || currentField.title || t('select_your_option'))"
               :aria-describedby="currentField.description ? currentField.uuid + '-desc' : undefined"
               class="select base-input !text-2xl w-full text-center font-normal"
               :class="{ 'text-gray-300': !values[currentField.uuid] }"
@@ -284,7 +319,7 @@
           <div v-else-if="currentField.type === 'radio'">
             <label
               v-if="showFieldNames && (currentField.name || currentField.title)"
-              :for="currentField.uuid"
+              :id="currentField.uuid + '-radio-label'"
               dir="auto"
               class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
               :class="{ 'mb-2': !currentField.description }"
@@ -323,6 +358,8 @@
               </div>
               <div
                 class="space-y-3.5 mx-auto"
+                role="radiogroup"
+                :aria-labelledby="(currentField.name || currentField.title) ? currentField.uuid + '-radio-label' : null"
                 :class="{ hidden: !showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4) }"
               >
                 <div
@@ -791,6 +828,16 @@ export default {
       required: false,
       default: null
     },
+    completeButtonContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    completeButtonScrollContainer: {
+      type: Object,
+      required: false,
+      default: null
+    },
     schema: {
       type: Array,
       required: false,
@@ -1008,6 +1055,7 @@ export default {
       isSubmitting: false,
       isSubmittingComplete: false,
       submittedValues: {},
+      isFormStarted: false,
       recalculateButtonDisabledKey: '',
       isAccessibilityMode: false
     }
@@ -1056,6 +1104,10 @@ export default {
         })
       })
     },
+    showCompleteButton () {
+      return this.completeButtonContainer && !this.isCompleted && !this.isInvite && this.isFormStarted &&
+        !this.stepFields.find((fields) => fields.some((f) => f.required && isEmpty(this.submittedValues[f.uuid])))
+    },
     submitButtonText () {
       if (this.alwaysMinimize) {
         return this.t('submit')
@@ -1121,7 +1173,11 @@ export default {
       }
     },
     isAnonymousChecboxes () {
-      return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
+      if (this.currentField) {
+        return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name && !e.required) && this.currentStepFields.length > 4
+      } else {
+        return false
+      }
     },
     isButtonDisabled () {
       if (this.recalculateButtonDisabledKey) {
@@ -1519,6 +1575,7 @@ export default {
       }
     },
     goToStep (stepIndex, scrollToArea = false, clickUpload = false) {
+      this.isInvite = false
       this.currentStep = stepIndex
       this.showFillAllRequiredFields = false
 
@@ -1543,6 +1600,10 @@ export default {
       })
     },
     saveStep (formData) {
+      if (!formData && !this.$refs.form) {
+        return
+      }
+
       const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
       const currentFieldType = this.currentField.type
 
@@ -1657,6 +1718,8 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
+          this.isFormStarted = true
+
           const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.findNextStep(submitStepIndex))
 
           if (nextStep) {
@@ -1693,6 +1756,7 @@ export default {
     },
     async performComplete (resp) {
       this.isCompleted = true
+      this.isFormVisible = true
 
       if (resp?.text) {
         const respData = await resp.text()

app/javascript/submission_form/i18n.js

@@ -4,9 +4,17 @@ const en = {
   close: 'Close',
   uploaded_files: 'Uploaded files',
   signature_drawing_area: 'Signature drawing area. Use mouse or touch to draw your signature.',
+  initials_drawing_area: 'Initials drawing area. Use mouse or touch to draw your initials.',
   kba: 'KBA',
   please_upload_an_image_file: 'Please upload an image file',
   must_be_characters_length: 'Must be {number} characters long',
+  must_be_valid_ssn: 'Must be a valid SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Must be a valid EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Must be a valid email address',
+  must_be_valid_url: 'Must be a valid URL (starting with http:// or https://)',
+  must_be_valid_zip: 'Must be a valid ZIP code (XXXXX or XXXXX-XXXX)',
+  must_contain_numbers_only: 'Must contain numbers only',
+  must_contain_letters_only: 'Must contain letters only',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete all required fields to proceed with identity verification.',
   verify_id: 'Verify ID',
   identity_verification: 'Identity verification',
@@ -81,6 +89,7 @@ const en = {
   please_check_the_box_to_continue: 'Please check the box to continue.',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
+  country_code: 'Country code',
   use_international_format: 'Use international format: +1xxx',
   six_digits_code: '6-digit code',
   change_phone_number: 'Change phone number',
@@ -113,9 +122,17 @@ const es = {
   close: 'Cerrar',
   uploaded_files: 'Archivos subidos',
   signature_drawing_area: 'Área de dibujo de firma. Use el ratón o toque para dibujar su firma.',
+  initials_drawing_area: 'Área de dibujo de iniciales. Use el ratón o toque para dibujar sus iniciales.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
   must_be_characters_length: 'Debe tener {number} caracteres de longitud',
+  must_be_valid_ssn: 'Debe ser un SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Debe ser un EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Debe ser una dirección de correo electrónico válida',
+  must_be_valid_url: 'Debe ser una URL válida (que comience con http:// o https://)',
+  must_be_valid_zip: 'Debe ser un ZIP válido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Debe contener solo números',
+  must_contain_letters_only: 'Debe contener solo letras',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Complete todos los campos requeridos para continuar con la verificación de identidad.',
   verify_id: 'Verificar ID',
   identity_verification: 'Verificación de identidad',
@@ -136,7 +153,7 @@ const es = {
   verification_code_is_invalid: 'El código de verificación no es válido',
   sign_on_the_touchscreen: 'Firmar en 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',
+  by_clicking_you_agree_to_the: 'Al hacer clic en "{button}", usted acepta la',
   electronic_signature_disclosure: 'Divulgación de Firma Electrónica',
   esignature_disclosure: 'Divulgación de eFirma',
   already_paid: 'Ya pagado',
@@ -190,6 +207,7 @@ const es = {
   please_check_the_box_to_continue: 'Por favor marque la casilla para continuar.',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
+  country_code: 'Código de país',
   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',
@@ -222,9 +240,17 @@ const it = {
   close: 'Chiudi',
   uploaded_files: 'File caricati',
   signature_drawing_area: 'Area di disegno della firma. Usa il mouse o il tocco per disegnare la tua firma.',
+  initials_drawing_area: 'Area di disegno delle iniziali. Usa il mouse o il tocco per disegnare le tue iniziali.',
   kba: 'KBA',
   please_upload_an_image_file: 'Per favore carica un file immagine',
   must_be_characters_length: 'Deve essere lungo {number} caratteri',
+  must_be_valid_ssn: 'Deve essere un SSN valido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve essere un EIN valido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve essere un indirizzo email valido',
+  must_be_valid_url: 'Deve essere un URL valido (che inizia con http:// o https://)',
+  must_be_valid_zip: 'Deve essere uno ZIP valido (XXXXX o XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve contenere solo numeri',
+  must_contain_letters_only: 'Deve contenere solo lettere',
   complete_all_required_fields_to_proceed_with_identity_verification: "Compila tutti i campi obbligatori per procedere con la verifica dell'identità.",
   verify_id: 'Verifica ID',
   identity_verification: "Verifica dell'identità",
@@ -245,7 +271,7 @@ const it = {
   verification_code_is_invalid: 'Il codice di verifica non è valido',
   sign_on_the_touchscreen: 'Firma su 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',
+  by_clicking_you_agree_to_the: 'Cliccando su "{button}", accetti la',
   electronic_signature_disclosure: 'Divulgazione della Firma Elettronica',
   esignature_disclosure: 'Divulgazione della eFirma',
   minimize: 'Minimizza',
@@ -258,7 +284,7 @@ const it = {
   date: 'Data',
   number: 'Numero',
   image: 'Immagine',
-  pay: 'Pagamento',
+  pay: 'Paga',
   file: 'File',
   select: 'Seleziona',
   checkbox: 'Checkbox',
@@ -299,6 +325,7 @@ const it = {
   please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare.',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
+  country_code: 'Prefisso internazionale',
   use_international_format: 'Usa formato internazionale: +1xxx',
   six_digits_code: 'Codice a 6 cifre',
   change_phone_number: 'Cambia numero di telefono',
@@ -331,9 +358,17 @@ const de = {
   close: 'Schließen',
   uploaded_files: 'Hochgeladene Dateien',
   signature_drawing_area: 'Unterschriftszeichenbereich. Verwenden Sie die Maus oder Berührung, um Ihre Unterschrift zu zeichnen.',
+  initials_drawing_area: 'Zeichenbereich für Initialen. Verwenden Sie die Maus oder Berührung, um Ihre Initialen zu zeichnen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
   must_be_characters_length: 'Muss {number} Zeichen lang sein',
+  must_be_valid_ssn: 'Muss eine gültige SSN sein (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Muss eine gültige EIN sein (XX-XXXXXXX)',
+  must_be_valid_email: 'Muss eine gültige E-Mail-Adresse sein',
+  must_be_valid_url: 'Muss eine gültige URL sein (beginnend mit http:// oder https://)',
+  must_be_valid_zip: 'Muss eine gültige ZIP sein (XXXXX oder XXXXX-XXXX)',
+  must_contain_numbers_only: 'Darf nur Zahlen enthalten',
+  must_contain_letters_only: 'Darf nur Buchstaben enthalten',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Füllen Sie alle Pflichtfelder aus, um mit der Identitätsprüfung fortzufahren.',
   verify_id: 'ID überprüfen',
   identity_verification: 'Identitätsprüfung',
@@ -408,6 +443,7 @@ const de = {
   please_check_the_box_to_continue: 'Bitte aktivieren Sie das Kontrollkästchen, um fortzufahren.',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer verifizieren',
+  country_code: 'Ländervorwahl',
   use_international_format: 'Internationales Format verwenden: +1xxx',
   six_digits_code: '6-stelliger Code',
   change_phone_number: 'Telefonnummer ändern',
@@ -440,9 +476,17 @@ const fr = {
   close: 'Fermer',
   uploaded_files: 'Fichiers téléchargés',
   signature_drawing_area: 'Zone de dessin de signature. Utilisez la souris ou le toucher pour dessiner votre signature.',
+  initials_drawing_area: 'Zone de dessin des initiales. Utilisez la souris ou le toucher pour dessiner vos initiales.',
   kba: 'KBA',
   please_upload_an_image_file: 'Veuillez téléverser un fichier image',
   must_be_characters_length: 'Doit comporter {number} caractères',
+  must_be_valid_ssn: 'Doit être un SSN valide (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Doit être un EIN valide (XX-XXXXXXX)',
+  must_be_valid_email: 'Doit être une adresse e-mail valide',
+  must_be_valid_url: 'Doit être une URL valide (commençant par http:// ou https://)',
+  must_be_valid_zip: 'Doit être un ZIP valide (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Doit contenir uniquement des chiffres',
+  must_contain_letters_only: 'Doit contenir uniquement des lettres',
   complete_all_required_fields_to_proceed_with_identity_verification: "Veuillez remplir tous les champs obligatoires pour poursuivre la vérification d'identité.",
   verify_id: "Vérifier l'ID",
   identity_verification: "Vérification d'identité",
@@ -517,6 +561,7 @@ const fr = {
   please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
+  country_code: 'Indicatif du pays',
   use_international_format: 'Utilisez le format international : +1xxx',
   six_digits_code: 'Code à 6 chiffres',
   change_phone_number: 'Changer de numéro de téléphone',
@@ -549,9 +594,17 @@ const pl = {
   close: 'Zamknij',
   uploaded_files: 'Przesłane pliki',
   signature_drawing_area: 'Obszar rysowania podpisu. Użyj myszy lub dotyku, aby narysować swój podpis.',
+  initials_drawing_area: 'Obszar rysowania inicjałów. Użyj myszy lub dotyku, aby narysować swoje inicjały.',
   kba: 'KBA',
   please_upload_an_image_file: 'Proszę przesłać plik obrazu',
   must_be_characters_length: 'Musi mieć długość {number} znaków',
+  must_be_valid_ssn: 'Musi być prawidłowym numerem SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musi być prawidłowym numerem EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musi być prawidłowym adresem e-mail',
+  must_be_valid_url: 'Musi być prawidłowym adresem URL (zaczynającym się od http:// lub https://)',
+  must_be_valid_zip: 'Musi być prawidłowym ZIP (XXXXX lub XXXXX-XXXX)',
+  must_contain_numbers_only: 'Może zawierać tylko cyfry',
+  must_contain_letters_only: 'Może zawierać tylko litery',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Uzupełnij wszystkie wymagane pola, aby kontynuować weryfikację tożsamości.',
   verify_id: 'Zweryfikuj ID',
   identity_verification: 'Weryfikacja tożsamości',
@@ -574,7 +627,7 @@ const pl = {
   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',
+  esignature_disclosure: 'informację o e-podpisie',
   minimize: 'Zminimalizuj',
   text: 'Tekst',
   already_paid: 'Już zapłacono',
@@ -626,6 +679,7 @@ const pl = {
   please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować.',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
+  country_code: 'Kod kraju',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
   six_digits_code: '6-cyfrowy kod',
   change_phone_number: 'Zmień numer telefonu',
@@ -642,7 +696,7 @@ const pl = {
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany',
   processing: 'Przetwarzanie',
-  pay_with_stripe: 'Płatność za pomocą Stripe',
+  pay_with_stripe: 'Zapłać za pomocą Stripe',
   reupload: 'Ponowne przesłanie',
   upload: 'Przesyłanie',
   files: 'Pliki',
@@ -658,9 +712,17 @@ const uk = {
   close: 'Закрити',
   uploaded_files: 'Завантажені файли',
   signature_drawing_area: 'Область малювання підпису. Використовуйте мишу або дотик, щоб намалювати свій підпис.',
+  initials_drawing_area: 'Область малювання ініціалів. Використовуйте мишу або дотик, щоб намалювати свої ініціали.',
   kba: 'KBA',
   please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
   must_be_characters_length: 'Має містити {number} символів',
+  must_be_valid_ssn: 'Має бути дійсним SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Має бути дійсним EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Має бути дійсною адресою електронної пошти',
+  must_be_valid_url: 'Має бути дійсним URL (починаючи з http:// або https://)',
+  must_be_valid_zip: 'Має бути дійсним ZIP (XXXXX або XXXXX-XXXX)',
+  must_contain_numbers_only: 'Має містити лише цифри',
+  must_contain_letters_only: 'Має містити лише літери',
   complete_all_required_fields_to_proceed_with_identity_verification: "Заповніть всі обов'язкові поля, щоб продовжити перевірку особи.",
   verify_id: 'Підтвердження ідентичності',
   identity_verification: 'Ідентифікація особи',
@@ -678,12 +740,12 @@ const uk = {
   authored_by: 'Автор',
   select_a_reason: 'Виберіть причину',
   value_is_invalid: 'Значення є неправильним',
-  verification_code_is_invalid: 'Код підтвердження є неправильним',
+  verification_code_is_invalid: 'Невірний код підтвердження',
   sign_on_the_touchscreen: 'Підписати на сенсорному екрані',
   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: 'Розголошення еПідпису',
+  electronic_signature_disclosure: 'інформацією про е-підпис',
+  esignature_disclosure: 'інформацією про е-підпис',
   minimize: 'Зменшити',
   text: 'Текст',
   already_paid: 'Вже оплачено',
@@ -735,6 +797,7 @@ const uk = {
   please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити.',
   open_source_documents_software: 'відкрите програмне забезпечення для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
+  country_code: 'Код країни',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
   six_digits_code: '6-значний код',
   change_phone_number: 'Змінити номер телефону',
@@ -751,7 +814,7 @@ const uk = {
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений',
   processing: 'Обробка',
-  pay_with_strip: 'Сплатити за допомогою Stripe',
+  pay_with_stripe: 'Сплатити за допомогою Stripe',
   reupload: 'Перезавантажити',
   upload: 'Завантажити',
   files: 'Файли',
@@ -767,14 +830,22 @@ const cs = {
   close: 'Zavřít',
   uploaded_files: 'Nahrané soubory',
   signature_drawing_area: 'Oblast pro kreslení podpisu. Použijte myš nebo dotyk k nakreslení podpisu.',
+  initials_drawing_area: 'Oblast pro kreslení iniciál. Použijte myš nebo dotyk k nakreslení iniciál.',
   kba: 'KBA',
   please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
   must_be_characters_length: 'Musí mít délku {number} znaků',
+  must_be_valid_ssn: 'Musí být platné SSN (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Musí být platné EIN (XX-XXXXXXX)',
+  must_be_valid_email: 'Musí být platná e-mailová adresa',
+  must_be_valid_url: 'Musí být platná URL (začínající http:// nebo https://)',
+  must_be_valid_zip: 'Musí být platný ZIP (XXXXX nebo XXXXX-XXXX)',
+  must_contain_numbers_only: 'Musí obsahovat pouze čísla',
+  must_contain_letters_only: 'Musí obsahovat pouze písmena',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vyplňte všechna povinná pole, abyste mohli pokračovat v ověření identity.',
   verify_id: 'Ověřit ID',
   identity_verification: 'Ověření identity',
   complete: 'Dokončit',
-  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
+  fill_all_required_fields_to_complete: 'Vyplňte povinná pole pro dokončení',
   sign_and_complete: 'Podepsat a dokončit',
   invite: 'Pozvat',
   email: 'E-mail',
@@ -782,8 +853,8 @@ const cs = {
   reviewed: 'Zkontrolováno',
   other: 'Jiné',
   authored_by_me: 'Autorem jsem já',
-  approved_by: 'Schváleno kým',
-  reviewed_by: 'Zkontrolováno kým',
+  approved_by: 'Schválil(a)',
+  reviewed_by: 'Zkontroloval(a)',
   authored_by: 'Autorem',
   select_a_reason: 'Vyberte důvod',
   value_is_invalid: 'Hodnota je neplatná',
@@ -792,7 +863,7 @@ const cs = {
   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',
+  esignature_disclosure: 'informací o e-podpisu',
   already_paid: 'Už zaplaceno',
   minimize: 'Minimalizovat',
   text: 'Text',
@@ -844,6 +915,7 @@ const cs = {
   please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování.',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
+  country_code: 'Předvolba země',
   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',
@@ -860,7 +932,7 @@ const cs = {
   toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán',
   processing: 'Zpracování',
-  pay_with_stripe: 'Zaplacení přes Stripe',
+  pay_with_stripe: 'Zaplatit přes Stripe',
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
   files: 'Soubory',
@@ -876,9 +948,17 @@ const pt = {
   close: 'Fechar',
   uploaded_files: 'Arquivos enviados',
   signature_drawing_area: 'Área de desenho da assinatura. Use o mouse ou toque para desenhar sua assinatura.',
+  initials_drawing_area: 'Área de desenho das iniciais. Use o mouse ou toque para desenhar suas iniciais.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
   must_be_characters_length: 'Deve ter {number} caracteres',
+  must_be_valid_ssn: 'Deve ser um SSN válido (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Deve ser um EIN válido (XX-XXXXXXX)',
+  must_be_valid_email: 'Deve ser um endereço de e-mail válido',
+  must_be_valid_url: 'Deve ser uma URL válida (começando com http:// ou https://)',
+  must_be_valid_zip: 'Deve ser um ZIP válido (XXXXX ou XXXXX-XXXX)',
+  must_contain_numbers_only: 'Deve conter apenas números',
+  must_contain_letters_only: 'Deve conter apenas letras',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Preencha todos os campos obrigatórios para prosseguir com a verificação de identidade.',
   verify_id: 'Verificar ID',
   identity_verification: 'Verificação de identidade',
@@ -890,18 +970,18 @@ const pt = {
   approved: 'Aprovado',
   reviewed: 'Revisado',
   other: 'Outro',
-  authored_by_me: 'Autorizado por mim',
+  authored_by_me: 'Escrito por mim',
   approved_by: 'Aprovado por',
   reviewed_by: 'Revisado por',
-  authored_by: 'Autorizado por',
+  authored_by: 'Escrito por',
   select_a_reason: 'Selecione um motivo',
   value_is_invalid: 'Valor é inválido',
   verification_code_is_invalid: 'Código de verificação é inválido',
   sign_on_the_touchscreen: 'Assinar na tela sensível',
   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',
+  by_clicking_you_agree_to_the: 'Ao clicar em "{button}", você concorda com a',
   electronic_signature_disclosure: 'Divulgação de Assinatura Eletrônica',
-  esignature_disclosure: 'Divulgação da eAssinatura',
+  esignature_disclosure: 'Informação sobre eAssinatura',
   already_paid: 'Já pago',
   minimize: 'Minimizar',
   text: 'Texto',
@@ -953,6 +1033,7 @@ const pt = {
   please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar.',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
+  country_code: 'Código do país',
   use_international_format: 'Use formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Alterar número de telefone',
@@ -970,7 +1051,7 @@ const pt = {
   email_has_been_sent: 'Email enviado',
   processing: 'Processamento',
   pay_with_stripe: 'Pagar com Stripe',
-  reupload: 'Reenviar',
+  reupload: 'Recarregar',
   upload: 'Carregar',
   files: 'Arquivos',
   signature_is_too_small_or_simple_please_redraw: 'A assinatura é muito pequena ou simples. Por favor, redesenhe.',
@@ -985,9 +1066,17 @@ const he = {
   close: 'סגור',
   uploaded_files: 'קבצים שהועלו',
   signature_drawing_area: 'אזור ציור חתימה. השתמש בעכבר או במגע כדי לצייר את החתימה שלך.',
+  initials_drawing_area: 'אזור ציור ראשי תיבות. השתמש בעכבר או במגע כדי לצייר את ראשי התיבות שלך.',
   kba: 'KBA',
   please_upload_an_image_file: 'אנא העלה קובץ תמונה',
   must_be_characters_length: 'חייב להיות באורך של {number} תווים',
+  must_be_valid_ssn: 'חייב להיות SSN חוקי (XXX-XX-XXXX)',
+  must_be_valid_ein: 'חייב להיות EIN חוקי (XX-XXXXXXX)',
+  must_be_valid_email: 'חייבת להיות כתובת אימייל חוקית',
+  must_be_valid_url: 'חייבת להיות כתובת URL חוקית (המתחילה ב-http:// או https://)',
+  must_be_valid_zip: 'חייב להיות ZIP חוקי (XXXXX או XXXXX-XXXX)',
+  must_contain_numbers_only: 'חייב להכיל מספרים בלבד',
+  must_contain_letters_only: 'חייב להכיל אותיות בלבד',
   complete_all_required_fields_to_proceed_with_identity_verification: 'מלא את כל השדות הנדרשים כדי להמשיך עם אימות זהות.',
   verify_id: 'אמת מזהה',
   identity_verification: 'אימות זהות',
@@ -1010,8 +1099,8 @@ const he = {
   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חתימה',
-  minimize: 'לקטן',
+  esignature_disclosure: 'חשיפת חתימה אלקטרונית',
+  minimize: 'מזער',
   text: 'טקסט',
   already_paid: 'כבר שולם',
   signature: 'חתימה',
@@ -1022,9 +1111,9 @@ const he = {
   number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
-  pay: 'תשלום',
+  pay: 'שלם',
   select: 'בחר',
-  checkbox: 'תיק בחירה',
+  checkbox: 'סימון',
   multiple: 'רב ערכים',
   radio: 'רדיו',
   cells: 'תאים',
@@ -1051,9 +1140,9 @@ const he = {
   download: 'הורדה',
   clear: 'נקה',
   redraw: 'צייר מחדש',
-  draw_initials: 'צייר ציוני ראשי תיבות',
+  draw_initials: 'צייר ראשי תיבות',
   type_signature_here: 'הקלד חתימה כאן',
-  type_initial_here: 'הקלד ציוני ראשי תיבות כאן',
+  type_initial_here: 'הקלד ראשי תיבות כאן',
   form_has_been_completed: 'הטופס הושלם',
   document_has_been_signed: 'המסמך נחתם!',
   documents_have_been_signed: 'המסמכים נחתמו!',
@@ -1062,8 +1151,9 @@ const he = {
   please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך.',
   open_source_documents_software: 'תוכנה פתוחה למסמכים',
   verified_phone_number: 'אימות מספר טלפון',
+  country_code: 'קידומת מדינה',
   use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
-  six_digits_code: 'קוד משתמש שש ספרות',
+  six_digits_code: 'קוד שש ספרות',
   change_phone_number: 'שינוי מספר טלפון',
   sending: 'שולח',
   resend_code: 'שלח מחדש קוד',
@@ -1072,7 +1162,7 @@ const he = {
   set_today: 'קבע היום',
   toggle_multiline_text: 'שנה בין טקסט במספר שורות לטקסט בשורה אחת',
   draw_signature: 'צייר חתימה',
-  type_initial: 'הקלד ציוני ראשי תיבות',
+  type_initial: 'הקלד ראשי תיבות',
   draw: 'צייר',
   type: 'הקלד',
   type_text: 'הקלד טקסט',
@@ -1094,11 +1184,19 @@ const nl = {
   close: 'Sluiten',
   uploaded_files: 'Geüploade bestanden',
   signature_drawing_area: 'Handtekening tekengebied. Gebruik de muis of aanraking om uw handtekening te tekenen.',
+  initials_drawing_area: 'Tekengebied voor initialen. Gebruik de muis of aanraking om uw initialen te tekenen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
   must_be_characters_length: 'Moet {number} tekens lang zijn',
+  must_be_valid_ssn: 'Moet een geldig SSN zijn (XXX-XX-XXXX)',
+  must_be_valid_ein: 'Moet een geldig EIN zijn (XX-XXXXXXX)',
+  must_be_valid_email: 'Moet een geldig e-mailadres zijn',
+  must_be_valid_url: 'Moet een geldige URL zijn (beginnend met http:// of https://)',
+  must_be_valid_zip: 'Moet een geldige ZIP zijn (XXXXX of XXXXX-XXXX)',
+  must_contain_numbers_only: 'Mag alleen cijfers bevatten',
+  must_contain_letters_only: 'Mag alleen letters bevatten',
   complete_all_required_fields_to_proceed_with_identity_verification: 'Vul alle verplichte velden in om door te gaan met de identiteitsverificatie.',
-  verify_id: 'Verifiëren ID',
+  verify_id: 'ID verifiëren',
   identity_verification: 'Identiteitsverificatie',
   complete: 'Voltooien',
   fill_all_required_fields_to_complete: 'Vul alle verplichte velden in om te voltooien',
@@ -1146,7 +1244,7 @@ const nl = {
   continue: 'Doorgaan',
   sign_now: 'Nu ondertekenen',
   type_here_: 'Typ hier...',
-  optional: 'Optioneel',
+  optional: 'optioneel',
   option: 'Optie',
   appears_on: 'Verschijnt op',
   page: 'Pagina',
@@ -1170,11 +1268,12 @@ const nl = {
   powered_by: 'Aangedreven door',
   please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
   open_source_documents_software: 'Open source documenten software',
-  verified_phone_number: 'Geverifieerd telefoonnummer',
+  verified_phone_number: 'Telefoonnummer verifiëren',
+  country_code: 'Landcode',
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
   six_digits_code: '6-cijferige code',
   change_phone_number: 'Wijzig telefoonnummer',
-  sending: 'Voltooien...',
+  sending: 'Verzenden...',
   resend_code: 'Code opnieuw verzenden',
   verification_code_has_been_resent: 'Verificatiecode is opnieuw verzonden via SMS',
   please_fill_all_required_fields: 'Vul alle verplichte velden in',
@@ -1203,9 +1302,17 @@ const ar = {
   close: 'إغلاق',
   uploaded_files: 'الملفات المرفوعة',
   signature_drawing_area: 'منطقة رسم التوقيع. استخدم الماوس أو اللمس لرسم توقيعك.',
+  initials_drawing_area: 'منطقة رسم الحروف الأولى. استخدم الماوس أو اللمس لرسم الحروف الأولى.',
   kba: 'KBA',
   please_upload_an_image_file: 'يرجى تحميل ملف صورة',
   must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
+  must_be_valid_ssn: 'يجب أن يكون SSN صالحًا (XXX-XX-XXXX)',
+  must_be_valid_ein: 'يجب أن يكون EIN صالحًا (XX-XXXXXXX)',
+  must_be_valid_email: 'يجب أن يكون عنوان بريد إلكتروني صالحًا',
+  must_be_valid_url: 'يجب أن يكون عنوان URL صالحًا (يبدأ بـ http:// أو https://)',
+  must_be_valid_zip: 'يجب أن يكون ZIP صالحًا (XXXXX أو XXXXX-XXXX)',
+  must_contain_numbers_only: 'يجب أن يحتوي على أرقام فقط',
+  must_contain_letters_only: 'يجب أن يحتوي على أحرف فقط',
   complete_all_required_fields_to_proceed_with_identity_verification: 'أكمل جميع الحقول المطلوبة للمتابعة في التحقق من الهوية.',
   verify_id: 'تحقق من الهوية',
   identity_verification: 'التحقق من الهوية',
@@ -1232,7 +1339,7 @@ const ar = {
   esignature_disclosure: 'كشف التوقيع الإلكتروني',
   text: 'نص',
   signature: 'توقيع',
-  initials: 'الاختصارات',
+  initials: 'حروف أولى',
   date: 'تاريخ',
   number: 'رقم',
   digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
@@ -1269,9 +1376,9 @@ const ar = {
   download: 'تحميل',
   clear: 'مسح',
   redraw: 'إعادة الرسم',
-  draw_initials: 'ارسم الاختصارات',
+  draw_initials: 'ارسم حروف أولى',
   type_signature_here: 'اكتب التوقيع هنا',
-  type_initial_here: 'اكتب الاختصارات هنا',
+  type_initial_here: 'اكتب حروف أولى هنا',
   form_has_been_completed: 'تم إكمال النموذج!',
   document_has_been_signed: 'تم توقيع الوثيقة!',
   documents_have_been_signed: 'تم توقيع الوثائق!',
@@ -1280,6 +1387,7 @@ const ar = {
   please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة.',
   open_source_documents_software: 'برنامج وثائق مفتوح المصدر',
   verified_phone_number: 'تحقق من رقم الهاتف',
+  country_code: 'رمز الدولة',
   use_international_format: 'استخدم الشكل الدولي: +1xxx',
   six_digits_code: 'رمز مكون من 6 أرقام',
   change_phone_number: 'تغيير رقم الهاتف',
@@ -1290,13 +1398,13 @@ const ar = {
   set_today: 'تعيين اليوم',
   toggle_multiline_text: 'تبديل النصوص متعددة الأسطر',
   draw_signature: 'ارسم التوقيع',
-  type_initial: 'اكتب الاختصارات',
+  type_initial: 'اكتب حروف أولى',
   draw: 'ارسم',
   type: 'اكتب',
   type_text: 'اكتب نصًا',
   email_has_been_sent: 'تم إرسال البريد الإلكتروني',
   processing: 'جارٍ المعالجة',
-  pay_with_strip: 'الدفع بواسطة Stripe',
+  pay_with_stripe: 'الدفع بواسطة Stripe',
   reupload: 'إعادة التحميل',
   upload: 'تحميل',
   files: 'الملفات',
@@ -1312,9 +1420,17 @@ const ko = {
   close: '닫기',
   uploaded_files: '업로드된 파일',
   signature_drawing_area: '서명 그리기 영역. 마우스 또는 터치를 사용하여 서명을 그리세요.',
+  initials_drawing_area: '이니셜 그리기 영역. 마우스 또는 터치를 사용하여 이니셜을 그리세요.',
   kba: 'KBA',
   please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
   must_be_characters_length: '{number}자여야 합니다',
+  must_be_valid_ssn: '유효한 SSN이어야 합니다 (XXX-XX-XXXX)',
+  must_be_valid_ein: '유효한 EIN이어야 합니다 (XX-XXXXXXX)',
+  must_be_valid_email: '유효한 이메일 주소여야 합니다',
+  must_be_valid_url: '유효한 URL이어야 합니다 (http:// 또는 https://로 시작)',
+  must_be_valid_zip: '유효한 ZIP이어야 합니다 (XXXXX 또는 XXXXX-XXXX)',
+  must_contain_numbers_only: '숫자만 포함해야 합니다',
+  must_contain_letters_only: '문자만 포함해야 합니다',
   complete_all_required_fields_to_proceed_with_identity_verification: '신원 확인을 진행하려면 모든 필수 필드를 작성하십시오.',
   verify_id: '아이디 확인',
   identity_verification: '신원 확인',
@@ -1343,10 +1459,10 @@ const ko = {
   signature: '서명',
   initials: '이니셜',
   date: '날짜',
-  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  digitally_signed_by: '디지털 서명자:',
   reason: '이유',
   number: '숫자',
-  pay: '급여',
+  pay: '결제',
   image: '이미지',
   take_photo: '사진 찍기',
   file: '파일',
@@ -1389,6 +1505,7 @@ const ko = {
   please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오.',
   open_source_documents_software: '오픈 소스 문서 소프트웨어',
   verified_phone_number: '전화번호 확인됨',
+  country_code: '국가 번호',
   use_international_format: '국제 포맷 사용: +1xxx',
   six_digits_code: '6자리 코드',
   change_phone_number: '전화번호 변경',
@@ -1421,9 +1538,17 @@ const ja = {
   close: '閉じる',
   uploaded_files: 'アップロードされたファイル',
   signature_drawing_area: '署名描画エリア。マウスまたはタッチを使用して署名を描いてください。',
+  initials_drawing_area: 'イニシャル描画エリア。マウスまたはタッチを使用してイニシャルを描いてください。',
   kba: 'KBA',
   please_upload_an_image_file: '画像ファイルをアップロードしてください',
   must_be_characters_length: '{number}文字でなければなりません',
+  must_be_valid_ssn: '有効なSSNである必要があります (XXX-XX-XXXX)',
+  must_be_valid_ein: '有効なEINである必要があります (XX-XXXXXXX)',
+  must_be_valid_email: '有効なメールアドレスである必要があります',
+  must_be_valid_url: '有効なURLである必要があります (http://またはhttps://で始まる)',
+  must_be_valid_zip: '有効なZIPである必要があります (XXXXX または XXXXX-XXXX)',
+  must_contain_numbers_only: '数字のみを含む必要があります',
+  must_contain_letters_only: '文字のみを含む必要があります',
   complete_all_required_fields_to_proceed_with_identity_verification: '本人確認を進めるには、すべての必須項目を入力してください。',
   verify_id: '本人確認',
   identity_verification: '本人確認',
@@ -1498,6 +1623,7 @@ const ja = {
   please_check_the_box_to_continue: '続行するにはボックスにチェックを入れてください。',
   open_source_documents_software: 'オープンソースのドキュメントソフトウェア',
   verified_phone_number: '電話番号を認証',
+  country_code: '国番号',
   use_international_format: '国際形式を使用してください：+1xxx',
   six_digits_code: '6桁のコード',
   change_phone_number: '電話番号を変更',

app/javascript/submission_form/image_step.vue

@@ -15,6 +15,7 @@
         </template>
       </label>
       <button
+        type="button"
         class="btn btn-outline btn-sm reupload-button"
         @click.prevent="remove"
       >

app/javascript/submission_form/initials_step.vue

@@ -141,6 +141,7 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
+      :alt="field.name || t('initials')"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
     <div class="relative">
@@ -156,6 +157,8 @@
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
+        role="img"
+        :aria-label="t('initials_drawing_area')"
         class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
       />
     </div>
@@ -165,7 +168,8 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6 text-center"
       :required="field.required && !isInitialsStarted"
-      :placeholder="`${t('type_initial_here')}...`"
+      :aria-label="field.name || t('initials')"
+      :placeholder="`${t('type_initial_here')}${field.required ? '...' : ' (' + t('optional') + ')'}`"
       type="text"
       @focus="$emit('focus')"
       @input="updateWrittenInitials"
@@ -289,7 +293,7 @@ export default {
 
             if (!this.isDrawInitials) {
               this.$nextTick(() => {
-                if (this.$refs.textInput) {
+                if (this.$refs.textInput && this.field.required === true) {
                   this.initTextInitial()
                 }
               })

app/javascript/submission_form/invite_form.vue

@@ -35,7 +35,7 @@
         :placeholder="t('email')"
         type="email"
         :required="submitters.includes(submitter)"
-        autofocus="true"
+        :autofocus="index === 0"
         name="submission[submitters][][email]"
       >
     </div>

app/javascript/submission_form/kba_step.vue

@@ -42,6 +42,7 @@
       {{ error }}
     </div>
     <button
+      type="button"
       class="base-button w-full flex justify-center submit-form-button"
       @click="restartKba"
     >

app/javascript/submission_form/multi_select_step.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="showFieldNames && (field.name || field.title)"
-    :for="field.uuid"
+    :id="field.uuid + '-group-label'"
     dir="auto"
     class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
@@ -44,6 +44,8 @@
     <div
       class="space-y-3.5 mx-auto"
       :class="{ hidden: !showOptions }"
+      role="group"
+      :aria-labelledby="showFieldNames && (field.name || field.title) ? field.uuid + '-group-label' : undefined"
     >
       <div
         v-for="(option, index) in field.options"

app/javascript/submission_form/payment_step.vue

@@ -33,6 +33,7 @@
     <div v-else>
       <button
         v-if="sessionId"
+        type="button"
         disabled
         class="base-button w-full modal-save-button"
       >
@@ -47,6 +48,7 @@
       <button
         v-else
         :id="field.uuid"
+        type="button"
         class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
         :class="{ disabled: isCreatingCheckout }"
         :disabled="isCreatingCheckout"

app/javascript/submission_form/phone_step.vue

@@ -81,6 +81,7 @@
           <select
             id="country_code_select"
             class="absolute top-0 bottom-0 right-0 left-0 opacity-0 w-full h-full cursor-pointer"
+            :aria-label="t('country_code')"
             :disabled="!!defaultValue"
             @change="onCountrySelect(countries.find((country) => country.flag === $event.target.value))"
           >

app/javascript/submission_form/signature_step.vue

@@ -27,6 +27,7 @@
         >
           <button
             id="type_text_button"
+            ref="typeTextButton"
             type="button"
             :aria-label="t('draw_signature')"
             class="btn btn-outline btn-sm font-medium type-text-button"
@@ -49,6 +50,7 @@
         >
           <button
             id="type_text_button"
+            ref="typeTextButton"
             type="button"
             :aria-label="t('type_text')"
             class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
@@ -71,7 +73,7 @@
         >
           <button
             type="button"
-            :aria-label="t('take_photo')"
+            :aria-label="t('upload')"
             class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
             @click="$refs.takePhotoInput.click()"
           >
@@ -199,7 +201,7 @@
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
-        role="application"
+        role="img"
         :aria-label="t('signature_drawing_area')"
         style="padding: 1px; 0"
         class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
@@ -228,6 +230,8 @@
           >
             <canvas
               ref="qrCanvas"
+              role="img"
+              :aria-label="t('scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature')"
               class="h-full"
               width="132"
               height="132"
@@ -242,7 +246,8 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
       :required="field.required && !isSignatureStarted"
-      :placeholder="`${t('type_signature_here')}...`"
+      :aria-label="field.name || t('signature')"
+      :placeholder="`${t('type_signature_here')}${field.required ? '...' : ' (' + t('optional') + ')'}`"
       type="text"
       @input="updateWrittenSignature"
     >
@@ -251,6 +256,7 @@
       class="select base-input !text-2xl w-full mt-6 text-center"
       :class="{ 'text-gray-300': !reason }"
       required
+      :aria-label="t('select_a_reason')"
       :name="`values[${field.preferences.reason_field_uuid}]`"
       @change="$event.target.value === 'other' ? [reason = '', isOtherReason = true] : $emit('update:reason', $event.target.value)"
     >
@@ -296,6 +302,7 @@
       class="base-input !text-2xl w-full mt-6"
       required
       :name="`values[${field.preferences.reason_field_uuid}]`"
+      :aria-label="t('select_a_reason')"
       :placeholder="t('type_here_')"
       :value="reason"
       type="text"
@@ -528,7 +535,7 @@ export default {
               this.$nextTick(() => this.drawSignatureSrc())
             } else if (this.isTextSignature) {
               this.$nextTick(() => {
-                if (this.$refs.textInput) {
+                if (this.$refs.textInput && this.field.required === true) {
                   this.initTypedSignature()
                 }
               })
@@ -544,6 +551,7 @@ export default {
       this.resizeObserver = new ResizeObserver(() => {
         requestAnimationFrame(() => {
           if (!this.$refs.canvas) return
+          if (!this.$refs.canvas.parentNode?.clientWidth) return
 
           const { width, height } = this.$refs.canvas
 
@@ -586,7 +594,7 @@ export default {
     redrawCanvas (oldWidth, oldHeight) {
       const canvas = this.$refs.canvas
 
-      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0) {
+      if (this.pad && !this.isTextSignature && !this.pad.isEmpty() && oldWidth > 0 && oldHeight > 0 && canvas.width > 0 && canvas.height > 0) {
         const sx = canvas.width / oldWidth
         const sy = canvas.height / oldHeight
 
@@ -715,10 +723,12 @@ export default {
       this.clear()
       this.isTextSignature = !this.isTextSignature
 
-      if (this.isTextSignature) {
-        this.$nextTick(() => {
+      this.$nextTick(() => {
+        if (this.isTextSignature) {
           if (this.$refs.textInput) {
-            if (!this.submitter.name) {
+            if (this.submitter.name) {
+              this.$refs.typeTextButton?.focus()
+            } else {
               this.$refs.textInput.focus()
             }
 
@@ -726,8 +736,10 @@ export default {
 
             this.$emit('start')
           }
-        })
-      }
+        } else {
+          this.$refs.typeTextButton?.focus()
+        }
+      })
     },
     async initTypedSignature () {
       if (this.signatureText) {

app/javascript/submission_form/text_step.vue

@@ -41,12 +41,11 @@
       :class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
       :required="field.required"
       :pattern="field.validation?.pattern"
+      :title="validationMessage"
       :aria-describedby="field.description ? field.uuid + '-desc' : undefined"
       :placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
       type="text"
       :name="`values[${field.uuid}]`"
-      @invalid="validationMessage ? $event.target.setCustomValidity(validationMessage) : ''"
-      @input="validationMessage ? $event.target.setCustomValidity('') : ''"
       @focus="$emit('focus')"
     >
     <textarea
@@ -138,6 +137,17 @@ export default {
         return null
       }
     },
+    patternMessageKeys () {
+      return {
+        '^[0-9]{3}-[0-9]{2}-[0-9]{4}$': 'must_be_valid_ssn',
+        '^[0-9]{2}-[0-9]{7}$': 'must_be_valid_ein',
+        '^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$': 'must_be_valid_email',
+        '^https?://.*': 'must_be_valid_url',
+        '^[0-9]{5}(?:-[0-9]{4})?$': 'must_be_valid_zip',
+        '^[0-9]+$': 'must_contain_numbers_only',
+        '^[a-zA-Z]+$': 'must_contain_letters_only'
+      }
+    },
     validationMessage () {
       if (this.field.validation?.message) {
         return this.field.validation.message
@@ -149,6 +159,10 @@ export default {
             .join('-')
 
         return this.t('must_be_characters_length').replace('{number}', number)
+      } else if (this.field.validation?.pattern) {
+        const key = this.patternMessageKeys[this.field.validation.pattern]
+
+        return key ? this.t(key) : ''
       } else {
         return ''
       }

app/javascript/template_builder/area.vue

@@ -50,6 +50,7 @@
       @remove="$emit('remove')"
       @scroll-to="$emit('scroll-to', $event)"
       @add-custom-field="$emit('add-custom-field')"
+      @click-title="$emit('click-title')"
     />
     <div
       ref="touchValueTarget"
@@ -196,7 +197,8 @@
           v-else-if="!isCheckboxInput"
           width="100%"
           height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
         />
       </span>
     </div>
@@ -317,7 +319,7 @@ export default {
       default: false
     }
   },
-  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field'],
+  emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to', 'add-custom-field', 'click-title', 'multi-select'],
   data () {
     return {
       isContenteditable: false,
@@ -619,6 +621,10 @@ export default {
         return new Intl.NumberFormat('de-DE').format(number)
       } else if (format === 'space') {
         return new Intl.NumberFormat('fr-FR').format(number)
+      } else if (format === 'percent') {
+        return `${number}%`
+      } else if (format === 'percent_space') {
+        return `${String(number).replace('.', ',')} %`
       } else {
         return number
       }
@@ -715,19 +721,15 @@ export default {
         }
       }
     },
-    drag (e) {
-      if (e.target.id === 'mask' && this.editable) {
-        this.isDragged = true
-
-        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
-      }
-    },
     startTouchDrag (e) {
       if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
         return
       }
 
+      if (this.inputMode && (this.isValueInput || this.isCheckboxInput || this.isSelectInput)) {
+        return
+      }
+
       document.activeElement?.blur()
 
       e.preventDefault()
@@ -768,6 +770,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isDragged) {
         this.save()
       }
@@ -794,6 +798,8 @@ export default {
           this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(this.area), 1)
         }
 
+        this.$emit('multi-select', e)
+
         return
       }
 
@@ -835,6 +841,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isMoved) {
         this.save()
       }
@@ -859,18 +867,6 @@ export default {
         area.y = area.y - 1 - (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
       }
     },
-    stopDrag () {
-      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
-      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
-
-      if (this.isDragged) {
-        this.save()
-      }
-
-      this.isDragged = false
-
-      this.$emit('stop-drag')
-    },
     startResize () {
       if (!this.selectedAreasRef.value.includes(this.area)) {
         this.selectedAreasRef.value = [this.area]
@@ -885,6 +881,8 @@ export default {
       this.$el.getRootNode().removeEventListener('mousemove', this.resize)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
@@ -923,9 +921,17 @@ export default {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
       this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
+    },
+    clampAreaBounds (area) {
+      area.x = Math.min(Math.max(area.x, 0), 1)
+      area.y = Math.min(Math.max(area.y, 0), 1)
+      area.w = Math.min(Math.max(area.w, 0), 1)
+      area.h = Math.min(Math.max(area.h, 0), 1)
     }
   }
 }

app/javascript/template_builder/area_title.vue

@@ -3,7 +3,7 @@
     v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
     class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
     style="top: -25px; height: 25px"
-    @mousedown.stop
+    @mousedown.stop="$emit('click-title')"
     @pointerdown.stop
   >
     <FieldSubmitter
@@ -279,7 +279,7 @@ export default {
       default: false
     }
   },
-  emits: ['remove', 'scroll-to', 'add-custom-field', 'change'],
+  emits: ['remove', 'scroll-to', 'add-custom-field', 'change', 'click-title'],
   data () {
     return {
       isShowFormulaModal: false,

app/javascript/template_builder/builder.vue

@@ -51,6 +51,30 @@
         </div>
       </div>
     </div>
+    <div
+      v-if="beforeRevisionSnapshot"
+      class="top-1.5 sticky h-0 z-20 max-w-2xl mx-auto"
+    >
+      <div class="alert border-base-content/30 py-2 px-2.5">
+        <IconInfoCircle class="stroke-info shrink-0 w-6 h-6" />
+        <span>{{ t('viewing_revision_from').replace('{date}', formatRevisionTime(beforeRevisionSnapshot.revision.created_at)) }}</span>
+        <div>
+          <button
+            class="btn btn-sm"
+            @click.prevent="cancelRevision"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button
+            v-if="editable"
+            class="btn btn-sm btn-neutral text-white"
+            @click.prevent="applyRevision"
+          >
+            {{ t('apply') }}
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       v-if="$slots.buttons || withTitle"
       id="title_container"
@@ -213,6 +237,18 @@
                     <span class="whitespace-nowrap">{{ t('preferences') }}</span>
                   </a>
                 </li>
+                <li v-if="withRevisionsMenu">
+                  <button
+                    class="flex space-x-2"
+                    @click.prevent="openRevisionsModal"
+                    @mouseenter="preloadRevisions"
+                  >
+                    <span class="w-6 h-6 flex-shrink-0 flex items-center justify-center">
+                      <IconHistory class="w-5 h-5" />
+                    </span>
+                    <span class="whitespace-nowrap">{{ t('revisions') }}</span>
+                  </button>
+                </li>
                 <li v-if="withDownload">
                   <button
                     class="flex space-x-2"
@@ -273,6 +309,8 @@
           :data-document-uuid="item.attachment_uuid"
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
           :editable="editable"
           :dynamic-documents="dynamicDocuments"
           :with-dynamic-documents="withDynamicDocuments"
@@ -282,6 +320,7 @@
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
           @reorder="reorderFields"
+          @edit="editModalDocumentUuid = item.attachment_uuid"
           @down="moveDocument(item, 1)"
           @change="save"
         />
@@ -319,12 +358,18 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        ref="pagesContainer"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
+        @wheel="onPagesWheel"
       >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
         >
           <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
             <Dropzone
@@ -415,6 +460,8 @@
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :with-replace-button="withUploadButton"
+                :with-google-drive="withGoogleDrive"
+                :authenticity-token="authenticityToken"
                 :accept-file-types="acceptFileTypes"
                 :document="document"
                 :template="template"
@@ -597,10 +644,60 @@
         </div>
       </div>
     </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
+            </span>
+            <button
+              type="button"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
+            >
+              <IconX class="w-4 h-4 stroke-2" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
     <div
       id="docuseal_modal_container"
       class="modal-container"
-    />
+    >
+      <RevisionsModal
+        v-if="isRevisionsModalOpen"
+        :template="template"
+        :revisions="revisions"
+        :locale="locale"
+        @close="isRevisionsModalOpen = false"
+        @apply="onRevisionApply"
+      />
+      <DocumentsEditorModal
+        v-if="editModalDocumentUuid"
+        :template="template"
+        :authenticity-token="authenticityToken"
+        :accept-file-types="acceptFileTypes"
+        :base-url="baseUrl"
+        :page-preview-format="pagePreviewFormat"
+        :scroll-to-attachment-uuid="editModalDocumentUuid"
+        @saved="onDocumentsModified"
+        @close="editModalDocumentUuid = null"
+      />
+    </div>
   </div>
 </template>
 
@@ -618,7 +715,9 @@ import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload } from '@tabler/icons-vue'
+import RevisionsModal from './revisions_modal'
+import DocumentsEditorModal from './documents_editor_modal'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
@@ -658,7 +757,11 @@ export default {
     IconDownload,
     IconAdjustments,
     IconEye,
-    IconDeviceFloppy
+    IconHistory,
+    IconDeviceFloppy,
+    IconX,
+    RevisionsModal,
+    DocumentsEditorModal
   },
   provide () {
     return {
@@ -980,6 +1083,16 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    withRevisions: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    withRevisionsMenu: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -1002,7 +1115,12 @@ export default {
       drawOption: null,
       dragField: null,
       isDragFile: false,
-      isMathLoaded: false
+      isMathLoaded: false,
+      isRevisionsModalOpen: false,
+      editModalDocumentUuid: null,
+      revisions: [],
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
     }
   },
   computed: {
@@ -1012,6 +1130,13 @@ export default {
     fieldsDragFieldRef: () => ref(),
     customDragFieldRef: () => ref(),
     selectedAreasRef: () => ref([]),
+    attachmentUuidsIndex () {
+      return this.template.schema.reduce((acc, e, index) => {
+        acc[e.attachment_uuid] = index
+
+        return acc
+      }, {})
+    },
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
@@ -1568,7 +1693,7 @@ export default {
 
         ref.x = e.clientX - ref.offsetX
         ref.y = e.clientY - ref.offsetY
-      } else if (e.dataTransfer?.types?.includes('Files')) {
+      } else if (e.dataTransfer?.types?.includes('Files') && !this.editModalDocumentUuid) {
         this.isDragFile = true
       }
     },
@@ -1663,33 +1788,26 @@ export default {
         this.save()
       }
     },
+    compareAreas (a, b) {
+      const aAttIdx = this.attachmentUuidsIndex[a.attachment_uuid]
+      const bAttIdx = this.attachmentUuidsIndex[b.attachment_uuid]
+
+      if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
+      if (a.page !== b.page) return a.page - b.page
+
+      const aY = a.y + a.h
+      const bY = b.y + b.h
+
+      if (Math.abs(aY - bY) < 0.01) return a.x - b.x
+      if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
+
+      return aY - bY
+    },
     findFieldInsertIndex (field) {
       if (!field.areas?.length) return -1
 
       const area = field.areas[0]
 
-      const attachmentUuidsIndex = this.template.schema.reduce((acc, e, index) => {
-        acc[e.attachment_uuid] = index
-
-        return acc
-      }, {})
-
-      const compareAreas = (a, b) => {
-        const aAttIdx = attachmentUuidsIndex[a.attachment_uuid]
-        const bAttIdx = attachmentUuidsIndex[b.attachment_uuid]
-
-        if (aAttIdx !== bAttIdx) return aAttIdx - bAttIdx
-        if (a.page !== b.page) return a.page - b.page
-
-        const aY = a.y + a.h
-        const bY = b.y + b.h
-
-        if (Math.abs(aY - bY) < 0.01) return a.x - b.x
-        if (a.h < b.h ? a.y >= b.y && aY <= bY : b.y >= a.y && bY <= aY) return a.x - b.x
-
-        return aY - bY
-      }
-
       let closestBeforeIndex = -1
       let closestBeforeArea = null
       let closestAfterIndex = -1
@@ -1698,15 +1816,15 @@ export default {
       this.template.fields.forEach((f, index) => {
         if (f.submitter_uuid === field.submitter_uuid) {
           (f.areas || []).forEach((a) => {
-            const cmp = compareAreas(a, area)
+            const cmp = this.compareAreas(a, area)
 
             if (cmp < 0) {
-              if (!closestBeforeArea || (compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
+              if (!closestBeforeArea || (this.compareAreas(a, closestBeforeArea) > 0 && closestBeforeIndex < index)) {
                 closestBeforeIndex = index
                 closestBeforeArea = a
               }
             } else {
-              if (!closestAfterArea || (compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
+              if (!closestAfterArea || (this.compareAreas(a, closestAfterArea) < 0 && closestAfterIndex > index)) {
                 closestAfterIndex = index
                 closestAfterArea = a
               }
@@ -1729,6 +1847,17 @@ export default {
         this.template.fields.push(field)
       }
     },
+    insertArea (field, area) {
+      field.areas ||= []
+
+      const insertIndex = field.areas.findIndex((a) => this.compareAreas(a, area) > 0)
+
+      if (insertIndex === -1) {
+        field.areas.push(area)
+      } else {
+        field.areas.splice(insertIndex, 0, area)
+      }
+    },
     insertDetectedField (field) {
       if (!this.withDetectExistingFields || !field.name) {
         this.insertField(field)
@@ -1744,7 +1873,7 @@ export default {
 
       if (existingField) {
         existingField.areas = existingField.areas || []
-        existingField.areas.push(...(field.areas || []))
+        field.areas.forEach((area) => this.insertArea(existingField, area))
       } else {
         const customField = this.detectCustomFieldsIndex[indexKey] || this.detectCustomFieldsIndex[nameKey]
 
@@ -1756,6 +1885,73 @@ export default {
     closeDropdown () {
       document.activeElement.blur()
     },
+    preloadRevisions () {
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+    },
+    openRevisionsModal () {
+      this.closeDropdown()
+
+      this.loadRevisionsPromise ||= this.baseFetch(`/templates/${this.template.id}/versions`)
+
+      this.loadRevisionsPromise.then(async (resp) => {
+        this.revisions = await resp.json()
+
+        this.isRevisionsModalOpen = true
+      }).finally(() => {
+        this.loadRevisionsPromise = null
+      })
+    },
+    onRevisionApply (revision) {
+      this.beforeRevisionSnapshot = {
+        template: JSON.parse(JSON.stringify(this.template)),
+        dynamicDocuments: JSON.parse(JSON.stringify(this.dynamicDocuments)),
+        revision
+      }
+
+      const { dynamic_documents: nextDynamicDocs = [], ...nextTemplate } = revision.data
+
+      Object.assign(this.template, nextTemplate)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...nextDynamicDocs)
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+
+      this.isRevisionsModalOpen = false
+    },
+    cancelRevision () {
+      Object.assign(this.template, this.beforeRevisionSnapshot.template)
+
+      this.dynamicDocuments.splice(0, this.dynamicDocuments.length, ...this.beforeRevisionSnapshot.dynamicDocuments)
+
+      this.beforeRevisionSnapshot = null
+
+      this.$nextTick(() => this.reloadDynamicDocumentContent())
+    },
+    applyRevision () {
+      this.beforeRevisionSnapshot = null
+
+      const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
+
+      dynamicDocumentRefs.forEach((ref) => ref.update())
+
+      this.rebuildVariablesSchema({ disable: false })
+
+      return Promise.all([this.save({ force: true }), ...dynamicDocumentRefs.map((ref) => ref.saveBody())])
+    },
+    reloadDynamicDocumentContent () {
+      this.documentRefs.forEach((ref) => {
+        if (ref.isDynamic) ref.reloadContent()
+      })
+    },
+    formatRevisionTime (string) {
+      return new Date(string).toLocaleString(this.locale || undefined, {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      })
+    },
     t (key) {
       return this.i18n[key] || i18n[this.language]?.[key] || i18n.en[key] || key
     },
@@ -1879,6 +2075,30 @@ export default {
 
       this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)
@@ -1916,6 +2136,10 @@ export default {
       }
     },
     onKeyDown (event) {
+      if (this.editModalDocumentUuid) {
+        return
+      }
+
       if (event.key === 'Tab' && document.activeElement === document.body) {
         event.stopImmediatePropagation()
         event.preventDefault()
@@ -2249,7 +2473,7 @@ export default {
 
         fieldUuidIndex[field.uuid] = newField
 
-        newField.areas.push(newArea)
+        this.insertArea(newField, newArea)
         newAreas.push(newArea)
 
         if (['radio', 'multiple'].includes(field.type) && field.options?.length) {
@@ -2362,17 +2586,7 @@ export default {
           area.y -= area.h / 2
         }
 
-        this.drawField.areas ||= []
-
-        const insertBeforeAreaIndex = this.drawField.areas.findIndex((a) => {
-          return a.attachment_uuid === area.attachment_uuid && a.page > area.page
-        })
-
-        if (insertBeforeAreaIndex !== -1) {
-          this.drawField.areas.splice(insertBeforeAreaIndex, 0, area)
-        } else {
-          this.drawField.areas.push(area)
-        }
+        this.insertArea(this.drawField, area)
 
         if (this.template.fields.indexOf(this.drawField) === -1) {
           this.insertField(this.drawField)
@@ -2383,6 +2597,11 @@ export default {
 
         this.selectedAreasRef.value = [area]
 
+        area.x = Math.min(Math.max(area.x, 0), 1)
+        area.y = Math.min(Math.max(area.y, 0), 1)
+        area.w = Math.min(Math.max(area.w, 0), 1)
+        area.h = Math.min(Math.max(area.h, 0), 1)
+
         this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
@@ -2513,9 +2732,7 @@ export default {
         delete field.height
       }
 
-      field.areas ||= []
-
-      field.areas.push(fieldArea)
+      this.insertArea(field, fieldArea)
 
       if (this.selectedAreasRef.value.length < 2) {
         this.selectedAreasRef.value = [fieldArea]
@@ -2585,7 +2802,7 @@ export default {
             }
           }
 
-          field.areas.push(fieldArea)
+          this.insertArea(field, fieldArea)
         })
       } else {
         const fieldArea = {
@@ -2941,6 +3158,22 @@ export default {
     onDocumentsReplaceAndTemplateClone (template) {
       window.Turbo.visit(`/templates/${template.id}/edit`)
     },
+    onDocumentsModified (data) {
+      this.template.schema = data.schema
+      this.template.fields = data.fields
+      this.template.submitters = data.submitters
+      this.template.documents = data.documents
+
+      this.selectedAreasRef.value = []
+
+      if (!this.template.submitters.find((s) => s.uuid === this.selectedSubmitter?.uuid)) {
+        this.selectedSubmitter = this.template.submitters[0]
+      }
+
+      this.editModalDocumentUuid = null
+
+      this.save()
+    },
     moveDocument (item, direction) {
       const currentIndex = this.template.schema.indexOf(item)
 
@@ -2973,15 +3206,6 @@ export default {
         e.preventDefault()
 
         alert(this.t('please_draw_fields_to_prepare_the_document'))
-      } else {
-        const submitterWithoutFields =
-          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
-
-        if (submitterWithoutFields) {
-          e.preventDefault()
-
-          alert(this.t('please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed').replaceAll('{submitter_name}', submitterWithoutFields.name))
-        }
       }
     },
     onSaveClick () {
@@ -2998,28 +3222,25 @@ export default {
       if (!this.template.fields.length) {
         alert(this.t('please_draw_fields_to_prepare_the_document'))
       } else {
-        const submitterWithoutFields =
-          this.template.submitters.find((submitter) => !this.template.fields.some((f) => f.submitter_uuid === submitter.uuid))
+        this.isSaving = true
 
-        if (submitterWithoutFields) {
-          alert(this.t('please_add_fields_for_the_submitter_name_or_remove_the_submitter_name_if_not_needed').replaceAll('{submitter_name}', submitterWithoutFields.name))
-        } else {
-          this.isSaving = true
+        const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
 
-          const dynamicDocumentRefs = this.documentRefs.filter((ref) => ref.isDynamic)
+        dynamicDocumentRefs.map((ref) => ref.update())
 
-          dynamicDocumentRefs.map((ref) => ref.update())
+        this.rebuildVariablesSchema({ disable: false })
 
-          this.rebuildVariablesSchema({ disable: false })
+        const dynamicDocumentSaves = dynamicDocumentRefs.map((ref) => ref.saveBody())
 
-          const dynamicDocumentSaves = dynamicDocumentRefs.map((ref) => ref.saveBody())
+        Promise.all([this.save({ force: true }), ...dynamicDocumentSaves]).then(() => {
+          if (this.withRevisions) {
+            this.captureRevision()
+          }
 
-          Promise.all([this.save(), ...dynamicDocumentSaves]).then(() => {
-            window.Turbo.visit(`/templates/${this.template.id}`)
-          }).finally(() => {
-            this.isSaving = false
-          })
-        }
+          window.Turbo.visit(`/templates/${this.template.id}`)
+        }).finally(() => {
+          this.isSaving = false
+        })
       }
     },
     scrollToArea (area) {
@@ -3245,9 +3466,13 @@ export default {
         }
       })
     },
-    save ({ force } = { force: false }) {
+    save ({ force = false } = {}) {
       this.pendingFieldAttachmentUuids = []
 
+      if (this.beforeRevisionSnapshot) {
+        this.beforeRevisionSnapshot = null
+      }
+
       if (this.onChange) {
         this.onChange(this.template)
       }
@@ -3282,6 +3507,12 @@ export default {
         }
       })
     },
+    captureRevision () {
+      return this.baseFetch(`/templates/${this.template.id}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      })
+    },
     onDynamicDocumentUpdate () {
       this.rebuildVariablesSchema()