membership.html

<%! from django.utils.translation import ugettext as _ %>
<%page args="section_data"/>
<%! from microsite_configuration import microsite %>

<script type="text/template" id="member-list-widget-template">
  <div class="member-list-widget">
    <div class="header">
      <div class="title"> {{title}} </div>
    </div>
    <div class="info"> {{info}} </div>
    <div class="member-list">
      <table>
        <thead>
          <tr>
            {{#labels}}
              <td class="label">{{.}}</td>
            {{/labels}}
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="bottom-bar">
      <input type="text" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
      <input type="button" name="add" class="add" value="{{add_btn_label}}">
    </div>
  </div>
</script>

<div class="batch-enrollment membership-section">
  <h2> ${_("Batch Enrollment")} </h2>
  <p>
    <label for="student-ids">
      ${_("Enter email addresses and/or usernames separated by new lines or commas.")}
      ${_("You will not get notification for emails that bounce, so please double-check spelling.")} </label>
    <textarea rows="6" name="student-ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
  </p>

  <div class="enroll-option">
    <input type="checkbox" name="auto-enroll" value="Auto-Enroll" checked="yes">
    <label for="auto-enroll">${_("Auto Enroll")}</label>
    <div class="hint auto-enroll-hint">
      <span class="hint-caret"></span>
      <p>
	${_("If this option is <em>checked</em>, users who have not yet registered for {platform_name} will be automatically enrolled.").format(platform_name=settings.PLATFORM_NAME)}
	${_("If this option is left <em>unchecked</em>, users who have not yet registered for {platform_name} will not be enrolled, but will be allowed to enroll once they make an account.").format(platform_name=settings.PLATFORM_NAME)}
	<br /><br />
	${_("Checking this box has no effect if 'Unenroll' is selected.")}
      </p>
    </div>
  </div>

  <div class="enroll-option">
    <input type="checkbox" name="email-students" value="Notify-students-by-email" checked="yes">
    <label for="email-students">${_("Notify users by email")}</label>
    <div class="hint email-students-hint">
      <span class="hint-caret"></span>
      <p>
	${_("If this option is <em>checked</em>, users will receive an email notification.")}
      </p>
    </div>
  </div>

  <div>
    <input type="button" name="enrollment-button" class="enrollment-button" value="${_("Enroll")}" data-endpoint="${ section_data['enroll_button_url'] }" data-action="enroll" >
    <input type="button" name="enrollment-button" class="enrollment-button" value="${_("Unenroll")}" data-endpoint="${ section_data['unenroll_button_url'] }" data-action="unenroll" >
  </div>
  <div class="request-response"></div>
  <div class="request-response-error"></div>
</div>

%if microsite.get_value('ALLOW_AUTOMATED_SIGNUPS', settings.FEATURES.get('ALLOW_AUTOMATED_SIGNUPS', False)):
  <hr class="divider" />

  <div class="auto_enroll auto_enroll_csv">
    <h2> ${_("Register/Enroll Students")} </h2>
    <p>
    ${_("To register and enroll a list of users in this course, choose a CSV file that contains the following columns in this exact order: email, username, name, and country. Please include one student per row and do not include any headers, footers, or blank lines.")}
    </p>
    <form id="student-auto-enroll-form" method="post" action="${ section_data['upload_student_csv_button_url'] }" enctype="multipart/form-data">
      <div class="customBrowseBtn">
        <input disabled="disabled" id="browseFile" placeholder="choose file" />
        <div class="file-browse btn btn-primary">
            <span class="browse"> Browse </span>
            <input class="file_field" id="browseBtn" name="students_list" type="file" accept=".csv"/>
        </div>
      </div>
      <button type="submit" name="enrollment_signup_button">${_("Upload CSV")}</button>

      <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
    </form>
    <div class="results"></div>
  </div>
%endif

<hr class="divider" />

%if section_data['access']['instructor']:
<div class="batch-beta-testers membership-section">
  <h2> ${_("Batch Beta Tester Addition")} </h2>
  <p>
    <label for="student-ids-for-beta">
      ${_("Enter email addresses and/or usernames separated by new lines or commas.")}<br/>
      ${_("Note: Users must have an activated {platform_name} account before they can be enrolled as a beta tester.").format(platform_name=settings.PLATFORM_NAME)}
    </label>

  <textarea rows="6" cols="50" name="student-ids-for-beta" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
  </p>

  <div class="enroll-option">
    <input type="checkbox" name="auto-enroll" value="Auto-Enroll" checked="yes">
    <label for="auto-enroll-beta">${_("Auto Enroll")}</label>
    <div class="hint auto-enroll-beta-hint">
      <span class="hint-caret"></span>
      <p>
	${_("If this option is <em>checked</em>, users who have not enrolled in your course will be automatically enrolled.")}
	<br /><br />
	${_("Checking this box has no effect if 'Remove beta testers' is selected.")}
      </p>
    </div>
  </div>

  <div class="enroll-option">
    <input type="checkbox" name="email-students-beta" value="Notify-students-by-email" checked="yes">
    <label for="email-students-beta">${_("Notify users by email")}</label>
    <div class="hint email-students-beta-hint">
      <span class="hint-caret"></span>
      <p> ${_("If this option is <em>checked</em>, users will receive an email notification.")}</p>
    </div>
  </div>

  <div>
    <input type="button" name="beta-testers" class="enrollment-button" value="${_("Add beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="add" >
    <input type="button" name="beta-testers" class="enrollment-button" value="${_("Remove beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="remove" >
  </div>

  <div class="request-response"></div>
  <div class="request-response-error"></div>
</div>

<hr class="divider" />
%endif

<div class="member-lists-management membership-section">
  ## Translators: an "Administration List" is a list, such as Course Staff, that users can be added to.
  <h2> ${_("Administration List Management")} </h2>

  <div class="request-response-error"></div>

  <div class="wrapper-member-select">
    ## Translators: an "Administrator Group" is a group, such as Course Staff, that users can be added to.
    <label for="member-lists-selector">${_("Select an Administrator Group:")}</label>
    <select id="member-lists-selector" class="member-lists-selector">
      <option> ${_("Getting available lists...")} </option>
    </select>

  </div>


  %if not section_data['access']['instructor']:
    <p>
      ${_("Staff cannot modify staff or beta tester lists. To modify these lists, "
      "contact your instructor and ask them to add you as an instructor for staff "
      "and beta lists, or a discussion admin for discussion management.")}
    </p>
  %endif

  %if section_data['access']['instructor']:
    <div class="auth-list-container"
      data-rolename="staff"
      data-display-name="${_("Course Staff")}"
      data-info-text="
        ${_("Course staff can help you manage limited aspects of your course. Staff "
        "can enroll and unenroll students, as well as modify their grades and "
        "see all course data. Course staff are not automatically given access "
        "to Studio and will not be able to edit your course.")}"
      data-list-endpoint="${ section_data['list_course_role_members_url'] }"
      data-modify-endpoint="${ section_data['modify_access_url'] }"
      data-add-button-label="${_("Add Staff")}"
    ></div>

    <div class="auth-list-container"
      data-rolename="instructor"
      data-display-name="${_("Instructors")}"
      data-info-text="
        ${_("Instructors are the core administration of your course. Instructors can "
        "add and remove course staff, as well as administer discussion access.")}"
      data-list-endpoint="${ section_data['list_course_role_members_url'] }"
      data-modify-endpoint="${ section_data['modify_access_url'] }"
      data-add-button-label="${_("Add Instructor")}"
    ></div>

    <div class="auth-list-container"
      data-rolename="beta"
      data-display-name="${_("Beta Testers")}"
      data-info-text="
        ${_("Beta testers can see course content before the rest of the students. "
        "They can make sure that the content works, but have no additional "
        "privileges.")}"
      data-list-endpoint="${ section_data['list_course_role_members_url'] }"
      data-modify-endpoint="${ section_data['modify_access_url'] }"
      data-add-button-label="${_("Add Beta Tester")}"
    ></div>

    <div class="auth-list-container"
      data-rolename="Administrator"
      data-display-name="${_("Discussion Admins")}"
      data-info-text="
        ${_("Discussion admins can edit or delete any post, clear misuse flags, close "
         "and re-open threads, endorse responses, and see posts from all cohorts. "
         "They CAN add/delete other moderators and their posts are marked as 'staff'.")}"
      data-list-endpoint="${ section_data['list_forum_members_url'] }"
      data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
      data-add-button-label="${_("Add Discussion Admin")}"
    ></div>
  %endif

  %if section_data['access']['instructor'] or section_data['access']['forum_admin']:
    <div class="auth-list-container"
      data-rolename="Moderator"
      data-display-name="${_("Discussion Moderators")}"
      data-info-text="
        ${_("Discussion moderators can edit or delete any post, clear misuse flags, close "
         "and re-open threads, endorse responses, and see posts from all cohorts. "
         "They CANNOT add/delete other moderators and their posts are marked as 'staff'.")}"
      data-list-endpoint="${ section_data['list_forum_members_url'] }"
      data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
      data-add-button-label="${_("Add Moderator")}"
    ></div>

    <div class="auth-list-container"
      data-rolename="Community TA"
      data-display-name="${_("Discussion Community TAs")}"
      data-info-text="
        ${_("Community TA's are members of the community whom you deem particularly "
        "helpful on the discussion boards. They can edit or delete any post, clear misuse flags, "
        "close and re-open threads, endorse responses, and see posts from all cohorts. "
        "Their posts are marked 'Community TA'.")}"
      data-list-endpoint="${ section_data['list_forum_members_url'] }"
      data-modify-endpoint="${ section_data['update_forum_role_membership_url'] }"
      data-add-button-label="${_("Add Community TA")}"
    ></div>
  %endif

</div>

%if course.is_cohorted:
    <hr class="divider" />
    <div class="cohort-management membership-section"
         data-ajax_url="${section_data['cohorts_ajax_url']}"
         data-advanced-settings-url="${section_data['advanced_settings_url']}"
         data-upload_cohorts_csv_url="${section_data['upload_cohorts_csv_url']}"
    >
    </div>

    <%block name="headextra">
        <script>
        $(document).ready(function() {
            var cohortManagementElement = $('.cohort-management');
            if (cohortManagementElement.length > 0) {
                var cohorts = new CohortCollection();
                cohorts.url = cohortManagementElement.data('ajax_url');
                var cohortsView = new CohortsView({
                    el: cohortManagementElement,
                    model: cohorts,
                    advanced_settings_url: cohortManagementElement.data('advanced-settings-url'),
                    upload_cohorts_csv_url: cohortManagementElement.data('upload_cohorts_csv_url')
                });
                cohorts.fetch().done(function() {
                    cohortsView.render();
                });
            }
        });
        </script>

    </%block>
% endif