How to handle protected files

Technical Support WebViewer
, ,
1

WebViewer Version: 8.9.0

Do you have an issue with a specific file(s)? no
Can you reproduce using one of our samples or online demos? yes
Are you using the WebViewer server? no
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? no
Is your issue related to annotations? no

Please give a brief summary of your issue: need to know what functions handle password modal for protected files but documentation is not clear about it
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

here is the situation, i have a page that uses pdftron to open a file and then sign it using some custom drag and drop elements, this page has a loading animation that hides pdftron iframe while document is loading and once is finished it hides the loader and shows pdftron iframe.

now this works for unprotected documents just fine, but it doesn’t work for protected documents because the event that hides the loader is triggered after document is rendered, and if document is protected then the event is not triggered putting the user in an endless loading animation.

So i though of changing the moment at which the loader is hidden or detect if modal is open but i couldn’t find password modal related events or functions, also i noticed that there are only 3 attempts allowed for entering the password otherwise the document is not loaded leaving the user in an empty webviewer, so i need to know what is the function that gets called when user fails the 3 attempts in order to redirect it to homepage and if there is an event tells me if password modal is triggered because i need to put that modal on top of everything else so the user puts the password and loader is hidden when document is fully loaded and not during the process.

last but not least, i am loading my document in this way

WebViewer({
                path: '/js/WebViewerNew/lib',
                initialDoc: this.initialDoc,
                extension: 'pdf',
                css: '/css/pdftron.css?' + today,
            }, document.getElementById('webviewer'))
                .then((instance) => {

and this is the example in the docs

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.pdf', {
      password: 'asdf'
    });
  });

so since i don’t load the document in the same way the password option doesn’t work for me if I put it in the options or maybe it does but don’t know the right way to do it, i can always change it to use the docs example but i wanted to know if is possible to do it while using the first code or not since i have a function that let’s me get the password for pdf files so i can pass it as a parameter to other places

any help will be appreciated, thank you and have a good day
Please provide a link to a minimal sample where the issue is reproducible:

2

Hi there,

At the moment we are not firing any specific events when a PDF requires password. However, we can make use of the MutationObserver to observe the changes on password modal element, so that we can execute other logics right after the changes. Here is a code snippet of how that would work:

const { documentViewer } = instance.Core;
const iframeDocument = documentViewer.getViewerElement().ownerDocument;
const modalElement = iframeDocument.querySelector('[data-element="passwordModal"]');

// Options for the observer (which mutations to observe)
const config = { attributes: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.attributeName === 'class' && mutation.target.className.includes('PasswordModal open')) {
      console.log('Password modal just opened.')
      // do stuff here
    } else if (mutation.attributeName === 'class' && mutation.target.className.includes('PasswordModal close')) {
      console.log('Password modal just closed.')
      // do stuff here
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(modalElement, config);

// It's probably wise to disconnect once our document finishes loading
documentViewer.addEventListener('documentLoaded', ()=>{
  observer.disconnect();
});
// And also, we should start observing again once the current document is unloaded, as it's possible that the next loaded document is also password protected.
documentViewer.addEventListener('documentUnloaded', ()=>{
  observer.observe(modalElement, config);
});
3

hi Yixiao, this help but there is still the issue when someone fails to enter password more than 3 times, how do i handle that scenario and redirect member to homepage so is no stuck on the loading sequence, if possible please consider creating a task for creating and assigning some events for signature modal, that would make it so much easier for future interactions,

4

Hi,

For the redirection you can do it in the code snippet above where it says Password modal just closed. Note that the modal’s attribute will change only after the last error modal is closed, as internally we are replacing the password modal’s content to generate the last error modal’s content body.

For your request to add event firing, we will add it to the backlog for our product team to discuss.
Starting recently, we are asking our customers some more context around any feature requests they make. We understand that you’ve explained some of the questions below already, but we would appreciate if you could go through this step with us and conclude your answers in a concise way, as the people who will be working on the feature development won’t necessarily be the same people who exchanged messages with you here:

What is the workflow that you would use the requested feature in?
Why is the feature valuable to you and your users?
How are you coping without it right now?

Thank you and please let us know.

5

Hi Yixiao you are right about using the modal closed for handling some stuff but here is the issue, at the moment there are 3 possible scenarios in which password modal is closed.

  1. user enters right password

  2. user decides to close modal without entering the password

  3. user exhaust password attempts

if I use the code you sent me to redirect to home, user will go to home no matter what they do because the condition is that modal is closed and that’s it, so whether they put right password or not they will be send to homepage, thus my problem with that code.

Now, for the first case, that one is handled by the system already because once right password is submitted document is loaded and everything else works as intended so no need to do anything extra there.

For second and third case document is not loaded and modal is closed which is the correct behavior as well, but i can’t tell the system to redirect to home simply using he close modal event because i would face the issue I mentioned before, so at the moment I attach click events to the “x” and “ok” button in order to be able to redirect user to homepage but is not ideal.

I mean, the signature tool has a default limit of 4 signatures but there is a command to change it to a different number, and it makes sense to have a feature like that, so I don’t understand why would not make sense to create event handlers and features like other components such as documentViewer.

So, about what would be the ideal for this case here is my opinion, have an event to detect when that modal is opened like, “passwordModalDisplayed” and have and event that tells system the reason why modal is closed like, “passwordNotEntered” and “passwordAttemptsExhausted”, as well as a command to change allowed password attempts, that would resolve all of my current issues with this part, also considering this happens on the load document process this should be included in the documentViewer part within an event like beforeLoading, or beginLoading.

I hope this explains my situation and hope to receive an answer for you or the development team soon, thank you and have a good day.

6

Thank you for your detailed explanation! We will get back to you as soon as this item is discussed.