💻 Create student accounts in bulk (#5864)

This PR redesigns the screen that allows teachers to create multiple student accounts for a class. As discussed during the contributors' meetings the page should allow teachers to:
- create students and let Hedy auto generate passwords
- create students and provide their own passwords using a semicolon as a separator
- paste a two-column spreadsheet and expect Hedy to transform the input accordingly
- copy to clipboard and print the successfully created accounts

Fixes #3936 

Things to note
- When an error occurs, the error message does not go away until you remove it through its close button. This is done intentionally because the error message could point out which rows of your input are incorrect. So, if it just goes away after x seconds, I think this could be very inconvenient.
- The loading indicator which is displayed when the accounts are being created should take the whole page, because we do not want people to go away from the page while accounts are being created. The loading indicator is currently in the layout.html as an attempt to make it reusable but maybe when it takes the whole page, it will not be reusable.

**How to test**
Features to test:
- You should be able to create one or multiple student accounts with and without passwords.
- When you print from Excel, the separators should be automatically changed to semicolons. Note that this should work if you use Ctrl/Cmd + V or right-click and chose Paste from the context menu.
- You should also be able to successfully create student accounts when you are a second teacher. In the devdb teacher4 is a second teacher of CLASS1.
- You should be able to print and copy to clipboard the successfully created accounts. Note that sometimes when you try to print the accounts information, the borders of the table will not be shown in the print-preview screen. I do not know why this happens, but the they are correctly printed. I use 'Save to PDF' functionality and the pdf files look great.

Errors to test:
- You forgot to put in any usernames.
- You tried to create usernames with invalid characters. Currently these are `@` and `:`.
- You got the auto generate passwords toggle checked, but you provided usernames and passwords correctly separated with semicolon. In this case you should get a specific error that directs you to the toggle. 
- You got the auto generate passwords toggle unchecked, but you provided only usernames and no passwords. In this case you should get a nice error directing you to the toggle.
- You got the auto generate passwords toggle unchecked and you provide multiple usernames and passwords. However, only 1 row is missing a semicolon. You should get an error that directs you to this row.
- You got the auto generate passwords toggle unchecked but some of your passwords are less than 6 characters.
- You supplied the same username twice, with auto generated passwords on and off.
- You supplied a username that is already stored in the database. You should get an error and a way to resolve it.
- You tried to create more than 100 usernames.

Co-Authored-By: jpelay <[email protected]>
Co-Authored-By: Jesús Pelay <[email protected]>

messages.pot

@@ -149,12 +149,6 @@ msgstr ""
 msgid "account_overview"
 msgstr ""
 
-msgid "accounts_created"
-msgstr ""
-
-msgid "accounts_intro"
-msgstr ""
-
 msgid "actions"
 msgstr ""
 
@@ -254,6 +248,9 @@ msgstr ""
 msgid "all_class_highscores"
 msgstr ""
 
+msgid "all_rows_missing_separator"
+msgstr ""
+
 msgid "already_account"
 msgstr ""
 
@@ -398,6 +395,9 @@ msgstr ""
 msgid "contributor"
 msgstr ""
 
+msgid "copy_accounts_to_clipboard"
+msgstr ""
+
 msgid "copy_clipboard"
 msgstr ""
 
@@ -431,6 +431,9 @@ msgstr ""
 msgid "create_accounts"
 msgstr ""
 
+msgid "create_accounts_placeholder"
+msgstr ""
+
 msgid "create_accounts_prompt"
 msgstr ""
 
@@ -440,21 +443,33 @@ msgstr ""
 msgid "create_class"
 msgstr ""
 
-msgid "create_multiple_accounts"
-msgstr ""
-
 msgid "create_student_account"
 msgstr ""
 
 msgid "create_student_account_explanation"
 msgstr ""
 
+msgid "create_student_accounts"
+msgstr ""
+
 msgid "create_teacher_account"
 msgstr ""
 
 msgid "create_teacher_account_explanation"
 msgstr ""
 
+msgid "create_usernames_and_passwords_desc"
+msgstr ""
+
+msgid "create_usernames_and_passwords_title"
+msgstr ""
+
+msgid "create_usernames_desc"
+msgstr ""
+
+msgid "create_usernames_title"
+msgstr ""
+
 msgid "creator"
 msgstr ""
 
@@ -557,9 +572,6 @@ msgstr ""
 msgid "download"
 msgstr ""
 
-msgid "download_login_credentials"
-msgstr ""
-
 msgid "duplicate"
 msgstr ""
 
@@ -692,9 +704,6 @@ msgstr ""
 msgid "general_settings"
 msgstr ""
 
-msgid "generate_passwords"
-msgstr ""
-
 msgid "get_certificate"
 msgstr ""
 
@@ -1205,6 +1214,9 @@ msgstr ""
 msgid "passwords_six"
 msgstr ""
 
+msgid "passwords_too_short"
+msgstr ""
+
 msgid "pending_invites"
 msgstr ""
 
@@ -1226,9 +1238,6 @@ msgstr ""
 msgid "phone_number"
 msgstr ""
 
-msgid "postfix_classname"
-msgstr ""
-
 msgid "preferred_keyword_language"
 msgstr ""
 
@@ -1253,6 +1262,9 @@ msgstr ""
 msgid "previous_page"
 msgstr ""
 
+msgid "print_accounts"
+msgstr ""
+
 msgid "print_logo"
 msgstr ""
 
@@ -1295,6 +1307,9 @@ msgstr ""
 msgid "prompt_join_class"
 msgstr ""
 
+msgid "provided_username_duplicates"
+msgstr ""
+
 msgid "public"
 msgstr ""
 
@@ -1409,9 +1424,6 @@ msgstr ""
 msgid "reset_password"
 msgstr ""
 
-msgid "reset_view"
-msgstr ""
-
 msgid "restart"
 msgstr ""
 
@@ -1538,6 +1550,9 @@ msgstr ""
 msgid "solution_example_explanation"
 msgstr ""
 
+msgid "some_rows_missing_separator"
+msgstr ""
+
 msgid "something_went_wrong_keyword_parsing"
 msgstr ""
 
@@ -1574,6 +1589,9 @@ msgstr ""
 msgid "student"
 msgstr ""
 
+msgid "student_accounts_created"
+msgstr ""
+
 msgid "student_adventures_table"
 msgstr ""
 
@@ -1754,6 +1772,9 @@ msgstr ""
 msgid "token_invalid"
 msgstr ""
 
+msgid "too_many_accounts"
+msgstr ""
+
 msgid "tooltip_level_locked"
 msgstr ""
 
@@ -1790,9 +1811,6 @@ msgstr ""
 msgid "unfavourite_success"
 msgstr ""
 
-msgid "unique_usernames"
-msgstr ""
-
 msgid "unknown_variable_role"
 msgstr ""
 
@@ -1820,6 +1838,12 @@ msgstr ""
 msgid "updating_indicator"
 msgstr ""
 
+msgid "use_custom_passwords"
+msgstr ""
+
+msgid "use_generated_passwords"
+msgstr ""
+
 msgid "use_of_blanks_exception"
 msgstr ""
 
@@ -1841,6 +1865,12 @@ msgstr ""
 msgid "username"
 msgstr ""
 
+msgid "username_contains_invalid_symbol"
+msgstr ""
+
+msgid "username_contains_separator"
+msgstr ""
+
 msgid "username_empty"
 msgstr ""
 
@@ -1853,7 +1883,10 @@ msgstr ""
 msgid "username_three"
 msgstr ""
 
-msgid "usernames_exist"
+msgid "usernames_too_short"
+msgstr ""
+
+msgid "usernames_unavailable"
 msgstr ""
 
 msgid "value"

static/css/additional.css

@@ -301,4 +301,35 @@ kbd {
   pre {
     text-align: start;
   } 
-}
+}
+
+
+#loading_spinner {
+  border: 16px solid #f7f7f7;
+  border-top: 16px solid #2977ff;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  z-index: 101;
+  animation: spin 2s linear infinite;
+  position: fixed;
+  top: calc(50% - 60px);
+  left: calc(50% - 60px);
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+#loading_mask {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(192, 192, 192, 0.5);
+}
+