add signature id

app/javascript/form.js

@@ -22,6 +22,7 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       scrollPadding: this.dataset.scrollPadding || '-80px',
       dryRun: this.dataset.dryRun === 'true',
       expand: ['true', 'false'].includes(this.dataset.expand) ? this.dataset.expand === 'true' : null,
+      withSignatureId: this.dataset.withSignatureId === 'true',
       withConfetti: this.dataset.withConfetti !== 'false',
       withDisclosure: this.dataset.withDisclosure === 'true',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',

app/javascript/submission_form/area.vue

@@ -54,11 +54,37 @@
       class="object-contain mx-auto"
       :src="stamp.url"
     >
-    <img
+    <div
       v-else-if="field.type === 'signature' && signature"
-      class="object-contain mx-auto"
-      :src="signature.url"
+      class="flex flex-col justify-between h-full overflow-hidden"
     >
+      <div
+        class="flex-grow flex overflow-hidden"
+        style="min-height: 50%"
+      >
+        <img
+          class="object-contain mx-auto"
+          :src="signature.url"
+        >
+      </div>
+      <div
+        v-if="withSignatureId"
+        class="w-full mt-1 text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+      >
+        <div class="truncate uppercase">
+          ID: {{ signature.uuid }}
+        </div>
+        <div>
+          {{ t('reason') }}: {{ t('digitally_signed_by') }} {{ submitter.name }}
+          <template v-if="submitter.email">
+            &lt;{{ submitter.email }}&gt;
+          </template>
+        </div>
+        <div>
+          {{ new Date(signature.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' }) }}
+        </div>
+      </div>
+    </div>
     <img
       v-else-if="field.type === 'initials' && initials"
       class="object-contain mx-auto"
@@ -198,6 +224,15 @@ export default {
       type: Object,
       required: true
     },
+    submitter: {
+      type: Object,
+      required: true
+    },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isValueSet: {
       type: Boolean,
       required: false,

app/javascript/submission_form/areas.vue

@@ -23,7 +23,9 @@
             :submittable="true"
             :field-index="fieldIndex"
             :scroll-padding="scrollPadding"
+            :submitter="submitter"
             :with-field-placeholder="withFieldPlaceholder"
+            :with-signature-id="withSignatureId"
             :is-active="currentStep === step"
             :with-label="withLabel && !withFieldPlaceholder"
             :is-value-set="step.some((f) => f.uuid in values)"
@@ -50,6 +52,15 @@ export default {
       required: false,
       default: () => []
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    submitter: {
+      type: Object,
+      required: true
+    },
     values: {
       type: Object,
       required: false,

app/javascript/submission_form/form.vue

@@ -4,7 +4,9 @@
     :steps="stepFields"
     :values="values"
     :with-field-placeholder="withFieldPlaceholder"
+    :submitter="submitter"
     :scroll-el="scrollEl"
+    :with-signature-id="withSignatureId"
     :attachments-index="attachmentsIndex"
     :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
@@ -535,6 +537,11 @@ export default {
       type: Object,
       required: true
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     scrollPadding: {
       type: String,
       required: false,

app/javascript/submission_form/i18n.js

@@ -15,6 +15,8 @@ const en = {
   take_photo: 'Take photo',
   number_phone_is_invalid: '{number} phone is invalid',
   file: 'File',
+  digitally_signed_by: 'Digitally signed by',
+  reason: 'Reason',
   select: 'Select',
   checkbox: 'Checkbox',
   multiple: 'Multiple',
@@ -83,6 +85,8 @@ const es = {
   text: 'Texto',
   signature: 'Firma',
   pay: 'Pagar',
+  digitally_signed_by: 'Firmado digitalmente por',
+  reason: 'Razón',
   initials: 'Iniciales',
   date: 'Fecha',
   number: 'Número',
@@ -155,6 +159,8 @@ const it = {
   already_paid: 'Pagato',
   text: 'Testo',
   signature: 'Firma',
+  digitally_signed_by: 'Firmato digitalmente da',
+  reason: 'Motivo',
   initials: 'Iniziali',
   date: 'Data',
   number: 'Numero',
@@ -228,6 +234,8 @@ const de = {
   minimize: 'Minimieren',
   text: 'Text',
   signature: 'Unterschrift',
+  digitally_signed_by: 'Digital unterschrieben von',
+  reason: 'Grund',
   initials: 'Initialen',
   date: 'Datum',
   number: 'Nummer',
@@ -302,6 +310,8 @@ const fr = {
   already_paid: 'Déjà payé',
   signature: 'Signature',
   initials: 'Initiales',
+  digitally_signed_by: 'Signé numériquement par',
+  reason: 'Raison',
   pay: 'Payer',
   date: 'Date',
   number: 'Numéro',
@@ -373,6 +383,8 @@ const pl = {
   minimize: 'Zminimalizuj',
   text: 'Tekst',
   already_paid: 'Już zapłacono',
+  digitally_signed_by: 'Podpisano cyfrowo przez',
+  reason: 'Powód',
   signature: 'Podpis',
   initials: 'Inicjały',
   date: 'Data',
@@ -447,6 +459,8 @@ const uk = {
   text: 'Текст',
   already_paid: 'Вже оплачено',
   signature: 'Підпис',
+  digitally_signed_by: 'Підписано в електронному вигляді',
+  reason: 'Причина',
   initials: 'Ініціали',
   date: 'Дата',
   number: 'Число',
@@ -523,6 +537,8 @@ const cs = {
   initials: 'Iniciály',
   date: 'Datum',
   number: 'Číslo',
+  digitally_signed_by: 'Digitálně podepsáno',
+  reason: 'Důvod',
   image: 'Obrázek',
   pay: 'Zaplatit',
   file: 'Soubor',
@@ -594,6 +610,8 @@ const pt = {
   text: 'Texto',
   signature: 'Assinatura',
   initials: 'Iniciais',
+  digitally_signed_by: 'Assinado digitalmente por',
+  reason: 'Razão',
   date: 'Data',
   number: 'Número',
   image: 'Imagem',
@@ -668,6 +686,8 @@ const he = {
   signature: 'חתימה',
   initials: 'ראשי תיבות',
   date: 'תאריך',
+  digitally_signed_by: 'חתום דיגיטלית על ידי',
+  reason: 'סיבה',
   number: 'מספר',
   image: 'תמונה',
   file: 'קובץ',
@@ -740,6 +760,8 @@ const nl = {
   text: 'Tekst',
   already_paid: 'Al betaald',
   signature: 'Handtekening',
+  digitally_signed_by: 'Digitaal ondertekend door',
+  reason: 'Reden',
   initials: 'Initialen',
   date: 'Datum',
   number: 'Nummer',
@@ -815,6 +837,8 @@ const ar = {
   initials: 'الاختصارات',
   date: 'تاريخ',
   number: 'رقم',
+  digitally_signed_by: 'تم التوقيع رقميًا بواسطة',
+  reason: 'السبب',
   image: 'صورة',
   take_photo: 'التقاط صورة',
   pay: 'دفع',
@@ -888,6 +912,8 @@ const ko = {
   signature: '서명',
   initials: '이니셜',
   date: '날짜',
+  digitally_signed_by: '디지털 서명이 완료되었습니다',
+  reason: '이유',
   number: '숫자',
   pay: '급여',
   image: '이미지',