diff --git a/native/profile/delete-account.react.js b/native/profile/delete-account.react.js --- a/native/profile/delete-account.react.js +++ b/native/profile/delete-account.react.js @@ -1,13 +1,7 @@ // @flow -import invariant from 'invariant'; import * as React from 'react'; -import { - Text, - View, - TextInput as BaseTextInput, - ActivityIndicator, -} from 'react-native'; +import { Text, View, ActivityIndicator } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; import { @@ -16,7 +10,6 @@ } from 'lib/actions/user-actions.js'; import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; -import { accountHasPassword } from 'lib/shared/account-utils.js'; import type { LogOutResult } from 'lib/types/account-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { PreRequestUserState } from 'lib/types/session-types.js'; @@ -28,19 +21,14 @@ import { deleteNativeCredentialsFor } from '../account/native-credentials.js'; import Button from '../components/button.react.js'; -import TextInput from '../components/text-input.react.js'; import { useSelector } from '../redux/redux-utils.js'; -import { type Colors, useColors, useStyles } from '../themes/colors.js'; -import type { GlobalTheme } from '../types/themes.js'; +import { useStyles } from '../themes/colors.js'; import Alert from '../utils/alert.js'; type Props = { // Redux state - +isAccountWithPassword: boolean, +loadingStatus: LoadingStatus, +preRequestUserState: PreRequestUserState, - +activeTheme: ?GlobalTheme, - +colors: Colors, +styles: typeof unboundStyles, // Redux dispatch functions +dispatchActionPromise: DispatchActionPromise, @@ -49,24 +37,7 @@ preRequestUserState: PreRequestUserState, ) => Promise, }; -type State = { - +password: ?string, -}; -class DeleteAccount extends React.PureComponent { - state: State = { - password: null, - }; - mounted = false; - passwordInput: ?React.ElementRef; - - componentDidMount() { - this.mounted = true; - } - - componentWillUnmount() { - this.mounted = false; - } - +class DeleteAccount extends React.PureComponent { render() { const buttonContent = this.props.loadingStatus === 'loading' ? ( @@ -74,31 +45,7 @@ ) : ( Delete account ); - const { panelForegroundTertiaryLabel } = this.props.colors; - let inputPasswordPrompt; - if (this.props.isAccountWithPassword) { - inputPasswordPrompt = ( - <> - PASSWORD - - - - - ); - } return ( - {inputPasswordPrompt} @@ -131,21 +76,6 @@ ); } - onChangePasswordText = (newPassword: string) => { - this.setState({ password: newPassword }); - }; - - passwordInputRef = ( - passwordInput: ?React.ElementRef, - ) => { - this.passwordInput = passwordInput; - }; - - focusPasswordInput = () => { - invariant(this.passwordInput, 'passwordInput should be set'); - this.passwordInput.focus(); - }; - submitDeletion = () => { this.props.dispatchActionPromise( deleteAccountActionTypes, @@ -165,24 +95,17 @@ Alert.alert( 'Incorrect password', 'The password you entered is incorrect', - [{ text: 'OK', onPress: this.onErrorAlertAcknowledged }], + [{ text: 'OK' }], { cancelable: false }, ); } else { - Alert.alert( - 'Unknown error', - 'Uhh... try again?', - [{ text: 'OK', onPress: this.onErrorAlertAcknowledged }], - { cancelable: false }, - ); + Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], { + cancelable: false, + }); } throw e; } } - - onErrorAlertAcknowledged = () => { - this.setState({ password: '' }, this.focusPasswordInput); - }; } const unboundStyles = { @@ -194,21 +117,6 @@ marginVertical: 12, padding: 12, }, - header: { - color: 'panelBackgroundLabel', - fontSize: 12, - fontWeight: '400', - paddingBottom: 3, - paddingHorizontal: 24, - }, - input: { - color: 'panelForegroundLabel', - flex: 1, - fontFamily: 'Arial', - fontSize: 16, - paddingVertical: 0, - borderBottomColor: 'transparent', - }, lastWarningText: { marginBottom: 24, }, @@ -223,17 +131,6 @@ scrollViewContentContainer: { paddingTop: 24, }, - section: { - backgroundColor: 'panelForeground', - borderBottomWidth: 1, - borderColor: 'panelForegroundBorder', - borderTopWidth: 1, - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 24, - paddingHorizontal: 24, - paddingVertical: 12, - }, warningText: { color: 'panelForegroundLabel', fontSize: 16, @@ -249,13 +146,8 @@ const ConnectedDeleteAccount: React.ComponentType<{ ... }> = React.memo<{ ... }>(function ConnectedDeleteAccount() { - const isAccountWithPassword = useSelector(state => - accountHasPassword(state.currentUserInfo), - ); const loadingStatus = useSelector(loadingStatusSelector); const preRequestUserState = useSelector(preRequestUserStateSelector); - const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); - const colors = useColors(); const styles = useStyles(unboundStyles); const dispatchActionPromise = useDispatchActionPromise(); @@ -263,11 +155,8 @@ return ( void, }; type State = { - +currentPassword: ?string, +errorMessage: string, }; class AccountDeleteModal extends React.PureComponent { - currentPasswordInput: ?HTMLInputElement; - - constructor(props: Props) { - super(props); - this.state = { - currentPassword: props.isAccountWithPassword ? '' : null, - errorMessage: '', - }; - } - - componentDidMount() { - invariant( - !this.props.isAccountWithPassword || this.currentPasswordInput, - 'newPasswordInput ref unset', - ); - this.currentPasswordInput?.focus(); - } + state = { + errorMessage: '', + }; render() { - const { inputDisabled } = this.props; - let errorMsg; if (this.state.errorMessage) { errorMsg = ( @@ -70,31 +49,7 @@ ); } - let passwordConfirmation; - if (this.props.isAccountWithPassword) { - invariant( - this.state.currentPassword !== null && - this.state.currentPassword !== undefined, - 'currentPassword must be set if isAccountWithPassword', - ); - passwordConfirmation = ( - <> -

