improve signature validation

app/javascript/submission_form/crop_canvas.js

@@ -1,4 +1,4 @@
-function cropCanvasAndExportToPNG (canvas) {
+function cropCanvasAndExportToPNG (canvas, { errorOnTooSmall } = { errorOnTooSmall: false }) {
   const ctx = canvas.getContext('2d')
 
   const width = canvas.width
@@ -33,6 +33,10 @@ function cropCanvasAndExportToPNG (canvas) {
   croppedCanvas.height = croppedHeight
   const croppedCtx = croppedCanvas.getContext('2d')
 
+  if (errorOnTooSmall && (croppedWidth < 20 || croppedHeight < 20)) {
+    return Promise.reject(new Error('Image too small'))
+  }
+
   croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
 
   return new Promise((resolve, reject) => {

app/javascript/submission_form/initials_step.vue

@@ -339,8 +339,8 @@ export default {
         return Promise.resolve({})
       }
 
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
-        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'initials.png', { type: 'image/png' })
 
           if (this.dryRun) {
@@ -373,6 +373,14 @@ export default {
               return resolve(attachment)
             })
           }
+        }).catch((error) => {
+          if (this.field.required === true) {
+            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+
+            return reject(error)
+          } else {
+            return resolve({})
+          }
         })
       })
     }

app/javascript/submission_form/signature_step.vue

@@ -683,13 +683,17 @@ export default {
       }
 
       if (this.isSignatureStarted && this.pad.toData().length > 0 && !isValidSignatureCanvas(this.pad.toData())) {
-        alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+        if (this.field.required === true || this.pad.toData().length > 0) {
+          alert(this.t('signature_is_too_small_or_simple_please_redraw'))
 
-        return Promise.reject(new Error('Image too small or simple'))
+          return Promise.reject(new Error('Image too small or simple'))
+        } else {
+          Promise.resolve({})
+        }
       }
 
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
-        cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
+        cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })
 
           if (this.dryRun) {
@@ -725,6 +729,14 @@ export default {
               return resolve(attachment)
             })
           }
+        }).catch((error) => {
+          if (this.field.required === true) {
+            alert(this.t('signature_is_too_small_or_simple_please_redraw'))
+
+            return reject(error)
+          } else {
+            return resolve({})
+          }
         })
       })
     }

spec/system/signing_form_spec.rb

@@ -506,6 +506,9 @@ RSpec.describe 'Signing Form', type: :system do
       find('#expand_form_button').click
       find('span[data-tip="Click to upload"]').click
       find('input[type="file"]', visible: false).attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
+
+      sleep 0.1
+
       click_button 'Complete'
 
       expect(page).to have_content('Document has been signed!')