From 3654d4f92d4b666412d803587a722f8c35c3ee90 Mon Sep 17 00:00:00 2001
From: Yashashvi Dave <yashashvidave@gmail.com>
Date: Fri, 18 May 2018 18:51:44 +0530
Subject: [PATCH] jquery-form: Remove jquery-form use from get-API-key form in
 user settings.

---
 frontend_tests/casper_tests/06-settings.js    |  6 +--
 frontend_tests/node_tests/settings_bots.js    |  2 -
 static/js/settings_account.js                 | 41 +++++++++++--------
 .../settings/account-settings.handlebars      |  6 +--
 4 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/frontend_tests/casper_tests/06-settings.js b/frontend_tests/casper_tests/06-settings.js
index 9063a3b6d9..ee586aab45 100644
--- a/frontend_tests/casper_tests/06-settings.js
+++ b/frontend_tests/casper_tests/06-settings.js
@@ -65,9 +65,9 @@ casper.then(function () {
 */
 
 casper.then(function () {
-    casper.waitUntilVisible('#get_api_key_password', function () {
-        casper.fill('form[action^="/json/fetch_api_key"]', {password:test_credentials.default_user.password});
-        casper.click('button[name="view_api_key"]');
+    casper.waitUntilVisible('#get_api_key_button', function () {
+        casper.fill('#get_api_key_form', {password:test_credentials.default_user.password});
+        casper.click('#get_api_key_button');
     });
 });
 
diff --git a/frontend_tests/node_tests/settings_bots.js b/frontend_tests/node_tests/settings_bots.js
index c83e9f13d4..a7a7286c67 100644
--- a/frontend_tests/node_tests/settings_bots.js
+++ b/frontend_tests/node_tests/settings_bots.js
@@ -93,8 +93,6 @@ run_test('set_up', () => {
 
     $.validator = { addMethod: function () {} };
 
-    $("#get_api_key_box form").ajaxForm = function () {};
-
     $("#create_bot_form").validate = function () {};
 
     $('#create_bot_type').on = function (action, f) {
diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index 66f6cb42c4..c49e15eec4 100644
--- a/static/js/settings_account.js
+++ b/static/js/settings_account.js
@@ -165,23 +165,32 @@ exports.set_up = function () {
 
     $("#get_api_key_box").hide();
     $("#show_api_key_box").hide();
-    $("#get_api_key_box form").ajaxForm({
-        dataType: 'json', // This seems to be ignored. We still get back an xhr.
-        success: function (resp, statusText, xhr) {
-            var result = JSON.parse(xhr.responseText);
-            var settings_status = $('#account-settings-status').expectOne();
 
-            $("#get_api_key_password").val("");
-            $("#api_key_value").text(result.api_key);
-            $("#show_api_key_box").show();
-            $("#get_api_key_box").hide();
-            settings_status.hide();
-        },
-        error: function (xhr) {
-            ui_report.error(i18n.t("Error getting API key"), xhr, $('#account-settings-status').expectOne());
-            $("#show_api_key_box").hide();
-            $("#get_api_key_box").show();
-        },
+    $("#get_api_key_button").on("click", function (e) {
+        var data = {};
+        e.preventDefault();
+        e.stopPropagation();
+
+        data.password = $("#get_api_key_password").val();
+        channel.post({
+            url: '/json/fetch_api_key',
+            dataType: 'json',
+            data: data,
+            success: function (data) {
+                var settings_status = $('#account-settings-status').expectOne();
+
+                $("#get_api_key_password").val("");
+                $("#api_key_value").text(data.api_key);
+                $("#show_api_key_box").show();
+                $("#get_api_key_box").hide();
+                settings_status.hide();
+            },
+            error: function (xhr) {
+                ui_report.error(i18n.t("Error getting API key"), xhr, $('#account-settings-status').expectOne());
+                $("#show_api_key_box").hide();
+                $("#get_api_key_box").show();
+            },
+        });
     });
 
     $("#show_api_key_box").on("click", "button.regenerate_api_key", function () {
diff --git a/static/templates/settings/account-settings.handlebars b/static/templates/settings/account-settings.handlebars
index 871e2fb0ec..eb79d1aea4 100644
--- a/static/templates/settings/account-settings.handlebars
+++ b/static/templates/settings/account-settings.handlebars
@@ -195,14 +195,12 @@
         <div id="get_api_key_box">
             <p>{{t "Please re-enter your password to confirm your identity." }}
               <a href="/accounts/password/reset/" target="_blank">{{t "Never had one? Forgotten it?" }}</a></p>
-            <form action="/json/fetch_api_key" method="post" class="form-horizontal">
+            <form cslass="form-horizontal" id="get_api_key_form">
                 <div class="control-group">
                     <label for="password" class="control-label">{{t "Current password" }}</label>
                     <input type="password" autocomplete="off"
                       name="password" id="get_api_key_password" value="" />
-                </div>
-                <div class="control-group">
-                    <button type="submit" name="view_api_key"
+                    <button type="submit" name="view_api_key" id="get_api_key_button"
                       class="button sea-green">{{t 'Get API key' }}</button>
                 </div>
             </form>