Improve extensions + submissions autocomplete

app/controllers/application_controller.rb

@@ -331,6 +331,19 @@ def make_dlist(cuds)
     emails.join(",")
   end
 
+  # Retrieves necessary data for autocompletion purposes
+  # Currently used by manage extensions and create submission
+  def retrieve_autocompletion_data!
+    @users = {}
+    @usersEncoded = {}
+    @course.course_user_data.each do |cud|
+      # Prevent XSS inside autocomplete
+      @users[CGI.escapeHTML cud.full_name_with_email] = cud.id
+      # Why base64? See issue 931
+      @usersEncoded[Base64.urlsafe_encode64(cud.full_name_with_email.strip).strip] = cud.id
+    end
+  end
+
 private
 
   # called on Exceptions.  Shows a stack trace to course assistants, and above.

app/controllers/extensions_controller.rb

@@ -14,12 +14,7 @@ class ExtensionsController < ApplicationController
   action_auth_level :index, :instructor
   def index
     @extensions = @assessment.extensions.includes(:course_user_datum)
-    @users = {}
-    @usersEncoded = {}
-    @course.course_user_data.each do |cud|
-      @users[cud.full_name_with_email] = cud.id
-      @usersEncoded[Base64.encode64(cud.full_name_with_email.strip).strip] = cud.id
-    end
+    retrieve_autocompletion_data!
     @new_extension = @assessment.extensions.new
   end
 

app/controllers/submissions_controller.rb

@@ -35,11 +35,7 @@ def new
         render([@course, @assessment, :submissions]) && return
       end
     else
-      @cuds = {}
-      # TODO: change order
-      @course.course_user_data.joins(:user).order("email ASC").each do |cud|
-        @cuds[cud.full_name_with_email] = cud.id
-      end
+      retrieve_autocompletion_data!
     end
   end
 

app/form_builders/form_builder_with_date_time_input.rb

@@ -126,16 +126,19 @@ def date_helper(name, options, strftime, date_format, alt_format)
     wrap_field name, field, options[:help_text]
   end
 
-  def wrap_field(name, field, help_text, display_name = nil)
-
+  def wrap_field(name, field, help_text = nil, display_name = nil)
     @template.content_tag :div, class: "input-field" do
       label(name, display_name, class: "control-label") +
          field + help_text(name, help_text)
     end
   end
 
   def help_text(_name, help_text)
-    @template.content_tag :p, help_text, class: "help-block"
+    if help_text.nil?
+      ""
+    else
+      @template.content_tag :p, help_text, class: "help-block"
+    end
   end
 
   def objectify_options(options)

app/helpers/gradebook_helper.rb

@@ -74,8 +74,8 @@ def gradebook_rows(matrix, course, section = nil, lecture = nil)
       row["id"] = cud.id
       row["email"] = cud.user.email
       row["student_gradebook_link"] = sgb_link
-      row["first_name"] = cud.user.first_name
-      row["last_name"] = cud.user.last_name
+      row["first_name"] = CGI.escapeHTML cud.user.first_name
+      row["last_name"] = CGI.escapeHTML cud.user.last_name
       row["section"] = cud.section
 
       # TODO: formalize score render stack, consolidate with computed score

app/views/common/_autocomplete.html.erb

@@ -0,0 +1,33 @@
+<script type="application/javascript">
+  /* requires @usersEncoded and @users to be set, i.e. via retrieve_autocompletion_data! */
+  jQuery(function() {
+      /* match user name/email with cud_id */
+      /* escape_javascript prevents issues with backslashes in names, etc. */
+      userData = {
+          <% @usersEncoded.each do |k,v| %>
+          "<%= j k %>": "<%= v %>",
+          <% end %>
+      };
+
+      /* user autocomplete */
+      $studentAutocompleteField = $('#student_autocomplete');
+      $hiddenCUDField = $('<%= hiddenCUDField %>');
+      $studentAutocompleteField.autocomplete({
+          data: {
+              <% @users.each do |k,v| %>
+              "<%= j k %>": null,
+              <% end %>
+          }
+      });
+
+      /* track changes in student autocomplete field */
+      $studentAutocompleteField.on('change', function() {
+          // urlsafe_encode64 uses '-' instead of '+' and '_' instead of '/'
+          // so we have to replace the corresponding characters
+          encoded = window.btoa($studentAutocompleteField.val())
+          encoded = encoded.replace("+", "-")
+          encoded = encoded.replace("/", "_")
+          $hiddenCUDField.val(userData[encoded]);
+      })
+  });
+</script>

