[native][web] Remove UI elements that ask for password when deleting …

…account

Summary:
We stopped taking the password as input in D9236, so there's no point in asking for it anymore.

Depends on D9424

Test Plan: Test account deletion components and make sure they still work

Reviewers: varun, atul, ginsu

Reviewed By: ginsu

Subscribers: tomek, wyilio

Differential Revision: https://phab.comm.dev/D9425

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 @@ import {
 } 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 {
 
 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,56 +37,15 @@ type Props = {
     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' ? (
         <ActivityIndicator size="small" color="white" />
       ) : (
         <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,33 +66,16 @@ class DeleteAccount extends React.PureComponent<Props, State> {
             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>
       </ScrollView>
     );
   }
 
-  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 @@ class DeleteAccount extends React.PureComponent<Props, State> {
         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 @@ const unboundStyles = {
     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 @@ const unboundStyles = {
   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,25 +146,17 @@ const loadingStatusSelector = createLoadingStatusSelector(
 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();
   const callDeleteAccount = useServerCall(deleteAccount);
 
   return (
     <DeleteAccount
-      isAccountWithPassword={isAccountWithPassword}
       loadingStatus={loadingStatus}
       preRequestUserState={preRequestUserState}
-      activeTheme={activeTheme}
-      colors={colors}
       styles={styles}
       dispatchActionPromise={dispatchActionPromise}
       deleteAccount={callDeleteAccount}

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;