From b91a2155dbf961bc42adc46b0fe4288baad44adb Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 19 May 2022 08:19:07 -1000
Subject: [PATCH 001/101] feat: added pdf password form for web

---
 src/components/PDFView/PDFPasswordForm.js | 68 ++++++++++++++++
 src/components/PDFView/index.js           | 95 +++++++++++++++++------
 src/languages/en.js                       |  1 +
 src/languages/es.js                       |  1 +
 src/styles/styles.js                      |  6 ++
 5 files changed, 147 insertions(+), 24 deletions(-)
 create mode 100644 src/components/PDFView/PDFPasswordForm.js

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
new file mode 100644
index 000000000000..d1185ec18370
--- /dev/null
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -0,0 +1,68 @@
+import React, {PureComponent, memo} from 'react';
+import {View} from 'react-native';
+import Button from '../Button';
+import Text from '../Text';
+import TextInput from '../TextInput';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import compose from '../../libs/compose';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+class PDFPasswordForm extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            password: null,
+        };
+    }
+
+    onSubmit = () => {
+        // console.debug("on submit - password is", this.state.password)
+        this.props.onSubmit(this.state.password);
+    }
+
+    render() {
+        return (
+            <View style={styles.pdfPasswordForm}>
+
+                <Text style={[styles.mb4, styles.col]}>
+                    {this.props.translate('attachmentView.pdfPasswordRequired')}
+                </Text>
+
+                <TextInput
+                    label={this.props.translate('common.password')}
+                    autoCompleteType="password"
+                    textContentType="password"
+                    onChangeText={password => this.setState({password})}
+                    returnKeyType="done"
+                    onSubmitEditing={this.onSubmit}
+                    secureTextEntry
+                    autoFocus
+                />
+
+                <Button
+                    success
+                    textStyles={[styles.buttonConfirmText]}
+                    text={this.props.translate('common.confirm')}
+                    onPress={this.onSubmit}
+                    pressOnEnter
+                    style={styles.mt4}
+                />
+
+            </View>
+        );
+    }
+}
+
+PDFPasswordForm.propTypes = propTypes;
+
+// PDFPasswordForm.defaultProps = defaultProps;
+PDFPasswordForm.displayName = 'PDFPasswordForm';
+
+export default compose(
+    memo,
+    withLocalize,
+)(PDFPasswordForm);
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 74b2ec33747d..3ab0fea72f63 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -6,6 +6,8 @@ import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import variables from '../../styles/variables';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import PDFPasswordForm from './PDFPasswordForm';
+import Log from '../../libs/Log';
 
 const propTypes = {
     /** URL to full-sized image */
@@ -29,8 +31,12 @@ class PDFView extends PureComponent {
         this.state = {
             numPages: null,
             windowWidth: Dimensions.get('window').width,
+            requestPassword: false,
+            password: null,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
+        this.onPassword = this.onPassword.bind(this);
+        this.onPasswordFormSubmit = this.onPasswordFormSubmit.bind(this);
     }
 
     /**
@@ -40,7 +46,46 @@ class PDFView extends PureComponent {
      * @memberof PDFView
      */
     onDocumentLoadSuccess({numPages}) {
+        // console.log("load success", numPages)
         this.setState({numPages});
+        this.setState({requestPassword: false, password: null});
+    }
+
+    onPassword(callback, reason) {
+        const PasswordResponses = {
+            NEED_PASSWORD: 1,
+            INCORRECT_PASSWORD: 2,
+        };
+
+        if (reason === PasswordResponses.NEED_PASSWORD) {
+            if (this.state.password) {
+                // console.log("already have password - doing callback");
+                callback(this.state.password);
+            } else {
+                // console.log("password required");
+                this.setState({requestPassword: true});
+                this.onPasswordCallback = callback;
+            }
+        } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
+            // console.log("password incorrect");
+            this.setState({requestPassword: true});
+            this.onPasswordCallback = callback;
+        } else {
+            Log.warn('[PDFView] pdf password requested for unknown reason: ', reason);
+        }
+    }
+
+    onPasswordFormSubmit(password) {
+        // console.log("onSubmitPasswordForm", password)
+        this.setState({requestPassword: false, password});
+    }
+
+    renderPasswordForm() {
+        return (
+            <PDFPasswordForm
+                onSubmit={this.onPasswordFormSubmit}
+            />
+        );
     }
 
     render() {
@@ -54,30 +99,32 @@ class PDFView extends PureComponent {
                 style={[styles.PDFView, this.props.style]}
                 onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
             >
-                <Document
-                    loading={<FullScreenLoadingIndicator />}
-                    file={this.props.sourceURL}
-                    options={{
-                        cMapUrl: 'cmaps/',
-                        cMapPacked: true,
-
-                    }}
-                    externalLinkTarget="_blank"
-                    onLoadSuccess={this.onDocumentLoadSuccess}
-                >
-                    {
-                        Array.from(
-                            new Array(this.state.numPages),
-                            (el, index) => (
-                                <Page
-                                    width={pageWidth}
-                                    key={`page_${index + 1}`}
-                                    pageNumber={index + 1}
-                                />
-                            ),
-                        )
-                    }
-                </Document>
+                {this.state.requestPassword ? this.renderPasswordForm() : (
+                    <Document
+                        loading={<FullScreenLoadingIndicator />}
+                        file={this.props.sourceURL}
+                        options={{
+                            cMapUrl: 'cmaps/',
+                            cMapPacked: true,
+                        }}
+                        externalLinkTarget="_blank"
+                        onLoadSuccess={this.onDocumentLoadSuccess}
+                        onPassword={this.onPassword}
+                    >
+                        {
+                            Array.from(
+                                new Array(this.state.numPages),
+                                (el, index) => (
+                                    <Page
+                                        width={pageWidth}
+                                        key={`page_${index + 1}`}
+                                        pageNumber={index + 1}
+                                    />
+                                ),
+                            )
+                        }
+                    </Document>
+                )}
             </View>
         );
     }
diff --git a/src/languages/en.js b/src/languages/en.js
index b7958f59db04..f12a8d5a11f2 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -570,6 +570,7 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',
+        pdfPasswordRequired: 'This PDF is password protected. Please enter the password to continue.',
     },
     pronouns: {
         heHimHis: 'He/him',
diff --git a/src/languages/es.js b/src/languages/es.js
index cc32d01eee28..9f2650c5d2b2 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -570,6 +570,7 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
+        pdfPasswordRequired: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para continuar.',
     },
     pronouns: {
         heHimHis: 'Él',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4859c0470350..d68cca17d0ac 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1707,6 +1707,7 @@ const styles = {
         flex: 1,
         backgroundColor: themeColors.modalBackground,
     },
+
     PDFView: {
         // `display: grid` is not supported in native platforms!
         // It's being used on Web/Desktop only to vertically center short PDFs,
@@ -1721,6 +1722,11 @@ const styles = {
         alignItems: 'center',
     },
 
+    pdfPasswordForm: {
+        ...spacing.m5,
+        maxWidth: 350,
+    },
+
     modalCenterContentContainer: {
         flex: 1,
         flexDirection: 'column',

From 8f204c0a11fa5538255ffe33389d91157b550e08 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 19 May 2022 11:22:54 -1000
Subject: [PATCH 002/101] feat: pdf password form - added invalid password
 message

---
 src/components/PDFView/PDFPasswordForm.js | 13 +++++++++++--
 src/languages/en.js                       |  1 +
 src/languages/es.js                       |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index d1185ec18370..b8c229ccc08a 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -11,6 +11,10 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    passwordInvalid: false,
+};
+
 class PDFPasswordForm extends PureComponent {
     constructor(props) {
         super(props);
@@ -43,6 +47,12 @@ class PDFPasswordForm extends PureComponent {
                     autoFocus
                 />
 
+                {this.props.passwordInvalid && (
+                    <Text style={[styles.formError]}>
+                        {this.props.translate('attachmentView.incorrectPDFPassword')}
+                    </Text>
+                )}
+
                 <Button
                     success
                     textStyles={[styles.buttonConfirmText]}
@@ -58,8 +68,7 @@ class PDFPasswordForm extends PureComponent {
 }
 
 PDFPasswordForm.propTypes = propTypes;
-
-// PDFPasswordForm.defaultProps = defaultProps;
+PDFPasswordForm.defaultProps = defaultProps;
 PDFPasswordForm.displayName = 'PDFPasswordForm';
 
 export default compose(
diff --git a/src/languages/en.js b/src/languages/en.js
index f12a8d5a11f2..328b19ad5aae 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -571,6 +571,7 @@ export default {
     attachmentView: {
         unknownFilename: 'Unknown filename',
         pdfPasswordRequired: 'This PDF is password protected. Please enter the password to continue.',
+        incorrectPDFPassword: 'Incorrect password. Please try again.',
     },
     pronouns: {
         heHimHis: 'He/him',
diff --git a/src/languages/es.js b/src/languages/es.js
index 9f2650c5d2b2..484ecb0033ec 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -571,6 +571,7 @@ export default {
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
         pdfPasswordRequired: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para continuar.',
+        incorrectPDFPassword: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
     },
     pronouns: {
         heHimHis: 'Él',

From 80eff1afaaa845bd48d6a1ac0d03a6d36500cacd Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 19 May 2022 12:22:37 -1000
Subject: [PATCH 003/101] feat: pdf password form - use style to show/hide
 react-pdf

---
 src/components/PDFView/index.js | 67 ++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 3ab0fea72f63..e0c71f8252ef 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -31,8 +31,8 @@ class PDFView extends PureComponent {
         this.state = {
             numPages: null,
             windowWidth: Dimensions.get('window').width,
-            requestPassword: false,
-            password: null,
+            requestPassword: true,
+            passwordInvalid: false,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.onPassword = this.onPassword.bind(this);
@@ -40,50 +40,71 @@ class PDFView extends PureComponent {
     }
 
     /**
-     * Callback to be called to set the number of pages on PDF
+     * Callback to be called to set the number of pages on PDF.
+     * Also update state to hide/reset PDF password form.
      *
      * @param {*} {numPages} No of pages in the rendered PDF
      * @memberof PDFView
      */
     onDocumentLoadSuccess({numPages}) {
-        // console.log("load success", numPages)
-        this.setState({numPages});
-        this.setState({requestPassword: false, password: null});
+        this.setState({
+            numPages,
+            requestPassword: false,
+            passwordInvalid: false,
+        });
     }
 
+    /**
+     * Event handler for password-protected PDFs. The react-pdf/Document
+     * component calls this handler to indicate that a PDF requires a
+     * password, or to indicate that a previously provided password was
+     * invalid.
+     *
+     * The PasswordResponses constants were copied from react-pdf because
+     * they're not exported in entry.webpack.
+     *
+     * @param {*} callback Callback used to send password to react-pdf
+     * @param {number} reason Reason code for password request
+     */
     onPassword(callback, reason) {
+        this.onPasswordCallback = callback;
+
         const PasswordResponses = {
             NEED_PASSWORD: 1,
             INCORRECT_PASSWORD: 2,
         };
 
         if (reason === PasswordResponses.NEED_PASSWORD) {
-            if (this.state.password) {
-                // console.log("already have password - doing callback");
-                callback(this.state.password);
-            } else {
-                // console.log("password required");
-                this.setState({requestPassword: true});
-                this.onPasswordCallback = callback;
-            }
-        } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
-            // console.log("password incorrect");
             this.setState({requestPassword: true});
-            this.onPasswordCallback = callback;
+        } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
+            this.setState({requestPassword: true, passwordInvalid: true});
         } else {
             Log.warn('[PDFView] pdf password requested for unknown reason: ', reason);
         }
     }
 
+    /**
+     * Event handler for PDFPasswordForm submission. When a password
+     * is received from the password form the handler calls the password
+     * callback previously received from react-pdf.
+     *
+     * @param {string} password The password entered in the form
+     */
     onPasswordFormSubmit(password) {
-        // console.log("onSubmitPasswordForm", password)
-        this.setState({requestPassword: false, password});
+        this.onPasswordCallback(password);
     }
 
+    /**
+     * Generate markup for PDFPasswordForm. This form is only displayed if a
+     * password is required to open a PDF.
+     *
+     * @returns {*} JSX markup for PDFPasswordForm
+     */
     renderPasswordForm() {
         return (
             <PDFPasswordForm
                 onSubmit={this.onPasswordFormSubmit}
+                passwordInvalid={this.state.passwordInvalid}
             />
         );
     }
@@ -93,13 +114,16 @@ class PDFView extends PureComponent {
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
             ? pdfContainerWidth : variables.pdfPageMaxWidth;
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
+        const pdfShowHideStyle = this.state.requestPassword ? [styles.PDFView, styles.dNone] : styles.PDFView;
 
         return (
             <View
                 style={[styles.PDFView, this.props.style]}
                 onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
             >
-                {this.state.requestPassword ? this.renderPasswordForm() : (
+                {this.state.requestPassword && this.renderPasswordForm()}
+
+                <View style={pdfShowHideStyle}>
                     <Document
                         loading={<FullScreenLoadingIndicator />}
                         file={this.props.sourceURL}
@@ -124,7 +148,8 @@ class PDFView extends PureComponent {
                             )
                         }
                     </Document>
-                )}
+                </View>
+
             </View>
         );
     }

From 7a0b368c688705e90d1f24b5fed60ce09ae2533c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 22 May 2022 09:50:41 -1000
Subject: [PATCH 004/101] feat: added pdf password form for ios/android

---
 src/components/PDFView/PDFPasswordForm.js |  7 +-
 src/components/PDFView/index.native.js    | 79 +++++++++++++++++++----
 2 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b8c229ccc08a..cfcc1a2550f2 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -24,7 +24,9 @@ class PDFPasswordForm extends PureComponent {
     }
 
     onSubmit = () => {
-        // console.debug("on submit - password is", this.state.password)
+        if (!this.state.password) {
+            return;
+        }
         this.props.onSubmit(this.state.password);
     }
 
@@ -58,8 +60,9 @@ class PDFPasswordForm extends PureComponent {
                     textStyles={[styles.buttonConfirmText]}
                     text={this.props.translate('common.confirm')}
                     onPress={this.onSubmit}
-                    pressOnEnter
                     style={styles.mt4}
+                    isDisabled={!this.state.password}
+                    isFocused
                 />
 
             </View>
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index be24d7a35f48..10ca01847ad3 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {TouchableWithoutFeedback} from 'react-native';
 import PDF from 'react-native-pdf';
@@ -6,6 +6,7 @@ import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import PDFPasswordForm from './PDFPasswordForm';
 
 const propTypes = {
     /** URL to full-sized image */
@@ -26,22 +27,72 @@ const defaultProps = {
 /**
  * On the native layer, we use a pdf library to display PDFs
  *
- * @param props
+ * @param {Object} props
  * @returns {JSX.Element}
  */
+const PDFView = (props) => {
+    const [requestPassword, setRequestPassword] = useState(false);
+    const [passwordInvalid, setPasswordInvalid] = useState(false);
+    const [password, setPassword] = useState('');
 
-const PDFView = props => (
-    <TouchableWithoutFeedback style={[styles.flex1, props.style]}>
-        <PDF
-            activityIndicator={<FullScreenLoadingIndicator />}
-            source={{uri: props.sourceURL}}
-            style={[
-                styles.imageModalPDF,
-                StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight),
-            ]}
-        />
-    </TouchableWithoutFeedback>
-);
+    /**
+     * The react-native-pdf/PDF calls this handler when a password is required,
+     * or if the specified password is invalid.
+     *
+     * The message is "Password required or incorrect password." Note that the message
+     * doesn't specify whether the password is simply empty or rather invalid.
+     *
+     * @param {Object} error
+     */
+    const onError = (error) => {
+        if (!error.message.match(/password/i)) {
+            return;
+        }
+
+        setRequestPassword(true);
+
+        // The error message provided by react-native-pdf doesn't indicate whether this
+        // is an initial password request or if the password is invalid. So we just assume
+        // that if a password was already entered then it's an invalid password error.
+        if (password) {
+            setPasswordInvalid(true);
+        }
+    };
+
+    /**
+     * Handler called by PDFPasswordForm when the password form is submitted.
+     *
+     * @param {string} submittedPassword Password submitted in PDFPasswordForm
+     */
+    const onPasswordFormSubmit = (submittedPassword) => {
+        setPassword(submittedPassword);
+        setRequestPassword(false);
+    };
+
+    return (
+        <TouchableWithoutFeedback style={[styles.flex1, props.style]}>
+
+            {requestPassword ? (
+                <PDFPasswordForm
+                    onSubmit={onPasswordFormSubmit}
+                    passwordInvalid={passwordInvalid}
+                />
+            ) : (
+                <PDF
+                    activityIndicator={<FullScreenLoadingIndicator />}
+                    source={{uri: props.sourceURL}}
+                    style={[
+                        styles.imageModalPDF,
+                        StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight),
+                    ]}
+                    onError={error => onError(error)}
+                    password={password}
+                />
+            )}
+
+        </TouchableWithoutFeedback>
+    );
+};
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;

From 11a2151aee7ecda2f56457c7e18eb951d619c7cf Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 22 May 2022 14:02:49 -1000
Subject: [PATCH 005/101] feat: pdf password form - converted native PDFView to
 pure component

---
 src/components/PDFView/index.native.js | 125 ++++++++++++++++---------
 1 file changed, 82 insertions(+), 43 deletions(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 10ca01847ad3..7550685115b7 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,6 +1,6 @@
-import React, {useState} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {TouchableWithoutFeedback} from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -25,15 +25,33 @@ const defaultProps = {
 };
 
 /**
- * On the native layer, we use a pdf library to display PDFs
+ * On the native layer, we use a pdf library to display PDFs. If a PDF is
+ * password-protected we render a PDFPasswordForm to request a password
+ * from the user.
  *
- * @param {Object} props
- * @returns {JSX.Element}
+ * In order to render things nicely during a password challenge we need
+ * to keep track of a bunch of additional state. In particular, the
+ * react-native-pdf/PDF component is both conditionally rendered and hidden
+ * depending upon the situation. It needs to be rerendered on each password
+ * submission because it doesn't dynamically handle updates to it's
+ * password property. And we need to hide it during password challenges
+ * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
+ * is (temporarily) rendered.
  */
-const PDFView = (props) => {
-    const [requestPassword, setRequestPassword] = useState(false);
-    const [passwordInvalid, setPasswordInvalid] = useState(false);
-    const [password, setPassword] = useState('');
+class PDFView extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            requestPassword: false,
+            passwordInvalid: false,
+            password: '',
+            attemptPdfLoad: true,
+            pdfLoaded: false,
+        };
+        this.onError = this.onError.bind(this);
+        this.onPasswordFormSubmit = this.onPasswordFormSubmit.bind(this);
+        this.onLoadComplete = this.onLoadComplete.bind(this);
+    }
 
     /**
      * The react-native-pdf/PDF calls this handler when a password is required,
@@ -44,55 +62,76 @@ const PDFView = (props) => {
      *
      * @param {Object} error
      */
-    const onError = (error) => {
+    onError(error) {
         if (!error.message.match(/password/i)) {
             return;
         }
 
-        setRequestPassword(true);
+        // Render password form, and don't render PDF.
+        this.setState({requestPassword: true, attemptPdfLoad: false});
 
         // The error message provided by react-native-pdf doesn't indicate whether this
         // is an initial password request or if the password is invalid. So we just assume
         // that if a password was already entered then it's an invalid password error.
-        if (password) {
-            setPasswordInvalid(true);
+        if (this.state.password) {
+            this.setState({passwordInvalid: true});
         }
-    };
+    }
 
     /**
      * Handler called by PDFPasswordForm when the password form is submitted.
      *
      * @param {string} submittedPassword Password submitted in PDFPasswordForm
      */
-    const onPasswordFormSubmit = (submittedPassword) => {
-        setPassword(submittedPassword);
-        setRequestPassword(false);
-    };
-
-    return (
-        <TouchableWithoutFeedback style={[styles.flex1, props.style]}>
-
-            {requestPassword ? (
-                <PDFPasswordForm
-                    onSubmit={onPasswordFormSubmit}
-                    passwordInvalid={passwordInvalid}
-                />
-            ) : (
-                <PDF
-                    activityIndicator={<FullScreenLoadingIndicator />}
-                    source={{uri: props.sourceURL}}
-                    style={[
-                        styles.imageModalPDF,
-                        StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight),
-                    ]}
-                    onError={error => onError(error)}
-                    password={password}
-                />
-            )}
-
-        </TouchableWithoutFeedback>
-    );
-};
+    onPasswordFormSubmit(submittedPassword) {
+        // Render PDF in invisible state. It's invisible because at this
+        // point in the password challenge process pdfLoaded is false.
+        this.setState({password: submittedPassword, attemptPdfLoad: true});
+    }
+
+    onLoadComplete() {
+        // Don't render PDFPasswordForm, and do render PDF in visible state.
+        this.setState({requestPassword: false, pdfLoaded: true});
+    }
+
+    render() {
+        const pdfStyles = [
+            styles.imageModalPDF,
+            StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
+        ];
+
+        if (!this.state.pdfLoaded) {
+            pdfStyles.push(styles.invisible);
+        }
+
+        return (
+            <TouchableWithoutFeedback style={[styles.flex1, this.props.style]}>
+
+                <View>
+
+                    {this.state.attemptPdfLoad && (
+                        <PDF
+                            activityIndicator={<FullScreenLoadingIndicator />}
+                            source={{uri: this.props.sourceURL}}
+                            style={pdfStyles}
+                            onError={error => this.onError(error)}
+                            password={this.state.password}
+                            onLoadComplete={this.onLoadComplete}
+                        />
+                    )}
+
+                    {this.state.requestPassword && (
+                        <PDFPasswordForm
+                            onSubmit={this.onPasswordFormSubmit}
+                            passwordInvalid={this.state.passwordInvalid}
+                        />
+                    )}
+
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+}
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;

From caaa16c591f456ee0a52b13a73a0ac6f0d95548c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 22 May 2022 17:06:53 -1000
Subject: [PATCH 006/101] feat: pdf password form - changed background color to
 white

---
 src/components/PDFView/index.js | 21 ++++++++++++++++-----
 src/styles/styles.js            |  1 -
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index e0c71f8252ef..4080bcd5deb6 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -114,16 +114,25 @@ class PDFView extends PureComponent {
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
             ? pdfContainerWidth : variables.pdfPageMaxWidth;
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
-        const pdfShowHideStyle = this.state.requestPassword ? [styles.PDFView, styles.dNone] : styles.PDFView;
+
+        const pdfStyle = [styles.PDFView];
+        const containerStyle = [styles.PDFView, this.props.style];
+
+        // If we're requesting a password then we need to set the background to
+        // defaultModalContainer color (white) and hide - but still render -
+        // the PDF component.
+        if (this.state.requestPassword) {
+            pdfStyle.push(styles.invisible);
+            containerStyle.push(styles.defaultModalContainer);
+        }
 
         return (
+
             <View
-                style={[styles.PDFView, this.props.style]}
+                style={containerStyle}
                 onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
             >
-                {this.state.requestPassword && this.renderPasswordForm()}
-
-                <View style={pdfShowHideStyle}>
+                <View style={pdfStyle}>
                     <Document
                         loading={<FullScreenLoadingIndicator />}
                         file={this.props.sourceURL}
@@ -150,6 +159,8 @@ class PDFView extends PureComponent {
                     </Document>
                 </View>
 
+                {this.state.requestPassword && this.renderPasswordForm()}
+
             </View>
         );
     }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d68cca17d0ac..4cc80fee4f7c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1723,7 +1723,6 @@ const styles = {
     },
 
     pdfPasswordForm: {
-        ...spacing.m5,
         maxWidth: 350,
     },
 

From d4cd9aafc79e79ef4b9025ea89e769585c265ae8 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 22 May 2022 17:07:31 -1000
Subject: [PATCH 007/101] feat: pdf password form - added more comments for
 native

---
 src/components/PDFView/index.native.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 7550685115b7..bbd4c87cb480 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -100,6 +100,10 @@ class PDFView extends PureComponent {
             StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
         ];
 
+        // If we haven't yet successfully loaded the PDF then we need to hide the
+        // react-native-pdf/PDF component so that PDFPasswordForm is positioned
+        // nicely. We're just hiding it because we still need to render the PDF so
+        // that it can validate the password.
         if (!this.state.pdfLoaded) {
             pdfStyles.push(styles.invisible);
         }

From fa7e2fd6a9bd9cf14ad730c528cb05ef74594805 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 22 May 2022 18:32:47 -1000
Subject: [PATCH 008/101] feat: pdf password form - some updates to better
 conform to coding standards

---
 src/components/PDFView/PDFPasswordForm.js | 11 +++++--
 src/components/PDFView/index.js           | 24 +++++++--------
 src/components/PDFView/index.native.js    | 37 +++++++++++++----------
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index cfcc1a2550f2..2548ef208516 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -1,4 +1,5 @@
 import React, {PureComponent, memo} from 'react';
+import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Button from '../Button';
 import Text from '../Text';
@@ -8,11 +9,13 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 
 const propTypes = {
+    /** If the submitted password is invalid */
+    isPasswordInvalid: PropTypes.bool,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    passwordInvalid: false,
+    isPasswordInvalid: false,
 };
 
 class PDFPasswordForm extends PureComponent {
@@ -23,6 +26,10 @@ class PDFPasswordForm extends PureComponent {
         };
     }
 
+    /**
+     * When the form is submitted, call the props.onSubmit() if the password
+     * input field contains text.
+     */
     onSubmit = () => {
         if (!this.state.password) {
             return;
@@ -49,7 +56,7 @@ class PDFPasswordForm extends PureComponent {
                     autoFocus
                 />
 
-                {this.props.passwordInvalid && (
+                {this.props.isPasswordInvalid && (
                     <Text style={[styles.formError]}>
                         {this.props.translate('attachmentView.incorrectPDFPassword')}
                     </Text>
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 4080bcd5deb6..2871588f4ed2 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -31,8 +31,8 @@ class PDFView extends PureComponent {
         this.state = {
             numPages: null,
             windowWidth: Dimensions.get('window').width,
-            requestPassword: true,
-            passwordInvalid: false,
+            shouldRequestPassword: true,
+            isPasswordInvalid: false,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.onPassword = this.onPassword.bind(this);
@@ -49,8 +49,8 @@ class PDFView extends PureComponent {
     onDocumentLoadSuccess({numPages}) {
         this.setState({
             numPages,
-            requestPassword: false,
-            passwordInvalid: false,
+            shouldRequestPassword: false,
+            isPasswordInvalid: false,
         });
     }
 
@@ -64,7 +64,7 @@ class PDFView extends PureComponent {
      * they're not exported in entry.webpack.
      *
      * @param {*} callback Callback used to send password to react-pdf
-     * @param {number} reason Reason code for password request
+     * @param {Number} reason Reason code for password request
      */
     onPassword(callback, reason) {
         this.onPasswordCallback = callback;
@@ -75,9 +75,9 @@ class PDFView extends PureComponent {
         };
 
         if (reason === PasswordResponses.NEED_PASSWORD) {
-            this.setState({requestPassword: true});
+            this.setState({shouldRequestPassword: true});
         } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
-            this.setState({requestPassword: true, passwordInvalid: true});
+            this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
         } else {
             Log.warn('[PDFView] pdf password requested for unknown reason: ', reason);
         }
@@ -88,7 +88,7 @@ class PDFView extends PureComponent {
      * is received from the password form the handler calls the password
      * callback previously received from react-pdf.
      *
-     * @param {string} password The password entered in the form
+     * @param {String} password The password entered in the form
      */
     onPasswordFormSubmit(password) {
         this.onPasswordCallback(password);
@@ -98,13 +98,13 @@ class PDFView extends PureComponent {
      * Generate markup for PDFPasswordForm. This form is only displayed if a
      * password is required to open a PDF.
      *
-     * @returns {*} JSX markup for PDFPasswordForm
+     * @returns {Object} JSX markup for PDFPasswordForm
      */
     renderPasswordForm() {
         return (
             <PDFPasswordForm
                 onSubmit={this.onPasswordFormSubmit}
-                passwordInvalid={this.state.passwordInvalid}
+                isPasswordInvalid={this.state.isPasswordInvalid}
             />
         );
     }
@@ -121,7 +121,7 @@ class PDFView extends PureComponent {
         // If we're requesting a password then we need to set the background to
         // defaultModalContainer color (white) and hide - but still render -
         // the PDF component.
-        if (this.state.requestPassword) {
+        if (this.state.shouldRequestPassword) {
             pdfStyle.push(styles.invisible);
             containerStyle.push(styles.defaultModalContainer);
         }
@@ -159,7 +159,7 @@ class PDFView extends PureComponent {
                     </Document>
                 </View>
 
-                {this.state.requestPassword && this.renderPasswordForm()}
+                {this.state.shouldRequestPassword && this.renderPasswordForm()}
 
             </View>
         );
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index bbd4c87cb480..8de02dae2507 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -42,11 +42,11 @@ class PDFView extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
-            requestPassword: false,
-            passwordInvalid: false,
+            shouldRequestPassword: false,
+            isPasswordInvalid: false,
             password: '',
-            attemptPdfLoad: true,
-            pdfLoaded: false,
+            shouldAttemptPdfLoad: true,
+            isPdfLoaded: false,
         };
         this.onError = this.onError.bind(this);
         this.onPasswordFormSubmit = this.onPasswordFormSubmit.bind(this);
@@ -68,30 +68,35 @@ class PDFView extends PureComponent {
         }
 
         // Render password form, and don't render PDF.
-        this.setState({requestPassword: true, attemptPdfLoad: false});
+        this.setState({shouldRequestPassword: true, shouldAttemptPdfLoad: false});
 
         // The error message provided by react-native-pdf doesn't indicate whether this
         // is an initial password request or if the password is invalid. So we just assume
         // that if a password was already entered then it's an invalid password error.
         if (this.state.password) {
-            this.setState({passwordInvalid: true});
+            this.setState({isPasswordInvalid: true});
         }
     }
 
     /**
-     * Handler called by PDFPasswordForm when the password form is submitted.
+     * When the password is submitted via PDFPasswordForm, save the password
+     * in state and attempt to load the PDF.
      *
-     * @param {string} submittedPassword Password submitted in PDFPasswordForm
+     * @param {String} password Password submitted via PDFPasswordForm
      */
-    onPasswordFormSubmit(submittedPassword) {
+    onPasswordFormSubmit(password) {
         // Render PDF in invisible state. It's invisible because at this
-        // point in the password challenge process pdfLoaded is false.
-        this.setState({password: submittedPassword, attemptPdfLoad: true});
+        // stage of the password challenge process isPdfLoaded is false.
+        this.setState({password, shouldAttemptPdfLoad: true});
     }
 
+    /**
+     * When the PDF is loaded, hide PDFPasswordForm and make PDF component
+     * visible.
+     */
     onLoadComplete() {
         // Don't render PDFPasswordForm, and do render PDF in visible state.
-        this.setState({requestPassword: false, pdfLoaded: true});
+        this.setState({shouldRequestPassword: false, isPdfLoaded: true});
     }
 
     render() {
@@ -104,7 +109,7 @@ class PDFView extends PureComponent {
         // react-native-pdf/PDF component so that PDFPasswordForm is positioned
         // nicely. We're just hiding it because we still need to render the PDF so
         // that it can validate the password.
-        if (!this.state.pdfLoaded) {
+        if (!this.state.isPdfLoaded) {
             pdfStyles.push(styles.invisible);
         }
 
@@ -113,7 +118,7 @@ class PDFView extends PureComponent {
 
                 <View>
 
-                    {this.state.attemptPdfLoad && (
+                    {this.state.shouldAttemptPdfLoad && (
                         <PDF
                             activityIndicator={<FullScreenLoadingIndicator />}
                             source={{uri: this.props.sourceURL}}
@@ -124,10 +129,10 @@ class PDFView extends PureComponent {
                         />
                     )}
 
-                    {this.state.requestPassword && (
+                    {this.state.shouldRequestPassword && (
                         <PDFPasswordForm
                             onSubmit={this.onPasswordFormSubmit}
-                            passwordInvalid={this.state.passwordInvalid}
+                            isPasswordInvalid={this.state.isPasswordInvalid}
                         />
                     )}
 

From b7260d907718a98c3136b77ff2e17f86a1590ac1 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 23 May 2022 06:11:00 -1000
Subject: [PATCH 009/101] feat: pdf password form - updated Button to handle
 changes to props.pressOnEnter

---
 src/components/Button.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 85254d4c1e75..83fc4835f10d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -152,7 +152,8 @@ class Button extends Component {
 
         // Setup and attach keypress handler for pressing the button with Enter key
         this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
-            if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
+            if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading
+                || (e && e.target.nodeName === 'TEXTAREA') || !this.props.pressOnEnter) {
                 return;
             }
             this.props.onPress();

From eed536373ee076d253b6bbab5139afb29c6a14f0 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 23 May 2022 06:16:07 -1000
Subject: [PATCH 010/101] feat: pdf password form - added enable/disable option
 to attachment send-on-enter

---
 src/components/AttachmentModal.js         | 11 +++++++++--
 src/components/AttachmentView.js          |  7 +++++++
 src/components/PDFView/PDFPasswordForm.js |  1 +
 src/components/PDFView/index.js           | 15 ++++++++++++---
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 9737a3377ed7..e9a41721d32e 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -75,6 +75,7 @@ class AttachmentModal extends PureComponent {
             file: null,
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
+            isSendOnEnterEnabled: true,
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);
@@ -180,7 +181,13 @@ class AttachmentModal extends PureComponent {
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (
-                            <AttachmentView sourceURL={sourceURL} file={this.state.file} />
+                            <AttachmentView
+                                sourceURL={sourceURL}
+                                file={this.state.file}
+                                onUserInputRequired={(isRequired) => {
+                                    this.setState({isSendOnEnterEnabled: !isRequired});
+                                }}
+                            />
                         )}
                     </View>
 
@@ -192,7 +199,7 @@ class AttachmentModal extends PureComponent {
                             textStyles={[styles.buttonConfirmText]}
                             text={this.props.translate('common.send')}
                             onPress={this.submitAndClose}
-                            pressOnEnter
+                            pressOnEnter={this.state.isSendOnEnterEnabled}
                         />
                     )}
                 </Modal>
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index d783de4e0401..909f674534ff 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -28,6 +28,9 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
+    /** Notify parent that we're requesting input from user (e.g. a PDF password) */
+    onUserInputRequired: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -37,6 +40,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
+    onUserInputRequired: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -45,10 +49,13 @@ const AttachmentView = (props) => {
     if (Str.isPDF(props.sourceURL)
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
         return (
+
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
+                onUserInputRequired={props.onUserInputRequired}
             />
+
         );
     }
 
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 2548ef208516..8102ad6c1177 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -11,6 +11,7 @@ import compose from '../../libs/compose';
 const propTypes = {
     /** If the submitted password is invalid */
     isPasswordInvalid: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 2871588f4ed2..1e6d5f8692e6 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -18,11 +18,15 @@ const propTypes = {
     /** Any additional styles to apply */
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
+
+    /** Notify parent that we're requesting input from user */
+    onUserInputRequired: PropTypes.func,
 };
 
 const defaultProps = {
     sourceURL: '',
     style: {},
+    onUserInputRequired: () => {},
 };
 
 class PDFView extends PureComponent {
@@ -40,8 +44,9 @@ class PDFView extends PureComponent {
     }
 
     /**
-     * Callback to be called to set the number of pages on PDF.
-     * Also update state to hide/reset PDF password form.
+     * Upon successful document load, set the number of pages on PDF,
+     * hide/reset PDF password form, and notify parent component that
+     * user input is no longer required.
      *
      * @param {*} {numPages} No of pages in the rendered PDF
      * @memberof PDFView
@@ -52,13 +57,15 @@ class PDFView extends PureComponent {
             shouldRequestPassword: false,
             isPasswordInvalid: false,
         });
+        this.props.onUserInputRequired(false);
     }
 
     /**
      * Event handler for password-protected PDFs. The react-pdf/Document
      * component calls this handler to indicate that a PDF requires a
      * password, or to indicate that a previously provided password was
-     * invalid.
+     * invalid. If a password is required then show the PDFPasswordForm
+     * and alert the parent component that we're waiting for user input.
      *
      * The PasswordResponses constants were copied from react-pdf because
      * they're not exported in entry.webpack.
@@ -76,8 +83,10 @@ class PDFView extends PureComponent {
 
         if (reason === PasswordResponses.NEED_PASSWORD) {
             this.setState({shouldRequestPassword: true});
+            this.props.onUserInputRequired(true);
         } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
             this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
+            this.props.onUserInputRequired(true);
         } else {
             Log.warn('[PDFView] pdf password requested for unknown reason: ', reason);
         }

From e756d42e14d0ef203a5c02e5fa743c4eb79b8980 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 23 May 2022 07:27:20 -1000
Subject: [PATCH 011/101] feat: pdf password form - updated text and changed
 confirm button to gray

---
 src/components/PDFView/PDFPasswordForm.js | 1 -
 src/languages/en.js                       | 2 +-
 src/languages/es.js                       | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 8102ad6c1177..7189d1c50330 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -64,7 +64,6 @@ class PDFPasswordForm extends PureComponent {
                 )}
 
                 <Button
-                    success
                     textStyles={[styles.buttonConfirmText]}
                     text={this.props.translate('common.confirm')}
                     onPress={this.onSubmit}
diff --git a/src/languages/en.js b/src/languages/en.js
index 328b19ad5aae..24f6ce7f3b4d 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -570,7 +570,7 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',
-        pdfPasswordRequired: 'This PDF is password protected. Please enter the password to continue.',
+        pdfPasswordRequired: 'This PDF is password protected. Please enter the password to view it.',
         incorrectPDFPassword: 'Incorrect password. Please try again.',
     },
     pronouns: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 484ecb0033ec..6d25a7d102e8 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -570,7 +570,7 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
-        pdfPasswordRequired: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para continuar.',
+        pdfPasswordRequired: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
         incorrectPDFPassword: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
     },
     pronouns: {

From 05f99a2618b6c9c7e5da577b3dbd2d96a0370266 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 23 May 2022 09:00:36 -1000
Subject: [PATCH 012/101] feat: pdf password form - updated handler names to
 better conform to coding standards

---
 src/components/PDFView/PDFPasswordForm.js | 13 +++----
 src/components/PDFView/index.js           | 26 +++++++-------
 src/components/PDFView/index.native.js    | 41 ++++++++++++-----------
 3 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 7189d1c50330..8b713e8d1854 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -9,7 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 
 const propTypes = {
-    /** If the submitted password is invalid */
+    /** If the submitted password is invalid (show an error message) */
     isPasswordInvalid: PropTypes.bool,
 
     ...withLocalizePropTypes,
@@ -25,13 +25,10 @@ class PDFPasswordForm extends PureComponent {
         this.state = {
             password: null,
         };
+        this.submitPassword = this.submitPassword.bind(this);
     }
 
-    /**
-     * When the form is submitted, call the props.onSubmit() if the password
-     * input field contains text.
-     */
-    onSubmit = () => {
+    submitPassword() {
         if (!this.state.password) {
             return;
         }
@@ -52,7 +49,7 @@ class PDFPasswordForm extends PureComponent {
                     textContentType="password"
                     onChangeText={password => this.setState({password})}
                     returnKeyType="done"
-                    onSubmitEditing={this.onSubmit}
+                    onSubmitEditing={this.submitPassword}
                     secureTextEntry
                     autoFocus
                 />
@@ -66,7 +63,7 @@ class PDFPasswordForm extends PureComponent {
                 <Button
                     textStyles={[styles.buttonConfirmText]}
                     text={this.props.translate('common.confirm')}
-                    onPress={this.onSubmit}
+                    onPress={this.submitPassword}
                     style={styles.mt4}
                     isDisabled={!this.state.password}
                     isFocused
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 1e6d5f8692e6..64ababfdc30a 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -39,8 +39,8 @@ class PDFView extends PureComponent {
             isPasswordInvalid: false,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
-        this.onPassword = this.onPassword.bind(this);
-        this.onPasswordFormSubmit = this.onPasswordFormSubmit.bind(this);
+        this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
+        this.openPdfWithPassword = this.openPdfWithPassword.bind(this);
     }
 
     /**
@@ -61,19 +61,18 @@ class PDFView extends PureComponent {
     }
 
     /**
-     * Event handler for password-protected PDFs. The react-pdf/Document
+     * Initiate password challenge process. The react-pdf/Document
      * component calls this handler to indicate that a PDF requires a
      * password, or to indicate that a previously provided password was
-     * invalid. If a password is required then show the PDFPasswordForm
-     * and alert the parent component that we're waiting for user input.
+     * invalid.
      *
-     * The PasswordResponses constants were copied from react-pdf because
-     * they're not exported in entry.webpack.
+     * The PasswordResponses constants below were copied from react-pdf
+     * because they're not exported in entry.webpack.
      *
      * @param {*} callback Callback used to send password to react-pdf
      * @param {Number} reason Reason code for password request
      */
-    onPassword(callback, reason) {
+    initiatePasswordChallenge(callback, reason) {
         this.onPasswordCallback = callback;
 
         const PasswordResponses = {
@@ -93,13 +92,12 @@ class PDFView extends PureComponent {
     }
 
     /**
-     * Event handler for PDFPasswordForm submission. When a password
-     * is received from the password form the handler calls the password
-     * callback previously received from react-pdf.
+     * Send submitted password to react-pdf via its callback so it can attempt to
+     * open the password-protected PDf.
      *
      * @param {String} password The password entered in the form
      */
-    onPasswordFormSubmit(password) {
+    openPdfWithPassword(password) {
         this.onPasswordCallback(password);
     }
 
@@ -112,7 +110,7 @@ class PDFView extends PureComponent {
     renderPasswordForm() {
         return (
             <PDFPasswordForm
-                onSubmit={this.onPasswordFormSubmit}
+                onSubmit={this.openPdfWithPassword}
                 isPasswordInvalid={this.state.isPasswordInvalid}
             />
         );
@@ -151,7 +149,7 @@ class PDFView extends PureComponent {
                         }}
                         externalLinkTarget="_blank"
                         onLoadSuccess={this.onDocumentLoadSuccess}
-                        onPassword={this.onPassword}
+                        onPassword={this.initiatePasswordChallenge}
                     >
                         {
                             Array.from(
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 8de02dae2507..4abb70297d7a 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -48,29 +48,30 @@ class PDFView extends PureComponent {
             shouldAttemptPdfLoad: true,
             isPdfLoaded: false,
         };
-        this.onError = this.onError.bind(this);
-        this.onPasswordFormSubmit = this.onPasswordFormSubmit.bind(this);
-        this.onLoadComplete = this.onLoadComplete.bind(this);
+        this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
+        this.attemptPdfLoadWithPassword = this.attemptPdfLoadWithPassword.bind(this);
+        this.terminatePasswordChallenge = this.terminatePasswordChallenge.bind(this);
     }
 
     /**
-     * The react-native-pdf/PDF calls this handler when a password is required,
-     * or if the specified password is invalid.
+     * Initiate password challenge if message received from react-native-pdf/PDF
+     * indicates that a password is required is invalid.
      *
-     * The message is "Password required or incorrect password." Note that the message
-     * doesn't specify whether the password is simply empty or rather invalid.
+     * For a password challenge the message is "Password required or incorrect password."
+     * Note that the message doesn't specify whether the password is simply empty or
+     * rather invalid.
      *
-     * @param {Object} error
+     * @param {String} message
      */
-    onError(error) {
-        if (!error.message.match(/password/i)) {
+    initiatePasswordChallenge({message}) {
+        if (!message.match(/password/i)) {
             return;
         }
 
         // Render password form, and don't render PDF.
         this.setState({shouldRequestPassword: true, shouldAttemptPdfLoad: false});
 
-        // The error message provided by react-native-pdf doesn't indicate whether this
+        // The message provided by react-native-pdf doesn't indicate whether this
         // is an initial password request or if the password is invalid. So we just assume
         // that if a password was already entered then it's an invalid password error.
         if (this.state.password) {
@@ -84,17 +85,17 @@ class PDFView extends PureComponent {
      *
      * @param {String} password Password submitted via PDFPasswordForm
      */
-    onPasswordFormSubmit(password) {
+    attemptPdfLoadWithPassword(password) {
         // Render PDF in invisible state. It's invisible because at this
         // stage of the password challenge process isPdfLoaded is false.
         this.setState({password, shouldAttemptPdfLoad: true});
     }
 
     /**
-     * When the PDF is loaded, hide PDFPasswordForm and make PDF component
-     * visible.
+     * When the PDF is successfully loaded, terminate password challenge by hiding
+     * PDFPasswordForm and making the PDF component visible.
      */
-    onLoadComplete() {
+    terminatePasswordChallenge() {
         // Don't render PDFPasswordForm, and do render PDF in visible state.
         this.setState({shouldRequestPassword: false, isPdfLoaded: true});
     }
@@ -105,9 +106,9 @@ class PDFView extends PureComponent {
             StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
         ];
 
-        // If we haven't yet successfully loaded the PDF then we need to hide the
+        // If we haven't yet successfully loaded the PDF, then we need to hide the
         // react-native-pdf/PDF component so that PDFPasswordForm is positioned
-        // nicely. We're just hiding it because we still need to render the PDF so
+        // nicely. We're specifically hiding it because we still need to render the PDF so
         // that it can validate the password.
         if (!this.state.isPdfLoaded) {
             pdfStyles.push(styles.invisible);
@@ -123,15 +124,15 @@ class PDFView extends PureComponent {
                             activityIndicator={<FullScreenLoadingIndicator />}
                             source={{uri: this.props.sourceURL}}
                             style={pdfStyles}
-                            onError={error => this.onError(error)}
+                            onError={this.initiatePasswordChallenge}
                             password={this.state.password}
-                            onLoadComplete={this.onLoadComplete}
+                            onLoadComplete={this.terminatePasswordChallenge}
                         />
                     )}
 
                     {this.state.shouldRequestPassword && (
                         <PDFPasswordForm
-                            onSubmit={this.onPasswordFormSubmit}
+                            onSubmit={this.attemptPdfLoadWithPassword}
                             isPasswordInvalid={this.state.isPasswordInvalid}
                         />
                     )}

From 59051241b7d693535cab32f69e558cc7341d3e64 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 23 May 2022 09:35:54 -1000
Subject: [PATCH 013/101] feat: pdf password form - removed unnecessary memo
 use in password form

---
 src/components/PDFView/PDFPasswordForm.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 8b713e8d1854..1f4c672c9268 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -1,4 +1,4 @@
-import React, {PureComponent, memo} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Button from '../Button';
@@ -6,7 +6,6 @@ import Text from '../Text';
 import TextInput from '../TextInput';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import compose from '../../libs/compose';
 
 const propTypes = {
     /** If the submitted password is invalid (show an error message) */
@@ -78,7 +77,4 @@ PDFPasswordForm.propTypes = propTypes;
 PDFPasswordForm.defaultProps = defaultProps;
 PDFPasswordForm.displayName = 'PDFPasswordForm';
 
-export default compose(
-    memo,
-    withLocalize,
-)(PDFPasswordForm);
+export default withLocalize(PDFPasswordForm);

From 9d83ce13b735b914be050716b2b182f1ecb611c6 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 24 May 2022 12:57:32 -1000
Subject: [PATCH 014/101] feat: pdf password form - a few small changes
 requested in pull request

---
 src/CONST.js                              |  5 ++
 src/components/PDFView/PDFPasswordForm.js |  5 +-
 src/components/PDFView/index.js           | 71 +++++++----------------
 src/components/PDFView/index.native.js    |  5 +-
 4 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index c0e26e78fca7..d8957b2d16ca 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -696,6 +696,11 @@ const CONST = {
 
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
+
+    REACT_PDF_PASSWORD_RESPONSES: {
+        NEED_PASSWORD: 1,
+        INCORRECT_PASSWORD: 2,
+    },
 };
 
 export default CONST;
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 1f4c672c9268..09ea3b3f928a 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Button from '../Button';
@@ -18,7 +18,7 @@ const defaultProps = {
     isPasswordInvalid: false,
 };
 
-class PDFPasswordForm extends PureComponent {
+class PDFPasswordForm extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -75,6 +75,5 @@ class PDFPasswordForm extends PureComponent {
 
 PDFPasswordForm.propTypes = propTypes;
 PDFPasswordForm.defaultProps = defaultProps;
-PDFPasswordForm.displayName = 'PDFPasswordForm';
 
 export default withLocalize(PDFPasswordForm);
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 64ababfdc30a..d3e5675bc826 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react';
+import _ from 'underscore';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View, Dimensions} from 'react-native';
 import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
@@ -8,6 +9,7 @@ import variables from '../../styles/variables';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
 import Log from '../../libs/Log';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** URL to full-sized image */
@@ -29,7 +31,7 @@ const defaultProps = {
     onUserInputRequired: () => {},
 };
 
-class PDFView extends PureComponent {
+class PDFView extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -40,7 +42,6 @@ class PDFView extends PureComponent {
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
-        this.openPdfWithPassword = this.openPdfWithPassword.bind(this);
     }
 
     /**
@@ -66,7 +67,7 @@ class PDFView extends PureComponent {
      * password, or to indicate that a previously provided password was
      * invalid.
      *
-     * The PasswordResponses constants below were copied from react-pdf
+     * The PasswordResponses constants used below were copied from react-pdf
      * because they're not exported in entry.webpack.
      *
      * @param {*} callback Callback used to send password to react-pdf
@@ -75,15 +76,10 @@ class PDFView extends PureComponent {
     initiatePasswordChallenge(callback, reason) {
         this.onPasswordCallback = callback;
 
-        const PasswordResponses = {
-            NEED_PASSWORD: 1,
-            INCORRECT_PASSWORD: 2,
-        };
-
-        if (reason === PasswordResponses.NEED_PASSWORD) {
+        if (reason === CONST.REACT_PDF_PASSWORD_RESPONSES.NEED_PASSWORD) {
             this.setState({shouldRequestPassword: true});
             this.props.onUserInputRequired(true);
-        } else if (reason === PasswordResponses.INCORRECT_PASSWORD) {
+        } else if (reason === CONST.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
             this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
             this.props.onUserInputRequired(true);
         } else {
@@ -91,31 +87,6 @@ class PDFView extends PureComponent {
         }
     }
 
-    /**
-     * Send submitted password to react-pdf via its callback so it can attempt to
-     * open the password-protected PDf.
-     *
-     * @param {String} password The password entered in the form
-     */
-    openPdfWithPassword(password) {
-        this.onPasswordCallback(password);
-    }
-
-    /**
-     * Generate markup for PDFPasswordForm. This form is only displayed if a
-     * password is required to open a PDF.
-     *
-     * @returns {Object} JSX markup for PDFPasswordForm
-     */
-    renderPasswordForm() {
-        return (
-            <PDFPasswordForm
-                onSubmit={this.openPdfWithPassword}
-                isPasswordInvalid={this.state.isPasswordInvalid}
-            />
-        );
-    }
-
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
@@ -151,22 +122,23 @@ class PDFView extends PureComponent {
                         onLoadSuccess={this.onDocumentLoadSuccess}
                         onPassword={this.initiatePasswordChallenge}
                     >
-                        {
-                            Array.from(
-                                new Array(this.state.numPages),
-                                (el, index) => (
-                                    <Page
-                                        width={pageWidth}
-                                        key={`page_${index + 1}`}
-                                        pageNumber={index + 1}
-                                    />
-                                ),
-                            )
-                        }
+                        {_.map(_.range(this.state.numPages), (v, index) => (
+                            <Page
+                                width={pageWidth}
+                                key={`page_${index + 1}`}
+                                pageNumber={index + 1}
+                            />
+                        ))}
+
                     </Document>
                 </View>
 
-                {this.state.shouldRequestPassword && this.renderPasswordForm()}
+                {this.state.shouldRequestPassword && (
+                    <PDFPasswordForm
+                        onSubmit={password => this.onPasswordCallback(password)}
+                        isPasswordInvalid={this.state.isPasswordInvalid}
+                    />
+                )}
 
             </View>
         );
@@ -175,6 +147,5 @@ class PDFView extends PureComponent {
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;
-PDFView.displayName = 'PDFView';
 
 export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 4abb70297d7a..d7a705796ba8 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
@@ -38,7 +38,7 @@ const defaultProps = {
  * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
  * is (temporarily) rendered.
  */
-class PDFView extends PureComponent {
+class PDFView extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -145,6 +145,5 @@ class PDFView extends PureComponent {
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;
-PDFView.displayName = 'PDFView';
 
 export default withWindowDimensions(PDFView);

From 1e1de8f48c51557045b00cd4206f5dd515eedb55 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 24 May 2022 18:37:47 -1000
Subject: [PATCH 015/101] feat: pdf password form - unified propTypes in
 separate file

---
 src/components/PDFView/index.js            | 24 ++-------------------
 src/components/PDFView/index.native.js     | 20 ++---------------
 src/components/PDFView/pdfViewPropTypes.js | 25 ++++++++++++++++++++++
 3 files changed, 29 insertions(+), 40 deletions(-)
 create mode 100644 src/components/PDFView/pdfViewPropTypes.js

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index d3e5675bc826..88529975a4f8 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -1,35 +1,15 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {View, Dimensions} from 'react-native';
 import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
 import styles from '../../styles/styles';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withWindowDimensions from '../withWindowDimensions';
 import variables from '../../styles/variables';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
 import Log from '../../libs/Log';
 import CONST from '../../CONST';
-
-const propTypes = {
-    /** URL to full-sized image */
-    sourceURL: PropTypes.string,
-
-    ...windowDimensionsPropTypes,
-
-    /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
-
-    /** Notify parent that we're requesting input from user */
-    onUserInputRequired: PropTypes.func,
-};
-
-const defaultProps = {
-    sourceURL: '',
-    style: {},
-    onUserInputRequired: () => {},
-};
+import {propTypes, defaultProps} from './pdfViewPropTypes';
 
 class PDFView extends Component {
     constructor(props) {
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index d7a705796ba8..f2e48da7ee55 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,28 +1,12 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withWindowDimensions from '../withWindowDimensions';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
-
-const propTypes = {
-    /** URL to full-sized image */
-    sourceURL: PropTypes.string,
-
-    /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
-
-    ...windowDimensionsPropTypes,
-};
-
-const defaultProps = {
-    sourceURL: '',
-    style: {},
-};
+import {propTypes, defaultProps} from './pdfViewPropTypes';
 
 /**
  * On the native layer, we use a pdf library to display PDFs. If a PDF is
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
new file mode 100644
index 000000000000..83937e29918c
--- /dev/null
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
+
+const propTypes = {
+
+    /** URL to full-sized image */
+    sourceURL: PropTypes.string,
+
+    /** Any additional styles to apply */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+
+    /** Notify parent that we're requesting input from user */
+    onUserInputRequired: PropTypes.func,
+
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    sourceURL: '',
+    style: {},
+    onUserInputRequired: () => {},
+};
+
+export {propTypes, defaultProps};

From 715f983d3fb52139076f28d13b79632e22baf54d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 27 May 2022 15:24:24 -1000
Subject: [PATCH 016/101] feat: pdf password form - changed press-on-enter
 handling

---
 src/components/AttachmentModal.js | 11 ++++++++---
 src/components/Button.js          |  5 ++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index e9a41721d32e..301e9e660244 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -111,14 +111,19 @@ class AttachmentModal extends PureComponent {
 
     /**
      * Execute the onConfirm callback and close the modal.
+     *
+     * @param {Event} event Either a click event, keyboard event or undefined
      */
-    submitAndClose() {
+    submitAndClose(event) {
         // If the modal has already been closed, don't allow another submission
         if (!this.state.isModalOpen) {
             return;
         }
-
         if (this.props.onConfirm) {
+            // Ignore if submit was initiated by enter key and send-on-enter is disabled
+            if (!this.state.isSendOnEnterEnabled && !!event && event instanceof KeyboardEvent) {
+                return;
+            }
             this.props.onConfirm(_.extend(this.state.file, {source: this.state.sourceURL}));
         }
 
@@ -199,7 +204,7 @@ class AttachmentModal extends PureComponent {
                             textStyles={[styles.buttonConfirmText]}
                             text={this.props.translate('common.send')}
                             onPress={this.submitAndClose}
-                            pressOnEnter={this.state.isSendOnEnterEnabled}
+                            pressOnEnter
                         />
                     )}
                 </Modal>
diff --git a/src/components/Button.js b/src/components/Button.js
index 83fc4835f10d..2734e111810f 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -152,11 +152,10 @@ class Button extends Component {
 
         // Setup and attach keypress handler for pressing the button with Enter key
         this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
-            if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading
-                || (e && e.target.nodeName === 'TEXTAREA') || !this.props.pressOnEnter) {
+            if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
                 return;
             }
-            this.props.onPress();
+            this.props.onPress(e);
         }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority, false);
     }
 

From f21dfd58c61eebe1ece2e021a47c2c8f47f2a1cc Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 27 May 2022 15:48:08 -1000
Subject: [PATCH 017/101] feat: pdf password form - removed some blank lines
 from markup

---
 src/components/PDFView/PDFPasswordForm.js | 5 -----
 src/components/PDFView/index.js           | 3 ---
 src/components/PDFView/index.native.js    | 4 ----
 3 files changed, 12 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 09ea3b3f928a..d97a1dd109bd 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -37,11 +37,9 @@ class PDFPasswordForm extends Component {
     render() {
         return (
             <View style={styles.pdfPasswordForm}>
-
                 <Text style={[styles.mb4, styles.col]}>
                     {this.props.translate('attachmentView.pdfPasswordRequired')}
                 </Text>
-
                 <TextInput
                     label={this.props.translate('common.password')}
                     autoCompleteType="password"
@@ -52,13 +50,11 @@ class PDFPasswordForm extends Component {
                     secureTextEntry
                     autoFocus
                 />
-
                 {this.props.isPasswordInvalid && (
                     <Text style={[styles.formError]}>
                         {this.props.translate('attachmentView.incorrectPDFPassword')}
                     </Text>
                 )}
-
                 <Button
                     textStyles={[styles.buttonConfirmText]}
                     text={this.props.translate('common.confirm')}
@@ -67,7 +63,6 @@ class PDFPasswordForm extends Component {
                     isDisabled={!this.state.password}
                     isFocused
                 />
-
             </View>
         );
     }
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 88529975a4f8..1c4b235d63ff 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -85,7 +85,6 @@ class PDFView extends Component {
         }
 
         return (
-
             <View
                 style={containerStyle}
                 onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
@@ -112,14 +111,12 @@ class PDFView extends Component {
 
                     </Document>
                 </View>
-
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
                         onSubmit={password => this.onPasswordCallback(password)}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                     />
                 )}
-
             </View>
         );
     }
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index f2e48da7ee55..9c5d56b5dceb 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -100,9 +100,7 @@ class PDFView extends Component {
 
         return (
             <TouchableWithoutFeedback style={[styles.flex1, this.props.style]}>
-
                 <View>
-
                     {this.state.shouldAttemptPdfLoad && (
                         <PDF
                             activityIndicator={<FullScreenLoadingIndicator />}
@@ -113,14 +111,12 @@ class PDFView extends Component {
                             onLoadComplete={this.terminatePasswordChallenge}
                         />
                     )}
-
                     {this.state.shouldRequestPassword && (
                         <PDFPasswordForm
                             onSubmit={this.attemptPdfLoadWithPassword}
                             isPasswordInvalid={this.state.isPasswordInvalid}
                         />
                     )}
-
                 </View>
             </TouchableWithoutFeedback>
         );

From b88f0de3acea0cf2d2e66c5880db98ccc0d66d03 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 30 May 2022 07:08:34 -1000
Subject: [PATCH 018/101] feat: pdf password form - press-on-enter entirely
 handled in the attachment modal

---
 src/components/AttachmentModal.js | 4 ++--
 src/components/Button.js          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 301e9e660244..9d227dda5f60 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -120,8 +120,8 @@ class AttachmentModal extends PureComponent {
             return;
         }
         if (this.props.onConfirm) {
-            // Ignore if submit was initiated by enter key and send-on-enter is disabled
-            if (!this.state.isSendOnEnterEnabled && !!event && event instanceof KeyboardEvent) {
+            // Ignore the submit/close if it was initiated by enter key and send-on-enter is disabled
+            if (!this.state.isSendOnEnterEnabled && (!event || event instanceof KeyboardEvent)) {
                 return;
             }
             this.props.onConfirm(_.extend(this.state.file, {source: this.state.sourceURL}));
diff --git a/src/components/Button.js b/src/components/Button.js
index 2734e111810f..85254d4c1e75 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -155,7 +155,7 @@ class Button extends Component {
             if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
                 return;
             }
-            this.props.onPress(e);
+            this.props.onPress();
         }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority, false);
     }
 

From 7b605420becc62549682a9d15402a0062f7ef351 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 1 Jun 2022 08:19:53 -1000
Subject: [PATCH 019/101] feat: pdf password form - fixed margins on android

---
 src/components/PDFView/PDFPasswordForm.js | 16 +++++++++++++---
 src/components/PDFView/index.native.js    |  7 ++++++-
 src/styles/styles.js                      |  8 +++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index d97a1dd109bd..e6cf8a0539e1 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -5,13 +5,16 @@ import Button from '../Button';
 import Text from '../Text';
 import TextInput from '../TextInput';
 import styles from '../../styles/styles';
+import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
     /** If the submitted password is invalid (show an error message) */
     isPasswordInvalid: PropTypes.bool,
 
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -35,9 +38,13 @@ class PDFPasswordForm extends Component {
     }
 
     render() {
+        // On non-small screens set a max width on the form.
+        const containerStyles = this.props.isSmallScreenWidth
+            ? {} : styles.pdfPasswordForm.wideScreen;
+
         return (
-            <View style={styles.pdfPasswordForm}>
-                <Text style={[styles.mb4, styles.col]}>
+            <View style={containerStyles}>
+                <Text style={styles.mb4}>
                     {this.props.translate('attachmentView.pdfPasswordRequired')}
                 </Text>
                 <TextInput
@@ -71,4 +78,7 @@ class PDFPasswordForm extends Component {
 PDFPasswordForm.propTypes = propTypes;
 PDFPasswordForm.defaultProps = defaultProps;
 
-export default withLocalize(PDFPasswordForm);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(PDFPasswordForm);
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 9c5d56b5dceb..1b449eee6e0f 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -98,9 +98,14 @@ class PDFView extends Component {
             pdfStyles.push(styles.invisible);
         }
 
+        // For small screens (and Android specifically) force the container view
+        // to take up the full width.
+        const containerStyles = this.props.isSmallScreenWidth
+            ? styles.pdfPasswordForm.narrowScreen : {};
+
         return (
             <TouchableWithoutFeedback style={[styles.flex1, this.props.style]}>
-                <View>
+                <View style={containerStyles}>
                     {this.state.shouldAttemptPdfLoad && (
                         <PDF
                             activityIndicator={<FullScreenLoadingIndicator />}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4cc80fee4f7c..268e519cbb59 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1723,7 +1723,13 @@ const styles = {
     },
 
     pdfPasswordForm: {
-        maxWidth: 350,
+        narrowScreen: {
+            ...sizing.w100,
+            ...spacing.p5,
+        },
+        wideScreen: {
+            maxWidth: 350,
+        },
     },
 
     modalCenterContentContainer: {

From b1cc1b90f1c590794e9a28292f9345638194cf52 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 2 Jun 2022 09:10:45 -1000
Subject: [PATCH 020/101] feat: pdf password form - fixed regression bug caused
 by native styles update

---
 src/components/PDFView/index.native.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 1b449eee6e0f..951c16e91cd1 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -99,8 +99,8 @@ class PDFView extends Component {
         }
 
         // For small screens (and Android specifically) force the container view
-        // to take up the full width.
-        const containerStyles = this.props.isSmallScreenWidth
+        // to take up the full width when displaying the password form.
+        const containerStyles =  this.state.shouldRequestPassword && this.props.isSmallScreenWidth
             ? styles.pdfPasswordForm.narrowScreen : {};
 
         return (

From e27633b222db24083539a64eaccaffeb5bbd884d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 2 Jun 2022 09:13:16 -1000
Subject: [PATCH 021/101] feat: pdf password form - removed autofocus from
 password field, and removed extra space from code

---
 src/components/PDFView/PDFPasswordForm.js | 1 -
 src/components/PDFView/index.native.js    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index e6cf8a0539e1..a405203faee7 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -55,7 +55,6 @@ class PDFPasswordForm extends Component {
                     returnKeyType="done"
                     onSubmitEditing={this.submitPassword}
                     secureTextEntry
-                    autoFocus
                 />
                 {this.props.isPasswordInvalid && (
                     <Text style={[styles.formError]}>
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 951c16e91cd1..0bc72e93a6be 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -100,7 +100,7 @@ class PDFView extends Component {
 
         // For small screens (and Android specifically) force the container view
         // to take up the full width when displaying the password form.
-        const containerStyles =  this.state.shouldRequestPassword && this.props.isSmallScreenWidth
+        const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
             ? styles.pdfPasswordForm.narrowScreen : {};
 
         return (

From beffe6f45339cb1132e65c3c1d7157f81dc474ce Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 3 Jun 2022 12:10:45 -1000
Subject: [PATCH 022/101] feat: pdf password form - some small changes
 requested by reviewer

---
 src/components/PDFView/PDFPasswordForm.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index a405203faee7..60605a706226 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -25,7 +25,7 @@ class PDFPasswordForm extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            password: null,
+            password: '',
         };
         this.submitPassword = this.submitPassword.bind(this);
     }
@@ -66,7 +66,6 @@ class PDFPasswordForm extends Component {
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
                     style={styles.mt4}
-                    isDisabled={!this.state.password}
                     isFocused
                 />
             </View>

From ee386ec7479d45f1468e1effd9249f83e64616ec Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 3 Jun 2022 12:25:57 -1000
Subject: [PATCH 023/101] feat: pdf password form - some small changes
 requested by reviewer

---
 src/components/PDFView/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 1c4b235d63ff..fb0ed5cb93c9 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -7,7 +7,6 @@ import withWindowDimensions from '../withWindowDimensions';
 import variables from '../../styles/variables';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
-import Log from '../../libs/Log';
 import CONST from '../../CONST';
 import {propTypes, defaultProps} from './pdfViewPropTypes';
 
@@ -62,8 +61,6 @@ class PDFView extends Component {
         } else if (reason === CONST.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
             this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
             this.props.onUserInputRequired(true);
-        } else {
-            Log.warn('[PDFView] pdf password requested for unknown reason: ', reason);
         }
     }
 
@@ -113,7 +110,7 @@ class PDFView extends Component {
                 </View>
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
-                        onSubmit={password => this.onPasswordCallback(password)}
+                        onSubmit={this.onPasswordCallback}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                     />
                 )}

From c294559119d276111234668a9aec0c66c5faf8c7 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 7 Jun 2022 14:19:04 -1000
Subject: [PATCH 024/101] feat: pdf password form - fixed password form to be
 disabled by default

---
 src/components/PDFView/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index fb0ed5cb93c9..3aee748c6061 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -16,7 +16,7 @@ class PDFView extends Component {
         this.state = {
             numPages: null,
             windowWidth: Dimensions.get('window').width,
-            shouldRequestPassword: true,
+            shouldRequestPassword: false,
             isPasswordInvalid: false,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);

From 0c580893581bc7ebcd7fc335a6cf96597f94f30c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 7 Jun 2022 14:22:58 -1000
Subject: [PATCH 025/101] feat: pdf password form - removed some blank lines

---
 src/components/AttachmentView.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 909f674534ff..b93b22103f7e 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -49,13 +49,11 @@ const AttachmentView = (props) => {
     if (Str.isPDF(props.sourceURL)
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
         return (
-
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
                 onUserInputRequired={props.onUserInputRequired}
             />
-
         );
     }
 

From 7e078af67f36619d252ede2fc804f670a23ae373 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 7 Jun 2022 14:44:50 -1000
Subject: [PATCH 026/101] feat: pdf password form - added comment for constants
 related to react-pdf

---
 src/CONST.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/CONST.js b/src/CONST.js
index 489902768e3d..c657ac07d2ad 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -702,6 +702,8 @@ const CONST = {
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
 
+    // These react-pdf PasswordResponses constants are duplicated here because
+    // they're not exported in react-pdf/dist/esm/entry.webpack.
     REACT_PDF_PASSWORD_RESPONSES: {
         NEED_PASSWORD: 1,
         INCORRECT_PASSWORD: 2,

From c3752e88b2c75743db8c7206b4736fd83a2d58b8 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 09:06:14 -1000
Subject: [PATCH 027/101] feat: pdf password form - fixed scrollbar to display
 at edge of container

---
 src/components/PDFView/index.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 3aee748c6061..57be2085da4e 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -70,23 +70,23 @@ class PDFView extends Component {
             ? pdfContainerWidth : variables.pdfPageMaxWidth;
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
 
-        const pdfStyle = [styles.PDFView];
-        const containerStyle = [styles.PDFView, this.props.style];
+        const outerContainerStyle = [styles.PDFView, this.props.style];
+        const innerContainerStyle = [styles.w100, styles.h100];
 
         // If we're requesting a password then we need to set the background to
         // defaultModalContainer color (white) and hide - but still render -
         // the PDF component.
         if (this.state.shouldRequestPassword) {
-            pdfStyle.push(styles.invisible);
-            containerStyle.push(styles.defaultModalContainer);
+            innerContainerStyle.push(styles.invisible);
+            outerContainerStyle.push(styles.defaultModalContainer);
         }
 
         return (
             <View
-                style={containerStyle}
+                style={outerContainerStyle}
                 onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
             >
-                <View style={pdfStyle}>
+                <View style={innerContainerStyle}>
                     <Document
                         loading={<FullScreenLoadingIndicator />}
                         file={this.props.sourceURL}
@@ -105,7 +105,6 @@ class PDFView extends Component {
                                 pageNumber={index + 1}
                             />
                         ))}
-
                     </Document>
                 </View>
                 {this.state.shouldRequestPassword && (

From 892b1e93cc40b6c86733a1303a65b9028b2aaf2e Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 09:10:01 -1000
Subject: [PATCH 028/101] feat: pdf password form - simplified comment for
 constant

---
 src/CONST.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index c657ac07d2ad..a6cb6e3e0c1c 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -702,8 +702,7 @@ const CONST = {
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
 
-    // These react-pdf PasswordResponses constants are duplicated here because
-    // they're not exported in react-pdf/dist/esm/entry.webpack.
+    // Constants for password-related error responses received from react-pdf.
     REACT_PDF_PASSWORD_RESPONSES: {
         NEED_PASSWORD: 1,
         INCORRECT_PASSWORD: 2,

From 46a772096cb5fe900088975a6fe5874667b2cce3 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 09:24:23 -1000
Subject: [PATCH 029/101] feat: pdf password form - disabled autocomplete on
 password field and removed focused property from confirm button

---
 src/components/PDFView/PDFPasswordForm.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 60605a706226..55459c348643 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -49,7 +49,7 @@ class PDFPasswordForm extends Component {
                 </Text>
                 <TextInput
                     label={this.props.translate('common.password')}
-                    autoCompleteType="password"
+                    autoCompleteType="off"
                     textContentType="password"
                     onChangeText={password => this.setState({password})}
                     returnKeyType="done"
@@ -66,7 +66,6 @@ class PDFPasswordForm extends Component {
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
                     style={styles.mt4}
-                    isFocused
                 />
             </View>
         );

From fddc8730b0c36dc493e98f337fcb0a4350ae3344 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 11:13:55 -1000
Subject: [PATCH 030/101] feat: pdf password form - fixed password form margins
 on mobile web

---
 src/components/PDFView/PDFPasswordForm.js | 5 +++--
 src/components/PDFView/index.native.js    | 2 +-
 src/styles/styles.js                      | 6 ++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 55459c348643..2ede0d68dbfc 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -38,9 +38,10 @@ class PDFPasswordForm extends Component {
     }
 
     render() {
-        // On non-small screens set a max width on the form.
+        // Use container styles appropriate for screen size.
         const containerStyles = this.props.isSmallScreenWidth
-            ? {} : styles.pdfPasswordForm.wideScreen;
+            ? styles.pdfPasswordForm.narrowScreen
+            : styles.pdfPasswordForm.wideScreen;
 
         return (
             <View style={containerStyles}>
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 0bc72e93a6be..c16d5ed9b04d 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -101,7 +101,7 @@ class PDFView extends Component {
         // For small screens (and Android specifically) force the container view
         // to take up the full width when displaying the password form.
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
-            ? styles.pdfPasswordForm.narrowScreen : {};
+            ? styles.pdfPasswordForm.nativeNarrowContainer : {};
 
         return (
             <TouchableWithoutFeedback style={[styles.flex1, this.props.style]}>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 217297d3f93f..b7ea34704f08 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1724,13 +1724,15 @@ const styles = {
     },
 
     pdfPasswordForm: {
-        narrowScreen: {
+        nativeNarrowContainer: {
             ...sizing.w100,
-            ...spacing.p5,
         },
         wideScreen: {
             maxWidth: 350,
         },
+        narrowScreen: {
+            ...spacing.m5,
+        },
     },
 
     modalCenterContentContainer: {

From 962ee39d9d023a81e2654b00a74f842dd208fa21 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 12:58:11 -1000
Subject: [PATCH 031/101] feat: pdf password form - some cleanup/refactoring in
 native code

---
 src/components/PDFView/index.native.js | 40 +++++++++++++-------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index c16d5ed9b04d..03f614cc6a93 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -9,15 +9,15 @@ import PDFPasswordForm from './PDFPasswordForm';
 import {propTypes, defaultProps} from './pdfViewPropTypes';
 
 /**
- * On the native layer, we use a pdf library to display PDFs. If a PDF is
+ * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is
  * password-protected we render a PDFPasswordForm to request a password
  * from the user.
  *
  * In order to render things nicely during a password challenge we need
- * to keep track of a bunch of additional state. In particular, the
+ * to keep track of additional state. In particular, the
  * react-native-pdf/PDF component is both conditionally rendered and hidden
  * depending upon the situation. It needs to be rerendered on each password
- * submission because it doesn't dynamically handle updates to it's
+ * submission because it doesn't dynamically handle updates to its
  * password property. And we need to hide it during password challenges
  * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
  * is (temporarily) rendered.
@@ -27,10 +27,9 @@ class PDFView extends Component {
         super(props);
         this.state = {
             shouldRequestPassword: false,
+            shouldAttemptPdfLoad: true,
             isPasswordInvalid: false,
             password: '',
-            shouldAttemptPdfLoad: true,
-            isPdfLoaded: false,
         };
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoadWithPassword = this.attemptPdfLoadWithPassword.bind(this);
@@ -39,11 +38,11 @@ class PDFView extends Component {
 
     /**
      * Initiate password challenge if message received from react-native-pdf/PDF
-     * indicates that a password is required is invalid.
+     * indicates that a password is required or invalid.
      *
      * For a password challenge the message is "Password required or incorrect password."
      * Note that the message doesn't specify whether the password is simply empty or
-     * rather invalid.
+     * invalid.
      *
      * @param {String} message
      */
@@ -70,18 +69,19 @@ class PDFView extends Component {
      * @param {String} password Password submitted via PDFPasswordForm
      */
     attemptPdfLoadWithPassword(password) {
-        // Render PDF in invisible state. It's invisible because at this
-        // stage of the password challenge process isPdfLoaded is false.
+        // Render react-native-pdf/PDF so that it can validate the password.
+        // Note that at this point in the password challenge, shouldRequestPassword is true.
+        // Thus react-native-pdf/PDF will be rendered - but not visible.
         this.setState({password, shouldAttemptPdfLoad: true});
     }
 
     /**
-     * When the PDF is successfully loaded, terminate password challenge by hiding
-     * PDFPasswordForm and making the PDF component visible.
+     * When the PDF is loaded after a successful password challenge,
+     * hide PDFPasswordForm - and thus also make the react-native-pdf/PDF visible.
      */
     terminatePasswordChallenge() {
-        // Don't render PDFPasswordForm, and do render PDF in visible state.
-        this.setState({shouldRequestPassword: false, isPdfLoaded: true});
+        // Don't render PDFPasswordForm, and thus also render the PDF in visible state.
+        this.setState({shouldRequestPassword: false});
     }
 
     render() {
@@ -90,16 +90,16 @@ class PDFView extends Component {
             StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
         ];
 
-        // If we haven't yet successfully loaded the PDF, then we need to hide the
-        // react-native-pdf/PDF component so that PDFPasswordForm is positioned
-        // nicely. We're specifically hiding it because we still need to render the PDF so
-        // that it can validate the password.
-        if (!this.state.isPdfLoaded) {
+        // If we haven't yet successfully validated the password and loaded the PDF,
+        // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
+        // is positioned nicely. We're specifically hiding it because we still need to render
+        // the PDF so that it can validate the password.
+        if (this.state.shouldRequestPassword && this.state.shouldAttemptPdfLoad) {
             pdfStyles.push(styles.invisible);
         }
 
-        // For small screens (and Android specifically) force the container view
-        // to take up the full width when displaying the password form.
+        // For small screens force the container view to take up the full width when
+        // displaying the password form.
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
             ? styles.pdfPasswordForm.nativeNarrowContainer : {};
 

From 474df475d778064726fdb8ffaa3694acb68a9b37 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 8 Jun 2022 13:50:21 -1000
Subject: [PATCH 032/101] feat: pdf password form - fixed broken pdf scrolling
 on android

---
 src/components/PDFView/index.native.js | 31 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 03f614cc6a93..c9cb7245771e 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -89,12 +89,17 @@ class PDFView extends Component {
             styles.imageModalPDF,
             StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
         ];
+        const touchableStyles = [
+            styles.flex1,
+            this.props.style,
+        ];
 
         // If we haven't yet successfully validated the password and loaded the PDF,
         // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
         // is positioned nicely. We're specifically hiding it because we still need to render
         // the PDF so that it can validate the password.
-        if (this.state.shouldRequestPassword && this.state.shouldAttemptPdfLoad) {
+        if (this.state.shouldRequestPassword) {
+            // touchableStyles.push(styles.invisible);
             pdfStyles.push(styles.invisible);
         }
 
@@ -104,9 +109,9 @@ class PDFView extends Component {
             ? styles.pdfPasswordForm.nativeNarrowContainer : {};
 
         return (
-            <TouchableWithoutFeedback style={[styles.flex1, this.props.style]}>
-                <View style={containerStyles}>
-                    {this.state.shouldAttemptPdfLoad && (
+            <View style={containerStyles}>
+                {this.state.shouldAttemptPdfLoad && (
+                    <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
                             activityIndicator={<FullScreenLoadingIndicator />}
                             source={{uri: this.props.sourceURL}}
@@ -115,15 +120,15 @@ class PDFView extends Component {
                             password={this.state.password}
                             onLoadComplete={this.terminatePasswordChallenge}
                         />
-                    )}
-                    {this.state.shouldRequestPassword && (
-                        <PDFPasswordForm
-                            onSubmit={this.attemptPdfLoadWithPassword}
-                            isPasswordInvalid={this.state.isPasswordInvalid}
-                        />
-                    )}
-                </View>
-            </TouchableWithoutFeedback>
+                    </TouchableWithoutFeedback>
+                )}
+                {this.state.shouldRequestPassword && (
+                    <PDFPasswordForm
+                        onSubmit={this.attemptPdfLoadWithPassword}
+                        isPasswordInvalid={this.state.isPasswordInvalid}
+                    />
+                )}
+            </View>
         );
     }
 }

From 99d79b313a121224f44dfe2745ea6641225e219c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 9 Jun 2022 12:41:34 -1000
Subject: [PATCH 033/101] feat: pdf password form - added loading indicator for
 mobile

---
 src/components/PDFView/index.native.js | 36 +++++++++++++++++---------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index c9cb7245771e..16c2648f748b 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -28,12 +28,13 @@ class PDFView extends Component {
         this.state = {
             shouldRequestPassword: false,
             shouldAttemptPdfLoad: true,
+            shouldShowLoadingIndicator: true,
             isPasswordInvalid: false,
             password: '',
         };
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoadWithPassword = this.attemptPdfLoadWithPassword.bind(this);
-        this.terminatePasswordChallenge = this.terminatePasswordChallenge.bind(this);
+        this.finishPdfLoad = this.finishPdfLoad.bind(this);
     }
 
     /**
@@ -51,8 +52,12 @@ class PDFView extends Component {
             return;
         }
 
-        // Render password form, and don't render PDF.
-        this.setState({shouldRequestPassword: true, shouldAttemptPdfLoad: false});
+        // Render password form, and don't render PDF and loading indicator.
+        this.setState({
+            shouldRequestPassword: true,
+            shouldAttemptPdfLoad: false,
+            shouldShowLoadingIndicator: false,
+        });
 
         // The message provided by react-native-pdf doesn't indicate whether this
         // is an initial password request or if the password is invalid. So we just assume
@@ -64,7 +69,8 @@ class PDFView extends Component {
 
     /**
      * When the password is submitted via PDFPasswordForm, save the password
-     * in state and attempt to load the PDF.
+     * in state and attempt to load the PDF. Also show the loading indicator
+     * since react-native-pdf/PDF will need to reload the PDF.
      *
      * @param {String} password Password submitted via PDFPasswordForm
      */
@@ -72,16 +78,22 @@ class PDFView extends Component {
         // Render react-native-pdf/PDF so that it can validate the password.
         // Note that at this point in the password challenge, shouldRequestPassword is true.
         // Thus react-native-pdf/PDF will be rendered - but not visible.
-        this.setState({password, shouldAttemptPdfLoad: true});
+        this.setState({
+            password,
+            shouldAttemptPdfLoad: true,
+            shouldShowLoadingIndicator: true,
+        });
     }
 
     /**
-     * When the PDF is loaded after a successful password challenge,
-     * hide PDFPasswordForm - and thus also make the react-native-pdf/PDF visible.
+     * After the PDF is successfully loaded hide PDFPasswordForm and the loading
+     * indicator.
      */
-    terminatePasswordChallenge() {
-        // Don't render PDFPasswordForm, and thus also render the PDF in visible state.
-        this.setState({shouldRequestPassword: false});
+    finishPdfLoad() {
+        this.setState({
+            shouldRequestPassword: false,
+            shouldShowLoadingIndicator: false,
+        });
     }
 
     render() {
@@ -113,12 +125,11 @@ class PDFView extends Component {
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
-                            activityIndicator={<FullScreenLoadingIndicator />}
                             source={{uri: this.props.sourceURL}}
                             style={pdfStyles}
                             onError={this.initiatePasswordChallenge}
                             password={this.state.password}
-                            onLoadComplete={this.terminatePasswordChallenge}
+                            onLoadComplete={this.finishPdfLoad}
                         />
                     </TouchableWithoutFeedback>
                 )}
@@ -128,6 +139,7 @@ class PDFView extends Component {
                         isPasswordInvalid={this.state.isPasswordInvalid}
                     />
                 )}
+                {this.state.shouldShowLoadingIndicator && <FullScreenLoadingIndicator />}
             </View>
         );
     }

From 72082d65c2393e572687daa69065343cffdf4474 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 07:28:33 -1000
Subject: [PATCH 034/101] feat: pdf password form - password field autofocus
 and buttton press-on-enter

---
 src/components/PDFView/PDFPasswordForm.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 2ede0d68dbfc..dde417528d70 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -31,7 +31,7 @@ class PDFPasswordForm extends Component {
     }
 
     submitPassword() {
-        if (!this.state.password) {
+        if (_.isEmpty(this.state.password)) {
             return;
         }
         this.props.onSubmit(this.state.password);
@@ -56,6 +56,7 @@ class PDFPasswordForm extends Component {
                     returnKeyType="done"
                     onSubmitEditing={this.submitPassword}
                     secureTextEntry
+                    autoFocus
                 />
                 {this.props.isPasswordInvalid && (
                     <Text style={[styles.formError]}>
@@ -63,10 +64,10 @@ class PDFPasswordForm extends Component {
                     </Text>
                 )}
                 <Button
-                    textStyles={[styles.buttonConfirmText]}
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
                     style={styles.mt4}
+                    pressOnEnter
                 />
             </View>
         );

From bf038d141c0cd2bf97c4e8a6b5263ede43c93203 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 08:41:55 -1000
Subject: [PATCH 035/101] feat: pdf password form - form validation

---
 src/components/PDFView/PDFPasswordForm.js | 28 ++++++++++++++++++++---
 src/languages/en.js                       |  5 ++--
 src/languages/es.js                       |  5 ++--
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index dde417528d70..679b2ebf0bc8 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
@@ -26,8 +27,11 @@ class PDFPasswordForm extends Component {
         super(props);
         this.state = {
             password: '',
+            validationErrorText: '',
         };
         this.submitPassword = this.submitPassword.bind(this);
+        this.validateOnBlur = this.validateOnBlur.bind(this);
+        this.updatePassword = this.updatePassword.bind(this);
     }
 
     submitPassword() {
@@ -37,6 +41,22 @@ class PDFPasswordForm extends Component {
         this.props.onSubmit(this.state.password);
     }
 
+    updatePassword(password) {
+        if (!_.isEmpty(password)) {
+            this.setState({validationErrorText: ''});
+        }
+        this.setState({password});
+    }
+
+    validateOnBlur() {
+        if (!_.isEmpty(this.state.password)) {
+            return;
+        }
+        this.setState({
+            validationErrorText: this.props.translate('attachmentView.passwordRequired'),
+        });
+    }
+
     render() {
         // Use container styles appropriate for screen size.
         const containerStyles = this.props.isSmallScreenWidth
@@ -46,21 +66,23 @@ class PDFPasswordForm extends Component {
         return (
             <View style={containerStyles}>
                 <Text style={styles.mb4}>
-                    {this.props.translate('attachmentView.pdfPasswordRequired')}
+                    {this.props.translate('attachmentView.pdfPasswordFormLabel')}
                 </Text>
                 <TextInput
                     label={this.props.translate('common.password')}
                     autoCompleteType="off"
                     textContentType="password"
-                    onChangeText={password => this.setState({password})}
+                    onInputChange={this.updatePassword}
                     returnKeyType="done"
                     onSubmitEditing={this.submitPassword}
+                    errorText={this.state.validationErrorText}
+                    onBlur={this.validateOnBlur}
                     secureTextEntry
                     autoFocus
                 />
                 {this.props.isPasswordInvalid && (
                     <Text style={[styles.formError]}>
-                        {this.props.translate('attachmentView.incorrectPDFPassword')}
+                        {this.props.translate('attachmentView.passwordIncorrect')}
                     </Text>
                 )}
                 <Button
diff --git a/src/languages/en.js b/src/languages/en.js
index 50b21c479f80..097004f982d1 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -570,8 +570,9 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',
-        pdfPasswordRequired: 'This PDF is password protected. Please enter the password to view it.',
-        incorrectPDFPassword: 'Incorrect password. Please try again.',
+        pdfPasswordFormLabel: 'This PDF is password protected. Please enter the password to view it.',
+        passwordRequired: 'Please enter a password',
+        passwordIncorrect: 'Incorrect password. Please try again.',
     },
     pronouns: {
         heHimHis: 'He/him',
diff --git a/src/languages/es.js b/src/languages/es.js
index d038085abec5..23b544b175d5 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -570,8 +570,9 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
-        pdfPasswordRequired: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
-        incorrectPDFPassword: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
+        pdfPasswordFormLabel: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
+        passwordRequired: 'Por favor, introduzca una contraseña',
+        passwordIncorrect: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
     },
     pronouns: {
         heHimHis: 'Él',

From d9bc1895090a51d35367365e85b213933a367458 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 09:07:25 -1000
Subject: [PATCH 036/101] feat: pdf password form - updated invalid-password
 error styles

---
 src/components/PDFView/PDFPasswordForm.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 679b2ebf0bc8..815e213c245b 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -5,7 +5,10 @@ import {View} from 'react-native';
 import Button from '../Button';
 import Text from '../Text';
 import TextInput from '../TextInput';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
+import colors from '../../styles/colors';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -81,9 +84,14 @@ class PDFPasswordForm extends Component {
                     autoFocus
                 />
                 {this.props.isPasswordInvalid && (
-                    <Text style={[styles.formError]}>
-                        {this.props.translate('attachmentView.passwordIncorrect')}
-                    </Text>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
+                        <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                        <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                            <Text style={styles.mutedTextLabel}>
+                                {this.props.translate('attachmentView.passwordIncorrect')}
+                            </Text>
+                        </View>
+                    </View>
                 )}
                 <Button
                     text={this.props.translate('common.confirm')}

From d46ebc21745be7c48028dff5c2e159547ec77cc1 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 09:52:21 -1000
Subject: [PATCH 037/101] feat: pdf password form - hide error message during
 password entry

---
 src/components/PDFView/PDFPasswordForm.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 815e213c245b..7a42d8f9efd1 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -31,6 +31,7 @@ class PDFPasswordForm extends Component {
         this.state = {
             password: '',
             validationErrorText: '',
+            isEditingInProgress: true,
         };
         this.submitPassword = this.submitPassword.bind(this);
         this.validateOnBlur = this.validateOnBlur.bind(this);
@@ -41,6 +42,7 @@ class PDFPasswordForm extends Component {
         if (_.isEmpty(this.state.password)) {
             return;
         }
+        this.setState({isEditingInProgress: false});
         this.props.onSubmit(this.state.password);
     }
 
@@ -48,7 +50,7 @@ class PDFPasswordForm extends Component {
         if (!_.isEmpty(password)) {
             this.setState({validationErrorText: ''});
         }
-        this.setState({password});
+        this.setState({password, isEditingInProgress: true});
     }
 
     validateOnBlur() {
@@ -83,7 +85,7 @@ class PDFPasswordForm extends Component {
                     secureTextEntry
                     autoFocus
                 />
-                {this.props.isPasswordInvalid && (
+                {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
                         <Icon src={Expensicons.Exclamation} fill={colors.red} />
                         <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>

From 0d7650a5fb811eef46ff867d0b2972db54bf9c33 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 12:12:04 -1000
Subject: [PATCH 038/101] feat: pdf password form - hide error message during
 pdf loat attempt

---
 src/components/PDFView/index.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 57be2085da4e..e6b41e2978af 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -21,6 +21,7 @@ class PDFView extends Component {
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
+        this.attemptPdfLoad = this.attemptPdfLoad.bind(this);
     }
 
     /**
@@ -64,6 +65,17 @@ class PDFView extends Component {
         }
     }
 
+    /**
+     * Send password to react-pdf via its callback so that it can attempt to load
+     * the PDF.
+     *
+     * @param {String} password Password to send via callback to react-pdf
+     */
+    attemptPdfLoad(password) {
+        this.setState({isPasswordInvalid: false});
+        this.onPasswordCallback(password);
+    }
+
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
@@ -109,7 +121,7 @@ class PDFView extends Component {
                 </View>
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
-                        onSubmit={this.onPasswordCallback}
+                        onSubmit={this.attemptPdfLoad}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                     />
                 )}

From a054444328d74939e6fc813899e175c4710a1bfe Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 14:52:11 -1000
Subject: [PATCH 039/101] feat: pdf password form - hide error message during
 pdf load attempt

---
 src/components/PDFView/index.native.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 16c2648f748b..ae1214c8114b 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -82,6 +82,7 @@ class PDFView extends Component {
             password,
             shouldAttemptPdfLoad: true,
             shouldShowLoadingIndicator: true,
+            isPasswordInvalid: false,
         });
     }
 

From 76e400560dfc6bbc4363bcd6884746360efe8134 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 15:56:21 -1000
Subject: [PATCH 040/101] feat: pdf password form - pushed confirm button to
 bottom for narrow screens

---
 src/components/PDFView/PDFPasswordForm.js | 16 ++++++++++++----
 src/styles/styles.js                      |  3 ++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 7a42d8f9efd1..80a148d5f799 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -12,6 +12,7 @@ import colors from '../../styles/colors';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withKeyboardState from '../withKeyboardState';
 
 const propTypes = {
     /** If the submitted password is invalid (show an error message) */
@@ -39,11 +40,11 @@ class PDFPasswordForm extends Component {
     }
 
     submitPassword() {
-        if (_.isEmpty(this.state.password)) {
-            return;
+        this.validateOnBlur();
+        if (!_.isEmpty(this.state.password)) {
+            this.setState({isEditingInProgress: false});
+            this.props.onSubmit(this.state.password);
         }
-        this.setState({isEditingInProgress: false});
-        this.props.onSubmit(this.state.password);
     }
 
     updatePassword(password) {
@@ -85,6 +86,12 @@ class PDFPasswordForm extends Component {
                     secureTextEntry
                     autoFocus
                 />
+
+                {/* Add vertical spacer on narrow screens to push button to bottom */}
+                {this.props.isSmallScreenWidth && !this.props.isShown && (
+                    <View style={{flexGrow: 1}} />
+                )}
+
                 {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
                         <Icon src={Expensicons.Exclamation} fill={colors.red} />
@@ -112,4 +119,5 @@ PDFPasswordForm.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
     withLocalize,
+    withKeyboardState,
 )(PDFPasswordForm);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b7ea34704f08..c2741f9a8ae2 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1731,7 +1731,8 @@ const styles = {
             maxWidth: 350,
         },
         narrowScreen: {
-            ...spacing.m5,
+            ...spacing.p5,
+            ...sizing.h100,
         },
     },
 

From f074c2bd4a4bb92abe9f10e034e99d828e8cf193 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 19:59:56 -1000
Subject: [PATCH 041/101] feat: pdf password form - improved button position
 when keyboard is visible

---
 src/components/PDFView/PDFPasswordForm.js | 10 +---------
 src/components/PDFView/index.native.js    | 21 ++++++++++++++++-----
 src/styles/styles.js                      |  4 ++++
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 80a148d5f799..71a7be8c3c9e 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -12,7 +12,6 @@ import colors from '../../styles/colors';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import withKeyboardState from '../withKeyboardState';
 
 const propTypes = {
     /** If the submitted password is invalid (show an error message) */
@@ -86,12 +85,6 @@ class PDFPasswordForm extends Component {
                     secureTextEntry
                     autoFocus
                 />
-
-                {/* Add vertical spacer on narrow screens to push button to bottom */}
-                {this.props.isSmallScreenWidth && !this.props.isShown && (
-                    <View style={{flexGrow: 1}} />
-                )}
-
                 {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
                         <Icon src={Expensicons.Exclamation} fill={colors.red} />
@@ -105,7 +98,7 @@ class PDFPasswordForm extends Component {
                 <Button
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
-                    style={styles.mt4}
+                    style={styles.pdfPasswordForm.confirmButton}
                     pressOnEnter
                 />
             </View>
@@ -119,5 +112,4 @@ PDFPasswordForm.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
     withLocalize,
-    withKeyboardState,
 )(PDFPasswordForm);
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index ae1214c8114b..73f5144ec2db 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,6 +1,11 @@
 import React, {Component} from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
+import {
+    KeyboardAvoidingView,
+    Platform,
+    TouchableWithoutFeedback,
+    View,
+} from 'react-native';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions from '../withWindowDimensions';
@@ -135,10 +140,16 @@ class PDFView extends Component {
                     </TouchableWithoutFeedback>
                 )}
                 {this.state.shouldRequestPassword && (
-                    <PDFPasswordForm
-                        onSubmit={this.attemptPdfLoadWithPassword}
-                        isPasswordInvalid={this.state.isPasswordInvalid}
-                    />
+                    <KeyboardAvoidingView
+                        enabled={Platform.OS === 'ios'}
+                        behavior="padding"
+                        keyboardVerticalOffset={80}
+                    >
+                        <PDFPasswordForm
+                            onSubmit={this.attemptPdfLoadWithPassword}
+                            isPasswordInvalid={this.state.isPasswordInvalid}
+                        />
+                    </KeyboardAvoidingView>
                 )}
                 {this.state.shouldShowLoadingIndicator && <FullScreenLoadingIndicator />}
             </View>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c2741f9a8ae2..7167a3734088 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1734,6 +1734,10 @@ const styles = {
             ...spacing.p5,
             ...sizing.h100,
         },
+        confirmButton: {
+            ...spacing.pt4,
+            marginTop: 'auto',
+        },
     },
 
     modalCenterContentContainer: {

From 8fd2ce522ded4130d1f86c8499eca1a5f545589c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sun, 12 Jun 2022 21:39:05 -1000
Subject: [PATCH 042/101] feat: pdf password form - improved button positioning
 when keyboard visible

---
 src/CONST.js                              | 15 +++++++++++----
 src/components/PDFView/PDFPasswordForm.js |  9 ++++++++-
 src/components/PDFView/index.js           |  4 ++--
 src/components/PDFView/index.native.js    | 10 +++++++---
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index a6cb6e3e0c1c..46566f0b5364 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -702,10 +702,17 @@ const CONST = {
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
 
-    // Constants for password-related error responses received from react-pdf.
-    REACT_PDF_PASSWORD_RESPONSES: {
-        NEED_PASSWORD: 1,
-        INCORRECT_PASSWORD: 2,
+    PDF_PASSWORD_FORM: {
+        KEYBOARD_AVOIDING_VIEW: {
+            BEHAVIOR: 'padding',
+            KEYBOARD_VERTICAL_OFFSET: 85,
+        },
+
+        // Constants for password-related error responses received from react-pdf.
+        REACT_PDF_PASSWORD_RESPONSES: {
+            NEED_PASSWORD: 1,
+            INCORRECT_PASSWORD: 2,
+        },
     },
 };
 
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 71a7be8c3c9e..b5164eaaad0a 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
+import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import Button from '../Button';
 import Text from '../Text';
 import TextInput from '../TextInput';
@@ -68,6 +69,11 @@ class PDFPasswordForm extends Component {
             ? styles.pdfPasswordForm.narrowScreen
             : styles.pdfPasswordForm.wideScreen;
 
+        const buttonStyles = [
+            styles.pdfPasswordForm.confirmButton,
+            {paddingBottom: this.props.insets.bottom},
+        ];
+
         return (
             <View style={containerStyles}>
                 <Text style={styles.mb4}>
@@ -98,7 +104,7 @@ class PDFPasswordForm extends Component {
                 <Button
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
-                    style={styles.pdfPasswordForm.confirmButton}
+                    style={buttonStyles}
                     pressOnEnter
                 />
             </View>
@@ -112,4 +118,5 @@ PDFPasswordForm.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
     withLocalize,
+    withSafeAreaInsets,
 )(PDFPasswordForm);
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index e6b41e2978af..9a99f7330ddc 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -56,10 +56,10 @@ class PDFView extends Component {
     initiatePasswordChallenge(callback, reason) {
         this.onPasswordCallback = callback;
 
-        if (reason === CONST.REACT_PDF_PASSWORD_RESPONSES.NEED_PASSWORD) {
+        if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.NEED_PASSWORD) {
             this.setState({shouldRequestPassword: true});
             this.props.onUserInputRequired(true);
-        } else if (reason === CONST.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
+        } else if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
             this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
             this.props.onUserInputRequired(true);
         }
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 73f5144ec2db..222435fdb592 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -11,6 +11,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import withWindowDimensions from '../withWindowDimensions';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
+import CONST from '../../CONST';
 import {propTypes, defaultProps} from './pdfViewPropTypes';
 
 /**
@@ -126,6 +127,9 @@ class PDFView extends Component {
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
             ? styles.pdfPasswordForm.nativeNarrowContainer : {};
 
+        const keyboardBehavior = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.BEHAVIOR;
+        const keyboardOffset = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.KEYBOARD_VERTICAL_OFFSET;
+
         return (
             <View style={containerStyles}>
                 {this.state.shouldAttemptPdfLoad && (
@@ -141,9 +145,9 @@ class PDFView extends Component {
                 )}
                 {this.state.shouldRequestPassword && (
                     <KeyboardAvoidingView
-                        enabled={Platform.OS === 'ios'}
-                        behavior="padding"
-                        keyboardVerticalOffset={80}
+                        enabled={Platform.OS === CONST.PLATFORM.IOS}
+                        behavior={keyboardBehavior}
+                        keyboardVerticalOffset={keyboardOffset}
                     >
                         <PDFPasswordForm
                             onSubmit={this.attemptPdfLoadWithPassword}

From a6021b193245f58932c7e87c2f9b26074da127ef Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 15 Jun 2022 09:29:12 -1000
Subject: [PATCH 043/101] feat: pdf password form - removed enter key handling
 from attachment modal

---
 src/components/AttachmentModal.js          | 18 +++---------------
 src/components/AttachmentView.js           |  5 -----
 src/components/PDFView/index.js            |  3 ---
 src/components/PDFView/pdfViewPropTypes.js |  4 ----
 4 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bd237df6d382..4bb62c44d0cc 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -75,7 +75,6 @@ class AttachmentModal extends PureComponent {
             file: null,
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
-            isSendOnEnterEnabled: true,
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);
@@ -111,19 +110,14 @@ class AttachmentModal extends PureComponent {
 
     /**
      * Execute the onConfirm callback and close the modal.
-     *
-     * @param {Event} event Either a click event, keyboard event or undefined
      */
-    submitAndClose(event) {
+    submitAndClose() {
         // If the modal has already been closed, don't allow another submission
         if (!this.state.isModalOpen) {
             return;
         }
+
         if (this.props.onConfirm) {
-            // Ignore the submit/close if it was initiated by enter key and send-on-enter is disabled
-            if (!this.state.isSendOnEnterEnabled && (!event || event instanceof KeyboardEvent)) {
-                return;
-            }
             this.props.onConfirm(_.extend(this.state.file, {source: this.state.sourceURL}));
         }
 
@@ -187,13 +181,7 @@ class AttachmentModal extends PureComponent {
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (
-                            <AttachmentView
-                                sourceURL={sourceURL}
-                                file={this.state.file}
-                                onUserInputRequired={(isRequired) => {
-                                    this.setState({isSendOnEnterEnabled: !isRequired});
-                                }}
-                            />
+                            <AttachmentView sourceURL={sourceURL} file={this.state.file} />
                         )}
                     </View>
 
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index b93b22103f7e..d783de4e0401 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -28,9 +28,6 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
-    /** Notify parent that we're requesting input from user (e.g. a PDF password) */
-    onUserInputRequired: PropTypes.func,
-
     ...withLocalizePropTypes,
 };
 
@@ -40,7 +37,6 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
-    onUserInputRequired: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -52,7 +48,6 @@ const AttachmentView = (props) => {
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
-                onUserInputRequired={props.onUserInputRequired}
             />
         );
     }
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 9a99f7330ddc..530191398498 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -38,7 +38,6 @@ class PDFView extends Component {
             shouldRequestPassword: false,
             isPasswordInvalid: false,
         });
-        this.props.onUserInputRequired(false);
     }
 
     /**
@@ -58,10 +57,8 @@ class PDFView extends Component {
 
         if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.NEED_PASSWORD) {
             this.setState({shouldRequestPassword: true});
-            this.props.onUserInputRequired(true);
         } else if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
             this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
-            this.props.onUserInputRequired(true);
         }
     }
 
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 83937e29918c..60bc7f5c4266 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -10,16 +10,12 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
-    /** Notify parent that we're requesting input from user */
-    onUserInputRequired: PropTypes.func,
-
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     sourceURL: '',
     style: {},
-    onUserInputRequired: () => {},
 };
 
 export {propTypes, defaultProps};

From ef124b8265b0c2e8c8fd7d9d9b3dcafb90949876 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 15 Jun 2022 14:25:47 -1000
Subject: [PATCH 044/101] feat: pdf password form - disabled autofocus for
 narrow screens and improved error handling

---
 src/components/PDFView/PDFPasswordForm.js | 6 +++++-
 src/components/PDFView/index.js           | 3 ++-
 src/components/PDFView/index.native.js    | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b5164eaaad0a..7a60f0db5c8f 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -18,12 +18,16 @@ const propTypes = {
     /** If the submitted password is invalid (show an error message) */
     isPasswordInvalid: PropTypes.bool,
 
+    /** If the password field is auto-focused */
+    isPasswordFieldFocused: PropTypes.bool,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     isPasswordInvalid: false,
+    isPasswordFieldFocused: false,
 };
 
 class PDFPasswordForm extends Component {
@@ -88,8 +92,8 @@ class PDFPasswordForm extends Component {
                     onSubmitEditing={this.submitPassword}
                     errorText={this.state.validationErrorText}
                     onBlur={this.validateOnBlur}
+                    autoFocus={this.props.isPasswordFieldFocused}
                     secureTextEntry
-                    autoFocus
                 />
                 {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 530191398498..a856f95f2781 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -80,7 +80,7 @@ class PDFView extends Component {
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
 
         const outerContainerStyle = [styles.PDFView, this.props.style];
-        const innerContainerStyle = [styles.w100, styles.h100];
+        const innerContainerStyle = [styles.w100, styles.h100, {width: pageWidth}];
 
         // If we're requesting a password then we need to set the background to
         // defaultModalContainer color (white) and hide - but still render -
@@ -120,6 +120,7 @@ class PDFView extends Component {
                     <PDFPasswordForm
                         onSubmit={this.attemptPdfLoad}
                         isPasswordInvalid={this.state.isPasswordInvalid}
+                        isPasswordFieldFocused={!this.props.isSmallScreenWidth}
                     />
                 )}
             </View>
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 222435fdb592..5544c53f7025 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -54,6 +54,8 @@ class PDFView extends Component {
      * @param {String} message
      */
     initiatePasswordChallenge({message}) {
+        this.setState({shouldShowLoadingIndicator: false});
+
         if (!message.match(/password/i)) {
             return;
         }
@@ -62,7 +64,6 @@ class PDFView extends Component {
         this.setState({
             shouldRequestPassword: true,
             shouldAttemptPdfLoad: false,
-            shouldShowLoadingIndicator: false,
         });
 
         // The message provided by react-native-pdf doesn't indicate whether this

From c8fdba02a031193e3a63e8d407d4e1223475e4c5 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 17 Jun 2022 07:20:03 -1000
Subject: [PATCH 045/101] feat: pdf password form - moved loading indicator to
 confirm button on native

---
 src/components/PDFView/PDFPasswordForm.js | 13 +++++++++----
 src/components/PDFView/index.js           |  2 +-
 src/components/PDFView/index.native.js    |  3 ++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 7a60f0db5c8f..f5680728062f 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -18,8 +18,11 @@ const propTypes = {
     /** If the submitted password is invalid (show an error message) */
     isPasswordInvalid: PropTypes.bool,
 
-    /** If the password field is auto-focused */
-    isPasswordFieldFocused: PropTypes.bool,
+    /** If the password field should be auto-focused */
+    shouldAutofocusPasswordField: PropTypes.bool,
+
+    /** If loading indicator should be shown */
+    shouldShowLoadingIndicator: PropTypes.bool,
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
@@ -27,7 +30,8 @@ const propTypes = {
 
 const defaultProps = {
     isPasswordInvalid: false,
-    isPasswordFieldFocused: false,
+    shouldAutofocusPasswordField: false,
+    shouldShowLoadingIndicator: false,
 };
 
 class PDFPasswordForm extends Component {
@@ -92,7 +96,7 @@ class PDFPasswordForm extends Component {
                     onSubmitEditing={this.submitPassword}
                     errorText={this.state.validationErrorText}
                     onBlur={this.validateOnBlur}
-                    autoFocus={this.props.isPasswordFieldFocused}
+                    autoFocus={this.props.shouldAutofocusPasswordField}
                     secureTextEntry
                 />
                 {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
@@ -109,6 +113,7 @@ class PDFPasswordForm extends Component {
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
                     style={buttonStyles}
+                    isLoading={this.props.shouldShowLoadingIndicator}
                     pressOnEnter
                 />
             </View>
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index a856f95f2781..51d067369215 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -120,7 +120,7 @@ class PDFView extends Component {
                     <PDFPasswordForm
                         onSubmit={this.attemptPdfLoad}
                         isPasswordInvalid={this.state.isPasswordInvalid}
-                        isPasswordFieldFocused={!this.props.isSmallScreenWidth}
+                        shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
                     />
                 )}
             </View>
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 5544c53f7025..9535dea89a40 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -136,6 +136,7 @@ class PDFView extends Component {
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
+                            activityIndicator={<FullScreenLoadingIndicator />}
                             source={{uri: this.props.sourceURL}}
                             style={pdfStyles}
                             onError={this.initiatePasswordChallenge}
@@ -153,10 +154,10 @@ class PDFView extends Component {
                         <PDFPasswordForm
                             onSubmit={this.attemptPdfLoadWithPassword}
                             isPasswordInvalid={this.state.isPasswordInvalid}
+                            shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
                         />
                     </KeyboardAvoidingView>
                 )}
-                {this.state.shouldShowLoadingIndicator && <FullScreenLoadingIndicator />}
             </View>
         );
     }

From 000f2ceebed588cca054108bf953a80873bea563 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 17 Jun 2022 10:28:00 -1000
Subject: [PATCH 046/101] feat: pdf password form - improved confirm button
 positioning for small screens

---
 src/components/PDFView/PDFPasswordForm.js | 4 ++++
 src/styles/styles.js                      | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index f5680728062f..8e14a92cab45 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -90,6 +90,7 @@ class PDFPasswordForm extends Component {
                 <TextInput
                     label={this.props.translate('common.password')}
                     autoCompleteType="off"
+                    autoCorrect={false}
                     textContentType="password"
                     onInputChange={this.updatePassword}
                     returnKeyType="done"
@@ -109,6 +110,9 @@ class PDFPasswordForm extends Component {
                         </View>
                     </View>
                 )}
+                {this.props.isSmallScreenWidth && (
+                    <View style={{flexGrow: 1}} />
+                )}
                 <Button
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a4bc395f4077..c54dad88531e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1773,7 +1773,6 @@ const styles = {
         },
         confirmButton: {
             ...spacing.pt4,
-            marginTop: 'auto',
         },
     },
 

From 4206fd1bd85340c01506420266b7b5fa7aec7644 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 17 Jun 2022 10:54:19 -1000
Subject: [PATCH 047/101] feat: pdf password form - cleaned up web/mweb styles

---
 src/components/PDFView/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 51d067369215..eb39bbc3e87f 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -80,7 +80,7 @@ class PDFView extends Component {
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
 
         const outerContainerStyle = [styles.PDFView, this.props.style];
-        const innerContainerStyle = [styles.w100, styles.h100, {width: pageWidth}];
+        const innerContainerStyle = [styles.h100];
 
         // If we're requesting a password then we need to set the background to
         // defaultModalContainer color (white) and hide - but still render -

From 097713bdfd46058a94d843a946d4895eb304ee6d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 17 Jun 2022 20:43:40 -1000
Subject: [PATCH 048/101] feat: pdf password form - dismiss keyboard on android
 before pdf render

---
 src/components/PDFView/index.native.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 9535dea89a40..a7699beaebd5 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -5,6 +5,7 @@ import {
     Platform,
     TouchableWithoutFeedback,
     View,
+    Keyboard,
 } from 'react-native';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -82,6 +83,13 @@ class PDFView extends Component {
      * @param {String} password Password submitted via PDFPasswordForm
      */
     attemptPdfLoadWithPassword(password) {
+        // On Android we need to close the keyboard before rending the PDF.
+        // If the keyboard is open during PDF rendering then react-native-pdf
+        // scales the PDF view incorrectly.
+        if (Platform.OS === CONST.PLATFORM.ANDROID) {
+            Keyboard.dismiss();
+        }
+
         // Render react-native-pdf/PDF so that it can validate the password.
         // Note that at this point in the password challenge, shouldRequestPassword is true.
         // Thus react-native-pdf/PDF will be rendered - but not visible.
@@ -119,7 +127,6 @@ class PDFView extends Component {
         // is positioned nicely. We're specifically hiding it because we still need to render
         // the PDF so that it can validate the password.
         if (this.state.shouldRequestPassword) {
-            // touchableStyles.push(styles.invisible);
             pdfStyles.push(styles.invisible);
         }
 

From e2f87adc21d42be0eeac74a41ff4e2a46f970308 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 20 Jun 2022 07:48:41 -1000
Subject: [PATCH 049/101] feat: pdf password form - some minor changes
 requested by reviewer

---
 src/components/PDFView/PDFPasswordForm.js  | 13 ++++---------
 src/components/PDFView/pdfViewPropTypes.js |  1 -
 src/styles/styles.js                       |  3 ---
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 8e14a92cab45..734c946dfc04 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -77,11 +77,6 @@ class PDFPasswordForm extends Component {
             ? styles.pdfPasswordForm.narrowScreen
             : styles.pdfPasswordForm.wideScreen;
 
-        const buttonStyles = [
-            styles.pdfPasswordForm.confirmButton,
-            {paddingBottom: this.props.insets.bottom},
-        ];
-
         return (
             <View style={containerStyles}>
                 <Text style={styles.mb4}>
@@ -89,10 +84,10 @@ class PDFPasswordForm extends Component {
                 </Text>
                 <TextInput
                     label={this.props.translate('common.password')}
-                    autoCompleteType="off"
+                    autoComplete="off"
                     autoCorrect={false}
                     textContentType="password"
-                    onInputChange={this.updatePassword}
+                    onChangeText={this.updatePassword}
                     returnKeyType="done"
                     onSubmitEditing={this.submitPassword}
                     errorText={this.state.validationErrorText}
@@ -111,12 +106,12 @@ class PDFPasswordForm extends Component {
                     </View>
                 )}
                 {this.props.isSmallScreenWidth && (
-                    <View style={{flexGrow: 1}} />
+                    <View style={styles.flexGrow1} />
                 )}
                 <Button
                     text={this.props.translate('common.confirm')}
                     onPress={this.submitPassword}
-                    style={buttonStyles}
+                    style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
                     isLoading={this.props.shouldShowLoadingIndicator}
                     pressOnEnter
                 />
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 60bc7f5c4266..bfca2187b838 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
-
     /** URL to full-sized image */
     sourceURL: PropTypes.string,
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c54dad88531e..41fa17f85b1c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1771,9 +1771,6 @@ const styles = {
             ...spacing.p5,
             ...sizing.h100,
         },
-        confirmButton: {
-            ...spacing.pt4,
-        },
     },
 
     modalCenterContentContainer: {

From 1b31cbdf5ec505402a424fde1667fe596c3a71f4 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 21 Jun 2022 09:30:44 -1000
Subject: [PATCH 050/101] feat: pdf password form - refactored native code into
 platform-specific files

---
 src/components/PDFView/BasePDFViewNative.js | 192 ++++++++++++++++++++
 src/components/PDFView/index.ios.js         |  19 ++
 src/components/PDFView/index.native.js      | 179 +-----------------
 3 files changed, 221 insertions(+), 169 deletions(-)
 create mode 100644 src/components/PDFView/BasePDFViewNative.js
 create mode 100644 src/components/PDFView/index.ios.js

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
new file mode 100644
index 000000000000..d78c34594038
--- /dev/null
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -0,0 +1,192 @@
+import React, {Component} from 'react';
+import PDF from 'react-native-pdf';
+import {
+    KeyboardAvoidingView,
+    TouchableWithoutFeedback,
+    View,
+    Keyboard,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import PDFPasswordForm from './PDFPasswordForm';
+import CONST from '../../CONST';
+import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+
+const propTypes = {
+    ...pdfViewPropTypes,
+
+    /** If keyboard should be dismissed before loading PDF */
+    dismissKeyboardBeforePdfLoad: PropTypes.bool,
+
+    /** If KeyboardAvoidingView is enabled */
+    enableKeyboardAvoidingView: PropTypes.bool,
+};
+
+const defaultProps = {
+    ...pdfViewDefaultProps,
+    dismissKeyboardBeforePdfLoad: true,
+    enableKeyboardAvoidingView: false,
+};
+
+/**
+ * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is
+ * password-protected we render a PDFPasswordForm to request a password
+ * from the user.
+ *
+ * In order to render things nicely during a password challenge we need
+ * to keep track of additional state. In particular, the
+ * react-native-pdf/PDF component is both conditionally rendered and hidden
+ * depending upon the situation. It needs to be rerendered on each password
+ * submission because it doesn't dynamically handle updates to its
+ * password property. And we need to hide it during password challenges
+ * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
+ * is (temporarily) rendered.
+ */
+class BasePDFViewNative extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            shouldRequestPassword: false,
+            shouldAttemptPdfLoad: true,
+            shouldShowLoadingIndicator: true,
+            isPasswordInvalid: false,
+            password: '',
+        };
+        this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
+        this.attemptPdfLoadWithPassword = this.attemptPdfLoadWithPassword.bind(this);
+        this.finishPdfLoad = this.finishPdfLoad.bind(this);
+    }
+
+    /**
+     * Initiate password challenge if message received from react-native-pdf/PDF
+     * indicates that a password is required or invalid.
+     *
+     * For a password challenge the message is "Password required or incorrect password."
+     * Note that the message doesn't specify whether the password is simply empty or
+     * invalid.
+     *
+     * @param {String} message
+     */
+    initiatePasswordChallenge({message}) {
+        this.setState({shouldShowLoadingIndicator: false});
+
+        if (!message.match(/password/i)) {
+            return;
+        }
+
+        // Render password form, and don't render PDF and loading indicator.
+        this.setState({
+            shouldRequestPassword: true,
+            shouldAttemptPdfLoad: false,
+        });
+
+        // The message provided by react-native-pdf doesn't indicate whether this
+        // is an initial password request or if the password is invalid. So we just assume
+        // that if a password was already entered then it's an invalid password error.
+        if (this.state.password) {
+            this.setState({isPasswordInvalid: true});
+        }
+    }
+
+    /**
+     * When the password is submitted via PDFPasswordForm, save the password
+     * in state and attempt to load the PDF. Also show the loading indicator
+     * since react-native-pdf/PDF will need to reload the PDF.
+     *
+     * @param {String} password Password submitted via PDFPasswordForm
+     */
+    attemptPdfLoadWithPassword(password) {
+        // On Android we need to close the keyboard before rendering the PDF.
+        // If the keyboard is open during PDF rendering then react-native-pdf
+        // scales the PDF view incorrectly.
+        if (this.props.dismissKeyboardBeforePdfLoad) {
+            Keyboard.dismiss();
+        }
+
+        // Render react-native-pdf/PDF so that it can validate the password.
+        // Note that at this point in the password challenge, shouldRequestPassword is true.
+        // Thus react-native-pdf/PDF will be rendered - but not visible.
+        this.setState({
+            password,
+            shouldAttemptPdfLoad: true,
+            shouldShowLoadingIndicator: true,
+            isPasswordInvalid: false,
+        });
+    }
+
+    /**
+     * After the PDF is successfully loaded hide PDFPasswordForm and the loading
+     * indicator.
+     */
+    finishPdfLoad() {
+        this.setState({
+            shouldRequestPassword: false,
+            shouldShowLoadingIndicator: false,
+        });
+    }
+
+    render() {
+        const pdfStyles = [
+            styles.imageModalPDF,
+            StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
+        ];
+        const touchableStyles = [
+            styles.flex1,
+            this.props.style,
+        ];
+
+        // If we haven't yet successfully validated the password and loaded the PDF,
+        // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
+        // is positioned nicely. We're specifically hiding it because we still need to render
+        // the PDF so that it can validate the password.
+        if (this.state.shouldRequestPassword) {
+            pdfStyles.push(styles.invisible);
+        }
+
+        // For small screens force the container view to take up the full width when
+        // displaying the password form.
+        const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
+            ? styles.pdfPasswordForm.nativeNarrowContainer : {};
+
+        const keyboardBehavior = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.BEHAVIOR;
+        const keyboardOffset = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.KEYBOARD_VERTICAL_OFFSET;
+
+        return (
+            <View style={containerStyles}>
+                {this.state.shouldAttemptPdfLoad && (
+                    <TouchableWithoutFeedback style={touchableStyles}>
+                        <PDF
+                            activityIndicator={<FullScreenLoadingIndicator />}
+                            source={{uri: this.props.sourceURL}}
+                            style={pdfStyles}
+                            onError={this.initiatePasswordChallenge}
+                            password={this.state.password}
+                            onLoadComplete={this.finishPdfLoad}
+                        />
+                    </TouchableWithoutFeedback>
+                )}
+                {this.state.shouldRequestPassword && (
+                    <KeyboardAvoidingView
+                        enabled={this.props.enableKeyboardAvoidingView}
+                        behavior={keyboardBehavior}
+                        keyboardVerticalOffset={keyboardOffset}
+                    >
+                        <PDFPasswordForm
+                            onSubmit={this.attemptPdfLoadWithPassword}
+                            isPasswordInvalid={this.state.isPasswordInvalid}
+                            shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
+                        />
+                    </KeyboardAvoidingView>
+                )}
+            </View>
+        );
+    }
+}
+
+BasePDFViewNative.propTypes = propTypes;
+BasePDFViewNative.defaultProps = defaultProps;
+
+export default withWindowDimensions(BasePDFViewNative);
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
new file mode 100644
index 000000000000..7d8d98bf2dfb
--- /dev/null
+++ b/src/components/PDFView/index.ios.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import BasePDFViewNative from './BasePDFViewNative';
+import {propTypes, defaultProps} from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+
+const PDFView = props => (
+    <BasePDFViewNative
+        sourceURL={props.sourceURL}
+        style={props.style}
+        dismissKeyboardBeforePdfLoad={false}
+        enableKeyboardAvoidingView
+    />
+);
+
+PDFView.propTypes = propTypes;
+PDFView.defaultProps = defaultProps;
+PDFView.displayName = 'PDFView';
+
+export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index a7699beaebd5..8926d1704552 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,176 +1,17 @@
-import React, {Component} from 'react';
-import PDF from 'react-native-pdf';
-import {
-    KeyboardAvoidingView,
-    Platform,
-    TouchableWithoutFeedback,
-    View,
-    Keyboard,
-} from 'react-native';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import withWindowDimensions from '../withWindowDimensions';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import PDFPasswordForm from './PDFPasswordForm';
-import CONST from '../../CONST';
+import React from 'react';
+import BasePDFViewNative from './BasePDFViewNative';
 import {propTypes, defaultProps} from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
 
-/**
- * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is
- * password-protected we render a PDFPasswordForm to request a password
- * from the user.
- *
- * In order to render things nicely during a password challenge we need
- * to keep track of additional state. In particular, the
- * react-native-pdf/PDF component is both conditionally rendered and hidden
- * depending upon the situation. It needs to be rerendered on each password
- * submission because it doesn't dynamically handle updates to its
- * password property. And we need to hide it during password challenges
- * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
- * is (temporarily) rendered.
- */
-class PDFView extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            shouldRequestPassword: false,
-            shouldAttemptPdfLoad: true,
-            shouldShowLoadingIndicator: true,
-            isPasswordInvalid: false,
-            password: '',
-        };
-        this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
-        this.attemptPdfLoadWithPassword = this.attemptPdfLoadWithPassword.bind(this);
-        this.finishPdfLoad = this.finishPdfLoad.bind(this);
-    }
-
-    /**
-     * Initiate password challenge if message received from react-native-pdf/PDF
-     * indicates that a password is required or invalid.
-     *
-     * For a password challenge the message is "Password required or incorrect password."
-     * Note that the message doesn't specify whether the password is simply empty or
-     * invalid.
-     *
-     * @param {String} message
-     */
-    initiatePasswordChallenge({message}) {
-        this.setState({shouldShowLoadingIndicator: false});
-
-        if (!message.match(/password/i)) {
-            return;
-        }
-
-        // Render password form, and don't render PDF and loading indicator.
-        this.setState({
-            shouldRequestPassword: true,
-            shouldAttemptPdfLoad: false,
-        });
-
-        // The message provided by react-native-pdf doesn't indicate whether this
-        // is an initial password request or if the password is invalid. So we just assume
-        // that if a password was already entered then it's an invalid password error.
-        if (this.state.password) {
-            this.setState({isPasswordInvalid: true});
-        }
-    }
-
-    /**
-     * When the password is submitted via PDFPasswordForm, save the password
-     * in state and attempt to load the PDF. Also show the loading indicator
-     * since react-native-pdf/PDF will need to reload the PDF.
-     *
-     * @param {String} password Password submitted via PDFPasswordForm
-     */
-    attemptPdfLoadWithPassword(password) {
-        // On Android we need to close the keyboard before rending the PDF.
-        // If the keyboard is open during PDF rendering then react-native-pdf
-        // scales the PDF view incorrectly.
-        if (Platform.OS === CONST.PLATFORM.ANDROID) {
-            Keyboard.dismiss();
-        }
-
-        // Render react-native-pdf/PDF so that it can validate the password.
-        // Note that at this point in the password challenge, shouldRequestPassword is true.
-        // Thus react-native-pdf/PDF will be rendered - but not visible.
-        this.setState({
-            password,
-            shouldAttemptPdfLoad: true,
-            shouldShowLoadingIndicator: true,
-            isPasswordInvalid: false,
-        });
-    }
-
-    /**
-     * After the PDF is successfully loaded hide PDFPasswordForm and the loading
-     * indicator.
-     */
-    finishPdfLoad() {
-        this.setState({
-            shouldRequestPassword: false,
-            shouldShowLoadingIndicator: false,
-        });
-    }
-
-    render() {
-        const pdfStyles = [
-            styles.imageModalPDF,
-            StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight),
-        ];
-        const touchableStyles = [
-            styles.flex1,
-            this.props.style,
-        ];
-
-        // If we haven't yet successfully validated the password and loaded the PDF,
-        // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
-        // is positioned nicely. We're specifically hiding it because we still need to render
-        // the PDF so that it can validate the password.
-        if (this.state.shouldRequestPassword) {
-            pdfStyles.push(styles.invisible);
-        }
-
-        // For small screens force the container view to take up the full width when
-        // displaying the password form.
-        const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
-            ? styles.pdfPasswordForm.nativeNarrowContainer : {};
-
-        const keyboardBehavior = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.BEHAVIOR;
-        const keyboardOffset = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.KEYBOARD_VERTICAL_OFFSET;
-
-        return (
-            <View style={containerStyles}>
-                {this.state.shouldAttemptPdfLoad && (
-                    <TouchableWithoutFeedback style={touchableStyles}>
-                        <PDF
-                            activityIndicator={<FullScreenLoadingIndicator />}
-                            source={{uri: this.props.sourceURL}}
-                            style={pdfStyles}
-                            onError={this.initiatePasswordChallenge}
-                            password={this.state.password}
-                            onLoadComplete={this.finishPdfLoad}
-                        />
-                    </TouchableWithoutFeedback>
-                )}
-                {this.state.shouldRequestPassword && (
-                    <KeyboardAvoidingView
-                        enabled={Platform.OS === CONST.PLATFORM.IOS}
-                        behavior={keyboardBehavior}
-                        keyboardVerticalOffset={keyboardOffset}
-                    >
-                        <PDFPasswordForm
-                            onSubmit={this.attemptPdfLoadWithPassword}
-                            isPasswordInvalid={this.state.isPasswordInvalid}
-                            shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
-                        />
-                    </KeyboardAvoidingView>
-                )}
-            </View>
-        );
-    }
-}
+const PDFView = props => (
+    <BasePDFViewNative
+        sourceURL={props.sourceURL}
+        style={props.style}
+    />
+);
 
 PDFView.propTypes = propTypes;
 PDFView.defaultProps = defaultProps;
+PDFView.displayName = 'PDFView';
 
 export default withWindowDimensions(PDFView);

From 18aa4949ee1f88d42a7b1820f2e97aebd1bc7fe7 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 21 Jun 2022 09:52:56 -1000
Subject: [PATCH 051/101] feat: pdf password form - moved server error message
 to directly above confirm button

---
 src/components/PDFView/PDFPasswordForm.js | 71 ++++++++++++-----------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 734c946dfc04..9e3579f91363 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -79,42 +79,43 @@ class PDFPasswordForm extends Component {
 
         return (
             <View style={containerStyles}>
-                <Text style={styles.mb4}>
-                    {this.props.translate('attachmentView.pdfPasswordFormLabel')}
-                </Text>
-                <TextInput
-                    label={this.props.translate('common.password')}
-                    autoComplete="off"
-                    autoCorrect={false}
-                    textContentType="password"
-                    onChangeText={this.updatePassword}
-                    returnKeyType="done"
-                    onSubmitEditing={this.submitPassword}
-                    errorText={this.state.validationErrorText}
-                    onBlur={this.validateOnBlur}
-                    autoFocus={this.props.shouldAutofocusPasswordField}
-                    secureTextEntry
-                />
-                {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
-                        <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                        <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                            <Text style={styles.mutedTextLabel}>
-                                {this.props.translate('attachmentView.passwordIncorrect')}
-                            </Text>
+                <View style={this.props.isSmallScreenWidth ? styles.flexGrow1 : {}}>
+                    <Text style={styles.mb4}>
+                        {this.props.translate('attachmentView.pdfPasswordFormLabel')}
+                    </Text>
+                    <TextInput
+                        label={this.props.translate('common.password')}
+                        autoComplete="off"
+                        autoCorrect={false}
+                        textContentType="password"
+                        onChangeText={this.updatePassword}
+                        returnKeyType="done"
+                        onSubmitEditing={this.submitPassword}
+                        errorText={this.state.validationErrorText}
+                        onBlur={this.validateOnBlur}
+                        autoFocus={this.props.shouldAutofocusPasswordField}
+                        secureTextEntry
+                    />
+                </View>
+                <View>
+                    {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.flexGrow1]}>
+                            <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                                <Text style={styles.mutedTextLabel}>
+                                    {this.props.translate('attachmentView.passwordIncorrect')}
+                                </Text>
+                            </View>
                         </View>
-                    </View>
-                )}
-                {this.props.isSmallScreenWidth && (
-                    <View style={styles.flexGrow1} />
-                )}
-                <Button
-                    text={this.props.translate('common.confirm')}
-                    onPress={this.submitPassword}
-                    style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
-                    isLoading={this.props.shouldShowLoadingIndicator}
-                    pressOnEnter
-                />
+                    )}
+                    <Button
+                        text={this.props.translate('common.confirm')}
+                        onPress={this.submitPassword}
+                        style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
+                        isLoading={this.props.shouldShowLoadingIndicator}
+                        pressOnEnter
+                    />
+                </View>
             </View>
         );
     }

From 55f4427949b2e83e71963620cf172b56da20b7f3 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 27 Jun 2022 10:27:03 -1000
Subject: [PATCH 052/101] feat: pdf password form - updated some imports
 accoring to reviewer request

---
 src/components/PDFView/index.ios.js    | 6 +++---
 src/components/PDFView/index.js        | 6 +++---
 src/components/PDFView/index.native.js | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index 7d8d98bf2dfb..f16a3e1ec54b 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import BasePDFViewNative from './BasePDFViewNative';
-import {propTypes, defaultProps} from './pdfViewPropTypes';
+import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 
 const PDFView = props => (
@@ -12,8 +12,8 @@ const PDFView = props => (
     />
 );
 
-PDFView.propTypes = propTypes;
-PDFView.defaultProps = defaultProps;
+PDFView.propTypes = pdfViewPropTypes.propTypes;
+PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 PDFView.displayName = 'PDFView';
 
 export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index eb39bbc3e87f..056b731fe6a1 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -8,7 +8,7 @@ import variables from '../../styles/variables';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
 import CONST from '../../CONST';
-import {propTypes, defaultProps} from './pdfViewPropTypes';
+import * as pdfViewPropTypes from './pdfViewPropTypes';
 
 class PDFView extends Component {
     constructor(props) {
@@ -128,7 +128,7 @@ class PDFView extends Component {
     }
 }
 
-PDFView.propTypes = propTypes;
-PDFView.defaultProps = defaultProps;
+PDFView.propTypes = pdfViewPropTypes.propTypes;
+PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 
 export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index 8926d1704552..bfad4d8a2f87 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import BasePDFViewNative from './BasePDFViewNative';
-import {propTypes, defaultProps} from './pdfViewPropTypes';
+import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 
 const PDFView = props => (
@@ -10,8 +10,8 @@ const PDFView = props => (
     />
 );
 
-PDFView.propTypes = propTypes;
-PDFView.defaultProps = defaultProps;
+PDFView.propTypes = pdfViewPropTypes.propTypes;
+PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 PDFView.displayName = 'PDFView';
 
 export default withWindowDimensions(PDFView);

From 0231d841ea991f0608876f0749ea6e1d2374ae2d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 28 Jun 2022 08:20:35 -1000
Subject: [PATCH 053/101] feat: pdf password form - added info message and link

---
 src/components/PDFView/PDFPasswordForm.js | 107 ++++++++++++++--------
 src/languages/en.js                       |   9 +-
 src/languages/es.js                       |   9 +-
 3 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 9e3579f91363..b03917a2a581 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -5,11 +5,13 @@ import {View} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import Button from '../Button';
 import Text from '../Text';
+import TextLink from '../TextLink';
 import TextInput from '../TextInput';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import colors from '../../styles/colors';
+import variables from '../../styles/variables';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -41,10 +43,12 @@ class PDFPasswordForm extends Component {
             password: '',
             validationErrorText: '',
             isEditingInProgress: true,
+            shouldShowInfoMessage: true,
         };
         this.submitPassword = this.submitPassword.bind(this);
         this.validateOnBlur = this.validateOnBlur.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
+        this.hideInfoMessage = this.hideInfoMessage.bind(this);
     }
 
     submitPassword() {
@@ -71,6 +75,10 @@ class PDFPasswordForm extends Component {
         });
     }
 
+    hideInfoMessage() {
+        this.setState({shouldShowInfoMessage: false});
+    }
+
     render() {
         // Use container styles appropriate for screen size.
         const containerStyles = this.props.isSmallScreenWidth
@@ -78,45 +86,68 @@ class PDFPasswordForm extends Component {
             : styles.pdfPasswordForm.wideScreen;
 
         return (
-            <View style={containerStyles}>
-                <View style={this.props.isSmallScreenWidth ? styles.flexGrow1 : {}}>
-                    <Text style={styles.mb4}>
-                        {this.props.translate('attachmentView.pdfPasswordFormLabel')}
-                    </Text>
-                    <TextInput
-                        label={this.props.translate('common.password')}
-                        autoComplete="off"
-                        autoCorrect={false}
-                        textContentType="password"
-                        onChangeText={this.updatePassword}
-                        returnKeyType="done"
-                        onSubmitEditing={this.submitPassword}
-                        errorText={this.state.validationErrorText}
-                        onBlur={this.validateOnBlur}
-                        autoFocus={this.props.shouldAutofocusPasswordField}
-                        secureTextEntry
-                    />
-                </View>
-                <View>
-                    {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.flexGrow1]}>
-                            <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                                <Text style={styles.mutedTextLabel}>
-                                    {this.props.translate('attachmentView.passwordIncorrect')}
-                                </Text>
-                            </View>
+            <>
+                {this.state.shouldShowInfoMessage ? (
+                    <View style={[containerStyles, styles.alignItemsCenter]}>
+                        <Icon
+                            src={Expensicons.EyeDisabled}
+                            width={variables.iconSizeSuperLarge}
+                            height={variables.iconSizeSuperLarge}
+                        />
+                        <Text style={[styles.h1, styles.mb3, styles.mt3]}>
+                            {this.props.translate('attachmentView.pdfPasswordForm.title')}
+                        </Text>
+                        <Text>{this.props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
+                        <Text>
+                            {this.props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+                            <TextLink onPress={this.hideInfoMessage} style={[styles.ml1, styles.mr1]}>
+                                {this.props.translate('attachmentView.pdfPasswordForm.linkText')}
+                            </TextLink>
+                            {this.props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+                        </Text>
+                    </View>
+                ) : (
+                    <View style={containerStyles}>
+                        <View style={this.props.isSmallScreenWidth ? styles.flexGrow1 : {}}>
+                            <Text style={styles.mb4}>
+                                {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
+                            </Text>
+                            <TextInput
+                                label={this.props.translate('common.password')}
+                                autoComplete="off"
+                                autoCorrect={false}
+                                textContentType="password"
+                                onChangeText={this.updatePassword}
+                                returnKeyType="done"
+                                onSubmitEditing={this.submitPassword}
+                                errorText={this.state.validationErrorText}
+                                onBlur={this.validateOnBlur}
+                                autoFocus={this.props.shouldAutofocusPasswordField}
+                                secureTextEntry
+                            />
+                        </View>
+                        <View>
+                            {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
+                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.flexGrow1]}>
+                                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                                    <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                                        <Text style={styles.mutedTextLabel}>
+                                            {this.props.translate('attachmentView.passwordIncorrect')}
+                                        </Text>
+                                    </View>
+                                </View>
+                            )}
+                            <Button
+                                text={this.props.translate('common.confirm')}
+                                onPress={this.submitPassword}
+                                style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
+                                isLoading={this.props.shouldShowLoadingIndicator}
+                                pressOnEnter
+                            />
                         </View>
-                    )}
-                    <Button
-                        text={this.props.translate('common.confirm')}
-                        onPress={this.submitPassword}
-                        style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
-                        isLoading={this.props.shouldShowLoadingIndicator}
-                        pressOnEnter
-                    />
-                </View>
-            </View>
+                    </View>
+                )}
+            </>
         );
     }
 }
diff --git a/src/languages/en.js b/src/languages/en.js
index 918976942043..d6569e66c180 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -571,9 +571,16 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',
-        pdfPasswordFormLabel: 'This PDF is password protected. Please enter the password to view it.',
         passwordRequired: 'Please enter a password',
         passwordIncorrect: 'Incorrect password. Please try again.',
+        pdfPasswordForm: {
+            title: 'Password protected PDF',
+            infoText: 'This PDF is password protected.',
+            beforeLinkText: 'Please',
+            linkText: 'enter the password',
+            afterLinkText: 'to view it.',
+            formLabel: 'This PDF is password protected. Please enter the password to view it.',
+        },
     },
     pronouns: {
         heHimHis: 'He/him',
diff --git a/src/languages/es.js b/src/languages/es.js
index 8438ff83896b..15a35fc07af5 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -571,9 +571,16 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
-        pdfPasswordFormLabel: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
         passwordRequired: 'Por favor, introduzca una contraseña',
         passwordIncorrect: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
+        pdfPasswordForm: {
+            title: 'PDF protegido por contraseña',
+            infoText: 'Este PDF está protegido por contraseña.',
+            beforeLinkText: 'Por favor',
+            linkText: 'introduzca la contraseña',
+            afterLinkText: 'para verlo.',
+            formLabel: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
+        },
     },
     pronouns: {
         heHimHis: 'Él',

From 09663344454d4f93bb9f2b921d719d9214f9ca69 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 28 Jun 2022 14:09:30 -1000
Subject: [PATCH 054/101] feat: pdf password form - refactored info message
 into separate compoment

---
 src/components/PDFView/PDFInfoMessage.js  |  77 ++++++++++++++++
 src/components/PDFView/PDFPasswordForm.js | 102 +++++++++-------------
 src/components/PDFView/index.js           |   2 +-
 src/languages/en.js                       |   2 +-
 src/languages/es.js                       |   2 +-
 src/styles/styles.js                      |   3 +-
 6 files changed, 122 insertions(+), 66 deletions(-)
 create mode 100644 src/components/PDFView/PDFInfoMessage.js

diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
new file mode 100644
index 000000000000..3eb32b26d305
--- /dev/null
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Text from '../Text';
+import TextLink from '../TextLink';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import styles from '../../styles/styles';
+import variables from '../../styles/variables';
+import compose from '../../libs/compose';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+
+const propTypes = {
+    /** Callback function to indicate that PDF password form should be shown */
+    onShowForm: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
+};
+
+const PDFInfoMessage = (props) => {
+    // Use container styles appropriate for screen size.
+    const containerStyles = props.isSmallScreenWidth
+        ? [styles.pdfPasswordForm.narrowScreen]
+        : [styles.pdfPasswordForm.wideScreen, styles.alignItemsCenter];
+
+    return (
+        <>
+            {props.isSmallScreenWidth ? (
+                <View style={containerStyles}>
+                    <Text>
+                        <Text style={styles.textLarge}>
+                            {`${props.translate('attachmentView.pdfPasswordForm.infoText')} `}
+                        </Text>
+                        <Text style={styles.textLarge}>
+                            {`${props.translate('attachmentView.pdfPasswordForm.beforeLinkText')} `}
+                        </Text>
+                        <TextLink onPress={props.onShowForm} style={styles.textLarge}>
+                            {`${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
+                        </TextLink>
+                        <Text style={styles.textLarge}>
+                            {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+                        </Text>
+                    </Text>
+                </View>
+            ) : (
+                <View style={containerStyles}>
+                    <Icon
+                        src={Expensicons.EyeDisabled}
+                        width={variables.iconSizeSuperLarge}
+                        height={variables.iconSizeSuperLarge}
+                    />
+                    <Text style={[styles.h1, styles.mb3, styles.mt3]}>
+                        {props.translate('attachmentView.pdfPasswordForm.title')}
+                    </Text>
+                    <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
+                    <Text>
+                        {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+                        <TextLink onPress={props.onShowForm}>
+                            {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
+                        </TextLink>
+                        {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+                    </Text>
+                </View>
+            )}
+        </>
+    );
+};
+
+PDFInfoMessage.propTypes = propTypes;
+PDFInfoMessage.displayName = 'PDFInfoMessage';
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(PDFInfoMessage);
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b03917a2a581..b5016786c727 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -5,13 +5,12 @@ import {View} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import Button from '../Button';
 import Text from '../Text';
-import TextLink from '../TextLink';
 import TextInput from '../TextInput';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import colors from '../../styles/colors';
-import variables from '../../styles/variables';
+import PDFInfoMessage from './PDFInfoMessage';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
@@ -43,12 +42,12 @@ class PDFPasswordForm extends Component {
             password: '',
             validationErrorText: '',
             isEditingInProgress: true,
-            shouldShowInfoMessage: true,
+            shouldShowForm: false,
         };
         this.submitPassword = this.submitPassword.bind(this);
         this.validateOnBlur = this.validateOnBlur.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
-        this.hideInfoMessage = this.hideInfoMessage.bind(this);
+        this.showForm = this.showForm.bind(this);
     }
 
     submitPassword() {
@@ -75,8 +74,8 @@ class PDFPasswordForm extends Component {
         });
     }
 
-    hideInfoMessage() {
-        this.setState({shouldShowInfoMessage: false});
+    showForm() {
+        this.setState({shouldShowForm: true});
     }
 
     render() {
@@ -87,65 +86,44 @@ class PDFPasswordForm extends Component {
 
         return (
             <>
-                {this.state.shouldShowInfoMessage ? (
-                    <View style={[containerStyles, styles.alignItemsCenter]}>
-                        <Icon
-                            src={Expensicons.EyeDisabled}
-                            width={variables.iconSizeSuperLarge}
-                            height={variables.iconSizeSuperLarge}
-                        />
-                        <Text style={[styles.h1, styles.mb3, styles.mt3]}>
-                            {this.props.translate('attachmentView.pdfPasswordForm.title')}
-                        </Text>
-                        <Text>{this.props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
-                        <Text>
-                            {this.props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
-                            <TextLink onPress={this.hideInfoMessage} style={[styles.ml1, styles.mr1]}>
-                                {this.props.translate('attachmentView.pdfPasswordForm.linkText')}
-                            </TextLink>
-                            {this.props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
-                        </Text>
-                    </View>
-                ) : (
+                {this.state.shouldShowForm ? (
                     <View style={containerStyles}>
-                        <View style={this.props.isSmallScreenWidth ? styles.flexGrow1 : {}}>
-                            <Text style={styles.mb4}>
-                                {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
-                            </Text>
-                            <TextInput
-                                label={this.props.translate('common.password')}
-                                autoComplete="off"
-                                autoCorrect={false}
-                                textContentType="password"
-                                onChangeText={this.updatePassword}
-                                returnKeyType="done"
-                                onSubmitEditing={this.submitPassword}
-                                errorText={this.state.validationErrorText}
-                                onBlur={this.validateOnBlur}
-                                autoFocus={this.props.shouldAutofocusPasswordField}
-                                secureTextEntry
-                            />
-                        </View>
-                        <View>
-                            {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
-                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3, styles.flexGrow1]}>
-                                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                                    <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                                        <Text style={styles.mutedTextLabel}>
-                                            {this.props.translate('attachmentView.passwordIncorrect')}
-                                        </Text>
-                                    </View>
+                        <Text style={styles.mb4}>
+                            {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
+                        </Text>
+                        <TextInput
+                            label={this.props.translate('common.password')}
+                            autoComplete="off"
+                            autoCorrect={false}
+                            textContentType="password"
+                            onChangeText={this.updatePassword}
+                            returnKeyType="done"
+                            onSubmitEditing={this.submitPassword}
+                            errorText={this.state.validationErrorText}
+                            onBlur={this.validateOnBlur}
+                            autoFocus={this.props.shouldAutofocusPasswordField}
+                            secureTextEntry
+                        />
+                        {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
+                                <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                                <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                                    <Text style={styles.mutedTextLabel}>
+                                        {this.props.translate('attachmentView.passwordIncorrect')}
+                                    </Text>
                                 </View>
-                            )}
-                            <Button
-                                text={this.props.translate('common.confirm')}
-                                onPress={this.submitPassword}
-                                style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
-                                isLoading={this.props.shouldShowLoadingIndicator}
-                                pressOnEnter
-                            />
-                        </View>
+                            </View>
+                        )}
+                        <Button
+                            text={this.props.translate('common.confirm')}
+                            onPress={this.submitPassword}
+                            style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
+                            isLoading={this.props.shouldShowLoadingIndicator}
+                            pressOnEnter
+                        />
                     </View>
+                ) : (
+                    <PDFInfoMessage onShowForm={this.showForm} />
                 )}
             </>
         );
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 056b731fe6a1..4543b2664411 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -87,7 +87,7 @@ class PDFView extends Component {
         // the PDF component.
         if (this.state.shouldRequestPassword) {
             innerContainerStyle.push(styles.invisible);
-            outerContainerStyle.push(styles.defaultModalContainer);
+            outerContainerStyle.push(styles.defaultModalContainer, styles.dFlex);
         }
 
         return (
diff --git a/src/languages/en.js b/src/languages/en.js
index d6569e66c180..9143723f88ea 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -579,7 +579,7 @@ export default {
             beforeLinkText: 'Please',
             linkText: 'enter the password',
             afterLinkText: 'to view it.',
-            formLabel: 'This PDF is password protected. Please enter the password to view it.',
+            formLabel: 'View PDF',
         },
     },
     pronouns: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 15a35fc07af5..c5995ea636bd 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -579,7 +579,7 @@ export default {
             beforeLinkText: 'Por favor',
             linkText: 'introduzca la contraseña',
             afterLinkText: 'para verlo.',
-            formLabel: 'Este PDF está protegido por contraseña. Por favor, introduzca la contraseña para verlo.',
+            formLabel: 'Ver PDF',
         },
     },
     pronouns: {
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7c23dcfd2271..bf8f676787a3 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1769,10 +1769,11 @@ const styles = {
             ...sizing.w100,
         },
         wideScreen: {
-            maxWidth: 350,
+            width: 350,
         },
         narrowScreen: {
             ...spacing.p5,
+            ...sizing.w100,
             ...sizing.h100,
         },
     },

From a0614284685fc757cc736c57cb7c437879fa835e Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 29 Jun 2022 13:31:07 -1000
Subject: [PATCH 055/101] feat: pdf password form - some refactoring for send
 button updates for android

---
 src/CONST.js                                |  5 ---
 src/components/PDFView/BasePDFViewNative.js | 44 +++++----------------
 src/components/PDFView/PDFPasswordForm.js   |  4 +-
 src/components/PDFView/index.android.js     | 30 ++++++++++++++
 src/components/PDFView/index.ios.js         | 19 ---------
 5 files changed, 41 insertions(+), 61 deletions(-)
 create mode 100644 src/components/PDFView/index.android.js
 delete mode 100644 src/components/PDFView/index.ios.js

diff --git a/src/CONST.js b/src/CONST.js
index e1477eef4d67..709911161b5d 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -732,11 +732,6 @@ const CONST = {
     MAX_COMMENT_LENGTH: 60000,
 
     PDF_PASSWORD_FORM: {
-        KEYBOARD_AVOIDING_VIEW: {
-            BEHAVIOR: 'padding',
-            KEYBOARD_VERTICAL_OFFSET: 85,
-        },
-
         // Constants for password-related error responses received from react-pdf.
         REACT_PDF_PASSWORD_RESPONSES: {
             NEED_PASSWORD: 1,
diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index d78c34594038..a566bae9ee8f 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -1,34 +1,24 @@
 import React, {Component} from 'react';
 import PDF from 'react-native-pdf';
-import {
-    KeyboardAvoidingView,
-    TouchableWithoutFeedback,
-    View,
-    Keyboard,
-} from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
-import CONST from '../../CONST';
 import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 
 const propTypes = {
     ...pdfViewPropTypes,
 
-    /** If keyboard should be dismissed before loading PDF */
-    dismissKeyboardBeforePdfLoad: PropTypes.bool,
-
-    /** If KeyboardAvoidingView is enabled */
-    enableKeyboardAvoidingView: PropTypes.bool,
+    /** Notify parent that a PDF load attempt is in progress */
+    onAttemptPdfLoad: PropTypes.func,
 };
 
 const defaultProps = {
     ...pdfViewDefaultProps,
-    dismissKeyboardBeforePdfLoad: true,
-    enableKeyboardAvoidingView: false,
+    onAttemptPdfLoad: () => {},
 };
 
 /**
@@ -99,12 +89,7 @@ class BasePDFViewNative extends Component {
      * @param {String} password Password submitted via PDFPasswordForm
      */
     attemptPdfLoadWithPassword(password) {
-        // On Android we need to close the keyboard before rendering the PDF.
-        // If the keyboard is open during PDF rendering then react-native-pdf
-        // scales the PDF view incorrectly.
-        if (this.props.dismissKeyboardBeforePdfLoad) {
-            Keyboard.dismiss();
-        }
+        this.props.onAttemptPdfLoad();
 
         // Render react-native-pdf/PDF so that it can validate the password.
         // Note that at this point in the password challenge, shouldRequestPassword is true.
@@ -151,9 +136,6 @@ class BasePDFViewNative extends Component {
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
             ? styles.pdfPasswordForm.nativeNarrowContainer : {};
 
-        const keyboardBehavior = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.BEHAVIOR;
-        const keyboardOffset = CONST.PDF_PASSWORD_FORM.KEYBOARD_AVOIDING_VIEW.KEYBOARD_VERTICAL_OFFSET;
-
         return (
             <View style={containerStyles}>
                 {this.state.shouldAttemptPdfLoad && (
@@ -169,17 +151,11 @@ class BasePDFViewNative extends Component {
                     </TouchableWithoutFeedback>
                 )}
                 {this.state.shouldRequestPassword && (
-                    <KeyboardAvoidingView
-                        enabled={this.props.enableKeyboardAvoidingView}
-                        behavior={keyboardBehavior}
-                        keyboardVerticalOffset={keyboardOffset}
-                    >
-                        <PDFPasswordForm
-                            onSubmit={this.attemptPdfLoadWithPassword}
-                            isPasswordInvalid={this.state.isPasswordInvalid}
-                            shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
-                        />
-                    </KeyboardAvoidingView>
+                    <PDFPasswordForm
+                        onSubmit={this.attemptPdfLoadWithPassword}
+                        isPasswordInvalid={this.state.isPasswordInvalid}
+                        shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
+                    />
                 )}
             </View>
         );
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b5016786c727..ae73d01c008c 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -2,7 +2,6 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import Button from '../Button';
 import Text from '../Text';
 import TextInput from '../TextInput';
@@ -117,7 +116,7 @@ class PDFPasswordForm extends Component {
                         <Button
                             text={this.props.translate('common.confirm')}
                             onPress={this.submitPassword}
-                            style={[styles.pt4, {paddingBottom: this.props.insets.bottom}]}
+                            style={styles.pt4}
                             isLoading={this.props.shouldShowLoadingIndicator}
                             pressOnEnter
                         />
@@ -136,5 +135,4 @@ PDFPasswordForm.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
     withLocalize,
-    withSafeAreaInsets,
 )(PDFPasswordForm);
diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
new file mode 100644
index 000000000000..74dfd2a5604f
--- /dev/null
+++ b/src/components/PDFView/index.android.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import {Keyboard} from 'react-native';
+import BasePDFViewNative from './BasePDFViewNative';
+import * as pdfViewPropTypes from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
+
+const PDFView = (props) => {
+    /**
+     * Hide keyboard before rendering PDF. On Android we need to close the keyboard
+     * before rendering the PDF. If the keyboard is open during PDF rendering then
+     * react-native-pdf scales the PDF view incorrectly.
+     */
+    const hideKeyboard = () => {
+        Keyboard.dismiss();
+    };
+
+    return (
+        <BasePDFViewNative
+            sourceURL={props.sourceURL}
+            style={props.style}
+            onAttemptPdfLoad={hideKeyboard}
+        />
+    );
+};
+
+PDFView.propTypes = pdfViewPropTypes.propTypes;
+PDFView.defaultProps = pdfViewPropTypes.defaultProps;
+PDFView.displayName = 'PDFView';
+
+export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
deleted file mode 100644
index f16a3e1ec54b..000000000000
--- a/src/components/PDFView/index.ios.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import BasePDFViewNative from './BasePDFViewNative';
-import * as pdfViewPropTypes from './pdfViewPropTypes';
-import withWindowDimensions from '../withWindowDimensions';
-
-const PDFView = props => (
-    <BasePDFViewNative
-        sourceURL={props.sourceURL}
-        style={props.style}
-        dismissKeyboardBeforePdfLoad={false}
-        enableKeyboardAvoidingView
-    />
-);
-
-PDFView.propTypes = pdfViewPropTypes.propTypes;
-PDFView.defaultProps = pdfViewPropTypes.defaultProps;
-PDFView.displayName = 'PDFView';
-
-export default withWindowDimensions(PDFView);

From 852806eef3f9a26b8ea52b2fc7bc4d5ef61f7feb Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 30 Jun 2022 08:59:18 -1000
Subject: [PATCH 056/101] feat: pdf password form - hide send-attachment button
 on android when keyboard open

---
 src/components/AttachmentModal.js           | 11 ++++--
 src/components/AttachmentView.js            |  5 +++
 src/components/PDFView/BasePDFViewNative.js |  1 +
 src/components/PDFView/PDFPasswordForm.js   |  8 +++++
 src/components/PDFView/index.android.js     | 40 ++++++++++++---------
 src/components/PDFView/pdfViewPropTypes.js  |  4 +++
 6 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 4bb62c44d0cc..31a345305679 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -75,6 +75,7 @@ class AttachmentModal extends PureComponent {
             file: null,
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
+            shouldHideConfirmButton: false,
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);
@@ -181,12 +182,18 @@ class AttachmentModal extends PureComponent {
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (
-                            <AttachmentView sourceURL={sourceURL} file={this.state.file} />
+                            <AttachmentView
+                                sourceURL={sourceURL}
+                                file={this.state.file}
+                                onAvoidKeyboard={shouldAvoid => this.setState({
+                                    shouldHideConfirmButton: shouldAvoid,
+                                })}
+                            />
                         )}
                     </View>
 
                     {/* If we have an onConfirm method show a confirmation button */}
-                    {this.props.onConfirm && (
+                    {this.props.onConfirm && !this.state.shouldHideConfirmButton && (
                         <Button
                             success
                             style={[styles.buttonConfirm]}
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index d783de4e0401..491cadbebfaf 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -28,6 +28,9 @@ const propTypes = {
     /** Flag to show the loading indicator */
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
+    /** Notify parent that the UI should be modified to accommodate keyboard */
+    onAvoidKeyboard: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -37,6 +40,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
+    onAvoidKeyboard: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -48,6 +52,7 @@ const AttachmentView = (props) => {
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
+                onAvoidKeyboard={props.onAvoidKeyboard}
             />
         );
     }
diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index a566bae9ee8f..8629748aee30 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -155,6 +155,7 @@ class BasePDFViewNative extends Component {
                         onSubmit={this.attemptPdfLoadWithPassword}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
+                        onAvoidKeyboard={this.props.onAvoidKeyboard}
                     />
                 )}
             </View>
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index ae73d01c008c..59dff299b61d 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -24,6 +24,9 @@ const propTypes = {
     /** If loading indicator should be shown */
     shouldShowLoadingIndicator: PropTypes.bool,
 
+    /** Notify parent that the UI should be updated to avoid keyboard */
+    onAvoidKeyboard: PropTypes.func,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -32,6 +35,7 @@ const defaultProps = {
     isPasswordInvalid: false,
     shouldAutofocusPasswordField: false,
     shouldShowLoadingIndicator: false,
+    onAvoidKeyboard: () => {},
 };
 
 class PDFPasswordForm extends Component {
@@ -65,6 +69,9 @@ class PDFPasswordForm extends Component {
     }
 
     validateOnBlur() {
+        // Notify parent that keyboard is no longer visible (on mobile devices).
+        this.props.onAvoidKeyboard(false);
+
         if (!_.isEmpty(this.state.password)) {
             return;
         }
@@ -100,6 +107,7 @@ class PDFPasswordForm extends Component {
                             onSubmitEditing={this.submitPassword}
                             errorText={this.state.validationErrorText}
                             onBlur={this.validateOnBlur}
+                            onFocus={() => this.props.onAvoidKeyboard(true)}
                             autoFocus={this.props.shouldAutofocusPasswordField}
                             secureTextEntry
                         />
diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
index 74dfd2a5604f..12e7a63252b3 100644
--- a/src/components/PDFView/index.android.js
+++ b/src/components/PDFView/index.android.js
@@ -1,30 +1,36 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {Keyboard} from 'react-native';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
-import withWindowDimensions from '../withWindowDimensions';
 
-const PDFView = (props) => {
+class PDFView extends Component {
+    constructor(props) {
+        super(props);
+        this.hideKeyboard = this.hideKeyboard.bind(this);
+    }
+
     /**
      * Hide keyboard before rendering PDF. On Android we need to close the keyboard
-     * before rendering the PDF. If the keyboard is open during PDF rendering then
-     * react-native-pdf scales the PDF view incorrectly.
+     * before rendering the PDF. If the keyboard is open during PDF rendering, then
+     * react-native-pdf doesn't correctly scale the PDF view.
      */
-    const hideKeyboard = () => {
+    hideKeyboard() {
         Keyboard.dismiss();
-    };
+    }
 
-    return (
-        <BasePDFViewNative
-            sourceURL={props.sourceURL}
-            style={props.style}
-            onAttemptPdfLoad={hideKeyboard}
-        />
-    );
-};
+    render() {
+        return (
+            <BasePDFViewNative
+                sourceURL={this.props.sourceURL}
+                style={this.props.style}
+                onAttemptPdfLoad={this.hideKeyboard}
+                onAvoidKeyboard={this.props.onAvoidKeyboard}
+            />
+        );
+    }
+}
 
 PDFView.propTypes = pdfViewPropTypes.propTypes;
 PDFView.defaultProps = pdfViewPropTypes.defaultProps;
-PDFView.displayName = 'PDFView';
 
-export default withWindowDimensions(PDFView);
+export default PDFView;
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index bfca2187b838..8d3036b1322a 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -9,12 +9,16 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
+    /** Notify parent that the UI should be updated to avoid keyboard */
+    onAvoidKeyboard: PropTypes.func,
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     sourceURL: '',
     style: {},
+    onAvoidKeyboard: () => {},
 };
 
 export {propTypes, defaultProps};

From 5cc5da3945fe5b0e6b1a1da31c2c052dd732aa7e Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 30 Jun 2022 09:29:58 -1000
Subject: [PATCH 057/101] feat: pdf password form - added window dimensions to
 android component

---
 src/components/PDFView/index.android.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
index 12e7a63252b3..15f2ec945396 100644
--- a/src/components/PDFView/index.android.js
+++ b/src/components/PDFView/index.android.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {Keyboard} from 'react-native';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
 
 class PDFView extends Component {
     constructor(props) {
@@ -33,4 +34,4 @@ class PDFView extends Component {
 PDFView.propTypes = pdfViewPropTypes.propTypes;
 PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 
-export default PDFView;
+export default withWindowDimensions(PDFView);

From 60f2daf425a97ff7052c56ff0c87193d0e0b514d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 30 Jun 2022 10:33:03 -1000
Subject: [PATCH 058/101] feat: pdf password form - hide send-attachment button
 on android-web when keyboard open

---
 src/components/PDFView/index.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 4543b2664411..3ee5e7425967 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -2,13 +2,14 @@ import _ from 'underscore';
 import React, {Component} from 'react';
 import {View, Dimensions} from 'react-native';
 import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import styles from '../../styles/styles';
-import withWindowDimensions from '../withWindowDimensions';
 import variables from '../../styles/variables';
-import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import PDFPasswordForm from './PDFPasswordForm';
+import getOperatingSystem from '../../libs/getOperatingSystem';
 import CONST from '../../CONST';
+import PDFPasswordForm from './PDFPasswordForm';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
+import withWindowDimensions from '../withWindowDimensions';
 
 class PDFView extends Component {
     constructor(props) {
@@ -22,6 +23,7 @@ class PDFView extends Component {
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoad = this.attemptPdfLoad.bind(this);
+        this.avoidKeyboard = this.avoidKeyboard.bind(this);
     }
 
     /**
@@ -73,6 +75,19 @@ class PDFView extends Component {
         this.onPasswordCallback(password);
     }
 
+    /**
+     * On Android browsers notify parent that the UI should be updated to
+     * accommodate keyboard.
+     *
+     * @param {Boolean} shouldAvoidKeyboard
+     */
+    avoidKeyboard(shouldAvoidKeyboard) {
+        if (getOperatingSystem() !== CONST.OS.ANDROID) {
+            return;
+        }
+        this.props.onAvoidKeyboard(shouldAvoidKeyboard);
+    }
+
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
@@ -121,6 +136,7 @@ class PDFView extends Component {
                         onSubmit={this.attemptPdfLoad}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
+                        onAvoidKeyboard={this.avoidKeyboard}
                     />
                 )}
             </View>

From cba2a309d88f648ac5d515dc9921ae89c2a5f2fe Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 30 Jun 2022 16:10:17 -1000
Subject: [PATCH 059/101] feat: pdf password form - fixed send-attachment
 button show/hide on android

---
 src/components/PDFView/PDFPasswordForm.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 59dff299b61d..58274cdd6ef0 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -48,13 +48,14 @@ class PDFPasswordForm extends Component {
             shouldShowForm: false,
         };
         this.submitPassword = this.submitPassword.bind(this);
+        this.validate = this.validate.bind(this);
         this.validateOnBlur = this.validateOnBlur.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
         this.showForm = this.showForm.bind(this);
     }
 
     submitPassword() {
-        this.validateOnBlur();
+        this.validate();
         if (!_.isEmpty(this.state.password)) {
             this.setState({isEditingInProgress: false});
             this.props.onSubmit(this.state.password);
@@ -69,9 +70,13 @@ class PDFPasswordForm extends Component {
     }
 
     validateOnBlur() {
-        // Notify parent that keyboard is no longer visible (on mobile devices).
+        // Notify parent that keyboard is no longer visible (for mobile devices).
         this.props.onAvoidKeyboard(false);
 
+        this.validate();
+    }
+
+    validate() {
         if (!_.isEmpty(this.state.password)) {
             return;
         }

From e13ef40383941c18b2a0c1cc9d210ec762450ce9 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 5 Jul 2022 10:52:08 -1000
Subject: [PATCH 060/101] feat: pdf password form - refactored error message
 handling

---
 src/components/PDFView/BasePDFViewNative.js |  1 +
 src/components/PDFView/PDFPasswordForm.js   | 15 +++++++++++----
 src/components/PDFView/index.js             |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 8629748aee30..21c6cab6e6c0 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -153,6 +153,7 @@ class BasePDFViewNative extends Component {
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
                         onSubmit={this.attemptPdfLoadWithPassword}
+                        onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
                         onAvoidKeyboard={this.props.onAvoidKeyboard}
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 58274cdd6ef0..d68e672e39a0 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -27,6 +27,12 @@ const propTypes = {
     /** Notify parent that the UI should be updated to avoid keyboard */
     onAvoidKeyboard: PropTypes.func,
 
+    /** Notify parent that the password form has been submitted */
+    onSubmit: PropTypes.func,
+
+    /** Notify parent that the password has been updated/edited */
+    onPasswordUpdated: PropTypes.func,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -36,6 +42,8 @@ const defaultProps = {
     shouldAutofocusPasswordField: false,
     shouldShowLoadingIndicator: false,
     onAvoidKeyboard: () => {},
+    onSubmit: () => {},
+    onPasswordUpdated: () => {},
 };
 
 class PDFPasswordForm extends Component {
@@ -44,7 +52,6 @@ class PDFPasswordForm extends Component {
         this.state = {
             password: '',
             validationErrorText: '',
-            isEditingInProgress: true,
             shouldShowForm: false,
         };
         this.submitPassword = this.submitPassword.bind(this);
@@ -57,16 +64,16 @@ class PDFPasswordForm extends Component {
     submitPassword() {
         this.validate();
         if (!_.isEmpty(this.state.password)) {
-            this.setState({isEditingInProgress: false});
             this.props.onSubmit(this.state.password);
         }
     }
 
     updatePassword(password) {
+        this.props.onPasswordUpdated(password);
         if (!_.isEmpty(password)) {
             this.setState({validationErrorText: ''});
         }
-        this.setState({password, isEditingInProgress: true});
+        this.setState({password});
     }
 
     validateOnBlur() {
@@ -116,7 +123,7 @@ class PDFPasswordForm extends Component {
                             autoFocus={this.props.shouldAutofocusPasswordField}
                             secureTextEntry
                         />
-                        {!this.state.isEditingInProgress && this.props.isPasswordInvalid && (
+                        {this.props.isPasswordInvalid && (
                             <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
                                 <Icon src={Expensicons.Exclamation} fill={colors.red} />
                                 <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 3ee5e7425967..54f4b70c291c 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -134,6 +134,7 @@ class PDFView extends Component {
                 {this.state.shouldRequestPassword && (
                     <PDFPasswordForm
                         onSubmit={this.attemptPdfLoad}
+                        onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
                         onAvoidKeyboard={this.avoidKeyboard}

From 4e971460f0f355f0771538a95716e5eac7a4d304 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 5 Jul 2022 11:09:25 -1000
Subject: [PATCH 061/101] feat: pdf password form - removed platform-dependent
 code for send button show/hide on mweb

---
 src/components/PDFView/index.js | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 54f4b70c291c..51b01c459746 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -5,7 +5,6 @@ import {Document, Page} from 'react-pdf/dist/esm/entry.webpack';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
-import getOperatingSystem from '../../libs/getOperatingSystem';
 import CONST from '../../CONST';
 import PDFPasswordForm from './PDFPasswordForm';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
@@ -23,7 +22,6 @@ class PDFView extends Component {
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoad = this.attemptPdfLoad.bind(this);
-        this.avoidKeyboard = this.avoidKeyboard.bind(this);
     }
 
     /**
@@ -75,19 +73,6 @@ class PDFView extends Component {
         this.onPasswordCallback(password);
     }
 
-    /**
-     * On Android browsers notify parent that the UI should be updated to
-     * accommodate keyboard.
-     *
-     * @param {Boolean} shouldAvoidKeyboard
-     */
-    avoidKeyboard(shouldAvoidKeyboard) {
-        if (getOperatingSystem() !== CONST.OS.ANDROID) {
-            return;
-        }
-        this.props.onAvoidKeyboard(shouldAvoidKeyboard);
-    }
-
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
@@ -137,7 +122,7 @@ class PDFView extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
-                        onAvoidKeyboard={this.avoidKeyboard}
+                        onAvoidKeyboard={this.props.onAvoidKeyboard}
                     />
                 )}
             </View>

From 410529a53c29c364b373855d4761c735b01343e8 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 11 Jul 2022 13:04:04 -1000
Subject: [PATCH 062/101] feat: pdf password form - updated spanish
 translations

---
 src/languages/es.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index c5995ea636bd..e618e7ff08b6 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -571,13 +571,13 @@ export default {
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
-        passwordRequired: 'Por favor, introduzca una contraseña',
-        passwordIncorrect: 'Contraseña incorrecta. Por favor inténtalo de nuevo.',
+        passwordRequired: 'Por favor introduce tu contraseña',
+        passwordIncorrect: 'Contraseña incorrecta. Por favor intenta de nuevo.',
         pdfPasswordForm: {
-            title: 'PDF protegido por contraseña',
-            infoText: 'Este PDF está protegido por contraseña.',
+            title: 'PDF protegido con contraseña',
+            infoText: 'Este PDF esta protegido con contraseña.',
             beforeLinkText: 'Por favor',
-            linkText: 'introduzca la contraseña',
+            linkText: 'introduce la contraseña',
             afterLinkText: 'para verlo.',
             formLabel: 'Ver PDF',
         },

From 87b65a2edf345476acf33bb2d62fd1e2abd1f50d Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 11 Jul 2022 13:59:11 -1000
Subject: [PATCH 063/101] feat: pdf password form - moved most of the styles
 into the components

---
 src/components/PDFView/BasePDFViewNative.js | 2 +-
 src/components/PDFView/PDFInfoMessage.js    | 3 +--
 src/components/PDFView/PDFPasswordForm.js   | 3 +--
 src/styles/styles.js                        | 8 --------
 4 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 21c6cab6e6c0..8b85c0b06389 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -134,7 +134,7 @@ class BasePDFViewNative extends Component {
         // For small screens force the container view to take up the full width when
         // displaying the password form.
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
-            ? styles.pdfPasswordForm.nativeNarrowContainer : {};
+            ? styles.w100 : {};
 
         return (
             <View style={containerStyles}>
diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index 3eb32b26d305..f6c44950502c 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -20,9 +20,8 @@ const propTypes = {
 };
 
 const PDFInfoMessage = (props) => {
-    // Use container styles appropriate for screen size.
     const containerStyles = props.isSmallScreenWidth
-        ? [styles.pdfPasswordForm.narrowScreen]
+        ? [styles.p5, styles.w100, styles.h100]
         : [styles.pdfPasswordForm.wideScreen, styles.alignItemsCenter];
 
     return (
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index d68e672e39a0..15f3412bb560 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -97,9 +97,8 @@ class PDFPasswordForm extends Component {
     }
 
     render() {
-        // Use container styles appropriate for screen size.
         const containerStyles = this.props.isSmallScreenWidth
-            ? styles.pdfPasswordForm.narrowScreen
+            ? [styles.p5, styles.w100, styles.h100]
             : styles.pdfPasswordForm.wideScreen;
 
         return (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cfc39ced3252..964ecaf41f52 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1765,17 +1765,9 @@ const styles = {
     },
 
     pdfPasswordForm: {
-        nativeNarrowContainer: {
-            ...sizing.w100,
-        },
         wideScreen: {
             width: 350,
         },
-        narrowScreen: {
-            ...spacing.p5,
-            ...sizing.w100,
-            ...sizing.h100,
-        },
     },
 
     modalCenterContentContainer: {

From a0a28cda015be10e6525a80f0a00148a87186353 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 11 Jul 2022 15:58:29 -1000
Subject: [PATCH 064/101] feat: pdf password form - fixed bug related to send
 button display on large screens

---
 src/components/PDFView/index.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 51b01c459746..ba3e636c6a8b 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -22,6 +22,7 @@ class PDFView extends Component {
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoad = this.attemptPdfLoad.bind(this);
+        this.avoidKeyboardOnSmallScreens = this.avoidKeyboardOnSmallScreens.bind(this);
     }
 
     /**
@@ -73,6 +74,19 @@ class PDFView extends Component {
         this.onPasswordCallback(password);
     }
 
+    /**
+     * On small screens notify parent that the UI should be updated to
+     * accommodate the keyboard.
+     *
+     * @param {Boolean} shouldAvoid If true update UI to accommodate keyboard
+     */
+    avoidKeyboardOnSmallScreens(shouldAvoid) {
+        if (!this.props.isSmallScreenWidth) {
+            return;
+        }
+        this.props.onAvoidKeyboard(shouldAvoid);
+    }
+
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = (pdfContainerWidth <= variables.pdfPageMaxWidth)
@@ -122,7 +136,7 @@ class PDFView extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
-                        onAvoidKeyboard={this.props.onAvoidKeyboard}
+                        onAvoidKeyboard={this.avoidKeyboardOnSmallScreens}
                     />
                 )}
             </View>

From 87cee06455dd9452cf30b6bcf4663dae8200f476 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 20 Jul 2022 10:18:27 -1000
Subject: [PATCH 065/101] feat: pdf password form - fixed failed pdf load error
 message rendering

---
 src/components/PDFView/index.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index ba3e636c6a8b..cbc9481fe52b 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -93,23 +93,28 @@ class PDFView extends Component {
             ? pdfContainerWidth : variables.pdfPageMaxWidth;
         const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
 
-        const outerContainerStyle = [styles.PDFView, this.props.style];
-        const innerContainerStyle = [styles.h100];
+        const outerContainerStyle = [
+            styles.w100,
+            styles.h100,
+            styles.dFlex,
+            styles.justifyContentCenter,
+            styles.alignItemsCenter,
+        ];
 
-        // If we're requesting a password then we need to set the background to
-        // defaultModalContainer color (white) and hide - but still render -
+        const pdfContainerStyle = [styles.PDFView, this.props.style];
+
+        // If we're requesting a password then we need to hide - but still render -
         // the PDF component.
         if (this.state.shouldRequestPassword) {
-            innerContainerStyle.push(styles.invisible);
-            outerContainerStyle.push(styles.defaultModalContainer, styles.dFlex);
+            pdfContainerStyle.push(styles.invisible);
         }
 
         return (
-            <View
-                style={outerContainerStyle}
-                onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
-            >
-                <View style={innerContainerStyle}>
+            <View style={outerContainerStyle}>
+                <View
+                    style={pdfContainerStyle}
+                    onLayout={event => this.setState({windowWidth: event.nativeEvent.layout.width})}
+                >
                     <Document
                         loading={<FullScreenLoadingIndicator />}
                         file={this.props.sourceURL}

From 7323b02b303dc2ab351dff1fc08a2b3c35cd01c0 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 21 Jul 2022 16:11:02 -1000
Subject: [PATCH 066/101] feat: pdf password form - updated protected pdf info
 message for mobile

---
 src/components/PDFView/PDFInfoMessage.js | 75 +++++++-----------------
 1 file changed, 21 insertions(+), 54 deletions(-)

diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index f6c44950502c..5d583db40ea5 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -7,70 +7,37 @@ import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import variables from '../../styles/variables';
-import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
     /** Callback function to indicate that PDF password form should be shown */
     onShowForm: PropTypes.func.isRequired,
 
     ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
 };
 
-const PDFInfoMessage = (props) => {
-    const containerStyles = props.isSmallScreenWidth
-        ? [styles.p5, styles.w100, styles.h100]
-        : [styles.pdfPasswordForm.wideScreen, styles.alignItemsCenter];
-
-    return (
-        <>
-            {props.isSmallScreenWidth ? (
-                <View style={containerStyles}>
-                    <Text>
-                        <Text style={styles.textLarge}>
-                            {`${props.translate('attachmentView.pdfPasswordForm.infoText')} `}
-                        </Text>
-                        <Text style={styles.textLarge}>
-                            {`${props.translate('attachmentView.pdfPasswordForm.beforeLinkText')} `}
-                        </Text>
-                        <TextLink onPress={props.onShowForm} style={styles.textLarge}>
-                            {`${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
-                        </TextLink>
-                        <Text style={styles.textLarge}>
-                            {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
-                        </Text>
-                    </Text>
-                </View>
-            ) : (
-                <View style={containerStyles}>
-                    <Icon
-                        src={Expensicons.EyeDisabled}
-                        width={variables.iconSizeSuperLarge}
-                        height={variables.iconSizeSuperLarge}
-                    />
-                    <Text style={[styles.h1, styles.mb3, styles.mt3]}>
-                        {props.translate('attachmentView.pdfPasswordForm.title')}
-                    </Text>
-                    <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
-                    <Text>
-                        {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
-                        <TextLink onPress={props.onShowForm}>
-                            {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
-                        </TextLink>
-                        {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
-                    </Text>
-                </View>
-            )}
-        </>
-    );
-};
+const PDFInfoMessage = props => (
+    <View style={styles.alignItemsCenter}>
+        <Icon
+            src={Expensicons.EyeDisabled}
+            width={variables.iconSizeSuperLarge}
+            height={variables.iconSizeSuperLarge}
+        />
+        <Text style={[styles.h1, styles.mb3, styles.mt3]}>
+            {props.translate('attachmentView.pdfPasswordForm.title')}
+        </Text>
+        <Text>{props.translate('attachmentView.pdfPasswordForm.infoText')}</Text>
+        <Text>
+            {props.translate('attachmentView.pdfPasswordForm.beforeLinkText')}
+            <TextLink onPress={props.onShowForm}>
+                {` ${props.translate('attachmentView.pdfPasswordForm.linkText')} `}
+            </TextLink>
+            {props.translate('attachmentView.pdfPasswordForm.afterLinkText')}
+        </Text>
+    </View>
+);
 
 PDFInfoMessage.propTypes = propTypes;
 PDFInfoMessage.displayName = 'PDFInfoMessage';
 
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(PDFInfoMessage);
+export default withLocalize(PDFInfoMessage);

From 85205f1f23a47fb6eb85c9360c0a395391df3202 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 21 Jul 2022 18:12:49 -1000
Subject: [PATCH 067/101] feat: pdf password form - vertically centered pdf
 password form on mobile

---
 src/components/PDFView/PDFPasswordForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 15f3412bb560..b3a76ab0a05e 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -98,7 +98,7 @@ class PDFPasswordForm extends Component {
 
     render() {
         const containerStyles = this.props.isSmallScreenWidth
-            ? [styles.p5, styles.w100, styles.h100]
+            ? [styles.p5, styles.w100]
             : styles.pdfPasswordForm.wideScreen;
 
         return (

From fd520cbedb49976217858c8e126fd8634d3f889b Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 21 Jul 2022 18:54:07 -1000
Subject: [PATCH 068/101] feat: pdf password form - added keyboard avoidance
 for ios

---
 src/CONST.js                                     |  1 +
 src/components/PDFView/BasePDFViewNative.js      | 16 +++++++++++++---
 .../PDFView/{index.native.js => index.ios.js}    |  1 +
 3 files changed, 15 insertions(+), 3 deletions(-)
 rename src/components/PDFView/{index.native.js => index.ios.js} (94%)

diff --git a/src/CONST.js b/src/CONST.js
index 283651135dfa..6878672e28c9 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -743,6 +743,7 @@ const CONST = {
             NEED_PASSWORD: 1,
             INCORRECT_PASSWORD: 2,
         },
+        AVOID_KEYBOARD_DISPLACEMENT: 100,
     },
 };
 
diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 8b85c0b06389..ebb7dd84b43d 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -1,9 +1,10 @@
 import React, {Component} from 'react';
+import {TouchableWithoutFeedback, KeyboardAvoidingView} from 'react-native';
 import PDF from 'react-native-pdf';
-import {TouchableWithoutFeedback, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
+import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
 import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
@@ -14,11 +15,15 @@ const propTypes = {
 
     /** Notify parent that a PDF load attempt is in progress */
     onAttemptPdfLoad: PropTypes.func,
+
+    /** If keyboard avoidance should be enabled */
+    shouldAvoidKeyboard: PropTypes.bool,
 };
 
 const defaultProps = {
     ...pdfViewDefaultProps,
     onAttemptPdfLoad: () => {},
+    shouldAvoidKeyboard: false,
 };
 
 /**
@@ -137,7 +142,12 @@ class BasePDFViewNative extends Component {
             ? styles.w100 : {};
 
         return (
-            <View style={containerStyles}>
+            <KeyboardAvoidingView
+                enabled={this.props.shouldAvoidKeyboard}
+                style={containerStyles}
+                behavior="position"
+                keyboardVerticalOffset={CONST.PDF_PASSWORD_FORM.AVOID_KEYBOARD_DISPLACEMENT}
+            >
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
@@ -159,7 +169,7 @@ class BasePDFViewNative extends Component {
                         onAvoidKeyboard={this.props.onAvoidKeyboard}
                     />
                 )}
-            </View>
+            </KeyboardAvoidingView>
         );
     }
 }
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.ios.js
similarity index 94%
rename from src/components/PDFView/index.native.js
rename to src/components/PDFView/index.ios.js
index bfad4d8a2f87..5735d2e83d56 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.ios.js
@@ -7,6 +7,7 @@ const PDFView = props => (
     <BasePDFViewNative
         sourceURL={props.sourceURL}
         style={props.style}
+        shouldAvoidKeyboard
     />
 );
 

From dda3801558467bfbecaf2318673c228a6496fc7a Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 21 Jul 2022 19:29:02 -1000
Subject: [PATCH 069/101] feat: pdf password form - disabled hiding of invalid
 password message on pdf load attempts

---
 src/components/PDFView/BasePDFViewNative.js | 1 -
 src/components/PDFView/index.js             | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index ebb7dd84b43d..5f4f4f1d608c 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -103,7 +103,6 @@ class BasePDFViewNative extends Component {
             password,
             shouldAttemptPdfLoad: true,
             shouldShowLoadingIndicator: true,
-            isPasswordInvalid: false,
         });
     }
 
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index cbc9481fe52b..fbe5ab879d4a 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -70,7 +70,6 @@ class PDFView extends Component {
      * @param {String} password Password to send via callback to react-pdf
      */
     attemptPdfLoad(password) {
-        this.setState({isPasswordInvalid: false});
         this.onPasswordCallback(password);
     }
 

From 8d3d0cf1fbdeaa1361df1487986d90735efee67c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 22 Jul 2022 14:03:02 -1000
Subject: [PATCH 070/101] feat: pdf password form - moved state detection into
 android-specific code

---
 src/components/PDFView/index.android.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
index 15f2ec945396..73130bb42936 100644
--- a/src/components/PDFView/index.android.js
+++ b/src/components/PDFView/index.android.js
@@ -2,7 +2,9 @@ import React, {Component} from 'react';
 import {Keyboard} from 'react-native';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
+import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
+import withKeyboardState from '../withKeyboardState';
 
 class PDFView extends Component {
     constructor(props) {
@@ -10,6 +12,12 @@ class PDFView extends Component {
         this.hideKeyboard = this.hideKeyboard.bind(this);
     }
 
+    componentDidUpdate() {
+        // Alert the parent component that it may be necessary to adjust the UI
+        // to accommodate the keyboard.
+        this.props.onAvoidKeyboard(this.props.isShown);
+    }
+
     /**
      * Hide keyboard before rendering PDF. On Android we need to close the keyboard
      * before rendering the PDF. If the keyboard is open during PDF rendering, then
@@ -25,7 +33,6 @@ class PDFView extends Component {
                 sourceURL={this.props.sourceURL}
                 style={this.props.style}
                 onAttemptPdfLoad={this.hideKeyboard}
-                onAvoidKeyboard={this.props.onAvoidKeyboard}
             />
         );
     }
@@ -34,4 +41,7 @@ class PDFView extends Component {
 PDFView.propTypes = pdfViewPropTypes.propTypes;
 PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 
-export default withWindowDimensions(PDFView);
+export default compose(
+    withWindowDimensions,
+    withKeyboardState,
+)(PDFView);

From 8016af8e2b194499e5cf9a2a8f64a48955884670 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 22 Jul 2022 17:07:29 -1000
Subject: [PATCH 071/101] feat: pdf password form - renamed a style

---
 src/components/PDFView/PDFPasswordForm.js | 2 +-
 src/styles/styles.js                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b3a76ab0a05e..fa7a70a242a7 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -99,7 +99,7 @@ class PDFPasswordForm extends Component {
     render() {
         const containerStyles = this.props.isSmallScreenWidth
             ? [styles.p5, styles.w100]
-            : styles.pdfPasswordForm.wideScreen;
+            : styles.pdfPasswordForm.wideScreenWidth;
 
         return (
             <>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d491118ea8b6..7545d3ddbf29 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1767,7 +1767,7 @@ const styles = {
     },
 
     pdfPasswordForm: {
-        wideScreen: {
+        wideScreenWidth: {
             width: 350,
         },
     },

From c55e6e4e279db7653b1bf1138ab89282075cdbad Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 22 Jul 2022 17:19:47 -1000
Subject: [PATCH 072/101] feat: pdf password form - moved
 keyboard-avoiding-view component into ios code

---
 src/CONST.js                                |  5 ++-
 src/components/PDFView/BasePDFViewNative.js | 17 ++--------
 src/components/PDFView/index.ios.js         | 35 ++++++++++++++++-----
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 6878672e28c9..12f1cc596779 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -743,7 +743,10 @@ const CONST = {
             NEED_PASSWORD: 1,
             INCORRECT_PASSWORD: 2,
         },
-        AVOID_KEYBOARD_DISPLACEMENT: 100,
+        KEYBOARD_VERTICAL_OFFSET: {
+            DEFAULT: 150,
+            SMALL_SCREEN: 100,
+        },
     },
 };
 
diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 5f4f4f1d608c..c4aa64003999 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -1,10 +1,9 @@
 import React, {Component} from 'react';
-import {TouchableWithoutFeedback, KeyboardAvoidingView} from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import PDFPasswordForm from './PDFPasswordForm';
 import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
@@ -15,15 +14,11 @@ const propTypes = {
 
     /** Notify parent that a PDF load attempt is in progress */
     onAttemptPdfLoad: PropTypes.func,
-
-    /** If keyboard avoidance should be enabled */
-    shouldAvoidKeyboard: PropTypes.bool,
 };
 
 const defaultProps = {
     ...pdfViewDefaultProps,
     onAttemptPdfLoad: () => {},
-    shouldAvoidKeyboard: false,
 };
 
 /**
@@ -141,12 +136,7 @@ class BasePDFViewNative extends Component {
             ? styles.w100 : {};
 
         return (
-            <KeyboardAvoidingView
-                enabled={this.props.shouldAvoidKeyboard}
-                style={containerStyles}
-                behavior="position"
-                keyboardVerticalOffset={CONST.PDF_PASSWORD_FORM.AVOID_KEYBOARD_DISPLACEMENT}
-            >
+            <View style={containerStyles}>
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
@@ -165,10 +155,9 @@ class BasePDFViewNative extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
-                        onAvoidKeyboard={this.props.onAvoidKeyboard}
                     />
                 )}
-            </KeyboardAvoidingView>
+            </View>
         );
     }
 }
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index 5735d2e83d56..bac71b6b240d 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -1,15 +1,36 @@
 import React from 'react';
+import {KeyboardAvoidingView} from 'react-native';
+import CONST from '../../CONST';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
+import styles from '../../styles/styles';
 
-const PDFView = props => (
-    <BasePDFViewNative
-        sourceURL={props.sourceURL}
-        style={props.style}
-        shouldAvoidKeyboard
-    />
-);
+const PDFView = (props) => {
+    const keyboardVerticalOffset = props.isSmallScreenWidth
+        ? CONST.PDF_PASSWORD_FORM.KEYBOARD_VERTICAL_OFFSET.SMALL_SCREEN
+        : CONST.PDF_PASSWORD_FORM.KEYBOARD_VERTICAL_OFFSET.DEFAULT;
+
+    const keyboardAvoidingViewStyles = [
+        styles.alignItemsCenter,
+        styles.justifyContentCenter,
+        styles.w100,
+    ];
+
+    return (
+        <KeyboardAvoidingView
+            style={keyboardAvoidingViewStyles}
+            contentContainerStyle={keyboardAvoidingViewStyles}
+            behavior="position"
+            keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+            <BasePDFViewNative
+                sourceURL={props.sourceURL}
+                style={[props.style, styles.w100]}
+            />
+        </KeyboardAvoidingView>
+    );
+};
 
 PDFView.propTypes = pdfViewPropTypes.propTypes;
 PDFView.defaultProps = pdfViewPropTypes.defaultProps;

From 723804620c7e62eab4be2ad6ac9e8a046254b452 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 22 Jul 2022 18:43:29 -1000
Subject: [PATCH 073/101] feat: pdf password form - added scroll view

---
 src/components/PDFView/PDFPasswordForm.js | 70 ++++++++++++-----------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index fa7a70a242a7..89b09b0170bf 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import Button from '../Button';
 import Text from '../Text';
 import TextInput from '../TextInput';
@@ -105,40 +105,42 @@ class PDFPasswordForm extends Component {
             <>
                 {this.state.shouldShowForm ? (
                     <View style={containerStyles}>
-                        <Text style={styles.mb4}>
-                            {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
-                        </Text>
-                        <TextInput
-                            label={this.props.translate('common.password')}
-                            autoComplete="off"
-                            autoCorrect={false}
-                            textContentType="password"
-                            onChangeText={this.updatePassword}
-                            returnKeyType="done"
-                            onSubmitEditing={this.submitPassword}
-                            errorText={this.state.validationErrorText}
-                            onBlur={this.validateOnBlur}
-                            onFocus={() => this.props.onAvoidKeyboard(true)}
-                            autoFocus={this.props.shouldAutofocusPasswordField}
-                            secureTextEntry
-                        />
-                        {this.props.isPasswordInvalid && (
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
-                                <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                                <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                                    <Text style={styles.mutedTextLabel}>
-                                        {this.props.translate('attachmentView.passwordIncorrect')}
-                                    </Text>
+                        <ScrollView keyboardShouldPersistTaps="handled">
+                            <Text style={styles.mb4}>
+                                {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
+                            </Text>
+                            <TextInput
+                                label={this.props.translate('common.password')}
+                                autoComplete="off"
+                                autoCorrect={false}
+                                textContentType="password"
+                                onChangeText={this.updatePassword}
+                                returnKeyType="done"
+                                onSubmitEditing={this.submitPassword}
+                                errorText={this.state.validationErrorText}
+                                onBlur={this.validateOnBlur}
+                                onFocus={() => this.props.onAvoidKeyboard(true)}
+                                autoFocus={this.props.shouldAutofocusPasswordField}
+                                secureTextEntry
+                            />
+                            {this.props.isPasswordInvalid && (
+                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
+                                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                                    <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                                        <Text style={styles.mutedTextLabel}>
+                                            {this.props.translate('attachmentView.passwordIncorrect')}
+                                        </Text>
+                                    </View>
                                 </View>
-                            </View>
-                        )}
-                        <Button
-                            text={this.props.translate('common.confirm')}
-                            onPress={this.submitPassword}
-                            style={styles.pt4}
-                            isLoading={this.props.shouldShowLoadingIndicator}
-                            pressOnEnter
-                        />
+                            )}
+                            <Button
+                                text={this.props.translate('common.confirm')}
+                                onPress={this.submitPassword}
+                                style={styles.pt4}
+                                isLoading={this.props.shouldShowLoadingIndicator}
+                                pressOnEnter
+                            />
+                        </ScrollView>
                     </View>
                 ) : (
                     <PDFInfoMessage onShowForm={this.showForm} />

From 03326bbce66251767c1aa240bd5e79cd1ff4027e Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Fri, 22 Jul 2022 20:07:28 -1000
Subject: [PATCH 074/101] feat: pdf password form - refactored send button
 hide/show to use screen height changes on web

---
 src/components/PDFView/PDFPasswordForm.js | 19 +++----------------
 src/components/PDFView/index.js           | 18 ++++++++++++------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 89b09b0170bf..14cee51802a5 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -24,9 +24,6 @@ const propTypes = {
     /** If loading indicator should be shown */
     shouldShowLoadingIndicator: PropTypes.bool,
 
-    /** Notify parent that the UI should be updated to avoid keyboard */
-    onAvoidKeyboard: PropTypes.func,
-
     /** Notify parent that the password form has been submitted */
     onSubmit: PropTypes.func,
 
@@ -41,7 +38,6 @@ const defaultProps = {
     isPasswordInvalid: false,
     shouldAutofocusPasswordField: false,
     shouldShowLoadingIndicator: false,
-    onAvoidKeyboard: () => {},
     onSubmit: () => {},
     onPasswordUpdated: () => {},
 };
@@ -56,7 +52,6 @@ class PDFPasswordForm extends Component {
         };
         this.submitPassword = this.submitPassword.bind(this);
         this.validate = this.validate.bind(this);
-        this.validateOnBlur = this.validateOnBlur.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
         this.showForm = this.showForm.bind(this);
     }
@@ -76,13 +71,6 @@ class PDFPasswordForm extends Component {
         this.setState({password});
     }
 
-    validateOnBlur() {
-        // Notify parent that keyboard is no longer visible (for mobile devices).
-        this.props.onAvoidKeyboard(false);
-
-        this.validate();
-    }
-
     validate() {
         if (!_.isEmpty(this.state.password)) {
             return;
@@ -97,14 +85,14 @@ class PDFPasswordForm extends Component {
     }
 
     render() {
-        const containerStyles = this.props.isSmallScreenWidth
+        const containerStyle = this.props.isSmallScreenWidth
             ? [styles.p5, styles.w100]
             : styles.pdfPasswordForm.wideScreenWidth;
 
         return (
             <>
                 {this.state.shouldShowForm ? (
-                    <View style={containerStyles}>
+                    <View style={containerStyle}>
                         <ScrollView keyboardShouldPersistTaps="handled">
                             <Text style={styles.mb4}>
                                 {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
@@ -118,8 +106,7 @@ class PDFPasswordForm extends Component {
                                 returnKeyType="done"
                                 onSubmitEditing={this.submitPassword}
                                 errorText={this.state.validationErrorText}
-                                onBlur={this.validateOnBlur}
-                                onFocus={() => this.props.onAvoidKeyboard(true)}
+                                onBlur={this.validate}
                                 autoFocus={this.props.shouldAutofocusPasswordField}
                                 secureTextEntry
                             />
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index fbe5ab879d4a..48f97c6c9eb5 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -25,6 +25,15 @@ class PDFView extends Component {
         this.avoidKeyboardOnSmallScreens = this.avoidKeyboardOnSmallScreens.bind(this);
     }
 
+    componentDidUpdate(prevProps) {
+        // If window height has changed update keyboard state and alert parent.
+        if (this.props.windowHeight < prevProps.windowHeight) {
+            this.avoidKeyboardOnSmallScreens(true);
+        } else if (this.props.windowHeight > prevProps.windowHeight) {
+            this.avoidKeyboardOnSmallScreens(false);
+        }
+    }
+
     /**
      * Upon successful document load, set the number of pages on PDF,
      * hide/reset PDF password form, and notify parent component that
@@ -100,13 +109,11 @@ class PDFView extends Component {
             styles.alignItemsCenter,
         ];
 
-        const pdfContainerStyle = [styles.PDFView, this.props.style];
-
         // If we're requesting a password then we need to hide - but still render -
         // the PDF component.
-        if (this.state.shouldRequestPassword) {
-            pdfContainerStyle.push(styles.invisible);
-        }
+        const pdfContainerStyle = this.state.shouldRequestPassword
+            ? [styles.PDFView, this.props.style, styles.invisible]
+            : [styles.PDFView, this.props.style];
 
         return (
             <View style={outerContainerStyle}>
@@ -140,7 +147,6 @@ class PDFView extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
-                        onAvoidKeyboard={this.avoidKeyboardOnSmallScreens}
                     />
                 )}
             </View>

From 8ea4180f540835a1922056619a7aacecbd2daf6c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sat, 23 Jul 2022 16:48:13 -1000
Subject: [PATCH 075/101] feat: pdf password form - added a little bottom
 padding on ios native

---
 src/components/PDFView/index.ios.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index bac71b6b240d..6948e443ed72 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -15,6 +15,7 @@ const PDFView = (props) => {
         styles.alignItemsCenter,
         styles.justifyContentCenter,
         styles.w100,
+        styles.pb4,
     ];
 
     return (

From f0bdd2a8112a3b54a90661158073f29abfbe600c Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 1 Aug 2022 10:03:56 -1000
Subject: [PATCH 076/101] feat: pdf password form - minor refactoring of form
 validation

---
 src/components/PDFView/PDFPasswordForm.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 14cee51802a5..72774c01c82a 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -57,10 +57,10 @@ class PDFPasswordForm extends Component {
     }
 
     submitPassword() {
-        this.validate();
-        if (!_.isEmpty(this.state.password)) {
-            this.props.onSubmit(this.state.password);
+        if (!this.validate()) {
+            return;
         }
+        this.props.onSubmit(this.state.password);
     }
 
     updatePassword(password) {
@@ -73,11 +73,12 @@ class PDFPasswordForm extends Component {
 
     validate() {
         if (!_.isEmpty(this.state.password)) {
-            return;
+            return true;
         }
         this.setState({
             validationErrorText: this.props.translate('attachmentView.passwordRequired'),
         });
+        return false;
     }
 
     showForm() {

From 0e6c5e2456ed21c72f1d0a903e85be8268dda647 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 1 Aug 2022 10:09:03 -1000
Subject: [PATCH 077/101] feat: pdf password form - minor refactoring of form
 validation message

---
 src/components/PDFView/PDFPasswordForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 72774c01c82a..66c95b5cc5bb 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -65,7 +65,7 @@ class PDFPasswordForm extends Component {
 
     updatePassword(password) {
         this.props.onPasswordUpdated(password);
-        if (!_.isEmpty(password)) {
+        if (!_.isEmpty(password) && this.state.validationErrorText) {
             this.setState({validationErrorText: ''});
         }
         this.setState({password});

From 6f621406b4b9957d1208ef8dae822b6450d73421 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 1 Aug 2022 11:20:30 -1000
Subject: [PATCH 078/101] feat: pdf password form - removed space above send
 button on ios

---
 src/components/PDFView/index.ios.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index 6948e443ed72..bac71b6b240d 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -15,7 +15,6 @@ const PDFView = (props) => {
         styles.alignItemsCenter,
         styles.justifyContentCenter,
         styles.w100,
-        styles.pb4,
     ];
 
     return (

From 6760361463e5478d9fe0c4fdc6cc4a5471939333 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 1 Aug 2022 11:36:16 -1000
Subject: [PATCH 079/101] feat: pdf password form - removed unnecessary
 keyboard closure on android

---
 src/components/PDFView/index.android.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
index 73130bb42936..3137e7c45e03 100644
--- a/src/components/PDFView/index.android.js
+++ b/src/components/PDFView/index.android.js
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import {Keyboard} from 'react-native';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import compose from '../../libs/compose';
@@ -7,32 +6,17 @@ import withWindowDimensions from '../withWindowDimensions';
 import withKeyboardState from '../withKeyboardState';
 
 class PDFView extends Component {
-    constructor(props) {
-        super(props);
-        this.hideKeyboard = this.hideKeyboard.bind(this);
-    }
-
     componentDidUpdate() {
         // Alert the parent component that it may be necessary to adjust the UI
         // to accommodate the keyboard.
         this.props.onAvoidKeyboard(this.props.isShown);
     }
 
-    /**
-     * Hide keyboard before rendering PDF. On Android we need to close the keyboard
-     * before rendering the PDF. If the keyboard is open during PDF rendering, then
-     * react-native-pdf doesn't correctly scale the PDF view.
-     */
-    hideKeyboard() {
-        Keyboard.dismiss();
-    }
-
     render() {
         return (
             <BasePDFViewNative
                 sourceURL={this.props.sourceURL}
                 style={this.props.style}
-                onAttemptPdfLoad={this.hideKeyboard}
             />
         );
     }

From eebce487db232ccd9aa3fc3ed8112101beafb6a1 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 07:29:00 -1000
Subject: [PATCH 080/101] feat: pdf password form - added code changes provided
 by parasharrajat

---
 src/components/PDFView/BasePDFViewNative.js |  2 +-
 src/components/PDFView/PDFPasswordForm.js   | 82 +++++++++++----------
 src/components/PDFView/index.ios.js         | 36 +++------
 src/components/PDFView/index.js             |  1 -
 4 files changed, 53 insertions(+), 68 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index c4aa64003999..4df86d84eab5 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -136,7 +136,7 @@ class BasePDFViewNative extends Component {
             ? styles.w100 : {};
 
         return (
-            <View style={containerStyles}>
+            <View style={[containerStyles, styles.flex1]}>
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 66c95b5cc5bb..4e3752042aa7 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -87,51 +87,55 @@ class PDFPasswordForm extends Component {
 
     render() {
         const containerStyle = this.props.isSmallScreenWidth
-            ? [styles.p5, styles.w100]
+            ? [styles.flex1, styles.w100]
             : styles.pdfPasswordForm.wideScreenWidth;
 
         return (
             <>
                 {this.state.shouldShowForm ? (
-                    <View style={containerStyle}>
-                        <ScrollView keyboardShouldPersistTaps="handled">
-                            <Text style={styles.mb4}>
-                                {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
-                            </Text>
-                            <TextInput
-                                label={this.props.translate('common.password')}
-                                autoComplete="off"
-                                autoCorrect={false}
-                                textContentType="password"
-                                onChangeText={this.updatePassword}
-                                returnKeyType="done"
-                                onSubmitEditing={this.submitPassword}
-                                errorText={this.state.validationErrorText}
-                                onBlur={this.validate}
-                                autoFocus={this.props.shouldAutofocusPasswordField}
-                                secureTextEntry
-                            />
-                            {this.props.isPasswordInvalid && (
-                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
-                                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                                    <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                                        <Text style={styles.mutedTextLabel}>
-                                            {this.props.translate('attachmentView.passwordIncorrect')}
-                                        </Text>
-                                    </View>
-                                </View>
-                            )}
-                            <Button
-                                text={this.props.translate('common.confirm')}
-                                onPress={this.submitPassword}
-                                style={styles.pt4}
-                                isLoading={this.props.shouldShowLoadingIndicator}
-                                pressOnEnter
-                            />
-                        </ScrollView>
-                    </View>
+                    <ScrollView
+                        keyboardShouldPersistTaps="handled"
+                        style={containerStyle}
+                        contentContainerStyle={[styles.ph5, styles.flex1, styles.justifyContentCenter]}
+                    >
+                        <Text style={styles.mb4}>
+                            {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
+                        </Text>
+                        <TextInput
+                            label={this.props.translate('common.password')}
+                            autoComplete="off"
+                            autoCorrect={false}
+                            textContentType="password"
+                            onChangeText={this.updatePassword}
+                            returnKeyType="done"
+                            onSubmitEditing={this.submitPassword}
+                            errorText={this.state.validationErrorText}
+                            onBlur={this.validate}
+                            autoFocus={this.props.shouldAutofocusPasswordField}
+                            secureTextEntry
+                        />
+                        {this.props.isPasswordInvalid && (
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt3]}>
+                            <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                                <Text style={styles.mutedTextLabel}>
+                                    {this.props.translate('attachmentView.passwordIncorrect')}
+                                </Text>
+                            </View>
+                        </View>
+                        )}
+                        <Button
+                            text={this.props.translate('common.confirm')}
+                            onPress={this.submitPassword}
+                            style={styles.pt4}
+                            isLoading={this.props.shouldShowLoadingIndicator}
+                            pressOnEnter
+                        />
+                    </ScrollView>
                 ) : (
-                    <PDFInfoMessage onShowForm={this.showForm} />
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <PDFInfoMessage onShowForm={this.showForm} />
+                    </View>
                 )}
             </>
         );
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index bac71b6b240d..9ea9be0d3956 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -1,36 +1,18 @@
 import React from 'react';
-import {KeyboardAvoidingView} from 'react-native';
-import CONST from '../../CONST';
+import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import styles from '../../styles/styles';
 
-const PDFView = (props) => {
-    const keyboardVerticalOffset = props.isSmallScreenWidth
-        ? CONST.PDF_PASSWORD_FORM.KEYBOARD_VERTICAL_OFFSET.SMALL_SCREEN
-        : CONST.PDF_PASSWORD_FORM.KEYBOARD_VERTICAL_OFFSET.DEFAULT;
-
-    const keyboardAvoidingViewStyles = [
-        styles.alignItemsCenter,
-        styles.justifyContentCenter,
-        styles.w100,
-    ];
-
-    return (
-        <KeyboardAvoidingView
-            style={keyboardAvoidingViewStyles}
-            contentContainerStyle={keyboardAvoidingViewStyles}
-            behavior="position"
-            keyboardVerticalOffset={keyboardVerticalOffset}
-        >
-            <BasePDFViewNative
-                sourceURL={props.sourceURL}
-                style={[props.style, styles.w100]}
-            />
-        </KeyboardAvoidingView>
-    );
-};
+const PDFView = props => (
+    <KeyboardAvoidingView>
+        <BasePDFViewNative
+            sourceURL={props.sourceURL}
+            style={[props.style, styles.w100]}
+        />
+    </KeyboardAvoidingView>
+);
 
 PDFView.propTypes = pdfViewPropTypes.propTypes;
 PDFView.defaultProps = pdfViewPropTypes.defaultProps;
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 48f97c6c9eb5..6ca8673dcb84 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -104,7 +104,6 @@ class PDFView extends Component {
         const outerContainerStyle = [
             styles.w100,
             styles.h100,
-            styles.dFlex,
             styles.justifyContentCenter,
             styles.alignItemsCenter,
         ];

From 68b2224939a8ee1af8982a7bcaf35eb68c19a3a4 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 07:58:32 -1000
Subject: [PATCH 081/101] feat: pdf password form - added view to resolve weird
 ios text movement when keyboard opens/closes

---
 src/components/PDFView/PDFPasswordForm.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 4e3752042aa7..d1ce87e8be3b 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -98,9 +98,11 @@ class PDFPasswordForm extends Component {
                         style={containerStyle}
                         contentContainerStyle={[styles.ph5, styles.flex1, styles.justifyContentCenter]}
                     >
-                        <Text style={styles.mb4}>
-                            {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
-                        </Text>
+                        <View style={styles.mb4}>
+                            <Text>
+                                {this.props.translate('attachmentView.pdfPasswordForm.formLabel')}
+                            </Text>
+                        </View>
                         <TextInput
                             label={this.props.translate('common.password')}
                             autoComplete="off"

From 3a04ab7ca68b7dd5f06d91a044f9f9e7a14fdf97 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 09:11:41 -1000
Subject: [PATCH 082/101] feat: pdf password form - centered form on ipad

---
 src/components/PDFView/BasePDFViewNative.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 4df86d84eab5..9dfc6c6577ca 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -125,18 +125,17 @@ class BasePDFViewNative extends Component {
         // If we haven't yet successfully validated the password and loaded the PDF,
         // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
         // is positioned nicely. We're specifically hiding it because we still need to render
-        // the PDF so that it can validate the password.
+        // the PDF component so that it can validate the password.
         if (this.state.shouldRequestPassword) {
             pdfStyles.push(styles.invisible);
         }
 
-        // For small screens force the container view to take up the full width when
-        // displaying the password form.
         const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth
-            ? styles.w100 : {};
+            ? [styles.w100, styles.flex1]
+            : [styles.alignItemsCenter, styles.flex1];
 
         return (
-            <View style={[containerStyles, styles.flex1]}>
+            <View style={containerStyles}>
                 {this.state.shouldAttemptPdfLoad && (
                     <TouchableWithoutFeedback style={touchableStyles}>
                         <PDF

From e803aaf59a197da60faf0333d3ee8fa2be530034 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 10:55:53 -1000
Subject: [PATCH 083/101] feat: pdf password form - removed extra padding from
 wide screens when send button visible

---
 src/components/AttachmentModal.js | 7 ++++++-
 src/styles/utilities/spacing.js   | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bcc710c113f8..6652b59a33a5 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -211,9 +211,14 @@ class AttachmentModal extends PureComponent {
             ? addEncryptedAuthTokenToURL(this.state.sourceURL)
             : this.state.sourceURL;
 
+        // When the send button is visible we don't need bottom padding on the attachment view.
+        const attachmentViewPaddingStyles = this.props.onConfirm
+            ? [styles.pl5, styles.pr5, styles.pt5]
+            : styles.p5;
+
         const attachmentViewStyles = this.props.isSmallScreenWidth || this.props.isMediumScreenWidth
             ? [styles.imageModalImageCenterContainer]
-            : [styles.imageModalImageCenterContainer, styles.p5];
+            : [styles.imageModalImageCenterContainer, attachmentViewPaddingStyles];
 
         const {fileName, fileExtension} = this.splitExtensionFromFileName(this.props.originalFileName || lodashGet(this.state, 'file.name', ''));
 
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 6ba2830de7bf..09b211111001 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -318,6 +318,10 @@ export default {
         paddingTop: 16,
     },
 
+    pt5: {
+        paddingTop: 20,
+    },
+
     pb1: {
         paddingBottom: 4,
     },

From 5fdbc3e8d23a92ee65826032cbac1de87e4f9e1a Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 13:15:58 -1000
Subject: [PATCH 084/101] Merge branch 'relocated KeyboardAvoidingView to
 resolve pdf rendering issue

---
 src/components/PDFView/BasePDFViewNative.js | 15 +++++++++------
 src/components/PDFView/index.ios.js         | 11 ++++-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/BasePDFViewNative.js
index 9dfc6c6577ca..589542face8d 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/BasePDFViewNative.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import PDFPasswordForm from './PDFPasswordForm';
 import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
@@ -149,12 +150,14 @@ class BasePDFViewNative extends Component {
                     </TouchableWithoutFeedback>
                 )}
                 {this.state.shouldRequestPassword && (
-                    <PDFPasswordForm
-                        onSubmit={this.attemptPdfLoadWithPassword}
-                        onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
-                        isPasswordInvalid={this.state.isPasswordInvalid}
-                        shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
-                    />
+                    <KeyboardAvoidingView>
+                        <PDFPasswordForm
+                            onSubmit={this.attemptPdfLoadWithPassword}
+                            onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
+                            isPasswordInvalid={this.state.isPasswordInvalid}
+                            shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator}
+                        />
+                    </KeyboardAvoidingView>
                 )}
             </View>
         );
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
index 9ea9be0d3956..5700438bdcfb 100644
--- a/src/components/PDFView/index.ios.js
+++ b/src/components/PDFView/index.ios.js
@@ -1,17 +1,14 @@
 import React from 'react';
-import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import BasePDFViewNative from './BasePDFViewNative';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import withWindowDimensions from '../withWindowDimensions';
 import styles from '../../styles/styles';
 
 const PDFView = props => (
-    <KeyboardAvoidingView>
-        <BasePDFViewNative
-            sourceURL={props.sourceURL}
-            style={[props.style, styles.w100]}
-        />
-    </KeyboardAvoidingView>
+    <BasePDFViewNative
+        sourceURL={props.sourceURL}
+        style={[props.style, styles.w100]}
+    />
 );
 
 PDFView.propTypes = pdfViewPropTypes.propTypes;

From 8d7803d460e7ee63c364e2c4b7da9fb90b78336b Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 4 Aug 2022 18:17:25 -1000
Subject: [PATCH 085/101] feat: pdf password form - removed defunct constant

---
 src/CONST.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index db9400f8d507..542ab46b6eae 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -784,10 +784,6 @@ const CONST = {
             NEED_PASSWORD: 1,
             INCORRECT_PASSWORD: 2,
         },
-        KEYBOARD_VERTICAL_OFFSET: {
-            DEFAULT: 150,
-            SMALL_SCREEN: 100,
-        },
     },
 };
 

From 4942ae32cd8e28f64e9b5a337f968606605a0ed4 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 9 Aug 2022 10:48:39 -1000
Subject: [PATCH 086/101] feat: pdf password form - added fade in/out to send
 button

---
 src/components/AttachmentModal.js | 57 ++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 6652b59a33a5..0a4df84e40be 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {View} from 'react-native';
+import {View, Animated} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import lodashExtend from 'lodash/extend';
@@ -78,12 +78,14 @@ class AttachmentModal extends PureComponent {
             file: null,
             sourceURL: props.sourceURL,
             modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
-            shouldHideConfirmButton: false,
+            isConfirmButtonDisabled: false,
+            confirmButtonFadeAnimation: new Animated.Value(1),
         };
 
         this.submitAndClose = this.submitAndClose.bind(this);
         this.closeConfirmModal = this.closeConfirmModal.bind(this);
         this.validateAndDisplayFileToUpload = this.validateAndDisplayFileToUpload.bind(this);
+        this.updateConfirmButtonVisibility = this.updateConfirmButtonVisibility.bind(this);
     }
 
     /**
@@ -124,8 +126,9 @@ class AttachmentModal extends PureComponent {
      * Execute the onConfirm callback and close the modal.
      */
     submitAndClose() {
-        // If the modal has already been closed, don't allow another submission
-        if (!this.state.isModalOpen) {
+        // If the modal has already been closed or the confirm button is disabled
+        // do not submit.
+        if (!this.state.isModalOpen || this.state.isConfirmButtonDisabled) {
             return;
         }
 
@@ -206,12 +209,31 @@ class AttachmentModal extends PureComponent {
         }
     }
 
+    /**
+     * In order to gracefully hide/show the confirm button on Android when the keyboard
+     * opens/closes, apply an animation to fade the confirm button out/in. And since
+     * we're only updating the opacity of the confirm button, we must also conditionally
+     * disable it.
+     *
+     * @param {Boolean} shouldFadeOut If true, fade out confirm button. Otherwise fade in.
+     */
+    updateConfirmButtonVisibility(shouldFadeOut) {
+        this.setState({isConfirmButtonDisabled: shouldFadeOut});
+        const toValue = shouldFadeOut ? 0 : 1;
+
+        Animated.timing(this.state.confirmButtonFadeAnimation, {
+            toValue,
+            duration: 100,
+            useNativeDriver: true,
+        }).start();
+    }
+
     render() {
         const sourceURL = this.props.isAuthTokenRequired
             ? addEncryptedAuthTokenToURL(this.state.sourceURL)
             : this.state.sourceURL;
 
-        // When the send button is visible we don't need bottom padding on the attachment view.
+        // When the confirm button is visible we don't need bottom padding on the attachment view.
         const attachmentViewPaddingStyles = this.props.onConfirm
             ? [styles.pl5, styles.pr5, styles.pt5]
             : styles.p5;
@@ -255,23 +277,24 @@ class AttachmentModal extends PureComponent {
                             <AttachmentView
                                 sourceURL={sourceURL}
                                 file={this.state.file}
-                                onAvoidKeyboard={shouldAvoid => this.setState({
-                                    shouldHideConfirmButton: shouldAvoid,
-                                })}
+                                onAvoidKeyboard={this.updateConfirmButtonVisibility}
                             />
                         )}
                     </View>
 
                     {/* If we have an onConfirm method show a confirmation button */}
-                    {this.props.onConfirm && !this.state.shouldHideConfirmButton && (
-                        <Button
-                            success
-                            style={[styles.buttonConfirm]}
-                            textStyles={[styles.buttonConfirmText]}
-                            text={this.props.translate('common.send')}
-                            onPress={this.submitAndClose}
-                            pressOnEnter
-                        />
+                    {this.props.onConfirm && (
+                        <Animated.View style={{opacity: this.state.confirmButtonFadeAnimation}}>
+                            <Button
+                                success
+                                style={[styles.buttonConfirm]}
+                                textStyles={[styles.buttonConfirmText]}
+                                text={this.props.translate('common.send')}
+                                onPress={this.submitAndClose}
+                                disabled={this.state.isConfirmButtonDisabled}
+                                pressOnEnter
+                            />
+                        </Animated.View>
                     )}
                 </Modal>
 

From ddb55ff0f4fe2a2906848a01976a839ae7993e16 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 10 Aug 2022 12:34:40 -1000
Subject: [PATCH 087/101] feat: pdf password form - refactored confirm button
 animation style

---
 src/components/AttachmentModal.js |  3 ++-
 src/styles/StyleUtils.js          | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 0a4df84e40be..8ebb6dd43c07 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -9,6 +9,7 @@ import CONST from '../CONST';
 import Modal from './Modal';
 import AttachmentView from './AttachmentView';
 import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import themeColors from '../styles/themes/default';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
@@ -284,7 +285,7 @@ class AttachmentModal extends PureComponent {
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Animated.View style={{opacity: this.state.confirmButtonFadeAnimation}}>
+                        <Animated.View style={StyleUtils.getAttachmentModalConfirmButtonAnimationStyle(this.state.confirmButtonFadeAnimation)}>
                             <Button
                                 success
                                 style={[styles.buttonConfirm]}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 38f5a412a0f3..b7589bfba18f 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -483,6 +483,18 @@ function convertToLTR(text) {
     return `\u2066${text}`;
 }
 
+/**
+ * Return fade in/out animation style for confirm button in AttachmentModal.
+ *
+ * @param {Animated.Value} fadeAnimation
+ * @returns {Object}
+ */
+function getAttachmentModalConfirmButtonAnimationStyle(fadeAnimation) {
+    return {
+        opacity: fadeAnimation,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarStyle,
@@ -513,4 +525,5 @@ export {
     getPaddingLeft,
     getReportListAnimationStyle,
     convertToLTR,
+    getAttachmentModalConfirmButtonAnimationStyle,
 };

From 8ea2bedafea013adeda8e09a507e97d5bfd61c67 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 10 Aug 2022 15:19:55 -1000
Subject: [PATCH 088/101] feat: pdf password form - refactored animation styles

---
 src/components/AttachmentModal.js          |  2 +-
 src/pages/home/report/ReportActionsList.js |  2 +-
 src/styles/StyleUtils.js                   | 19 +++----------------
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 8ebb6dd43c07..3f4bbecfe8b5 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -285,7 +285,7 @@ class AttachmentModal extends PureComponent {
 
                     {/* If we have an onConfirm method show a confirmation button */}
                     {this.props.onConfirm && (
-                        <Animated.View style={StyleUtils.getAttachmentModalConfirmButtonAnimationStyle(this.state.confirmButtonFadeAnimation)}>
+                        <Animated.View style={StyleUtils.fade(this.state.confirmButtonFadeAnimation)}>
                             <Button
                                 success
                                 style={[styles.buttonConfirm]}
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 5ef4b3603808..1498bb5bf179 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -174,7 +174,7 @@ class ReportActionsList extends React.Component {
         const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.report.newMarkerSequenceNumber : undefined;
         const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report);
         return (
-            <Animated.View style={StyleUtils.getReportListAnimationStyle(this.state.fadeInAnimation)}>
+            <Animated.View style={[StyleUtils.fade(this.state.fadeInAnimation), styles.flex1]}>
                 <InvertedFlatList
                     ref={ReportScrollManager.flatListRef}
                     data={this.props.sortedReportActions}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index b7589bfba18f..c4bcbc88a869 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -461,18 +461,6 @@ function getPaddingLeft(paddingLeft) {
     };
 }
 
-/**
- * Get animated opacity for report chat list
- * @param {Animated.Value} fadeInAnimation
- * @returns {Object}
- */
-function getReportListAnimationStyle(fadeInAnimation) {
-    return {
-        ...styles.flex1,
-        opacity: fadeInAnimation,
-    };
-}
-
 /**
  * Android only - convert RTL text to a LTR text using Unicode controls.
  * https://www.w3.org/International/questions/qa-bidi-unicode-controls
@@ -484,12 +472,12 @@ function convertToLTR(text) {
 }
 
 /**
- * Return fade in/out animation style for confirm button in AttachmentModal.
+ * Return style for opacity animation.
  *
  * @param {Animated.Value} fadeAnimation
  * @returns {Object}
  */
-function getAttachmentModalConfirmButtonAnimationStyle(fadeAnimation) {
+function fade(fadeAnimation) {
     return {
         opacity: fadeAnimation,
     };
@@ -523,7 +511,6 @@ export {
     parseStyleAsArray,
     combineStyles,
     getPaddingLeft,
-    getReportListAnimationStyle,
     convertToLTR,
-    getAttachmentModalConfirmButtonAnimationStyle,
+    fade,
 };

From 5d8662ec18a101238fa637b14c9bc8a513172afa Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Thu, 11 Aug 2022 09:03:00 -1000
Subject: [PATCH 089/101] feat: pdf password form - added send button fade to
 ios native

---
 src/components/PDFView/index.android.js       | 31 ----------------
 src/components/PDFView/index.ios.js           | 18 ---------
 .../{BasePDFViewNative.js => index.native.js} | 37 +++++++++----------
 3 files changed, 17 insertions(+), 69 deletions(-)
 delete mode 100644 src/components/PDFView/index.android.js
 delete mode 100644 src/components/PDFView/index.ios.js
 rename src/components/PDFView/{BasePDFViewNative.js => index.native.js} (90%)

diff --git a/src/components/PDFView/index.android.js b/src/components/PDFView/index.android.js
deleted file mode 100644
index 3137e7c45e03..000000000000
--- a/src/components/PDFView/index.android.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-import BasePDFViewNative from './BasePDFViewNative';
-import * as pdfViewPropTypes from './pdfViewPropTypes';
-import compose from '../../libs/compose';
-import withWindowDimensions from '../withWindowDimensions';
-import withKeyboardState from '../withKeyboardState';
-
-class PDFView extends Component {
-    componentDidUpdate() {
-        // Alert the parent component that it may be necessary to adjust the UI
-        // to accommodate the keyboard.
-        this.props.onAvoidKeyboard(this.props.isShown);
-    }
-
-    render() {
-        return (
-            <BasePDFViewNative
-                sourceURL={this.props.sourceURL}
-                style={this.props.style}
-            />
-        );
-    }
-}
-
-PDFView.propTypes = pdfViewPropTypes.propTypes;
-PDFView.defaultProps = pdfViewPropTypes.defaultProps;
-
-export default compose(
-    withWindowDimensions,
-    withKeyboardState,
-)(PDFView);
diff --git a/src/components/PDFView/index.ios.js b/src/components/PDFView/index.ios.js
deleted file mode 100644
index 5700438bdcfb..000000000000
--- a/src/components/PDFView/index.ios.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import BasePDFViewNative from './BasePDFViewNative';
-import * as pdfViewPropTypes from './pdfViewPropTypes';
-import withWindowDimensions from '../withWindowDimensions';
-import styles from '../../styles/styles';
-
-const PDFView = props => (
-    <BasePDFViewNative
-        sourceURL={props.sourceURL}
-        style={[props.style, styles.w100]}
-    />
-);
-
-PDFView.propTypes = pdfViewPropTypes.propTypes;
-PDFView.defaultProps = pdfViewPropTypes.defaultProps;
-PDFView.displayName = 'PDFView';
-
-export default withWindowDimensions(PDFView);
diff --git a/src/components/PDFView/BasePDFViewNative.js b/src/components/PDFView/index.native.js
similarity index 90%
rename from src/components/PDFView/BasePDFViewNative.js
rename to src/components/PDFView/index.native.js
index 589542face8d..65d19b7a9f24 100644
--- a/src/components/PDFView/BasePDFViewNative.js
+++ b/src/components/PDFView/index.native.js
@@ -1,26 +1,15 @@
 import React, {Component} from 'react';
 import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
-import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
 import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import PDFPasswordForm from './PDFPasswordForm';
-import {propTypes as pdfViewPropTypes, defaultProps as pdfViewDefaultProps} from './pdfViewPropTypes';
+import * as pdfViewPropTypes from './pdfViewPropTypes';
+import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
-
-const propTypes = {
-    ...pdfViewPropTypes,
-
-    /** Notify parent that a PDF load attempt is in progress */
-    onAttemptPdfLoad: PropTypes.func,
-};
-
-const defaultProps = {
-    ...pdfViewDefaultProps,
-    onAttemptPdfLoad: () => {},
-};
+import withKeyboardState from '../withKeyboardState';
 
 /**
  * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is
@@ -36,7 +25,7 @@ const defaultProps = {
  * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF
  * is (temporarily) rendered.
  */
-class BasePDFViewNative extends Component {
+class PDFView extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -51,6 +40,12 @@ class BasePDFViewNative extends Component {
         this.finishPdfLoad = this.finishPdfLoad.bind(this);
     }
 
+    componentDidUpdate() {
+        // Alert the parent component that it may be necessary to adjust the UI
+        // to accommodate the keyboard.
+        this.props.onAvoidKeyboard(this.props.isShown);
+    }
+
     /**
      * Initiate password challenge if message received from react-native-pdf/PDF
      * indicates that a password is required or invalid.
@@ -90,8 +85,6 @@ class BasePDFViewNative extends Component {
      * @param {String} password Password submitted via PDFPasswordForm
      */
     attemptPdfLoadWithPassword(password) {
-        this.props.onAttemptPdfLoad();
-
         // Render react-native-pdf/PDF so that it can validate the password.
         // Note that at this point in the password challenge, shouldRequestPassword is true.
         // Thus react-native-pdf/PDF will be rendered - but not visible.
@@ -121,6 +114,7 @@ class BasePDFViewNative extends Component {
         const touchableStyles = [
             styles.flex1,
             this.props.style,
+            styles.w100,
         ];
 
         // If we haven't yet successfully validated the password and loaded the PDF,
@@ -164,7 +158,10 @@ class BasePDFViewNative extends Component {
     }
 }
 
-BasePDFViewNative.propTypes = propTypes;
-BasePDFViewNative.defaultProps = defaultProps;
+PDFView.propTypes = pdfViewPropTypes.propTypes;
+PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 
-export default withWindowDimensions(BasePDFViewNative);
+export default compose(
+    withWindowDimensions,
+    withKeyboardState,
+)(PDFView);

From a4eedda044b196e484f1d41acbee06ea5636e406 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 22 Aug 2022 08:09:46 -1000
Subject: [PATCH 090/101] feat: pdf password form - fixed comment

---
 src/components/AttachmentModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 3f4bbecfe8b5..c5f7dd59705b 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -211,7 +211,7 @@ class AttachmentModal extends PureComponent {
     }
 
     /**
-     * In order to gracefully hide/show the confirm button on Android when the keyboard
+     * In order to gracefully hide/show the confirm button when the keyboard
      * opens/closes, apply an animation to fade the confirm button out/in. And since
      * we're only updating the opacity of the confirm button, we must also conditionally
      * disable it.

From ff790899c9e492aba994cba11081997a04e21e09 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 22 Aug 2022 08:45:31 -1000
Subject: [PATCH 091/101] feat: pdf password form - renamed keyboard state
 change handler

---
 src/components/AttachmentModal.js          |  2 +-
 src/components/AttachmentView.js           |  6 +++---
 src/components/PDFView/index.js            | 15 +++++++--------
 src/components/PDFView/index.native.js     |  4 +---
 src/components/PDFView/pdfViewPropTypes.js |  6 +++---
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index c5f7dd59705b..de7ef2f93b77 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -278,7 +278,7 @@ class AttachmentModal extends PureComponent {
                             <AttachmentView
                                 sourceURL={sourceURL}
                                 file={this.state.file}
-                                onAvoidKeyboard={this.updateConfirmButtonVisibility}
+                                onToggleKeyboard={this.updateConfirmButtonVisibility}
                             />
                         )}
                     </View>
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
index 491cadbebfaf..3f6a6fefb61d 100755
--- a/src/components/AttachmentView.js
+++ b/src/components/AttachmentView.js
@@ -29,7 +29,7 @@ const propTypes = {
     shouldShowLoadingSpinnerIcon: PropTypes.bool,
 
     /** Notify parent that the UI should be modified to accommodate keyboard */
-    onAvoidKeyboard: PropTypes.func,
+    onToggleKeyboard: PropTypes.func,
 
     ...withLocalizePropTypes,
 };
@@ -40,7 +40,7 @@ const defaultProps = {
     },
     shouldShowDownloadIcon: false,
     shouldShowLoadingSpinnerIcon: false,
-    onAvoidKeyboard: () => {},
+    onToggleKeyboard: () => {},
 };
 
 const AttachmentView = (props) => {
@@ -52,7 +52,7 @@ const AttachmentView = (props) => {
             <PDFView
                 sourceURL={props.sourceURL}
                 style={styles.imageModalPDF}
-                onAvoidKeyboard={props.onAvoidKeyboard}
+                onToggleKeyboard={props.onToggleKeyboard}
             />
         );
     }
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 6ca8673dcb84..b0324a9d0a5a 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -22,15 +22,15 @@ class PDFView extends Component {
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
         this.attemptPdfLoad = this.attemptPdfLoad.bind(this);
-        this.avoidKeyboardOnSmallScreens = this.avoidKeyboardOnSmallScreens.bind(this);
+        this.toggleKeyboardOnSmallScreens = this.toggleKeyboardOnSmallScreens.bind(this);
     }
 
     componentDidUpdate(prevProps) {
         // If window height has changed update keyboard state and alert parent.
         if (this.props.windowHeight < prevProps.windowHeight) {
-            this.avoidKeyboardOnSmallScreens(true);
+            this.toggleKeyboardOnSmallScreens(true);
         } else if (this.props.windowHeight > prevProps.windowHeight) {
-            this.avoidKeyboardOnSmallScreens(false);
+            this.toggleKeyboardOnSmallScreens(false);
         }
     }
 
@@ -83,16 +83,15 @@ class PDFView extends Component {
     }
 
     /**
-     * On small screens notify parent that the UI should be updated to
-     * accommodate the keyboard.
+     * On small screens notify parent that the keyboard has opened or closed.
      *
-     * @param {Boolean} shouldAvoid If true update UI to accommodate keyboard
+     * @param {Boolean} isKeyboardOpen True if keyboard is open
      */
-    avoidKeyboardOnSmallScreens(shouldAvoid) {
+    toggleKeyboardOnSmallScreens(isKeyboardOpen) {
         if (!this.props.isSmallScreenWidth) {
             return;
         }
-        this.props.onAvoidKeyboard(shouldAvoid);
+        this.props.onToggleKeyboard(isKeyboardOpen);
     }
 
     render() {
diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js
index bb17054ac147..95a7d235c67a 100644
--- a/src/components/PDFView/index.native.js
+++ b/src/components/PDFView/index.native.js
@@ -41,9 +41,7 @@ class PDFView extends Component {
     }
 
     componentDidUpdate() {
-        // Alert the parent component that it may be necessary to adjust the UI
-        // to accommodate the keyboard.
-        this.props.onAvoidKeyboard(this.props.isShown);
+        this.props.onToggleKeyboard(this.props.isShown);
     }
 
     /**
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 8d3036b1322a..dbc83536c835 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -9,8 +9,8 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
-    /** Notify parent that the UI should be updated to avoid keyboard */
-    onAvoidKeyboard: PropTypes.func,
+    /** Notify parent that the keyboard has opened or closed */
+    onToggleKeyboard: PropTypes.func,
 
     ...windowDimensionsPropTypes,
 };
@@ -18,7 +18,7 @@ const propTypes = {
 const defaultProps = {
     sourceURL: '',
     style: {},
-    onAvoidKeyboard: () => {},
+    onToggleKeyboard: () => {},
 };
 
 export {propTypes, defaultProps};

From 5339bb3cd559f2a11cdb1296cd89ce018607cde3 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Mon, 22 Aug 2022 08:52:13 -1000
Subject: [PATCH 092/101] feat: pdf password form - refactored prop types

---
 src/components/PDFView/pdfViewPropTypes.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index dbc83536c835..88b661cb67b6 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
+import stylePropTypes from '../../styles/stylePropTypes';
 import {windowDimensionsPropTypes} from '../withWindowDimensions';
 
 const propTypes = {
     /** URL to full-sized image */
     sourceURL: PropTypes.string,
 
-    /** Any additional styles to apply */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.any,
+    style: stylePropTypes,
 
     /** Notify parent that the keyboard has opened or closed */
     onToggleKeyboard: PropTypes.func,

From 0e5143737c09ca125494a44b06a7a7df315593f2 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 23 Aug 2022 12:08:10 -1000
Subject: [PATCH 093/101] feat: pdf password form - added send button fade
 in/out for ios-safari

---
 src/components/PDFView/PDFPasswordForm.js | 7 ++++++-
 src/components/PDFView/index.js           | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index d1ce87e8be3b..b97d8c96b994 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -30,6 +30,9 @@ const propTypes = {
     /** Notify parent that the password has been updated/edited */
     onPasswordUpdated: PropTypes.func,
 
+    /** Notify parent that a text field has been focused or blurred */
+    onTextFieldFocused: PropTypes.func,
+
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -40,6 +43,7 @@ const defaultProps = {
     shouldShowLoadingIndicator: false,
     onSubmit: () => {},
     onPasswordUpdated: () => {},
+    onTextFieldFocused: () => {},
 };
 
 class PDFPasswordForm extends Component {
@@ -112,7 +116,8 @@ class PDFPasswordForm extends Component {
                             returnKeyType="done"
                             onSubmitEditing={this.submitPassword}
                             errorText={this.state.validationErrorText}
-                            onBlur={this.validate}
+                            onFocus={() => this.props.onTextFieldFocused(true)}
+                            onBlur={() => { this.validate(); this.props.onTextFieldFocused(false); }}
                             autoFocus={this.props.shouldAutofocusPasswordField}
                             secureTextEntry
                         />
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index b0324a9d0a5a..7790d8a669c8 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -145,6 +145,7 @@ class PDFView extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
+                        onTextFieldFocused={this.toggleKeyboardOnSmallScreens}
                     />
                 )}
             </View>

From 984bf78e22c789f13af520bfaf5690548eb452ac Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 23 Aug 2022 15:11:48 -1000
Subject: [PATCH 094/101] feat: pdf password form - added check to avoid
 redundant keyboard toggling

---
 src/components/PDFView/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 7790d8a669c8..bbcc5a59926b 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -18,6 +18,7 @@ class PDFView extends Component {
             windowWidth: Dimensions.get('window').width,
             shouldRequestPassword: false,
             isPasswordInvalid: false,
+            isKeyboardOpen: false,
         };
         this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
         this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this);
@@ -26,10 +27,12 @@ class PDFView extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        // If window height has changed update keyboard state and alert parent.
-        if (this.props.windowHeight < prevProps.windowHeight) {
+        // Use window height changes to toggle the keyboard. To maintain keyboard state
+        // on all platforms we also use focus/blur events. So we need to make sure here
+        // that we avoid toggling the keyboard twice.
+        if (!this.state.isKeyboardOpen && this.props.windowHeight < prevProps.windowHeight) {
             this.toggleKeyboardOnSmallScreens(true);
-        } else if (this.props.windowHeight > prevProps.windowHeight) {
+        } else if (this.state.isKeyboardOpen && this.props.windowHeight > prevProps.windowHeight) {
             this.toggleKeyboardOnSmallScreens(false);
         }
     }
@@ -91,6 +94,7 @@ class PDFView extends Component {
         if (!this.props.isSmallScreenWidth) {
             return;
         }
+        this.setState({isKeyboardOpen});
         this.props.onToggleKeyboard(isKeyboardOpen);
     }
 

From 43ed4ad90b73c0ac834e67b0486fc17d18c73334 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Tue, 23 Aug 2022 15:36:08 -1000
Subject: [PATCH 095/101] feat: pdf password form - updated comment related to
 redundant keyboard toggling

---
 src/components/PDFView/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index bbcc5a59926b..3eda6b48ceb6 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -29,7 +29,7 @@ class PDFView extends Component {
     componentDidUpdate(prevProps) {
         // Use window height changes to toggle the keyboard. To maintain keyboard state
         // on all platforms we also use focus/blur events. So we need to make sure here
-        // that we avoid toggling the keyboard twice.
+        // that we avoid redundant keyboard toggling.
         if (!this.state.isKeyboardOpen && this.props.windowHeight < prevProps.windowHeight) {
             this.toggleKeyboardOnSmallScreens(true);
         } else if (this.state.isKeyboardOpen && this.props.windowHeight > prevProps.windowHeight) {

From ef145d04a80f8f6155409edd0915af93651651f1 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sat, 27 Aug 2022 05:18:32 -1000
Subject: [PATCH 096/101] feat: pdf password form - added comment on style prop
 types

---
 src/components/PDFView/pdfViewPropTypes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 88b661cb67b6..281c135fe438 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -6,6 +6,7 @@ const propTypes = {
     /** URL to full-sized image */
     sourceURL: PropTypes.string,
 
+    /** Additional style props */
     style: stylePropTypes,
 
     /** Notify parent that the keyboard has opened or closed */

From 13a551097632fb6929e686bc937bf3a681acb905 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sat, 27 Aug 2022 05:25:05 -1000
Subject: [PATCH 097/101] feat: pdf password form - renamed focus/blur event
 handler

---
 src/components/PDFView/PDFPasswordForm.js | 8 ++++----
 src/components/PDFView/index.js           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b97d8c96b994..9cc8a9385371 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -31,7 +31,7 @@ const propTypes = {
     onPasswordUpdated: PropTypes.func,
 
     /** Notify parent that a text field has been focused or blurred */
-    onTextFieldFocused: PropTypes.func,
+    onPasswordFieldFocused: PropTypes.func,
 
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
@@ -43,7 +43,7 @@ const defaultProps = {
     shouldShowLoadingIndicator: false,
     onSubmit: () => {},
     onPasswordUpdated: () => {},
-    onTextFieldFocused: () => {},
+    onPasswordFieldFocused: () => {},
 };
 
 class PDFPasswordForm extends Component {
@@ -116,8 +116,8 @@ class PDFPasswordForm extends Component {
                             returnKeyType="done"
                             onSubmitEditing={this.submitPassword}
                             errorText={this.state.validationErrorText}
-                            onFocus={() => this.props.onTextFieldFocused(true)}
-                            onBlur={() => { this.validate(); this.props.onTextFieldFocused(false); }}
+                            onFocus={() => this.props.onPasswordFieldFocused(true)}
+                            onBlur={() => { this.validate(); this.props.onPasswordFieldFocused(false); }}
                             autoFocus={this.props.shouldAutofocusPasswordField}
                             secureTextEntry
                         />
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index 3eda6b48ceb6..f01e2f2d9b4d 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -149,7 +149,7 @@ class PDFView extends Component {
                         onPasswordUpdated={() => this.setState({isPasswordInvalid: false})}
                         isPasswordInvalid={this.state.isPasswordInvalid}
                         shouldAutofocusPasswordField={!this.props.isSmallScreenWidth}
-                        onTextFieldFocused={this.toggleKeyboardOnSmallScreens}
+                        onPasswordFieldFocused={this.toggleKeyboardOnSmallScreens}
                     />
                 )}
             </View>

From c3913793c024458badd6813b7dd857c0111fcbf5 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sat, 27 Aug 2022 11:23:05 -1000
Subject: [PATCH 098/101] feat: pdf password form - refactored password field
 blur handler

---
 src/components/PDFView/PDFPasswordForm.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 9cc8a9385371..b873648cb8e7 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -58,6 +58,7 @@ class PDFPasswordForm extends Component {
         this.validate = this.validate.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
         this.showForm = this.showForm.bind(this);
+        this.validateAndNotifyPasswordBlur = this.validateAndNotifyPasswordBlur.bind(this);
     }
 
     submitPassword() {
@@ -85,6 +86,11 @@ class PDFPasswordForm extends Component {
         return false;
     }
 
+    validateAndNotifyPasswordBlur() {
+        this.validate();
+        this.props.onPasswordFieldFocused(false);
+    }
+
     showForm() {
         this.setState({shouldShowForm: true});
     }
@@ -117,7 +123,7 @@ class PDFPasswordForm extends Component {
                             onSubmitEditing={this.submitPassword}
                             errorText={this.state.validationErrorText}
                             onFocus={() => this.props.onPasswordFieldFocused(true)}
-                            onBlur={() => { this.validate(); this.props.onPasswordFieldFocused(false); }}
+                            onBlur={this.validateAndNotifyPasswordBlur}
                             autoFocus={this.props.shouldAutofocusPasswordField}
                             secureTextEntry
                         />

From 2bc60316b87f139bb7dcca9790b58271b66d2b26 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Sat, 27 Aug 2022 12:15:46 -1000
Subject: [PATCH 099/101] feat: pdf password form - updated type for parameter
 comment

---
 src/components/PDFView/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index f01e2f2d9b4d..b4c9079ca681 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -62,7 +62,7 @@ class PDFView extends Component {
      * The PasswordResponses constants used below were copied from react-pdf
      * because they're not exported in entry.webpack.
      *
-     * @param {*} callback Callback used to send password to react-pdf
+     * @param {Function} callback Callback used to send password to react-pdf
      * @param {Number} reason Reason code for password request
      */
     initiatePasswordChallenge(callback, reason) {

From bfbf6f416d86a80faeb7f636a590a7350c3b5980 Mon Sep 17 00:00:00 2001
From: David Frenkiel <david.frenkiel@yahoo.com>
Date: Wed, 31 Aug 2022 07:57:39 -1000
Subject: [PATCH 100/101] feat: pdf password form - removed unecessary method
 bind

---
 src/components/PDFView/PDFPasswordForm.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index b873648cb8e7..144de7de6497 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -55,7 +55,6 @@ class PDFPasswordForm extends Component {
             shouldShowForm: false,
         };
         this.submitPassword = this.submitPassword.bind(this);
-        this.validate = this.validate.bind(this);
         this.updatePassword = this.updatePassword.bind(this);
         this.showForm = this.showForm.bind(this);
         this.validateAndNotifyPasswordBlur = this.validateAndNotifyPasswordBlur.bind(this);

From dcc5c60f9fe803a4b7d25d3f2d37114a4da4054a Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Mon, 5 Sep 2022 12:54:00 +0000
Subject: [PATCH 101/101] Update version to 1.1.97-2

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index ed259183df3c..4dcc674c352d 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -155,8 +155,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001019701
-        versionName "1.1.97-1"
+        versionCode 1001019702
+        versionName "1.1.97-2"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index b60e2e18e8ad..f2f5c64fe627 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.97.1</string>
+	<string>1.1.97.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 8568f3445b54..ba7ee1904a98 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.97.1</string>
+	<string>1.1.97.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 9ceff082092c..e737d5a3e0a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.1.97-1",
+  "version": "1.1.97-2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.1.97-1",
+      "version": "1.1.97-2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 32e588c32a2a..a1e8a62c336b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.97-1",
+  "version": "1.1.97-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",