add more icons

Added Elestio as a deployment option

.github/workflows/ci.yml

@@ -138,4 +138,5 @@ jobs:
         run: |
           bundle exec rake db:create
           bundle exec rake db:migrate
+          bundle exec rake assets:precompile
           bundle exec rspec

.rubocop.yml

@@ -26,6 +26,9 @@ Style/Documentation:
 Lint/MissingSuper:
   Enabled: false
 
+Metrics/ParameterLists:
+  Max: 10
+
 Metrics/MethodLength:
   Max: 25
   Exclude:

Dockerfile

@@ -31,7 +31,7 @@ ENV BUNDLE_WITHOUT="development:test"
 
 WORKDIR /app
 
-RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler vips-heif libc6-compat ttf-freefont ttf-liberation && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /LiberationSans-Regular.ttf && apk del ttf-liberation
+RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler vips-heif libc6-compat ttf-freefont ttf-liberation && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf / && apk del ttf-liberation
 
 COPY ./Gemfile ./Gemfile.lock ./
 

Gemfile

@@ -7,9 +7,13 @@ ruby '3.2.2'
 gem 'aws-sdk-s3', require: false
 gem 'azure-storage-blob', require: false
 gem 'bootsnap', require: false
+gem 'cancancan'
 gem 'devise'
+gem 'devise-two-factor'
 gem 'dotenv', require: false
+gem 'email_typo'
 gem 'faraday'
+gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
 gem 'image_processing'
@@ -20,6 +24,7 @@ gem 'oj'
 gem 'omniauth-google-oauth2'
 gem 'omniauth-rails_csrf_protection'
 gem 'pagy'
+gem 'pdf-reader'
 gem 'pg', require: false
 gem 'premailer-rails'
 gem 'puma'
@@ -27,6 +32,8 @@ gem 'rails'
 gem 'rails_autolink'
 gem 'rails-i18n'
 gem 'rollbar', require: ENV.key?('ROLLBAR_ACCESS_TOKEN')
+gem 'rotp'
+gem 'rqrcode'
 gem 'ruby-vips'
 gem 'rubyXL'
 gem 'shakapacker'

Gemfile.lock

@@ -1,6 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    Ascii85 (1.1.0)
     actioncable (7.0.7)
       actionpack (= 7.0.7)
       activesupport (= 7.0.7)
@@ -68,6 +69,7 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
+    afm (0.2.2)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -112,6 +114,7 @@ GEM
     bullet (7.0.7)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
+    cancancan (3.5.0)
     capybara (3.39.2)
       addressable
       matrix
@@ -121,6 +124,7 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    chunky_png (1.4.0)
     cmdparse (3.0.7)
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
@@ -144,11 +148,17 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
+    devise-two-factor (5.0.0)
+      activesupport (~> 7.0)
+      devise (~> 4.0)
+      railties (~> 7.0)
+      rotp (~> 6.0)
     diff-lcs (1.5.0)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     dotenv (2.8.1)
+    email_typo (0.2.3)
     erb_lint (0.4.0)
       activesupport
       better_html (>= 2.0.1)
@@ -179,6 +189,8 @@ GEM
     faraday-em_http (1.0.0)
     faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
+    faraday-follow_redirects (0.3.0)
+      faraday (>= 1, < 3)
     faraday-httpclient (1.0.1)
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
@@ -233,6 +245,7 @@ GEM
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
     hashdiff (1.0.1)
+    hashery (2.1.2)
     hashie (5.0.0)
     hexapdf (0.33.0)
       cmdparse (~> 3.0, >= 3.0.3)
@@ -335,6 +348,12 @@ GEM
     parser (3.2.2.3)
       ast (~> 2.4.1)
       racc
+    pdf-reader (2.11.0)
+      Ascii85 (~> 1.0)
+      afm (~> 0.2.1)
+      hashery (~> 2.0)
+      ruby-rc4
+      ttfunk
     pg (1.5.3)
     premailer (1.21.0)
       addressable
@@ -414,6 +433,11 @@ GEM
     retriable (3.1.2)
     rexml (3.2.6)
     rollbar (3.4.0)
+    rotp (6.3.0)
+    rqrcode (2.2.0)
+      chunky_png (~> 1.0)
+      rqrcode_core (~> 1.0)
+    rqrcode_core (1.2.0)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
@@ -461,6 +485,7 @@ GEM
       rubocop-capybara (~> 2.17)
       rubocop-factory_bot (~> 2.22)
     ruby-progressbar (1.13.0)
+    ruby-rc4 (0.1.5)
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
@@ -502,6 +527,7 @@ GEM
     thor (1.2.2)
     timeout (0.4.0)
     trailblazer-option (0.1.2)
+    ttfunk (1.7.0)
     turbo-rails (1.4.0)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
@@ -544,15 +570,19 @@ DEPENDENCIES
   better_html
   bootsnap
   bullet
+  cancancan
   capybara
   cuprite
   debug
   devise
+  devise-two-factor
   dotenv
+  email_typo
   erb_lint
   factory_bot_rails
   faker
   faraday
+  faraday-follow_redirects
   google-cloud-storage
   hexapdf
   image_processing
@@ -564,6 +594,7 @@ DEPENDENCIES
   omniauth-google-oauth2
   omniauth-rails_csrf_protection
   pagy
+  pdf-reader
   pg
   premailer-rails
   pry-rails
@@ -572,6 +603,8 @@ DEPENDENCIES
   rails-i18n
   rails_autolink
   rollbar
+  rotp
+  rqrcode
   rspec-rails
   rubocop
   rubocop-performance

README.md

@@ -52,6 +52,8 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 | [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
 |**DigitalOcean**|**Render**|
 | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)
+|**Koyeb**|**Elestio**|
+| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) | [<img alt="Deploy on Elestio" src="https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png">](https://dash.elest.io/deploy?soft=DocuSeal&id=339) |
 
 
 #### Docker
@@ -79,9 +81,9 @@ HOST=your-domain-name.com docker-compose up
 
 At DocuSeal we have expertise and technologies to make documents creation, filling, signing and processing seamlessly integrated with your product. We specialize in working with various industries, including **Banking, Healthcare, Transport, Real Estate, eCommerce, KYC, CRM, and other software products** that require bulk document signing. By leveraging DocuSeal, we can assist in reducing the overall cost of developing and processing electronic documents while ensuring security and compliance with local electronic document laws.
 
-[![Book an Integration Demo](https://cal.com/book-with-cal-dark.svg)](https://cal.com/docuseal)
+[Book a Meeting](https://calendly.com/kriti-docuseal/30min)
 
 ## License
 
 Distributed under the AGPLv3 License. See [LICENSE](https://github.com/docusealco/docuseal/blob/master/LICENSE) for more information.
-Unless otherwise noted, all files © 2023 Oleksandr Turchyn.
+Unless otherwise noted, all files © 2023 DocuSeal LLC.

app/controllers/accounts_controller.rb

@@ -9,6 +9,9 @@ class AccountsController < ApplicationController
     'de-DE' => 'German (Germany)'
   }.freeze
 
+  before_action :load_account
+  authorize_resource :account
+
   def show; end
 
   def update
@@ -35,6 +38,10 @@ class AccountsController < ApplicationController
 
   private
 
+  def load_account
+    @account = current_account
+  end
+
   def account_params
     params.require(:account).permit(:name, :timezone, :locale)
   end

app/controllers/api/api_base_controller.rb

@@ -3,11 +3,36 @@
 module Api
   class ApiBaseController < ActionController::API
     include ActiveStorage::SetCurrent
+    include Pagy::Backend
+
+    DEFAULT_LIMIT = 10
+    MAX_LIMIT = 100
+
+    wrap_parameters false
 
     before_action :authenticate_user!
+    check_authorization
+
+    if Rails.env.production?
+      rescue_from CanCan::AccessDenied do |e|
+        Rollbar.error(e) if defined?(Rollbar)
+
+        render json: { error: e.message }, status: :forbidden
+      end
+    end
 
     private
 
+    def paginate(relation)
+      result = relation.order(id: :desc)
+                       .limit([params[:limit] || DEFAULT_LIMIT, MAX_LIMIT].min)
+
+      result = result.where('id < ?', params[:after]) if params[:after].present?
+      result = result.where('id > ?', params[:before]) if params[:before].present?
+
+      result
+    end
+
     def current_account
       current_user&.account
     end

app/controllers/api/attachments_controller.rb

@@ -3,6 +3,7 @@
 module Api
   class AttachmentsController < ApiBaseController
     skip_before_action :authenticate_user!
+    skip_authorization_check
 
     def create
       submitter = Submitter.find_by!(slug: params[:submitter_slug])

app/controllers/api/submissions_controller.rb

@@ -2,78 +2,150 @@
 
 module Api
   class SubmissionsController < ApiBaseController
-    UnknownFieldName = Class.new(StandardError)
-    UnknownSubmitterName = Class.new(StandardError)
+    load_and_authorize_resource :template, only: :create
+    load_and_authorize_resource :submission, only: %i[show index]
+
+    before_action only: :create do
+      authorize!(:create, Submission)
+    end
+
+    def index
+      submissions = Submissions.search(@submissions, params[:q])
+      submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
+
+      submissions = paginate(submissions.preload(:created_by_user, :template, :submitters))
+
+      render json: {
+        data: submissions.as_json(serialize_params),
+        pagination: {
+          count: submissions.size,
+          next: submissions.last&.id,
+          prev: submissions.first&.id
+        }
+      }
+    end
+
+    def show
+      serialized_subbmitters =
+        @submission.submitters.preload(documents_attachments: :blob, attachments_attachments: :blob).map do |submitter|
+          Submissions::EnsureResultGenerated.call(submitter) if submitter.completed_at?
+
+          Submitters::SerializeForApi.call(submitter)
+        end
+
+      json = @submission.as_json(
+        serialize_params.deep_merge(
+          include: {
+            submission_events: {
+              only: %i[id submitter_id event_type event_timestamp]
+            }
+          }
+        )
+      )
+
+      json[:submitters] = serialized_subbmitters
+
+      render json:
+    end
 
     def create
-      template = current_account.templates.find(params[:template_id])
+      is_send_email = !params[:send_email].in?(['false', false])
 
       submissions =
-        if params[:emails].present?
-          Submissions.create_from_emails(template:,
+        if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
+          Submissions.create_from_emails(template: @template,
                                          user: current_user,
                                          source: :api,
-                                         send_email: params[:send_email] != 'false',
-                                         emails: params[:emails] || params[:email])
+                                         mark_as_sent: is_send_email,
+                                         emails:)
         else
-          submissions_attrs = normalize_submissions_params!(submissions_params[:submission], template)
+          submissions_attrs, attachments = normalize_submissions_params!(submissions_params[:submission], @template)
 
-          Submissions.create_from_submitters(template:,
-                                             user: current_user,
-                                             source: :api,
-                                             send_email: params[:send_email] != 'false',
-                                             submissions_attrs:)
+          Submissions.create_from_submitters(
+            template: @template,
+            user: current_user,
+            source: :api,
+            mark_as_sent: is_send_email,
+            submitters_order: params[:submitters_order] || 'preserved',
+            submissions_attrs:
+          )
         end
 
+      Submissions.send_signature_requests(submissions, send_email: is_send_email)
+
       submitters = submissions.flat_map(&:submitters)
 
-      send_invitation_emails(submitters) if params[:send_email] != 'false'
+      save_default_value_attachments!(attachments, submitters)
 
       render json: submitters
-    rescue UnknownFieldName, UnknownSubmitterName => e
+    rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
+    def destroy
+      @submission.update!(deleted_at: Time.current)
+
+      render json: @submission.as_json(only: %i[id deleted_at])
+    end
+
     private
 
-    def send_invitation_emails(submitters)
-      submitters.each do |submitter|
-        SubmitterMailer.invitation_email(submitter, message: params[:message]).deliver_later!
-      end
+    def serialize_params
+      {
+        only: %i[id source submitters_order created_at updated_at],
+        include: {
+          submitters: { only: %i[id slug uuid name email phone
+                                 completed_at opened_at sent_at
+                                 created_at updated_at],
+                        methods: %i[status] },
+          template: { only: %i[id name created_at updated_at] },
+          created_by_user: { only: %i[id email first_name last_name] }
+        }
+      }
     end
 
     def submissions_params
-      params.permit(submission: [{ submitters: [[:uuid, :name, :email, { values: {} }]] }])
+      params.permit(submission: [{
+                      submitters: [[:uuid, :name, :email, :role, :completed, :phone, { values: {} }]]
+                    }])
     end
 
     def normalize_submissions_params!(submissions_params, template)
-      submissions_params.each do |submission|
+      attachments = []
+
+      Array.wrap(submissions_params).each do |submission|
         submission[:submitters].each_with_index do |submitter, index|
           next if submitter[:values].blank?
 
-          submitter[:values] =
-            normalize_submitter_values(template,
-                                       submitter[:values], submitter[:name] || template.submitters[index]['name'])
+          values, new_attachments =
+            Submitters::NormalizeValues.call(template,
+                                             submitter[:values],
+                                             submitter[:role] || template.submitters[index]['name'])
+
+          attachments.push(*new_attachments)
+
+          submitter[:values] = values
         end
       end
 
-      submissions_params
+      [submissions_params, attachments]
     end
 
-    def normalize_submitter_values(template, values, submitter_name)
-      submitter =
-        template.submitters.find { |e| e['name'] == submitter_name } ||
-        raise(UnknownSubmitterName, "Unknown submitter: #{submitter_name}")
+    def save_default_value_attachments!(attachments, submitters)
+      return if attachments.blank?
 
-      fields = template.fields.select { |e| e['submitter_uuid'] == submitter['uuid'] }
+      attachments_index = attachments.index_by(&:uuid)
 
-      fields_uuid_index = fields.index_by { |e| e['uuid'] }
-      fields_name_index = fields.index_by { |e| e['name'] }
+      submitters.each do |submitter|
+        submitter.values.to_a.each do |_, value|
+          attachment = attachments_index[value]
 
-      values.transform_keys do |key|
-        next key if fields_uuid_index[key].present?
+          next unless attachment
 
-        fields_name_index[key]&.dig('uuid') || raise(UnknownFieldName, "Unknown field: #{key}")
+          attachment.record = submitter
+
+          attachment.save!
+        end
       end
     end
   end

app/controllers/api/submitter_email_clicks_controller.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmitterEmailClicksController < ApiBaseController
+    skip_before_action :authenticate_user!
+    skip_authorization_check
+
+    def create
+      submitter = Submitter.find_by!(slug: params[:submitter_slug])
+
+      if params[:t] == SubmissionEvents.build_tracking_param(submitter, 'click_email')
+        SubmissionEvents.create_with_tracking_data(submitter, 'click_email', request)
+      end
+
+      render json: {}
+    end
+  end
+end

app/controllers/api/submitter_form_views_controller.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmitterFormViewsController < ApiBaseController
+    skip_before_action :authenticate_user!
+    skip_authorization_check
+
+    def create
+      submitter = Submitter.find_by!(slug: params[:submitter_slug])
+
+      SubmissionEvents.create_with_tracking_data(submitter, 'view_form', request)
+
+      SendFormViewedWebhookRequestJob.perform_later(submitter)
+
+      render json: {}
+    end
+  end
+end

app/controllers/api/submitters_autocomplete_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmittersAutocompleteController < ApiBaseController
+    load_and_authorize_resource :submitter, parent: false
+
+    SELECT_COLUMNS = %w[email phone name].freeze
+    LIMIT = 100
+
+    def index
+      submitters = search_submitters(@submitters)
+
+      values = submitters.limit(LIMIT).group(SELECT_COLUMNS.join(', ')).pluck(SELECT_COLUMNS.join(', '))
+
+      attrs = values.map { |row| SELECT_COLUMNS.zip(row).to_h }
+      attrs = attrs.uniq { |e| e[params[:field]] } if params[:field].present?
+
+      render json: attrs
+    end
+
+    private
+
+    def search_submitters(submitters)
+      if SELECT_COLUMNS.include?(params[:field])
+        column = Submitter.arel_table[params[:field].to_sym]
+
+        term = "%#{params[:q].downcase}%"
+
+        submitters.where(column.lower.matches(term))
+      else
+        Submitters.search(submitters, params[:q])
+      end
+    end
+  end
+end

app/controllers/api/submitters_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Api
+  class SubmittersController < ApiBaseController
+    load_and_authorize_resource :submitter
+
+    def show
+      Submissions::EnsureResultGenerated.call(@submitter) if @submitter.completed_at?
+
+      render json: Submitters::SerializeForApi.call(@submitter, with_template: true, with_events: true)
+    end
+  end
+end

app/controllers/api/template_folders_autocomplete_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Api
+  class TemplateFoldersAutocompleteController < ApiBaseController
+    load_and_authorize_resource :template_folder, parent: false
+
+    LIMIT = 100
+
+    def index
+      template_folders = @template_folders.joins(:templates).where(templates: { deleted_at: nil }).distinct
+      template_folders = TemplateFolders.search(template_folders, params[:q]).limit(LIMIT)
+
+      render json: template_folders.as_json(only: %i[name deleted_at])
+    end
+  end
+end

app/controllers/api/templates_controller.rb

@@ -2,25 +2,54 @@
 
 module Api
   class TemplatesController < ApiBaseController
-    before_action :load_template, only: %i[show update]
+    load_and_authorize_resource :template
 
     def index
-      render json: current_account.templates
+      templates = Templates.search(@templates, params[:q])
+
+      templates = params[:archived] ? templates.archived : templates.active
+
+      templates = paginate(templates.preload(:author, documents_attachments: :blob))
+
+      render json: {
+        data: templates.as_json(serialize_params),
+        pagination: {
+          count: templates.size,
+          next: templates.last&.id,
+          prev: templates.first&.id
+        }
+      }
     end
 
     def show
-      render json: @template.as_json(include: { author: { only: %i[id email first_name last_name] },
-                                                documents: { only: %i[id uuid], methods: %i[url filename] } })
+      render json: @template.as_json(serialize_params)
     end
 
     def update
+      if (folder_name = params.dig(:template, :folder_name))
+        @template.folder = TemplateFolders.find_or_create_by_name(current_user, folder_name)
+      end
+
       @template.update!(template_params)
 
-      render :ok
+      render json: @template.as_json(only: %i[id updated_at])
+    end
+
+    def destroy
+      @template.update!(deleted_at: Time.current)
+
+      render json: @template.as_json(only: %i[id deleted_at])
     end
 
     private
 
+    def serialize_params
+      {
+        include: { author: { only: %i[id email first_name last_name] },
+                   documents: { only: %i[id uuid], methods: %i[url filename] } }
+      }
+    end
+
     def template_params
       params.require(:template).permit(:name,
                                        schema: [%i[attachment_uuid name]],
@@ -28,9 +57,5 @@ module Api
                                        fields: [[:uuid, :submitter_uuid, :name, :type, :required,
                                                  { options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]])
     end
-
-    def load_template
-      @template = current_account.templates.find(params[:id])
-    end
   end
 end

app/controllers/api/templates_documents_controller.rb

@@ -2,17 +2,12 @@
 
 module Api
   class TemplatesDocumentsController < ApiBaseController
+    load_and_authorize_resource :template
+
     def create
       return head :unprocessable_entity if params[:blobs].blank? && params[:files].blank?
 
-      @template = current_account.templates.find(params[:template_id])
-
-      documents =
-        find_or_create_blobs.map do |blob|
-          document = @template.documents.create!(blob:)
-
-          Templates::ProcessDocument.call(document)
-        end
+      documents = Templates::CreateAttachments.call(@template, params)
 
       schema = documents.map do |doc|
         { attachment_uuid: doc.uuid, name: doc.filename.base }
@@ -27,19 +22,5 @@ module Api
         )
       }
     end
-
-    private
-
-    def find_or_create_blobs
-      blobs = params[:blobs]&.map do |attrs|
-        ActiveStorage::Blob.find_signed(attrs[:signed_id])
-      end
-
-      blobs || params[:files].map do |file|
-        ActiveStorage::Blob.create_and_upload!(io: file.open,
-                                               filename: file.original_filename,
-                                               content_type: file.content_type)
-      end
-    end
   end
 end

app/controllers/api_settings_controller.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
 class ApiSettingsController < ApplicationController
-  def index; end
+  def index
+    authorize!(:read, current_user.access_token)
+  end
 end

app/controllers/application_controller.rb

@@ -4,6 +4,8 @@ class ApplicationController < ActionController::Base
   include ActiveStorage::SetCurrent
   include Pagy::Backend
 
+  check_authorization unless: :devise_controller?
+
   before_action :sign_in_for_demo, if: -> { Docuseal.demo? }
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
@@ -16,6 +18,14 @@ class ApplicationController < ActionController::Base
     redirect_to request.path
   end
 
+  if Rails.env.production?
+    rescue_from CanCan::AccessDenied do |e|
+      Rollbar.error(e) if defined?(Rollbar)
+
+      redirect_back(fallback_location: root_path, alert: e.message)
+    end
+  end
+
   def default_url_options
     Docuseal.default_url_options
   end

app/controllers/console_redirect_controller.rb

@@ -2,6 +2,7 @@
 
 class ConsoleRedirectController < ApplicationController
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     return redirect_to(new_user_session_path({ redir: params[:redir] }.compact)) if current_user.blank?

app/controllers/dashboard_controller.rb

@@ -3,12 +3,68 @@
 class DashboardController < ApplicationController
   skip_before_action :authenticate_user!, only: %i[index]
 
+  before_action :maybe_redirect_product_url
+  before_action :maybe_render_landing
+
+  load_and_authorize_resource :template_folder, parent: false
+  load_and_authorize_resource :template, parent: false
+
+  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
+  TEMPLATES_PER_PAGE = 12
+  FOLDERS_PER_PAGE = 18
+
   def index
-    return redirect_to Docuseal::PRODUCT_URL, allow_other_host: true if Docuseal.multitenant? && !signed_in?
-    return render 'pages/landing' unless signed_in?
+    @template_folders = filter_template_folders(@template_folders)
 
-    templates = current_account.templates.active.preload(:author).order(id: :desc)
+    @pagy, @template_folders = pagy(
+      @template_folders,
+      items: FOLDERS_PER_PAGE,
+      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
+    )
 
-    @pagy, @templates = pagy(templates, items: 12)
+    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)
+
+      items =
+        if @template_folders.size < 4
+          TEMPLATES_PER_PAGE
+        else
+          (@template_folders.size < 7 ? 9 : 6)
+        end
+
+      @pagy, @templates = pagy(@templates, items:)
+    end
+  end
+
+  private
+
+  def filter_template_folders(template_folders)
+    rel = template_folders.joins(:active_templates)
+                          .order(id: :desc)
+                          .distinct
+
+    TemplateFolders.search(rel, params[:q])
+  end
+
+  def filter_templates(templates)
+    rel = templates.active.preload(:author).order(id: :desc)
+    rel = rel.where(folder_id: current_account.default_template_folder.id) if params[:q].blank?
+
+    Templates.search(rel, params[:q])
+  end
+
+  def maybe_redirect_product_url
+    return if !Docuseal.multitenant? || signed_in?
+
+    redirect_to Docuseal::PRODUCT_URL, allow_other_host: true
+  end
+
+  def maybe_render_landing
+    return if signed_in?
+
+    render 'pages/landing'
   end
 end

app/controllers/email_smtp_settings_controller.rb

@@ -1,12 +1,14 @@
 # frozen_string_literal: true
 
-class EmailSettingsController < ApplicationController
+class EmailSmtpSettingsController < ApplicationController
   before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, only: :create
 
   def index; end
 
   def create
-    if @encrypted_config.update(storage_configs)
+    if @encrypted_config.update(email_configs)
       SettingsMailer.smtp_successful_setup(@encrypted_config.value['from_email']).deliver_now!
 
       redirect_to settings_email_index_path, notice: 'Changes have been saved'
@@ -26,7 +28,7 @@ class EmailSettingsController < ApplicationController
       EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::EMAIL_SMTP_KEY)
   end
 
-  def storage_configs
+  def email_configs
     params.require(:encrypted_config).permit(value: {}).tap do |e|
       e[:value].compact_blank!
     end

app/controllers/esign_settings_controller.rb

@@ -1,19 +1,113 @@
 # frozen_string_literal: true
 
 class EsignSettingsController < ApplicationController
+  DEFAULT_CERT_NAME = 'DocuSeal Self-Host Autogenerated'
+
+  CertFormRecord = Struct.new(:name, :file, :password, keyword_init: true) do
+    include ActiveModel::Validations
+
+    def to_key
+      []
+    end
+  end
+
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, parent: false, only: %i[new create]
+  authorize_resource :encrypted_config, only: %i[update destroy show]
+
+  def show
+    cert_data = @encrypted_config.value || {}
+
+    default_pkcs = GenerateCertificate.load_pkcs(cert_data) if cert_data['cert'].present?
+
+    custom_pkcs_list = (cert_data['custom'] || []).map do |e|
+      { 'pkcs' => OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s),
+        'name' => e['name'],
+        'status' => e['status'] }
+    end
+
+    @pkcs_list = [
+      if default_pkcs
+        {
+          'pkcs' => default_pkcs,
+          'name' => DEFAULT_CERT_NAME,
+          'status' => custom_pkcs_list.any? { |e| e['status'] == 'default' } ? 'validate' : 'default'
+        }
+      end,
+      *custom_pkcs_list
+    ].compact.reverse
+  end
+
+  def new
+    @cert_record = CertFormRecord.new
+  end
+
   def create
