fix email messages user assoc

Gemfile

@@ -21,7 +21,9 @@ gem 'jwt'
 gem 'lograge'
 gem 'mysql2', require: false
 gem 'oj'
+gem 'omniauth-github'
 gem 'omniauth-google-oauth2'
+gem 'omniauth-microsoft-office365'
 gem 'omniauth-rails_csrf_protection'
 gem 'pagy'
 gem 'pdf-reader'

Gemfile.lock

@@ -246,7 +246,7 @@ GEM
     hashdiff (1.0.1)
     hashery (2.1.2)
     hashie (5.0.0)
-    hexapdf (0.33.0)
+    hexapdf (0.34.1)
       cmdparse (~> 3.0, >= 3.0.3)
       geom2d (~> 0.4, >= 0.4.1)
       openssl (>= 2.2.1)
@@ -328,18 +328,24 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
+    omniauth-github (2.0.1)
+      omniauth (~> 2.0)
+      omniauth-oauth2 (~> 1.8)
     omniauth-google-oauth2 (1.1.1)
       jwt (>= 2.0)
       oauth2 (~> 2.0.6)
       omniauth (~> 2.0)
       omniauth-oauth2 (~> 1.8.0)
+    omniauth-microsoft-office365 (0.0.8)
+      omniauth
+      omniauth-oauth2
     omniauth-oauth2 (1.8.0)
       oauth2 (>= 1.4, < 3)
       omniauth (~> 2.0)
     omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    openssl (3.1.0)
+    openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
     pagy (6.0.4)
@@ -589,7 +595,9 @@ DEPENDENCIES
   lograge
   mysql2
   oj
+  omniauth-github
   omniauth-google-oauth2
+  omniauth-microsoft-office365
   omniauth-rails_csrf_protection
   pagy
   pdf-reader

README.md

@@ -34,10 +34,10 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 
 ## Features
 - [x] PDF form fields builder (WYSIWYG)
-- [x] 10 field types available (Signature, Date, File, Checkbox etc.)
+- [x] 11 field types available (Signature, Date, File, Checkbox etc.)
 - [x] Multiple submitters per document
 - [x] Automated emails via SMTP
-- [x] Files storage on AWS S3, Google Storage, or Azure
+- [x] Files storage on disk or AWS S3, Google Storage, Azure Cloud
 - [x] Automatic PDF eSignature
 - [x] PDF signature verification
 - [x] Users management