- Please enter your account password to confirm your identity. -

-

Account password

- - - ); - } - + const { inputDisabled } = this.props; return (
@@ -104,20 +59,13 @@ Your account will be permanently deleted. There is no way to reverse this.

- - {passwordConfirmation} -
@@ -129,16 +77,6 @@ ); } - currentPasswordInputRef = (currentPasswordInput: ?HTMLInputElement) => { - this.currentPasswordInput = currentPasswordInput; - }; - - onChangeCurrentPassword = (event: SyntheticEvent) => { - const target = event.target; - invariant(target instanceof HTMLInputElement, 'target not input'); - this.setState({ currentPassword: target.value }); - }; - onDelete = (event: SyntheticEvent) => { event.preventDefault(); this.props.dispatchActionPromise( @@ -155,23 +93,7 @@ this.props.popModal(); return response; } catch (e) { - const errorMessage = - e.message === 'invalid_credentials' - ? 'wrong password' - : 'unknown error'; - this.setState( - { - currentPassword: this.props.isAccountWithPassword ? '' : null, - errorMessage: errorMessage, - }, - () => { - invariant( - !this.props.isAccountWithPassword || this.currentPasswordInput, - 'currentPasswordInput ref unset', - ); - this.currentPasswordInput?.focus(); - }, - ); + this.setState({ errorMessage: 'unknown error' }); throw e; } } @@ -183,9 +105,6 @@ const ConnectedAccountDeleteModal: React.ComponentType<{}> = React.memo<{}>( function ConnectedAccountDeleteModal(): React.Node { - const isAccountWithPassword = useSelector(state => - accountHasPassword(state.currentUserInfo), - ); const preRequestUserState = useSelector(preRequestUserStateSelector); const inputDisabled = useSelector( state => deleteAccountLoadingStatusSelector(state) === 'loading', @@ -197,7 +116,6 @@ return (