-    pdfs =
-      params[:files].map do |file|
-        HexaPDF::Document.new(io: file.open)
-      end
+    @cert_record = CertFormRecord.new(**cert_params)
 
-    certs = Accounts.load_signing_certs(current_account)
+    if (@encrypted_config.value && @encrypted_config.value['custom']&.any? { |e| e['name'] == @cert_record.name }) ||
+       @cert_record.name == DEFAULT_CERT_NAME
 
-    trusted_certs = [certs[:cert], certs[:sub_ca], certs[:root_ca]]
+      @cert_record.errors.add(:name, 'already exists')
 
-    render turbo_stream: turbo_stream.replace('result', partial: 'result',
-                                                        locals: { pdfs:, files: params[:files], trusted_certs: })
-  rescue HexaPDF::MalformedPDFError
-    render turbo_stream: turbo_stream.replace('result', html: helpers.tag.div('Invalid PDF', id: 'result'))
+      return render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'),
+                    status: :unprocessable_entity
+    end
+
+    save_new_cert!(@encrypted_config, @cert_record)
+
+    redirect_to settings_esign_path, notice: 'Certificate has been successfully added!'
+  rescue OpenSSL::PKCS12::PKCS12Error
+    @cert_record.errors.add(:password, "is invalid. Make sure you're uploading a valid .p12 file")
+
+    render turbo_stream: turbo_stream.replace(:modal, template: 'esign_settings/new'), status: :unprocessable_entity
+  end
+
+  def update
+    @encrypted_config.value['custom'].each { |e| e['status'] = 'validate' }
+
+    custom_cert_data = @encrypted_config.value['custom'].find { |e| e['name'] == params[:name] }
+    custom_cert_data['status'] = 'default' if custom_cert_data
+
+    @encrypted_config.save!
+
+    redirect_to settings_esign_path, notice: 'Default certificate has been selected'
+  end
+
+  def destroy
+    @encrypted_config.value['custom'].reject! { |e| e['name'] == params[:name] }
+
+    @encrypted_config.save!
+
+    redirect_to settings_esign_path, notice: 'Certificate has been removed'
+  end
+
+  private
+
+  def load_encrypted_config
+    @encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account,
+                                                              key: EncryptedConfig::ESIGN_CERTS_KEY)
+  end
+
+  def save_new_cert!(cert_configs, cert_record)
+    pkcs = OpenSSL::PKCS12.new(cert_record.file.read, cert_record.password)
+
+    cert_configs.value ||= {}
+    cert_configs.value['custom'] ||= []
+    cert_configs.value['custom'].each { |e| e['status'] = 'validate' }
+    cert_configs.value['custom'] << {
+      data: Base64.urlsafe_encode64(pkcs.to_der),
+      password: cert_record.password,
+      name: cert_record.name,
+      status: 'default'
+    }
+
+    cert_configs.save!
+  end
+
+  def cert_params
+    return {} if params[:esign_settings_controller_cert_form_record].blank?
+
+    params.require(:esign_settings_controller_cert_form_record).permit(:name, :file, :password)
   end
 end

app/controllers/mfa_setup_controller.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+class MfaSetupController < ApplicationController
+  before_action do
+    authorize!(:update, current_user)
+  end
+
+  def new
+    current_user.otp_secret ||= User.generate_otp_secret
+
+    current_user.save!
+
+    @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal::PRODUCT_NAME)
+  end
+
+  def edit; end
+
+  def create
+    if current_user.validate_and_consume_otp!(params[:otp_attempt])
+      current_user.otp_required_for_login = true
+      current_user.save!
+
+      redirect_to settings_profile_index_path, notice: '2FA has been configured'
+    else
+      @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal::PRODUCT_NAME)
+
+      @error_message = 'Code is invalid'
+
+      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/new'), status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    if current_user.validate_and_consume_otp!(params[:otp_attempt])
+      current_user.update!(otp_required_for_login: false, otp_secret: nil)
+
+      redirect_to settings_profile_index_path, notice: '2FA has been removed'
+    else
+      @error_message = 'Code is invalid'
+
+      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/edit'), status: :unprocessable_entity
+    end
+  end
+end

app/controllers/newsletters_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class NewslettersController < ApplicationController
+  skip_authorization_check
+
   def show; end
 
   def update

app/controllers/notifications_settings_controller.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class NotificationsSettingsController < ApplicationController
+  before_action :load_bcc_config, only: :index
+  before_action :load_reminder_config, only: :index
+  authorize_resource :bcc_config, only: :index
+  authorize_resource :reminder_config, only: :index
+
+  before_action :build_account_config, only: :create
+  authorize_resource :account_config, only: :create
+
+  def index; end
+
+  def create
+    if @account_config.save
+      redirect_back fallback_location: settings_notifications_path, notice: 'Changes have been saved'
+    else
+      redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'
+    end
+  end
+
+  private
+
+  def build_account_config
+    @account_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: email_config_params[:key])
+
+    @account_config.assign_attributes(email_config_params)
+  end
+
+  def load_bcc_config
+    @bcc_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::BCC_EMAILS)
+  end
+
+  def load_reminder_config
+    @reminder_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::SUBMITTER_REMAILERS)
+  end
+
+  def email_config_params
+    params.require(:account_config).permit!.tap do |attrs|
+      attrs[:key] = nil unless attrs[:key].in?([AccountConfig::BCC_EMAILS, AccountConfig::SUBMITTER_REMAILERS])
+    end
+  end
+end

app/controllers/personalization_settings_controller.rb

@@ -1,12 +1,16 @@
 # frozen_string_literal: true
 
 class PersonalizationSettingsController < ApplicationController
-  def show; end
+  def show
+    authorize!(:read, AccountConfig)
+  end
 
   def create
     account_config =
       current_account.account_configs.find_or_initialize_by(key: encrypted_config_params[:key])
 
+    authorize!(:create, account_config)
+
     account_config.update!(encrypted_config_params)
 
     redirect_back(fallback_location: settings_personalization_path, notice: 'Settings have been saved.')

app/controllers/profile_controller.rb

@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
 class ProfileController < ApplicationController
+  before_action do
+    authorize!(:manage, current_user)
+  end
+
   def index; end
 
   def update_contact

app/controllers/registrations_controller.rb

@@ -28,7 +28,7 @@ class RegistrationsController < Devise::RegistrationsController
     return unless signed_in?
     return if params[:redir].blank?
 
-    redirect_to after_sign_up_path_for(current_user)
+    redirect_to after_sign_up_path_for(current_user), allow_other_host: true
   end
 
   def require_no_authentication

app/controllers/send_submission_email_controller.rb

@@ -5,6 +5,7 @@ class SendSubmissionEmailController < ApplicationController
 
   skip_before_action :authenticate_user!
   skip_before_action :verify_authenticity_token
+  skip_authorization_check
 
   def success; end
 

app/controllers/sessions_controller.rb

@@ -1,12 +1,18 @@
 # frozen_string_literal: true
 
 class SessionsController < Devise::SessionsController
+  before_action :configure_permitted_parameters
+
   def create
     if Docuseal.multitenant? && !User.exists?(email: sign_in_params[:email])
       return redirect_to new_registration_path(sign_up: true, user: sign_in_params.slice(:email)),
                          notice: 'Create a new account'
     end
 
+    if User.exists?(email: sign_in_params[:email], otp_required_for_login: true) && sign_in_params[:otp_attempt].blank?
+      return render :otp, locals: { resource: User.new(sign_in_params) }, status: :unprocessable_entity
+    end
+
     super
   end
 
@@ -22,6 +28,10 @@ class SessionsController < Devise::SessionsController
     super
   end
 
+  def configure_permitted_parameters
+    devise_parameter_sanitizer.permit(:sign_in, keys: [:otp_attempt])
+  end
+
   def require_no_authentication
     super
 

app/controllers/setup_controller.rb

@@ -3,6 +3,7 @@
 class SetupController < ApplicationController
   skip_before_action :maybe_redirect_to_setup
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   before_action :redirect_to_root_if_signed, if: :signed_in?
   before_action :ensure_first_user_not_created!

app/controllers/sms_settings_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class SmsSettingsController < ApplicationController
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, except: :index
+
+  def index; end
+
+  private
+
+  def load_encrypted_config
+    @encrypted_config =
+      EncryptedConfig.find_or_initialize_by(account: current_account, key: 'sms_configs')
+  end
+end

app/controllers/start_form_controller.rb

@@ -4,6 +4,7 @@ class StartFormController < ApplicationController
   layout 'form'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   before_action :load_template
 
@@ -20,12 +21,13 @@ class StartFormController < ApplicationController
     else
       @submitter.assign_attributes(
         uuid: @template.submitters.first['uuid'],
-        opened_at: Time.current,
         ip: request.remote_ip,
         ua: request.user_agent
       )
 
-      @submitter.submission ||= Submission.new(template: @template, source: :link)
+      @submitter.submission ||= Submission.new(template: @template,
+                                               template_submitters: @template.submitters,
+                                               source: :link)
 
       if @submitter.save
         redirect_to submit_form_path(@submitter.slug)
@@ -44,7 +46,9 @@ class StartFormController < ApplicationController
   private
 
   def submitter_params
-    params.require(:submitter).permit(:email)
+    params.require(:submitter).permit(:email).tap do |attrs|
+      attrs[:email] = Submissions.normalize_email(attrs[:email])
+    end
   end
 
   def load_template

app/controllers/storage_settings_controller.rb

@@ -2,6 +2,8 @@
 
 class StorageSettingsController < ApplicationController
   before_action :load_encrypted_config
+  authorize_resource :encrypted_config, only: :index
+  authorize_resource :encrypted_config, parent: false, only: :create
 
   def index; end
 

app/controllers/submissions_controller.rb

@@ -2,59 +2,57 @@
 
 class SubmissionsController < ApplicationController
   before_action :load_template, only: %i[new create]
+  authorize_resource :template, only: %i[new create]
+
+  load_and_authorize_resource :submission, only: %i[show destroy]
 
   def show
-    @submission =
-      Submission.joins(:template).where(template: { account_id: current_account.id })
-                .preload(template: { documents_attachments: { preview_images_attachments: :blob } })
-                .find(params[:id])
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submission],
+      associations: [:template, { template_schema_documents: [:blob, { preview_images_attachments: :blob }] }]
+    ).call
 
     render :show, layout: 'plain'
   end
 
-  def new; end
+  def new
+    authorize!(:new, Submission)
+  end
 
   def create
+    authorize!(:create, Submission)
+
     submissions =
       if params[:emails].present?
         Submissions.create_from_emails(template: @template,
                                        user: current_user,
                                        source: :invite,
-                                       send_email: params[:send_email] == '1',
+                                       mark_as_sent: params[:send_email] == '1',
                                        emails: params[:emails])
       else
         Submissions.create_from_submitters(template: @template,
                                            user: current_user,
                                            source: :invite,
-                                           send_email: params[:send_email] == '1',
+                                           submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
+                                           mark_as_sent: params[:send_email] == '1',
                                            submissions_attrs: submissions_params[:submission].to_h.values)
       end
 
-    submitters = submissions.flat_map(&:submitters)
+    Submissions.send_signature_requests(submissions, params)
 
-    if params[:send_email] == '1'
-      submitters.each do |submitter|
-        SubmitterMailer.invitation_email(submitter, message: params[:message]).deliver_later!
-      end
-    end
-
-    redirect_to template_path(@template),
-                notice: "#{submitters.size} #{'recipient'.pluralize(submitters.size)} added"
+    redirect_to template_path(@template), notice: 'New recipients have been added'
   end
 
   def destroy
-    submission = Submission.joins(:template).where(template: { account_id: current_account.id })
-                           .find(params[:id])
+    @submission.update!(deleted_at: Time.current)
 
-    submission.update!(deleted_at: Time.current)
-
-    redirect_back(fallback_location: template_path(submission.template), notice: 'Submission has been archived')
+    redirect_back(fallback_location: template_path(@submission.template), notice: 'Submission has been archived')
   end
 
   private
 
   def submissions_params
-    params.permit(submission: { submitters: [%i[uuid email]] })
+    params.permit(submission: { submitters: [%i[uuid email phone name]] })
   end
 
   def load_template

app/controllers/submissions_debug_controller.rb

