src/ApplicationBundle/Modules/System/Resources/views/inc/_signature_setup_modal.html.twig line 1

Open in your IDE?
  1. {#
  2.   First-run signature/hash onboarding modal (TODO-A, see APPROVAL_SYSTEM_AUDIT.md §2).
  3.   Included once from the global ERP footer. On first page load per session it asks
  4.   /signature_status; if the user has no signature yet it pops this modal so they set
  5.   their signature + approval hash before hitting an approval action and getting stuck.
  6.   Posts to the same update_signature endpoint (with redirectTo so they land back here).
  7.   Purely additive — fails safe if the status call errors.
  8. #}
  9. <div class="modal fade" id="hbSignatureSetupModal" tabindex="-1" role="dialog" aria-labelledby="hbSigSetupTitle">
  10.   <div class="modal-dialog" role="document" style="max-width:520px;">
  11.     <div class="modal-content">
  12.       <form role="form" method="post" action="{{ path('update_signature') }}"
  13.             enctype="multipart/form-data" id="hbSigSetupForm">
  14.         <input type="hidden" name="redirectTo" id="hbSigRedirectTo" value="">
  15.         <div class="modal-header" style="background:#5e35b1;color:#fff;border-radius:6px 6px 0 0;">
  16.           <h4 class="modal-title" id="hbSigSetupTitle" style="color:#fff;">
  17.             <i class="fa fa-pencil-square-o"></i> Set or update your approval signature
  18.           </h4>
  19.         </div>
  20.         <div class="modal-body">
  21.           <p style="color:#555;margin-bottom:18px;">
  22.             Before you can approve documents you need a one-time digital signature and a
  23.             secret <b>approval hash</b>. Your signature image is encrypted with this hash —
  24.             <b>memorise it and never share it</b>.
  25.           </p>
  27.           <div id="hbSigSetupError" class="text-danger" style="margin-bottom:12px;"></div>
  29.           <div class="form-group">
  30.             <label for="hbSigHash">Digital Encryption Hash</label>
  31.             <input type="password" required class="form-control" id="hbSigHash"
  32.                    autocomplete="off" name="approvalHash" placeholder="Enter a secret code">
  33.           </div>
  34.           <div class="form-group">
  35.             <label for="hbSigHashAgain">Re-enter Encryption Hash</label>
  36.             <input type="password" required class="form-control" id="hbSigHashAgain"
  37.                    autocomplete="off" name="approvalHashAgain" placeholder="Retype the code">
  38.           </div>
  39.           <div class="form-group">
  40.             <label for="hbSigFile" style="display:block;">Upload Signature <small style="color:#888;">(image, width &gt; height, &lt; 200 kB)</small></label>
  41.             <input type="file" name="myfile" accept="image/*" id="hbSigFile"
  42.                    style="display:block;width:100%;padding:8px;border:1px solid #ced4da;border-radius:6px;background:#fff;">
  43.           </div>
  44.         </div>
  45.         <div class="modal-footer">
  46.           <button type="button" class="btn btn-default" data-dismiss="modal">Later</button>
  47.           <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> Save signature</button>
  48.         </div>
  49.       </form>
  50.     </div>
  51.   </div>
  52. </div>
  54. <script>
  55. (function () {
  56.   if (typeof jQuery === 'undefined') return;
  57.   var $ = jQuery;
  59.   // Show/hide that works WITH or WITHOUT Bootstrap's modal plugin. The cp-shell
  60.   // module pages (Approval & Access etc.) load jQuery but not the codecovers
  61.   // Bootstrap JS bundle, so $.fn.modal is undefined there — fall back to a
  62.   // manual overlay (uses Bootstrap CSS if present, plus inline styles to be safe).
  63.   function hbShowSig() {
  64.     var $m = $('#hbSignatureSetupModal');
  65.     if ($.fn && typeof $.fn.modal === 'function') { $m.modal({ backdrop: 'static', keyboard: true }); return; }
  66.     if (!$('#hbSigBackdrop').length) {
  67.       $('<div id="hbSigBackdrop"></div>').css({
  68.         position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
  69.         background: 'rgba(0,0,0,.5)', zIndex: 1040
  70.       }).appendTo('body');
  71.     }
  72.     $m.addClass('in').css({ display: 'block', position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1050, overflow: 'auto' });
  73.     $('body').addClass('modal-open');
  74.   }
  75.   function hbHideSig() {
  76.     var $m = $('#hbSignatureSetupModal');
  77.     if ($.fn && typeof $.fn.modal === 'function') { $m.modal('hide'); }
  78.     else { $m.removeClass('in').css('display', 'none'); }
  79.     $('#hbSigBackdrop').remove();
  80.     $('body').removeClass('modal-open');
  81.   }
  82.   // Manual close (Bootstrap's data-dismiss won't fire without the plugin).
  83.   $(document).on('click', '#hbSignatureSetupModal [data-dismiss="modal"], #hbSigBackdrop', function () { hbHideSig(); });
  85.   // Client-side validation mirroring the dedicated page.
  86.   $('#hbSigSetupForm').on('submit', function (event) {
  87.     event.preventDefault();
  88.     $('#hbSigSetupError').text('');
  89.     var hash = $('#hbSigHash').val(), hashAgain = $('#hbSigHashAgain').val();
  90.     if (!hash) { $('#hbSigSetupError').text('Please enter a hash.'); return; }
  91.     if (hash !== hashAgain) { $('#hbSigSetupError').text('Hashes did not match.'); return; }
  92.     var files = $('#hbSigFile')[0].files;
  93.     if (!files.length) { $('#hbSigSetupError').text('Please select a signature image.'); return; }
  94.     var file = files[0];
  95.     if (((file.size / 1024) / 1024) > 0.2) { $('#hbSigSetupError').text('File must be under 200 kB.'); return; }
  96.     var img = new Image();
  97.     img.onload = function () {
  98.       if (img.width <= img.height) { $('#hbSigSetupError').text('Width should be greater than height.'); }
  99.       else { $('#hbSigSetupForm')[0].submit(); }
  100.     };
  101.     img.onerror = function () { $('#hbSigSetupError').text('Invalid image file.'); };
  102.     var reader = new FileReader();
  103.     reader.onload = function (e) { img.src = e.target.result; };
  104.     reader.readAsDataURL(file);
  105.   });
  107.   // Manual trigger: any element with [data-open-signature-modal] opens the modal
  108.   // (to set OR update the signature/hash on demand, not just first-run).
  109.   $(document).on('click', '[data-open-signature-modal]', function (e) {
  110.     e.preventDefault();
  111.     $('#hbSigRedirectTo').val(window.location.href);
  112.     hbShowSig();
  113.   });
  115.   // First-run check — once per session, skip the signature page itself.
  116.   $(function () {
  117.     try {
  118.       if (sessionStorage.getItem('hb_sig_checked') === '1') return;
  119.       if (window.location.pathname.indexOf('update_signature') !== -1) return;
  120.       $.getJSON('{{ path('signature_status') }}')
  121.         .done(function (res) {
  122.           sessionStorage.setItem('hb_sig_checked', '1');
  123.           if (res && res.hasSignature === false) {
  124.             $('#hbSigRedirectTo').val(window.location.href);
  125.             hbShowSig();
  126.           }
  127.         })
  128.         .fail(function () { /* fail safe: never block the page */ });
  129.     } catch (e) { /* no-op */ }
  130.   });
  131. }());
  132. </script>