fix GitHub CI build

Added Elestio as a deployment option

.github/workflows/ci.yml

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

Gemfile

@@ -13,6 +13,7 @@ gem 'devise-two-factor'
 gem 'dotenv', require: false
 gem 'email_typo'
 gem 'faraday'
+gem 'faraday-follow_redirects'
 gem 'google-cloud-storage', require: false
 gem 'hexapdf'
 gem 'image_processing'

Gemfile.lock

@@ -189,6 +189,8 @@ GEM
     faraday-em_http (1.0.0)
     faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
+    faraday-follow_redirects (0.3.0)
+      faraday (>= 1, < 3)
     faraday-httpclient (1.0.1)
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
@@ -580,6 +582,7 @@ DEPENDENCIES
   factory_bot_rails
   faker
   faraday
+  faraday-follow_redirects
   google-cloud-storage
   hexapdf
   image_processing

README.md

@@ -52,8 +52,8 @@ DocuSeal is an open source platform that provides secure and efficient digital d
 | [<img alt="Deploy on Heroku" src="https://www.herokucdn.com/deploy/button.svg" height="40">](https://heroku.com/deploy?template=https://github.com/docusealco/docuseal-heroku) | [<img alt="Deploy on Railway" src="https://railway.app/button.svg" height="40">](https://railway.app/template/IGoDnc?referralCode=ruU7JR)|
 |**DigitalOcean**|**Render**|
 | [<img alt="Deploy on DigitalOcean" src="https://www.deploytodo.com/do-btn-blue.svg" height="40">](https://cloud.digitalocean.com/apps/new?repo=https://github.com/docusealco/docuseal-digitalocean/tree/master&refcode=421d50f53990) | [<img alt="Deploy to Render" src="https://render.com/images/deploy-to-render-button.svg" height="40">](https://render.com/deploy?repo=https://github.com/docusealco/docuseal-render)
-|**Koyeb**|  |
-| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) |  |
+|**Koyeb**|**Elestio**|
+| [<img alt="Deploy on Koyeb" src="https://www.koyeb.com/static/images/deploy/button.svg" height="40">](https://app.koyeb.com/deploy?name=docuseal&type=docker&image=docker.io/docuseal/docuseal&env[PORT]=8000&env[DATABASE_URL]=CHANGE_ME&env[SECRET_KEY_BASE]=CHANGE_ME&ports=8000;http;/) | [<img alt="Deploy on Elestio" src="https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png">](https://dash.elest.io/deploy?soft=DocuSeal&id=339) |
 
 
 #### Docker

app/controllers/api/submissions_controller.rb

@@ -2,9 +2,6 @@
 
 module Api
   class SubmissionsController < ApiBaseController
-    UnknownFieldName = Class.new(StandardError)
-    UnknownSubmitterName = Class.new(StandardError)
-
     load_and_authorize_resource :template
 
     before_action do
@@ -12,68 +9,83 @@ module Api
     end
 
     def create
+      is_send_email = !params[:send_email].in?(['false', false])
+
       submissions =
         if (emails = (params[:emails] || params[:email]).presence)
           Submissions.create_from_emails(template: @template,
                                          user: current_user,
                                          source: :api,
-                                         mark_as_sent: params[:send_email] != 'false',
+                                         mark_as_sent: is_send_email,
                                          emails:)
         else
-          submissions_attrs = normalize_submissions_params!(submissions_params[:submission], @template)
+          submissions_attrs, attachments = normalize_submissions_params!(submissions_params[:submission], @template)
 
           Submissions.create_from_submitters(
             template: @template,
             user: current_user,
             source: :api,
-            mark_as_sent: params[:send_email] != 'false',
+            mark_as_sent: is_send_email,
             submitters_order: params[:submitters_order] || 'preserved',
             submissions_attrs:
           )
         end
 
-      Submissions.send_signature_requests(submissions, send_email: params[:send_email] != 'false')
+      Submissions.send_signature_requests(submissions, send_email: is_send_email)
 
-      render json: submissions.flat_map(&:submitters)
-    rescue UnknownFieldName, UnknownSubmitterName => e
+      submitters = submissions.flat_map(&:submitters)
+
+      save_default_value_attachments!(attachments, submitters)
+
+      render json: submitters
+    rescue Submitters::NormalizeValues::UnknownFieldName, Submitters::NormalizeValues::UnknownSubmitterName => e
       render json: { error: e.message }, status: :unprocessable_entity
     end
 
     private
 
     def submissions_params
-      params.permit(submission: [{ submitters: [[:uuid, :name, :email, :role, :phone, { values: {} }]] }])
+      params.permit(submission: [{
+                      submitters: [[:uuid, :name, :email, :role, :completed, :phone, { values: {} }]]
+                    }])
     end
 
     def normalize_submissions_params!(submissions_params, template)
-      submissions_params.each do |submission|
+      attachments = []
+
+      Array.wrap(submissions_params).each do |submission|
         submission[:submitters].each_with_index do |submitter, index|
           next if submitter[:values].blank?
 
-          submitter[:values] =
-            normalize_submitter_values(template,
-                                       submitter[:values],
-                                       submitter[:role] || template.submitters[index]['name'])
+          values, new_attachments =
+            Submitters::NormalizeValues.call(template,
+                                             submitter[:values],
+                                             submitter[:role] || template.submitters[index]['name'])
+
+          attachments.push(*new_attachments)
+
+          submitter[:values] = values
         end
       end
 
-      submissions_params
+      [submissions_params, attachments]
     end
 
-    def normalize_submitter_values(template, values, submitter_name)
-      submitter =
-        template.submitters.find { |e| e['name'] == submitter_name } ||
-        raise(UnknownSubmitterName, "Unknown submitter: #{submitter_name}")
+    def save_default_value_attachments!(attachments, submitters)
+      return if attachments.blank?
 
-      fields = template.fields.select { |e| e['submitter_uuid'] == submitter['uuid'] }
+      attachments_index = attachments.index_by(&:uuid)
 
-      fields_uuid_index = fields.index_by { |e| e['uuid'] }
-      fields_name_index = fields.index_by { |e| e['name'] }
+      submitters.each do |submitter|
+        submitter.values.to_a.each do |_, value|
+          attachment = attachments_index[value]
 
-      values.transform_keys do |key|
-        next key if fields_uuid_index[key].present?
+          next unless attachment
 
-        fields_name_index[key]&.dig('uuid') || raise(UnknownFieldName, "Unknown field: #{key}")
+          attachment.record = submitter
+
+          attachment.save!
+        end
       end
     end
   end

app/controllers/api/submitters_autocomplete_controller.rb

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

app/controllers/api/template_folders_autocomplete_controller.rb

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

app/controllers/dashboard_controller.rb

@@ -6,17 +6,56 @@ class DashboardController < ApplicationController
   before_action :maybe_redirect_product_url
   before_action :maybe_render_landing
 
+  load_and_authorize_resource :template_folder, parent: false
   load_and_authorize_resource :template, parent: false
 
-  def index
-    @templates = @templates.active.preload(:author).order(id: :desc)
-    @templates = Templates.search(@templates, params[:q])
+  SHOW_TEMPLATES_FOLDERS_THRESHOLD = 9
+  TEMPLATES_PER_PAGE = 12
+  FOLDERS_PER_PAGE = 18
 
-    @pagy, @templates = pagy(@templates, items: 12)
+  def index
+    @template_folders = filter_template_folders(@template_folders)
+
+    @pagy, @template_folders = pagy(
+      @template_folders,
+      items: FOLDERS_PER_PAGE,
+      page: @template_folders.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD ? params[:page] : 1
+    )
+
+    if @pagy.count > SHOW_TEMPLATES_FOLDERS_THRESHOLD
+      @templates = @templates.none
+    else
+      @template_folders = @template_folders.reject { |e| e.name == TemplateFolder::DEFAULT_NAME }
+      @templates = filter_templates(@templates)
+
+      items =
+        if @template_folders.size < 4
+          TEMPLATES_PER_PAGE
+        else
+          (@template_folders.size < 7 ? 9 : 6)
+        end
+
+      @pagy, @templates = pagy(@templates, items:)
+    end
   end
 
   private
 
+  def filter_template_folders(template_folders)
+    rel = template_folders.joins(:active_templates)
+                          .order(id: :desc)
+                          .distinct
+
+    TemplateFolders.search(rel, params[:q])
+  end
+
+  def filter_templates(templates)
+    rel = templates.active.preload(:author).order(id: :desc)
+    rel = rel.where(folder_id: current_account.default_template_folder.id) if params[:q].blank?
+
+    Templates.search(rel, params[:q])
+  end
+
   def maybe_redirect_product_url
     return if !Docuseal.multitenant? || signed_in?
 

app/controllers/start_form_controller.rb

@@ -21,7 +21,6 @@ class StartFormController < ApplicationController
     else
       @submitter.assign_attributes(
         uuid: @template.submitters.first['uuid'],
-        opened_at: Time.current,
         ip: request.remote_ip,
         ua: request.user_agent
       )

app/controllers/submit_form_controller.rb

@@ -15,6 +15,8 @@ class SubmitFormController < ApplicationController
 
     return redirect_to submit_form_completed_path(@submitter.slug) if @submitter.completed_at?
 
+    Submitters::MaybeUpdateDefaultValues.call(@submitter, current_user)
+
     cookies[:submitter_sid] = @submitter.signed_id
   end
 

app/controllers/template_folders_controller.rb

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

app/controllers/templates_archived_controller.rb

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

app/controllers/templates_controller.rb

@@ -31,6 +31,7 @@ class TemplatesController < ApplicationController
   def create
     @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.assign_attributes(@base_template.slice(:fields, :schema, :submitters)) if @base_template
 
     if @template.save

app/controllers/templates_folders_controller.rb

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

app/controllers/templates_uploads_controller.rb

@@ -4,7 +4,9 @@ class TemplatesUploadsController < ApplicationController
   load_and_authorize_resource :template, parent: false
 
   def create
+    @template.account = current_account
     @template.author = current_user
+    @template.folder = TemplateFolders.find_or_create_by_name(current_user, params[:folder_name])
     @template.name = File.basename(params[:files].first.original_filename, '.*')
 
     @template.save!

app/controllers/user_signatures_controller.rb

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

app/javascript/application.js

@@ -15,6 +15,9 @@ import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
+import SubmittersAutocomplete from './elements/submitter_autocomplete'
+import FolderAutocomplete from './elements/folder_autocomplete'
+import SignatureForm from './elements/signature_form'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -43,6 +46,9 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
+window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
+window.customElements.define('folder-autocomplete', FolderAutocomplete)
+window.customElements.define('signature-form', SignatureForm)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {

app/javascript/application.scss

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

app/javascript/elements/folder_autocomplete.js

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

app/javascript/elements/signature_form.js

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

app/javascript/elements/submitter_autocomplete.js

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

app/javascript/form.js

@@ -13,6 +13,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
       authenticityToken: this.dataset.authenticityToken,
       canSendEmail: this.dataset.canSendEmail === 'true',
       isDirectUpload: this.dataset.isDirectUpload === 'true',
+      goToLast: this.dataset.goToLast === 'true',
       isDemo: this.dataset.isDemo === 'true',
       attribution: this.dataset.attribution !== 'false',
       withConfetti: true,

app/javascript/submission_form/area.vue

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

app/javascript/submission_form/completed.vue

@@ -27,6 +27,7 @@
         </span>
       </button>
       <button
+        v-if="!isWebView"
         class="base-button flex items-center space-x-1 w-full"
         :disabled="isDownloading"
         @click.prevent="download"
@@ -122,6 +123,11 @@ export default {
       isDownloading: false
     }
   },
+  computed: {
+    isWebView () {
+      return /webview|wv|ip((?!.*Safari)|(?=.*like Safari))/i.test(window.navigator.userAgent)
+    }
+  },
   async mounted () {
     if (this.withConfetti) {
       const { default: confetti } = await import('canvas-confetti')

app/javascript/submission_form/crop_canvas.js

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

app/javascript/submission_form/form.vue

@@ -256,6 +256,19 @@
             @start="$refs.areas.scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
           />
+          <InitialsStep
+            v-else-if="currentField.type === 'initials'"
+            ref="currentStep"
+            v-model="values[currentField.uuid]"
+            :field="currentField"
+            :is-direct-upload="isDirectUpload"
+            :attachments-index="attachmentsIndex"
+            :submitter-slug="submitterSlug"
+            @attached="attachments.push($event)"
+            @start="$refs.areas.scrollIntoField(currentField)"
+            @focus="$refs.areas.scrollIntoField(currentField)"
+            @minimize="isFormVisible = false"
+          />
           <AttachmentStep
             v-else-if="currentField.type === 'file'"
             v-model="values[currentField.uuid]"
@@ -328,6 +341,7 @@
 import FieldAreas from './areas'
 import ImageStep from './image_step'
 import SignatureStep from './signature_step'
+import InitialsStep from './initials_step'
 import AttachmentStep from './attachment_step'
 import MultiSelectStep from './multi_select_step'
 import PhoneStep from './phone_step'
@@ -342,6 +356,7 @@ export default {
     ImageStep,
     SignatureStep,
     AttachmentStep,
+    InitialsStep,
     MultiSelectStep,
     IconInnerShadowTop,
     IconArrowsDiagonal,
@@ -400,6 +415,11 @@ export default {
       required: false,
       default: false
     },
+    goToLast: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDemo: {
       type: Boolean,
       required: false,
@@ -439,7 +459,8 @@ export default {
       if (this.recalculateButtonDisabledKey) {
         return this.isSubmitting ||
         (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
-        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
+        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted) ||
+        (this.currentField.required && this.currentField.type === 'initials' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isInitialsStarted)
       } else {
         return false
       }
@@ -472,10 +493,12 @@ export default {
     }
   },
   mounted () {
-    this.currentStep = Math.min(
-      this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
-      this.stepFields.length - 1
-    )
+    if (this.goToLast) {
+      this.currentStep = Math.min(
+        this.stepFields.indexOf([...this.stepFields].reverse().find((fields) => fields.some((f) => !!this.values[f.uuid]))) + 1,
+        this.stepFields.length - 1
+      )
+    }
 
     if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
       this.$nextTick(() => {
@@ -566,7 +589,7 @@ export default {
     async submitStep () {
       this.isSubmitting = true
 
-      const stepPromise = ['signature', 'phone'].includes(this.currentField.type)
+      const stepPromise = ['signature', 'phone', 'initials'].includes(this.currentField.type)
         ? this.$refs.currentStep.submit
         : () => Promise.resolve({})
 

app/javascript/submission_form/i18n.js

@@ -10,6 +10,13 @@ const en = {
   or_drag_and_drop_files: 'or drag and drop files',
   send_copy_via_email: 'Send copy via email',
   download: 'Download',
+  signature: 'Signature',
+  initials: 'Initials',
+  clear: 'Clear',
+  redraw: 'Redraw',
+  draw_initials: 'Draw initials',
+  type_signature_here: 'Type signature here',
+  type_initial_here: 'Type initials here',
   form_has_been_completed: 'Form has been completed!',
   create_a_free_account: 'Create a Free Account',
   signed_with: 'Signed with',
@@ -36,6 +43,13 @@ const es = {
   or_drag_and_drop_files: 'o arrastra y suelta archivos',
   send_copy_via_email: 'Enviar copia por correo electrónico',
   download: 'Descargar',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  clear: 'Borrar',
+  redraw: 'Redibujar',
+  draw_initials: 'Dibujar iniciales',
+  type_signature_here: 'Escribe la firma aquí',
+  type_initial_here: 'Escribe las iniciales aquí',
   form_has_been_completed: '¡El formulario ha sido completado!',
   create_a_free_account: 'Crear una Cuenta Gratuita',
   signed_with: 'Firmado con',
@@ -62,6 +76,13 @@ const it = {
   or_drag_and_drop_files: 'oppure trascina e rilascia i file',
   send_copy_via_email: 'Invia copia via email',
   download: 'Scarica',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  clear: 'Cancella',
+  redraw: 'Ridisegna',
+  draw_initials: 'Disegna iniziali',
+  type_signature_here: 'Scrivi la firma qui',
+  type_initial_here: 'Scrivi le iniziali qui',
   form_has_been_completed: 'Il modulo è stato completato!',
   create_a_free_account: 'Crea un Account Gratuito',
   signed_with: 'Firmato con',
@@ -88,6 +109,13 @@ const de = {
   or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
   send_copy_via_email: 'Kopie per E-Mail senden',
   download: 'Herunterladen',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  clear: 'Löschen',
+  redraw: 'Neu zeichnen',
+  draw_initials: 'Initialen zeichnen',
+  type_signature_here: 'Unterschrift hier eingeben',
+  type_initial_here: 'Initialen hier eingeben',
   form_has_been_completed: 'Formular wurde ausgefüllt!',
   create_a_free_account: 'Kostenloses Konto erstellen',
   signed_with: 'Unterschrieben mit',
@@ -114,6 +142,13 @@ const fr = {
   or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
   send_copy_via_email: 'Envoyer une copie par e-mail',
   download: 'Télécharger',
+  signature: 'Signature',
+  initials: 'Initiales',
+  clear: 'Effacer',
+  redraw: 'Redessiner',
+  draw_initials: 'Dessiner les initiales',
+  type_signature_here: 'Tapez la signature ici',
+  type_initial_here: 'Tapez les initiales ici',
   form_has_been_completed: 'Le formulaire a été complété !',
   create_a_free_account: 'Créer un Compte Gratuit',
   signed_with: 'Signé avec',
@@ -140,6 +175,13 @@ const pl = {
   or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
   send_copy_via_email: 'Wyślij kopię drogą mailową',
   download: 'Pobierz',
+  signature: 'Podpis',
+  initials: 'Inicjały',
+  clear: 'Wyczyść',
+  redraw: 'Przerysuj',
+  draw_initials: 'Narysuj inicjały',
+  type_signature_here: 'Wpisz podpis tutaj',
+  type_initial_here: 'Wpisz inicjały tutaj',
   form_has_been_completed: 'Formularz został wypełniony!',
   create_a_free_account: 'Utwórz darmowe konto',
   signed_with: 'Podpisane za pomocą',
@@ -166,6 +208,13 @@ const uk = {
   or_drag_and_drop_files: 'або перетягніть файли сюди',
   send_copy_via_email: 'Надіслати копію електронною поштою',
   download: 'Завантажити',
+  signature: 'Підпис',
+  initials: 'Ініціали',
+  clear: 'Очистити',
+  redraw: 'Перемалювати',
+  draw_initials: 'Намалювати ініціали',
+  type_signature_here: 'Введіть підпис тут',
+  type_initial_here: 'Введіть ініціали тут',
   form_has_been_completed: 'Форму заповнено!',
   create_a_free_account: 'Створити безкоштовний обліковий запис',
   signed_with: 'Підписано за допомогою',
@@ -192,6 +241,13 @@ const cs = {
   or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
   send_copy_via_email: 'Odeslat kopii e-mailem',
   download: 'Stáhnout',
+  signature: 'Podpis',
+  initials: 'Iniciály',
+  clear: 'Smazat',
+  redraw: 'Překreslit',
+  draw_initials: 'Nakreslit iniciály',
+  type_signature_here: 'Sem zadejte podpis',
+  type_initial_here: 'Sem zadejte iniciály',
   form_has_been_completed: 'Formulář byl dokončen!',
   create_a_free_account: 'Vytvořit bezplatný účet',
   signed_with: 'Podepsáno pomocí',
@@ -218,6 +274,13 @@ const pt = {
   or_drag_and_drop_files: 'ou arraste e solte arquivos',
   send_copy_via_email: 'Enviar cópia por e-mail',
   download: 'Baixar',
+  signature: 'Assinatura',
+  initials: 'Iniciais',
+  clear: 'Limpar',
+  redraw: 'Redesenhar',
+  draw_initials: 'Desenhar iniciais',
+  type_signature_here: 'Digite a assinatura aqui',
+  type_initial_here: 'Digite as iniciais aqui',
   form_has_been_completed: 'O formulário foi concluído!',
   create_a_free_account: 'Criar uma Conta Gratuita',
   signed_with: 'Assinado com',

app/javascript/submission_form/initials_step.vue

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

app/javascript/submission_form/signature_step.vue

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

app/javascript/template_builder/builder.vue

@@ -28,7 +28,7 @@
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary"
+            class="btn btn-primary text-base"
           >
             <IconUsersPlus
               width="20"
@@ -46,12 +46,12 @@
           >
             <IconInnerShadowTop
               v-if="isSaving"
-              width="20"
+              width="22"
               class="animate-spin"
             />
             <IconDeviceFloppy
               v-else
-              width="20"
+              width="22"
             />
             <span class="hidden md:inline">
               Save
@@ -391,6 +391,10 @@ export default {
         this.drawField.areas.push(area)
 
         this.drawField = null
+
+        this.selectedAreaRef.value = area
+
+        this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
         const pageMask = documentRef.pageRefs[area.page].$refs.mask
@@ -401,33 +405,37 @@ export default {
           const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
           const previousArea = previousField?.areas?.[previousField.areas.length - 1]
 
-          const areaW = previousArea?.w || (30 / pageMask.clientWidth)
-          const areaH = previousArea?.h || (30 / pageMask.clientHeight)
+          if (previousArea || area.w) {
+            const areaW = previousArea?.w || (30 / pageMask.clientWidth)
+            const areaH = previousArea?.h || (30 / pageMask.clientHeight)
 
-          if ((pageMask.clientWidth * area.w) < 5) {
-            area.x = area.x - (areaW / 2)
-            area.y = area.y - (areaH / 2)
+            if ((pageMask.clientWidth * area.w) < 5) {
+              area.x = area.x - (areaW / 2)
+              area.y = area.y - (areaH / 2)
+            }
+
+            area.w = areaW
+            area.h = areaH
+          }
+        }
+
+        if (area.w) {
+          const field = {
+            name: '',
+            uuid: v4(),
+            required: type !== 'checkbox',
+            type,
+            submitter_uuid: this.selectedSubmitter.uuid,
+            areas: [area]
           }
 
-          area.w = areaW
-          area.h = areaH
-        }
+          this.template.fields.push(field)
 
-        const field = {
-          name: '',
-          uuid: v4(),
-          required: type !== 'checkbox',
-          type,
-          submitter_uuid: this.selectedSubmitter.uuid,
-          areas: [area]
-        }
+          this.selectedAreaRef.value = area
 
-        this.template.fields.push(field)
+          this.save()
+        }
       }
-
-      this.selectedAreaRef.value = area
-
-      this.save()
     },
     onDropfield (area) {
       const field = {
@@ -473,6 +481,11 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
           }
+        } else if (this.dragFieldType === 'initials') {
+          baseArea = {
+            w: area.maskW / 10 / area.maskW,
+            h: area.maskW / 35 / area.maskW
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,

app/javascript/template_builder/contenteditable.vue

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

app/javascript/template_builder/field.vue

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

app/javascript/template_builder/field_submitter.vue

@@ -25,6 +25,7 @@
           v-model="selectedSubmitter.name"
           class="cursor-text"
           :icon-inline="true"
+          :select-on-edit-click="true"
           :icon-width="18"
           @update:model-value="$emit('name-change', selectedSubmitter)"
         />

app/javascript/template_builder/field_type.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -75,6 +75,7 @@ export default {
       return {
         text: 'Text',
         signature: 'Signature',
+        initials: 'Initials',
         date: 'Date',
         image: 'Image',
         file: 'File',
@@ -90,14 +91,15 @@ export default {
       return {
         text: IconTextSize,
         signature: IconWritingSign,
+        initials: IconLetterCaseUpper,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
-        cells: IconColumns3,
-        multiple: IconChecks,
         radio: IconCircleDot,
+        multiple: IconChecks,
+        cells: IconColumns3,
         phone: IconPhoneCheck
       }
     }

app/javascript/template_builder/fields.vue

@@ -73,7 +73,7 @@
       </button>
       <div
         v-else
-        class="tooltip flex"
+        class="tooltip tooltip-bottom-end flex"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a

app/models/account.rb

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

app/models/template.rb

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

app/models/template_folder.rb

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

app/models/user.rb

@@ -52,6 +52,7 @@ 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 :user_configs, dependent: :destroy
 
   devise :two_factor_authenticatable, :recoverable, :rememberable, :validatable, :trackable
   devise :registerable, :omniauthable, omniauth_providers: [:google_oauth2] if Docuseal.multitenant?

app/models/user_config.rb

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

app/views/dashboard/index.html.erb

@@ -1,9 +1,9 @@
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
-<% if @pagy.count > 0 || params[:q].present? %>
+<% if @pagy.count > 0 || params[:q].present? || @template_folders.present? %>
   <div class="flex justify-between mb-4 items-center">
     <h1 class="text-4xl font-bold"><span class="hidden md:inline">Document</span> Templates</h1>
     <div class="flex space-x-2">
-      <% if params[:q].present? || @pagy.pages > 1 %>
+      <% if params[:q].present? || @pagy.pages > 1 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>
       <% if can?(:create, ::Template) %>
@@ -15,17 +15,31 @@
       <% end %>
     </div>
   </div>
-  <% if @pagy.count > 0 %>
-    <div class="grid gap-4 md:grid-cols-3">
-      <%= render partial: 'templates/template', collection: @templates %>
+  <% view_archived_html = capture do %>
+    <% if current_account.templates.where.not(deleted_at: nil).exists? %>
+      <div>
+        <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
+      </div>
+    <% end %>
+  <% end %>
+  <% if @template_folders.present? %>
+    <div class="grid gap-4 md:grid-cols-3 <%= 'mb-6' if @templates.present? %>">
+      <%= render partial: 'template_folders/folder', collection: @template_folders, as: :folder %>
     </div>
-    <% view_archived_html = capture do %>
-      <% if current_account.templates.where.not(deleted_at: nil).exists? %>
-        <div>
-          <a href="<%= templates_archived_index_path %>" class="link text-sm">View Archived</a>
+    <% if @templates.blank? %>
+      <% if @pagy.pages > 1 %>
+        <%= render 'shared/pagination', pagy: @pagy, left_additional_html: view_archived_html %>
+      <% elsif params[:q].blank? %>
+        <div class="mt-2">
+          <%= view_archived_html %>
         </div>
       <% end %>
     <% end %>
+  <% end %>
+  <% if @templates.present? %>
+    <div class="grid gap-4 md:grid-cols-3">
+      <%= render partial: 'templates/template', collection: @templates %>
+    </div>
     <% if @pagy.pages > 1 %>
       <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates', left_additional_html: view_archived_html %>
     <% else %>

app/views/esign_settings/show.html.erb

@@ -1,6 +1,6 @@
-<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0 md:space-x-10">
+<div class="flex-wrap space-y-4 md:flex md:flex-nowrap md:space-y-0 md:space-x-10">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow">
+  <div class="md:flex-grow">
     <div class="max-w-xl">
       <h1 class="text-4xl font-bold mb-4">PDF Signature</h1>
       <div id="result">

app/views/icons/_arrow_up_right.html.erb

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M17 7l-10 10"></path>
+  <path d="M8 7l9 0l0 9"></path>
+</svg>

app/views/icons/_folder.html.erb

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+</svg>

app/views/icons/_folder_share.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M13 19h-8a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v4"></path>
+  <path d="M16 22l5 -5"></path>
+  <path d="M21 21.5v-4.5h-4.5"></path>
+</svg>

app/views/icons/_pencil_share.html.erb

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"></path>
+  <path d="M13.5 6.5l4 4"></path>
+  <path d="M16 22l5 -5"></path>
+  <path d="M21 21.5v-4.5h-4.5"></path>
+</svg>

app/views/profile/index.html.erb

@@ -21,6 +21,14 @@
         <%= f.button button_title(title: 'Update', disabled_with: 'Updating'), class: 'base-button' %>
       </div>
     <% end %>
+    <p class="text-2xl font-bold mt-8 mb-4">Signature</p>
+    <% signature = UserConfigs.load_signature(current_user) %>
+    <% if signature %>
+      <div class="flex justify-center mb-4">
+        <img src="<%= signature.url %>" style="max-height: 200px; width: auto" width="<%= signature.metadata['width'] %>" height="<%= signature.metadata['height'] %>">
+      </div>
+    <% end %>
+    <a href="<%= edit_user_signature_path %>" data-turbo-frame="modal" class="base-button w-full">Update Signature</a>
     <p class="text-2xl font-bold mt-8 mb-4">Change Password</p>
     <%= form_for current_user, url: update_password_settings_profile_index_path, method: :patch, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
       <div class="form-control">

app/views/shared/_pagination.html.erb

@@ -2,7 +2,7 @@
 <% if @pagy.pages > 1 %>
   <div class="flex my-6 justify-center md:justify-between">
     <div class="hidden md:block text-sm">
-      <%= @pagy.from %>-<%= @pagy.to %> of <%= @pagy.count %> <%= local_assigns[:items_name] || 'items' %>
+      <%= @pagy.from %>-<%= local_assigns.fetch(:to, @pagy.to) %> of <%= local_assigns.fetch(:count, @pagy.count) %> <%= local_assigns[:items_name] || 'items' %>
       <%= local_assigns[:left_additional_html] %>
     </div>
     <div class="join">

app/views/shared/_search_input.html.erb

@@ -1,5 +1,12 @@
 <form action="<%= request.path %>" method="get" class="items-center hidden md:flex">
-  <input id="search" name="q" value="<%= params[:q] %>" class="input input-ghost text-lg pr-10 -mr-12">
+  <div class="relative">
+    <% if params[:q].present? %>
+      <a href="<%= request.path %>" title="Clear" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-auto text-neutral text-2xl font-extralight">
+        &times;
+      </a>
+    <% end %>
+  </div>
+  <input id="search" name="q" value="<%= params[:q] %>" class="input input-ghost text-lg pr-10 -mr-12 <%= 'pl-8 input-bordered' if params[:q].present? %>">
   <button type="submit" title="Search" class="btn btn-ghost btn-circle" onclick="window.search.value || document.activeElement === window.search ? null : [event.preventDefault(), window.search.focus()]">
     <span class="enabled">
       <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>

app/views/shared/_settings_nav.html.erb

@@ -10,7 +10,7 @@
         <%= link_to 'Account', settings_account_path, class: 'text-base hover:bg-base-300' %>
       </li>
       <% unless Docuseal.multitenant? %>
-        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::EMAIL_SMTP_KEY, account: current_account)) %>
+        <% if can?(:read, EncryptedConfig.new(key: EncryptedConfig::EMAIL_SMTP_KEY, account: current_account)) && ENV['SMTP_ADDRESS'].blank? %>
           <li>
             <%= link_to 'Email', settings_email_index_path, class: 'text-base hover:bg-base-300' %>
           </li>

app/views/start_form/show.html.erb

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

app/views/submissions/_detailed_form.html.erb

@@ -10,19 +10,25 @@
           </div>
           <div class="grid <%= 'md:grid-cols-2' if template.submitters.size > 1 %> gap-4">
             <% template.submitters.each do |item| %>
-              <div class="form-control">
+              <submitter-item class="form-control">
                 <% if template.submitters.size > 1 %>
                   <label class="label pt-0 pb-1 text-xs">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                 <% end %>
                 <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
-                <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered" placeholder="Name" required>
+                <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>
+                </submitters-autocomplete>
                 <div class="grid <%= 'md:grid-cols-2 gap-1' if template.submitters.size == 1 %>">
-                  <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5" placeholder="Email (optional)">
-                  <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" placeholder="Phone (optional)">
+                  <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)">
+                  </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)">
+                  </submitters-autocomplete>
                 </div>
-              </div>
+              </submitter-item>
             <% end %>
           </div>
         </div>

app/views/submissions/_email_form.html.erb

@@ -1,10 +1,12 @@
 <%= form_for '', url: template_submissions_path(template), html: { class: 'space-y-4', autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
   <% if template.submitters.size == 1 %>
-    <div class="form-control">
-      <autoresize-textarea>
-        <%= f.text_area :emails, required: true, class: 'base-textarea w-full', placeholder: 'Type emails here...' %>
-      </autoresize-textarea>
-    </div>
+    <submitter-item class="form-control">
+      <submitters-autocomplete data-field="email">
+        <autoresize-textarea>
+          <%= f.text_area :emails, required: true, class: 'base-textarea w-full', placeholder: 'Type emails here...' %>
+        </autoresize-textarea>
+      </submitters-autocomplete>
+    </submitter-item>
   <% else %>
     <dynamic-list class="space-y-4">
       <div class="space-y-4">
@@ -17,13 +19,15 @@
             </div>
             <div class="grid md:grid-cols-2 gap-4">
               <% template.submitters.each do |item| %>
-                <div class="form-control">
+                <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'] %>">
-                  <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered" placeholder="Email" required>
-                </div>
+                  <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>
+                  </submitters-autocomplete>
+                </submitter-item>
               <% end %>
             </div>
           </div>

app/views/submissions/_phone_form.html.erb

@@ -8,25 +8,33 @@
               <%= svg_icon('trash', class: 'w-4 h-4') %>
             </a>
           </div>
-          <div class="grid md:grid-cols-2 <%= template.submitters.size > 1 ? 'gap-4' : 'gap-1' %>">
+          <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
             <% template.submitters.each do |item| %>
-              <div class="form-control">
-                <% if template.submitters.size > 1 %>
-                  <label class="label pt-0 pb-1 text-xs">
-                    <span class="label-text"> <%= item['name'] %></span>
-                  </label>
-                <% end %>
-                <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
-                <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" placeholder="Phone" required>
-                <% if template.submitters.size > 1 %>
-                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5" placeholder="Name (optional)">
-                <% end %>
-              </div>
-              <% if template.submitters.size == 1 %>
-                <div class="form-control flex">
-                  <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered" placeholder="Name (optional)">
+              <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 %>
+                    <label class="label pt-0 pb-1 text-xs">
+                      <span class="label-text"> <%= item['name'] %></span>
+                    </label>
+                  <% 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>
+                  </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)">
+                    </submitters-autocomplete>
+                  <% end %>
                 </div>
-              <% end %>
+                <% 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)">
+                    </submitters-autocomplete>
+                  </div>
+                <% end %>
+              </submitter-item>
             <% end %>
           </div>
         </div>
@@ -37,8 +45,10 @@
       <span>Add New</span>
     </a>
   </dynamic-list>
-  <%= render 'send_sms', f: %>
-  <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
+  <div>
+    <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>
+    <%= render 'send_sms', f: %>
+  </div>
   <div class="form-control">
     <%= f.button button_title(title: 'Add Recipients'), class: 'base-button' %>
   </div>

app/views/submissions/_value.html.erb

@@ -1,5 +1,5 @@
 <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 %>%">
-  <% if field['type'].in?(['signature', 'image']) %>
+  <% if field['type'].in?(['signature', 'image', 'initials']) %>
     <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy">
   <% elsif field['type'] == 'file' %>
     <div class="px-0.5 flex flex-col justify-center">

app/views/submissions/show.html.erb

@@ -136,8 +136,8 @@
                 <%= field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}" %>
               </div>
               <div>
-                <% if field['type'] == 'signature' %>
-                  <div class="w-full bg-base-300">
+                <% if field['type'].in?(%w[signature initials]) %>
+                  <div class="w-full bg-base-300 py-1">
                     <img class="object-contain mx-auto" height="<%= attachments_index[value].metadata['height'] %>" width="<%= attachments_index[value].metadata['width'] %>" src="<%= attachments_index[value].url %>" loading="lazy">
                   </div>
                 <% elsif field['type'] == 'image' %>

app/views/submit_form/_submission_form.html.erb

@@ -1,3 +1,3 @@
 <% 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 %>
-<submission-form data-is-demo="<%= Docuseal.demo? %>" 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>
+<submission-form data-is-demo="<%= Docuseal.demo? %>" 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>

app/views/template_folders/_folder.html.erb

@@ -0,0 +1,12 @@
+<% is_long = folder.name.size > 32 %>
+<a href="<%= folder_path(folder) %>" class="flex h-full flex-col justify-between rounded-2xl py-5 px-6 w-full bg-base-200">
+  <% if !is_long %>
+    <%= svg_icon('folder', class: 'w-6 h-6') %>
+  <% end %>
+  <div class="text-lg font-semibold mt-1" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <%= is_long ? 2 : 1 %>;">
+    <% if is_long %>
+      <%= svg_icon('folder', class: 'w-6 h-6 inline') %>
+    <% end %>
+    <%= folder.name %>
+  </div>
+</a>

app/views/template_folders/edit.html.erb

@@ -0,0 +1,10 @@
+<%= render 'shared/turbo_modal', title: 'Rename Folder' do %>
+  <%= form_for @template_folder, url: folder_path(@template_folder), data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+    <div class="form-control my-6">
+      <%= f.text_field :name, required: true, placeholder: 'Folder Name...', class: 'base-input w-full', autofocus: true %>
+    </div>
+    <div class="form-control">
+      <%= f.button button_title(title: 'Rename', disabled_with: 'Saving'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

app/views/template_folders/show.html.erb

@@ -0,0 +1,45 @@
+<div>
+  <%= link_to root_path do %>
+    &larr;
+    <span>Home</span>
+  <% end %>
+</div>
+<div class="flex justify-between mb-4 items-center">
+  <h1 class="text-4xl font-bold flex items-center space-x-2">
+    <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
+    <span class="peer">
+      <%= @template_folder.name %>
+    </span>
+    <% if can?(:update, @template_folder) && @template_folder.name != TemplateFolder::DEFAULT_NAME %>
+      <span class="pl-1 opacity-0 hover:opacity-100 peer-hover:opacity-100">
+        <a href="<%= edit_folder_path(@template_folder) %>" data-turbo-frame="modal">
+          <%= svg_icon('pencil', class: 'w-7 h-7') %>
+        </a>
+      </span>
+    <% end %>
+  </h1>
+  <div class="flex space-x-2">
+    <% if params[:q].present? || @pagy.pages > 1 %>
+      <%= render 'shared/search_input' %>
+    <% end %>
+    <% if can?(:create, ::Template) %>
+      <%= render 'templates/upload_button', folder_name: @template_folder.name %>
+      <%= link_to new_template_path(folder_name: @template_folder.name), class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
+        <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+        <span class="hidden md:block">Create</span>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+<% if @pagy.count > 0 %>
+  <div class="grid gap-4 md:grid-cols-3">
+    <%= render partial: 'templates/template', collection: @templates %>
+  </div>
+  <%= render 'shared/pagination', pagy: @pagy, items_name: 'templates' %>
+<% elsif params[:q].present? %>
+  <div class="text-center">
+    <div class="mt-16 text-3xl font-semibold">
+      Templates not Found
+    </div>
+  </div>
+<% end %>

app/views/templates/_template.html.erb

@@ -8,33 +8,58 @@
         <%= svg_icon('user', class: 'w-4 h-4') %>
         <span><%= template.author.full_name.presence || template.author.email %></span>
       </p>
-      <p class="flex items-center space-x-1 text-xs text-base-content/60">
-        <%= svg_icon('calendar', class: 'w-4 h-4') %>
-        <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
+      <p class="flex text-xs text-base-content/60">
+        <span class="flex items-center space-x-1 w-1/2">
+          <%= svg_icon('calendar', class: 'w-4 h-4') %>
+          <span><%= l(template.created_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %></span>
+        </span>
+        <% if template.deleted_at? %>
+          <span class="flex items-center space-x-1 w-1/2">
+            <%= svg_icon('folder', class: 'w-4 h-4 flex-shrink-0') %>
+            <span class="truncate"><%= template.folder.name %></span>
+          </span>
+        <% end %>
       </p>
     </div>
   </a>
-  <div class="absolute top-0 bottom-0 w-0 pt-7 space-y-1.5 hidden md:group-hover:block" style="right: 40px">
-    <% if template.deleted_at? && can?(:update, template) %>
-      <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
-        <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
-        <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+  <div class="absolute top-0 bottom-0 w-0 flex items-center hidden md:group-hover:flex" style="right: 37px">
+    <div class="space-y-1">
+      <% if can?(:update, template) && !template.deleted_at? %>
+        <span class="tooltip tooltip-left" data-tip="Move">
+          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('folder_share', class: 'w-4 h-4') %>
+          </a>
+        </span>
       <% end %>
-    <% elsif can?(:update, template) %>
-      <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-        <%= svg_icon('pencil', class: 'w-4 h-4') %>
-      </a>
-    <% end %>
-    <% if can?(:create, template) %>
-      <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
-        <%= svg_icon('copy', class: 'w-4 h-4') %>
-      </a>
-    <% end %>
-    <% if !template.deleted_at? && can?(:destroy, template) %>
-      <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
-        <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
-        <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+      <% if template.deleted_at? && can?(:update, template) %>
+        <span class="tooltip tooltip-left" data-tip="Restore">
+          <%= button_to template_restore_index_path(template), class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle' do %>
+            <%= svg_icon('rotate', class: 'w-4 h-4 enabled') %>
+            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <% end %>
+        </span>
+      <% elsif can?(:update, template) %>
+        <span class="tooltip tooltip-left" data-tip="Edit">
+          <a href="<%= edit_template_path(template) %>" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('pencil', class: 'w-4 h-4') %>
+          </a>
+        </span>
       <% end %>
-    <% end %>
+      <% if can?(:create, template) %>
+        <span class="tooltip tooltip-left" data-tip="Clone">
+          <a href="<%= new_template_path(base_template_id: template.id) %>" data-turbo-frame="modal" class="btn btn-xs hover:btn-outline bg-base-200 btn-circle">
+            <%= svg_icon('copy', class: 'w-4 h-4') %>
+          </a>
+        </span>
+      <% end %>
+      <% if !template.deleted_at? && can?(:destroy, template) %>
+        <span class="tooltip tooltip-left" data-tip="Archive">
+          <%= button_to template_path(template), data: { turbo_confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-xs hover:btn-outline bg-base-200 btn-circle', aria_label: 'Restore' do %>
+            <%= svg_icon('trash', class: 'w-4 h-4 enabled') %>
+            <%= svg_icon('loader', class: 'w-4 h-4 animate-spin disabled') %>
+          <% end %>
+        </span>
+      <% end %>
+    </div>
   </div>
 </div>

app/views/templates/_title.html.erb

@@ -1,11 +1,28 @@
-<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-center mb-8">
-  <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-    <%= template.name %>
-    <% if template.deleted_at? %>
-      <span class="badge badge-outline badge-lg align-middle">Archived</span>
-    <% end %>
-  </h1>
-  <div class="flex md:justify-between space-x-2 flex-none">
+<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-start mb-3">
+  <div>
+    <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
+      <%= template.name %>
+      <% if template.deleted_at? %>
+        <span class="badge badge-outline badge-lg align-middle">Archived</span>
+      <% end %>
+    </h1>
+    <div class="flex items-center">
+      <a href="<%= folder_path(@template.folder) %>" class="flex items-center space-x-1 mt-1 peer">
+        <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0') %>
+        <span class="text-sm">
+          <%= @template.folder.name %>
+        </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">
+          <a href="<%= edit_template_folder_path(template.id) %>" data-turbo-frame="modal">
+            <%= svg_icon('pencil_share', class: 'w-5 h-5') %>
+          </a>
+        </span>
+      <% end %>
+    </div>
+  </div>
+  <div class="flex md:justify-between space-x-2 flex-none pt-1">
     <% 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?' } %>
     <% end %>

app/views/templates/_upload_button.html.erb

@@ -14,4 +14,5 @@
     </span>
   </button>
   <input id="upload_template" name="files[]" class="hidden" onchange="this.form.requestSubmit()" type="file" accept="image/*, application/pdf<%= ', .docx, .doc, .xlsx, .xls' if Docuseal.multitenant? %>" multiple>
+  <input hidden name="folder_name" value="<%= local_assigns[:folder_name] %>">
 <% end %>

app/views/templates/new.html.erb

@@ -1,12 +1,23 @@
 <%= render 'shared/turbo_modal', title: @base_template ? 'Clone Template' : 'New Document Template' do %>
-  <%= form_for @template, data: { turbo_frame: :_top } do |f| %>
+  <%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
     <% if @base_template %>
       <%= hidden_field_tag :base_template_id, @base_template.id %>
     <% end %>
-    <div class="form-control my-6">
+    <div class="form-control mt-6">
       <%= f.text_field :name, required: true, placeholder: 'Template Name', class: 'base-input' %>
     </div>
-    <div class="form-control mt-4">
+    <div class="mt-3 mb-4 flex items-center justify-between">
+      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
+        <%= svg_icon('folder', class: 'w-6 h-6') %>
+      </a>
+      <folder-autocomplete class="flex justify-between w-full">
+        <input id="folder_name" type="text" class="w-64 outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
+        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="link peer-focus:hidden mr-1.5">
+          Change Folder
+        </a>
+      </folder-autocomplete>
+    </div>
+    <div class="form-control">
       <%= f.button button_title(title: @base_template ? 'Submit' : 'Create', disabled_with: 'Creating'), class: 'base-button' %>
     </div>
   <% end %>

app/views/templates/show.html.erb

@@ -1,5 +1,5 @@
 <%= render 'title', template: @template %>
-<% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 %>
+<% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 || params[:q].present? %>
   <div class="flex justify-between mb-6 md:items-end flex-col md:flex-row">
     <p class="text-3xl font-bold">Submissions</p>
     <div class="flex space-x-2 mt-3 md:mt-0">

app/views/templates_archived/index.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= link_to root_path(@template) do %>
+  <%= link_to root_path do %>
     &larr;
     <span>Back to Active</span>
   <% end %>

app/views/templates_folders/edit.html.erb

@@ -0,0 +1,12 @@
+<%= render 'shared/turbo_modal', title: 'Move Into Folder' do %>
+  <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
+    <div class="form-control my-6">
+      <folder-autocomplete class="block" data-submit-on-select="true">
+        <%= f.text_field :name, required: true, placeholder: 'New Folder Name...', class: 'base-input w-full', autofocus: true %>
+      </folder-autocomplete>
+    </div>
+    <div class="form-control">
+      <%= f.button button_title(title: 'Move', disabled_with: 'Moving'), class: 'base-button' %>
+    </div>
+  <% end %>
+<% end %>

app/views/user_signatures/edit.html.erb

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

app/views/users/index.html.erb

@@ -1,6 +1,6 @@
-<div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0 md:space-x-10">
+<div class="flex-wrap space-y-4 md:flex md:flex-nowrap md:space-y-0 md:space-x-10">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow">
+  <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)) %>

app/views/webhook_settings/show.html.erb

@@ -6,9 +6,9 @@
       <div class="card-body p-6">
         <%= 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 space-x-4 mt-2">
+          <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.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button w-32' %>
+            <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button w-full md:w-32' %>
           </div>
         <% end %>
       </div>

config/routes.rb

@@ -31,6 +31,8 @@ Rails.application.routes.draw do
 
   namespace :api, defaults: { format: :json } do
     resources :attachments, only: %i[create]
+    resources :submitters_autocomplete, only: %i[index]
+    resources :template_folders_autocomplete, only: %i[index]
     resources :submitter_email_clicks, only: %i[create]
     resources :submitter_form_views, only: %i[create]
     resources :submissions, only: %i[create]
@@ -46,14 +48,17 @@ Rails.application.routes.draw do
   resources :setup, only: %i[index create]
   resource :newsletter, only: %i[show update]
   resources :users, only: %i[new create edit update destroy]
+  resource :user_signature, only: %i[edit update]
   resources :submissions, only: %i[show destroy]
   resources :console_redirect, only: %i[index]
   resource :templates_upload, only: %i[create]
   resources :templates_archived, only: %i[index], path: 'archived'
+  resources :folders, only: %i[show edit update destroy], controller: 'template_folders'
   resources :templates, only: %i[new create edit show destroy] do
     resources :restore, only: %i[create], controller: 'templates_restore'
     resources :archived, only: %i[index], controller: 'templates_archived_submissions'
     resources :submissions, only: %i[new create]
+    resource :folder, only: %i[edit update], controller: 'templates_folders'
     resources :submissions_export, only: %i[index new]
   end
 

db/migrate/20230920195319_create_template_folders.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateTemplateFolders < ActiveRecord::Migration[7.0]
+  def change
+    create_table :template_folders do |t|
+      t.string :name, null: false
+
+      t.references :author, null: false, foreign_key: { to_table: :users }, index: true
+      t.references :account, null: false, foreign_key: true, index: true
+
+      t.datetime :deleted_at
+      t.timestamps
+    end
+  end
+end

db/migrate/20230920202947_add_folder_id_to_templates.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class AddFolderIdToTemplates < ActiveRecord::Migration[7.0]
+  class MigrationTemplateFolder < ApplicationRecord
+    self.table_name = 'template_folders'
+  end
+
+  class MigrationAccount < ApplicationRecord
+    self.table_name = 'accounts'
+  end
+
+  class MigrationTemplate < ApplicationRecord
+    self.table_name = 'templates'
+  end
+
+  class MigrationUser < ApplicationRecord
+    self.table_name = 'users'
+  end
+
+  def up
+    add_reference :templates, :folder, foreign_key: { to_table: :template_folders }, index: true, null: true
+
+    MigrationAccount.all.pluck(:id).each do |account_id|
+      author_id = MigrationUser.where(account_id:).minimum(:id)
+
+      next if author_id.blank?
+
+      folder = MigrationTemplateFolder.create_with(author_id:)
+                                      .find_or_create_by(name: 'Default', account_id:)
+
+      MigrationTemplate.where(account_id:).update_all(folder_id: folder.id)
+    end
+
+    change_column_null :templates, :folder_id, false
+  end
+
+  def down
+    remove_column :templates, :folder_id
+  end
+end

db/migrate/20230922072041_create_user_configs.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CreateUserConfigs < ActiveRecord::Migration[7.0]
+  def change
+    create_table :user_configs do |t|
+      t.references :user, null: false, foreign_key: true, index: true
+      t.string :key, null: false
+      t.text :value, null: false
+
+      t.index %i[user_id key], unique: true
+
+      t.timestamps
+    end
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_09_15_200635) do
+ActiveRecord::Schema[7.0].define(version: 2023_09_22_072041) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -138,6 +138,17 @@ ActiveRecord::Schema[7.0].define(version: 2023_09_15_200635) do
     t.index ["submission_id"], name: "index_submitters_on_submission_id"
   end
 
+  create_table "template_folders", force: :cascade do |t|
+    t.string "name", null: false
+    t.bigint "author_id", null: false
+    t.bigint "account_id", null: false
+    t.datetime "deleted_at"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_template_folders_on_account_id"
+    t.index ["author_id"], name: "index_template_folders_on_author_id"
+  end
+
   create_table "templates", force: :cascade do |t|
     t.string "slug", null: false
     t.string "name", null: false
@@ -150,11 +161,23 @@ ActiveRecord::Schema[7.0].define(version: 2023_09_15_200635) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.text "source", null: false
+    t.bigint "folder_id", null: false
     t.index ["account_id"], name: "index_templates_on_account_id"
     t.index ["author_id"], name: "index_templates_on_author_id"
+    t.index ["folder_id"], name: "index_templates_on_folder_id"
     t.index ["slug"], name: "index_templates_on_slug", unique: true
   end
 
+  create_table "user_configs", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.string "key", null: false
+    t.text "value", null: false
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["user_id", "key"], name: "index_user_configs_on_user_id_and_key", unique: true
+    t.index ["user_id"], name: "index_user_configs_on_user_id"
+  end
+
   create_table "users", force: :cascade do |t|
     t.string "first_name"
     t.string "last_name"
@@ -198,7 +221,11 @@ ActiveRecord::Schema[7.0].define(version: 2023_09_15_200635) do
   add_foreign_key "submissions", "templates"
   add_foreign_key "submissions", "users", column: "created_by_user_id"
   add_foreign_key "submitters", "submissions"
+  add_foreign_key "template_folders", "accounts"
+  add_foreign_key "template_folders", "users", column: "author_id"
   add_foreign_key "templates", "accounts"
+  add_foreign_key "templates", "template_folders", column: "folder_id"
   add_foreign_key "templates", "users", column: "author_id"
+  add_foreign_key "user_configs", "users"
   add_foreign_key "users", "accounts"
 end

lib/ability.rb

@@ -5,11 +5,13 @@ class Ability
 
   def initialize(user)
     can :manage, Template, account_id: user.account_id
+    can :manage, TemplateFolder, account_id: user.account_id
     can :manage, Submission, template: { account_id: user.account_id }
     can :manage, Submitter, template: { account_id: user.account_id }
     can :manage, User, account_id: user.account_id
     can :manage, EncryptedConfig, account_id: user.account_id
     can :manage, AccountConfig, account_id: user.account_id
+    can :manage, UserConfig, user_id: user.id
     can :manage, Account, id: user.account_id
     can :manage, AccessToken, user_id: user.id
   end

lib/accounts.rb

@@ -34,6 +34,7 @@ module Accounts
     new_template = Template.find(1).dup
     new_template.account_id = account.id
     new_template.slug = SecureRandom.base58(14)
+    new_template.folder = account.default_template_folder
 
     new_template.save!
 
@@ -68,5 +69,7 @@ module Accounts
     tzinfo = TZInfo::Timezone.get(ActiveSupport::TimeZone::MAPPING[timezone] || timezone)
 
     ::ActiveSupport::TimeZone.all.find { |e| e.tzinfo == tzinfo }&.name || timezone
+  rescue TZInfo::InvalidTimezoneIdentifier
+    'UTC'
   end
 end

lib/submissions.rb

@@ -30,7 +30,7 @@ module Submissions
   def create_from_emails(template:, user:, emails:, source:, mark_as_sent: false)
     emails = emails.to_s.scan(User::EMAIL_REGEXP) unless emails.is_a?(Array)
 
-    emails.map do |email|
+    emails.uniq.map do |email|
       submission = template.submissions.new(created_by_user: user, source:, template_submitters: template.submitters)
       submission.submitters.new(email: normalize_email(email),
                                 uuid: template.submitters.first['uuid'],
@@ -42,43 +42,22 @@ module Submissions
 
   def create_from_submitters(template:, user:, submissions_attrs:, source:, mark_as_sent: false,
                              submitters_order: DEFAULT_SUBMITTERS_ORDER)
-    submissions_attrs.map do |attrs|
-      submission = template.submissions.new(created_by_user: user, source:,
-                                            template_submitters: template.submitters, submitters_order:)
-
-      attrs[:submitters].each_with_index do |submitter_attrs, index|
-        uuid =
-          submitter_attrs[:uuid].presence ||
-          template.submitters.find { |e| e['name'] == submitter_attrs[:role] }&.dig('uuid') ||
-          template.submitters[index]&.dig('uuid')
-
-        next if uuid.blank?
-
-        is_order_sent = submitters_order == 'random' || index.zero?
-        email = normalize_email(submitter_attrs[:email])
-
-        submission.submitters.new(
-          email:,
-          phone: submitter_attrs[:phone].to_s.gsub(/[^0-9+]/, ''),
-          name: submitter_attrs[:name],
-          sent_at: mark_as_sent && email.present? && is_order_sent ? Time.current : nil,
-          values: submitter_attrs[:values] || {},
-          uuid:
-        )
-      end
-
-      submission.tap(&:save!)
-    end
+    Submissions::CreateFromSubmitters.call(
+      template:, user:, submissions_attrs:, source:, mark_as_sent:, submitters_order:
+    )
   end
 
   def send_signature_requests(submissions, params)
     submissions.each do |submission|
+      submitters = submission.submitters.reject(&:completed_at?)
+
       if submission.submitters_order_preserved?
-        first_submitter = submission.submitters.find { |e| e.uuid == submission.template_submitters.first['uuid'] }
+        first_submitter =
+          submission.template_submitters.filter_map { |s| submitters.find { |e| e.uuid == s['uuid'] } }.first
 
         Submitters.send_signature_requests([first_submitter], params)
       else
-        Submitters.send_signature_requests(submission.submitters, params)
+        Submitters.send_signature_requests(submitters, params)
       end
     end
   end

lib/submissions/create_from_submitters.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Submissions
+  module CreateFromSubmitters
+    module_function
+
+    def call(template:, user:, submissions_attrs:, source:, submitters_order:, mark_as_sent: false)
+      Array.wrap(submissions_attrs).map do |attrs|
+        submission = template.submissions.new(created_by_user: user, source:,
+                                              template_submitters: template.submitters, submitters_order:)
+
+        attrs[:submitters].each_with_index do |submitter_attrs, index|
+          uuid =
+            submitter_attrs[:uuid].presence ||
+            template.submitters.find { |e| e['name'] == submitter_attrs[:role] }&.dig('uuid') ||
+            template.submitters[index]&.dig('uuid')
+
+          next if uuid.blank?
+
+          is_order_sent = submitters_order == 'random' || index.zero?
+
+          build_submitter(submission:, attrs: submitter_attrs, uuid:, is_order_sent:, mark_as_sent:)
+        end
+
+        submission.tap(&:save!)
+      end
+    end
+
+    def build_submitter(submission:, attrs:, uuid:, is_order_sent:, mark_as_sent:)
+      email = Submissions.normalize_email(attrs[:email])
+
+      submission.submitters.new(
+        email:,
+        phone: attrs[:phone].to_s.gsub(/[^0-9+]/, ''),
+        name: attrs[:name],
+        completed_at: attrs[:completed] ? Time.current : nil,
+        sent_at: mark_as_sent && email.present? && is_order_sent ? Time.current : nil,
+        values: attrs[:values] || {},
+        uuid:
+      )
+    end
+  end
+end

lib/submissions/generate_audit_trail.rb

@@ -192,7 +192,7 @@ module Submissions
                   }
                 ].compact_blank, line_spacing: 1.8, padding: [0, 0, 5, 0]
               ),
-              if field['type'].in?(%w[image signature])
+              if field['type'].in?(%w[image signature initials])
                 attachment = submitter.attachments.find { |a| a.uuid == value }
                 image = Vips::Image.new_from_buffer(attachment.download, '').autorot
 
@@ -200,7 +200,7 @@ module Submissions
 
                 io = StringIO.new(image.resize([scale, 1].min).write_to_buffer('.png'))
 
-                column.image(io, padding: [0, 100, 10, 0])
+                column.image(io, padding: [0, field['type'] == 'initials' ? 200 : 100, 10, 0])
                 column.formatted_text_box([{ text: '' }])
               elsif field['type'] == 'file'
                 column.formatted_text_box(

lib/submissions/generate_result_attachments.rb

@@ -58,7 +58,7 @@ module Submissions
           canvas.font(FONT_NAME, size: font_size)
 
           case field['type']
-          when 'image', 'signature'
+          when 'image', 'signature', 'initials'
             attachment = submitter.attachments.find { |a| a.uuid == value }
 
             image = Vips::Image.new_from_buffer(attachment.download, '').autorot

lib/submitters.rb

@@ -3,6 +3,20 @@
 module Submitters
   module_function
 
+  def search(submitters, keyword)
+    return submitters if keyword.blank?
+
+    term = "%#{keyword.downcase}%"
+
+    arel_table = Submitter.arel_table
+
+    arel = arel_table[:email].lower.matches(term)
+                             .or(arel_table[:phone].matches(term))
+                             .or(arel_table[:name].lower.matches(term))
+
+    submitters.where(arel)
+  end
+
   def select_attachments_for_download(submitter)
     original_documents = submitter.submission.template.documents.preload(:blob)
     is_more_than_two_images = original_documents.count(&:image?) > 1

lib/submitters/maybe_update_default_values.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Submitters
+  module MaybeUpdateDefaultValues
+    module_function
+
+    def call(submitter, current_user)
+      user =
+        if current_user && current_user.email == submitter.email
+          current_user
+        else
+          submitter.account.users.find_by(email: submitter.email)
+        end
+
+      return if user.blank?
+
+      fields = submitter.submission.template_fields || submitter.submission.template.fields
+
+      fields.each do |field|
+        next if field['submitter_uuid'] != submitter.uuid
+
+        submitter.values[field['uuid']] ||= get_default_value_for_field(field, user, submitter)
+      end
+
+      submitter.save!
+    end
+
+    def get_default_value_for_field(field, user, submitter)
+      field_name = field['name'].to_s.downcase
+
+      if field_name.in?(['full name', 'legal name'])
+        user.full_name
+      elsif field_name == 'first name'
+        user.first_name
+      elsif field_name == 'last name'
+        user.last_name
+      elsif field['type'] == 'signature' && (signature = UserConfigs.load_signature(user))
+        attachment = ActiveStorage::Attachment.find_or_create_by!(
+          blob_id: signature.blob_id,
+          name: 'attachments',
+          record: submitter
+        )
+
+        attachment.uuid
+      end
+    end
+  end
+end

lib/submitters/normalize_values.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Submitters
+  module NormalizeValues
+    CHECKSUM_CACHE_STORE = ActiveSupport::Cache::MemoryStore.new
+
+    UnknownFieldName = Class.new(StandardError)
+    UnknownSubmitterName = Class.new(StandardError)
+
+    module_function
+
+    def call(template, values, submitter_name)
+      submitter =
+        template.submitters.find { |e| e['name'] == submitter_name } ||
+        raise(UnknownSubmitterName, "Unknown submitter: #{submitter_name}")
+
+      fields = template.fields.select { |e| e['submitter_uuid'] == submitter['uuid'] }
+
+      fields_uuid_index = fields.index_by { |e| e['uuid'] }
+      fields_name_index = build_fields_index(fields)
+
+      attachments = []
+
+      normalized_values = values.to_h.to_h do |key, value|
+        if fields_uuid_index[key].blank?
+          key = fields_name_index[key]&.dig('uuid') || raise(UnknownFieldName, "Unknown field: #{key}")
+        end
+
+        if fields_uuid_index[key]['type'].in?(%w[initials signature image file])
+          new_value, new_attachments = normalize_attachment_value(value, template.account)
+
+          attachments.push(*new_attachments)
+
+          value = new_value
+        end
+
+        [key, value]
+      end
+
+      [normalized_values, attachments]
+    end
+
+    def build_fields_index(fields)
+      fields.index_by { |e| e['name'] }.merge(fields.index_by { |e| e['name'].parameterize.underscore })
+    end
+
+    def normalize_attachment_value(value, account)
+      if value.is_a?(Array)
+        new_attachments = value.map { |v| build_attachment(v, account) }
+
+        [new_attachments.map(&:uuid), new_attachments]
+      else
+        new_attachment = build_attachment(value, account)
+
+        [new_attachment.uuid, new_attachment]
+      end
+    end
+
+    def build_attachment(value, account)
+      ActiveStorage::Attachment.new(
+        blob: find_or_create_blobs(account, value),
+        name: 'attachments'
+      )
+    end
+
+    def find_or_create_blobs(account, url)
+      cache_key = [account.id, url].join(':')
+      checksum = CHECKSUM_CACHE_STORE.fetch(cache_key)
+
+      blob = find_blob_by_checksum(checksum, account) if checksum
+
+      return blob if blob
+
+      data = conn.get(url).body
+
+      checksum = Digest::MD5.base64digest(data)
+
+      CHECKSUM_CACHE_STORE.write(cache_key, checksum)
+
+      blob = find_blob_by_checksum(checksum, account)
+
+      blob || ActiveStorage::Blob.create_and_upload!(
+        io: StringIO.new(data),
+        filename: Addressable::URI.parse(url).path.split('/').last
+      )
+    end
+
+    def find_blob_by_checksum(checksum, account)
+      ActiveStorage::Blob
+        .joins('JOIN active_storage_attachments ON active_storage_attachments.blob_id = active_storage_blobs.id')
+        .where(active_storage_attachments: { record_id: account.submitters.select(:id),
+                                             record_type: 'Submitter' })
+        .find_by(checksum:)
+    end
+
+    def conn
+      Faraday.new do |faraday|
+        faraday.response :follow_redirects
+      end
+    end
+  end
+end

lib/template_folders.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module TemplateFolders
+  module_function
+
+  def search(folders, keyword)
+    return folders if keyword.blank?
+
+    folders.where(TemplateFolder.arel_table[:name].lower.matches("%#{keyword.downcase}%"))
+  end
+
+  def find_or_create_by_name(author, name)
+    return author.account.default_template_folder if name.blank? || name == TemplateFolder::DEFAULT_NAME
+
+    author.account.template_folders.create_with(author:, account: author.account).find_or_create_by(name:)
+  end
+end

lib/user_configs.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module UserConfigs
+  module_function
+
+  def load_signature(user)
+    return if user.blank?
+
+    uuid = user.user_configs.find_or_initialize_by(key: UserConfig::SIGNATURE_KEY).value
+
+    ActiveStorage::Attachment.find_by(uuid:, record: user, name: 'signature') if uuid.present?
+  end
+end

package.json

@@ -11,6 +11,7 @@
     "@hotwired/turbo-rails": "^7.3.0",
     "@rails/activestorage": "^7.0.0",
     "@tabler/icons-vue": "^2.20.0",
+    "autocompleter": "^9.1.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "9.1.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",

spec/system/dashboard_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe 'Dashboard Page' do
   context 'when there are templates' do
     let!(:authors) { create_list(:user, 5, account:) }
     let!(:templates) { authors.map { |author| create(:template, account:, author:) } }
-    let!(:other_template) { create(:template) }
+    let!(:other_template) { create(:template, account: create(:user).account) }
 
     before do
       visit root_path

spec/system/setup_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'App Setup', js: true do
 
       expect do
         click_button 'Submit'
-        sleep 1
+        sleep 2
       end.to change(Account, :count).by(1).and change(User, :count).by(1).and change(EncryptedConfig, :count).by(2)
 
       user = User.last

yarn.lock

@@ -1737,6 +1737,11 @@ array.prototype.flatmap@^1.3.1:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
+autocompleter@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/autocompleter/-/autocompleter-9.1.0.tgz#c7248a8cc0c58376d0969734c40e29626d950f04"
+  integrity sha512-dwAYJTaLHj1MpzCZXFg8WLmk+tgQ85OEDFfBegGnA+uVUZyzW/PZAdjSXR3fOt0+q8ZeEfMDiHDqw60uoF1NDg==
+
 autoprefixer@^10.4.14:
   version "10.4.14"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"