@@ -4,6 +4,7 @@ class SubmissionsDebugController < ApplicationController
   layout 'plain'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     @submitter = Submitter.preload({ attachments_attachments: :blob },
@@ -15,9 +16,13 @@ class SubmissionsDebugController < ApplicationController
         render 'submit_form/show'
       end
       f.pdf do
-        Submissions::GenerateResultAttachments.call(@submitter)
+        if params[:audit]
+          Submissions::GenerateAuditTrail.call(@submitter.submission)
+        else
+          Submissions::GenerateResultAttachments.call(@submitter)
+        end
 
-        send_data ActiveStorage::Attachment.where(name: :documents).last.download,
+        send_data ActiveStorage::Attachment.where(name: params[:audit] ? :audit_trail : :documents).last.download,
                   filename: 'debug.pdf',
                   disposition: 'inline',
                   type: 'application/pdf'

app/controllers/submissions_download_controller.rb

@@ -2,14 +2,19 @@
 
 class SubmissionsDownloadController < ApplicationController
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def index
     submitter = Submitter.find_by(slug: params[:submitter_slug])
 
     Submissions::EnsureResultGenerated.call(submitter)
 
+    last_submitter = submitter.submission.submitters.where.not(completed_at: nil).order(:completed_at).last
+
+    Submissions::EnsureResultGenerated.call(last_submitter)
+
     urls =
-      Submitters.select_attachments_for_download(submitter).map do |attachment|
+      Submitters.select_attachments_for_download(last_submitter).map do |attachment|
         helpers.rails_blob_url(attachment)
       end
 

app/controllers/submissions_export_controller.rb

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 
 class SubmissionsExportController < ApplicationController
-  before_action :load_template
+  load_and_authorize_resource :template
+  load_and_authorize_resource :submission, through: :template, parent: false, only: :index
 
   def index
-    submissions = @template.submissions.active
-                           .preload(submitters: { documents_attachments: :blob,
-                                                  attachments_attachments: :blob })
-                           .order(id: :asc)
+    submissions = @submissions.active
+                              .preload(submitters: { documents_attachments: :blob,
+                                                     attachments_attachments: :blob })
+                              .order(id: :asc)
 
     if params[:format] == 'csv'
       send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
@@ -19,10 +20,4 @@ class SubmissionsExportController < ApplicationController
   end
 
   def new; end
-
-  private
-
-  def load_template
-    @template = current_account.templates.find(params[:template_id])
-  end
 end

app/controllers/submit_form_controller.rb

@@ -4,15 +4,22 @@ class SubmitFormController < ApplicationController
   layout 'form'
 
   skip_before_action :authenticate_user!
+  skip_authorization_check
 
   def show
     @submitter =
-      Submitter.preload(submission: { template: { documents_attachments: { preview_images_attachments: :blob } } })
+      Submitter.preload(submission: [
+                          :template, { template_schema_documents: [:blob, { preview_images_attachments: :blob }] }
+                        ])
                .find_by!(slug: params[:slug])
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
 
+    Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
+
     cookies[:submitter_sid] = @submitter.signed_id
+
+    render @submitter.submission.template.deleted_at? ? :archived : :show
   end
 
   def update
@@ -21,6 +28,8 @@ class SubmitFormController < ApplicationController
     Submitters::SubmitValues.call(submitter, params, request)
 
     head :ok
+  rescue Submitters::SubmitValues::ValidationError => e
+    render json: { error: e.message }, status: :unprocessable_entity
   end
 
   def completed

app/controllers/submitters_send_email_controller.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class SubmittersSendEmailController < ApplicationController
+  load_and_authorize_resource :submitter, id_param: :submitter_slug, find_by: :slug
+
+  def create
+    SubmitterMailer.invitation_email(@submitter).deliver_later!
+
+    SubmissionEvent.create!(submitter: @submitter, event_type: 'send_email')
+
+    @submitter.sent_at ||= Time.current
+    @submitter.save!
+
+    redirect_back(fallback_location: submission_path(@submitter.submission), notice: 'Email has been sent')
+  end
+end

app/controllers/template_folders_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class TemplateFoldersController < ApplicationController
+  load_and_authorize_resource :template_folder
+
+  def show
+    @templates = @template_folder.templates.active.preload(:author).order(id: :desc)
+    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @templates = pagy(@templates, items: 12)
+  end
+
+  def edit; end
+
+  def update
+    if @template_folder != current_account.default_template_folder &&
+       @template_folder.update(template_folder_params)
+      redirect_to folder_path(@template_folder), notice: 'Folder name has been updated'
+    else
+      redirect_to folder_path(@template_folder), alert: 'Unable to rename folder'
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_archived_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class TemplatesArchivedController < ApplicationController
+  load_and_authorize_resource :template, parent: false
+
+  def index
+    @templates = @templates.where.not(deleted_at: nil).preload(:author, :folder).order(id: :desc)
+    @templates = Templates.search(@templates, params[:q])
+
+    @pagy, @templates = pagy(@templates, items: 12)
+  end
+end

app/controllers/templates_archived_submissions_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class TemplatesArchivedSubmissionsController < ApplicationController
+  load_and_authorize_resource :template
+  load_and_authorize_resource :submission, through: :template, parent: false
+
+  def index
+    @submissions = @submissions.where.not(deleted_at: nil)
+    @submissions = Submissions.search(@submissions, params[:q])
+
+    @pagy, @submissions = pagy(@submissions.preload(:submitters).order(id: :desc))
+  rescue ActiveRecord::RecordNotFound
+    redirect_to root_path
+  end
+end

app/controllers/templates_controller.rb

@@ -1,31 +1,37 @@
 # frozen_string_literal: true
 
 class TemplatesController < ApplicationController
+  load_and_authorize_resource :template
+
   before_action :load_base_template, only: %i[new create]
 
   def show
-    @template = current_account.templates.active.find(params[:id])
+    submissions = @template.submissions
+    submissions = submissions.active if @template.deleted_at.blank?
+    submissions = Submissions.search(submissions, params[:q])
 
-    @pagy, @submissions = pagy(@template.submissions.active.preload(:submitters).order(id: :desc))
+    @pagy, @submissions = pagy(submissions.preload(:submitters).order(id: :desc))
   rescue ActiveRecord::RecordNotFound
     redirect_to root_path
   end
 
   def new
-    @template = current_account.templates.new
     @template.name = "#{@base_template.name} (Clone)" if @base_template
   end
 
   def edit
-    @template = current_account.templates.preload(schema_documents: { preview_images_attachments: :blob })
-                               .find(params[:id])
+    ActiveRecord::Associations::Preloader.new(
+      records: [@template],
+      associations: [schema_documents: { preview_images_attachments: :blob }]
+    ).call
 
     render :edit, layout: 'plain'
   end
 
   def create
-    @template = current_account.templates.new(template_params)
+    @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
 
     if @template.save
@@ -38,7 +44,6 @@ class TemplatesController < ApplicationController
   end
 
   def destroy
-    @template = current_account.templates.find(params[:id])
     @template.update!(deleted_at: Time.current)
 
     redirect_back(fallback_location: root_path, notice: 'Template has been archived.')
@@ -53,8 +58,6 @@ class TemplatesController < ApplicationController
   def load_base_template
     return if params[:base_template_id].blank?
 
-    @base_template = current_account.templates
-                                    .preload(documents_attachments: :preview_images_attachments)
-                                    .find_by(id: params[:base_template_id])
+    @base_template = current_account.templates.find_by(id: params[:base_template_id])
   end
 end

app/controllers/templates_folders_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class TemplatesFoldersController < ApplicationController
+  load_and_authorize_resource :template
+
+  def edit; end
+
+  def update
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:name])
+
+    if @template.save
+      redirect_back(fallback_location: template_path(@template), notice: 'Document template has been moved')
+    else
+      redirect_back(fallback_location: template_path(@template), notice: 'Unable to move template into folder')
+    end
+  end
+
+  private
+
+  def template_folder_params
+    params.require(:template_folder).permit(:name)
+  end
+end

app/controllers/templates_restore_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class TemplatesRestoreController < ApplicationController
+  load_and_authorize_resource :template
+
+  def create
+    @template.update!(deleted_at: nil)
+
+    redirect_to template_path(@template), notice: 'Template has been unarchived'
+  end
+end

app/controllers/templates_uploads_controller.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class TemplatesUploadsController < ApplicationController
+  load_and_authorize_resource :template, parent: false
+
+  def create
+    @template.account = current_account
+    @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+    @template.name = File.basename(params[:files].first.original_filename, '.*')
+
+    @template.save!
+
+    documents = Templates::CreateAttachments.call(@template, params)
+
+    schema = documents.map { |doc| { attachment_uuid: doc.uuid, name: doc.filename.base } }
+
+    @template.update!(schema:)
+
+    redirect_to edit_template_path(@template)
+  end
+end

app/controllers/user_signatures_controller.rb

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

app/controllers/users_controller.rb

@@ -1,26 +1,20 @@
 # frozen_string_literal: true
 
 class UsersController < ApplicationController
-  before_action :load_user, only: %i[edit update destroy]
+  load_and_authorize_resource :user, only: %i[index edit new update destroy]
+
+  before_action :build_user, only: :create
+  authorize_resource :user, only: :create
 
   def index
-    @pagy, @users = pagy(current_account.users.active.order(id: :desc))
+    @pagy, @users = pagy(@users.active.order(id: :desc))
   end
 
-  def new
-    @user = current_account.users.new
-  end
+  def new; end
 
   def edit; end
 
   def create
-    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
-      user.assign_attributes(user_params)
-      user.deleted_at = nil
-    end
-
-    @user ||= current_account.users.new(user_params)
-
     if @user.save
       UserMailer.invitation_email(@user).deliver_later!
 
@@ -33,7 +27,10 @@ class UsersController < ApplicationController
   def update
     return redirect_to settings_users_path, notice: 'Unable to update user.' if Docuseal.demo?
 
-    if @user.update(user_params.compact_blank)
+    attrs = user_params.compact_blank
+    attrs.delete(:role) if User::ROLES.exclude?(attrs[:role])
+
+    if @user.update(attrs.except(current_user == @user ? :role : nil))
       redirect_to settings_users_path, notice: 'User has been updated'
     else
       render turbo_stream: turbo_stream.replace(:modal, template: 'users/edit'), status: :unprocessable_entity
@@ -52,11 +49,18 @@ class UsersController < ApplicationController
 
   private
 
-  def load_user
-    @user = current_account.users.find(params[:id])
+  def build_user
+    @user = current_account.users.find_by(email: user_params[:email])&.tap do |user|
+      user.assign_attributes(user_params)
+      user.deleted_at = nil
+    end
+
+    @user ||= current_account.users.new(user_params)
+
+    @user
   end
 
   def user_params
-    params.require(:user).permit(:email, :first_name, :last_name, :password)
+    params.require(:user).permit(:email, :first_name, :last_name, :password, :role)
   end
 end

app/controllers/verify_pdf_signature_controller.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class VerifyPdfSignatureController < ApplicationController
+  skip_authorization_check
+
+  def create
+    pdfs =
+      params[:files].map do |file|
+        HexaPDF::Document.new(io: file.open)
+      end
+
+    cert_data = if Docuseal.multitenant?
+                  Docuseal::CERTS
+                else
+                  EncryptedConfig.find_by(account: current_account, key: EncryptedConfig::ESIGN_CERTS_KEY)&.value || {}
+                end
+
+    default_pkcs = GenerateCertificate.load_pkcs(cert_data)
+
+    custom_certs = cert_data.fetch('custom', []).map do |e|
+      OpenSSL::PKCS12.new(Base64.urlsafe_decode64(e['data']), e['password'].to_s)
+    end
+
+    trusted_certs = [default_pkcs.certificate,
+                     *default_pkcs.ca_certs,
+                     *custom_certs.map(&:certificate),
+                     *custom_certs.flat_map(&:ca_certs).compact]
+
+    render turbo_stream: turbo_stream.replace('result', partial: 'result',
+                                                        locals: { pdfs:, files: params[:files], trusted_certs: })
+  rescue HexaPDF::MalformedPDFError
+    render turbo_stream: turbo_stream.replace('result', html: helpers.tag.div('Invalid PDF', id: 'result'))
+  end
+end

app/controllers/webhook_settings_controller.rb

@@ -1,15 +1,12 @@
 # frozen_string_literal: true
 
 class WebhookSettingsController < ApplicationController
-  def show
-    @encrypted_config =
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
-  end
+  before_action :load_encrypted_config
+  authorize_resource :encrypted_config, parent: false
+
+  def show; end
 
   def create
-    @encrypted_config =
-      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
-
     @encrypted_config.update!(encrypted_config_params)
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook URL has been saved.')
@@ -18,13 +15,18 @@ class WebhookSettingsController < ApplicationController
   def update
     submitter = current_account.submitters.where.not(completed_at: nil).order(:id).last
 
-    SendWebhookRequestJob.perform_later(submitter)
+    SendFormCompletedWebhookRequestJob.perform_later(submitter)
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook request has been sent.')
   end
 
   private
 
+  def load_encrypted_config
+    @encrypted_config =
+      current_account.encrypted_configs.find_or_initialize_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+  end
+
   def encrypted_config_params
     params.require(:encrypted_config).permit(:value)
   end

app/javascript/application.js

