add signature formats

app/javascript/submission_form/signature_step.vue

@@ -20,7 +20,7 @@
       </label>
       <div class="space-x-2 flex">
         <span
-          v-if="isTextSignature && field.preferences?.format !== 'typed'"
+          v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
           :data-tip="t('draw_signature')"
         >
@@ -37,7 +37,7 @@
           </a>
         </span>
         <span
-          v-else-if="withTypedSignature && field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
+          v-else-if="withTypedSignature && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
           class="tooltip ml-2"
           :data-tip="t('type_text')"
         >
@@ -54,7 +54,7 @@
           </a>
         </span>
         <span
-          v-if="field.preferences?.format !== 'typed' && field.preferences?.format !== 'drawn'"
+          v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
           class="tooltip"
           :data-tip="t('take_photo')"
         >
@@ -81,10 +81,10 @@
           @click.prevent="remove"
         >
           <IconReload :width="16" />
-          {{ t('redraw') }}
+          {{ t(format === 'upload' ? 'reupload' : 'redraw') }}
         </a>
         <span
-          v-if="withQrButton && !modelValue && !computedPreviousValue && field.preferences?.format !== 'typed'"
+          v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed' && format !== 'upload'"
           class=" tooltip"
           :data-tip="t('drawn_signature_on_a_touchscreen_device')"
         >
@@ -131,7 +131,18 @@
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
-    <div class="relative">
+    <FileDropzone
+      v-if="format === 'upload' && !modelValue"
+      :message="`${t('upload')} ${field.name || t('signature')}`"
+      :submitter-slug="submitterSlug"
+      :dry-run="dryRun"
+      :accept="'image/*'"
+      @upload="[$emit('attached', $event[0]), $emit('update:model-value', $event[0].uuid)]"
+    />
+    <div
+      v-else
+      class="relative"
+    >
       <div
         v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
         class="absolute top-0.5 right-0.5"
@@ -282,6 +293,7 @@ import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonal
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 import AppearsOn from './appears_on'
+import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'
 
@@ -294,6 +306,7 @@ export default {
   components: {
     AppearsOn,
     IconReload,
+    FileDropzone,
     IconCamera,
     IconQrcode,
     MarkdownContent,
@@ -388,6 +401,9 @@ export default {
     submitterSlug () {
       return this.submitter.slug
     },
+    format () {
+      return this.field.preferences?.format
+    },
     defaultReasons () {
       return {
         [this.t('approved_by')]: this.t('approved'),

app/javascript/template_builder/field_settings.vue

@@ -212,16 +212,12 @@
         {{ t('any') }}
       </option>
       <option
-        value="drawn"
-        :selected="field.preferences?.format === 'drawn'"
+        v-for="type in ['drawn', 'typed', 'drawn_or_typed', 'upload']"
+        :key="type"
+        :value="type"
+        :selected="field.preferences?.format === type"
       >
-        {{ t('drawn') }}
-      </option>
-      <option
-        value="typed"
-        :selected="field.preferences?.format === 'typed'"
-      >
-        {{ t('typed') }}
+        {{ t(type) }}
       </option>
     </select>
     <label

app/javascript/template_builder/i18n.js

@@ -48,6 +48,8 @@ const en = {
   cancel: 'Cancel',
   any: 'Any',
   drawn: 'Drawn',
+  drawn_or_typed: 'Drawn or Typed',
+  upload: 'Upload',
   formula: 'Formula',
   typed: 'Typed',
   draw_field_on_the_document: 'Draw a field on the document',
@@ -289,6 +291,8 @@ const es = {
   add_document: 'Subir',
   any: 'Cualquier',
   drawn: 'Dibujado',
+  drawn_or_typed: 'Dibujado o Escrito',
+  upload: 'Subir',
   typed: 'Escrito',
   none: 'Ninguno',
   ssn: 'SSN',
@@ -362,6 +366,8 @@ const it = {
   cancel: 'Annulla',
   any: 'Qualsiasi',
   drawn: 'Disegnato',
+  drawn_or_typed: 'Disegnato o Digitato',
+  upload: 'Caricare',
   formula: 'Formula',
   typed: 'Digitato',
   draw_field_on_the_document: 'Disegnare un campo sul documento',
@@ -603,6 +609,8 @@ const pt = {
   add_document: 'Enviar',
   any: 'Qualquer',
   drawn: 'Desenhado',
+  drawn_or_typed: 'Desenhado ou Digitado',
+  upload: 'Carregar',
   typed: 'Digitado',
   none: 'Nenhum',
   ssn: 'SSN',
@@ -760,6 +768,8 @@ const fr = {
   add_document: 'Télécharger',
   any: 'Tout',
   drawn: 'Dessiné',
+  drawn_or_typed: 'Dessiné ou Tapé',
+  upload: 'Téléverser',
   typed: 'Tapé',
   none: 'Aucun',
   ssn: 'SSN',
@@ -917,6 +927,8 @@ const de = {
   add_document: 'Hochladen',
   any: 'Jede',
   drawn: 'Gezeichnet',
+  drawn_or_typed: 'Gezeichnet oder getippt',
+  upload: 'Upload',
   typed: 'Getippt',
   none: 'Keine',
   ssn: 'SSN',