From ba9a43c03a7c0f95ba7c71963452b2c98c0e9e8c Mon Sep 17 00:00:00 2001
From: Ashoat Tevosyan <ashoat@comm.app>
Date: Mon, 9 Oct 2023 09:50:25 -0400
Subject: [PATCH] [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     | 125 ++-------------------
 web/settings/account-delete-modal.css      |   7 --
 web/settings/account-delete-modal.react.js |  94 +---------------
 3 files changed, 13 insertions(+), 213 deletions(-)

diff --git a/native/profile/delete-account.react.js b/native/profile/delete-account.react.js
index f8f348f12a..ce6bb16cb5 100644
--- 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 @@ 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,24 +37,7 @@ 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' ? (
@@ -74,31 +45,7 @@ class DeleteAccount extends React.PureComponent<Props, State> {
       ) : (
         <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 @@ 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>
@@ -131,21 +76,6 @@ class DeleteAccount extends React.PureComponent<Props, State> {
     );
   }
 
-  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,13 +146,8 @@ 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();
@@ -263,11 +155,8 @@ const ConnectedDeleteAccount: React.ComponentType<{ ... }> = React.memo<{
 
   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
index 56625671b7..306fe03eb2 100644
--- 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
index d91269d050..ea944fa0b1 100644
--- 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 { useModalContext } from 'lib/components/modal-provider.react.js';
 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 {
 
 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 @@ type Props = {
   +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 @@ class AccountDeleteModal extends React.PureComponent<Props, State> {
       );
     }
 
-    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 @@ class AccountDeleteModal extends React.PureComponent<Props, State> {
               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 @@ class AccountDeleteModal extends React.PureComponent<Props, State> {
     );
   }
 
-  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 @@ class AccountDeleteModal extends React.PureComponent<Props, State> {
       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 deleteAccountLoadingStatusSelector = createLoadingStatusSelector(
 
 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 @@ const ConnectedAccountDeleteModal: React.ComponentType<{}> = React.memo<{}>(
 
     return (
       <AccountDeleteModal
-        isAccountWithPassword={isAccountWithPassword}
         preRequestUserState={preRequestUserState}
         inputDisabled={inputDisabled}
         deleteAccount={callDeleteAccount}