edx-platform/cms/templates/manage_users.html

<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%! from auth.authz import is_user_in_course_group_role %>
<%inherit file="base.html" />
<%block name="title">${_("Course Team Settings")}</%block>
<%block name="bodyclass">is-signedin course users settings team</%block>


<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-actions has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Course Settings")}</small>
      <span class="sr">&gt; </span>${_("Course Team")}
    </h1>

    <nav class="nav-actions">
      <h3 class="sr">${_("Page Actions")}</h3>
      <ul>
        %if allow_actions:
        <li class="nav-item">
          <a href="#" class="button new-button new-user-button"><i class="icon-plus"></i> ${_("New User")}</a>
        </li>
        %endif
      </ul>
    </nav>
  </header>
</div>

<div class="main-wrapper">
  <div class="inner-wrapper">

    <div class="details">
      <p>${_("The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.")}</p>
    </div>

    <article class="user-overview">
      %if allow_actions:
      <form class="new-user-form">
        <div id="result"></div>
        <div class="form-elements">
          <label>email: </label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com">
          <input type="submit" value="Add User" id="add_user" class="add-button" />
          <input type="button" value="Cancel" class="cancel-button" />
        </div>
      </form>
      %endif
      <div>
        <ol class="user-list">
          % for user in staff:
          <li data-url="${reverse('course_team_user', kwargs=dict(
              org=context_course.location.org,
              course=context_course.location.course,
              name=context_course.location.name,
              email=user.email,
            ))}">
            <span class="user-name">${user.username}</span>
            <span class="user-email">${user.email}</span>
            % if allow_actions:
            <div class="item-actions">
              % if request.user.id != user.id:
                % if is_user_in_course_group_role(user, context_course.location, 'instructor'):
                     <% admin_class = "remove-admin" %>
                     <% admin_text = "Remove Admin" %>
                % else:
                     <% admin_class = "add-admin" %>
                     <% admin_text = "Add Admin" %>
                % endif
              <a href="#" class="toggle-admin ${admin_class}">${admin_text}</a>
              <a href="#" class="delete-button remove-user" data-id="${user.email}"><span class="delete-icon"></span></a>
              % endif
            </div>
            % endif
          </li>
          % endfor
        </ol>
      </div>
    </article>
  </div>
</div>
</%block>

<%block name="jsextra">
<script type="text/javascript">
  var tplUserURL = "${reverse('course_team_user', kwargs=dict(
      org=context_course.location.org,
      course=context_course.location.course,
      name=context_course.location.name,
      email="@@EMAIL@@",
    ))}"

  $(document).ready(function() {
    var $newUserForm = $('.new-user-form');
    $newUserForm.bind('submit', function(e) {
      e.preventDefault();
      var url = tplUserURL.replace("@@EMAIL@@", $('#email').val())
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          role: 'staff',
        }),
        success: function(data) {
          location.reload();
        },
        notifyOnError: false,
        error: function(jqXHR, textStatus, errorThrown) {
          data = JSON.parse(jqXHR.responseText);
          $('#result').show().empty().append(data.error);
        }
      });
    });

    var $cancelButton = $newUserForm.find('.cancel-button');
    $cancelButton.bind('click', function(e) {
      e.preventDefault();
      $newUserForm.slideUp(150);
      $('#result').hide();
      $('#email').val('');
    });

    $('.new-user-button').bind('click', function(e) {
      e.preventDefault();
      $newUserForm.slideDown(150);
      $newUserForm.find('.email-input').focus();
    });

    $('body').bind('keyup', function(e) {
      if(e.which == 27) {
        $cancelButton.click();
      }
    });

    $('.remove-user').click(function() {
      var url = tplUserURL.replace("@@EMAIL@@", $(this).data('id'))
      $.ajax({
        url: url,
        type: 'DELETE',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          role: 'staff',
        }),
        complete: function() {
          location.reload();
        }
      });
    });

    $(".toggle-admin").click(function(e) {
      e.preventDefault()
      var type;
      if($(this).hasClass("add-admin")) {
        type = 'POST';
      } else {
        type = 'DELETE';
      }
      var url = $(this).closest("li").data("url");
      $.ajax({
        url: url,
        type: type,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          role: 'instructor',
        }),
        complete: function() {
          location.reload();
        }
      })
    })

  });
</script>
</%block>