Page MenuHomePhabricator
Files F3158028

D9425.diff
No OneTemporary
Actions

D9425.diff
View Options

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<LogOutResult>,
};
-type State = {
- +password: ?string,
-};
-class DeleteAccount extends React.PureComponent<Props, State> {
- state: State = {
- password: null,
- };
- mounted = false;
- passwordInput: ?React.ElementRef<typeof BaseTextInput>;
-
- componentDidMount() {
- this.mounted = true;
- }
-
- componentWillUnmount() {
- this.mounted = false;
- }
-
+class DeleteAccount extends React.PureComponent<Props> {
render() {
const buttonContent =
this.props.loadingStatus === 'loading' ? (
@@ -74,31 +45,7 @@
) : (
<Text style={this.props.styles.saveText}>Delete account</Text>
);
- const { panelForegroundTertiaryLabel } = this.props.colors;
- let inputPasswordPrompt;
- if (this.props.isAccountWithPassword) {
- inputPasswordPrompt = (
- <>
- <Text style={this.props.styles.header}>PASSWORD</Text>
- <View style={this.props.styles.section}>
- <TextInput
- style={this.props.styles.input}
- value={this.state.password}
- onChangeText={this.onChangePasswordText}
- placeholder="Password"
- placeholderTextColor={panelForegroundTertiaryLabel}
- secureTextEntry={true}
- textContentType="password"
- autoComplete="password"
- returnKeyType="go"
- onSubmitEditing={this.submitDeletion}
- ref={this.passwordInputRef}
- />
- </View>
- </>
- );
- }
return (
<ScrollView
contentContainerStyle={this.props.styles.scrollViewContentContainer}
@@ -119,11 +66,9 @@
There is no way to reverse this.
</Text>
</View>
- {inputPasswordPrompt}
<Button
onPress={this.submitDeletion}
style={this.props.styles.deleteButton}
- disabled={this.props.isAccountWithPassword && !this.state.password}
>
{buttonContent}
</Button>
@@ -131,21 +76,6 @@
);
}
- onChangePasswordText = (newPassword: string) => {
- this.setState({ password: newPassword });
- };
-
- passwordInputRef = (
- passwordInput: ?React.ElementRef<typeof BaseTextInput>,
- ) => {
- 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 (
<DeleteAccount
- isAccountWithPassword={isAccountWithPassword}
loadingStatus={loadingStatus}
preRequestUserState={preRequestUserState}
- activeTheme={activeTheme}
- colors={colors}
styles={styles}
dispatchActionPromise={dispatchActionPromise}
deleteAccount={callDeleteAccount}
diff --git a/web/settings/account-delete-modal.css b/web/settings/account-delete-modal.css
--- a/web/settings/account-delete-modal.css
+++ b/web/settings/account-delete-modal.css
@@ -10,14 +10,7 @@
font-weight: var(--bold);
margin-bottom: 16px;
}
-.confirm_password {
- margin-bottom: 10px;
-}
-.form_title {
- font-weight: var(--bold);
- margin-bottom: 8px;
-}
.form_footer {
display: flex;
flex-direction: row-reverse;
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -1,6 +1,5 @@
// @flow
-import invariant from 'invariant';
import * as React from 'react';
import {
@@ -11,7 +10,6 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.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 { PreRequestUserState } from 'lib/types/session-types.js';
import type { DispatchActionPromise } from 'lib/utils/action-utils.js';
@@ -22,12 +20,10 @@
import css from './account-delete-modal.css';
import Button, { buttonThemes } from '../components/button.react.js';
-import Input from '../modals/input.react.js';
import Modal from '../modals/modal.react.js';
import { useSelector } from '../redux/redux-utils.js';
type Props = {
- +isAccountWithPassword: boolean,
+preRequestUserState: PreRequestUserState,
+inputDisabled: boolean,
+dispatchActionPromise: DispatchActionPromise,
@@ -37,32 +33,15 @@
+popModal: () => void,
};
type State = {
- +currentPassword: ?string,
+errorMessage: string,
};
class AccountDeleteModal extends React.PureComponent<Props, State> {
- 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 = (
- <>
- <p className={css.confirm_password}>
- Please enter your account password to confirm your identity.
- </p>
- <p className={css.form_title}>Account password</p>
- <Input
- type="password"
- placeholder="Password"
- value={this.state.currentPassword}
- onChange={this.onChangeCurrentPassword}
- disabled={inputDisabled}
- ref={this.currentPasswordInputRef}
- />
- </>
- );
- }
-
+ const { inputDisabled } = this.props;
return (
<Modal name="Delete Account" onClose={this.props.popModal} size="large">
<div className={css.modal_body}>
@@ -104,20 +59,13 @@
Your account will be permanently deleted. There is no way to
reverse this.
</p>
-
- {passwordConfirmation}
-
<div className={css.form_footer}>
<Button
variant="filled"
buttonColor={buttonThemes.danger}
type="submit"
onClick={this.onDelete}
- disabled={
- inputDisabled ||
- (this.props.isAccountWithPassword &&
- this.state.currentPassword?.length === 0)
- }
+ disabled={inputDisabled}
>
Delete Account
</Button>
@@ -129,16 +77,6 @@
);
}
- currentPasswordInputRef = (currentPasswordInput: ?HTMLInputElement) => {
- this.currentPasswordInput = currentPasswordInput;
- };
-
- onChangeCurrentPassword = (event: SyntheticEvent<HTMLInputElement>) => {
- const target = event.target;
- invariant(target instanceof HTMLInputElement, 'target not input');
- this.setState({ currentPassword: target.value });
- };
-
onDelete = (event: SyntheticEvent<HTMLButtonElement>) => {
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 (
<AccountDeleteModal
- isAccountWithPassword={isAccountWithPassword}
preRequestUserState={preRequestUserState}
inputDisabled={inputDisabled}
deleteAccount={callDeleteAccount}

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 6, 9:27 PM (21 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2432486
Default Alt Text
D9425.diff (13 KB)

Event Timeline