[UI] Improves create multiple accounts UI (hedyorg#3777)

**Description** In this PR we improve the UI of the multiple accounts creation page. The following changes are made: - When pressing `+` 5 rows are added instead of one - The `generate passwords` button is replace by a toggle - When passwords are generated the input field is greyed out and disabled - Add a button to prefix all usernames with the class name **Fixes** This PR fixes hedyorg#3774. **How to test** Make sure you are a teacher and have class. Verify the new functionalities by adding students by creating new accounts.
jl200589 · Dec 8, 2022 · 2c3dbe5 · 2c3dbe5
1 parent e67fb34
commit 2c3dbe5
Show file tree

Hide file tree

Showing 46 changed files with 2,160 additions and 2,608 deletions.
diff --git a/build-tools/heroku/tailwind/styles.css b/build-tools/heroku/tailwind/styles.css
@@ -258,6 +258,10 @@ ol {
 }
 
 /* AUTH */
+input:disabled {
+  @apply border-gray-500 bg-gray-400;
+}
+
 input[type=checkbox], input[type=radio] {
   @apply appearance-none border border-gray-400 w-4 h-4;
 }
@@ -508,20 +512,20 @@ p.close-dialog {
   transition: all 0.5s ease-in-out;
 }
 
-body[dir='rtl'] #keyword_toggle_container input:checked ~ .toggle-circle {
+body[dir='rtl'] input:checked ~ .toggle-circle {
   transform: translateX(-200%);
 }
 
-body[dir='ltr'] #keyword_toggle_container input:checked ~ .toggle-circle {
+body[dir='ltr'] input:checked ~ .toggle-circle {
   transform: translateX(200%);
 }
 
-body[dir='rtl'] #developers_toggle_container input:checked ~ .toggle-circle {
+body[dir='rtl'] input:checked ~ .toggle-circle {
   transform: translateX(-100%);
   @apply bg-green-400;
 }
 
-body[dir='ltr'] #developers_toggle_container input:checked ~ .toggle-circle {
+body[dir='ltr'] input:checked ~ .toggle-circle {
   transform: translateX(100%);
   @apply bg-green-400;
 }

diff --git a/messages.pot b/messages.pot
@@ -8,14 +8,14 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2022-11-17 13:12+0000\n"
+"POT-Creation-Date: 2022-12-08 14:32+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.11.0\n"
+"Generated-By: Babel 2.10.1\n"
 
 msgid "program_contains_error"
 msgstr ""
@@ -467,6 +467,9 @@ msgstr ""
 msgid "generate_passwords"
 msgstr ""
 
+msgid "postfix_classname"
+msgstr ""
+
 msgid "reset_view"
 msgstr ""
 
@@ -653,9 +656,6 @@ msgstr ""
 msgid "students"
 msgstr ""
 
-msgid "view"
-msgstr ""
-
 msgid "duplicate"
 msgstr ""
 
@@ -671,6 +671,9 @@ msgstr ""
 msgid "last_update"
 msgstr ""
 
+msgid "view"
+msgstr ""
+
 msgid "edit"
 msgstr ""
 
@@ -767,9 +770,15 @@ msgstr ""
 msgid "regress_button"
 msgstr ""
 
+msgid "disabled_button_locked"
+msgstr ""
+
 msgid "advance_button"
 msgstr ""
 
+msgid "disabled_button_quiz"
+msgstr ""
+
 msgid "developers_mode"
 msgstr ""
 
@@ -1540,3 +1549,4 @@ msgstr ""
 
 msgid "title_class logs"
 msgstr ""
+
diff --git a/static/css/generated.css b/static/css/generated.css
diff --git a/static/js/appbundle.js b/static/js/appbundle.js
diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/teachers.ts b/static/js/teachers.ts
@@ -491,16 +491,24 @@ export function add_account_placeholder() {
     let row = $("#account_row_unique").clone();
     row.removeClass('hidden');
     row.attr('id', "");
-    // Set all inputs expect class to required
+    // Set all inputs except class to required
     row.find(':input').each(function() {
        if ($(this).prop('id') != 'classes') {
            $(this).prop('required', true);
        }
     });
-    row.appendTo("#account_rows_container");
+    // Append 5 rows at once
+    for (let x = 0; x < 5; x++) {
+        row.clone().appendTo("#account_rows_container");
+    }
 }
 
 export function generate_passwords() {
+    if (!$('#passwords_toggle').is(":checked")) {
+        $('.passwords_input').val('');
+        $('.passwords_input').prop('disabled', false);
+        return;
+    }
     $('.account_row').each(function () {
         if ($(this).is(':visible')) {
             $(this).find(':input').each(function () {
@@ -511,6 +519,14 @@ export function generate_passwords() {
             });
         }
     });
+    $('.passwords_input').prop('disabled', true);
+}
+
+export function append_classname() {
+    const classname = <string>$('#classes').val();
+    $('.usernames_input').each(function () {
+        $(this).val($(this).val() + "_" + classname);
+    });
 }
 
 export function create_accounts(prompt: string) {

diff --git a/templates/create-accounts.html b/templates/create-accounts.html
@@ -18,9 +18,9 @@ <h2 class="w-full text-center my-0 py-0">{{_('class')}}</h2>
             <div class="flex flex-col" id="account_rows_container">
                 <!-- we create one hidden row -> we can simply copy this one and append() below when adding rows -->
                 {% for i in range(5) %}
-                    <div class="flex flex-row w-full gap-4 items-center mb-4 account_row {% if i == 0 %}hidden{% endif %}" {% if i == 0 %}id="account_row_unique"{% endif %}>
-                        <input id="username" name="username" {% if i != 0 %}required{% endif %} type=text placeholder="{{_('username')}}" class="w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
-                        <input id="password" name="password" {% if i != 0 %}required{% endif %} minlength="6" type=text placeholder="{{_('password')}}" class="w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
+                    <div class="flex flex-row w-full gap-2 items-center mb-4 account_row {% if i == 0 %}hidden{% endif %}" {% if i == 0 %}id="account_row_unique"{% endif %}>
+                        <input id="username" autocomplete="off" name="username" {% if i != 0 %}required{% endif %} type=text placeholder="{{_('username')}}" class="usernames_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
+                        <input id="password" autocomplete="off" name="password" {% if i != 0 %}required{% endif %} minlength="6" type=text placeholder="{{_('password')}}" class="passwords_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
                         <input id="classes" name="class" value="{{current_class.name}}" disabled class="w-full block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded">
                         <svg class="fill-current w-40 text-red-500 cursor-pointer" xmlns="http://www.w3.org/2000/svg" onclick="$(this).parent().remove();" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
                     </div>
@@ -45,8 +45,18 @@ <h2 class="w-full text-center my-0 py-0">{{_('class')}}</h2>
         </div>
         <div class="flex flex-row mt-4">
             <button class="green-btn" onclick="window.open('/for-teachers/class/{{ current_class.id }}', '_self');">{{_('back_to_class')}}</button>
-            <div class="ltr:ml-auto flex flex-row gap-2">
-                <button class="yellow-btn text-white" onclick="hedyApp.generate_passwords();">{{_('generate_passwords')}}</button>
+            <div class="ltr:ml-auto flex flex-row items-center gap-2">
+                <div class="mx-auto border-gray-400 border-2 rounded-full py-2 px-4">
+                  <label for="passwords_toggle" class="flex flex-row items-center justify-center cursor-pointer">
+                    <div class="relative">
+                      <input id="passwords_toggle" type="checkbox" onclick="hedyApp.generate_passwords()" class="sr-only" />
+                      <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
+                      <div class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" id="toggle_circle"></div>
+                    </div>
+                    <div class="ltr:ml-3 rtl:mr-3">{{_('generate_passwords')}}</div>
+                  </label>
+                </div>
+                <button class="yellow-btn text-white" onclick="hedyApp.append_classname();">{{_('postfix_classname')}}</button>
                 <button type="reset" class="red-btn" onclick="window.open('/for-teachers/create-accounts/{{ current_class.id }}', '_self');">
                     {{_('reset_view')}}</button>
                 <button type="submit" class="blue-btn px-4">{{_('create_accounts')}}</button>

diff --git a/translations/ar/LC_MESSAGES/messages.po b/translations/ar/LC_MESSAGES/messages.po
@@ -1,19 +1,18 @@
+
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2022-11-14 09:21+0100\n"
+"POT-Creation-Date: 2022-12-08 14:32+0100\n"
 "PO-Revision-Date: 2022-12-07 05:55+0000\n"
 "Last-Translator: Alaaeddin Swidan <[email protected]>\n"
-"Language-Team: ar <[email protected]>\n"
 "Language: ar\n"
+"Language-Team: ar <[email protected]>\n"
+"Plural-Forms: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 ? 4 : 5;\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Plural-Forms: nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 "
-"&& n%100<=10 ? 3 : n%100>=11 ? 4 : 5;\n"
-"X-Generator: Weblate 4.15-dev\n"
-"Generated-By: Babel 2.11.0\n"
+"Generated-By: Babel 2.10.1\n"
 
 msgid "program_contains_error"
 msgstr "هذا البرنامج يحتوي على خطأ، هل أنت متأكد من أنك تريد مشاركة البرنامج؟"
@@ -496,6 +495,9 @@ msgstr "لا"
 msgid "generate_passwords"
 msgstr "Generate passwords"
 
+msgid "postfix_classname"
+msgstr ""
+
 msgid "reset_view"
 msgstr "اعادة ضبط"
 
@@ -702,9 +704,6 @@ msgstr "صفوفي"
 msgid "students"
 msgstr "تلاميذ"
 
-msgid "view"
-msgstr "عرض"
-
 #, fuzzy
 msgid "duplicate"
 msgstr "Duplicate"
@@ -721,6 +720,9 @@ msgstr "مغامراتي"
 msgid "last_update"
 msgstr "اخر تحديث"
 
+msgid "view"
+msgstr "عرض"
+
 #, fuzzy
 msgid "edit"
 msgstr "Edit"
@@ -829,9 +831,17 @@ msgstr "القراءة بصوت عال"
 msgid "regress_button"
 msgstr "الرجوع الى المستوى {level}"
 
+#, fuzzy
+msgid "disabled_button_locked"
+msgstr "Your teacher hasn't unlocked this level yet"
+
 msgid "advance_button"
 msgstr "الذهاب الى المستوى {level}"
 
+#, fuzzy
+msgid "disabled_button_quiz"
+msgstr "Your quiz score is below the threshold, try again!"
+
 msgid "developers_mode"
 msgstr "وضع المبرمج"
 
@@ -1284,6 +1294,30 @@ msgstr "With a teacher account, you can save your programs and see the results o
 msgid "create_student_account_explanation"
 msgstr "You can save your own programs with an account."
 
+#, fuzzy
+msgid "heard_about_hedy"
+msgstr "How have you heard about Hedy?"
+
+#, fuzzy
+msgid "from_another_teacher"
+msgstr "From another teacher"
+
+#, fuzzy
+msgid "social_media"
+msgstr "Social media"
+
+#, fuzzy
+msgid "from_video"
+msgstr "From a video"
+
+#, fuzzy
+msgid "from_magazine_website"
+msgstr "From a magazine or website"
+
+#, fuzzy
+msgid "other_source"
+msgstr "Other"
+
 msgid "programming_experience"
 msgstr "هل لديك خبرة سابقة في البرمجة؟"
 
@@ -1437,6 +1471,10 @@ msgstr "الرجاء تحديد جنس صالح واختيار (أنثى ، ذك
 msgid "country_invalid"
 msgstr "الرجاء اختيار بلد صحيح."
 
+#, fuzzy
+msgid "heard_about_invalid"
+msgstr "Please select a valid way you heard about us."
+
 msgid "experience_invalid"
 msgstr "الرجاء اختيار الخبرة بشكل صحيح (نعم ، لا)."
 
@@ -1654,38 +1692,3 @@ msgstr "هيدي - انضم الى صف"
 #~ msgid "only_teacher_create_class"
 #~ msgstr "يمكن للمعلمين فقط انشاء صفوف!"
 
-#, fuzzy
-msgid "disabled_button_locked"
-msgstr "Your teacher hasn't unlocked this level yet"
-
-#, fuzzy
-msgid "disabled_button_quiz"
-msgstr "Your quiz score is below the threshold, try again!"
-
-#, fuzzy
-msgid "heard_about_hedy"
-msgstr "How have you heard about Hedy?"
-
-#, fuzzy
-msgid "from_another_teacher"
-msgstr "From another teacher"
-
-#, fuzzy
-msgid "social_media"
-msgstr "Social media"
-
-#, fuzzy
-msgid "from_video"
-msgstr "From a video"
-
-#, fuzzy
-msgid "from_magazine_website"
-msgstr "From a magazine or website"
-
-#, fuzzy
-msgid "other_source"
-msgstr "Other"
-
-#, fuzzy
-msgid "heard_about_invalid"
-msgstr "Please select a valid way you heard about us."