[bugfix] resolves #50, also fix the flashing problem when entering a wrong password and reset state for password modal when loading another document (#51)

Author: ZhijieZhang

src/apis/closeDocument.js

@@ -1,8 +1,8 @@
 import core from 'core';
 import actions from 'actions';
 
-export default store => () => core.closeDocument().then(() => {
-  store.dispatch(actions.setDocumentLoaded(false));
-  store.dispatch(actions.closeElement('pageNavOverlay'));
-  store.dispatch(actions.setOutlines([]));
+export default ({ dispatch }) => () => core.closeDocument(dispatch).then(() => {
+  dispatch(actions.setDocumentLoaded(false));
+  dispatch(actions.closeElement('pageNavOverlay'));
+  dispatch(actions.setOutlines([]));
 });

src/components/FilePickerHandler/FilePickerHandler.js

@@ -36,7 +36,7 @@ class FilePickerHandler extends React.PureComponent {
       this.props.setDocumentFile(file);
       this.props.openElement('loadingModal');
       this.props.closeElement('menuOverlay');
-      core.closeDocument().then(() => {
+      core.closeDocument(this.props.dispatch).then(() => {
         loadDocument({ document: this.props.document, advanced: this.props.advanced }, this.props.dispatch);
       });
     }

src/components/PasswordModal/PasswordModal.js

@@ -5,7 +5,6 @@ import { translate } from 'react-i18next';
 
 import Button from 'components/Button';
 
-import core from 'core';
 import getClassName from 'helpers/getClassName';
 import actions from 'actions';
 import selectors from 'selectors';
@@ -15,7 +14,9 @@ import './PasswordModal.scss';
 class PasswordModal extends React.PureComponent {
   static propTypes = {
     isOpen: PropTypes.bool,
+    attempt: PropTypes.number.isRequired,
     checkPassword: PropTypes.func,
+    setPasswordAttempts: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
     closeElement: PropTypes.func.isRequired
   }
@@ -24,59 +25,43 @@ class PasswordModal extends React.PureComponent {
     super();
     this.maxAttempts = 3;
     this.passwordInput = React.createRef();
-    this.state = {
-      attempt: 0,
+    this.initialState = {
       password: '',
       userCanceled: false
     };
-  }
-
-  componentDidMount() {
-    core.addEventListener('beforeDocumentLoaded', this.onBeforeDocumentLoaded);
+    this.state = this.initialState;
   }
 
   componentDidUpdate(prevProps) {
     if (!prevProps.isOpen && this.props.isOpen) {
       this.props.closeElement('loadingModal');
     }
+    if (prevProps.isOpen && !this.props.isOpen) {
+      // when a user enters the correct password or calls core.closeDocument
+      // reset state in case user loads another password-protected document
+      this.setState(this.initialState);
+    }
     if (this.passwordInput.current) {
       this.passwordInput.current.focus();
     }
   }
 
-  componentWillUnmount() {
-    core.removeEventListener('beforeDocumentLoaded', this.onBeforeDocumentLoaded);
-  }
-
-  onBeforeDocumentLoaded = () => {
-    this.setState({
-      attempt: 0
-    });
-  }
-
   handleInputChange = e => {
     this.setState({ password: e.target.value });
   }
 
   handleSubmit = e => {
     e.preventDefault();
 
-    const { checkPassword, closeElement } = this.props;
-
-    this.setState(prevState => ({ 
-      attempt: prevState.attempt + 1,
-      password: ''
-    }));
-    checkPassword(this.state.password);
-    closeElement('passwordModal');
+    this.props.checkPassword(this.state.password);
   }
 
   handleCancel = () => {
     this.setState({ userCanceled: true });
   }
 
   renderContent = () => {
-    const userExceedsMaxAttempts = this.state.attempt === this.maxAttempts;
+    const userExceedsMaxAttempts = this.props.attempt === this.maxAttempts;
 
     if (userExceedsMaxAttempts) {
       return this.renderMaxAttemptsContent();
@@ -98,7 +83,7 @@ class PasswordModal extends React.PureComponent {
 
   renderEnterPasswordContent = () => {
     const { t } = this.props;
-    const wrongPassword = this.state.attempt !== 0;
+    const wrongPassword = this.props.attempt !== 0;
 
     return (
       <div className="wrapper">
@@ -117,7 +102,7 @@ class PasswordModal extends React.PureComponent {
           {wrongPassword &&
             <div className="incorrect-password">
               {t('message.incorrectPassword', { 
-                remainingAttempts: this.maxAttempts - this.state.attempt
+                remainingAttempts: this.maxAttempts - this.props.attempt
               })}
             </div>
           }
@@ -153,10 +138,12 @@ class PasswordModal extends React.PureComponent {
 
 const mapStateToProps = state => ({
   isOpen: selectors.isElementOpen(state, 'passwordModal'),
-  checkPassword: selectors.getCheckPasswordFunction(state)
+  checkPassword: selectors.getCheckPasswordFunction(state),
+  attempt: selectors.getPasswordAttempts(state)
 });
 
 const mapDispatchToProps = {
+  setPasswordAttempts: actions.setPasswordAttempts,
   closeElement: actions.closeElement
 };
 

src/core/closeDocument.js

@@ -1,7 +1,13 @@
+import actions from 'actions';
+
 /**
  * https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#closeDocument__anchor
  * @fires documentUnloaded on DocumentViewer
  * @see onDocumentUnloaded.js (No documentation yet)
  */
-export default () => window.docViewer.closeDocument();
+export default dispatch => {
+  dispatch(actions.closeElement('passwordModal'));
+  
+  return window.docViewer.closeDocument();
+};
 

src/event-listeners/onBeforeDocumentLoaded.js

@@ -2,6 +2,10 @@ import core from 'core';
 import actions from 'actions';
 
 export default dispatch => () => {
+  // if we are opening an password-protected pdf,
+  // this event will only be trigger after we enter the correct password, so it's safe to close this modal here
+  dispatch(actions.closeElement('passwordModal'));
+
   const totalPages = core.getTotalPages();
   const currentPage = core.getCurrentPage();
 

src/helpers/loadDocument.js

@@ -8,7 +8,7 @@ import { supportedPDFExtensions, supportedOfficeExtensions } from 'constants/sup
 import actions from 'actions';
 
 export default (state, dispatch) => {
-  core.closeDocument().then(() => {
+  core.closeDocument(dispatch).then(() => {
     checkByteRange(state).then(streaming => {
       Promise.all([getPartRetriever(state, streaming), getDocOptions(state, dispatch, streaming)])
       .then(params => {
@@ -147,7 +147,9 @@ const getDocOptions = (state, dispatch, streaming) => {
 
       Promise.all([getBackendPromise(pdfType), getBackendPromise(officeType)]).then(([pdfBackendType, officeBackendType]) => {
         let passwordChecked = false; // to prevent infinite loop when wrong password is passed as an argument
+        let attempt = 0;
         const getPassword = checkPassword => {
+          dispatch(actions.setPasswordAttempts(attempt++));
           if (password && !passwordChecked) {
             checkPassword(password);
             passwordChecked = true;

src/redux/actions/internalActions.js

@@ -87,6 +87,7 @@ export const setFilename = filename => ({ type: 'SET_FILENAME', payload: { filen
 export const setTotalPages = totalPages => ({ type: 'SET_TOTAL_PAGES', payload: { totalPages } });
 export const setOutlines = outlines => ({ type: 'SET_OUTLINES', payload: { outlines } });
 export const setCheckPasswordFunction = func => ({ type: 'SET_CHECKPASSWORD', payload: { func } });
+export const setPasswordAttempts = attempt => ({ type: 'SET_PASSWORD_ATTEMPTS', payload: { attempt } });
 export const setPrintQuality = quality => ({ type: 'SET_PRINT_QUALITY', payload: { quality } });
 export const setPassword = password => ({ type: 'SET_PASSWORD', payload: { password } });
 

src/redux/initialState.js

@@ -183,7 +183,8 @@ export default {
     outlines: [],
     checkPassword: null,
     password: '',
-    printQuality: 1
+    printQuality: 1,
+    passwordAttempts: -1,
   },
   user: {
     name: getHashParams('user', 'Guest'),

src/redux/reducers/documentReducer.js

@@ -22,6 +22,8 @@ export default initialState => (state = initialState, action) => {
       return { ...state, outlines: payload.outlines };
     case 'SET_CHECKPASSWORD':
       return { ...state, checkPassword: payload.func };
+    case 'SET_PASSWORD_ATTEMPTS':
+      return { ...state, passwordAttempts: payload.attempt };
     case 'SET_PASSWORD':
       return { ...state, password: payload.password };
     case 'SET_PRINT_QUALITY':

src/redux/selectors/exposedSelectors.js

@@ -55,6 +55,7 @@ export const isEmbedPrintSupported = state => {
   return  isPDF && isChrome;
 };
 export const getCheckPasswordFunction = state => state.document.checkPassword;
+export const getPasswordAttempts = state => state.document.passwordAttempts;
 export const getPrintQuality = state => state.document.printQuality;
 export const getTotalPages = state => state.document.totalPages;
 export const getOutlines = state => state.document.outlines;