app/views/extensions/index.html.erb

@@ -1,32 +1,9 @@
 <% @title = "Manage Extensions" %>
 
 <% content_for :javascripts do %>
-
+  <%= render partial: "common/autocomplete", locals: { hiddenCUDField: "#extension_course_user_datum_id" } %>
   <script type="application/javascript">
     jQuery(function() {
-      /* match user name/email with cud_id */
-      userData = {
-        <% @usersEncoded.each do |k,v| %>
-          "<%= k %>": "<%= v %>",
-        <% end %>
-      };
-
-      /* user autocomplete */
-      $studentAutocompleteField = $('#student_autocomplete');
-      $hiddenCUDField = $('#extension_course_user_datum_id');
-      $studentAutocompleteField.autocomplete({
-        data: {
-          <% @users.each do |k,v| %>
-            "<%= k %>": null,
-          <% end %>
-        }
-      });
-
-      /* track changes in student autocomplete field */
-      $studentAutocompleteField.on('change', function() {
-        $hiddenCUDField.val(userData[window.btoa($studentAutocompleteField.val())]);
-      })
-
       /* set up dates */
       $dueDate = moment("<%= @assessment.due_at.to_s %>", "YYYY-MM-DD hh:mm:ss ZZ").startOf('day');
 
@@ -102,9 +79,8 @@
     <p><b>Create New Extension</b></p>
       <%= form_for @new_extension, :as=>"extension", :url=>{:action=>"create"}, builder: FormBuilderWithDateTimeInput do |f| %>
         <div class="input-field">
-          <label class="control-label active" for="student_autocomplete">Student Name/Email</label>
-          <input type="text" id="student_autocomplete" placeholder="Start typing student name or email" class="autocomplete" autocomplete="off">
-          <p class="help-block"></p>
+          <input type="text" size="3" id="student_autocomplete" class="autocomplete" autocomplete="off"/>
+          <label for="student_autocomplete">Start typing student name or email</label>
         </div>
         <p>Select a new due date (Currently due at: <span class="moment-date-time"><%= @assessment.due_at.to_s %></span>)</p>
         <%= f.date_select :due_at, greater_than: @assessment.due_at, id: "extension_due_at" %><br>

app/views/submissions/new.html.erb

@@ -1,29 +1,5 @@
 <% content_for :javascripts do %>
-  <script type="application/javascript">
-    jQuery(function() {
-      userData = {
-        <% @cuds.each do |k,v| %>
-          "<%= k %>": "<%= v %>",
-        <% end %>
-      };
-
-      /* user autocomplete */
-      $studentAutocompleteField = $('#student_autocomplete');
-      $hiddenCUDField = $('#submission_course_user_datum_id');
-      $studentAutocompleteField.autocomplete({
-        data: {
-          <% @cuds.each do |k,v| %>
-            "<%= k %>": null,
-          <% end %>
-        }
-      });
-
-      /* track changes in student autocomplete field */
-      $studentAutocompleteField.on('change', function() {
-        $hiddenCUDField.val(userData[$studentAutocompleteField.val()]);
-      })
-    });
-  </script>
+  <%= render partial: "common/autocomplete", locals: { hiddenCUDField: "#submission_course_user_datum_id" } %>
 <% end %>
 
 <h2>Create Submission for <%= link_to @assessment.display_name, [@course, @assessment] %> </h2>