Implement profile image moderation

TNL-1548

lms/templates/manage_user_standing.html

@@ -3,54 +3,111 @@
 <%! from django.core.urlresolvers import reverse %>
 <%! from django.utils.translation import ugettext as _ %>
 
-<h2>${_("Disable or Reenable student accounts")}</h2>
-<form action="${reverse('disable_account_ajax')}" method="post" data-remote="true" id="disable-form">
-	<label for="username">${_("Username:")}</label>
-	<input type="text" id="username" name="username" required="true">
-	<br>
-	<label for="account_action">${_("Disable Account")}</label>
-	<input type="radio" name="account_action" value="disable" id="account_action">
-	<br>
-	<label for="account_action">${_("Reenable Account")}</label>
-	<input type="radio" name="account_action" value="reenable" id="account_action">
-	<br>
-	<br>
+<h2>${_("Manage student accounts")}</h2>
+<form action="${reverse('disable_account_ajax')}" method="post" data-remote="true" class="manage-accounts-form">
+    <label for="username">${_("Username:")}</label>
+    <input type="text" id="username" name="username" required="true">
+    <br>
+    <br>
+    <h3>${_("Profile:")}</h3>
+    <label for="profile-image">${_("Image:")}</label>
+    <img id="profile-image">
+    <br>
+    <label for="profile-name">${_("Name:")}</label>
+    <span id="profile-name"></span>
+    <br>
+    <br>
+    <h3>${_("Choose an action:")}</h3>
+    <label for="disable_action">${_("View Profile")}</label>
+    <input type="radio" name="account_action" value="" id="view_profile_action" checked="checked">
+    <br>
+    <label for="disable_action">${_("Disable Account")}</label>
+    <input type="radio" name="account_action" value="disable" id="disable_action">
+    <br>
+    <label for="reenable_action">${_("Reenable Account")}</label>
+    <input type="radio" name="account_action" value="reenable" id="reenable_action">
+    <br>
+    <label for="remove_profile_image_action">${_("Remove Profile Image")}</label>
+    <input type="radio" name="account_action" value="remove_profile_image" id="remove_profile_image_action"">
+    <br>
+    <br>
+    <button type="submit">${_("Submit")}</button>
 </form>
 
-<button id="submit-form">${_("Submit")}</button>
-<br>
-<br>
-<p id="account-change-status"></p>
+
+<p class="account-change-status"></p>
 <h2>${_("Students whose accounts have been disabled")}</h2>
 <p>${_("(reload your page to refresh)")}</p>
 <table id="account-table" border='1'>
-	<tr>
-		% for header in headers:
-		<th>${header}</th>
-		% endfor
-	</tr>
-	% for row in rows:
-	<tr>
-		% for cell in row:
-		<td>${cell}</td>
-		% endfor
-	</tr>
-	% endfor
+    <tr>
+        % for header in headers:
+        <th>${header}</th>
+        % endfor
+    </tr>
+    % for row in rows:
+    <tr>
+        % for cell in row:
+        <td>${cell}</td>
+        % endfor
+    </tr>
+    % endfor
 </table>
 
+<%
+PLACEHOLDER_USERNAME = '__PLACEHOLDER_USERNAME'
+%>
+
 <script type="text/javascript">
-	$(function() {
-		var form = $("#disable-form");
-		$("#submit-form").click(function(){
-			$("#account-change-status").text("${_('working')}");
-			$.ajax({
-				type: "POST",
-				url: form.attr('action'),
-				data: form.serialize(),
-				success: function(response){
-					$("#account-change-status").html(response.message);
-				},
-			});
-		});
-	});
+$(function() {
+    var form = $(".manage-accounts-form"),
+        profileUrl = "${reverse('accounts_api', kwargs={'username': PLACEHOLDER_USERNAME})}",
+        removeProfileUrl = "${reverse('profile_image_remove', kwargs={'username': PLACEHOLDER_USERNAME})}",
+        refreshProfile;
+
+    refreshProfile = function(username) {
+        return $.ajax({
+            type: "GET",
+            url: profileUrl.replace('${PLACEHOLDER_USERNAME}', username),
+            success: function(response) {
+                var imageUrl = response["profile_image"]["image_url_medium"];
+                $("#profile-image", form).attr("src", imageUrl);
+                $("#profile-image", form).attr("src", imageUrl);
+                $("#profile-name", form).text(response["name"]);
+                $("#view_profile_action", form).attr('checked', 'checked');
+                $("#view_profile_action", form).focus();
+            }
+        });
+    };
+
+    form.submit(function(event) {
+        event.preventDefault();
+        var username = $('#username', form).val(),
+            action = $("input:radio[name=account_action]:checked", form).val();
+        if (action === 'remove_profile_image') {
+            $(".account-change-status").text("${_('working')}");
+            $.ajax({
+                type: "POST",
+                url: removeProfileUrl.replace('${PLACEHOLDER_USERNAME}', username),
+                success: function(response) {
+                    refreshProfile(username).always(function() {
+                        $("#profile-image", form).focus();
+                        $(".account-change-status").html("");
+                    })
+                }
+            });
+        } else if (action) {
+            $(".account-change-status").text("${_('working')}");
+            $.ajax({
+                type: "POST",
+                url: form.attr('action'),
+                data: form.serialize(),
+                success: function(response) {
+                    $(".account-change-status").html(response.message);
+                }
+            });
+        } else {
+            refreshProfile(username);
+        }
+    });
+});
 </script>