LEARNER-4717 Have delete account modal button make request to deactivation endpoint

lms/static/js/student_account/AccountsClient.js

@@ -0,0 +1,23 @@
+import 'url-search-params-polyfill';
+import 'whatwg-fetch';
+import Cookies from 'js-cookie';
+
+const deactivate = (password) => fetch('/api/user/v1/accounts/deactivate_logout/', {
+  method: 'POST',
+  credentials: 'same-origin',
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded',
+    'X-CSRFToken': Cookies.get('csrftoken'),
+  },
+  body: new URLSearchParams({ password }),
+}).then((response) => {
+  if (response.ok) {
+    return response;
+  }
+
+  throw new Error(response);
+});
+
+export {
+  deactivate,
+};

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

@@ -3,10 +3,11 @@
 import React from 'react';
 import 'whatwg-fetch';
 import PropTypes from 'prop-types';
-import Cookies from 'js-cookie';
 import { Button, Modal, Icon, InputText, StatusAlert } from '@edx/paragon/static';
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 
+import { deactivate } from '../AccountsClient';
+
 class StudentAccountDeletionConfirmationModal extends React.Component {
   constructor(props) {
     super(props);
@@ -14,6 +15,7 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
     this.deleteAccount = this.deleteAccount.bind(this);
     this.handlePasswordInputChange = this.handlePasswordInputChange.bind(this);
     this.passwordFieldValidation = this.passwordFieldValidation.bind(this);
+    this.handleConfirmationModalClose = this.handleConfirmationModalClose.bind(this);
     this.state = {
       password: '',
       passwordSubmitted: false,
@@ -25,37 +27,27 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
     };
   }
 
-  addUserToDeletionQueue() {
-    // TODO: Add API call to add user to account deletion queue
+  handleConfirmationModalClose() {
+    this.props.onClose();
 
-    this.setState({
-      accountQueuedForDeletion: true,
-      responseError: false,
-      passwordSubmitted: false,
-      validationMessage: '',
-      validationErrorDetails: '',
-    });
+    window.location.href = 'https://www.edx.org';
   }
 
   deleteAccount() {
-    const { password } = this.state;
-
-    this.setState({ passwordSubmitted: true });
-
-    fetch('/accounts/verify_password', {
-      method: 'POST',
-      credentials: 'same-origin',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'X-CSRFToken': Cookies.get('csrftoken'),
-      },
-      body: JSON.stringify({ password }),
-    }).then((response) => {
-      if (response.ok) {
-        return this.addUserToDeletionQueue();
-      }
-      return this.failedSubmission(response);
-    }).catch(error => this.failedSubmission(error));
+    return this.setState(
+      { passwordSubmitted: true },
+      () => (
+        deactivate(this.state.password)
+          .then(() => this.setState({
+            accountQueuedForDeletion: true,
+            responseError: false,
+            passwordSubmitted: false,
+            validationMessage: '',
+            validationErrorDetails: '',
+          }))
+          .catch(error => this.failedSubmission(error))
+        ),
+      );
   }
 
   failedSubmission(error) {
@@ -182,15 +174,13 @@ class StudentAccountDeletionConfirmationModal extends React.Component {
   }
 
   renderSuccessModal() {
-    const { onClose } = this.props;
-
     return (
       <div className="delete-success-wrapper">
         <Modal
           title={gettext('We\'re sorry to see you go! Your account will be deleted shortly.')}
           renderHeaderCloseButton={false}
           body={gettext('Account deletion, including removal from email lists, may take a few weeks to fully process through our system. If you want to opt-out of emails before then, please unsubscribe from the footer of any email.')}
-          onClose={onClose}
+          onClose={this.handleConfirmationModalClose}
           aria-live="polite"
           open
         />

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

@@ -13,6 +13,7 @@ from django.utils.translation import ugettext as _
 from edx_rest_framework_extensions.authentication import JwtAuthentication
 from rest_framework import permissions
 from rest_framework import status
+from rest_framework.authentication import SessionAuthentication
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from rest_framework.viewsets import ViewSet
@@ -21,7 +22,6 @@ from social_django.models import UserSocialAuth
 from student.models import (
     User,
     get_retired_email_by_email,
-    get_potentially_retired_user_by_username_and_hash,
     get_potentially_retired_user_by_username
 )
 from student.views.login import AuthFailedError, LoginFailures
@@ -335,12 +335,12 @@ class DeactivateLogoutView(APIView):
     -  Log the user out
     - Create a row in the retirement table for that user
     """
-    authentication_classes = (JwtAuthentication, )
+    authentication_classes = (SessionAuthentication, JwtAuthentication, )
     permission_classes = (permissions.IsAuthenticated, )
 
     def post(self, request):
         """
-        POST /api/user/v1/accounts/deactivate_logout
+        POST /api/user/v1/accounts/deactivate_logout/
 
         Marks the user as having no password set for deactivation purposes,
         and logs the user out.

package-lock.json

@@ -10391,6 +10391,11 @@
         }
       }
     },
+    "url-search-params-polyfill": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-search-params-polyfill/-/url-search-params-polyfill-3.0.0.tgz",
+      "integrity": "sha512-oRNWuBkJ/zKKK1aiBaTBZTf07zOKd0g+nJYB+vFNPO14gFjA75BaHgIJLtveWBRxI/2qff7xcTb9H6wkpTmqjg=="
+    },
     "user-home": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/user-home/-/user-home-2.0.0.tgz",

package.json

@@ -55,6 +55,7 @@
     "uglify-js": "2.7.0",
     "underscore": "1.8.3",
     "underscore.string": "3.3.4",
+    "url-search-params-polyfill": "3.0.0",
     "webpack": "2.7.0",
     "webpack-bundle-tracker": "0.2.1",
     "webpack-merge": "4.1.1",

scripts/thresholds.sh

@@ -3,5 +3,5 @@ set -e
 
 export LOWER_PYLINT_THRESHOLD=1000
 export UPPER_PYLINT_THRESHOLD=5900
-export ESLINT_THRESHOLD=5586
+export ESLINT_THRESHOLD=5590
 export STYLELINT_THRESHOLD=973