better sign yourself flow

app/controllers/application_controller.rb

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

app/javascript/template_builder/builder.vue

@@ -8,7 +8,7 @@
       class="flex justify-between py-1.5 items-center pr-4 sticky top-0 z-10"
       :style="{ backgroundColor }"
     >
-      <div class="flex space-x-3">
+      <div class="flex items-center space-x-3">
         <a
           v-if="withLogo"
           href="/"
@@ -19,7 +19,7 @@
           v-if="withTitle"
           :model-value="template.name"
           :editable="editable"
-          class="text-3xl font-semibold focus:text-clip"
+          class="text-xl md:text-3xl font-semibold focus:text-clip"
           :icon-stroke-width="2.3"
           @update:model-value="updateName"
         />
@@ -30,10 +30,25 @@
           name="buttons"
         />
         <template v-else>
+          <a
+            :href="template.submitters.length > 1 ? `/templates/${template.id}/submissions/new?selfsign=true` : `/d/${template.slug}`"
+            class="btn btn-primary btn-ghost text-base hidden md:flex"
+            :target="template.submitters.length > 1 ? '' : '_blank'"
+            :data-turbo-frame="template.submitters.length > 1 ? 'modal' : ''"
+            @click="maybeShowEmptyTemplateAlert"
+          >
+            <IconWritingSign
+              width="20"
+              class="inline"
+            />
+            <span class="hidden md:inline">
+              Sign Yourself
+            </span>
+          </a>
           <a
             :href="`/templates/${template.id}/submissions/new`"
             data-turbo-frame="modal"
-            class="btn btn-primary text-base"
+            class="white-button md:!px-6"
             @click="maybeShowEmptyTemplateAlert"
           >
             <IconUsersPlus
@@ -41,7 +56,7 @@
               class="inline"
             />
             <span class="hidden md:inline">
-              Recipients
+              Send
             </span>
           </a>
           <button
@@ -255,7 +270,7 @@ import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
 import DocumentControls from './controls'
 import FieldType from './field_type'
-import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
+import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconPlus, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
 
@@ -269,6 +284,7 @@ export default {
     IconPlus,
     FieldType,
     IconX,
+    IconWritingSign,
     Logo,
     Dropzone,
     DocumentPreview,

app/views/dashboard/index.html.erb

@@ -8,7 +8,7 @@
       <% end %>
       <% if can?(:create, ::Template) %>
         <%= render 'templates/upload_button' %>
-        <%= link_to new_template_path, class: 'btn btn-primary text-base btn-md gap-2', data: { turbo_frame: :modal } do %>
+        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
           <span class="hidden md:block">Create</span>
         <% end %>

app/views/shared/_button_title.html.erb

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

app/views/submissions/_detailed_form.html.erb

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

app/views/submissions/_email_form.html.erb

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

app/views/submissions/_phone_form.html.erb

@@ -9,7 +9,7 @@
             </a>
           </div>
           <div class="grid <%= template.submitters.size > 1 ? 'md:grid-cols-2 gap-4' : 'gap-1' %>">
-            <% template.submitters.each do |item| %>
+            <% template.submitters.each_with_index do |item, index| %>
               <submitter-item class="grid <%= template.submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
                 <div class="form-control">
                   <% if template.submitters.size > 1 %>
@@ -23,14 +23,14 @@
                   </submitters-autocomplete>
                   <% if template.submitters.size > 1 %>
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   <% end %>
                 </div>
                 <% if template.submitters.size == 1 %>
                   <div class="form-control flex">
                     <submitters-autocomplete data-field="name">
-                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)">
+                      <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= params[:selfsign] && index.zero? ? current_user.full_name : '' %>">
                     </submitters-autocomplete>
                   </div>
                 <% end %>
@@ -40,10 +40,12 @@
         </div>
       </div>
     </div>
+    <% if params[:selfsign].blank? %>
       <a href="#" class="btn btn-primary btn-sm w-full flex items-center justify-center" data-action="click:dynamic-list#addItem">
         <%= svg_icon('user_plus', class: 'w-4 h-4 stroke-2') %>
         <span>Add New</span>
       </a>
+    <% end %>
   </dynamic-list>
   <div>
     <%= render('submitters_order', f:, template:) if Accounts.can_send_emails?(current_account) %>

app/views/submissions/new.html.erb

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

app/views/submissions/show.html.erb

@@ -55,7 +55,7 @@
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.uuid, "#{index}.jpg")) %>
             <div id="<%= "page-#{document.uuid}-#{index}" %>" class="relative">
-              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="shadow-md mb-4" height="<%= page.metadata['height'] %>">
+              <img loading="lazy" src="<%= page.url %>" width="<%= page.metadata['width'] %>" class="border rounded mb-4" height="<%= page.metadata['height'] %>">
               <div class="top-0 bottom-0 left-0 right-0 absolute">
                 <% document_annots_index[index]&.each do |annot| %>
                   <%= render 'submissions/annotation', annot: %>

app/views/templates/_submission.html.erb

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

app/views/templates/_title.html.erb

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

app/views/templates/new.html.erb

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

app/views/templates/show.html.erb

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