Fix the teachers bulk creation page

Author: cycomachead

static/scss/snapcloud.scss

@@ -18,6 +18,7 @@
   --navbar-height: 64px;
   /* this is the minimum I think w/ all 5 columns of links */
   --estimated-footer-height: 450px;
+  --white-hamburger: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath strok;e='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
 // We often use 1/5 width items.
@@ -34,7 +35,7 @@
 [data-bs-theme=dark] {
   /* Ensure the hamburger icon is solid white. Seems to be no easier way to fix this. */
   & .navbar-toggler-icon {
-    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    --bs-navbar-toggler-icon-bg: var(--white-hamburger);
   }
 }
 

static/style/compiled/snapcloud.css

@@ -3,7 +3,7 @@
 <h1><%- locale.get('bulk_tile') %></h1>
 
 <div class="row">
-    <div class="col js-bulkCreation">
+    <div class="col">
         <p><%- locale.get('bulk_text') %></p>
         <div>
             <p>Example:</p>
@@ -15,7 +15,8 @@ myclass-student2,sentences-make-good-passwords</pre>
     </div>
 </div>
 
-<div class="row">
+<!-- This section contains all the controls used for JS / manipulating CSVs, etc. -->
+<div class="row js-bulkCreation">
     <div class="col-md-6 col-sm-12">
         <p><strong>Upload a CSV file:</strong></p>
         <div class="input-group mb-3">
@@ -30,7 +31,7 @@ myclass-student2,sentences-make-good-passwords</pre>
                 style="font-family: monospace"></textarea>
         </details>
         <p>
-            <div class="form-check form-switch">
+            <div class="form-check form-switch js-createCollection">
                 <input id="add_collection"
                     type="checkbox" class="add-collection form-check-input" name="add_collection"
                     onchange="document.querySelector('div.collection').hidden =
@@ -45,49 +46,57 @@ myclass-student2,sentences-make-good-passwords</pre>
                 <input id="collection_name" name="collection_name" class="collection_name form-control" />
             </div>
         </p>
-            <button class="btn btn-primary" onclick="
-                var div = document.querySelector('div.js-bulkCreation'),
-                    collection_name =
-                        div.querySelector('input.add-collection').checked ?
-                            div.querySelector('.collection_name').value :
-                            null,
-                    file = div.querySelector('.csv').files[0],
-                    csv_text = div.querySelector('#csv_text').value;
-
-                if (file) {
-                    file.text().then(data => processCSV(data));
-                } else if (csv_text) {
-                    processCSV(csv_text);
-                }
-
-                function processCSV (csv_data) {
-                    if (csv_data.substring(0,8) !== 'username') {
-                        csv_data = 'username,password\n' + csv_data;
-                    }
-                    Papa.parse(
-                        csv_data,
-                        {
-                            skipEmptyLines: true,
-                            header: true,
-                            complete: (results) => {
-                                let post_body = { users: results.data };
-                                if (collection_name) {
-                                    post_body.collection_name = collection_name;
-                                }
-                                cloud.post(
-                                    '/users/create_learners',
-                                    null,
-                                    post_body
-                                );
-                            }
-                        }
-                    );
-                };
-            "><%- locale.get('bulk_create') %></button>
+            <button type="button"
+                class="btn btn-primary js-createLearners"><%- locale.get('bulk_create') %></button>
             <script>
                 document.querySelector('div.collection').hidden =
                     !document.querySelector('input.add-collection').checked;
             </script>
         </div>
     </div>
 </div>
+
+<script type="text/javascript">
+window.onload = () => {
+    let create_learners = function() {
+        var div = document.querySelector('div.js-bulkCreation'),
+        collection_name =
+            div.querySelector('input.add-collection').checked ?
+                div.querySelector('.collection_name').value :
+                null,
+        file = div.querySelector('.csv').files[0],
+        csv_text = div.querySelector('#csv_text').value;
+
+        if (file) {
+            file.text().then(data => processCSV(data));
+        } else if (csv_text) {
+            processCSV(csv_text);
+        }
+
+        function processCSV (csv_data) {
+            if (csv_data.trim().substring(0,8) !== 'username') {
+                csv_data = 'username,password\n' + csv_data;
+            }
+            Papa.parse(
+                csv_data,
+                {
+                    skipEmptyLines: true,
+                    header: true,
+                    complete: (results) => {
+                        let post_body = { users: results.data };
+                        if (collection_name) {
+                            post_body.collection_name = collection_name;
+                        }
+                        cloud.post(
+                            '/users/create_learners',
+                            null,
+                            post_body
+                        );
+                    }
+                }
+            );
+        };
+    };
+    document.querySelector('.js-createLearners').addEventListener('click', create_learners);
+}
+</script>