@@ -15,6 +15,9 @@ import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
+import SubmittersAutocomplete from './elements/submitter_autocomplete'
+import FolderAutocomplete from './elements/folder_autocomplete'
+import SignatureForm from './elements/signature_form'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -43,6 +46,9 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
+window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
+window.customElements.define('folder-autocomplete', FolderAutocomplete)
+window.customElements.define('signature-form', SignatureForm)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {
@@ -70,10 +76,13 @@ document.addEventListener('turbo:submit-end', async (event) => {
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
-    this.appElem.classList.add('max-h-screen')
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
+      backgroundColor: '#faf7f5',
+      withPhone: this.dataset.withPhone === 'true',
+      withLogo: this.dataset.withLogo !== 'false',
+      acceptFileTypes: this.dataset.acceptFileTypes,
       isDirectUpload: this.dataset.isDirectUpload === 'true'
     })
 

app/javascript/application.scss

@@ -74,3 +74,54 @@ button[disabled] .enabled {
 .base-select {
   @apply select base-input w-full font-normal;
 }
+
+.tooltip-bottom-end:before {
+  transform: translateX(-95%);
+  top: var(--tooltip-offset);
+  left: 100%;
+  right: auto;
+  bottom: auto;
+}
+
+.tooltip-bottom-end:after {
+  transform: translateX(-25%);
+  border-color: transparent transparent var(--tooltip-color) transparent;
+  top: var(--tooltip-tail-offset);
+  left: 50%;
+  right: auto;
+  bottom: auto;
+}
+
+.autocomplete {
+  background: white;
+  z-index: 1000;
+  font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  overflow: auto;
+  box-sizing: border-box;
+  @apply border border-base-300 mt-1 rounded-md;
+}
+
+.autocomplete * {
+  font: inherit;
+}
+
+.autocomplete > div {
+  @apply px-2 py-1 font-normal text-sm;
+}
+
+.autocomplete .group {
+  background: #eee;
+}
+
+.autocomplete > div:hover:not(.group),
+.autocomplete > div.selected {
+  @apply bg-base-300;
+  cursor: pointer;
+}
+
+.input-outlined {
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 3px;
+  outline-color: hsl(var(--bc) / 0.2);
+}

app/javascript/elements/file_dropzone.js

@@ -38,7 +38,11 @@ export default actionable(targetable(class extends HTMLElement {
     this.uploadFiles(this.input.files)
   }
 
-  toggleLoading = () => {
+  toggleLoading = (e) => {
+    if (e && e.target && !e.target.contains(this)) {
+      return
+    }
+
     this.loading.classList.toggle('hidden')
     this.icon.classList.toggle('hidden')
     this.classList.toggle('opacity-50')
@@ -87,11 +91,13 @@ export default actionable(targetable(class extends HTMLElement {
           this.append(input)
         })
 
-        if (this.dataset.submitOnUpload) {
+        if (this.dataset.submitOnUpload === 'true') {
           this.closest('form').querySelector('button[type="submit"]').click()
         }
       }).finally(() => {
-        this.toggleLoading()
+        if (this.dataset.submitOnUpload !== 'true') {
+          this.toggleLoading()
+        }
       })
     } else {
       if (this.dataset.submitOnUpload) {

app/javascript/elements/folder_autocomplete.js

@@ -0,0 +1,43 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: this.dataset.submitOnSelect === 'true' ? 0 : 1,
+      minLength: 0,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    this.input.value = item.name
+  }
+
+  fetch = (text, resolve) => {
+    const queryParams = new URLSearchParams({ q: text })
+
+    fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
+      const items = await resp.json()
+
+      resolve(items)
+    }).catch(() => {
+      resolve([])
+    })
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item.name
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}

app/javascript/elements/signature_form.js

@@ -0,0 +1,46 @@
+import { target, targetable } from '@github/catalyst/lib/targetable'
+import { cropCanvasAndExportToPNG } from '../submission_form/crop_canvas'
+
+export default targetable(class extends HTMLElement {
+  static [target.static] = ['canvas', 'input', 'clear', 'button']
+
+  async connectedCallback () {
+    this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
+    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+
+    const { default: SignaturePad } = await import('signature_pad')
+
+    this.pad = new SignaturePad(this.canvas)
+
+    this.clear.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.pad.clear()
+    })
+
+    this.button.addEventListener('click', (e) => {
+      e.preventDefault()
+
+      this.button.disabled = true
+
+      this.submit()
+    })
+  }
+
+  async submit () {
+    const blob = await cropCanvasAndExportToPNG(this.canvas)
+    const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+    const dataTransfer = new DataTransfer()
+
+    dataTransfer.items.add(file)
+
+    this.input.files = dataTransfer.files
+
+    if (this.input.webkitEntries.length) {
+      this.input.dataset.file = `${dataTransfer.files[0].name}`
+    }
+
+    this.closest('form').requestSubmit()
+  }
+})

app/javascript/elements/submitter_autocomplete.js

@@ -0,0 +1,67 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: 1,
+      minLength: 1,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    const fields = ['email', 'name', 'phone']
+    const submitterItemEl = this.closest('submitter-item')
+
+    fields.forEach((field) => {
+      const input = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] input`)
+      const textarea = submitterItemEl.querySelector(`submitters-autocomplete[data-field="${field}"] textarea`)
+
+      if (input && item[field]) {
+        input.value = item[field]
+      }
+
+      if (textarea && item[field]) {
+        textarea.value = textarea.value.replace(/[^;,\s]+$/, item[field] + ' ')
+      }
+    })
+  }
+
+  fetch = (text, resolve) => {
+    const q = text.split(/[;,\s]+/).pop().trim()
+
+    if (q) {
+      const queryParams = new URLSearchParams({ q, field: this.dataset.field })
+
+      fetch('/api/submitters_autocomplete?' + queryParams).then(async (resp) => {
+        const items = await resp.json()
+
+        if (q.length < 3) {
+          resolve(items.filter((e) => e[this.dataset.field].startsWith(q)))
+        } else {
+          resolve(items)
+        }
+      }).catch(() => {
+        resolve([])
+      })
+    } else {
+      resolve([])
+    }
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item[this.dataset.field]
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input') || this.querySelector('textarea')
+  }
+}

app/javascript/form.js

@@ -9,14 +9,16 @@ window.customElements.define('submission-form', class extends HTMLElement {
     this.appElem = document.createElement('div')
 
     this.app = createApp(Form, {
-      submitterSlug: this.dataset.submitterSlug,
-      submitterUuid: this.dataset.submitterUuid,
+      submitter: JSON.parse(this.dataset.submitter),
       authenticityToken: this.dataset.authenticityToken,
       canSendEmail: this.dataset.canSendEmail === 'true',
       isDirectUpload: this.dataset.isDirectUpload === 'true',
+      goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
+      attribution: this.dataset.attribution !== 'false',
       withConfetti: true,
       values: reactive(JSON.parse(this.dataset.values)),
+      completedButton: JSON.parse(this.dataset.completedButton),
       attachments: reactive(JSON.parse(this.dataset.attachments)),
       fields: JSON.parse(this.dataset.fields)
     })

app/javascript/submission_form/area.vue

@@ -47,6 +47,11 @@
       class="object-contain mx-auto"
       :src="signature.url"
     >
+    <img
+      v-else-if="field.type === 'initials' && initials"
+      class="object-contain mx-auto"
+      :src="initials.url"
+    >
     <div
       v-else-if="field.type === 'file'"
       class="px-0.5 flex flex-col justify-center"
@@ -113,7 +118,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -175,11 +180,13 @@ export default {
         signature: 'Signature',
         date: 'Date',
         image: 'Image',
+        initials: 'Initials',
         file: 'File',
         select: 'Select',
         checkbox: 'Checkbox',
         radio: 'Radio',
-        multiple: 'Multiple Select'
+        multiple: 'Multiple Select',
+        phone: 'Phone'
       }
     },
     fieldIcons () {
@@ -188,12 +195,14 @@ export default {
         signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
+        initials: IconLetterCaseUpper,
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
         radio: IconCircleDot,
         cells: IconColumns3,
-        multiple: IconChecks
+        multiple: IconChecks,
+        phone: IconPhoneCheck
       }
     },
     image () {
@@ -210,6 +219,13 @@ export default {
         return null
       }
     },
+    initials () {
+      if (this.field.type === 'initials') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
     formattedDate () {
       if (this.field.type === 'date' && this.modelValue) {
         return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.modelValue))

app/javascript/submission_form/completed.vue

@@ -7,13 +7,22 @@
         :height="30"
       />
       <span>
-        Form has been completed!
+        {{ t('form_has_been_completed') }}
       </span>
     </p>
     <div class="space-y-3 mt-5">
+      <a
+        v-if="completedButton.url"
+        :href="completedButton.url"
+        class="white-button flex items-center w-full"
+      >
+        <span>
+          {{ completedButton.title || 'Back to Website' }}
+        </span>
+      </a>
       <button
         v-if="canSendEmail && !isDemo"
-        class="white-button flex items-center space-x-1 w-full"
+        class="white-button !h-auto flex items-center space-x-1 w-full"
         :disabled="isSendingCopy"
         @click.prevent="sendCopyToEmail"
       >
@@ -23,10 +32,11 @@
         />
         <IconMail v-else />
         <span>
-          Send copy via email
+          {{ t('send_copy_via_email') }}
         </span>
       </button>
       <button
+        v-if="!isWebView"
         class="base-button flex items-center space-x-1 w-full"
         :disabled="isDownloading"
         @click.prevent="download"
@@ -37,7 +47,7 @@
         />
         <IconDownload v-else />
         <span>
-          Download
+          {{ t('download') }}
         </span>
       </button>
       <a
@@ -58,17 +68,20 @@
       >
         <IconLogin />
         <span>
-          Create a Free Account
+          {{ t('create_a_free_account') }}
         </span>
       </a>
     </div>
-    <div class="text-center mt-4">
-      Signed with
+    <div
+      v-if="attribution"
+      class="text-center mt-4"
+    >
+      {{ t('signed_with') }}
       <a
         href="https://www.docuseal.co"
         target="_blank"
         class="underline"
-      >DocuSeal</a> - open source documents software
+      >DocuSeal</a> - {{ t('open_source_documents_software') }}
     </div>
   </div>
 </template>
@@ -86,7 +99,7 @@ export default {
     IconLogin,
     IconDownload
   },
-  inject: ['baseUrl'],
+  inject: ['baseUrl', 't'],
   props: {
     submitterSlug: {
       type: String,
@@ -97,6 +110,11 @@ export default {
       required: false,
       default: false
     },
+    attribution: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withConfetti: {
       type: Boolean,
       required: false,
@@ -106,6 +124,11 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    completedButton: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -114,6 +137,11 @@ export default {
       isDownloading: false
     }
   },
+  computed: {
+    isWebView () {
+      return /webview|wv|ip((?!.*Safari)|(?=.*like Safari))/i.test(window.navigator.userAgent)
+    }
+  },
   async mounted () {
     if (this.withConfetti) {
       const { default: confetti } = await import('canvas-confetti')
@@ -132,7 +160,7 @@ export default {
       fetch(this.baseUrl + `/send_submission_email.json?submitter_slug=${this.submitterSlug}`, {
         method: 'POST'
       }).then(() => {
-        alert('Email has been sent')
+        alert(this.t('email_has_been_sent'))
       }).finally(() => {
         this.isSendingCopy = false
       })

app/javascript/submission_form/crop_canvas.js

@@ -0,0 +1,49 @@
+function cropCanvasAndExportToPNG (canvas) {
+  const ctx = canvas.getContext('2d')
+
+  const width = canvas.width
+  const height = canvas.height
+
+  let topmost = height
+  let bottommost = 0
+  let leftmost = width
+  let rightmost = 0
+
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const pixels = imageData.data
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pixelIndex = (y * width + x) * 4
+      const alpha = pixels[pixelIndex + 3]
+      if (alpha !== 0) {
+        topmost = Math.min(topmost, y)
+        bottommost = Math.max(bottommost, y)
+        leftmost = Math.min(leftmost, x)
+        rightmost = Math.max(rightmost, x)
+      }
+    }
+  }
+
+  const croppedWidth = rightmost - leftmost + 1
+  const croppedHeight = bottommost - topmost + 1
+
+  const croppedCanvas = document.createElement('canvas')
+  croppedCanvas.width = croppedWidth
+  croppedCanvas.height = croppedHeight
+  const croppedCtx = croppedCanvas.getContext('2d')
+
+  croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
+
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((blob) => {
+      if (blob) {
+        resolve(blob)
+      } else {
+        reject(new Error('Failed to create a PNG blob.'))
+      }
+    }, 'image/png')
+  })
+}
+
+export { cropCanvasAndExportToPNG }

app/javascript/submission_form/dropzone.vue

@@ -29,7 +29,7 @@
             {{ message }}
           </div>
           <div class="text-xs">
-            <span class="font-medium">Click to upload</span> or drag and drop files
+            <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
           </div>
         </div>
       </div>
@@ -55,7 +55,7 @@ export default {
     IconCloudUpload,
     IconInnerShadowTop
   },
-  inject: ['baseUrl'],
+  inject: ['baseUrl', 't'],
   props: {
     message: {
       type: String,

app/javascript/submission_form/form.vue

@@ -13,7 +13,7 @@
     class="btn btn-neutral flex text-white absolute rounded-none border-x-0 md:border md:rounded-full bottom-0 w-full md:mb-4 text-base"
     @click.prevent="isFormVisible = true"
   >
-    Submit Form
+    {{ t('submit_form') }}
     <IconArrowsDiagonal
       class="absolute right-0 mr-4"
       :width="20"
@@ -24,6 +24,7 @@
     v-show="isFormVisible"
     id="form_container"
     class="shadow-md bg-base-100 absolute bottom-0 md:bottom-4 w-full border-base-200 border p-4 rounded"
+    :style="{ backgroundColor: backgroundColor }"
   >
     <button
       v-if="!isCompleted"
@@ -62,7 +63,7 @@
               :for="currentField.uuid"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
-              <template v-if="!currentField.required">(optional)</template>
+              <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
             <div
               v-else
@@ -74,7 +75,7 @@
                 v-model="values[currentField.uuid]"
                 class="base-input !text-2xl w-full"
                 :required="currentField.required"
-                :placeholder="`Type here...${currentField.required ? '' : ' (optional)'}`"
+                :placeholder="`${t('type_here')}...${currentField.required ? '' : ` (${t('optional')})`}`"
                 type="text"
                 :name="`values[${currentField.uuid}]`"
                 @focus="$refs.areas.scrollIntoField(currentField)"
@@ -87,7 +88,7 @@
               :for="currentField.uuid"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
-              <template v-if="!currentField.required">(optional)</template>
+              <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
             <div
               v-else
@@ -111,7 +112,7 @@
               :for="currentField.uuid"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
-              <template v-if="!currentField.required">(optional)</template>
+              <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
             <div
               v-else
@@ -129,7 +130,7 @@
                 value=""
                 :selected="!values[currentField.uuid]"
               >
-                Select your option
+                {{ t('select_your_option') }}
               </option>
               <option
                 v-for="(option, index) in currentField.options"
@@ -147,7 +148,7 @@
               :for="currentField.uuid"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
-              <template v-if="!currentField.required">(optional)</template>
+              <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
             <div class="flex w-full">
               <div class="space-y-3.5 mx-auto">
@@ -195,7 +196,7 @@
             >
               <template v-if="isAnonymousChecboxes">
                 <span class="text-xl">
-                  Complete hightlighted checkboxes and click <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? 'submit' : 'next' }}</span>.
+                  {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
                 </span>
                 <input
                   v-for="field in currentStepFields"
@@ -223,6 +224,9 @@
                       :id="field.uuid"
                       type="checkbox"
                       class="base-checkbox !h-7 !w-7"
+                      :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
+                      :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
+                      :required="field.required"
                       :checked="!!values[field.uuid]"
                       @click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                     >
@@ -255,6 +259,19 @@
             @start="$refs.areas.scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
           />
+          <InitialsStep
+            v-else-if="currentField.type === 'initials'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :is-direct-upload="isDirectUpload"
+            :attachments-index="attachmentsIndex"
+            :submitter-slug="submitterSlug"
+            @attached="attachments.push($event)"
+            @start="$refs.areas.scrollIntoField(currentField)"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @minimize="isFormVisible = false"
+          />
           <AttachmentStep
             v-else-if="currentField.type === 'file'"
             v-model="values[currentField.uuid]"
@@ -264,6 +281,16 @@
             :submitter-slug="submitterSlug"
             @attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
           />
+          <PhoneStep
+            v-else-if="currentField.type === 'phone'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :default-value="submitter.phone"
+            :submitter-slug="submitterSlug"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @submit="submitStep"
+          />
         </div>
         <div class="mt-6 md:mt-8">
           <button
@@ -277,10 +304,10 @@
                 class="mr-1 animate-spin"
               />
               <span v-if="stepFields.length === currentStep + 1">
-                Submit
+                {{ t('submit') }}
               </span>
               <span v-else>
-                Next
+                {{ t('next') }}
               </span><span
                 v-if="isSubmitting"
                 class="w-6 flex justify-start mr-1"
@@ -292,8 +319,10 @@
       <FormCompleted
         v-else
         :is-demo="isDemo"
+        :attribution="attribution"
+        :completed-button="completedButton"
         :with-confetti="withConfetti"
-        :can-send-email="canSendEmail"
+        :can-send-email="canSendEmail && !!submitter.email"
         :submitter-slug="submitterSlug"
       />
       <div class="flex justify-center">
@@ -316,10 +345,13 @@
 import FieldAreas from './areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
+import InitialsStep from './initials_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
+import PhoneStep from './phone_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { t } from './i18n'
 
 export default {
   name: 'SubmissionForm',
@@ -328,20 +360,23 @@ export default {
     ImageStep,
     SignatureStep,
     AttachmentStep,
+    InitialsStep,
     MultiSelectStep,
     IconInnerShadowTop,
     IconArrowsDiagonal,
+    PhoneStep,
     IconArrowsDiagonalMinimize2,
     FormCompleted
   },
   provide () {
     return {
-      baseUrl: this.baseUrl
+      baseUrl: this.baseUrl,
+      t: this.t
     }
   },
   props: {
-    submitterSlug: {
-      type: String,
+    submitter: {
+      type: Object,
       required: true
     },
     canSendEmail: {
@@ -349,10 +384,6 @@ export default {
       required: false,
       default: false
     },
-    submitterUuid: {
-      type: String,
-      required: true
-    },
     attachments: {
       type: Array,
       required: false,
@@ -378,20 +409,45 @@ export default {
       required: false,
       default: ''
     },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
     isDirectUpload: {
       type: Boolean,
       required: false,
       default: false
     },
+    allowToSkip: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    goToLast: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDemo: {
       type: Boolean,
       required: false,
       default: false
     },
+    attribution: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     values: {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    completedButton: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data () {
@@ -399,20 +455,30 @@ export default {
       isCompleted: false,
       isFormVisible: true,
       currentStep: 0,
-      isSubmitting: false
+      isSubmitting: false,
+      submittedValues: {},
+      recalculateButtonDisabledKey: ''
     }
   },
   computed: {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    submitterSlug () {
+      return this.submitter.slug
+    },
     isAnonymousChecboxes () {
       return this.currentField.type === 'checkbox' && this.currentStepFields.every((e) => !e.name) && this.currentStepFields.length > 4
     },
     isButtonDisabled () {
-      return this.isSubmitting ||
+      if (this.recalculateButtonDisabledKey) {
+        return this.isSubmitting ||
         (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
-        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
+        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted) ||
+        (this.currentField.required && this.currentField.type === 'initials' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isInitialsStarted)
+      } else {
+        return false
+      }
     },
     currentField () {
       return this.currentStepFields[0]
@@ -442,10 +508,14 @@ export default {
     }
   },
   mounted () {
-    this.currentStep = Math.min(
-      this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
-      this.stepFields.length - 1
-    )
+    this.submittedValues = JSON.parse(JSON.stringify(this.values))
+
+    if (this.goToLast) {
+      this.currentStep = Math.min(
+        this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
+        this.stepFields.length - 1
+      )
+    }
 
     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
@@ -460,12 +530,85 @@ export default {
         scrollbox.parentNode.style.maxHeight = '-webkit-fill-available'
       })
     }
+
+    this.$nextTick(() => {
+      this.recalculateButtonDisabledKey = Math.random()
+
+      Promise.all([
+        this.maybeTrackEmailClick(),
+        this.maybeTrackSmsClick()
+      ]).finally(() => {
+        this.trackViewForm()
+      })
+    })
   },
   methods: {
+    t,
+    maybeTrackEmailClick () {
+      const queryParams = new URLSearchParams(window.location.search)
+
+      if (queryParams.has('t')) {
+        const t = queryParams.get('t')
+
+        queryParams.delete('t')
+        const newUrl = [window.location.pathname, queryParams.toString()].filter(Boolean).join('?')
+        window.history.replaceState({}, document.title, newUrl)
+
+        return fetch(this.baseUrl + '/api/submitter_email_clicks', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            t,
+            submitter_slug: this.submitterSlug
+          })
+        })
+      } else {
+        return Promise.resolve({})
+      }
+    },
+    maybeTrackSmsClick () {
+      const queryParams = new URLSearchParams(window.location.search)
+
+      if (queryParams.has('c')) {
+        const c = queryParams.get('c')
+
+        queryParams.delete('c')
+        const newUrl = [window.location.pathname, queryParams.toString()].filter(Boolean).join('?')
+        window.history.replaceState({}, document.title, newUrl)
+
+        return fetch(this.baseUrl + '/api/submitter_sms_clicks', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            c,
+            submitter_slug: this.submitterSlug
+          })
+        })
+      } else {
+        return Promise.resolve({})
+      }
+    },
+    trackViewForm () {
+      fetch(this.baseUrl + '/api/submitter_form_views', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug
+        })
+      })
+    },
     goToStep (step, scrollToArea = false, clickUpload = false) {
       this.currentStep = this.stepFields.indexOf(step)
 
       this.$nextTick(() => {
+        this.recalculateButtonDisabledKey = Math.random()
+
         if (scrollToArea) {
           this.$refs.areas.scrollIntoField(step[0])
         }
@@ -490,28 +633,46 @@ export default {
     async submitStep () {
       this.isSubmitting = true
 
-      const stepPromise = this.currentField.type === 'signature'
+      const stepPromise = ['signature', 'phone', 'initials'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 
-      await stepPromise()
+      stepPromise().then(async () => {
+        const emptyRequiredField = this.stepFields.find((fields, index) => {
+          return index < this.currentStep && fields[0].required && (fields[0].type === 'phone' || !this.allowToSkip) && !this.submittedValues[fields[0].uuid]
+        })
 
-      const formData = new FormData(this.$refs.form)
+        const formData = new FormData(this.$refs.form)
 
-      if (this.currentStep === this.stepFields.length - 1) {
-        formData.append('completed', 'true')
-      }
-
-      this.saveStep(formData).then(response => {
-        const nextStep = this.stepFields[this.currentStep + 1]
-
-        if (nextStep) {
-          this.goToStep(this.stepFields[this.currentStep + 1], true)
-        } else {
-          this.isCompleted = true
+        if (this.currentStep === this.stepFields.length - 1 && !emptyRequiredField) {
+          formData.append('completed', 'true')
         }
+
+        await this.saveStep(formData).then(async (response) => {
+          if (response.status === 422) {
+            const data = await response.json()
+
+            alert(data.error || 'Value is invalid')
+
+            return Promise.reject(new Error(data.error))
+          }
+
+          this.submittedValues[this.currentField.uuid] = this.values[this.currentField.uuid]
+
+          const nextStep = emptyRequiredField || this.stepFields[this.currentStep + 1]
+
+          if (nextStep) {
+            this.goToStep(nextStep, true)
+          } else {
+            this.isCompleted = true
+          }
+        }).catch(error => {
+          console.error('Error submitting form:', error)
+        }).finally(() => {
+          this.isSubmitting = false
+        })
       }).catch(error => {
-        console.error('Error submitting form:', error)
+        console.log(error)
       }).finally(() => {
         this.isSubmitting = false
       })

app/javascript/submission_form/i18n.js

@@ -0,0 +1,314 @@
+const en = {
+  submit_form: 'Submit Form',
+  type_here: 'Type here',
+  optional: 'optional',
+  select_your_option: 'Select your option',
+  complete_hightlighted_checkboxes_and_click: 'Complete hightlighted checkboxes and click',
+  submit: 'submit',
+  next: 'next',
+  click_to_upload: 'Click to upload',
+  or_drag_and_drop_files: 'or drag and drop files',
+  send_copy_via_email: 'Send copy via email',
+  download: 'Download',
+  signature: 'Signature',
+  initials: 'Initials',
+  clear: 'Clear',
+  redraw: 'Redraw',
+  draw_initials: 'Draw initials',
+  type_signature_here: 'Type signature here',
+  type_initial_here: 'Type initials here',
+  form_has_been_completed: 'Form has been completed!',
+  create_a_free_account: 'Create a Free Account',
+  signed_with: 'Signed with',
+  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',
+  use_international_format: 'Use internatioanl format: +1xxx',
+  six_digits_code: '6-digit code',
+  change_phone_number: 'Change phone number',
+  sending: 'Sending...',
+  resend_code: 'Re-send code',
+  verification_code_has_been_resent: 'Verification code has been re-sent via SMS',
+  email_has_been_sent: 'Email has been sent'
+}
+
+const es = {
+  submit_form: 'Enviar Formulario',
+  type_here: 'Escribe aquí',
+  optional: 'opcional',
+  select_your_option: 'Selecciona tu opción',
+  complete_hightlighted_checkboxes_and_click: 'Completa las casillas resaltadas y haz clic',
+  submit: 'enviar',
+  next: 'siguiente',
+  click_to_upload: 'Haz clic para cargar',
+  or_drag_and_drop_files: 'o arrastra y suelta archivos',
+  send_copy_via_email: 'Enviar copia por correo electrónico',
+  download: 'Descargar',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  clear: 'Borrar',
+  redraw: 'Redibujar',
+  draw_initials: 'Dibujar iniciales',
+  type_signature_here: 'Escribe la firma aquí',
+  type_initial_here: 'Escribe las iniciales aquí',
+  form_has_been_completed: '¡El formulario ha sido completado!',
+  create_a_free_account: 'Crear una Cuenta Gratuita',
+  signed_with: 'Firmado con',
+  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',
+  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',
+  sending: 'Enviando...',
+  resend_code: 'Reenviar código',
+  verification_code_has_been_resent: 'El código de verificación ha sido reenviado por SMS',
+  email_has_been_sent: 'El correo electrónico ha sido enviado'
+}
+
+const it = {
+  submit_form: 'Invia Modulo',
+  type_here: 'Digita qui',
+  optional: 'opzionale',
+  select_your_option: 'Seleziona la tua opzione',
+  complete_hightlighted_checkboxes_and_click: 'Completa le caselle evidenziate e fai clic',
+  submit: 'invia',
+  next: 'avanti',
+  click_to_upload: 'Clicca per caricare',
+  or_drag_and_drop_files: 'oppure trascina e rilascia i file',
+  send_copy_via_email: 'Invia copia via email',
+  download: 'Scarica',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  clear: 'Cancella',
+  redraw: 'Ridisegna',
+  draw_initials: 'Disegna iniziali',
+  type_signature_here: 'Scrivi la firma qui',
+  type_initial_here: 'Scrivi le iniziali qui',
+  form_has_been_completed: 'Il modulo è stato completato!',
+  create_a_free_account: 'Crea un Account Gratuito',
+  signed_with: 'Firmato con',
+  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',
+  use_international_format: 'Usa formato internazionale: +1xxx',
+  six_digits_code: 'Codice a 6 cifre',
+  change_phone_number: 'Cambia numero di telefono',
+  sending: 'Invio in corso...',
+  resend_code: 'Rinvia codice',
+  verification_code_has_been_resent: 'Il codice di verifica è stato rinviato tramite SMS',
+  email_has_been_sent: "L'email è stata inviata"
+}
+
+const de = {
+  submit_form: 'Formular absenden',
+  type_here: 'Hier eingeben',
+  optional: 'optional',
+  select_your_option: 'Wähle deine Option',
+  complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
+  submit: 'absenden',
+  next: 'weiter',
+  click_to_upload: 'Klicken zum Hochladen',
+  or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
+  send_copy_via_email: 'Kopie per E-Mail senden',
+  download: 'Herunterladen',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  clear: 'Löschen',
+  redraw: 'Neu zeichnen',
+  draw_initials: 'Initialen zeichnen',
+  type_signature_here: 'Unterschrift hier eingeben',
+  type_initial_here: 'Initialen hier eingeben',
+  form_has_been_completed: 'Formular wurde ausgefüllt!',
+  create_a_free_account: 'Kostenloses Konto erstellen',
+  signed_with: 'Unterschrieben mit',
+  please_check_the_box_to_continue: 'Bitte setzen Sie das Häkchen, um fortzufahren',
+  open_source_documents_software: 'Open-Source-Dokumentensoftware',
+  verified_phone_number: 'Telefonnummer überprüfen',
+  use_international_format: 'Internationales Format verwenden: +1xxx',
+  six_digits_code: '6-stelliger Code',
+  change_phone_number: 'Telefonnummer ändern',
+  sending: 'Senden...',
+  resend_code: 'Code erneut senden',
+  verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
+  email_has_been_sent: 'Die E-Mail wurde gesendet'
+}
+
+const fr = {
+  submit_form: 'Envoyer le Formulaire',
+  type_here: 'Tapez ici',
+  optional: 'facultatif',
+  select_your_option: 'Sélectionnez votre option',
+  complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
+  submit: 'envoyer',
+  next: 'suivant',
+  click_to_upload: 'Cliquez pour télécharger',
+  or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
+  send_copy_via_email: 'Envoyer une copie par e-mail',
+  download: 'Télécharger',
+  signature: 'Signature',
+  initials: 'Initiales',
+  clear: 'Effacer',
+  redraw: 'Redessiner',
+  draw_initials: 'Dessiner les initiales',
+  type_signature_here: 'Tapez la signature ici',
+  type_initial_here: 'Tapez les initiales ici',
+  form_has_been_completed: 'Le formulaire a été complété !',
+  create_a_free_account: 'Créer un Compte Gratuit',
+  signed_with: 'Signé avec',
+  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',
+  use_international_format: 'Utiliser le format international : +1xxx',
+  six_digits_code: 'Code à 6 chiffres',
+  change_phone_number: 'Changer le numéro de téléphone',
+  sending: 'Envoi en cours...',
+  resend_code: 'Renvoyer le code',
+  verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
+  email_has_been_sent: "L'email a été envoyé"
+}
+
+const pl = {
+  submit_form: 'Wyślij Formularz',
+  type_here: 'Wpisz tutaj',
+  optional: 'opcjonalny',
+  select_your_option: 'Wybierz swoją opcję',
+  complete_hightlighted_checkboxes_and_click: 'Wypełnij zaznaczone pola wyboru i kliknij',
+  submit: 'wyślij',
+  next: 'dalej',
+  click_to_upload: 'Kliknij, aby przesłać',
+  or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
+  send_copy_via_email: 'Wyślij kopię drogą mailową',
+  download: 'Pobierz',
+  signature: 'Podpis',
+  initials: 'Inicjały',
+  clear: 'Wyczyść',
+  redraw: 'Przerysuj',
+  draw_initials: 'Narysuj inicjały',
+  type_signature_here: 'Wpisz podpis tutaj',
+  type_initial_here: 'Wpisz inicjały tutaj',
+  form_has_been_completed: 'Formularz został wypełniony!',
+  create_a_free_account: 'Utwórz darmowe konto',
+  signed_with: 'Podpisane za pomocą',
+  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',
+  use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
+  six_digits_code: '6-cyfrowy kod',
+  change_phone_number: 'Zmień numer telefonu',
+  sending: 'Wysyłanie...',
+  resend_code: 'Ponownie wyślij kod',
+  verification_code_has_been_resent: 'Kod weryfikacyjny został ponownie wysłany',
+  email_has_been_sent: 'E-mail został wysłany'
+}
+
+const uk = {
+  submit_form: 'Надіслати Форму',
+  type_here: 'Введіть тут',
+  optional: 'необов’язково',
+  select_your_option: 'Виберіть варіант',
+  complete_hightlighted_checkboxes_and_click: 'Заповніть позначені прапорці та натисніть',
+  submit: 'надіслати',
+  next: 'далі',
+  click_to_upload: 'Клацніть, щоб завантажити',
+  or_drag_and_drop_files: 'або перетягніть файли сюди',
+  send_copy_via_email: 'Надіслати копію електронною поштою',
+  download: 'Завантажити',
+  signature: 'Підпис',
+  initials: 'Ініціали',
+  clear: 'Очистити',
+  redraw: 'Перемалювати',
+  draw_initials: 'Намалювати ініціали',
+  type_signature_here: 'Введіть підпис тут',
+  type_initial_here: 'Введіть ініціали тут',
+  form_has_been_completed: 'Форму заповнено!',
+  create_a_free_account: 'Створити безкоштовний обліковий запис',
+  signed_with: 'Підписано за допомогою',
+  please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити',
+  open_source_documents_software: 'відкритий програмний засіб для документів',
+  verified_phone_number: 'Підтвердіть номер телефону',
+  use_international_format: 'Використовуйте міжнародний формат: +1xxx',
+  six_digits_code: '6-значний код',
+  change_phone_number: 'Змінити номер телефону',
+  sending: 'Надсилаю...',
+  resend_code: 'Повторно відправити код',
+  verification_code_has_been_resent: 'Код підтвердження був повторно надісланий',
+  email_has_been_sent: 'Електронний лист був відправлений'
+}
+
+const cs = {
+  submit_form: 'Odeslat formulář',
+  type_here: 'Zadejte zde',
+  optional: 'volitelné',
+  select_your_option: 'Vyberte svou volbu',
+  complete_hightlighted_checkboxes_and_click: 'Označte zvýrazněné zaškrtávací políčka a klikněte na',
+  submit: 'odeslat',
+  next: 'další',
+  click_to_upload: 'Klikněte pro nahrání',
+  or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
+  send_copy_via_email: 'Odeslat kopii e-mailem',
+  download: 'Stáhnout',
+  signature: 'Podpis',
+  initials: 'Iniciály',
+  clear: 'Smazat',
+  redraw: 'Překreslit',
+  draw_initials: 'Nakreslit iniciály',
+  type_signature_here: 'Sem zadejte podpis',
+  type_initial_here: 'Sem zadejte iniciály',
+  form_has_been_completed: 'Formulář byl dokončen!',
+  create_a_free_account: 'Vytvořit bezplatný účet',
+  signed_with: 'Podepsáno pomocí',
+  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',
+  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',
+  sending: 'Odesílání...',
+  resend_code: 'Znovu odeslat kód',
+  verification_code_has_been_resent: 'Ověřovací kód byl znovu odeslán',
+  email_has_been_sent: 'E-mail byl odeslán'
+}
+
+const pt = {
+  submit_form: 'Enviar Formulário',
+  type_here: 'Digite aqui',
+  optional: 'opcional',
+  select_your_option: 'Selecione sua opção',
+  complete_hightlighted_checkboxes_and_click: 'Complete as caixas de seleção destacadas e clique',
+  submit: 'enviar',
+  next: 'próximo',
+  click_to_upload: 'Clique para fazer o upload',
+  or_drag_and_drop_files: 'ou arraste e solte arquivos',
+  send_copy_via_email: 'Enviar cópia por e-mail',
+  download: 'Baixar',
+  signature: 'Assinatura',
+  initials: 'Iniciais',
+  clear: 'Limpar',
+  redraw: 'Redesenhar',
+  draw_initials: 'Desenhar iniciais',
+  type_signature_here: 'Digite a assinatura aqui',
+  type_initial_here: 'Digite as iniciais aqui',
+  form_has_been_completed: 'O formulário foi concluído!',
+  create_a_free_account: 'Criar uma Conta Gratuita',
+  signed_with: 'Assinado com',
+  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',
+  use_international_format: 'Use formato internacional: +1xxx',
+  six_digits_code: 'Código de 6 dígitos',
+  change_phone_number: 'Alterar número de telefone',
+  sending: 'Enviando...',
+  resend_code: 'Reenviar código',
+  verification_code_has_been_resent: 'O código de verificação foi reenviado via SMS',
+  email_has_been_sent: 'Email enviado'
+}
+
+const i18n = { en, es, it, de, fr, pl, uk, cs, pt }
+
+const browserLanguage = (navigator.language || navigator.userLanguage || 'en').split('-')[0]
+
+const t = (key) => i18n[browserLanguage]?.[key] || i18n.en[key] || key
+
+export default i18n
+export { t }

app/javascript/submission_form/initials_step.vue

@@ -0,0 +1,244 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center w-full mb-2">
+      <label
+        class="label text-2xl"
+      >{{ field.name || t('initials') }}</label>
+      <div class="space-x-2 flex">
+        <span
+          class="tooltip"
+          :data-tip="t('draw_initials')"
+        >
+          <button
+            id="type_text_button"
+            class="btn btn-sm btn-circle"
+            :class="{ 'btn-neutral': isDrawInitials, 'btn-outline': !isDrawInitials }"
+            @click.prevent="toggleTextInput"
+          >
+            <IconSignature :width="16" />
+          </button>
+        </span>
+        <button
+          v-if="modelValue"
+          class="btn btn-outline btn-sm"
+          @click.prevent="remove"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </button>
+        <button
+          v-else
+          class="btn btn-outline btn-sm"
+          @click.prevent="clear"
+        >
+          <IconReload :width="16" />
+          {{ t('clear') }}
+        </button>
+        <button
+          title="Minimize"
+          class="py-1.5 inline md:hidden"
+          @click.prevent="$emit('minimize')"
+        >
+          <IconArrowsDiagonalMinimize2
+            :width="20"
+            :height="20"
+          />
+        </button>
+      </div>
+    </div>
+    <input
+      :value="modelValue"
+      type="hidden"
+      :name="`values[${field.uuid}]`"
+    >
+    <img
+      v-if="modelValue"
+      :src="attachmentsIndex[modelValue].url"
+      class="mx-auto bg-white border border-base-300 rounded max-h-72"
+    >
+    <canvas
+      v-show="!modelValue"
+      ref="canvas"
+      class="bg-white border border-base-300 rounded"
+    />
+    <input
+      v-if="!isDrawInitials"
+      id="initials_text_input"
+      ref="textInput"
+      class="base-input !text-2xl w-full mt-6 text-center"
+      :required="field.required && !isInitialsStarted"
+      :placeholder="`${t('type_initial_here')}...`"
+      type="text"
+      @focus="$emit('focus')"
+      @input="updateWrittenInitials"
+    >
+  </div>
+</template>
+
+<script>
+import { cropCanvasAndExportToPNG } from './crop_canvas'
+import { IconReload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+
+export default {
+  name: 'InitialsStep',
+  components: {
+    IconReload,
+    IconSignature,
+    IconArrowsDiagonalMinimize2
+  },
+  inject: ['baseUrl', 't'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['attached', 'update:model-value', 'start', 'minimize', 'focus'],
+  data () {
+    return {
+      isInitialsStarted: false,
+      isDrawInitials: false
+    }
+  },
+  async mounted () {
+    this.$nextTick(() => {
+      if (this.$refs.canvas) {
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 5
+      }
+
+      this.$refs.textInput?.focus()
+    })
+
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+
+    const { default: SignaturePad } = await import('signature_pad')
+
+    if (this.$refs.canvas) {
+      this.pad = new SignaturePad(this.$refs.canvas)
+
+      this.pad.addEventListener('beginStroke', () => {
+        this.isInitialsStarted = true
+
+        this.$emit('start')
+      })
+    }
+  },
+  methods: {
+    remove () {
+      this.$emit('update:model-value', '')
+    },
+    clear () {
+      this.pad.clear()
+
+      this.isInitialsStarted = false
+
+      if (this.$refs.textInput) {
+        this.$refs.textInput.value = ''
+      }
+    },
+    updateWrittenInitials (e) {
+      this.isInitialsStarted = true
+
+      const canvas = this.$refs.canvas
+      const context = canvas.getContext('2d')
+
+      const fontFamily = 'Arial'
+      const fontSize = '44px'
+      const fontStyle = 'italic'
+      const fontWeight = ''
+
+      context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
+      context.textAlign = 'center'
+
+      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
+    },
+    toggleTextInput () {
+      this.remove()
+      this.clear()
+      this.isDrawInitials = !this.isDrawInitials
+
+      if (!this.isDrawInitials) {
+        this.$nextTick(() => {
+          this.$refs.textInput.focus()
+
+          this.$emit('start')
+        })
+      }
+    },
+    async submit () {
+      if (this.modelValue) {
+        return Promise.resolve({})
+      }
+
+      return new Promise((resolve) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+          const file = new File([blob], 'initials.png', { type: 'image/png' })
+
+          if (this.isDirectUpload) {
+            const { DirectUpload } = await import('@rails/activestorage')
+
+            new DirectUpload(
+              file,
+              '/direct_uploads'
+            ).create((_error, data) => {
+              fetch(this.baseUrl + '/api/attachments', {
+                method: 'POST',
+                body: JSON.stringify({
+                  submitter_slug: this.submitterSlug,
+                  blob_signed_id: data.signed_id,
+                  name: 'attachments'
+                }),
+                headers: { 'Content-Type': 'application/json' }
+              }).then((resp) => resp.json()).then((attachment) => {
+                this.$emit('update:model-value', attachment.uuid)
+                this.$emit('attached', attachment)
+
+                return resolve(attachment)
+              })
+            })
+          } else {
+            const formData = new FormData()
+
+            formData.append('file', file)
+            formData.append('submitter_slug', this.submitterSlug)
+            formData.append('name', 'attachments')
+
+            return fetch(this.baseUrl + '/api/attachments', {
+              method: 'POST',
+              body: formData
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('attached', attachment)
+              this.$emit('update:model-value', attachment.uuid)
+
+              return resolve(attachment)
+            })
+          }
+        })
+      })
+    }
+  }
+}
+</script>

app/javascript/submission_form/multi_select_step.vue

@@ -21,7 +21,7 @@
             :name="`values[${field.uuid}][]`"
             :value="option"
             class="base-checkbox !h-7 !w-7"
-            :checked="modelValue.includes(option)"
+            :checked="(modelValue || []).includes(option)"
             @change="onChange"
           >
           <span class="text-xl">

app/javascript/submission_form/phone_step.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <label
+      :for="isCodeSent ? 'one_time_code' : field.uuid"
+      class="label text-2xl mb-2"
+    >{{ field.name || t('verified_phone_number') }}
+      <template v-if="!field.required">({{ t('optional') }})</template>
+    </label>
+    <div>
+      <input
+        type="hidden"
+        name="normalize_phone"
+        value="true"
+      >
+      <div v-if="isCodeSent">
+        <input
+          id="one_time_code"
+          class="base-input !text-2xl w-full text-center"
+          name="one_time_code"
+          type="text"
+          autocomplete="one-time-code"
+          :placeholder="t('six_digits_code')"
+          required
+          maxlength="6"
+          autofocus
+          inputmode="decimal"
+          @input="onInputCode"
+        >
+        <div class="flex justify-between mt-2 -mb-2 md:-mb-4">
+          <a
+            href="#"
+            class="link"
+            @click.prevent="isCodeSent = false"
+          >
+            {{ t('change_phone_number') }}
+          </a>
+          <a
+            href="#"
+            class="link"
+            @click.prevent="resendCode"
+          >
+            {{ isResendLoading ? t('sending') : t('resend_code') }}
+          </a>
+        </div>
+      </div>
+      <input
+        v-show="!isCodeSent"
+        :id="field.uuid"
+        ref="phone"
+        :value="modelValue || defaultValue"
+        class="base-input !text-2xl w-full"
+        autocomplete="tel"
+        pattern="^\+[0-9\s\-]+$"
+        :oninvalid="`this.value ? this.setCustomValidity('${t('use_international_format')}...') : ''`"
+        oninput="this.setCustomValidity('')"
+        type="tel"
+        inputmode="tel"
+        :required="field.required"
+        placeholder="+1 234 567-8900"
+        :name="`values[${field.uuid}]`"
+        @input="$emit('update:model-value', $event.target.value)"
+        @focus="$emit('focus')"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+function throttle (func, delay) {
+  let lastCallTime = 0
+
+  return function (...args) {
+    const now = Date.now()
+
+    if (now - lastCallTime >= delay) {
+      func.apply(this, args)
+      lastCallTime = now
+    }
+  }
+}
+
+export default {
+  name: 'PhoneStep',
+  inject: ['t', 'baseUrl'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submitterSlug: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    defaultValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus', 'submit'],
+  data () {
+    return {
+      isCodeSent: false,
+      isResendLoading: false
+    }
+  },
+  methods: {
+    emitSubmit: throttle(function (e) {
+      this.$emit('submit')
+    }, 1000),
+    onInputCode (e) {
+      if (e.target.value.length === 6) {
+        this.emitSubmit()
+      }
+    },
+    resendCode () {
+      this.isResendLoading = true
+
+      this.sendVerificationCode().finally(() => {
+        alert(this.t('verification_code_has_been_resent'))
+
+        this.isResendLoading = false
+      })
+    },
+    sendVerificationCode () {
+      return fetch(this.baseUrl + '/api/send_phone_verification_code', {
+        method: 'POST',
+        body: JSON.stringify({
+          submitter_slug: this.submitterSlug,
+          phone: this.$refs.phone.value
+        }),
+        headers: { 'Content-Type': 'application/json' }
+      })
+    },
+    async submit () {
+      if (!this.isCodeSent) {
+        this.sendVerificationCode()
+
+        this.$emit('update:model-value', this.$refs.phone.value)
+
+        this.isCodeSent = true
+
+        return Promise.reject(new Error('verify with code'))
+      } else {
+        return Promise.resolve({})
+      }
+    }
+  }
+}
+</script>

app/javascript/submission_form/signature_step.vue

@@ -3,7 +3,7 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || 'Signature' }}</label>
+      >{{ field.name || t('signature') }}</label>
       <div class="space-x-2 flex">
         <span
           class="tooltip"
@@ -40,7 +40,7 @@
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          Redraw
+          {{ t('redraw') }}
         </button>
         <button
           v-else
@@ -48,7 +48,7 @@
           @click.prevent="clear"
         >
           <IconReload :width="16" />
-          Clear
+          {{ t('clear') }}
         </button>
         <button
           title="Minimize"
@@ -83,7 +83,7 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
       :required="field.required"
-      :placeholder="`Type signature here...`"
+      :placeholder="`${t('type_signature_here')}...`"
       type="text"
       @input="updateWrittenSignature"
     >
@@ -92,6 +92,7 @@
 
 <script>
 import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { cropCanvasAndExportToPNG } from './crop_canvas'
 
 export default {
   name: 'SignatureStep',
@@ -101,7 +102,7 @@ export default {
     IconTextSize,
     IconArrowsDiagonalMinimize2
   },
-  inject: ['baseUrl'],
+  inject: ['baseUrl', 't'],
   props: {
     field: {
       type: Object,
@@ -136,8 +137,10 @@ export default {
   },
   async mounted () {
     this.$nextTick(() => {
-      this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
-      this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
+      if (this.$refs.canvas) {
+        this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
+        this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
+      }
     })
 
     if (this.isDirectUpload) {
@@ -146,13 +149,15 @@ export default {
 
     const { default: SignaturePad } = await import('signature_pad')
 
-    this.pad = new SignaturePad(this.$refs.canvas)
+    if (this.$refs.canvas) {
+      this.pad = new SignaturePad(this.$refs.canvas)
 
-    this.pad.addEventListener('beginStroke', () => {
-      this.isSignatureStarted = true
+      this.pad.addEventListener('beginStroke', () => {
+        this.isSignatureStarted = true
 
-      this.$emit('start')
-    })
+        this.$emit('start')
+      })
+    }
   },
   methods: {
     remove () {
@@ -244,60 +249,13 @@ export default {
         reader.readAsDataURL(file)
       }
     },
-    cropCanvasAndExportToPNG (canvas) {
-      const ctx = canvas.getContext('2d')
-
-      const width = canvas.width
-      const height = canvas.height
-
-      let topmost = height
-      let bottommost = 0
-      let leftmost = width
-      let rightmost = 0
-
-      const imageData = ctx.getImageData(0, 0, width, height)
-      const pixels = imageData.data
-
-      for (let y = 0; y < height; y++) {
-        for (let x = 0; x < width; x++) {
-          const pixelIndex = (y * width + x) * 4
-          const alpha = pixels[pixelIndex + 3]
-          if (alpha !== 0) {
-            topmost = Math.min(topmost, y)
-            bottommost = Math.max(bottommost, y)
-            leftmost = Math.min(leftmost, x)
-            rightmost = Math.max(rightmost, x)
-          }
-        }
-      }
-
-      const croppedWidth = rightmost - leftmost + 1
-      const croppedHeight = bottommost - topmost + 1
-
-      const croppedCanvas = document.createElement('canvas')
-      croppedCanvas.width = croppedWidth
-      croppedCanvas.height = croppedHeight
-      const croppedCtx = croppedCanvas.getContext('2d')
-
-      croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
-
-      return new Promise((resolve, reject) => {
-        croppedCanvas.toBlob((blob) => {
-          if (blob) {
-            resolve(blob)
-          } else {
-            reject(new Error('Failed to create a PNG blob.'))
-          }
-        }, 'image/png')
-      })
-    },
     async submit () {
       if (this.modelValue) {
         return Promise.resolve({})
       }
 
       return new Promise((resolve) => {
-        this.cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
           if (this.isDirectUpload) {

app/javascript/template_builder/area.vue

@@ -4,6 +4,7 @@
     :style="positionStyle"
     @pointerdown.stop
     @mousedown.stop="startDrag"
+    @touchstart="startTouchDrag"
   >
     <div
       v-if="isSelected || isDraw"
@@ -32,7 +33,7 @@
     <div
       v-if="field?.type"
       class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10"
-      :class="{ 'flex z-10': isNameFocus || isSelected, hidden: !isNameFocus && !isSelected }"
+      :class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
       style="top: -25px; height: 25px"
       @mousedown.stop
       @pointerdown.stop
@@ -108,12 +109,14 @@
       </span>
     </div>
     <div
+      ref="touchTarget"
       class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
     />
     <span
       v-if="field?.type"
-      class="h-2.5 w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
       @mousedown.stop="startResize"
+      @touchstart="startTouchResize"
     />
   </div>
 </template>
@@ -186,7 +189,12 @@ export default {
         'border-sky-500',
         'border-emerald-500',
         'border-yellow-300',
-        'border-purple-600'
+        'border-purple-600',
+        'border-pink-500',
+        'border-cyan-500',
+        'border-orange-500',
+        'border-lime-500',
+        'border-indigo-500'
       ]
     },
     bgColors () {
@@ -195,7 +203,12 @@ export default {
         'bg-sky-100',
         'bg-emerald-100',
         'bg-yellow-100',
-        'bg-purple-100'
+        'bg-purple-100',
+        'bg-pink-100',
+        'bg-cyan-100',
+        'bg-orange-100',
+        'bg-lime-100',
+        'bg-indigo-100'
       ]
     },
     isSelected () {
@@ -309,6 +322,47 @@ export default {
 
       this.$emit('start-drag')
     },
+    startTouchDrag (e) {
+      if (e.target !== this.$refs.touchTarget) {
+        return
+      }
+
+      this.$refs?.name?.blur()
+
+      e.preventDefault()
+
+      this.isDragged = true
+
+      const rect = e.target.getBoundingClientRect()
+
+      this.selectedAreaRef.value = this.area
+
+      this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }
+
+      this.$el.getRootNode().addEventListener('touchmove', this.touchDrag)
+      this.$el.getRootNode().addEventListener('touchend', this.stopTouchDrag)
+
+      this.$emit('start-drag')
+    },
+    touchDrag (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width
+      this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height
+    },
+    stopTouchDrag () {
+      this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag)
+      this.$el.getRootNode().removeEventListener('touchend', this.stopTouchDrag)
+
+      if (this.isDragged) {
+        this.save()
+      }
+
+      this.isDragged = false
+
+      this.$emit('stop-drag')
+    },
     stopDrag () {
       this.$el.getRootNode().removeEventListener('mousemove', this.drag)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
@@ -335,6 +389,33 @@ export default {
 
       this.$emit('stop-resize')
 
+      this.save()
+    },
+    startTouchResize (e) {
+      this.selectedAreaRef.value = this.area
+
+      this.$refs?.name?.blur()
+
+      e.preventDefault()
+
+      this.$el.getRootNode().addEventListener('touchmove', this.touchResize)
+      this.$el.getRootNode().addEventListener('touchend', this.stopTouchResize)
+
+      this.$emit('start-resize', 'nwse')
+    },
+    touchResize (e) {
+      const page = this.$parent.$refs.mask.previousSibling
+      const rect = page.getBoundingClientRect()
+
+      this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
+      this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
+    },
+    stopTouchResize () {
+      this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
+      this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
+
+      this.$emit('stop-resize')
+
       this.save()
     }
   }

app/javascript/template_builder/builder.vue

@@ -1,17 +1,19 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto pl-4 h-full"
+    class="mx-auto pl-3 md:pl-4 h-full"
   >
-    <div class="flex justify-between py-1.5 items-center pr-4">
+    <div
+      class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
+      :style="{ backgroundColor }"
+    >
       <div class="flex space-x-3">
         <a
-          v-if="withLogoLink"
+          v-if="withLogo"
           href="/"
         >
           <Logo />
         </a>
-        <Logo v-else />
         <Contenteditable
           :model-value="template.name"
           class="text-3xl font-semibold focus:text-clip"
@@ -28,7 +30,7 @@
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary"
+            class="btn btn-primary text-base"
           >
             <IconUsersPlus
               width="20"
@@ -46,12 +48,12 @@
           >
             <IconInnerShadowTop
               v-if="isSaving"
-              width="20"
+              width="22"
               class="animate-spin"
             />
             <IconDeviceFloppy
               v-else
-              width="20"
+              width="22"
             />
             <span class="hidden md:inline">
               Save
@@ -60,10 +62,7 @@
         </template>
       </div>
     </div>
-    <div
-      class="flex"
-      style="max-height: calc(100% - 60px)"
-    >
+    <div class="flex md:max-h-[calc(100vh-60px)]">
       <div
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
@@ -75,6 +74,7 @@
           :with-arrows="template.schema.length > 1"
           :item="item"
           :document="sortedDocuments[index]"
+          :accept-file-types="acceptFileTypes"
           :template="template"
           :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
@@ -84,16 +84,20 @@
           @down="moveDocument(item, 1)"
           @change="save"
         />
-        <div class="sticky bottom-0 bg-base-100 py-2">
+        <div
+          class="sticky bottom-0 py-2"
+          :class="{ 'bg-base-100': withStickySubmitters }"
+        >
           <Upload
             v-if="sortedDocuments.length"
+            :accept-file-types="acceptFileTypes"
             :template-id="template.id"
             :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
         </div>
       </div>
-      <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+      <div class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
@@ -101,6 +105,7 @@
           <Dropzone
             v-if="!sortedDocuments.length"
             :template-id="template.id"
+            :accept-file-types="acceptFileTypes"
             :is-direct-upload="isDirectUpload"
             @success="updateFromUpload"
           />
@@ -147,17 +152,54 @@
             </div>
           </template>
         </div>
-        <div
-          v-if="sortedDocuments.length"
-          class="sticky md:hidden"
-          style="bottom: 100px"
+        <span
+          v-if="drawField"
+          class="fixed text-center w-full left-1/2 bottom-0 transform -translate-x-1/2"
         >
-          <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between ml-4 mr-6">
-            <span class="w-full text-center text-lg">
-              You need a larger screen to use builder tools.
+          <span
+            class="rounded bg-base-200 px-4 py-2 rounded-full inline-flex space-x-2 mx-auto items-center mb-4 z-20 md:hidden"
+          >
+            <component
+              :is="fieldIcons[drawField.type]"
+              :width="20"
+              :height="20"
+              class="inline"
+              :stroke-width="1.6"
+            />
+            <span>
+              Draw {{ fieldNames[drawField.type] }} Field
             </span>
-          </div>
-        </div>
+            <a
+              href="#"
+              class="link block text-center"
+              @click.prevent="drawField = null"
+            >
+              Cancel
+            </a>
+          </span>
+        </span>
+        <FieldType
+          v-if="sortedDocuments.length && !drawField"
+          class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
+          :model-value="''"
+          @update:model-value="startFieldDraw($event)"
+        >
+          <label
+            class="btn btn-neutral text-white btn-circle btn-lg group"
+            tabindex="0"
+          >
+            <IconPlus
+              class="group-focus:hidden"
+              width="28"
+              height="28"
+            />
+            <IconX
+              class="hidden group-focus:inline"
+              width="28"
+              height="28"
+            />
+          </label>
+        </FieldType>
       </div>
       <div
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
@@ -209,7 +251,8 @@ import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
-import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop } from '@tabler/icons-vue'
+import FieldType from './field_type'
+import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 
@@ -219,6 +262,9 @@ export default {
     Upload,
     Document,
     Fields,
+    IconPlus,
+    FieldType,
+    IconX,
     Logo,
     Dropzone,
     DocumentPreview,
@@ -233,6 +279,8 @@ export default {
       template: this.template,
       save: this.save,
       baseFetch: this.baseFetch,
+      backgroundColor: this.backgroundColor,
+      withPhone: this.withPhone,
       selectedAreaRef: computed(() => this.selectedAreaRef)
     }
   },
@@ -246,12 +294,22 @@ export default {
       required: false,
       default: false
     },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    acceptFileTypes: {
+      type: String,
+      required: false,
+      default: 'image/*, application/pdf'
+    },
     baseUrl: {
       type: String,
       required: false,
       default: ''
     },
-    withLogoLink: {
+    withLogo: {
       type: Boolean,
       required: false,
       default: true
@@ -261,6 +319,11 @@ export default {
       required: false,
       default: true
     },
+    withPhone: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     fetchOptions: {
       type: Object,
       required: false,
@@ -278,6 +341,8 @@ export default {
     }
   },
   computed: {
+    fieldIcons: FieldType.computed.fieldIcons,
+    fieldNames: FieldType.computed.fieldNames,
     selectedAreaRef: () => ref(),
     fieldAreasIndex () {
       const areas = {}
@@ -307,16 +372,21 @@ export default {
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
+    this.undoStack = [JSON.stringify(this.template)]
+    this.redoStack = []
+
     this.$nextTick(() => {
       this.onWindowResize()
     })
 
     document.addEventListener('keyup', this.onKeyUp)
+    window.addEventListener('keydown', this.onKeyDown)
 
     window.addEventListener('resize', this.onWindowResize)
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
+    window.removeEventListener('keydown', this.onKeyDown)
 
     window.removeEventListener('resize', this.onWindowResize)
   },
@@ -324,10 +394,56 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    startFieldDraw (type) {
+      const field = {
+        name: '',
+        uuid: v4(),
+        required: type !== 'checkbox',
+        areas: [],
+        submitter_uuid: this.selectedSubmitter.uuid,
+        type
+      }
+
+      if (['select', 'multiple', 'radio'].includes(type)) {
+        field.options = ['']
+      }
+
+      this.drawField = field
+    },
+    undo () {
+      if (this.undoStack.length > 1) {
+        this.undoStack.pop()
+        const stringData = this.undoStack[this.undoStack.length - 1]
+        const currentStringData = JSON.stringify(this.template)
+
+        if (stringData && stringData !== currentStringData) {
+          this.redoStack.push(currentStringData)
+
+          Object.assign(this.template, JSON.parse(stringData))
+
+          this.save()
+        }
+      }
+    },
+    redo () {
+      const stringData = this.redoStack.pop()
+      this.lastRedoData = stringData
+      const currentStringData = JSON.stringify(this.template)
+
+      if (stringData && stringData !== currentStringData) {
+        if (this.undoStack[this.undoStack.length - 1] !== currentStringData) {
+          this.undoStack.push(currentStringData)
+        }
+
+        Object.assign(this.template, JSON.parse(stringData))
+
+        this.save()
+      }
+    },
     onWindowResize (e) {
       const breakpointLg = 1024
 
-      this.isBreakpointLg = this.$el.getRootNode().querySelector('div').offsetWidth < breakpointLg
+      this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
     setDocumentRefs (el) {
       if (el) {
@@ -351,6 +467,19 @@ export default {
         this.selectedAreaRef.value = null
       }
     },
+    onKeyDown (event) {
+      if ((event.metaKey && event.shiftKey && event.key === 'z') || (event.ctrlKey && event.key === 'Z')) {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+
+        this.redo()
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+
+        this.undo()
+      }
+    },
     removeArea (area) {
       const field = this.template.fields.find((f) => f.areas?.includes(area))
 
@@ -362,12 +491,31 @@ export default {
 
       this.save()
     },
+    pushUndo () {
+      const stringData = JSON.stringify(this.template)
+
+      if (this.undoStack[this.undoStack.length - 1] !== stringData) {
+        this.undoStack.push(stringData)
+
+        if (this.lastRedoData !== stringData) {
+          this.redoStack = []
+        }
+      }
+    },
     onDraw (area) {
       if (this.drawField) {
         this.drawField.areas ||= []
         this.drawField.areas.push(area)
 
+        if (this.template.fields.indexOf(this.drawField) === -1) {
+          this.template.fields.push(this.drawField)
+        }
+
         this.drawField = null
+
+        this.selectedAreaRef.value = area
+
+        this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
         const pageMask = documentRef.pageRefs[area.page].$refs.mask
@@ -378,33 +526,37 @@ export default {
           const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
           const previousArea = previousField?.areas?.[previousField.areas.length - 1]
 
-          const areaW = previousArea?.w || (30 / pageMask.clientWidth)
-          const areaH = previousArea?.h || (30 / pageMask.clientHeight)
+          if (previousArea || area.w) {
+            const areaW = previousArea?.w || (30 / pageMask.clientWidth)
+            const areaH = previousArea?.h || (30 / pageMask.clientHeight)
 
-          if ((pageMask.clientWidth * area.w) < 5) {
-            area.x = area.x - (areaW / 2)
-            area.y = area.y - (areaH / 2)
+            if ((pageMask.clientWidth * area.w) < 5) {
+              area.x = area.x - (areaW / 2)
+              area.y = area.y - (areaH / 2)
+            }
+
+            area.w = areaW
+            area.h = areaH
+          }
+        }
+
+        if (area.w) {
+          const field = {
+            name: '',
+            uuid: v4(),
+            required: type !== 'checkbox',
+            type,
+            submitter_uuid: this.selectedSubmitter.uuid,
+            areas: [area]
           }
 
-          area.w = areaW
-          area.h = areaH
-        }
+          this.template.fields.push(field)
 
-        const field = {
-          name: '',
-          uuid: v4(),
-          required: type !== 'checkbox',
-          type,
-          submitter_uuid: this.selectedSubmitter.uuid,
-          areas: [area]
-        }
+          this.selectedAreaRef.value = area
 
-        this.template.fields.push(field)
+          this.save()
+        }
       }
-
-      this.selectedAreaRef.value = area
-
-      this.save()
     },
     onDropfield (area) {
       const field = {
@@ -450,6 +602,11 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
+        } else if (this.dragFieldType === 'initials') {
+          baseArea = {
+            w: area.maskW / 10 / area.maskW,
+            h: area.maskW / 35 / area.maskW
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
@@ -561,6 +718,8 @@ export default {
         this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
       }
 
+      this.pushUndo()
+
       return this.baseFetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
         body: JSON.stringify({

app/javascript/template_builder/contenteditable.vue

@@ -30,7 +30,7 @@
       :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
-      @click="focusContenteditable"
+      @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
     />
   </div>
 </template>
@@ -64,6 +64,11 @@ export default {
       required: false,
       default: false
     },
+    selectOnEditClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     iconStrokeWidth: {
       type: Number,
       required: false,
@@ -85,6 +90,19 @@ export default {
     }
   },
   methods: {
+    selectContent () {
+      const el = this.$refs.contenteditable
+
+      const range = document.createRange()
+
+      range.selectNodeContents(el)
+
+      const sel = window.getSelection()
+
+      sel.removeAllRanges()
+
+      sel.addRange(range)
+    },
     onBlur (e) {
       setTimeout(() => {
         this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue

app/javascript/template_builder/dropzone.vue

@@ -42,7 +42,7 @@
           ref="input"
           type="file"
           name="files[]"
-          accept="image/*, application/pdf"
+          :accept="acceptFileTypes"
           multiple
           @change="upload"
         >
@@ -67,6 +67,11 @@ export default {
       type: [Number, String],
       required: true
     },
+    acceptFileTypes: {
+      type: String,
+      required: false,
+      default: 'image/*, application/pdf'
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
@@ -89,8 +94,10 @@ export default {
         return 'Uploading...'
       } else if (this.isProcessing) {
         return 'Processing...'
-      } else {
+      } else if (this.acceptFileTypes === 'image/*, application/pdf') {
         return 'Add PDF documents or images'
+      } else {
+        return 'Add documents or images'
       }
     }
   },
@@ -102,7 +109,7 @@ export default {
   methods: {
     upload: Upload.methods.upload,
     onDropFiles (e) {
-      if ([...e.dataTransfer.files].every((f) => f.type.match(/(?:image\/)|(?:application\/pdf)/))) {
+      if (this.acceptFileTypes !== 'image/*, application/pdf' || [...e.dataTransfer.files].every((f) => f.type.match(/(?:image\/)|(?:application\/pdf)/))) {
         this.$refs.input.files = e.dataTransfer.files
 
         this.upload()

app/javascript/template_builder/field.vue

@@ -31,21 +31,19 @@
           v-if="isNameFocus"
           class="flex items-center relative"
         >
-          <template v-if="field.type !== 'checkbox'">
-            <input
-              :id="`required-checkbox-${field.uuid}`"
-              v-model="field.required"
-              type="checkbox"
-              class="checkbox checkbox-xs no-animation rounded"
-              @mousedown.prevent
-            >
-            <label
-              :for="`required-checkbox-${field.uuid}`"
-              class="label text-xs"
-              @click.prevent="field.required = !field.required"
-              @mousedown.prevent
-            >Required</label>
-          </template>
+          <input
+            :id="`required-checkbox-${field.uuid}`"
+            v-model="field.required"
+            type="checkbox"
+            class="checkbox checkbox-xs no-animation rounded"
+            @mousedown.prevent
+          >
+          <label
+            :for="`required-checkbox-${field.uuid}`"
+            class="label text-xs"
+            @click.prevent="field.required = !field.required"
+            @mousedown.prevent
+          >Required</label>
         </div>
         <div
           v-else
@@ -99,6 +97,19 @@
                   Draw New Area
                 </a>
               </li>
+              <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
+                <a
+                  href="#"
+                  class="text-sm py-1 px-2"
+                  @click.prevent="copyToAllPages(field)"
+                >
+                  <IconCopy
+                    :width="20"
+                    :stroke-width="1.6"
+                  />
+                  Copy to All Pages
+                </a>
+              </li>
             </ul>
           </span>
           <button
@@ -183,7 +194,7 @@
 <script>
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
-import { IconShape, IconNewSection, IconTrashX } from '@tabler/icons-vue'
+import { IconShape, IconNewSection, IconTrashX, IconCopy } from '@tabler/icons-vue'
 
 export default {
   name: 'TemplateField',
@@ -192,6 +203,7 @@ export default {
     IconShape,
     IconNewSection,
     IconTrashX,
+    IconCopy,
     FieldType
   },
   inject: ['template', 'save'],
@@ -221,6 +233,23 @@ export default {
     }
   },
   methods: {
+    copyToAllPages (field) {
+      const areaString = JSON.stringify(field.areas[0])
+
+      this.template.documents.forEach((attachment) => {
+        attachment.preview_images.forEach((page) => {
+          if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
+            field.areas.push({ ...JSON.parse(areaString), page: parseInt(page.filename) })
+          }
+        })
+      })
+
+      this.$nextTick(() => {
+        this.$emit('scroll-to', this.field.areas[this.field.areas.length - 1])
+      })
+
+      this.save()
+    },
     onNameFocus (e) {
       this.isNameFocus = true
 

app/javascript/template_builder/field_submitter.vue

@@ -25,12 +25,16 @@
           v-model="selectedSubmitter.name"
           class="cursor-text"
           :icon-inline="true"
+          :select-on-edit-click="true"
           :icon-width="18"
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span>
-        ▼
+      <span class="flex items-center">
+        <IconPlus
+          width="18"
+          height="18"
+        />
       </span>
     </label>
     <ul
@@ -66,7 +70,7 @@
           </button>
         </a>
       </li>
-      <li v-if="submitters.length < 5">
+      <li v-if="submitters.length < 10">
         <a
           href="#"
           class="flex px-2"
@@ -86,7 +90,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconPlus } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -95,6 +99,7 @@ export default {
   components: {
     IconUserPlus,
     Contenteditable,
+    IconPlus,
     IconTrashX
   },
   props: {
@@ -125,7 +130,12 @@ export default {
         'bg-sky-500',
         'bg-emerald-500',
         'bg-yellow-300',
-        'bg-purple-600'
+        'bg-purple-600',
+        'bg-pink-500',
+        'bg-cyan-500',
+        'bg-orange-500',
+        'bg-lime-500',
+        'bg-indigo-500'
       ]
     },
     names () {
@@ -134,7 +144,12 @@ export default {
         'Second Submitter',
         'Third Submitter',
         'Fourth Submitter',
-        'Fifth Submitter'
+        'Fifth Submitter',
+        'Sixth Submitter',
+        'Seventh Submitter',
+        'Eighth Submitter',
+        'Ninth Submitter',
+        'Tenth Submitter'
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/field_type.vue

@@ -1,50 +1,55 @@
 <template>
   <span class="dropdown">
-    <label
-      tabindex="0"
-      :title="fieldNames[modelValue]"
-      class="cursor-pointer"
-    >
-      <component
-        :is="fieldIcons[modelValue]"
-        :width="buttonWidth"
-        :class="buttonClasses"
-        :stroke-width="1.6"
-      />
-    </label>
+    <slot>
+      <label
+        tabindex="0"
+        :title="fieldNames[modelValue]"
+        class="cursor-pointer"
+      >
+        <component
+          :is="fieldIcons[modelValue]"
+          :width="buttonWidth"
+          :class="buttonClasses"
+          :stroke-width="1.6"
+        />
+      </label>
+    </slot>
     <ul
       tabindex="0"
-      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
+      class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
       :class="menuClasses"
       @click="closeDropdown"
     >
-      <li
+      <template
         v-for="(icon, type) in fieldIcons"
         :key="type"
       >
-        <a
-          href="#"
-          class="text-sm py-1 px-2"
-          :class="{ 'active': type === modelValue }"
-          @click.prevent="$emit('update:model-value', type)"
-        >
-          <component
-            :is="icon"
-            :stroke-width="1.6"
-            :width="20"
-          />
-          {{ fieldNames[type] }}
-        </a>
-      </li>
+        <li v-if="withPhone || type !== 'phone'">
+          <a
+            href="#"
+            class="text-sm py-1 px-2"
+            :class="{ 'active': type === modelValue }"
+            @click.prevent="$emit('update:model-value', type)"
+          >
+            <component
+              :is="icon"
+              :stroke-width="1.6"
+              :width="20"
+            />
+            {{ fieldNames[type] }}
+          </a>
+        </li>
+      </template>
     </ul>
   </span>
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3 } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
+  inject: ['withPhone'],
   props: {
     modelValue: {
       type: String,
@@ -72,6 +77,7 @@ export default {
       return {
         text: 'Text',
         signature: 'Signature',
+        initials: 'Initials',
         date: 'Date',
         image: 'Image',
         file: 'File',
@@ -79,21 +85,24 @@ export default {
         checkbox: 'Checkbox',
         multiple: 'Multiple',
         radio: 'Radio',
-        cells: 'Cells'
+        cells: 'Cells',
+        phone: 'Phone'
       }
     },
     fieldIcons () {
       return {
         text: IconTextSize,
         signature: IconWritingSign,
+        initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
-        cells: IconColumns3,
+        radio: IconCircleDot,
         multiple: IconChecks,
-        radio: IconCircleDot
+        cells: IconColumns3,
+        phone: IconPhoneCheck
       }
     }
   },

app/javascript/template_builder/fields.vue

@@ -25,48 +25,79 @@
     />
   </div>
   <div class="grid grid-cols-3 gap-1 pb-2">
-    <button
+    <template
       v-for="(icon, type) in fieldIcons"
       :key="type"
-      draggable="true"
-      class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
-      @dragstart="onDragstart(type)"
-      @dragend="$emit('drag-end')"
-      @click="addField(type)"
     >
-      <div class="w-0 absolute left-0">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="cursor-grab"
-          width="18"
-          height="18"
-          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"
+      <button
+        v-if="withPhone || type != 'phone'"
+        draggable="true"
+        class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+        :style="{ backgroundColor: backgroundColor }"
+        @dragstart="onDragstart(type)"
+        @dragend="$emit('drag-end')"
+        @click="addField(type)"
+      >
+        <div class="w-0 absolute left-0">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="cursor-grab"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
             fill="none"
-          />
-          <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-          <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-        </svg>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              stroke="none"
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+            <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          </svg>
+        </div>
+        <div class="flex items-center flex-col px-2 py-2">
+          <component :is="icon" />
+          <span class="text-xs mt-1">
+            {{ fieldNames[type] }}
+          </span>
+        </div>
+      </button>
+      <div
+        v-else
+        class="tooltip tooltip-bottom-end flex"
+        data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
+      >
+        <a
+          href="https://www.docuseal.co/pricing"
+          target="_blank"
+          class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+          :style="{ backgroundColor: backgroundColor }"
+        >
+          <div class="w-0 absolute left-0">
+            <IconLock
+              width="18"
+              height="18"
+              stroke-width="1.5"
+            />
+          </div>
+          <div class="flex items-center flex-col px-2 py-2">
+            <component :is="icon" />
+            <span class="text-xs mt-1">
+              {{ fieldNames[type] }}
+            </span>
+          </div>
+        </a>
       </div>
-      <div class="flex items-center flex-col px-2 py-2">
-        <component :is="icon" />
-        <span class="text-xs mt-1">
-          {{ fieldNames[type] }}
-        </span>
-      </div>
-    </button>
+    </template>
   </div>
   <div
     v-if="fields.length < 4"
@@ -76,9 +107,6 @@
       <li>
         Draw a text field on the page with a mouse
       </li>
-      <li>
-        Single click on the page to add a checkbox
-      </li>
       <li>
         Drag &amp; drop any other field type on the page
       </li>
@@ -94,14 +122,16 @@ import Field from './field'
 import { v4 } from 'uuid'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
+import { IconLock } from '@tabler/icons-vue'
 
 export default {
   name: 'TemplateFields',
   components: {
     Field,
-    FieldSubmitter
+    FieldSubmitter,
+    IconLock
   },
-  inject: ['save'],
+  inject: ['save', 'backgroundColor', 'withPhone'],
   props: {
     fields: {
       type: Array,

app/javascript/template_builder/page.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="relative cursor-crosshair select-none">
+  <div
+    class="relative cursor-crosshair select-none"
+    :style="drawField ? 'touch-action: none' : ''"
+  >
     <img
       ref="image"
       :src="image.url"
@@ -32,12 +35,13 @@
       />
     </div>
     <div
-      v-show="resizeDirection || isMove || isDrag || showMask"
+      v-show="resizeDirection || isMove || isDrag || showMask || (drawField && isMobile)"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute z-10"
       :class="{ 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
+      @pointerdown="onStartDraw"
       @dragover.prevent
       @drop="onDrop"
       @pointerup="onPointerup"
@@ -93,6 +97,9 @@ export default {
     }
   },
   computed: {
+    isMobile () {
+      return /android|iphone|ipad/i.test(navigator.userAgent)
+    },
     resizeDirectionClasses () {
       return {
         nwse: 'cursor-nwse-resize',
@@ -125,6 +132,10 @@ export default {
       })
     },
     onStartDraw (e) {
+      if (this.isMobile && !this.drawField) {
+        return
+      }
+
       this.showMask = true
 
       this.$nextTick(() => {

app/javascript/template_builder/preview.vue

@@ -18,6 +18,7 @@
             <ReplaceButton
               :is-direct-upload="isDirectUpload"
               :template-id="template.id"
+              :accept-file-types="acceptFileTypes"
               class="opacity-0 group-hover:opacity-100"
               @click.stop
               @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
@@ -94,6 +95,11 @@ export default {
       type: Object,
       required: true
     },
+    acceptFileTypes: {
+      type: String,
+      required: false,
+      default: 'image/*, application/pdf'
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,

app/javascript/template_builder/replace.vue

@@ -14,7 +14,7 @@
         ref="input"
         name="files[]"
         type="file"
-        accept="image/*, application/pdf"
+        :accept="acceptFileTypes"
         @change="upload"
       >
     </form>
@@ -32,6 +32,11 @@ export default {
       type: [Number, String],
       required: true
     },
+    acceptFileTypes: {
+      type: String,
+      required: false,
+      default: 'image/*, application/pdf'
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,

app/javascript/template_builder/upload.vue

@@ -33,7 +33,7 @@
         ref="input"
         name="files[]"
         type="file"
-        accept="image/*, application/pdf"
+        :accept="acceptFileTypes"
         multiple
         @change="upload"
       >
@@ -56,6 +56,11 @@ export default {
       type: [Number, String],
       required: true
     },
+    acceptFileTypes: {
+      type: String,
+      required: false,
+      default: 'image/*, application/pdf'
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,

app/jobs/generate_submitter_result_attachments_job.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-class GenerateSubmitterResultAttachmentsJob < ApplicationJob
-  def perform(submitter)
-    Submissions::EnsureResultGenerated.call(submitter)
-  end
-end

app/jobs/process_submitter_completion_job.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class ProcessSubmitterCompletionJob < ApplicationJob
+  def perform(submitter)
+    is_all_completed = !submitter.submission.submitters.exists?(completed_at: nil)
+
+    if !is_all_completed && submitter.submission.submitters_order_preserved?
+      enqueue_next_submitter_request_notification(submitter)
+    end
+
+    Submissions::EnsureResultGenerated.call(submitter)
+
+    if submitter.account.encrypted_configs.exists?(key: EncryptedConfig::WEBHOOK_URL_KEY)
+      SendFormCompletedWebhookRequestJob.perform_later(submitter)
+    end
+
+    return unless is_all_completed
+    return if submitter.completed_at != submitter.submission.submitters.maximum(:completed_at)
+
+    Submissions::GenerateAuditTrail.call(submitter.submission)
+
+    enqueue_emails(submitter)
+  end
+
+  def enqueue_emails(submitter)
+    user = submitter.submission.created_by_user || submitter.template.author
+
+    if submitter.template.account.users.exists?(id: user.id)
+      bcc = submitter.submission.template.account.account_configs
+                     .find_by(key: AccountConfig::BCC_EMAILS)&.value
+
+      SubmitterMailer.completed_email(submitter, user, bcc:).deliver_later!
+    end
+
+    to = submitter.submission.submitters.sort_by(&:completed_at).select(&:email?).map(&:friendly_name).join(', ')
+
+    SubmitterMailer.documents_copy_email(submitter, to:).deliver_later! if to.present?
+  end
+
+  def enqueue_next_submitter_request_notification(submitter)
+    next_submitter_item =
+      submitter.submission.template_submitters.find do |e|
+        sub = submitter.submission.submitters.find { |s| s.uuid == e['uuid'] }
+
+        sub.completed_at.blank? && sub.sent_at.blank?
+      end
+
+    return unless next_submitter_item
+
+    next_submitter = submitter.submission.submitters.find { |s| s.uuid == next_submitter_item['uuid'] }
+
+    Submitters.send_signature_requests([next_submitter], send_email: true)
+  end
+end

app/jobs/send_form_completed_webhook_request_job.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
-class SendWebhookRequestJob < ApplicationJob
+class SendFormCompletedWebhookRequestJob < ApplicationJob
   USER_AGENT = 'DocuSeal.co Webhook'
 
   def perform(submitter)
-    config = submitter.submission.account.encrypted_configs.find_by(key: EncryptedConfig::WEBHOOK_URL_KEY)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
 
     return if config.blank? || config.value.blank?
 
@@ -14,8 +14,8 @@ class SendWebhookRequestJob < ApplicationJob
 
     Faraday.post(config.value,
                  {
-                   event_type: 'form.submitted',
-                   timestamp: Time.current.iso8601,
+                   event_type: 'form.completed',
+                   timestamp: Time.current,
                    data: Submitters::SerializeForWebhook.call(submitter)
                  }.to_json,
                  'Content-Type' => 'application/json',

app/jobs/send_form_started_webhook_request_job.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class SendFormStartedWebhookRequestJob < ApplicationJob
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  def perform(submitter)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
+
+    return if config.blank? || config.value.blank?
+
+    ActiveStorage::Current.url_options = Docuseal.default_url_options
+
+    Faraday.post(config.value,
+                 {
+                   event_type: 'form.started',
+                   timestamp: Time.current,
+                   data: Submitters::SerializeForWebhook.call(submitter)
+                 }.to_json,
+                 'Content-Type' => 'application/json',
+                 'User-Agent' => USER_AGENT)
+  end
+end

app/jobs/send_form_viewed_webhook_request_job.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class SendFormViewedWebhookRequestJob < ApplicationJob
+  USER_AGENT = 'DocuSeal.co Webhook'
+
+  def perform(submitter)
+    config = Accounts.load_webhook_configs(submitter.submission.account)
+
+    return if config.blank? || config.value.blank?
+
+    ActiveStorage::Current.url_options = Docuseal.default_url_options
+
+    Faraday.post(config.value,
+                 {
+                   event_type: 'form.viewed',
+                   timestamp: Time.current,
+                   data: Submitters::SerializeForWebhook.call(submitter)
+                 }.to_json,
+                 'Content-Type' => 'application/json',
+                 'User-Agent' => USER_AGENT)
+  end
+end

app/jobs/send_submitter_invitation_email_job.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class SendSubmitterInvitationEmailJob < ApplicationJob
+  def perform(params = {})
+    submitter = Submitter.find(params['submitter_id'])
+
+    SubmitterMailer.invitation_email(submitter, subject: params['subject'], body: params['body']).deliver_now!
+
+    SubmissionEvent.create!(submitter:, event_type: 'send_email')
+
+    submitter.sent_at ||= Time.current
+    submitter.save
+  end
+end

app/mailers/submitter_mailer.rb

@@ -1,58 +1,60 @@
 # frozen_string_literal: true
 
 class SubmitterMailer < ApplicationMailer
-  DEFAULT_MESSAGE = %(You have been invited to submit the "%<name>s" form:)
-
-  def invitation_email(submitter, message: '')
+  def invitation_email(submitter, body: nil, subject: nil)
     @current_account = submitter.submission.template.account
     @submitter = submitter
-    @message = message.presence || format(DEFAULT_MESSAGE, name: submitter.submission.template.name)
+    @body = body.presence
 
     @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
 
     subject =
-      if @email_config
-        ReplaceEmailVariables.call(@email_config.value['subject'], submitter:)
+      if @email_config || subject.present?
+        ReplaceEmailVariables.call(subject.presence || @email_config.value['subject'], submitter:)
       else
         'You have been invited to submit a form'
       end
 
-    mail(to: @submitter.email,
+    mail(to: @submitter.friendly_name,
          from: from_address_for_submitter(submitter),
          subject:,
-         reply_to: submitter.submission.created_by_user&.friendly_name)
+         reply_to: (submitter.submission.created_by_user || submitter.template.author)&.friendly_name)
   end
 
-  def completed_email(submitter, user)
+  def completed_email(submitter, user, bcc: nil)
     @current_account = submitter.submission.template.account
     @submitter = submitter
+    @submission = submitter.submission
     @user = user
 
+    Submissions::EnsureResultGenerated.call(submitter)
+
     @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
 
+    add_completed_email_attachments!(submitter)
+
     subject =
       if @email_config
         ReplaceEmailVariables.call(@email_config.value['subject'], submitter:)
       else
-        %(#{submitter.email} has completed the "#{submitter.submission.template.name}" form)
+        submitters = submitter.submission.submitters.order(:completed_at)
+                              .map { |e| e.name || e.email || e.phone }.join(', ')
+        %(#{submitter.submission.template.name} has been completed by #{submitters})
       end
 
     mail(from: from_address_for_submitter(submitter),
-         to: user.email,
+         to: user.friendly_name,
+         bcc:,
          subject:)
   end
 
-  def documents_copy_email(submitter)
+  def documents_copy_email(submitter, to: nil)
     @current_account = submitter.submission.template.account
     @submitter = submitter
 
     Submissions::EnsureResultGenerated.call(@submitter)
 
-    @documents = Submitters.select_attachments_for_download(submitter)
-
-    @documents.each do |attachment|
-      attachments[attachment.filename.to_s] = attachment.download
-    end
+    @documents = add_completed_email_attachments!(submitter)
 
     @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY)
 
@@ -64,12 +66,26 @@ class SubmitterMailer < ApplicationMailer
       end
 
     mail(from: from_address_for_submitter(submitter),
-         to: submitter.email,
+         to: to || @submitter.friendly_name,
          subject:)
   end
 
   private
 
+  def add_completed_email_attachments!(submitter)
+    documents = Submitters.select_attachments_for_download(submitter)
+
+    documents.each do |attachment|
+      attachments[attachment.filename.to_s] = attachment.download
+    end
+
+    if submitter.submission.audit_trail.present?
+      attachments[submitter.submission.audit_trail.filename.to_s] = submitter.submission.audit_trail.download
+    end
+
+    documents
+  end
+
   def from_address_for_submitter(submitter)
     submitter.submission.created_by_user&.friendly_name || submitter.submission.template.author.friendly_name
   end

app/models/account.rb

@@ -16,6 +16,9 @@ class Account < ApplicationRecord
   has_many :encrypted_configs, dependent: :destroy
   has_many :account_configs, dependent: :destroy
   has_many :templates, dependent: :destroy
+  has_many :template_folders, dependent: :destroy
+  has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },
+          class_name: 'TemplateFolder', dependent: :destroy, inverse_of: :account
   has_many :submissions, through: :templates
   has_many :submitters, through: :submissions
   has_many :active_users, -> { active }, dependent: :destroy,
@@ -23,4 +26,9 @@ class Account < ApplicationRecord
 
   attribute :timezone, :string, default: 'UTC'
   attribute :locale, :string, default: 'en-US'
+
+  def default_template_folder
+    super || build_default_template_folder(name: TemplateFolder::DEFAULT_NAME,
+                                           author_id: users.minimum(:id)).tap(&:save!)
+  end
 end

app/models/account_config.rb

@@ -24,6 +24,9 @@ class AccountConfig < ApplicationRecord
   SUBMITTER_INVITATION_EMAIL_KEY = 'submitter_invitation_email'
   SUBMITTER_COMPLETED_EMAIL_KEY = 'submitter_completed_email'
   SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY = 'submitter_documents_copy_email'
+  BCC_EMAILS = 'bcc_emails'
+  SUBMITTER_REMAILERS = 'submitter_reminders'
+  FORM_COMPLETED_BUTTON_KEY = 'form_completed_button'
 
   DEFAULT_VALUES = {
     SUBMITTER_INVITATION_EMAIL_KEY => {
@@ -36,12 +39,10 @@ class AccountConfig < ApplicationRecord
                 '{{account.name}}'
     },
     SUBMITTER_COMPLETED_EMAIL_KEY => {
-      'subject' => '{{submitter.email}} has completed the "{{template.name}}" form',
+      'subject' => '{{template.name}} has been completed by {{submission.submitters}}',
       'body' => "Hi,\n\n" \
-                "{{submitter.email}} has completed the \"{{template.name}}\" form:\n\n" \
-                "{{submission.link}}\n\n" \
-                "Thanks,\n" \
-                '{{account.name}}'
+                "\"{{template.name}}\" form has been completed by {{submission.submitters}}\n\n" \
+                '{{submission.link}}'
     },
     SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY => {
       'subject' => 'Your copy of documents',

app/models/submission.rb

@@ -7,6 +7,7 @@
 #  id                  :bigint           not null, primary key
 #  deleted_at          :datetime
 #  source              :text             not null
+#  submitters_order    :string           not null
 #  template_fields     :text
 #  template_schema     :text
 #  template_submitters :text
@@ -31,12 +32,20 @@ class Submission < ApplicationRecord
   belongs_to :created_by_user, class_name: 'User', optional: true
 
   has_many :submitters, dependent: :destroy
+  has_many :submission_events, dependent: :destroy
 
   serialize :template_fields, JSON
   serialize :template_schema, JSON
   serialize :template_submitters, JSON
 
   attribute :source, :string, default: 'link'
+  attribute :submitters_order, :string, default: 'random'
+
+  has_one_attached :audit_trail
+
+  has_many :template_schema_documents,
+           ->(e) { where(uuid: (e.template_schema.presence || e.template.schema).pluck('attachment_uuid')) },
+           through: :template, source: :documents_attachments
 
   scope :active, -> { where(deleted_at: nil) }
 
@@ -46,4 +55,9 @@ class Submission < ApplicationRecord
     embed: 'embed',
     link: 'link'
   }, scope: false, prefix: true
+
+  enum :submitters_order, {
+    random: 'random',
+    preserved: 'preserved'
+  }, scope: false, prefix: true
 end

app/models/submission_event.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: submission_events
+#
+#  id              :bigint           not null, primary key
+#  data            :text             not null
+#  event_timestamp :datetime         not null
+#  event_type      :string           not null
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  submission_id   :bigint           not null
+#  submitter_id    :bigint
+#
+# Indexes
+#
+#  index_submission_events_on_submission_id  (submission_id)
+#  index_submission_events_on_submitter_id   (submitter_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (submission_id => submissions.id)
+#  fk_rails_...  (submitter_id => submitters.id)
+#
+class SubmissionEvent < ApplicationRecord
+  belongs_to :submission
+  has_one :account, through: :submission
+  belongs_to :submitter, optional: true
+
+  attribute :data, :string, default: -> { {} }
+  attribute :event_timestamp, :datetime, default: -> { Time.current }
+
+  serialize :data, JSON
+
+  before_validation :set_submission_id, on: :create
+
+  enum :event_type, {
+    send_email: 'send_email',
+    send_reminder_email: 'send_reminder_email',
+    send_sms: 'send_sms',
+    open_email: 'open_email',
+    click_email: 'click_email',
+    click_sms: 'click_sms',
+    phone_verified: 'phone_verified',
+    start_form: 'start_form',
+    view_form: 'view_form',
+    complete_form: 'complete_form'
+  }, scope: false
+
+  private
+
+  def set_submission_id
+    self.submission_id = submitter&.submission_id
+  end
+end

app/models/submitter.rb

@@ -6,9 +6,11 @@
 #
 #  id            :bigint           not null, primary key
 #  completed_at  :datetime
-#  email         :string           not null
+#  email         :string
 #  ip            :string
+#  name          :string
 #  opened_at     :datetime
+#  phone         :string
 #  sent_at       :datetime
 #  slug          :string           not null
 #  ua            :string
@@ -42,6 +44,7 @@ class Submitter < ApplicationRecord
   has_many_attached :attachments
 
   has_many :document_generation_events, dependent: :destroy
+  has_many :submission_events, dependent: :destroy
 
   def status
     if completed_at?
@@ -55,6 +58,14 @@ class Submitter < ApplicationRecord
     end
   end
 
+  def friendly_name
+    if name.present? && email.present? && email.exclude?(',')
+      "#{name} <#{email}>"
+    else
+      email
+    end
+  end
+
   def status_event_at
     completed_at || opened_at || sent_at || created_at
   end

app/models/template.rb

@@ -16,23 +16,29 @@
 #  updated_at :datetime         not null
 #  account_id :bigint           not null
 #  author_id  :bigint           not null
+#  folder_id  :bigint           not null
 #
 # Indexes
 #
 #  index_templates_on_account_id  (account_id)
 #  index_templates_on_author_id   (author_id)
+#  index_templates_on_folder_id   (folder_id)
 #  index_templates_on_slug        (slug) UNIQUE
 #
 # Foreign Keys
 #
 #  fk_rails_...  (account_id => accounts.id)
 #  fk_rails_...  (author_id => users.id)
+#  fk_rails_...  (folder_id => template_folders.id)
 #
 class Template < ApplicationRecord
   DEFAULT_SUBMITTER_NAME = 'First Submitter'
 
   belongs_to :author, class_name: 'User'
   belongs_to :account
+  belongs_to :folder, class_name: 'TemplateFolder'
+
+  before_validation :maybe_set_default_folder, on: :create
 
   attribute :fields, :string, default: -> { [] }
   attribute :schema, :string, default: -> { [] }
@@ -52,4 +58,11 @@ class Template < ApplicationRecord
   has_many :submissions, dependent: :destroy
 
   scope :active, -> { where(deleted_at: nil) }
+  scope :archived, -> { where.not(deleted_at: nil) }
+
+  private
+
+  def maybe_set_default_folder
+    self.folder ||= account.default_template_folder
+  end
 end

app/models/template_folder.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: template_folders
+#
+#  id         :bigint           not null, primary key
+#  deleted_at :datetime
+#  name       :string           not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#  account_id :bigint           not null
+#  author_id  :bigint           not null
+#
+# Indexes
+#
+#  index_template_folders_on_account_id  (account_id)
+#  index_template_folders_on_author_id   (author_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#  fk_rails_...  (author_id => users.id)
+#
+class TemplateFolder < ApplicationRecord
+  DEFAULT_NAME = 'Default'
+
+  belongs_to :author, class_name: 'User'
+  belongs_to :account
+
+  has_many :templates, dependent: :destroy, foreign_key: :folder_id, inverse_of: :folder
+  has_many :active_templates, -> { where(deleted_at: nil) },
+           class_name: 'Template', dependent: :destroy, foreign_key: :folder_id, inverse_of: :folder
+
+  scope :active, -> { where(deleted_at: nil) }
+
+  def default?
+    name == DEFAULT_NAME
+  end
+end

app/models/user.rb

@@ -5,6 +5,7 @@
 # Table name: users
 #
 #  id                     :bigint           not null, primary key
+#  consumed_timestep      :integer
 #  current_sign_in_at     :datetime
 #  current_sign_in_ip     :string
 #  deleted_at             :datetime
@@ -16,6 +17,8 @@
 #  last_sign_in_at        :datetime
 #  last_sign_in_ip        :string
 #  locked_at              :datetime
+#  otp_required_for_login :boolean          default(FALSE), not null
+#  otp_secret             :string
 #  remember_created_at    :datetime
 #  reset_password_sent_at :datetime
 #  reset_password_token   :string
@@ -44,13 +47,14 @@ class User < ApplicationRecord
     ADMIN_ROLE = 'admin'
   ].freeze
 
-  EMAIL_REGEXP = /[^@,\s]+@[^@,\s]+/
+  EMAIL_REGEXP = /[^@;,<>\s]+@[^@;,<>\s]+/
 
   belongs_to :account
   has_one :access_token, dependent: :destroy
   has_many :templates, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
+  has_many :user_configs, dependent: :destroy
 
-  devise :database_authenticatable, :recoverable, :rememberable, :validatable, :trackable
+  devise :two_factor_authenticatable, :recoverable, :rememberable, :validatable, :trackable
   devise :registerable, :omniauthable, omniauth_providers: [:google_oauth2] if Docuseal.multitenant?
 
   attribute :role, :string, default: ADMIN_ROLE

app/models/user_config.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: user_configs
+#
+#  id         :bigint           not null, primary key
+#  key        :string           not null
+#  value      :text             not null
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#  user_id    :bigint           not null
+#
+# Indexes
+#
+#  index_user_configs_on_user_id          (user_id)
+#  index_user_configs_on_user_id_and_key  (user_id,key) UNIQUE
+#
+# Foreign Keys
+#
+#  fk_rails_...  (user_id => users.id)
+#
+class UserConfig < ApplicationRecord
+  SIGNATURE_KEY = 'signature'
+
+  belongs_to :user
+
+  serialize :value, JSON
+end

app/views/accounts/show.html.erb

@@ -21,17 +21,20 @@
           </div>
         </div>
       <% end %>
-      <% unless Docuseal.multitenant? %>
-        <%= f.fields_for @encrypted_config || EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::APP_URL_KEY) do |ff| %>
+      <% encrypted_config = @encrypted_config || EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::APP_URL_KEY) %>
+      <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) %>
+        <%= f.fields_for encrypted_config do |ff| %>
           <div class="form-control">
             <%= ff.label :value, 'App URL', class: 'label' %>
             <%= ff.text_field :value, autocomplete: 'off', class: 'base-input' %>
           </div>
         <% end %>
       <% end %>
-      <div class="form-control pt-2">
-        <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
-      </div>
+      <% if can?(:update, current_account) %>
+        <div class="form-control pt-2">
+          <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
+        </div>
+      <% end %>
     <% end %>
   </div>
   <div class="w-0 md:w-52"></div>

app/views/api_settings/index.html.erb

@@ -12,32 +12,6 @@
       </div>
     </div>
     <div class="space-y-4 mt-4">
-      <div class="collapse collapse-plus bg-base-200 px-1">
-        <input type="checkbox">
-        <div class="collapse-title text-xl font-medium">
-          <div>
-            Request signature, single submitter
-          </div>
-          <div class="mt-1">
-            <div class="badge badge-warning badge-lg">POST</div>
-            <div class="badge badge-primary badge-lg"><%= api_submissions_path %></div>
-          </div>
-        </div>
-        <div class="collapse-content" style="display: inherit">
-          <div class="mockup-code overflow-hidden">
-            <% text = capture do %>curl --location '<%= api_submissions_url %>' \
-       --header 'X-Auth-Token: <%= current_user.access_token.token %>' \
-       --data-raw '{
-           "template_id": <%= current_account.templates.last&.id || 1 %>,
-           "emails":  "<%= current_user.email.sub('@', '+test@') %>, <%= current_user.email.sub('@', '+test2@') %>"
-       }'<% end.to_str %>
-            <span class="top-0 right-0 absolute">
-              <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy', copied_title: 'Copied' %>
-            </span>
-            <pre data-prefix="$"><code class="overflow-hidden w-full"><%= text %></code></pre>
-          </div>
-        </div>
-      </div>
       <div class="collapse collapse-plus bg-base-200 px-1">
         <input type="checkbox">
         <div class="collapse-title text-xl font-medium">
@@ -59,13 +33,14 @@
            {
              "submitters": [
                {
-                 "name": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Submitter' %>",
+                 "name": "John Doe",
+                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Submitter' %>",
                  "email": "<%= current_user.email.sub('@', '+test@') %>",
                  "values": {
                    "Form Text Field Name": "Default Value"
                  }
                },
-               { "name": "Second Submitter", "email": "<%= current_user.email.sub('@', '+test2@') %>" }
+               { "role": "Second Submitter", "email": "<%= current_user.email.sub('@', '+test2@') %>" }
              ]
            }
          ]
@@ -77,6 +52,32 @@
           </div>
         </div>
       </div>
+      <div class="collapse collapse-plus bg-base-200 px-1">
+        <input type="checkbox">
+        <div class="collapse-title text-xl font-medium">
+          <div>
+            Request signature, single submitter
+          </div>
+          <div class="mt-1">
+            <div class="badge badge-warning badge-lg">POST</div>
+            <div class="badge badge-primary badge-lg"><%= api_submissions_emails_path %></div>
+          </div>
+        </div>
+        <div class="collapse-content" style="display: inherit">
+          <div class="mockup-code overflow-hidden">
+            <% text = capture do %>curl --location '<%= api_submissions_emails_url %>' \
+       --header 'X-Auth-Token: <%= current_user.access_token.token %>' \
+       --data-raw '{
+           "template_id": <%= current_account.templates.last&.id || 1 %>,
+           "emails":  "<%= current_user.email.sub('@', '+test@') %>, <%= current_user.email.sub('@', '+test2@') %>"
+       }'<% end.to_str %>
+            <span class="top-0 right-0 absolute">
+              <%= render 'shared/clipboard_copy', icon: 'copy', text:, class: 'btn btn-ghost text-white', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy', copied_title: 'Copied' %>
+            </span>
+            <pre data-prefix="$"><code class="overflow-hidden w-full"><%= text %></code></pre>
+          </div>
+        </div>
+      </div>
       <div class="collapse collapse-plus bg-base-200 px-1">
         <input type="checkbox">
         <div class="collapse-title text-xl font-medium">
@@ -100,5 +101,8 @@
         </div>
       </div>
     </div>
+    <div class="text-center">
+      <%= link_to 'Open Full API Reference', "#{Docuseal::PRODUCT_URL}/docs/api", class: 'btn btn-warning text-base mt-4 px-8', target: '_blank', rel: 'noopener' %>
+    </div>
   </div>
 </div>

app/views/dashboard/index.html.erb

@@ -1,46 +1,83 @@
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
-<% if @templates.any? %>
+<% if @pagy.count > 0 || params[:q].present? || @template_folders.present? %>
   <div class="flex justify-between mb-4 items-center">
-    <h1 class="text-4xl font-bold">Templates</h1>
-    <%= link_to new_template_path, class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
-      <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-      <span class="hidden md:block">Create</span>
-    <% end %>
+    <h1 class="text-4xl font-bold"><span class="hidden md:inline">Document</span> Templates</h1>
+    <div class="flex space-x-2">
+      <% if params[:q].present? || @pagy.pages > 1 || @template_folders.present? %>
+        <%= render 'shared/search_input' %>
+      <% end %>
+      <% if can?(:create, ::Template) %>
+        <%= render 'templates/upload_button' %>
+        <%= link_to new_template_path, class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
+          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+          <span class="hidden md:block">Create</span>
+        <% end %>
+      <% end %>
+    </div>
   </div>
-  <div class="grid gap-4 md:grid-cols-3">
-    <% @templates.each do |template| %>
-      <div class="h-36 relative group">
-        <a href="<%= template_path(template) %>" class="flex h-full flex-col justify-between rounded-2xl pt-6 px-7 w-full bg-base-200 peer">
-          <div class="pb-4 text-xl font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-            <%= template.name %>
-          </div>
-          <div class="pb-6 pt-1 space-y-1">
-            <p class="flex items-center space-x-1 text-xs text-base-content/60">
-              <%= svg_icon('user', class: 'w-4 h-4') %>
-              <span><%= template.author.full_name.presence || template.author.email %></span>
-            </p>
-            <p class="flex items-center space-x-1 text-xs text-base-content/60">
-              <%= svg_icon('calendar', class: 'w-4 h-4') %>
-              <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
-            </p>
-          </div>
-        </a>
-        <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden md:group-hover:block" style="right: 40px">
-          <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-            <%= svg_icon('pencil', class: 'w-4 h-4') %>
-          </a>
-          <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-            <%= svg_icon('copy', class: 'w-4 h-4') %>
-          </a>
-          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
-            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
-            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
-          <% end %>
-        </div>
+  <% view_archived_html = capture do %>
+    <% if current_account.templates.where.not(deleted_at: nil).exists? %>
+      <div>
+        <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
       </div>
     <% end %>
-  </div>
-  <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates' %>
+  <% end %>
+  <% if @template_folders.present? %>
+    <div class="grid gap-4 md:grid-cols-3 <%= 'mb-6' if @templates.present? %>">
+      <%= render partial: 'template_folders/folder', collection: @template_folders, as: :folder %>
+    </div>
+  <% end %>
+  <% if @templates.present? %>
+    <div class="grid gap-4 md:grid-cols-3">
+      <%= render partial: 'templates/template', collection: @templates %>
+    </div>
+  <% end %>
+  <% if params[:q].blank? && @pagy.pages == 1 && ((@template_folders.size < 10 && @templates.size.zero?) || (@template_folders.size < 7 && @templates.size < 4) || (@template_folders.size < 4 && @templates.size < 7)) %>
+    <%= form_for '', url: templates_upload_path, method: :post, class: 'mt-8 block', html: { enctype: 'multipart/form-data' } do %>
+      <button type="submit" class="hidden"></button>
+      <file-dropzone data-submit-on-upload="true" class="w-full">
+        <label for="file_dropzone_input" class="w-full block h-52 relative hover:bg-base-200/30 rounded-xl border border-2 border-base-300 border-dashed">
+          <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+            <div class="flex flex-col items-center">
+              <span data-target="file-dropzone.icon" class="flex flex-col items-center">
+                <span>
+                  <%= svg_icon('cloud_upload', class: 'w-10 h-10') %>
+                </span>
+                <div class="font-medium mb-1">
+                  Upload New Document
+                </div>
+                <div class="text-xs">
+                  <span class="font-medium">Click to upload</span> or drag and drop
+                </div>
+              </span>
+              <span data-target="file-dropzone.loading" class="flex flex-col items-center hidden">
+                <%= svg_icon('loader', class: 'w-10 h-10 animate-spin') %>
+                <div class="font-medium mb-1">
+                  Uploading...
+                </div>
+              </span>
+            </div>
+            <input id="file_dropzone_input" name="files[]" class="hidden" data-action="change:file-dropzone#onSelectFiles" data-target="file-dropzone.input" type="file" accept="image/*, application/pdf<%= ', .docx, .doc, .xlsx, .xls' if Docuseal.multitenant? %>" multiple>
+          </div>
+        </label>
+      </file-dropzone>
+    <% end %>
+  <% end %>
+  <% if @templates.present? || params[:q].blank? %>
+    <% if @pagy.pages > 1 %>
+      <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates', left_additional_html: view_archived_html %>
+    <% else %>
+      <div class="mt-2">
+        <%= view_archived_html %>
+      </div>
+    <% end %>
+  <% elsif params[:q].present? %>
+    <div class="text-center">
+      <div class="mt-16 text-3xl font-semibold">
+        Templates not Found
+      </div>
+    </div>
+  <% end %>
 <% else %>
   <div class="card bg-base-200 h-96 mb-2">
     <div class="card-body text-center">