From b48615df3f6ef392929d26f1571f6d59e8c1a18c Mon Sep 17 00:00:00 2001
From: DocuSeal <dev@docuseal.co>
Date: Sat, 28 Oct 2023 16:03:19 +0300
Subject: [PATCH] use handwritten font for typed signature

---
 Dockerfile                                    |  3 ++-
 .../submission_form/signature_step.vue        | 21 +++++++++++++++++--
 config/environments/test.rb                   | 12 +++++++++++
 lib/submissions/generate_audit_trail.rb       |  4 ++--
 .../generate_result_attachments.rb            |  2 +-
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index c66d5819..e0c2b4b8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -31,7 +31,7 @@ ENV BUNDLE_WITHOUT="development:test"
 
 WORKDIR /app
 
-RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf / && apk del ttf-liberation
+RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && mkdir /fonts && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf /fonts && apk del ttf-liberation && wget -O /fonts/DancingScript.otf "https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf" && wget -O /fonts/DancingScript-License.txt https://github.com/impallari/DancingScript/blob/master/OFL.txt
 
 COPY ./Gemfile ./Gemfile.lock ./
 
@@ -49,6 +49,7 @@ COPY LICENSE README.md Rakefile config.ru ./
 
 COPY --from=webpack /app/public/packs ./public/packs
 
+RUN ln -s /fonts /app/public/fonts
 RUN bundle exec bootsnap precompile --gemfile app/ lib/
 
 WORKDIR /data/docuseal
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index 7f62807e..c9f74995 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -99,6 +99,8 @@ import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } fro
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 
+let isFontLoaded = false
+
 export default {
   name: 'SignatureStep',
   components: {
@@ -184,6 +186,19 @@ export default {
       this.isUsePreviousValue = false
       this.isSignatureStarted = false
     },
+    loadFont () {
+      if (!isFontLoaded) {
+        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
+
+        font.load().then((loadedFont) => {
+          document.fonts.add(loadedFont)
+
+          isFontLoaded = true
+        }).catch((error) => {
+          console.error('Font loading failed:', error)
+        })
+      }
+    },
     clear () {
       this.pad.clear()
 
@@ -199,8 +214,8 @@ export default {
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
 
-      const fontFamily = 'Arial'
-      const fontSize = '44px'
+      const fontFamily = 'Dancing Script'
+      const fontSize = '38px'
       const fontStyle = 'italic'
       const fontWeight = ''
 
@@ -218,6 +233,8 @@ export default {
         this.$nextTick(() => {
           this.$refs.textInput.focus()
 
+          this.loadFont()
+
           this.$emit('start')
         })
       }
diff --git a/config/environments/test.rb b/config/environments/test.rb
index 3977e2c0..abd18e61 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -66,4 +66,16 @@ Rails.application.configure do
     deterministic_key: 'test deterministic key',
     key_derivation_salt: 'test key derivation salt'
   }
+
+  config.middleware.use(Class.new do
+    def initialize(app)
+      @app = app
+    end
+
+    def call(env)
+      return [200, {}, []] if env['PATH_INFO'].starts_with?('/fonts')
+
+      @app.call(env)
+    end
+  end)
 end
diff --git a/lib/submissions/generate_audit_trail.rb b/lib/submissions/generate_audit_trail.rb
index 6a14c0da..b6301784 100644
--- a/lib/submissions/generate_audit_trail.rb
+++ b/lib/submissions/generate_audit_trail.rb
@@ -4,8 +4,8 @@ module Submissions
   module GenerateAuditTrail
     FONT_SIZE = 9
     TEXT_COLOR = '525252'
-    FONT_PATH = '/LiberationSans-Regular.ttf'
-    FONT_BOLD_PATH = '/LiberationSans-Bold.ttf'
+    FONT_PATH = '/fonts/LiberationSans-Regular.ttf'
+    FONT_BOLD_PATH = '/fonts/LiberationSans-Bold.ttf'
     FONT_NAME = if File.exist?(FONT_PATH)
                   FONT_PATH
                 else
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 0f5a6de0..6163643e 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -3,7 +3,7 @@
 module Submissions
   module GenerateResultAttachments
     FONT_SIZE = 11
-    FONT_PATH = '/LiberationSans-Regular.ttf'
+    FONT_PATH = '/fonts/LiberationSans-Regular.ttf'
     FONT_NAME = if File.exist?(FONT_PATH)
                   FONT_PATH
                 else