@@ -76,7 +76,7 @@ Run the app under a custom domain over https using docker compose (make sure you
 HOST=your-domain-name.com docker-compose up
 ```
 
-## For Companies
+## For Businesses
 ### Integrate seamless document signing into your web or mobile apps with DocuSeal!
 
 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.

app/controllers/account_configs_controller.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class AccountConfigsController < ApplicationController
+  before_action :load_account_config
+  authorize_resource :account_config
+
+  ALLOWED_KEYS = [
+    AccountConfig::ALLOW_TYPED_SIGNATURE,
+    AccountConfig::FORCE_MFA
+  ].freeze
+
+  def create
+    @account_config.update!(account_config_params)
+
+    head :ok
+  end
+
+  private
+
+  def load_account_config
+    return head :not_found unless ALLOWED_KEYS.include?(account_config_params[:key])
+
+    @account_config =
+      AccountConfig.find_or_initialize_by(account: current_account, key: account_config_params[:key])
+  end
+
+  def account_config_params
+    params.required(:account_config).permit!.tap do |attrs|
+      attrs[:value] = attrs[:value] == '1' if attrs[:value].in?(%w[1 0])
+    end
+  end
+end

app/controllers/accounts_controller.rb

@@ -4,6 +4,7 @@ class AccountsController < ApplicationController
   LOCALE_OPTIONS = {
     'en-US' => 'English (United States)',
     'en-GB' => 'English (United Kingdom)',
+    'fr-FR' => 'French (France)',
     'es-ES' => 'Spanish (Spain)',
     'pt-PT' => 'Portuguese (Portugal)',
     'de-DE' => 'German (Germany)'

app/controllers/api/api_base_controller.rb

@@ -25,7 +25,7 @@ module Api
 
     def paginate(relation)
       result = relation.order(id: :desc)
-                       .limit([params[:limit] || DEFAULT_LIMIT, MAX_LIMIT].min)
+                       .limit([params.fetch(:limit, DEFAULT_LIMIT).to_i, MAX_LIMIT].min)
 
       result = result.where('id < ?', params[:after]) if params[:after].present?
       result = result.where('id > ?', params[:before]) if params[:before].present?

app/controllers/api/submissions_controller.rb

@@ -3,7 +3,7 @@
 module Api
   class SubmissionsController < ApiBaseController
     load_and_authorize_resource :template, only: :create
-    load_and_authorize_resource :submission, only: %i[show index]
+    load_and_authorize_resource :submission, only: %i[show index destroy]
 
     before_action only: :create do
       authorize!(:create, Submission)
@@ -13,6 +13,10 @@ module Api
       submissions = Submissions.search(@submissions, params[:q])
       submissions = submissions.where(template_id: params[:template_id]) if params[:template_id].present?
 
+      if params[:template_folder].present?
+        submissions = submissions.joins(template: :folder).where(folder: { name: params[:template_folder] })
+      end
+
       submissions = paginate(submissions.preload(:created_by_user, :template, :submitters,
                                                  audit_trail_attachment: :blob))
 
@@ -50,35 +54,14 @@ module Api
     end
 
     def create
-      is_send_email = !params[:send_email].in?(['false', false])
+      params[:send_email] = true unless params.key?(:send_email)
+      params[:send_sms] = false unless params.key?(:send_sms)
 
-      submissions =
-        if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
-          Submissions.create_from_emails(template: @template,
-                                         user: current_user,
-                                         source: :api,
-                                         mark_as_sent: is_send_email,
-                                         emails:)
-        else
-          submissions_attrs, attachments = normalize_submissions_params!(submissions_params[:submission], @template)
+      submissions = create_submissions(@template, params)
 
-          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)
 
-      Submissions.send_signature_requests(submissions, send_email: is_send_email)
-
-      submitters = submissions.flat_map(&:submitters)
-
-      save_default_value_attachments!(attachments, submitters)
-
-      render json: submitters
+      render json: submissions.flat_map(&:submitters)
     rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
       render json: { error: e.message }, status: :unprocessable_entity
     end
@@ -91,6 +74,35 @@ module Api
 
     private
 
+    def create_submissions(template, params)
+      is_send_email = !params[:send_email].in?(['false', false])
+
+      if (emails = (params[:emails] || params[:email]).presence) && params[:submission].blank?
+        Submissions.create_from_emails(template:,
+                                       user: current_user,
+                                       source: :api,
+                                       mark_as_sent: is_send_email,
+                                       emails:,
+                                       params:)
+      else
+        submissions_attrs, attachments = normalize_submissions_params!(submissions_params, template)
+
+        submissions = Submissions.create_from_submitters(
+          template:,
+          user: current_user,
+          source: :api,
+          mark_as_sent: is_send_email,
+          submitters_order: params[:submitters_order] || params[:order] || 'preserved',
+          submissions_attrs:,
+          params:
+        )
+
+        save_default_value_attachments!(attachments, submissions.flat_map(&:submitters))
+
+        submissions
+      end
+    end
+
     def serialize_params
       {
         only: %i[id source submitters_order created_at updated_at],
@@ -107,11 +119,19 @@ module Api
     end
 
     def submissions_params
-      params.permit(submission: [{
-                      submitters: [[:uuid, :name, :email, :role, :completed, :phone, :application_key,
-                                    { values: {}, readonly_fields: [],
-                                      fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
-                    }])
+      key = params.key?(:submission) ? :submission : :submissions
+
+      params.permit(
+        key => [
+          [:send_email, :send_sms, {
+            message: %i[subject body],
+            submitters: [[:send_email, :send_sms, :uuid, :name, :email, :role,
+                          :completed, :phone, :application_key,
+                          { values: {}, readonly_fields: [], message: %i[subject body],
+                            fields: [%i[name default_value readonly validation_pattern invalid_message]] }]]
+          }]
+        ]
+      ).fetch(key, [])
     end
 
     def normalize_submissions_params!(submissions_params, template)
@@ -128,7 +148,8 @@ module Api
           values, new_attachments =
             Submitters::NormalizeValues.call(template,
                                              default_values,
-                                             submitter[:role] || template.submitters[index]['name'])
+                                             submitter[:role] || template.submitters[index]['name'],
+                                             throw_errors: true)
 
           attachments.push(*new_attachments)
 

app/controllers/api/templates_clone_controller.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Api
+  class TemplatesCloneController < ApiBaseController
+    load_and_authorize_resource :template
+
+    def create
+      authorize!(:manage, @template)
+
+      template = current_account.templates.new(source: :api)
+
+      template.application_key = params[:application_key]
+      template.name = params[:name] || "#{@template.name} (Clone)"
+      template.account = @template.account
+      template.author = current_user
+      template.assign_attributes(@template.slice(:folder_id, :fields, :schema, :submitters))
+
+      if params[:folder_name].present?
+        template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
+      end
+
+      template.save!
+
+      Templates::CloneAttachments.call(template:, original_template: @template)
+
+      render json: template.as_json(serialize_params)
+    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
+  end
+end

app/controllers/api/templates_controller.rb

@@ -9,6 +9,7 @@ module Api
 
       templates = params[:archived] ? templates.archived : templates.active
       templates = templates.where(application_key: params[:application_key]) if params[:application_key].present?
+      templates = templates.joins(:folder).where(folder: { name: params[:folder] }) if params[:folder].present?
 
       templates = paginate(templates.preload(:author, documents_attachments: :blob))
 
@@ -57,7 +58,7 @@ module Api
         schema: [%i[attachment_uuid name]],
         submitters: [%i[name uuid]],
         fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,
-                  { options: [], areas: [%i[x y w h cell_w attachment_uuid page]] }]]
+                  { options: [%i[value uuid]], areas: [%i[x y w h cell_w attachment_uuid option_uuid page]] }]]
       )
     end
   end

app/controllers/application_controller.rb

@@ -44,8 +44,9 @@ class ApplicationController < ActionController::Base
     redirect_to setup_index_path unless User.exists?
   end
 
-  def button_title(title: 'Submit', disabled_with: 'Submitting', icon: nil, icon_disabled: nil)
-    render_to_string(partial: 'shared/button_title', locals: { title:, disabled_with:, icon:, icon_disabled: })
+  def button_title(title: 'Submit', disabled_with: 'Submitting', title_class: '', icon: nil, icon_disabled: nil)
+    render_to_string(partial: 'shared/button_title',
+                     locals: { title:, disabled_with:, title_class:, icon:, icon_disabled: })
   end
 
   def svg_icon(icon_name, class: '')

app/controllers/dashboard_controller.rb

@@ -5,6 +5,7 @@ class DashboardController < ApplicationController
 
   before_action :maybe_redirect_product_url
   before_action :maybe_render_landing
+  before_action :maybe_redirect_mfa_setup
 
   load_and_authorize_resource :template_folder, parent: false
   load_and_authorize_resource :template, parent: false
@@ -62,6 +63,17 @@ class DashboardController < ApplicationController
     redirect_to Docuseal::PRODUCT_URL, allow_other_host: true
   end
 
+  def maybe_redirect_mfa_setup
+    return unless signed_in?
+    return if current_user.otp_required_for_login
+
+    return if !current_user.otp_required_for_login && !AccountConfig.exists?(value: true,
+                                                                             account_id: current_user.account_id,
+                                                                             key: AccountConfig::FORCE_MFA)
+
+    redirect_to mfa_setup_path, notice: 'Setup 2FA to continue'
+  end
+
   def maybe_render_landing
     return if signed_in?
 

app/controllers/errors_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class ErrorsController < ActionController::Base
+  ENTERPRISE_FEATURE_MESSAGE =
+    'This feature is available in Enterprise Edition: https://www.docuseal.co/pricing'
+
+  ENTERPRISE_PATHS = [
+    '/templates/html',
+    '/api/templates/html',
+    '/templates/pdf',
+    '/api/templates/pdf'
+  ].freeze
+
+  def show
+    if request.original_fullpath.in?(ENTERPRISE_PATHS) && error_status_code == 404
+      return render json: { status: 404, message: ENTERPRISE_FEATURE_MESSAGE }, status: :not_found
+    end
+
+    respond_to do |f|
+      f.json do
+        render json: { status: error_status_code }, status: error_status_code
+      end
+
+      f.html { render error_status_code.to_s, status: error_status_code }
+    end
+  end
+
+  private
+
+  def error_status_code
+    @error_status_code ||=
+      ActionDispatch::ExceptionWrapper.new(request.env,
+                                           request.env['action_dispatch.exception']).status_code
+  end
+end

app/controllers/mfa_setup_controller.rb

@@ -5,13 +5,11 @@ class MfaSetupController < ApplicationController
     authorize!(:update, current_user)
   end
 
-  def new
-    current_user.otp_secret ||= User.generate_otp_secret
+  before_action :set_provision_url, only: %i[show new]
 
-    current_user.save!
+  def show; end
 
-    @provision_url = current_user.otp_provisioning_uri(current_user.email, issuer: Docuseal.product_name)
-  end
+  def new; end
 
   def edit; end
 
@@ -26,7 +24,7 @@ class MfaSetupController < ApplicationController
 
       @error_message = 'Code is invalid'
 
-      render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/new'), status: :unprocessable_entity
+      render turbo_stream: turbo_stream.replace(:mfa_form, partial: 'mfa_setup/form'), status: :unprocessable_entity
     end
   end
 
@@ -41,4 +39,16 @@ class MfaSetupController < ApplicationController
       render turbo_stream: turbo_stream.replace(:modal, template: 'mfa_setup/edit'), status: :unprocessable_entity
     end
   end
+
+  private
+
+  def set_provision_url
+    return redirect_to root_path, alert: '2FA has been set up already' if current_user.otp_required_for_login
+
+    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
 end

app/controllers/notifications_settings_controller.rb

@@ -12,7 +12,7 @@ class NotificationsSettingsController < ApplicationController
   def index; end
 
   def create
-    if @account_config.save
+    if @account_config.value.present? ? @account_config.save : @account_config.delete
       redirect_back fallback_location: settings_notifications_path, notice: 'Changes have been saved'
     else
       redirect_back fallback_location: settings_notifications_path, alert: 'Unable to save'

app/controllers/preview_document_page_controller.rb

@@ -23,7 +23,7 @@ class PreviewDocumentPageController < ActionController::API
 
     io = Templates::ProcessDocument.generate_pdf_preview_from_file(attachment, file_path, params[:id].to_i)
 
-    render plain: io.tap(&:rewind).read
+    render plain: io.tap(&:rewind).read, content_type: 'image/jpeg'
   end
 
   def find_or_create_document_tempfile_path(attachment)

app/controllers/start_form_controller.rb

@@ -14,21 +14,20 @@ class StartFormController < ApplicationController
 
   def update
     @submitter = Submitter.where(submission: @template.submissions.where(deleted_at: nil))
+                          .order(id: :desc)
                           .then { |rel| params[:resubmit].present? ? rel.where(completed_at: nil) : rel }
                           .find_or_initialize_by(**submitter_params.compact_blank)
 
     if @submitter.completed_at?
       redirect_to start_form_completed_path(@template.slug, email: submitter_params[:email])
     else
-      @submitter.assign_attributes(
-        uuid: @template.submitters.first['uuid'],
-        ip: request.remote_ip,
-        ua: request.user_agent
-      )
+      if @template.submitters.to_a.size > 1 && @submitter.new_record?
+        @error_message = 'Not found'
 
-      @submitter.submission ||= Submission.new(template: @template,
-                                               template_submitters: @template.submitters,
-                                               source: :link)
+        return render :show
+      end
+
+      assign_submission_attributes(@submitter, @template) if @submitter.new_record?
 
       if @submitter.save
         redirect_to submit_form_path(@submitter.slug)
@@ -46,8 +45,23 @@ class StartFormController < ApplicationController
 
   private
 
+  def assign_submission_attributes(submitter, template)
+    submitter.assign_attributes(
+      uuid: template.submitters.first['uuid'],
+      ip: request.remote_ip,
+      ua: request.user_agent,
+      preferences: { 'send_email' => true }
+    )
+
+    submitter.submission ||= Submission.new(template:,
+                                            template_submitters: template.submitters,
+                                            source: :link)
+
+    submitter
+  end
+
   def submitter_params
-    params.require(:submitter).permit(:email, :phone).tap do |attrs|
+    params.require(:submitter).permit(:email, :phone, :name).tap do |attrs|
       attrs[:email] = Submissions.normalize_email(attrs[:email])
     end
   end

app/controllers/submissions_controller.rb

@@ -34,23 +34,30 @@ class SubmissionsController < ApplicationController
   def create
     authorize!(:create, Submission)
 
+    if params[:is_custom_message] != '1'
+      params.delete(:subject)
+      params.delete(:body)
+    end
+
     submissions =
       if params[:emails].present?
         Submissions.create_from_emails(template: @template,
                                        user: current_user,
                                        source: :invite,
                                        mark_as_sent: params[:send_email] == '1',
-                                       emails: params[:emails])
+                                       emails: params[:emails],
+                                       params: params.merge('send_completed_email' => true))
       else
         Submissions.create_from_submitters(template: @template,
                                            user: current_user,
                                            source: :invite,
                                            submitters_order: params[:preserve_order] == '1' ? 'preserved' : 'random',
                                            mark_as_sent: params[:send_email] == '1',
-                                           submissions_attrs: submissions_params[:submission].to_h.values)
+                                           submissions_attrs: submissions_params[:submission].to_h.values,
+                                           params: params.merge('send_completed_email' => true))
       end
 
-    Submissions.send_signature_requests(submissions, params)
+    Submissions.send_signature_requests(submissions)
 
     redirect_to template_path(@template), notice: 'New recipients have been added'
   end

app/controllers/submissions_preview_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class SubmissionsPreviewController < ApplicationController
+  skip_before_action :authenticate_user!
+  skip_authorization_check
+
+  PRELOAD_ALL_PAGES_AMOUNT = 200
+
+  def show
+    @submission = Submission.find_by!(slug: params[:slug])
+
+    ActiveRecord::Associations::Preloader.new(
+      records: [@submission],
+      associations: [:template, { template_schema_documents: :blob }]
+    ).call
+
+    total_pages =
+      @submission.template_schema_documents.sum { |e| e.metadata.dig('pdf', 'number_of_pages').to_i }
+
+    if total_pages < PRELOAD_ALL_PAGES_AMOUNT
+      ActiveRecord::Associations::Preloader.new(
+        records: @submission.template_schema_documents,
+        associations: [:blob, { preview_images_attachments: :blob }]
+      ).call
+    end
+
+    render 'submissions/show', layout: 'plain'
+  end
+end

app/controllers/submit_form_controller.rb

@@ -38,6 +38,10 @@ class SubmitFormController < ApplicationController
   def update
     submitter = Submitter.find_by!(slug: params[:slug])
 
+    if submitter.completed_at?
+      return render json: { error: 'Form has been completed already.' }, status: :unprocessable_entity
+    end
+
     Submitters::SubmitValues.call(submitter, params, request)
 
     head :ok

app/controllers/submitters_send_email_controller.rb

@@ -4,6 +4,13 @@ class SubmittersSendEmailController < ApplicationController
   load_and_authorize_resource :submitter, id_param: :submitter_slug, find_by: :slug
 
   def create
+    if Docuseal.multitenant? && SubmissionEvent.exists?(submitter: @submitter,
+                                                        event_type: 'send_email',
+                                                        created_at: 24.hours.ago..Time.current)
+      return redirect_back(fallback_location: submission_path(@submitter.submission),
+                           alert: 'Email has been sent already.')
+    end
+
     SubmitterMailer.invitation_email(@submitter).deliver_later!
 
     SubmissionEvent.create!(submitter: @submitter, event_type: 'send_email')

app/controllers/templates_controller.rb

@@ -58,9 +58,11 @@ class TemplatesController < ApplicationController
 
   def destroy
     notice =
-      if !Docuseal.multitenant? && params[:permanently].present?
+      if params[:permanently].present?
         @template.destroy!
 
+        Rollbar.info("Remove template: #{@template.id}") if defined?(Rollbar)
+
         'Template has been removed.'
       else
         @template.update!(deleted_at: Time.current)

app/controllers/templates_uploads_controller.rb

@@ -35,7 +35,7 @@ class TemplatesUploadsController < ApplicationController
   def create_file_params_from_url
     tempfile = Tempfile.new
     tempfile.binmode
-    tempfile.write(conn.get(params[:url]).body)
+    tempfile.write(conn.get(Addressable::URI.parse(params[:url]).display_uri.to_s).body)
     tempfile.rewind
 
     file = ActionDispatch::Http::UploadedFile.new(

app/controllers/timestamp_server_controller.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class TimestampServerController < ApplicationController
+  before_action :build_encrypted_config
+  authorize_resource :encrypted_config
+
+  def create
+    return head :not_found if Docuseal.multitenant?
+
+    test_timeserver_url(@encrypted_config.value) if @encrypted_config.value.present?
+
+    if @encrypted_config.value.present? ? @encrypted_config.save : @encrypted_config.delete
+      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
+  rescue HexaPDF::Error, SocketError, Submissions::TimestampHandler::TimestampError, OpenSSL::Timestamp::TimestampError
+    redirect_back fallback_location: settings_notifications_path, alert: 'Invalid Timeserver'
+  end
+
+  private
+
+  def test_timeserver_url(url)
+    pdf = HexaPDF::Document.new
+    pdf.pages.add
+
+    pkcs = Accounts.load_signing_pkcs(current_account)
+
+    pdf.sign(StringIO.new,
+             reason: 'Test',
+             certificate: pkcs.certificate,
+             key: pkcs.key,
+             certificate_chain: pkcs.ca_certs || [],
+             timestamp_handler: Submissions::TimestampHandler.new(tsa_url: url))
+  end
+
+  def load_encrypted_config
+    @encrypted_config
+  end
+
+  def build_encrypted_config
+    @encrypted_config =
+      EncryptedConfig.find_or_initialize_by(account: current_account,
+                                            key: EncryptedConfig::TIMESTAMP_SERVER_URL_KEY)
+
+    @encrypted_config.assign_attributes(encrypted_config_params)
+  end
+
+  def encrypted_config_params
+    params.require(:encrypted_config).permit(:value)
+  end
+end

app/controllers/webhook_settings_controller.rb

@@ -7,7 +7,9 @@ class WebhookSettingsController < ApplicationController
   def show; end
 
   def create
-    @encrypted_config.update!(encrypted_config_params)
+    @encrypted_config.assign_attributes(encrypted_config_params)
+
+    @encrypted_config.value.present? ? @encrypted_config.save! : @encrypted_config.delete
 
     redirect_back(fallback_location: settings_webhooks_path, notice: 'Webhook URL has been saved.')
   end

app/javascript/application.js

@@ -79,6 +79,8 @@ window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
+    this.appElem.classList.add('md:h-screen')
+
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),
       backgroundColor: '#faf7f5',

app/javascript/elements/set_timezone.js

@@ -1,7 +1,21 @@
 export default class extends HTMLElement {
   connectedCallback () {
     if (this.dataset.inputId) {
-      document.getElementById(this.dataset.inputId).value = Intl.DateTimeFormat().resolvedOptions().timeZone
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
+      if (this.dataset.params === 'true') {
+        const params = new URLSearchParams(this.input.value)
+
+        params.set('timezone', timezone)
+
+        this.input.value = params.toString()
+      } else {
+        this.input.value = timezone
+      }
     }
   }
+
+  get input () {
+    return document.getElementById(this.dataset.inputId)
+  }
 }

app/javascript/form.js

@@ -17,6 +17,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
       withConfetti: true,
+      withTypedSignature: this.dataset.withTypedSignature !== 'false',
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton),
       attachments: reactive(JSON.parse(this.dataset.attachments)),

app/javascript/submission_form/area.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex absolute text-[1.5vw] lg:text-base"
+    class="flex absolute lg:text-base"
     :style="computedStyle"
-    :class="{ 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
+    :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'bg-red-100 border cursor-pointer ': submittable, 'border-red-100': !isActive && submittable, 'bg-opacity-70': !isActive && !isValueSet && submittable, 'border-red-500 border-dashed z-10': isActive && submittable, 'bg-opacity-30': (isActive || isValueSet) && submittable }"
   >
     <div
-      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable"
+      v-if="!isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
       class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
     >
       <span
@@ -21,7 +21,7 @@
       </span>
     </div>
     <div
-      v-if="isActive && withLabel"
+      v-if="isActive && withLabel && !area.option_uuid"
       class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
     >
       {{ field.name || fieldNames[field.type] }}
@@ -87,6 +87,44 @@
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
     </div>
+    <div
+      v-else-if="field.type === 'radio' && area.option_uuid"
+      class="w-full p-[0.2vw] flex items-center justify-center"
+    >
+      <input
+        v-if="submittable"
+        type="radio"
+        :value="false"
+        class="aspect-square base-radio"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+        :checked="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        @click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+      >
+      <IconCheck
+        v-else-if="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        class="aspect-square"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+      />
+    </div>
+    <div
+      v-else-if="field.type === 'multiple' && area.option_uuid"
+      class="w-full p-[0.2vw] flex items-center justify-center"
+    >
+      <input
+        v-if="submittable"
+        type="checkbox"
+        :value="false"
+        class="aspect-square base-checkbox"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+        :checked="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        @change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+      >
+      <IconCheck
+        v-else-if="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        class="aspect-square"
+        :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+      />
+    </div>
     <div
       v-else-if="field.type === 'cells'"
       class="w-full flex items-center"
@@ -102,6 +140,7 @@
     </div>
     <div
       v-else
+      ref="textContainer"
       class="flex items-center px-0.5"
     >
       <span v-if="Array.isArray(modelValue)">
@@ -173,6 +212,11 @@ export default {
     }
   },
   emits: ['update:model-value'],
+  data () {
+    return {
+      textOverflowChars: 0
+    }
+  },
   computed: {
     fieldNames () {
       return {
@@ -251,6 +295,37 @@ export default {
         height: h * 100 + '%'
       }
     }
+  },
+  watch: {
+    modelValue () {
+      if (this.field.type === 'text' && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.modelValue.length)) {
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+      }
+    }
+  },
+  mounted () {
+    if (this.field.type === 'text' && this.$refs.textContainer) {
+      this.$nextTick(() => {
+        this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
+      })
+    }
+  },
+  methods: {
+    updateMultipleSelectValue (value) {
+      if (this.modelValue?.includes(value)) {
+        const newValue = [...this.modelValue]
+
+        newValue.splice(newValue.indexOf(value), 1)
+
+        this.$emit('update:model-value', newValue)
+      } else {
+        const newValue = this.modelValue ? [...this.modelValue] : []
+
+        newValue.push(value)
+
+        this.$emit('update:model-value', newValue)
+      }
+    }
   }
 }
 </script>

app/javascript/submission_form/attachment_step.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div v-if="modelValue.length">
+    <div v-if="value.length">
       <div
-        v-for="(val, index) in modelValue"
+        v-for="(val, index) in value"
         :key="index"
         class="flex mb-2"
       >
@@ -26,10 +26,7 @@
             {{ attachmentsIndex[val].filename }}
           </span>
         </a>
-        <button
-          v-if="modelValue"
-          @click.prevent="removeAttachment(val)"
-        >
+        <button @click.prevent="removeAttachment(val)">
           <IconTrashX
             :width="18"
             :heigh="19"
@@ -91,18 +88,28 @@ export default {
     }
   },
   emits: ['attached', 'update:model-value'],
+  computed: {
+    value: {
+      set (value) {
+        this.$emit('update:model-value', this.modelValue || [])
+      },
+      get () {
+        return this.modelValue || []
+      }
+    }
+  },
   methods: {
     removeAttachment (uuid) {
-      this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
+      this.value.splice(this.value.indexOf(uuid), 1)
 
-      this.$emit('update:model-value', this.modelValue)
+      this.$emit('update:model-value', this.value)
     },
     onUpload (attachments) {
       attachments.forEach((attachment) => {
         this.$emit('attached', attachment)
       })
 
-      this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
+      this.$emit('update:model-value', [...this.value, ...attachments.map(a => a.uuid)])
     }
   }
 }

app/javascript/submission_form/form.vue

@@ -99,12 +99,12 @@
                 {{ t('select_your_option') }}
               </option>
               <option
-                v-for="(option, index) in currentField.options"
-                :key="index"
-                :selected="values[currentField.uuid] == option"
-                :value="option"
+                v-for="option in currentField.options"
+                :key="option.uuid"
+                :selected="values[currentField.uuid] == option.value"
+                :value="option.value"
               >
-                {{ option }}
+                {{ option.value }}
               </option>
             </select>
           </div>
@@ -119,24 +119,24 @@
             <div class="flex w-full">
               <div class="space-y-3.5 mx-auto">
                 <div
-                  v-for="(option, index) in currentField.options"
-                  :key="index"
+                  v-for="option in currentField.options"
+                  :key="option.uuid"
                 >
                   <label
-                    :for="currentField.uuid + option"
+                    :for="option.uuid"
                     class="flex items-center space-x-3"
                   >
                     <input
-                      :id="currentField.uuid + option"
+                      :id="option.uuid"
                       v-model="values[currentField.uuid]"
                       type="radio"
                       class="base-radio !h-7 !w-7"
                       :name="`values[${currentField.uuid}]`"
-                      :value="option"
+                      :value="option.value"
                       :required="currentField.required"
                     >
                     <span class="text-xl">
-                      {{ option }}
+                      {{ option.value }}
                     </span>
                   </label>
                 </div>
@@ -223,6 +223,7 @@
             :field="currentField"
             :previous-value="previousSignatureValue"
             :is-direct-upload="isDirectUpload"
+            :with-typed-signature="withTypedSignature"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
             @attached="attachments.push($event)"
@@ -386,6 +387,11 @@ export default {
       required: false,
       default: false
     },
+    withTypedSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     baseUrl: {
       type: String,
       required: false,
@@ -641,12 +647,20 @@ export default {
       })
     },
     saveStep (formData) {
+      const currentFieldUuid = this.currentField.uuid
+
       if (this.isCompleted) {
         return Promise.resolve({})
       } else {
         return fetch(this.baseUrl + this.submitPath, {
           method: 'POST',
           body: formData || new FormData(this.$refs.form)
+        }).then((response) => {
+          if (response.status === 200) {
+            this.submittedValues[currentFieldUuid] = this.values[currentFieldUuid]
+          }
+
+          return response
         })
       }
     },
@@ -678,8 +692,6 @@ export default {
             return Promise.reject(new Error(data.error))
           }
 
-          this.submittedValues[this.currentField.uuid] = this.values[this.currentField.uuid]
-
           if (isLastStep) {
             this.isSecondWalkthrough = true
           }

app/javascript/submission_form/i18n.js

@@ -32,6 +32,11 @@ const en = {
   please_fill_all_required_fields: 'Please fill all required fields',
   set_today: 'Set Today',
   toggle_multiline_text: 'Toggle Multiline Text',
+  draw_signature: 'Draw signature',
+  type_initial: 'Type initials',
+  draw: 'Draw',
+  type: 'Type',
+  type_text: 'Type text',
   date: 'Date',
   email_has_been_sent: 'Email has been sent'
 }
@@ -71,6 +76,11 @@ const es = {
   set_today: 'Establecer Hoy',
   date: 'Fecha',
   toggle_multiline_text: 'Alternar Texto Multilínea',
+  draw_signature: 'Dibujar firma',
+  type_initial: 'Escribir iniciales',
+  draw: 'Dibujar',
+  type: 'Escribir',
+  type_text: 'Escribir texto',
   email_has_been_sent: 'El correo electrónico ha sido enviado'
 }
 
@@ -108,6 +118,11 @@ const it = {
   please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
   set_today: 'Imposta Oggi',
   date: 'Data',
+  draw_signature: 'Disegna firma',
+  type_initial: 'Inserisci iniziali',
+  draw: 'Disegna',
+  type: 'Inserisci',
+  type_text: 'Inserisci testo',
   toggle_multiline_text: 'Attiva Testo Multilinea',
   email_has_been_sent: "L'email è stata inviata"
 }
@@ -146,6 +161,11 @@ const de = {
   please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
   set_today: 'Heute einstellen',
   date: 'Datum',
+  draw_signature: 'Unterschrift zeichnen',
+  type_initial: 'Initialen eingeben',
+  draw: 'Zeichnen',
+  type: 'Eingeben',
+  type_text: 'Text eingeben',
   toggle_multiline_text: 'Mehrzeiligen Text umschalten',
   email_has_been_sent: 'Die E-Mail wurde gesendet'
 }
@@ -184,6 +204,11 @@ const fr = {
   please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
   set_today: "Définir Aujourd'hui",
   date: 'Date',
+  draw_signature: 'Dessiner une signature',
+  type_initial: 'Saisir les initiales',
+  draw: 'Dessiner',
+  type: 'Saisir',
+  type_text: 'Saisir du texte',
   toggle_multiline_text: 'Basculer le Texte Multiligne',
   email_has_been_sent: "L'email a été envoyé"
 }
@@ -222,6 +247,11 @@ const pl = {
   please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
   set_today: 'Ustaw Dziś',
   date: 'Data',
+  draw_signature: 'Rysuj podpis',
+  type_initial: 'Wprowadź inicjały',
+  draw: 'Rysuj',
+  type: 'Wprowadź',
+  type_text: 'Wprowadź tekst',
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany'
 }
@@ -260,6 +290,11 @@ const uk = {
   please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
   set_today: 'Задати Сьогодні',
   date: 'Дата',
+  draw_signature: 'Намалюйте підпис',
+  type_initial: 'Введіть ініціали',
+  draw: 'Підпис',
+  type: 'Текст',
+  type_text: 'Введіть текст',
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений'
 }
@@ -298,6 +333,11 @@ const cs = {
   please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
   set_today: 'Nastavit Dnes',
   date: 'Datum',
+  draw_signature: 'Nakreslit podpis',
+  type_initial: 'Zadat iniciály',
+  draw: 'Kreslit',
+  type: 'Zadat',
+  type_text: 'Zadat text',
   toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán'
 }
@@ -336,6 +376,11 @@ const pt = {
   please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
   set_today: 'Definir Hoje',
   date: 'Data',
+  draw_signature: 'Desenhar assinatura',
+  type_initial: 'Inserir iniciais',
+  draw: 'Desenhar',
+  type: 'Inserir',
+  type_text: 'Inserir texto',
   toggle_multiline_text: 'Alternar Texto Multilinha',
   email_has_been_sent: 'Email enviado'
 }

app/javascript/submission_form/initials_step.vue

@@ -6,23 +6,43 @@
       >{{ field.name || t('initials') }}</label>
       <div class="space-x-2 flex">
         <span
+          v-if="isDrawInitials"
+          class="tooltip"
+          :data-tip="t('type_initials')"
+        >
+          <a
+            id="type_text_button"
+            href="#"
+            class="btn btn-outline font-medium btn-sm"
+            @click.prevent="toggleTextInput"
+          >
+            <IconTextSize :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('type') }}
+            </span>
+          </a>
+        </span>
+        <span
+          v-else
           class="tooltip"
           :data-tip="t('draw_initials')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-sm btn-circle"
-            :class="{ 'btn-neutral': isDrawInitials, 'btn-outline': !isDrawInitials }"
+            class="btn btn-outline font-medium btn-sm"
             @click.prevent="toggleTextInput"
           >
             <IconSignature :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('draw') }}
+            </span>
           </a>
         </span>
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -31,7 +51,7 @@
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn font-medium btn-outline btn-sm"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -63,7 +83,7 @@
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded"
+      class="bg-white border border-base-300 rounded-2xl"
     />
     <input
       v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
@@ -81,13 +101,14 @@
 
 <script>
 import { cropCanvasAndExportToPNG } from './crop_canvas'
-import { IconReload, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import SignaturePad from 'signature_pad'
 
 export default {
   name: 'InitialsStep',
   components: {
     IconReload,
+    IconTextSize,
     IconSignature,
     IconArrowsDiagonalMinimize2
   },

app/javascript/submission_form/multi_select_step.vue

@@ -7,25 +7,25 @@
   <div class="flex w-full">
     <div class="space-y-3.5 mx-auto">
       <div
-        v-for="(option, index) in field.options"
-        :key="index"
+        v-for="option in field.options"
+        :key="option.uuid"
       >
         <label
-          :for="field.uuid + option"
+          :for="option.uuid"
           class="flex items-center space-x-3"
         >
           <input
-            :id="field.uuid + option"
+            :id="option.uuid"
             :ref="setInputRef"
             type="checkbox"
             :name="`values[${field.uuid}][]`"
-            :value="option"
+            :value="option.value"
             class="base-checkbox !h-7 !w-7"
-            :checked="(modelValue || []).includes(option)"
+            :checked="(modelValue || []).includes(option.value)"
             @change="onChange"
           >
           <span class="text-xl">
-            {{ option }}
+            {{ option.value }}
           </span>
         </label>
       </div>

app/javascript/submission_form/signature_step.vue

@@ -6,17 +6,37 @@
       >{{ field.name || t('signature') }}</label>
       <div class="space-x-2 flex">
         <span
+          v-if="isTextSignature"
           class="tooltip"
-          data-tip="Type text"
+          :data-tip="t('draw_signature')"
         >
           <a
             id="type_text_button"
             href="#"
-            class="btn btn-sm btn-circle"
-            :class="{ 'btn-neutral': isTextSignature, 'btn-outline': !isTextSignature }"
+            class="btn btn-outline btn-sm font-medium"
+            @click.prevent="toggleTextInput"
+          >
+            <IconSignature :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('draw') }}
+            </span>
+          </a>
+        </span>
+        <span
+          v-else-if="withTypedSignature"
+          class="tooltip"
+          :data-tip="t('type_text')"
+        >
+          <a
+            id="type_text_button"
+            href="#"
+            class="btn btn-outline btn-sm font-medium"
             @click.prevent="toggleTextInput"
           >
             <IconTextSize :width="16" />
+            <span class="hidden sm:inline">
+              {{ t('type') }}
+            </span>
           </a>
         </span>
         <span
@@ -24,7 +44,7 @@
           data-tip="Take photo"
         >
           <label
-            class="btn btn-outline btn-sm btn-circle"
+            class="btn btn-outline btn-sm font-medium"
           >
             <IconCamera :width="16" />
             <input
@@ -33,12 +53,15 @@
               accept="image/*"
               @change="drawImage"
             >
+            <span class="hidden sm:inline">
+              {{ t('upload') }}
+            </span>
           </label>
         </span>
         <a
           v-if="modelValue || computedPreviousValue"
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="remove"
         >
           <IconReload :width="16" />
@@ -47,7 +70,7 @@
         <a
           v-else
           href="#"
-          class="btn btn-outline btn-sm"
+          class="btn btn-outline btn-sm font-medium"
           @click.prevent="clear"
         >
           <IconReload :width="16" />
@@ -79,7 +102,8 @@
     <canvas
       v-show="!modelValue && !computedPreviousValue"
       ref="canvas"
-      class="bg-white border border-base-300 rounded"
+      style="padding: 1px; 0"
+      class="bg-white border border-base-300 rounded-2xl"
     />
     <input
       v-if="isTextSignature"
@@ -95,7 +119,7 @@
 </template>
 
 <script>
-import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
+import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 
@@ -107,6 +131,7 @@ export default {
     IconReload,
     IconCamera,
     IconTextSize,
+    IconSignature,
     IconArrowsDiagonalMinimize2
   },
   inject: ['baseUrl', 't'],
@@ -124,6 +149,11 @@ export default {
       required: true,
       default: false
     },
+    withTypedSignature: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     attachmentsIndex: {
       type: Object,
       required: false,

app/javascript/submission_form/text_step.vue

@@ -15,6 +15,7 @@
       v-if="!isTextArea"
       :id="field.uuid"
       v-model="text"
+      :maxlength="cellsMaxLegth"
       class="base-input !text-2xl w-full !pr-11 -mr-10"
       :required="field.required"
       :pattern="field.validation?.pattern"
@@ -38,7 +39,7 @@
       @focus="$emit('focus')"
     />
     <div
-      v-if="!isTextArea"
+      v-if="!isTextArea && field.type !== 'cells'"
       class="tooltip"
       :data-tip="t('toggle_multiline_text')"
     >
@@ -80,6 +81,19 @@ export default {
     }
   },
   computed: {
+    cellsMaxLegth () {
+      if (this.field.type === 'cells') {
+        const area = this.field.areas?.[0]
+
+        if (area) {
+          return parseInt(area.w / area.cell_w) + 1
+        } else {
+          return null
+        }
+      } else {
+        return null
+      }
+    },
     text: {
       set (value) {
         this.$emit('update:model-value', value)

app/javascript/template_builder/area.vue

@@ -42,7 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
@@ -51,7 +51,7 @@
       <FieldType
         v-model="field.type"
         :button-width="27"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
@@ -60,15 +60,15 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        :contenteditable="editable"
+        :contenteditable="editable && !defaultField"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
       <div
-        v-if="isNameFocus && field.type !== 'checkbox'"
+        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
         class="flex items-center ml-1.5"
       >
         <input
@@ -104,9 +104,12 @@
       >
         <div
           v-if="field?.default_value"
-          class="text-[1.5vw] lg:text-base"
+          :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
-          <div class="flex items-center px-0.5">
+          <div
+            ref="textContainer"
+            class="flex items-center px-0.5"
+          >
             <span class="whitespace-pre-wrap">{{ field.default_value }}</span>
           </div>
         </div>
@@ -137,6 +140,7 @@ import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
 import { IconX } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
 
 export default {
   name: 'FieldArea',
@@ -156,6 +160,11 @@ export default {
       required: false,
       default: false
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -173,6 +182,7 @@ export default {
       isResize: false,
       isDragged: false,
       isNameFocus: false,
+      textOverflowChars: 0,
       dragFrom: { x: 0, y: 0 }
     }
   },
@@ -180,6 +190,13 @@ export default {
     defaultName: Field.computed.defaultName,
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    optionIndexText () {
+      if (this.area.option_uuid && this.field.options) {
+        return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
+      } else {
+        return ''
+      }
+    },
     cells () {
       const cells = []
 
@@ -241,6 +258,20 @@ export default {
       }
     }
   },
+  watch: {
+    'field.default_value' () {
+      if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value.length)) {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+      }
+    }
+  },
+  mounted () {
+    if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
+      this.$nextTick(() => {
+        this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
+      })
+    }
+  },
   methods: {
     onNameFocus (e) {
       this.selectedAreaRef.value = this.area
@@ -285,7 +316,7 @@ export default {
       }
 
       if (['select', 'multiple', 'radio'].includes(this.field.type)) {
-        this.field.options ||= ['']
+        this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
       (this.field.areas || []).forEach((area) => {

app/javascript/template_builder/builder.vue

@@ -4,10 +4,11 @@
     class="mx-auto pl-3 md:pl-4 h-full"
   >
     <div
+      v-if="$slots.buttons || withTitle"
       class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
       :style="{ backgroundColor }"
     >
-      <div class="flex space-x-3">
+      <div class="flex items-center space-x-3">
         <a
           v-if="withLogo"
           href="/"
@@ -15,9 +16,10 @@
           <Logo />
         </a>
         <Contenteditable
+          v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
-          class="text-3xl font-semibold focus:text-clip"
+          class="text-xl md:text-3xl font-semibold focus:text-clip"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
         />
@@ -28,10 +30,25 @@
           name="buttons"
         />
         <template v-else>
+          <a
+            :href="template.submitters.length > 1 ? `/templates/${template.id}/submissions/new?selfsign=true` : `/d/${template.slug}`"
+            class="btn btn-primary btn-ghost text-base hidden md:flex"
+            :target="template.submitters.length > 1 ? '' : '_blank'"
+            :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
+            @click="maybeShowEmptyTemplateAlert"
+          >
+            <IconWritingSign
+              width="20"
+              class="inline"
+            />
+            <span class="hidden md:inline">
+              Sign Yourself
+            </span>
+          </a>
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary text-base"
+            class="white-button md:!px-6"
             @click="maybeShowEmptyTemplateAlert"
           >
             <IconUsersPlus
@@ -39,7 +56,7 @@
               class="inline"
             />
             <span class="hidden md:inline">
-              Recipients
+              Send
             </span>
           </a>
           <button
@@ -64,7 +81,10 @@
         </template>
       </div>
     </div>
-    <div class="flex md:max-h-[calc(100vh-60px)]">
+    <div
+      class="flex"
+      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
+    >
       <div
         ref="previews"
         :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
@@ -77,6 +97,7 @@
           :item="item"
           :document="sortedDocuments[index]"
           :accept-file-types="acceptFileTypes"
+          :with-replace-button="withUploadButton"
           :editable="editable"
           :template="template"
           :is-direct-upload="isDirectUpload"
@@ -89,10 +110,10 @@
         />
         <div
           class="sticky bottom-0 py-2"
-          :class="{ 'bg-base-100': withStickySubmitters }"
+          :style="withStickySubmitters ? { backgroundColor } : {}"
         >
           <Upload
-            v-if="sortedDocuments.length && editable"
+            v-if="sortedDocuments.length && editable && withUploadButton"
             :accept-file-types="acceptFileTypes"
             :template-id="template.id"
             :is-direct-upload="isDirectUpload"
@@ -106,7 +127,7 @@
           class="pr-3.5 pl-0.5"
         >
           <Dropzone
-            v-if="!sortedDocuments.length"
+            v-if="!sortedDocuments.length && withUploadButton"
             :template-id="template.id"
             :accept-file-types="acceptFileTypes"
             :is-direct-upload="isDirectUpload"
@@ -122,9 +143,11 @@
                 :areas-index="fieldAreasIndex[document.uuid]"
                 :selected-submitter="selectedSubmitter"
                 :document="document"
-                :is-drag="!!dragFieldType"
+                :is-drag="!!dragField"
+                :default-fields="defaultFields"
                 :draw-field="drawField"
                 :editable="editable"
+                :base-url="baseUrl"
                 @draw="onDraw"
                 @drop-field="onDropfield"
                 @remove-area="removeArea"
@@ -133,6 +156,7 @@
                 v-if="isBreakpointLg && editable"
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
+                :with-replace-button="withUploadButton"
                 :document="document"
                 :template="template"
                 :is-direct-upload="isDirectUpload"
@@ -149,6 +173,7 @@
               class="pb-4"
             >
               <Upload
+                v-if="withUploadButton"
                 :template-id="template.id"
                 :is-direct-upload="isDirectUpload"
                 @success="updateFromUpload"
@@ -156,32 +181,17 @@
             </div>
           </template>
         </div>
-        <span
-          v-if="drawField"
-          class="fixed text-center w-full left-1/2 bottom-0 transform -translate-x-1/2"
-        >
-          <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>
-            <a
-              href="#"
-              class="link block text-center"
-              @click.prevent="drawField = null"
-            >
-              Cancel
-            </a>
-          </span>
-        </span>
+        <MobileDrawField
+          v-if="drawField && isBreakpointLg"
+          :draw-field="drawField"
+          :fields="template.fields"
+          :submitters="template.submitters"
+          :selected-submitter="selectedSubmitter"
+          class="md:hidden"
+          :editable="editable"
+          @cancel="[drawField = null, drawOption = null]"
+          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
+        />
         <FieldType
           v-if="sortedDocuments.length && !drawField && editable"
           class="dropdown-top dropdown-end fixed bottom-4 right-4 z-10 md:hidden"
@@ -211,7 +221,8 @@
       >
         <div
           v-if="drawField"
-          class="sticky inset-0 bg-base-100 h-full"
+          class="sticky inset-0 h-full"
+          :style="{ backgroundColor }"
         >
           <div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
             <p>
@@ -220,7 +231,7 @@
             <p>
               <button
                 class="base-button"
-                @click="drawField = null"
+                @click="[drawField = null, drawOption = null]"
               >
                 Cancel
               </button>
@@ -233,12 +244,13 @@
             :fields="template.fields"
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
+            :default-fields="defaultFields"
             :with-sticky-submitters="withStickySubmitters"
             :editable="editable"
-            @set-draw="drawField = $event"
-            @set-drag="dragFieldType = $event"
+            @set-draw="[drawField = $event.field, drawOption = $event.option]"
+            @set-drag="dragField = $event"
             @change-submitter="selectedSubmitter = $event"
-            @drag-end="dragFieldType = null"
+            @drag-end="dragField = null"
             @scroll-to-area="scrollToArea"
           />
         </div>
@@ -251,13 +263,14 @@
 import Upload from './upload'
 import Dropzone from './dropzone'
 import Fields from './fields'
+import MobileDrawField from './mobile_draw_field'
 import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import FieldType from './field_type'
-import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 
@@ -267,9 +280,11 @@ export default {
     Upload,
     Document,
     Fields,
+    MobileDrawField,
     IconPlus,
     FieldType,
     IconX,
+    IconWritingSign,
     Logo,
     Dropzone,
     DocumentPreview,
@@ -309,6 +324,16 @@ export default {
       required: false,
       default: true
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    defaultSubmitters: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -329,6 +354,16 @@ export default {
       required: false,
       default: true
     },
+    withUploadButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withPhone: {
       type: Boolean,
       required: false,
@@ -347,7 +382,8 @@ export default {
       isSaving: false,
       selectedSubmitter: null,
       drawField: null,
-      dragFieldType: null
+      drawOption: null,
+      dragField: null
     }
   },
   computed: {
@@ -379,6 +415,13 @@ export default {
     }
   },
   created () {
+    this.defaultSubmitters.forEach((name, index) => {
+      const submitter = (this.template.submitters[index] ||= {})
+
+      submitter.name = name
+      submitter.uuid ||= v4()
+    })
+
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
@@ -415,10 +458,11 @@ export default {
       }
 
       if (['select', 'multiple', 'radio'].includes(type)) {
-        field.options = ['']
+        field.options = [{ value: '', uuid: v4() }]
       }
 
       this.drawField = field
+      this.drawOption = null
     },
     undo () {
       if (this.undoStack.length > 1) {
@@ -468,10 +512,11 @@ export default {
     onKeyUp (e) {
       if (e.code === 'Escape') {
         this.drawField = null
+        this.drawOption = null
         this.selectedAreaRef.value = null
       }
 
-      if (['Backspace', 'Delete'].includes(e.key) && this.selectedAreaRef.value && document.activeElement === document.body) {
+      if (this.editable && ['Backspace', 'Delete'].includes(e.key) && this.selectedAreaRef.value && document.activeElement === document.body) {
         this.removeArea(this.selectedAreaRef.value)
 
         this.selectedAreaRef.value = null
@@ -514,6 +559,16 @@ export default {
     },
     onDraw (area) {
       if (this.drawField) {
+        if (this.drawOption) {
+          const areaWithoutOption = this.drawField.areas?.find((a) => !a.option_uuid)
+
+          if (areaWithoutOption && !this.drawField.areas.find((a) => a.option_uuid === this.drawField.options[0].uuid)) {
+            areaWithoutOption.option_uuid = this.drawField.options[0].uuid
+          }
+
+          area.option_uuid = this.drawOption.uuid
+        }
+
         this.drawField.areas ||= []
         this.drawField.areas.push(area)
 
@@ -522,6 +577,7 @@ export default {
         }
 
         this.drawField = null
+        this.drawOption = null
 
         this.selectedAreaRef.value = area
 
@@ -571,14 +627,14 @@ export default {
     onDropfield (area) {
       const field = {
         name: '',
-        type: this.dragFieldType,
         uuid: v4(),
         submitter_uuid: this.selectedSubmitter.uuid,
-        required: this.dragFieldType !== 'checkbox'
+        required: this.dragField.type !== 'checkbox',
+        ...this.dragField
       }
 
-      if (['select', 'multiple', 'radio'].includes(this.dragFieldType)) {
-        field.options = ['']
+      if (['select', 'multiple', 'radio'].includes(field.type)) {
+        field.options = [{ value: '', uuid: v4() }]
       }
 
       const fieldArea = {
@@ -592,27 +648,27 @@ export default {
 
       let baseArea
 
-      if (this.selectedField?.type === this.dragFieldType) {
+      if (this.selectedField?.type === field.type) {
         baseArea = this.selectedAreaRef.value
       } else if (previousField?.areas?.length) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
-        if (['checkbox'].includes(this.dragFieldType)) {
+        if (['checkbox'].includes(field.type)) {
           baseArea = {
             w: area.maskW / 30 / area.maskW,
             h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)
           }
-        } else if (this.dragFieldType === 'image') {
+        } else if (field.type === 'image') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (this.dragFieldType === 'signature') {
+        } else if (field.type === 'signature') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
-        } else if (this.dragFieldType === 'initials') {
+        } else if (field.type === 'initials') {
           baseArea = {
             w: area.maskW / 10 / area.maskW,
             h: area.maskW / 35 / area.maskW
@@ -629,7 +685,7 @@ export default {
       fieldArea.h = baseArea.h
       fieldArea.y = fieldArea.y - baseArea.h / 2
 
-      if (this.dragFieldType === 'cells') {
+      if (field.type === 'cells') {
         fieldArea.cell_w = baseArea.cell_w || (baseArea.w / 5)
       }
 

app/javascript/template_builder/contenteditable.vue

@@ -24,11 +24,10 @@
       *
     </span>
     <IconPencil
-      v-if="editable"
       class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
-      :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
+      :class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
       @click="[focusContenteditable(), selectOnEditClick && selectContent()]"

app/javascript/template_builder/controls.vue

@@ -7,6 +7,7 @@
       @update:model-value="onUpdateName"
     />
     <ReplaceButton
+      v-if="withReplaceButton"
       :is-direct-upload="isDirectUpload"
       :template-id="template.id"
       @click.stop
@@ -67,6 +68,11 @@ export default {
       required: true,
       default: false
     },
+    withReplaceButton: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
     withArrows: {
       type: Boolean,
       required: false,

app/javascript/template_builder/document.vue

@@ -8,6 +8,7 @@
       :editable="editable"
       :areas="areasIndex[index]"
       :is-drag="isDrag"
+      :default-fields="defaultFields"
       :draw-field="drawField"
       :selected-submitter="selectedSubmitter"
       :image="image"
@@ -35,6 +36,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true
@@ -49,6 +55,11 @@ export default {
       required: false,
       default: null
     },
+    baseUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
     isDrag: {
       type: Boolean,
       required: false,
@@ -62,6 +73,13 @@ export default {
     }
   },
   computed: {
+    basePreviewUrl () {
+      if (this.baseUrl) {
+        return new URL(this.baseUrl).origin
+      } else {
+        return ''
+      }
+    },
     numberOfPages () {
       return this.document.metadata?.pdf?.number_of_pages || this.document.preview_images.length
     },
@@ -72,7 +90,7 @@ export default {
         return this.previewImagesIndex[i] || {
           metadata: lazyloadMetadata,
           id: Math.random().toString(),
-          url: `/preview/${this.document.uuid}/${i}.jpg`
+          url: this.basePreviewUrl + `/preview/${this.document.uuid}/${i}.jpg`
         }
       })
     },

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :button-width="20"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
@@ -22,7 +22,7 @@
           <Contenteditable
             ref="name"
             :model-value="field.name || defaultName"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -34,19 +34,21 @@
           v-if="isNameFocus"
           class="flex items-center relative"
         >
-          <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 v-if="field.type != 'phone'">
+            <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>
         </div>
         <div
           v-else-if="editable"
@@ -56,7 +58,7 @@
             v-if="field && !field.areas.length"
             title="Draw"
             class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            @click="$emit('set-draw', field)"
+            @click="$emit('set-draw', { field })"
           >
             <IconNewSection
               :width="18"
@@ -64,6 +66,7 @@
             />
           </button>
           <span
+            v-if="!defaultField"
             class="dropdown dropdown-end"
           >
             <label
@@ -104,7 +107,10 @@
                   Default value
                 </label>
               </div>
-              <li @click.stop>
+              <li
+                v-if="field.type != 'phone'"
+                @click.stop
+              >
                 <label class="cursor-pointer py-1.5">
                   <input
                     v-model="field.required"
@@ -146,11 +152,11 @@
                   Page {{ area.page + 1 }}
                 </a>
               </li>
-              <li>
+              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
                 <a
                   href="#"
                   class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', field)"
+                  @click.prevent="$emit('set-draw', { field })"
                 >
                   <IconNewSection
                     :width="20"
@@ -188,26 +194,54 @@
       </div>
       <div
         v-if="field.options"
+        ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
+        draggable="true"
+        @dragstart.prevent.stop
       >
         <div
           v-for="(option, index) in field.options"
-          :key="index"
+          :key="option.uuid"
           class="flex space-x-1.5 items-center"
         >
           <span class="text-sm w-3.5">
             {{ index + 1 }}.
           </span>
+          <div
+            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            class="items-center flex w-full"
+          >
+            <input
+              v-model="option.value"
+              class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
+              type="text"
+              required
+              @blur="save"
+            >
+            <button
+              title="Draw"
+              tabindex="-1"
+              @click.prevent="$emit('set-draw', { field, option })"
+            >
+              <IconNewSection
+                :width="18"
+                :stroke-width="1.6"
+              />
+            </button>
+          </div>
           <input
-            v-model="field.options[index]"
+            v-else
+            v-model="option.value"
             class="w-full input input-primary input-xs text-sm bg-transparent"
             type="text"
             required
+            @focus="maybeFocusOnOptionArea(option)"
             @blur="save"
           >
           <button
             class="text-sm w-3.5"
-            @click="[field.options.splice(index, 1), save()]"
+            tabindex="-1"
+            @click="removeOption(option)"
           >
             &times;
           </button>
@@ -215,7 +249,7 @@
         <button
           v-if="field.options"
           class="text-center text-sm w-full pb-1"
-          @click="[field.options.push(''), save()]"
+          @click="addOption"
         >
           + Add option
         </button>
@@ -228,6 +262,7 @@
 import Contenteditable from './contenteditable'
 import FieldType from './field_type'
 import { IconShape, IconNewSection, IconTrashX, IconCopy, IconSettings } from '@tabler/icons-vue'
+import { v4 } from 'uuid'
 
 export default {
   name: 'TemplateField',
@@ -240,12 +275,17 @@ export default {
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
   props: {
     field: {
       type: Object,
       required: true
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -298,12 +338,36 @@ export default {
         }, 1)
       }
     },
+    maybeFocusOnOptionArea (option) {
+      const area = this.field.areas.find((a) => a.option_uuid === option.uuid)
+
+      if (area) {
+        this.selectedAreaRef.value = area
+      }
+    },
     scrollToFirstArea () {
       return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
     },
     closeDropdown () {
       document.activeElement.blur()
     },
+    addOption () {
+      this.field.options.push({ value: '', uuid: v4() })
+
+      this.$nextTick(() => {
+        const inputs = this.$refs.options.querySelectorAll('input')
+
+        inputs[inputs.length - 1]?.focus()
+      })
+
+      this.save()
+    },
+    removeOption (option) {
+      this.field.options.splice(this.field.options.indexOf(option), 1)
+      this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
+
+      this.save()
+    },
     maybeUpdateOptions () {
       delete this.field.default_value
 
@@ -312,7 +376,7 @@ export default {
       }
 
       if (['radio', 'multiple', 'select'].includes(this.field.type)) {
-        this.field.options ||= ['']
+        this.field.options ||= [{ value: '', uuid: v4() }]
       }
 
       (this.field.areas || []).forEach((area) => {

app/javascript/template_builder/field_submitter.vue

@@ -1,5 +1,91 @@
 <template>
-  <div class="dropdown">
+  <div v-if="mobileView">
+    <div class="flex space-x-2 items-end">
+      <div class="group/contenteditable-container bg-base-100 rounded-md p-2 border border-base-300 w-full flex justify-between items-end">
+        <div class="flex items-center space-x-2">
+          <span
+            class="w-3 h-3 flex-shrink-0 rounded-full"
+            :class="colors[submitters.indexOf(selectedSubmitter)]"
+          />
+          <Contenteditable
+            v-model="selectedSubmitter.name"
+            class="cursor-text"
+            :icon-inline="true"
+            :editable="editable"
+            :select-on-edit-click="true"
+            :icon-width="18"
+            @update:model-value="$emit('name-change', selectedSubmitter)"
+          />
+        </div>
+      </div>
+      <div class="dropdown dropdown-top dropdown-end">
+        <label
+          tabindex="0"
+          class="bg-base-100 cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-center"
+        >
+          <IconChevronUp
+            width="24"
+            height="24"
+          />
+        </label>
+        <ul
+          v-if="editable"
+          tabindex="0"
+          class="rounded-md min-w-max mb-2"
+          :class="menuClasses"
+          @click="closeDropdown"
+        >
+          <li
+            v-for="(submitter, index) in submitters"
+            :key="submitter.uuid"
+          >
+            <a
+              href="#"
+              class="flex px-2 group justify-between items-center"
+              :class="{ 'active': submitter === selectedSubmitter }"
+              @click.prevent="selectSubmitter(submitter)"
+            >
+              <span class="py-1 flex items-center">
+                <span
+                  class="rounded-full w-3 h-3 ml-1 mr-3"
+                  :class="colors[index]"
+                />
+                <span>
+                  {{ submitter.name }}
+                </span>
+              </span>
+              <button
+                v-if="submitters.length > 1 && editable"
+                class="px-2"
+                @click.stop="remove(submitter)"
+              >
+                <IconTrashX :width="18" />
+              </button>
+            </a>
+          </li>
+          <li v-if="submitters.length < 10 && editable">
+            <a
+              href="#"
+              class="flex px-2"
+              @click.prevent="addSubmitter"
+            >
+              <IconUserPlus
+                :width="20"
+                :stroke-width="1.6"
+              />
+              <span class="py-1">
+                Add {{ names[submitters.length] }}
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="dropdown"
+  >
     <label
       v-if="compact"
       tabindex="0"
@@ -14,7 +100,7 @@
     <label
       v-else
       tabindex="0"
-      class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
+      class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between"
     >
       <div class="flex items-center space-x-2">
         <span
@@ -31,7 +117,7 @@
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />
       </div>
-      <span class="flex items-center">
+      <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 flex justify-center items-center rounded">
         <IconPlus
           width="18"
           height="18"
@@ -83,7 +169,7 @@
             :stroke-width="1.6"
           />
           <span class="py-1">
-            Add Submitter
+            Add {{ names[submitters.length] }}
           </span>
         </a>
       </li>
@@ -92,7 +178,7 @@
 </template>
 
 <script>
-import { IconUserPlus, IconTrashX, IconPlus } from '@tabler/icons-vue'
+import { IconUserPlus, IconTrashX, IconPlus, IconChevronUp } from '@tabler/icons-vue'
 import Contenteditable from './contenteditable'
 import { v4 } from 'uuid'
 
@@ -102,7 +188,8 @@ export default {
     IconUserPlus,
     Contenteditable,
     IconPlus,
-    IconTrashX
+    IconTrashX,
+    IconChevronUp
   },
   props: {
     submitters: {
@@ -119,6 +206,11 @@ export default {
       required: false,
       default: false
     },
+    mobileView: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     modelValue: {
       type: String,
       required: true
@@ -147,16 +239,16 @@ export default {
     },
     names () {
       return [
-        'First Submitter',
-        'Second Submitter',
-        'Third Submitter',
-        'Fourth Submitter',
-        'Fifth Submitter',
-        'Sixth Submitter',
-        'Seventh Submitter',
-        'Eighth Submitter',
-        'Ninth Submitter',
-        'Tenth Submitter'
+        'First Party',
+        'Second Party',
+        'Third Party',
+        'Fourth Party',
+        'Fifth Party',
+        'Sixth Party',
+        'Seventh Party',
+        'Eighth Party',
+        'Ninth Party',
+        'Tenth Party'
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/fields.vue

@@ -24,6 +24,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable && !dragField"
+      :default-field="defaultFields.find((f) => f.name === field.name)"
       :draggable="editable"
       @dragstart="dragField = field"
       @dragend="dragField = null"
@@ -32,6 +33,35 @@
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
+  <div v-if="submitterDefaultFields.length">
+    <hr class="mb-2">
+    <template
+      v-for="field in submitterDefaultFields"
+      :key="field.name"
+    >
+      <div
+        :style="{ backgroundColor: backgroundColor }"
+        draggable="true"
+        class="border border-base-300 rounded rounded-tr-none relative group mb-2"
+        @dragstart="onDragstart({ type: 'text', ...field })"
+        @dragend="$emit('drag-end')"
+      >
+        <div class="flex items-center justify-between relative cursor-grab">
+          <div class="flex items-center p-1 space-x-1">
+            <IconDrag />
+            <FieldType
+              :model-value="field.type || 'text'"
+              :editable="false"
+              :button-width="20"
+            />
+            <span class="block pl-0.5">
+              {{ field.name }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
   <div
     v-if="editable"
     class="grid grid-cols-3 gap-1 pb-2"
@@ -43,37 +73,14 @@
       <button
         v-if="withPhone || type != 'phone'"
         draggable="true"
-        class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
+        class="group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
         :style="{ backgroundColor: backgroundColor }"
-        @dragstart="onDragstart(type)"
+        @dragstart="onDragstart({ type: 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"
-              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 class="flex items-console group-hover:bg-base-200/50 transition-all cursor-grab h-full absolute left-0">
+          <IconDrag class=" my-auto" />
         </div>
         <div class="flex items-center flex-col px-2 py-2">
           <component :is="icon" />
@@ -134,12 +141,15 @@ import { v4 } from 'uuid'
 import FieldType from './field_type'
 import FieldSubmitter from './field_submitter'
 import { IconLock } from '@tabler/icons-vue'
+import IconDrag from './icon_drag'
 
 export default {
   name: 'TemplateFields',
   components: {
     Field,
+    FieldType,
     FieldSubmitter,
+    IconDrag,
     IconLock
   },
   inject: ['save', 'backgroundColor', 'withPhone'],
@@ -153,6 +163,11 @@ export default {
       required: false,
       default: true
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     withStickySubmitters: {
       type: Boolean,
       required: false,
@@ -178,11 +193,16 @@ export default {
     fieldIcons: FieldType.computed.fieldIcons,
     submitterFields () {
       return this.fields.filter((f) => f.submitter_uuid === this.selectedSubmitter.uuid)
+    },
+    submitterDefaultFields () {
+      return this.defaultFields.filter((f) => {
+        return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
+      })
     }
   },
   methods: {
-    onDragstart (fieldType) {
-      this.$emit('set-drag', fieldType)
+    onDragstart (field) {
+      this.$emit('set-drag', field)
     },
     onFieldDragover (e) {
       const targetFieldUuid = e.target.closest('[data-uuid]')?.dataset?.uuid
@@ -233,11 +253,15 @@ export default {
       }
 
       if (['select', 'multiple', 'radio'].includes(type)) {
-        field.options = ['']
+        field.options = [{ value: '', uuid: v4() }]
       }
 
       this.fields.push(field)
 
+      if (['signature', 'initials', 'cells'].includes(type)) {
+        this.$emit('set-draw', { field })
+      }
+
       this.save()
     }
   }

app/javascript/template_builder/icon_drag.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    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"
+      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>
+</template>
+
+<script>
+export default {
+  name: 'DragIcon'
+}
+</script>

app/javascript/template_builder/mobile_draw_field.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fixed text-center w-full bottom-0 pr-6 mb-4">
+    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
+      <div class="flex items-center space-x-2">
+        <component
+          :is="fieldIcons[drawField.type]"
+          :width="20"
+          :height="20"
+          class="inline"
+          :stroke-width="1.6"
+        />
+        <span> Draw {{ fieldNames[drawField.type] }} Field </span>
+      </div>
+      <a
+        href="#"
+        class="link block text-center"
+        @click.prevent="$emit('cancel')"
+      >
+        Cancel
+      </a>
+    </span>
+    <FieldSubmitter
+      :model-value="selectedSubmitter.uuid"
+      :submitters="submitters"
+      :editable="editable"
+      :mobile-view="true"
+      @new-submitter="save"
+      @remove="removeSubmitter"
+      @name-change="save"
+      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
+    />
+  </div>
+</template>
+
+<script>
+import Field from './field'
+import FieldType from './field_type'
+import FieldSubmitter from './field_submitter'
+
+export default {
+  name: 'MobileDrawField',
+  components: {
+    Field,
+    FieldSubmitter
+  },
+  inject: ['save'],
+  props: {
+    drawField: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    submitters: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    selectedSubmitter: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['change-submitter', 'cancel'],
+  computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldIcons: FieldType.computed.fieldIcons
+  },
+  methods: {
+    removeSubmitter (submitter) {
+      [...this.fields].forEach((field) => {
+        if (field.submitter_uuid === submitter.uuid) {
+          this.removeField(field)
+        }
+      })
+
+      this.submitters.splice(this.submitters.indexOf(submitter), 1)
+
+      if (this.selectedSubmitter === submitter) {
+        this.$emit('change-submitter', this.submitters[0])
+      }
+
+      this.save()
+    },
+    removeField (field) {
+      this.fields.splice(this.fields.indexOf(field), 1)
+
+      this.save()
+    }
+  }
+}
+</script>

app/javascript/template_builder/page.vue

@@ -23,6 +23,7 @@
         :area="item.area"
         :field="item.field"
         :editable="editable"
+        :default-field="defaultFields.find((f) => f.name === item.field.name)"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -40,8 +41,8 @@
       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 }"
+      class="top-0 bottom-0 left-0 right-0 absolute"
+      :class="{ 'z-10': !isMobile, 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': drawField, [resizeDirectionClasses[resizeDirection]]: !!resizeDirectionClasses }"
       @pointermove="onPointermove"
       @pointerdown="onStartDraw"
       @dragover.prevent
@@ -69,6 +70,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true

app/javascript/template_builder/preview.vue

@@ -19,6 +19,7 @@
           <div style="width: 26px" />
           <div class="">
             <ReplaceButton
+              v-if="withReplaceButton"
               :is-direct-upload="isDirectUpload"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
@@ -108,6 +109,11 @@ export default {
       required: false,
       default: 'image/*, application/pdf'
     },
+    withReplaceButton: {
+      type: Boolean,
+      required: true,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,

app/jobs/process_submitter_completion_job.rb

@@ -24,14 +24,16 @@ class ProcessSubmitterCompletionJob < ApplicationJob
   def enqueue_completed_emails(submitter)
     user = submitter.submission.created_by_user || submitter.template.author
 
-    if submitter.template.account.users.exists?(id: user.id)
+    if submitter.template.account.users.exists?(id: user.id) &&
+       submitter.submission.preferences['send_email'] != false
       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(', ')
+    to = submitter.submission.submitters.reject { |e| e.preferences['send_email'] == false }
+                  .sort_by(&:completed_at).select(&:email?).map(&:friendly_name).join(', ')
 
     SubmitterMailer.documents_copy_email(submitter, to:).deliver_later! if to.present?
   end
@@ -48,6 +50,6 @@ class ProcessSubmitterCompletionJob < ApplicationJob
 
     next_submitter = submitter.submission.submitters.find { |s| s.uuid == next_submitter_item['uuid'] }
 
-    Submitters.send_signature_requests([next_submitter], send_email: true)
+    Submitters.send_signature_requests([next_submitter])
   end
 end

app/jobs/send_submitter_invitation_email_job.rb

@@ -4,7 +4,7 @@ class SendSubmitterInvitationEmailJob < ApplicationJob
   def perform(params = {})
     submitter = Submitter.find(params['submitter_id'])
 
-    SubmitterMailer.invitation_email(submitter, subject: params['subject'], body: params['body']).deliver_now!
+    SubmitterMailer.invitation_email(submitter).deliver_now!
 
     SubmissionEvent.create!(submitter:, event_type: 'send_email')
 

app/mailers/submitter_mailer.rb

@@ -3,18 +3,26 @@
 class SubmitterMailer < ApplicationMailer
   MAX_ATTACHMENTS_SIZE = 10.megabytes
 
-  def invitation_email(submitter, body: nil, subject: nil)
+  DEFAULT_INVITATION_SUBJECT = 'You are invited to submit a form'
+
+  def invitation_email(submitter)
     @current_account = submitter.submission.template.account
     @submitter = submitter
-    @body = body.presence
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
+    if submitter.preferences['email_message_uuid']
+      @email_message = submitter.account.email_messages.find_by(uuid: submitter.preferences['email_message_uuid'])
+    end
+
+    @body = @email_message&.body.presence
+    @subject = @email_message&.subject.presence
+
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY)
 
     subject =
-      if @email_config || subject.present?
-        ReplaceEmailVariables.call(subject.presence || @email_config.value['subject'], submitter:)
+      if @email_config || @subject
+        ReplaceEmailVariables.call(@subject || @email_config.value['subject'], submitter:)
       else
-        'You are invited to submit a form'
+        DEFAULT_INVITATION_SUBJECT
       end
 
     mail(to: @submitter.friendly_name,
@@ -31,7 +39,7 @@ class SubmitterMailer < ApplicationMailer
 
     Submissions::EnsureResultGenerated.call(submitter)
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_COMPLETED_EMAIL_KEY)
 
     add_completed_email_attachments!(submitter)
 
@@ -58,7 +66,7 @@ class SubmitterMailer < ApplicationMailer
 
     @documents = add_completed_email_attachments!(submitter)
 
-    @email_config = @current_account.account_configs.find_by(key: AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY)
+    @email_config = AccountConfigs.find_for_account(@current_account, AccountConfig::SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY)
 
     subject =
       if @email_config
@@ -86,7 +94,26 @@ class SubmitterMailer < ApplicationMailer
       total_size = audit_trail_data.size
     end
 
-    documents.each do |attachment|
+    total_size = add_attachments_with_size_limit(documents, total_size)
+
+    attachments[submitter.submission.audit_trail.filename.to_s] = audit_trail_data if audit_trail_data
+
+    file_fields = submitter.submission.template_fields.select { |e| e['type'] == 'file' }
+
+    if file_fields.pluck('submitter_uuid').uniq.size == 1
+      storage_attachments =
+        submitter.attachments.where(uuid: submitter.values.values_at(*file_fields.pluck('uuid')).flatten)
+
+      add_attachments_with_size_limit(storage_attachments, total_size)
+    end
+
+    documents
+  end
+
+  def add_attachments_with_size_limit(storage_attachments, current_size)
+    total_size = current_size
+
+    storage_attachments.each do |attachment|
       total_size += attachment.byte_size
 
       break if total_size >= MAX_ATTACHMENTS_SIZE
@@ -94,9 +121,7 @@ class SubmitterMailer < ApplicationMailer
       attachments[attachment.filename.to_s] = attachment.download
     end
 
-    attachments[submitter.submission.audit_trail.filename.to_s] = audit_trail_data if audit_trail_data
-
-    documents
+    total_size
   end
 
   def from_address_for_submitter(submitter)

app/models/account.rb

@@ -15,6 +15,7 @@ class Account < ApplicationRecord
   has_many :users, dependent: :destroy
   has_many :encrypted_configs, dependent: :destroy
   has_many :account_configs, dependent: :destroy
+  has_many :email_messages, dependent: :destroy
   has_many :templates, dependent: :destroy
   has_many :template_folders, dependent: :destroy
   has_one :default_template_folder, -> { where(name: TemplateFolder::DEFAULT_NAME) },

app/models/account_config.rb

@@ -25,6 +25,8 @@ class AccountConfig < ApplicationRecord
   SUBMITTER_COMPLETED_EMAIL_KEY = 'submitter_completed_email'
   SUBMITTER_DOCUMENTS_COPY_EMAIL_KEY = 'submitter_documents_copy_email'
   BCC_EMAILS = 'bcc_emails'
+  FORCE_MFA = 'force_mfa'
+  ALLOW_TYPED_SIGNATURE = 'allow_typed_signature'
   SUBMITTER_REMAILERS = 'submitter_reminders'
   FORM_COMPLETED_BUTTON_KEY = 'form_completed_button'
 
@@ -49,7 +51,7 @@ class AccountConfig < ApplicationRecord
       'body' => "Hi there,\n\n" \
                 "Please check the copy of your \"{{template.name}}\" submission in the email attachments.\n" \
                 "Alternatively, you can download your copy using:\n\n" \
-                "{{documents.links}}\n\n" \
+                "{{documents.link}}\n\n" \
                 "Thanks,\n" \
                 '{{account.name}}'
     }

app/models/email_message.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# == Schema Information
+#
+# Table name: email_messages
+#
+#  id         :bigint           not null, primary key
+#  body       :text             not null
+#  sha1       :string           not null
+#  subject    :text             not null
+#  uuid       :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_email_messages_on_account_id  (account_id)
+#  index_email_messages_on_sha1        (sha1)
+#  index_email_messages_on_uuid        (uuid)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (account_id => accounts.id)
+#  fk_rails_...  (author_id => users.id)
+#
+class EmailMessage < ApplicationRecord
+  belongs_to :author, class_name: 'User'
+  belongs_to :account
+
+  attribute :uuid, :string, default: -> { SecureRandom.uuid }
+
+  before_validation :set_sha1, on: :create
+
+  def set_sha1
+    self.sha1 = Digest::SHA1.hexdigest({ subject:, body: }.to_json)
+  end
+end

app/models/encrypted_config.rb

@@ -25,6 +25,7 @@ class EncryptedConfig < ApplicationRecord
     FILES_STORAGE_KEY = 'active_storage',
     EMAIL_SMTP_KEY = 'action_mailer_smtp',
     ESIGN_CERTS_KEY = 'esign_certs',
+    TIMESTAMP_SERVER_URL_KEY = 'timestamp_server_url',
     APP_URL_KEY = 'app_url',
     WEBHOOK_URL_KEY = 'webhook_url'
   ].freeze

app/models/submission.rb

@@ -6,6 +6,8 @@
 #
 #  id                  :bigint           not null, primary key
 #  deleted_at          :datetime
+#  preferences         :text             not null
+#  slug                :string           not null
 #  source              :text             not null
 #  submitters_order    :string           not null
 #  template_fields     :text
@@ -19,6 +21,7 @@
 # Indexes
 #
 #  index_submissions_on_created_by_user_id  (created_by_user_id)
+#  index_submissions_on_slug                (slug) UNIQUE
 #  index_submissions_on_template_id         (template_id)
 #
 # Foreign Keys
@@ -34,13 +37,18 @@ class Submission < ApplicationRecord
   has_many :submitters, dependent: :destroy
   has_many :submission_events, dependent: :destroy
 
+  attribute :preferences, :string, default: -> { {} }
+
   serialize :template_fields, JSON
   serialize :template_schema, JSON
   serialize :template_submitters, JSON
+  serialize :preferences, JSON
 
   attribute :source, :string, default: 'link'
   attribute :submitters_order, :string, default: 'random'
 
+  attribute :slug, :string, default: -> { SecureRandom.base58(14) }
+
   has_one_attached :audit_trail
 
   has_many :template_schema_documents,
@@ -64,7 +72,9 @@ class Submission < ApplicationRecord
   }, scope: false, prefix: true
 
   def audit_trail_url
-    audit_trail&.url
+    return if audit_trail.blank?
+
+    Rails.application.routes.url_helpers.rails_storage_proxy_url(audit_trail, **Docuseal.default_url_options)
   end
   alias audit_log_url audit_trail_url
 end

app/models/submission_event.rb

@@ -39,6 +39,7 @@ class SubmissionEvent < ApplicationRecord
     send_email: 'send_email',
     send_reminder_email: 'send_reminder_email',
     send_sms: 'send_sms',
+    send_2fa_sms: 'send_2fa_sms',
     open_email: 'open_email',
     click_email: 'click_email',
     click_sms: 'click_sms',

app/models/submitter.rb

@@ -12,6 +12,7 @@
 #  name            :string
 #  opened_at       :datetime
 #  phone           :string
+#  preferences     :text             not null
 #  sent_at         :datetime
 #  slug            :string           not null
 #  ua              :string
@@ -37,9 +38,11 @@ class Submitter < ApplicationRecord
   has_one :account, through: :template
 
   attribute :values, :string, default: -> { {} }
+  attribute :preferences, :string, default: -> { {} }
   attribute :slug, :string, default: -> { SecureRandom.base58(14) }
 
   serialize :values, JSON
+  serialize :preferences, JSON
 
   has_many_attached :documents
   has_many_attached :attachments
@@ -61,7 +64,7 @@ class Submitter < ApplicationRecord
 
   def friendly_name
     if name.present? && email.present? && email.exclude?(',')
-      "#{name} <#{email}>"
+      %("#{name.delete('"')}" <#{email}>)
     else
       email
     end

app/models/template.rb

@@ -33,7 +33,7 @@
 #  fk_rails_...  (folder_id => template_folders.id)
 #
 class Template < ApplicationRecord
-  DEFAULT_SUBMITTER_NAME = 'First Submitter'
+  DEFAULT_SUBMITTER_NAME = 'First Party'
 
   belongs_to :author, class_name: 'User'
   belongs_to :account

app/models/user.rb

@@ -52,11 +52,16 @@ class User < ApplicationRecord
   belongs_to :account
   has_one :access_token, dependent: :destroy
   has_many :templates, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
+  has_many :template_folders, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
   has_many :user_configs, dependent: :destroy
   has_many :encrypted_configs, dependent: :destroy, class_name: 'EncryptedUserConfig'
+  has_many :email_messages, dependent: :destroy, foreign_key: :author_id, inverse_of: :author
 
   devise :two_factor_authenticatable, :recoverable, :rememberable, :validatable, :trackable
-  devise :registerable, :omniauthable, omniauth_providers: [:google_oauth2] if Docuseal.multitenant?
+
+  if Docuseal.multitenant?
+    devise :registerable, :omniauthable, omniauth_providers: %i[google_oauth2 microsoft_office365 github]
+  end
 
   attribute :role, :string, default: ADMIN_ROLE
   attribute :uuid, :string, default: -> { SecureRandom.uuid }
@@ -94,7 +99,7 @@ class User < ApplicationRecord
 
   def friendly_name
     if full_name.present?
-      "#{full_name} <#{email}>"
+      %("#{full_name.delete('"')}" <#{email}>)
     else
       email
     end

app/views/accounts/show.html.erb

@@ -36,6 +36,35 @@
         </div>
       <% end %>
     <% end %>
+    <% if can?(:manage, AccountConfig) %>
+      <div class="px-1 mt-8">
+        <h2 class="text-2xl font-bold mb-2">Preferences</h2>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::FORCE_MFA) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Force 2FA with Authenticator App
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
+        <% account_config = AccountConfig.find_or_initialize_by(account: current_account, key: AccountConfig::ALLOW_TYPED_SIGNATURE) %>
+        <% if can?(:manage, account_config) %>
+          <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
+            <%= f.hidden_field :key %>
+            <div class="flex items-center justify-between py-2.5">
+              <span>
+                Allow typed text signatures
+              </span>
+              <%= f.check_box :value, class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
   </div>
   <div class="w-0 md:w-52"></div>
 </div>

app/views/api_settings/index.html.erb

@@ -34,7 +34,7 @@
              "submitters": [
                {
                  "name": "John Doe",
-                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Submitter' %>",
+                 "role": "<%= current_account.templates.last ? current_account.templates.last.submitters.first['name'] : 'First Party' %>",
                  "email": "<%= current_user.email.sub('@', '+test@') %>",
                  "values": {
                    "Form Text Field Name": "Default Value"

app/views/dashboard/index.html.erb

@@ -8,7 +8,7 @@
       <% 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 %>
+        <%= link_to new_template_path, class: 'white-button !border 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 %>

app/views/devise/registrations/show.html.erb

@@ -8,7 +8,7 @@
     <div class="space-y-2">
       <div class="form-control">
         <%= f.label :email, class: 'label' %>
-        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input', placeholder: 'Enter email to continue' %>
       </div>
     </div>
     <div class="form-control">
@@ -16,7 +16,18 @@
     </div>
   <% end %>
   <% if devise_mapping.omniauthable? %>
-    <%= button_to button_title(title: 'Sign up with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), omniauth_authorize_path(resource_name, :google_oauth2), class: 'white-button w-full mt-4', data: { turbo: false }, method: :post %>
+    <div class="space-y-4">
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :google_oauth2), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query %>
+        <%= f.button button_title(title: 'Sign up with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
+      <% end %>
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :microsoft_office365), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state_microsoft" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query, id: 'state_microsoft' %>
+        <%= f.button button_title(title: 'Sign up with Microsoft', icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
+      <% end %>
+    </div>
   <% end %>
   <%= render 'devise/shared/links' %>
 </div>

app/views/devise/sessions/new.html.erb

@@ -20,7 +20,18 @@
     </div>
   <% end %>
   <% if devise_mapping.omniauthable? %>
-    <%= button_to button_title(title: 'Sign in with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), omniauth_authorize_path(resource_name, :google_oauth2), class: 'white-button w-full mt-4', data: { turbo: false }, method: :post %>
+    <div class="space-y-4">
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :google_oauth2), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query %>
+        <%= f.button button_title(title: 'Sign in with Google', icon: svg_icon('brand_google', class: 'w-6 h-6')), class: 'white-button w-full mt-4' %>
+      <% end %>
+      <%= form_for '', url: omniauth_authorize_path(resource_name, :microsoft_office365), data: { turbo: false }, method: :post do |f| %>
+        <set-timezone data-input-id="state_microsoft" data-params="true"></set-timezone>
+        <%= hidden_field_tag :state, { redir: params[:redir].to_s }.compact_blank.to_query, id: 'state_microsoft' %>
+        <%= f.button button_title(title: 'Sign in with Microsoft', icon: svg_icon('brand_microsoft', class: 'w-6 h-6')), class: 'white-button w-full' %>
+      <% end %>
+    </div>
   <% end %>
   <%= render 'devise/shared/links' %>
 </div>

app/views/esign_settings/show.html.erb

@@ -97,5 +97,31 @@
         </tbody>
       </table>
     </div>
+    <% encrypted_config = EncryptedConfig.find_or_initialize_by(account: current_account, key: EncryptedConfig::TIMESTAMP_SERVER_URL_KEY) %>
+    <% if !Docuseal.multitenant? && can?(:manage, encrypted_config) %>
+      <div class="flex-grow max-w-xl">
+        <div class="flex justify-between items-end mb-4 mt-8">
+          <h2 class="text-3xl font-bold">Timestamp Server</h2>
+        </div>
+        <%= form_for encrypted_config, url: timestamp_server_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
+          <div class="form-control">
+            <%= f.label :value, class: 'label' do %>
+              <span class="flex items-center space-x-1">
+                <span>
+                  Timeserver URL
+                </span>
+                <span class="tooltip" data-tip="URL of the trusted timeserver to be used to generate timestamp signatures.">
+                  <%= svg_icon('info_circle', class: 'w-4 h-4') %>
+                </span>
+              </span>
+            <% end %>
+            <%= f.url_field :value, autocomplete: 'off', class: 'base-input', placeholder: 'URL (optional)' %>
+          </div>
+          <div class="form-control pt-2">
+            <%= f.button button_title(title: 'Save', disabled_with: 'Updating'), class: 'base-button' %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
   </div>
 </div>

app/views/icons/_archive.html.erb

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>

app/views/icons/_brand_microsoft.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+  <path fill="#ff5722" d="M6 6H22V22H6z" transform="rotate(-180 14 14)"></path><path fill="#4caf50" d="M26 6H42V22H26z" transform="rotate(-180 34 14)"></path><path fill="#ffc107" d="M26 26H42V42H26z" transform="rotate(-180 34 34)"></path><path fill="#03a9f4" d="M6 26H22V42H6z" transform="rotate(-180 14 34)"></path>
+</svg>

app/views/mfa_setup/_form.html.erb

@@ -0,0 +1,17 @@
+<%= form_for '', url: mfa_setup_path, data: { turbo_frame: :_top }, html: { id: 'mfa_form' } do |f| %>
+  <p class="text-center">
+    Use an authenticator mobile app like Google Authenticator or 1Password to scan the QR code below.
+  </p>
+  <div>
+    <%== RQRCode::QRCode.new(@provision_url).as_svg(viewbox: true, svg_attributes: { class: 'w-80 h-80 my-4 mx-auto' }) %>
+  </div>
+  <div class="form-control my-6 space-y-2">
+    <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
+    <span>
+      <%= @error_message %>
+    </span>
+  </div>
+  <div class="form-control mt-4">
+    <%= f.button button_title(title: 'Save'), class: 'base-button' %>
+  </div>
+<% end %>

app/views/mfa_setup/new.html.erb

@@ -1,19 +1,3 @@
 <%= render 'shared/turbo_modal', title: 'Setup 2FA' do %>
-  <%= form_for '', url: mfa_setup_path, data: { turbo_frame: :_top } do |f| %>
-    <p class="text-center">
-      Use an authenticator mobile app like Google Authenticator or 1Password to scan the QR code below.
-    </p>
-    <div>
-      <%== RQRCode::QRCode.new(@provision_url).as_svg(viewbox: true, svg_attributes: { class: 'w-80 h-80 my-4 mx-auto' }) %>
-    </div>
-    <div class="form-control my-6 space-y-2">
-      <%= f.text_field :otp_attempt, required: true, placeholder: 'XXX-XXX', class: 'base-input text-center' %>
-      <span>
-        <%= @error_message %>
-      </span>
-    </div>
-    <div class="form-control mt-4">
-      <%= f.button button_title(title: 'Save'), class: 'base-button' %>
-    </div>
-  <% end %>
+  <%= render 'mfa_setup/form' %>
 <% end %>

app/views/mfa_setup/show.html.erb

@@ -0,0 +1,4 @@
+<div class="max-w-lg mx-auto px-2">
+  <h1 class="text-4xl font-bold text-center mt-8">Setup 2FA</h1>
+  <%= render 'mfa_setup/form' %>
+</div>

app/views/scripts/_autosize_field.html.erb

@@ -0,0 +1,15 @@
+<script>
+  if (!window.customElements.get('autosize-field')) {
+    window.customElements.define('autosize-field', class extends HTMLElement {
+      connectedCallback() {
+        if (this.field.scrollHeight > this.field.clientHeight) {
+          this.field.classList.remove('text-[1.5vw]', 'lg:text-base');
+          this.field.classList.add('text-[1.0vw]', 'lg:text-[0.70rem]');
+        }
+      }
+      get field() {
+        return this.closest('field-value');
+      }
+    });
+  }
+</script>

app/views/shared/_button_title.html.erb

@@ -2,13 +2,13 @@
   <span class="flex items-center justify-center space-x-2">
     <%= icon %>
     <% if title %>
-      <span><%= title %></span>
+      <span class="<%= local_assigns[:title_class] %>"><%= title %></span>
     <% end %>
   </span>
 </span>
 <span class="disabled">
   <span class="flex items-center justify-center space-x-2">
     <%= local_assigns[:icon_disabled] || svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-    <span><%= disabled_with %>...</span>
+    <span class="<%= local_assigns[:title_class] %>"><%= disabled_with %>...</span>
   </span>
 </span>

app/views/shared/_plausible.html.erb

@@ -1,9 +0,0 @@
-<script defer data-domain="<%= ENV.fetch('PLAUSIBLE_DOMAIN', nil) %>" src="https://plausible.io/js/script.manual.js"></script>
-<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
-<script>
-document.addEventListener("turbo:load", function (e) {
-  if (e.detail.url.match(/sign_in|sign_up|password/)) {
-    plausible('pageview')
-  }
-})
-</script>

app/views/shared/_settings_nav.html.erb

@@ -77,10 +77,17 @@
       <% end %>
       <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
         <li>
-          <%= link_to Docuseal.multitenant? ? console_redirect_index_path : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
-            Console
+          <%= link_to Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/api") : "#{Docuseal::CONSOLE_URL}/on_premise", class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
+            <% if Docuseal.multitenant? %> API <% else %> Console <% end %>
           <% end %>
         </li>
+        <% if Docuseal.multitenant? %>
+          <li>
+            <%= link_to console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/embedding/form"), class: 'text-base hover:bg-base-300', data: { prefetch: false } do %>
+              Embedding
+            <% end %>
+          </li>
+        <% end %>
       <% end %>
     </ul>
   </menu-active>

app/views/start_form/completed.html.erb

@@ -24,9 +24,11 @@
         <%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending', icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %>
       </div>
     <% end %>
-    <div>
-      <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
-    </div>
+    <% if @template.submitters.to_a.size == 1 %>
+      <div>
+        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+      </div>
+    <% end %>
   </div>
 </div>
 <%= render 'shared/attribution', link_path: '/start' %>

app/views/start_form/show.html.erb

@@ -27,7 +27,8 @@
       <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %>
         <div class="form-control !mt-0">
           <%= f.label :email, class: 'label' %>
-          <%= f.email_field :email, value: current_user&.email || params[:email], required: true, class: 'base-input', placeholder: 'Provide your email to start' %>
+          <%= f.email_field :email, value: current_user&.email || params[:email] || @submitter.email, required: true, class: 'base-input', placeholder: 'Provide your email to start' %>
+          <%= @error_message %>
         </div>
         <div class="form-control">
           <%= f.button button_title(title: 'Start', disabled_with: 'Starting'), class: 'base-button' %>

app/views/submissions/_detailed_form.html.erb

@@ -9,7 +9,7 @@
             </a>
           </div>
           <div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4">
-            <% template.submitters.each do |item| %>
+            <% template.submitters.each_with_index do |item, index| %>
               <submitter-item class="form-control">
                 <% if template.submitters.size > 1 %>
                   <label class="label pt-0 pb-1 text-xs">
@@ -18,11 +18,11 @@
                 <% end %>
                 <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                 <submitters-autocomplete data-field="name">
-                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name" required>
+                  <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Name', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.full_name : '' %>
                 </submitters-autocomplete>
                 <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)">
+                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.email : '' %>">
                   </submitters-autocomplete>
                   <submitters-autocomplete data-field="phone">
                     <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Phone (optional)">
@@ -34,10 +34,12 @@
         </div>
       </div>
     </div>
-    <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-      <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-      <span>Add New</span>
-    </a>
+    <% if params[:selfsign].blank? %>
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+        <span>Add New</span>
+      </a>
+    <% end %>
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>

app/views/submissions/_email_form.html.erb

@@ -18,14 +18,14 @@
               </a>
             </div>
             <div class="grid md:grid-cols-2 gap-4">
-              <% template.submitters.each do |item| %>
+              <% template.submitters.each_with_index do |item, index| %>
                 <submitter-item class="form-control">
                   <label class="label pt-0 pb-1 text-xs">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="email">
-                    <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Email" required>
+                    <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Email', required: index.zero?, value: params[:selfsign] && index.zero? ? current_user.email : '' %>
                   </submitters-autocomplete>
                 </submitter-item>
               <% end %>
@@ -33,10 +33,12 @@
           </div>
         </div>
       </div>
-      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-        <span>Add New</span>
-      </a>
+      <% if params[:selfsign].blank? %>
+        <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+          <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+          <span>Add New</span>
+        </a>
+      <% end %>
     </dynamic-list>
   <% end %>
   <div>

app/views/submissions/_logo.html.erb

@@ -0,0 +1 @@
+<%= render 'shared/logo', width: 40, height: 40 %>

app/views/submissions/_phone_form.html.erb

@@ -9,7 +9,7 @@
             </a>
           </div>
           <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
-            <% template.submitters.each do |item| %>
+            <% template.submitters.each_with_index do |item, index| %>
               <submitter-item class="grid <%= template.submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
                 <div class="form-control">
                   <% if template.submitters.size > 1 %>
@@ -19,18 +19,18 @@
                   <% end %>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="phone">
-                    <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Phone" required>
+                    <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Phone', required: index.zero? %>
                   </submitters-autocomplete>
                   <% if template.submitters.size > 1 %>
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   <% end %>
                 </div>
                 <% if template.submitters.size == 1 %>
                   <div class="form-control flex">
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   </div>
                 <% end %>
@@ -40,10 +40,12 @@
         </div>
       </div>
     </div>
-    <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
-      <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
-      <span>Add New</span>
-    </a>
+    <% if params[:selfsign].blank? %>
+      <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
+        <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
+        <span>Add New</span>
+      </a>
+    <% end %>
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>

app/views/submissions/_submitters_order.html.erb

@@ -2,8 +2,8 @@
   <div class="form-control">
     <%= f.label :preserve_order, for: uuid = SecureRandom.uuid, class: 'flex items-center cursor-pointer' do %>
       <%= f.check_box :preserve_order, id: uuid, class: 'base-checkbox', checked: template.submissions.last&.submitters_order.in?(['preserved', nil]) %>
-      <span class="label">Preserve submitters order</span>
-      <span class="tooltip" data-tip="When checked, notifications will be sent to the second submitter once the form is completed by the previous submitter. Uncheck this option to send notifications to all submitters simultaneously right away.">
+      <span class="label">Preserve order</span>
+      <span class="tooltip" data-tip="When checked, notifications will be sent to the second party once the form is completed by the previous party. Uncheck this option to send notifications to all parties simultaneously right away.">
         <%= svg_icon('info_circle', class: 'w-4 h-4') %>
       </span>
     <% end %>

app/views/submissions/_value.html.erb

@@ -1,7 +1,8 @@
-<div class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
+<field-value class="flex absolute text-[1.5vw] lg:text-base" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
   <% if field['type'].in?(['signature', 'image', 'initials']) %>
     <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy">
   <% elsif field['type'] == 'file' %>
+    <autosize-field></autosize-field>
     <div class="px-0.5 flex flex-col justify-center">
       <% Array.wrap(value).each do |val| %>
         <a target="_blank" href="<%= attachments_index[val].url %>">
@@ -11,9 +12,16 @@
       <% end %>
     </div>
   <% elsif field['type'] == 'checkbox' %>
-    <div class="w-full p-[0.2vw] flex items-center justify-center">
+    <div class="w-full flex items-center justify-center">
       <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
     </div>
+  <% elsif field['type'].in?(%w[multiple radio]) && area['option_uuid'] %>
+    <% option = field['options']&.find { |o| o['uuid'] == area['option_uuid'] } %>
+    <% if option && Array.wrap(value).include?(option['value']) %>
+      <div class="w-full flex items-center justify-center">
+        <%= svg_icon('check', class: "aspect-square #{area['w'] > area['h'] ? '!w-auto !h-full' : '!w-full !h-auto'}") %>
+      </div>
+    <% end %>
   <% elsif field['type'] == 'cells' %>
     <% cell_width = area['cell_w'] / area['w'] * 100 %>
     <div class="w-full flex items-center">
@@ -24,10 +32,12 @@
       <% end %>
     </div>
   <% elsif field['type'] == 'date' %>
+    <autosize-field></autosize-field>
     <div class="flex items-center px-0.5">
       <%= l(Date.parse(value), format: :long, locale: local_assigns[:locale]) %>
     </div>
   <% else %>
+    <autosize-field></autosize-field>
     <div class="flex items-center px-0.5 whitespace-pre-wrap"><%= Array.wrap(value).join(', ') %></div>
   <% end %>
-</div>
+</field-value>

app/views/submissions/new.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/turbo_modal', title: 'Add New Recipients' do %>
+<%= render 'shared/turbo_modal', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
   <% options = [['via Email', 'email'], ['via Phone', 'phone'], ['Detailed', 'detailed']] %>
   <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
     <div class="join">

app/views/submissions/show.html.erb

@@ -1,25 +1,27 @@
 <div style="max-width: 1600px" class="mx-auto pl-4">
   <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
-    <a href="<%= template_path(@submission.template) %>" class="flex space-x-3 py-1">
-      <span><%= render 'shared/logo', width: 40, height: 40 %></span>
-      <span class="text-3xl font-semibold focus:text-clip"><%= @submission.template.name %></span>
+    <a href="<%= signed_in? && @submission.template.account_id == current_account&.id ? template_path(@submission.template) : '/' %>" class="flex items-center space-x-3 py-1">
+      <span><%= render 'submissions/logo' %></span>
+      <span class="text-xl md:text-3xl font-semibold focus:text-clip" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;"><%= @submission.template.name %></span>
     </a>
     <div class="space-x-3 flex items-center">
       <% if @submission.audit_trail.present? %>
         <a href="<%= rails_blob_path(@submission.audit_trail) %>" class="white-button" target="_blank">
           <%= svg_icon('external_link', class: 'w-6 h-6') %>
-          Audit Log
+          <span class="hidden md:inline">
+            Audit Log
+          </span>
         </a>
       <% end %>
       <% if last_submitter = @submission.submitters.to_a.select(&:completed_at?).max_by(&:completed_at) %>
         <download-button data-src="<%= submitter_download_index_path(last_submitter.slug) %>" class="base-button">
           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
             <%= svg_icon('download', class: 'w-6 h-6') %>
-            <span>Download</span>
+            <span class="hidden md:inline">Download</span>
           </span>
           <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
             <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %>
-            <span>Downloading</span>
+            <span class="hidden md:inline">Downloading</span>
           </span>
         </download-button>
       <% elsif @submission.submitters.to_a.size == 1 %>
@@ -53,7 +55,7 @@
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.uuid, "#{index}.jpg")) %>
             <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
-              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="shadow-md mb-4" height="<%= page.metadata['height'] %>">
+              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="border rounded mb-4" height="<%= page.metadata['height'] %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">
                 <% document_annots_index[index]&.each do |annot| %>
                   <%= render 'submissions/annotation', annot: %>
@@ -61,7 +63,7 @@
                 <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
                   <% value = values[field['uuid']] %>
                   <% next if value.blank? %>
-                  <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: current_account.locale %>
+                  <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submission.template.account.locale %>
                 <% end %>
               </div>
             </div>
@@ -109,18 +111,18 @@
             <div class="flex items-center space-x-1 mt-1">
               <%= svg_icon('writing', class: 'w-5 h-5') %>
               <span>
-                <%= submitter&.completed_at? ? l(submitter.completed_at.in_time_zone(current_account.timezone), format: :long, locale: current_account.locale) : 'Not completed yet' %>
+                <%= submitter&.completed_at? ? l(submitter.completed_at.in_time_zone(@submission.template.account.timezone), format: :long, locale: @submission.template.account.locale) : 'Not completed yet' %>
               </span>
             </div>
-            <% if submitter && submitter.email && !submitter.completed_at && can?(:update, submitter) %>
+            <% if signed_in? && submitter && submitter.email && !submitter.completed_at && can?(:update, submitter) %>
               <div class="mt-2 mb-1">
                 <%= button_to button_title(title: submitter.sent_at? ? 'Re-send Email' : 'Send Email', disabled_with: 'Sending'), submitter_send_email_index_path(submitter_slug: submitter.slug), class: 'btn btn-sm btn-primary w-full' %>
               </div>
             <% end %>
-            <% if submitter && submitter.phone && !submitter.completed_at && can?(:update, submitter) %>
+            <% if signed_in? && submitter && submitter.phone && !submitter.completed_at && can?(:update, submitter) %>
               <%= render 'send_sms_button', submitter: %>
             <% end %>
-            <% if submitter && !submitter.completed_at? && can?(:create, submitter) %>
+            <% if signed_in? && submitter && !submitter.completed_at? && can?(:create, submitter) %>
               <div class="mt-2 mb-1">
                 <a class="btn btn-sm btn-primary w-full" target="_blank" href="<%= submit_form_path(slug: submitter.slug) %>">
                   Submit Form
@@ -160,7 +162,7 @@
                 <% elsif field['type'] == 'checkbox' %>
                   <%= svg_icon('check', class: 'w-6 h-6') %>
                 <% elsif field['type'] == 'date' %>
-                  <%= l(Date.parse(value), locale: current_account.locale, format: :long) %>
+                  <%= l(Date.parse(value), locale: @submission.template.account.locale, format: :long) %>
                 <% else %>
                   <%= Array.wrap(value).join(', ') %>
                 <% end %>
@@ -172,3 +174,4 @@
     </div>
   </div>
 </div>
+<%= render 'scripts/autosize_field' %>

app/views/submit_form/_banner.html.erb

@@ -1 +1,3 @@
-<%= render 'docuseal_logo' %>
+<div class="flex mt-4">
+  <%= render 'docuseal_logo' %>
+</div>

app/views/submit_form/_submission_form.html.erb

@@ -1,4 +1,4 @@
 <% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
 <% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
-<% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= completed_button_params.to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>"></submission-form>
+<% configs = Submitters::FormConfigs.call(submitter) %>
+<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>"></submission-form>

app/views/submit_form/completed.html.erb

@@ -39,7 +39,7 @@
     <% if @submitter.submission.template.submitters.size == 1 %>
       <div class="divider">OR</div>
       <div>
-        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
+        <%= button_to button_title(title: 'Resubmit', disabled_with: 'Resubmit', icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: true }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %>
       </div>
     <% end %>
   </div>

app/views/submit_form/show.html.erb

@@ -5,9 +5,8 @@
 <div style="max-height: -webkit-fill-available;">
   <div id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
-      <div class="mt-4 flex">
-        <%= render 'banner' %>
-      </div>
+      <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 %>
+      <%= render 'banner' %>
       <% (@submitter.submission.template_schema || @submitter.submission.template.schema).each do |item| %>
         <% document = @submitter.submission.template_schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
         <% document_annots_index = document.metadata.dig('pdf', 'annotations')&.group_by { |e| e['page'] } || {} %>
@@ -22,7 +21,7 @@
                 <%= render 'submissions/annotation', annot: %>
               <% end %>
               <% fields_index.dig(document.uuid, index)&.each do |(area, field)| %>
-                <% value = values[field['uuid']].presence || field['readonly'] ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submitter.submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil %>
+                <% value = values[field['uuid']].presence || (field['readonly'] ? Submitters::SubmitValues.template_default_value_for_submitter(field['default_value'], @submitter.submission.submitters.find { |e| e.uuid == field['submitter_uuid'] }, with_time: false) : nil) %>
                 <% next if value.blank? %>
                 <% next if !field['readonly'] && field['submitter_uuid'] == @submitter.uuid %>
                 <%= render 'submissions/value', area:, field:, attachments_index:, value:, locale: @submitter.submission.template.account.locale %>
@@ -42,3 +41,4 @@
     </div>
   </div>
 </div>
+<%= render 'scripts/autosize_field' %>

app/views/submitter_mailer/documents_copy_email.html.erb

@@ -3,14 +3,10 @@
 <% else %>
   <p>Hi there,</p>
   <p>Please check the copy of your "<%= @submitter.submission.template.name %>" submission in the email attachments.</p>
-  <p>Alternatively, you can download your copy using:</p>
-  <% @documents.each do |document| %>
-    <ul>
-      <li>
-        <%= link_to document.filename.to_s, rails_blob_url(document) %>
-      </li>
-    </ul>
-  <% end %>
+  <p>Alternatively, you can review and download your copy using:</p>
+  <p>
+    <%= link_to @submitter.template.name, submissions_preview_url(@submitter.submission.slug) %>
+  </p>
   <p>
     Thanks,<br><%= @current_account.name %>
   </p>

app/views/templates/_submission.html.erb

@@ -35,7 +35,18 @@
           </button>
         </form>
       <% else %>
-        <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+        <% if current_user.email == submitter.email %>
+          <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
+            <button onclick="event.stopPropagation()" class="btn btn-sm btn-neutral btn-outline bg-white md:w-36 flex">
+              <span class="flex items-center justify-center space-x-2">
+                <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
+                <span class="hidden md:inline">Sign now</span>
+              </span>
+            </button>
+          </form>
+        <% else %>
+          <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+        <% end %>
       <% end %>
       <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
       <% if !submission.deleted_at? && can?(:destroy, submission) %>
@@ -85,7 +96,18 @@
                 </form>
               <% elsif !is_submission_completed %>
                 <div class="flex items-center space-x-3">
-                  <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                  <% if current_user.email == submitter.email %>
+                    <form data-turbo="false" method="get" action="<%= submit_form_url(slug: submitter.slug) %>">
+                      <button onclick="event.stopPropagation()" class="btn btn-xs btn-outline btn-neutral bg-white md:w-36">
+                        <span class="flex items-center justify-center space-x-2">
+                          <%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
+                          <span class="hidden md:inline">Sign now</span>
+                        </span>
+                      </button>
+                    </form>
+                  <% else %>
+                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                  <% end %>
                 </div>
               <% end %>
             </div>

app/views/templates/_template.html.erb

@@ -52,10 +52,10 @@
           </a>
         </span>
       <% end %>
-      <% if (!template.deleted_at? || !Docuseal.multitenant?) && can?(:destroy, template) %>
-        <span class="tooltip tooltip-left" data-tip="<%= template.deleted_at? ? 'Remove' : 'Archive' %>">
-          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, params: { permanently: template.deleted_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
-            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
+      <% if can?(:destroy, template) %>
+        <span class="tooltip tooltip-left" data-tip="<%= template.deleted_at? ? 'Delete' : 'Archive' %>">
+          <%= button_to template_path(template), data: { turbo_confirm: template.deleted_at? ? 'Template deletion is irreversible and will permanently remove all associated signed documents with it. Are you sure?' : 'Are you sure?' }, params: { permanently: template.deleted_at? }.compact_blank, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
+            <%= svg_icon(template.deleted_at? ? 'trash' : 'archive', class: 'w-4 h-4 enabled') %>
             <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
           <% end %>
         </span>

app/views/templates/_title.html.erb

@@ -14,7 +14,7 @@
         </span>
       </a>
       <% if can?(:update, template) %>
-        <span class="pl-1 tooltip tooltip-right opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
+        <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="Move">
           <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
             <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
           </a>
@@ -23,13 +23,16 @@
     </div>
   </div>
   <div class="flex md:justify-between space-x-2 flex-none pt-1">
+    <% if !template.deleted_at? %>
+      <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'btn btn-sm btn-neutral text-white', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link', copied_title: 'Copied', copy_title_md: 'Link', copied_title_md: 'Copied' %>
+    <% end %>
     <% if !template.deleted_at? && can?(:destroy, template) %>
-      <%= button_to button_title(title: 'Remove', disabled_with: 'Removing', icon: svg_icon('trash', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
+      <%= button_to button_title(title: 'Archive', disabled_with: 'Archiving', title_class: 'hidden md:inline', icon: svg_icon('archive', class: 'w-6 h-6')), template_path(template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
     <% end %>
     <% if can?(:create, template) %>
       <%= link_to new_template_path(base_template_id: template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
         <%= svg_icon('copy', class: 'w-6 h-6') %>
-        <span>Clone</span>
+        <span class="hidden md:inline">Clone</span>
       <% end %>
     <% end %>
     <% if !template.deleted_at? && can?(:update, template) %>

app/views/templates/new.html.erb

@@ -4,7 +4,7 @@
       <%= hidden_field_tag :base_template_id, @base_template.id %>
     <% end %>
     <div class="form-control mt-6">
-      <%= f.text_field :name, required: true, placeholder: 'Document Template Name', class: 'base-input' %>
+      <%= f.text_field :name, required: true, placeholder: 'Document Name', class: 'base-input' %>
     </div>
     <div class="mt-3 mb-4 flex items-center justify-between">
       <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">

app/views/templates/show.html.erb

@@ -1,23 +1,18 @@
 <%= render 'title', template: @template %>
 <% is_show_tabs = @pagy.pages > 1 || params[:status].present? %>
-<% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 || params[:q].present? %>
+<% if !@pagy.count.zero? || params[:q].present? %>
   <div class="flex justify-between md:items-end flex-col md:flex-row <%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
     <p class="text-3xl font-bold">Submissions</p>
-    <div class="flex md:space-x-2 mt-3 md:mt-0">
+    <div class="flex justify-end space-x-2 mt-3 md:mt-0">
       <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
         <%= render 'shared/search_input' %>
       <% end %>
-      <%= link_to new_template_submissions_export_path(@template), class: 'order-3 md:order-1 btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+      <%= link_to new_template_submissions_export_path(@template), class: 'btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
         <span>Export</span>
       <% end %>
-      <% if @template.submitters.to_a.size == 1 && !@template.deleted_at? %>
-        <span class="order-1">
-          <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Share Link', copied_title: 'Copied to Clipboard', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
-        </span>
-      <% end %>
       <% if !@template.deleted_at? && can?(:create, Submission) %>
-        <%= link_to new_template_submission_path(@template), class: 'order-1 btn btn-primary text-base', data: { turbo_frame: 'modal' } do %>
+        <%= link_to new_template_submission_path(@template), class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
           <span>Add <span class="hidden md:inline">Recipients</span></span>
         <% end %>
@@ -85,12 +80,19 @@
             <% if can?(:create, Submission) %>
               <%= link_to new_template_submission_path(@template), class: 'base-button mt-6', data: { turbo_frame: 'modal' } do %>
                 <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-                <span class="mr-1">Add Recipients</span>
+                <span class="mr-1">Send to Recipients</span>
               <% end %>
             <% end %>
-            <%= link_to start_form_url(slug: @template.slug), class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
-              <%= svg_icon('writing', class: 'w-6 h-6') %>
-              <span class="mr-1">Sign it Yourself</span>
+            <% if @template.submitters.size == 1 %>
+              <%= link_to start_form_url(slug: @template.slug), class: 'white-button mt-6', target: '_blank', rel: 'noopener' do %>
+                <%= svg_icon('writing', class: 'w-6 h-6') %>
+                <span class="mr-1">Sign it Yourself</span>
+              <% end %>
+            <% else %>
+              <%= link_to new_template_submission_path(@template, selfsign: true), class: 'white-button mt-6', data: { turbo_frame: 'modal' } do %>
+                <%= svg_icon('writing', class: 'w-6 h-6') %>
+                <span class="mr-1">Sign it Yourself</span>
+              <% end %>
             <% end %>
           <% end %>
         </div>

app/views/users/index.html.erb

@@ -3,12 +3,14 @@
   <div class="md:flex-grow">
     <div class="flex justify-between mb-4">
       <h1 class="text-4xl font-bold">Team</h1>
-      <% if can?(:create, User.new(account: current_account)) %>
-        <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %>
-          <%= svg_icon('plus', class: 'w-6 h-6') %>
-          <span>New User</span>
+      <div class="flex items-center space-x-4">
+        <% if can?(:create, User.new(account: current_account)) %>
+          <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %>
+            <%= svg_icon('plus', class: 'w-6 h-6') %>
+            <span>New User</span>
+          <% end %>
         <% end %>
-      <% end %>
+      </div>
     </div>
     <div class="overflow-x-auto">
       <table class="table w-full table-lg rounded-b-none overflow-hidden">

app/views/webhook_settings/show.html.erb

@@ -7,7 +7,7 @@
         <%= form_for @encrypted_config, url: settings_webhooks_path, method: :post, html: { autocomplete: 'off' } do |f| %>
           <%= f.label :value, 'Webhook URL', class: 'text-sm font-semibold' %>
           <div class="flex flex-row flex-wrap space-y-2 md:space-y-0 md:flex-nowrap md:space-x-4 mt-2">
-            <%= f.text_field :value, required: true, class: 'input font-mono input-bordered w-full', placeholder: 'https://example.com/hook' %>
+            <%= f.url_field :value, class: 'input font-mono input-bordered w-full', placeholder: 'https://example.com/hook' %>
             <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button w-full md:w-32' %>
           </div>
         <% end %>

config/application.rb

@@ -22,9 +22,11 @@ module DocuSeal
 
     config.active_storage.routes_prefix = ''
 
-    config.i18n.available_locales = %i[en en-US en-GB es-ES pt-PT de-DE]
+    config.i18n.available_locales = %i[en en-US en-GB es-ES fr-FR pt-PT de-DE]
     config.i18n.fallbacks = [:en]
 
+    config.exceptions_app = ->(env) { ErrorsController.action(:show).call(env) }
+
     config.action_view.frozen_string_literal = true
 
     config.middleware.insert_before ActionDispatch::Static, Rack::Deflater