fix: not ask for password when deleting account (#498)

Author: ahmed-arb

lms/static/js/student_account/AccountsClient.js

@@ -1,15 +1,14 @@
 import 'whatwg-fetch';
 import Cookies from 'js-cookie';
 
-const deactivate = (password) => fetch('/api/user/v1/accounts/deactivate_logout/', {
+const deactivate = () => fetch('/api/user/v1/accounts/deactivate_logout/', {
   method: 'POST',
   credentials: 'same-origin',
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
     'X-CSRFToken': Cookies.get('csrftoken'),
   },
   // URLSearchParams + polyfill doesn't work in IE11
-  body: `password=${encodeURIComponent(password)}`,
 }).then((response) => {
   if (response.ok) {
     return response;

lms/static/js/student_account/components/StudentAccountDeletion.jsx

@@ -49,7 +49,7 @@ export class StudentAccountDeletion extends React.Component {
     const showError = socialAuthConnected || !isActive;
 
     const socialAuthError = StringUtils.interpolate(
-      gettext('Before proceeding, please {htmlStart}unlink all social media accounts{htmlEnd}.'),
+      gettext('Before proceeding, please {htmlStart}unlink all linked accounts{htmlEnd}.'),
       {
         htmlStart: '<a href="https://support.edx.org/hc/en-us/articles/207206067" rel="noopener" target="_blank">',
         htmlEnd: '</a>',

lms/static/js/student_account/components/StudentAccountDeletionModal.jsx

@@ -13,13 +13,18 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
     super(props);
 
     this.deleteAccount = this.deleteAccount.bind(this);
-    this.handlePasswordInputChange = this.handlePasswordInputChange.bind(this);
-    this.passwordFieldValidation = this.passwordFieldValidation.bind(this);
+    this.handleConfirmationInputChange = this.handleConfirmationInputChange.bind(this);
+    this.confirmationFieldValidation = this.confirmationFieldValidation.bind(this);
     this.handleConfirmationModalClose = this.handleConfirmationModalClose.bind(this);
+    
+    // The text user needs to type to confirm deletion
+    // TODO: This should be stored in a config file
+    this.confirmationText = 'DELETE_MY_ACCOUNT';
+    
     this.state = {
-      password: '',
-      passwordSubmitted: false,
-      passwordValid: true,
+      confirmationInput: '',
+      confirmationSubmitted: false,
+      confirmationValid: true,
       validationMessage: '',
       validationErrorDetails: '',
       accountQueuedForDeletion: false,
@@ -36,13 +41,13 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
 
   deleteAccount() {
     return this.setState(
-      { passwordSubmitted: true },
+      { confirmationSubmitted: true },
       () => (
-        deactivate(this.state.password)
+        deactivate()
           .then(() => this.setState({
             accountQueuedForDeletion: true,
             responseError: false,
-            passwordSubmitted: false,
+            confirmationSubmitted: false,
             validationMessage: '',
             validationErrorDetails: '',
           }))
@@ -52,41 +57,51 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
   }
 
   failedSubmission(error) {
-    const title = error.message === '403' ? gettext('Password is incorrect') : gettext('Unable to delete account');
-    const body = error.message === '403' ? gettext('Please re-enter your password.') : gettext('Sorry, there was an error trying to process your request. Please try again later.');
+    const title = gettext('Unable to delete account');
+    const body = gettext('Sorry, there was an error trying to process your request. Please try again later.');
 
     this.setState({
-      passwordSubmitted: false,
+      confirmationSubmitted: false,
       responseError: true,
-      passwordValid: false,
+      confirmationValid: false,
       validationMessage: title,
       validationErrorDetails: body,
     });
   }
 
-  handlePasswordInputChange(value) {
-    this.setState({ password: value });
+  handleConfirmationInputChange(value) {
+    this.setState({ confirmationInput: value });
+    this.confirmationFieldValidation(value);
   }
 
-  passwordFieldValidation(value) {
-    let feedback = { passwordValid: true };
+  confirmationFieldValidation(value) {
+    let feedback = { confirmationValid: true };
 
     if (value.length < 1) {
       feedback = {
-        passwordValid: false,
-        validationMessage: gettext('A Password is required'),
+        confirmationValid: false,
+        validationMessage: gettext('Confirmation text is required'),
         validationErrorDetails: '',
       };
+    } else if (value !== this.confirmationText) {
+      feedback = {
+        confirmationValid: false,
+        validationMessage: gettext('Confirmation text does not match'),
+        validationErrorDetails: StringUtils.interpolate(
+          gettext('Please type "{confirmationText}" exactly as shown.'),
+          { confirmationText: this.confirmationText }
+        ),
+      };
     }
 
     this.setState(feedback);
   }
 
   renderConfirmationModal() {
     const {
-      passwordValid,
-      password,
-      passwordSubmitted,
+      confirmationValid,
+      confirmationInput,
+      confirmationSubmitted,
       responseError,
       validationErrorDetails,
       validationMessage,
@@ -123,6 +138,10 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
       },
     );
 
+    const confirmationInstructions = StringUtils.interpolate(
+      gettext('If you still wish to continue and delete your account, please type "{confirmationText}" in the box below:'),
+      { confirmationText: this.confirmationText }
+    );
 
     return (
       <div className="delete-confirmation-wrapper">
@@ -172,18 +191,18 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
                 dismissible={false}
                 open
               />
-              <p className="next-steps">{ gettext('If you still wish to continue and delete your account, please enter your account password:') }</p>
+              <p className="next-steps">{ confirmationInstructions }</p>
               <InputText
-                name="confirm-password"
-                label="Password"
-                type="password"
-                className={['confirm-password-input']}
-                onBlur={this.passwordFieldValidation}
-                isValid={passwordValid}
+                name="confirm-deletion"
+                type="text"
+                className={['confirm-deletion-input']}
+                onBlur={this.confirmationFieldValidation}
+                isValid={confirmationValid}
                 validationMessage={validationMessage}
-                onChange={this.handlePasswordInputChange}
-                autoComplete="new-password"
+                onChange={this.handleConfirmationInputChange}
+                autoComplete="off"
                 themes={['danger']}
+                placeholder={gettext('Type confirmation text here')}
               />
             </div>
           )}
@@ -192,7 +211,7 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
             <Button
               label={gettext('Yes, Delete')}
               onClick={this.deleteAccount}
-              disabled={password.length === 0 || passwordSubmitted}
+              disabled={confirmationInput.length === 0 || !confirmationValid || confirmationSubmitted}
             />,
           ]}
         />

openedx/core/djangoapps/user_api/accounts/views.py

@@ -488,37 +488,29 @@ def post(self, request, username):
 class DeactivateLogoutView(APIView):
     """
     POST /api/user/v1/accounts/deactivate_logout/
-    {
-        "password": "example_password",
-    }
+    {}
 
     **POST Parameters**
 
-      A POST request must include the following parameter.
-
-      * password: Required. The current password of the user being deactivated.
+      A POST request with an empty body is sufficient for authenticated users.
 
     **POST Response Values**
 
-     If the request does not specify a username or submits a username
-     for a non-existent user, the request returns an HTTP 404 "Not Found"
-     response.
-
-     If a user who is not a superuser tries to deactivate a user,
-     the request returns an HTTP 403 "Forbidden" response.
+     If the user is not authenticated, the request returns an HTTP 401 
+     "Unauthorized" response.
 
      If the specified user is successfully deactivated, the request
      returns an HTTP 204 "No Content" response.
 
      If an unanticipated error occurs, the request returns an
      HTTP 500 "Internal Server Error" response.
 
-    Allows an LMS user to take the following actions:
+    Allows an authenticated LMS user to take the following actions:
     -  Change the user's password permanently to Django's unusable password
     -  Log the user out
     - Create a row in the retirement table for that user
     """
-    authentication_classes = (JwtAuthentication, SessionAuthentication,)
+    authentication_classes = (SessionAuthentication,)
     permission_classes = (permissions.IsAuthenticated,)
 
     def post(self, request):
@@ -530,10 +522,9 @@ def post(self, request):
         """
         user_model = get_user_model()
         try:
-            # Get the username from the request and check that it exists
-            verify_user_password_response = self._verify_user_password(request)
-            if verify_user_password_response.status_code != status.HTTP_204_NO_CONTENT:
-                return verify_user_password_response
+            # Since we're removing password verification, we only need to ensure
+            # TODO: make password verfication conditional depending on wether the user account was created through 3rd party auth or not.
+            # the user is authenticated (handled by permission_classes)
             with transaction.atomic():
                 user_email = request.user.email
                 create_retirement_request_and_deactivate_account(request.user)