-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9141 from frenkield/frenkield-8595-pdf-password
Frenkield 8595 pdf password
- Loading branch information
Showing
14 changed files
with
620 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| 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 withLocalize, {withLocalizePropTypes} from '../withLocalize'; | ||
|
|
||
| const propTypes = { | ||
| /** Callback function to indicate that PDF password form should be shown */ | ||
| onShowForm: PropTypes.func.isRequired, | ||
|
|
||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| 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 withLocalize(PDFInfoMessage); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| import _ from 'underscore'; | ||
| import React, {Component} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import {View, ScrollView} 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 PDFInfoMessage from './PDFInfoMessage'; | ||
| 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, | ||
|
|
||
| /** If the password field should be auto-focused */ | ||
| shouldAutofocusPasswordField: PropTypes.bool, | ||
|
|
||
| /** If loading indicator should be shown */ | ||
| shouldShowLoadingIndicator: PropTypes.bool, | ||
|
|
||
| /** Notify parent that the password form has been submitted */ | ||
| onSubmit: PropTypes.func, | ||
|
|
||
| /** Notify parent that the password has been updated/edited */ | ||
| onPasswordUpdated: PropTypes.func, | ||
|
|
||
| /** Notify parent that a text field has been focused or blurred */ | ||
| onPasswordFieldFocused: PropTypes.func, | ||
|
|
||
| ...withLocalizePropTypes, | ||
| ...windowDimensionsPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| isPasswordInvalid: false, | ||
| shouldAutofocusPasswordField: false, | ||
| shouldShowLoadingIndicator: false, | ||
| onSubmit: () => {}, | ||
| onPasswordUpdated: () => {}, | ||
| onPasswordFieldFocused: () => {}, | ||
| }; | ||
|
|
||
| class PDFPasswordForm extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| password: '', | ||
| validationErrorText: '', | ||
| shouldShowForm: false, | ||
| }; | ||
| this.submitPassword = this.submitPassword.bind(this); | ||
| this.updatePassword = this.updatePassword.bind(this); | ||
| this.showForm = this.showForm.bind(this); | ||
| this.validateAndNotifyPasswordBlur = this.validateAndNotifyPasswordBlur.bind(this); | ||
| } | ||
|
|
||
| submitPassword() { | ||
| if (!this.validate()) { | ||
| return; | ||
| } | ||
| this.props.onSubmit(this.state.password); | ||
| } | ||
|
|
||
| updatePassword(password) { | ||
| this.props.onPasswordUpdated(password); | ||
| if (!_.isEmpty(password) && this.state.validationErrorText) { | ||
| this.setState({validationErrorText: ''}); | ||
| } | ||
| this.setState({password}); | ||
| } | ||
|
|
||
| validate() { | ||
| if (!_.isEmpty(this.state.password)) { | ||
| return true; | ||
| } | ||
| this.setState({ | ||
| validationErrorText: this.props.translate('attachmentView.passwordRequired'), | ||
| }); | ||
| return false; | ||
| } | ||
|
|
||
| validateAndNotifyPasswordBlur() { | ||
| this.validate(); | ||
| this.props.onPasswordFieldFocused(false); | ||
| } | ||
|
|
||
| showForm() { | ||
| this.setState({shouldShowForm: true}); | ||
| } | ||
|
|
||
| render() { | ||
| const containerStyle = this.props.isSmallScreenWidth | ||
| ? [styles.flex1, styles.w100] | ||
| : styles.pdfPasswordForm.wideScreenWidth; | ||
|
|
||
| return ( | ||
| <> | ||
| {this.state.shouldShowForm ? ( | ||
| <ScrollView | ||
| keyboardShouldPersistTaps="handled" | ||
| style={containerStyle} | ||
| contentContainerStyle={[styles.ph5, styles.flex1, styles.justifyContentCenter]} | ||
| > | ||
| <View style={styles.mb4}> | ||
| <Text> | ||
| {this.props.translate('attachmentView.pdfPasswordForm.formLabel')} | ||
| </Text> | ||
| </View> | ||
| <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} | ||
| onFocus={() => this.props.onPasswordFieldFocused(true)} | ||
| onBlur={this.validateAndNotifyPasswordBlur} | ||
| 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 style={[styles.flex1, styles.justifyContentCenter]}> | ||
| <PDFInfoMessage onShowForm={this.showForm} /> | ||
| </View> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| PDFPasswordForm.propTypes = propTypes; | ||
| PDFPasswordForm.defaultProps = defaultProps; | ||
|
|
||
| export default compose( | ||
| withWindowDimensions, | ||
| withLocalize, | ||
| )(PDFPasswordForm); |
Oops, something went wrong.