add some basic checks when batch creating users

templates/accounts_bulk_create.html

@@ -37,7 +37,7 @@
     </p>
     <p>Please note users created this way bypass some of the validations so check details such as email addresses are correct</p>
     <textarea id="csv" placeholder="Paste users content here" style="width: 300px; height: 100px;"></textarea><br/>
-    <input type="button" value="Load Data" onclick="createTable()" >
+    <input type="button" value="Load Data" _="on click createTable()" >
 
 
     <div>
@@ -101,7 +101,14 @@
                 myTbody.appendChild(myRow);
                 users.push(user)
                 emails.push(user.email)
-                $("#users-list").append(`<li>Name: ${user.first_name} ${user.last_name}<br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}</li>`)
+                $("#users-list").append(`<li>Name: ${user.first_name} ${user.last_name}<br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}<br/><button 
+                    hx-post="{% url 'accounts_bulk_create_check' %}"
+                    hx-trigger="load"
+                    hx-target="next span"
+                    name="user"
+                    class="hide"
+                    value='${JSON.stringify(user)}'
+                    >CHECK</button><span class="check-status"></span></li>`)
             }
             myTable.appendChild(myTbody);
 
@@ -112,6 +119,10 @@
 
             $("#users-list").append(`${users.length} users to create.`)
 
+            // Make sure the new hyperscript works
+            _hyperscript.processNode($("#users-list")[0]);
+            htmx.process($("#users-list")[0]);
+
             $("#user-list-json").val(JSON.stringify(users));
             $("#submit-users").show();
 
@@ -143,5 +154,18 @@
             margin: 10px;
             padding: 10px;
         }
+
+        .check-status {
+            color: blue;
+        }
+
+        .error {
+            color:red;
+        }
+
+        #users-list li:has(.error) {
+            border: 1px solid red;
+        }
+        
     </style>
 {% endblock content  %}