codeforlife-portal 5.32.2__py2.py3-none-any.whl → 8.9.9__py2.py3-none-any.whl

portal/templates/portal/teach/dashboard.html

@@ -1,5 +1,5 @@
 {% extends 'portal/base.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block scripts %}
@@ -8,46 +8,22 @@
 <script>
     var CONFIRMATION_DATA = {};
 
-    // store current hash, then remove it so the page doesn't jump to the section
-    const currentHash = window.location.hash
-    window.location.hash = ''
-
-    function updateLocationHash(hash) {
-        // using replaceState as changing hash directly will scroll to element
-        history.replaceState({}, '', hash)
-    }
-
     $(document).ready(function(){
-        // select the tab based on the current location hash
-        const tabs = $('.sub-nav [data-toggle="tab"]')
-        const tabNames = tabs.map((index, element) => $(element).attr('href')).toArray()
-        const currentTabIndex = tabNames.indexOf(currentHash)
-        if (currentTabIndex < 0) {
-            updateLocationHash(tabNames[0])
-        }
-        else {
-            updateLocationHash(tabNames[currentTabIndex])
-            tabs[currentTabIndex].click()
-            animate($(tabNames[currentTabIndex]).offset().top - bannerHeight)
-        }
-
-        // make each tab update the current location hash on click
-        tabs.on('shown.bs.tab', (event) => {
-            updateLocationHash(event.target.hash)
-            window.scrollTo(0, 0)
-        })
-
         $("#update-details").on("click", () => {
             $("#tab-account").click()
         })
 
+        {% if delete_account_confirm %}
+            showDeleteAccountConfirmation("{{ delete_account_form.delete_password.value }}", "{{ delete_account_form.unsubscribe_newsletter.value }}", {{ user.new_teacher.has_class|yesno:"true,false" }});
+        {% endif %}
+
         {% if show_onboarding_complete %}
             let title = "Registration complete! 🎉";
             let text = "<div class='popup-text'><small>You have successfully completed your registration and can now access and edit all of the information for your students through the teacher dashboard.</small></div>";
 
             showInfoPopup(title, text);
         {% endif %}
-    })
+})
 </script>
 {% endblock scripts %}
 
@@ -55,7 +31,11 @@
 <section class="banner banner--teacher">
     <h1 class="banner__text--primary">Welcome back, {{ user|make_into_username }}</h1>
 </section>
+{% if teacher.school %}
 <div class="sticky-subnav sub-nav sub-nav--teacher">
+{% else %}
+<div class="sticky-subnav sub-nav sub-nav--teacher" style="display: none;">
+{% endif %}
     <ul class="nav is-flex" role="tablist">
         <li class="active"><a id="tab-school" class="button button--secondary button--secondary--light" data-toggle="tab" href="#school">Your school</a></li>
         <li><a id="tab-classes" class="button button--secondary button--secondary--light" data-toggle="tab" href="#classes">Your classes</a></li>
@@ -66,6 +46,8 @@
 
 {% block content %}
 {% include "portal/partials/popup.html" %}
+{% include "portal/partials/delete_popup.html" %}
+{% include "portal/partials/invite_admin_teacher.html" %}
 
 {% if show_onboarding_complete %}
     {% include "portal/partials/info_popup.html" %}
@@ -75,25 +57,62 @@
 
 <div class="tab-content">
     <div id="school" class="tab-pane active">
-        {% if is_admin and join_requests %}
-            <div id="sticky-warning" class="sub-nav sub-nav--warning">
-                <span class="iconify sub-nav--icon" data-icon="mdi:alert-outline"></span>
-                <p><small><strong>You have pending requests from teachers wanting to join your school or club.
-                    <a id="requests_button" href="#requests">View the requests</a></strong></small></p>
-            </div>
-        {% endif %}
         <div class="background container">
             <section>
-                <h4>Your school: {% if user.new_teacher.school %} {{ user.new_teacher.school.name }} ({{ user.new_teacher.school.postcode }}){% endif %}</h4>
+                <h4>Your school: {% if user.new_teacher.school %} {{ user.new_teacher.school.name }}{% endif %}</h4>
             </section>
             {% if is_admin %}
-                <p>As an administrator of your school or club, you can select other teachers to whom you can provide or revoke
-                    administrative rights. You can also remove teachers from your school or club if they leave, and respond to requests from new teachers
-                    joining your organisation.</p>
-                <section>
-                    <a href="{% url 'invite_teacher' %}" class="button button--primary button--icon" name="invite_teacher">
-                        Invite a teacher<span class="iconify" data-icon="mdi:account-plus"></span></a>
-                </section>
+                <p>
+                    As an administrator of your school or club, you can select other teachers to whom you can provide or revoke
+                    administrative rights. You can also add and remove teachers from your school or club. As administrator, you have the ability
+                    to see and amend other teachers' classes. Please bear this in mind when assigning admin rights to other teachers.
+                </p>
+
+                <h5>Invite teachers to your school</h5>
+                <form autocomplete="off" method="post" class="p-0" onsubmit="showMakeAdminTeacherPopup(event)">
+                    {% csrf_token %}
+
+                    {{ invite_teacher_form.non_field_errors }}
+
+                    <div class="row form--row">
+                        <div class="form--row__input col-sm-4 col-md-4">
+                            <div class="input--icon">
+                                {{ invite_teacher_form.teacher_first_name }}<span class="iconify" data-icon="mdi:account-outline"></span>
+                            </div>
+                            <small>{{ invite_teacher_form.teacher_first_name.help_text }}</small>
+                            {{ invite_teacher_form.teacher_first_name.errors }}
+                        </div>
+                        <div class="form--row__input col-sm-4 col-md-4">
+                            <div class="input--icon">
+                                {{ invite_teacher_form.teacher_last_name }}<span class="iconify" data-icon="mdi:account-outline"></span>
+                            </div>
+                            <small>{{ invite_teacher_form.teacher_last_name.help_text }}</small>
+                            {{ invite_teacher_form.teacher_last_name.errors }}
+                        </div>
+                        <div class="form--row__input col-sm-4 col-md-4">
+                            <div class="input--icon">
+                                {{ invite_teacher_form.teacher_email }}<span class="iconify" data-icon="mdi:email-outline"></span>
+                            </div>
+                            <small>{{ invite_teacher_form.teacher_email.help_text }}</small>
+                            {{ invite_teacher_form.teacher_email.errors }}
+                        </div>
+                    </div>
+                    <div class="row form--row">
+                        <div class="form--row__input col-sm-12 col-md-12">
+                            <div class="form__checkbox">
+                                <div class="form__checkbox-input">
+                                    {{ invite_teacher_form.make_admin_ticked }}
+                                </div>
+                                <label for="id_{{ invite_teacher_form.make_admin_ticked.html_name }}">{{ invite_teacher_form.make_admin_ticked.label }}</label>
+                            </div>
+                            {{ invite_teacher_form.make_admin_ticked.errors }}
+                        </div>
+                    </div>
+                    <input type="hidden" name="invite_teacher"/>
+                    <button id="invite_teacher_button" type="submit" class="button button--primary button--icon m-0" name="invite_teacher_button">
+                        Invite teacher<span class="iconify" data-icon="mdi:email-outline"></span>
+                    </button>
+                </form>
             {% else %}
                 <h5>You can see which other teachers in your school or club are registered here. Should you need to leave the
                     school or club, you can do so below.</h5>
@@ -127,7 +146,7 @@
                                         Revoke admin<span class="iconify" data-icon="mdi:block"></span></button>
                                     {% else %}
                                         <button id="make_admin_button" class="button button--small button--primary button--icon"
-                                        onclick="showToggleAdminConfirmation('{% url 'organisation_toggle_admin' coworker.id %}', '{{ coworker.new_user.first_name|striptags | escapejs}}')">
+                                         onclick="showToggleAdminConfirmation('{% url 'organisation_toggle_admin' coworker.id %}')">
                                         Make admin<span class="iconify" data-icon="mdi:plus"></span></button>
                                     {% endif %}
                                     {% if coworker.new_user|has_2FA %}
@@ -147,6 +166,37 @@
                             {% endif %}
                         </tr>
                     {% endfor %}
+                    {% for sent_invite in sent_invites %}
+                        <tr>
+                            <td>
+                                <p>
+                                    <small>
+                                        {{ sent_invite.invited_teacher_first_name }}
+                                        {{ sent_invite.invited_teacher_last_name }}
+                                        {% if sent_invite.is_expired %}
+                                            <b>(expired)</b>
+                                        {% else %}
+                                            <b>(pending)</b>
+                                        {% endif %}
+                                    </small>
+                                </p>
+                            </td>
+                            <td><p><small>{% if sent_invite.invited_teacher_is_admin %} Administrator {% else %} Standard Teacher {% endif %} ({{ sent_invite.invited_teacher_email|emaildomain }})</small></p></td>
+                            <td class="cell-center">
+                                    {% if sent_invite.invited_teacher_is_admin %}
+                                        <button id="make_non_admin_button_invite" class='button button--small button--primary--danger button--icon'
+                                        onclick="postWithCsrf('{% url 'invite_toggle_admin' sent_invite.id %}');">
+                                        Revoke admin<span class="iconify" data-icon="mdi:block"></span></button>
+                                    {% else %}
+                                        <button id="make_admin_button_invite" class="button button--small button--primary button--icon"
+                                         onclick="showToggleAdminConfirmation('{% url 'invite_toggle_admin' sent_invite.id %}')">
+                                        Make admin<span class="iconify" data-icon="mdi:plus"></span></button>
+                                    {% endif %}
+                                    <button onclick="postWithCsrf('{% url 'resend_invite_teacher' sent_invite.token %}')" id="resend-invite" class="button button--small button--primary button--icon" >Resend invite<span class="iconify" data-icon="mdi:email-outline"></span></button>
+                                    <button onclick="postWithCsrf('{% url 'delete_teacher_invite' sent_invite.token %}')" id="delete-invite" class="button button--small button--primary--danger button--icon">Delete<span class="iconify" data-icon="mdi:delete-outline"></span></button>
+                            </td>
+                        </tr>
+                    {% endfor %}
                 </table>
                 <div class="row">
                     <p class="col-sm-6">Select ‘Delete’ to delete a teacher from your school or club. You will be able to move any existing classes assigned to that
@@ -176,48 +226,18 @@
         {% endif %}
 
         {% if is_admin %}
-            <div id="requests" class="background container">
-                {% if join_requests %}
-                    <h5>These teachers have requested to join your school or club</h5>
-                    <table id="request_table" class="header-primary data-primary">
-                        <tr>
-                            <th><p>Name</p></th>
-                            <th><p>Email address</p></th>
-                            <th colspan="3"><p>Actions</p></th>
-                        </tr>
-                        {% for join_request in join_requests %}
-                            <tr>
-                                <td><p><small>{{ join_request.new_user.first_name }} {{ join_request.new_user.last_name }}</small></p></td>
-                                <td><p><small>{{ join_request.new_user.email }}</small></p></td>
-                                <td class="cell-center" colspan="3">
-                                    <button id="allow_button" class="button button--small button--primary button--icon"
-                                    onclick="postWithCsrf('{% url 'organisation_allow_join' join_request.id %}');">
-                                    Allow<span class="iconify" data-icon="mdi:plus"></span></button>
-                                    <button id="deny_button" class="button button--small button--primary--danger button--icon"
-                                    onclick="postWithCsrf('{% url 'organisation_deny_join' join_request.id %}');">
-                                    Deny<span class="iconify" data-icon="mdi:block"></span></button>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                    </table>
-                {% else %}
-                    <h5>No teachers have currently requested to join your school or club.</h5>
-                {% endif %}
-            </div>
             <div id="school-details" class="background background--primary">
                 <div class="container">
                     <h5>Update details of your school or club</h5>
-                    <p>Update your school or club’s name and/or postcode.</p>
-                    <strong>These details are used to allow other teachers to join your team.</strong>
-                    <form id="edit_form" method="post">
+                    <form autocomplete="off" id="edit_form" method="post">
                         {% csrf_token %}
                         {{ update_school_form.non_field_errors }}
                         <div class="row form--row">
                             {% for field in update_school_form %}
-                                <div class="form--row__input col-sm-6 col-md-4">
+                                <div id="form-row-{{ field.name }}" class="form--row__input col-sm-6 col-md-4">
                                     <div class="input--icon">
                                         {{ field }}
-                                        {% if not field == update_school_form.country %}
+                                        {% if not field == update_school_form.country and not field == update_school_form.county %}
                                             <span class="iconify" data-icon="mdi:domain"></span>
                                         {% endif %}
                                     </div>
@@ -240,28 +260,44 @@
             <section>
                 <h4>Your classes</h4>
             </section>
-            <p>Below is a list of all the classes you teach. You can add a class or edit your existing classes. You can also accept or deny
-                requests from independent students wanting to join one of your classes.</p>
+            <p>Below is a list of all the classes in your school, including classes of other teachers. You can add a class or edit your existing classes.
+                You can also accept or deny requests from independent students wanting to join one of your classes.</p>
             {% if classes %}
                 <table id="classes-table" class="header-primary data-primary">
                     <tr>
                         <th><p>Class name</p></th>
                         <th><p>Access code</p></th>
+                        {% if is_admin %}
+                            <th><p>Teacher</p></th>
+                        {% endif %}
                         <th><p>Action</p></th>
                     </tr>
                     {% for class in classes %}
-                        <tr>
-                            <td><p><small>{{ class.name }}</small></p></td>
-                            <td class="mw-0">
-                                <div class="d-flex justify-content-between">
-                                    <div id="class-code-{{ class.access_code }}"><small>{{ class.access_code }}</small></div>
-                                    <div>
-                                        <a onclick="copyToClipboardFromElement(this, '#class-code-{{ class.access_code }}')" data-toggle="copyToClipboardTooltip">
-                                            <span class="iconify" data-icon="mdi:content-copy" title="Copy to clipboard"></span>
-                                        </a>
-                                    </div>
+                    <tr>
+                        <td><p><small>{{ class.name }}</small></p></td>
+                        <td class="mw-0">
+                            <div class="d-flex justify-content-between">
+                                <div id="class-code-{{ class.access_code }}"><small>{{ class.access_code }}</small></div>
+                                <div>
+                                    <a onclick="copyToClipboardFromElement(this, '#class-code-{{ class.access_code }}')" data-toggle="copyToClipboardTooltip">
+                                        <span class="iconify" data-icon="mdi:content-copy" title="Copy to clipboard"></span>
+                                    </a>
                                 </div>
+                            </div>
+                        </td>
+                        {% if is_admin %}
+                            <td>
+                                <p>
+                                    <small>
+                                        {% if user.email == class.teacher.new_user.email %}
+                                            You
+                                        {% else %}
+                                            {{ class.teacher }}
+                                        {% endif %}
+                                    </small>
+                                </p>
                             </td>
+                        {% endif %}
                             <td class="cell-center">
                                 <a id="class_button" href="{% url 'view_class' class.access_code %}"
                                    class="button button--small button--primary button--icon">
@@ -272,22 +308,14 @@
                     {% endfor %}
                 </table>
             {% else %}
-                <h5>It doesn't look like you have any classes assigned to you. To create a class, use the 'New Class' box below.</h5>
+                <p><strong>It doesn't look like you have any classes assigned to you. Go to the section below to create a new class.</strong></p>
             {% endif %}
             <section>
                 <h4>External requests to join your classes</h4>
             </section>
-            <p>External, or independent students may request to join your classes, if the student has been given a Class Access Code, and provided you
+            <p>External or independent students may request to join your classes if the student has been given a Class Access Code, and provided you
                 have enabled external requests for that class.</p>
             {% if requests %}
-                <p>The following users have made requests to join your classes. If you accept a request, you will be able to choose a
-                    name that is unique for the user in the class and then pass on their new login details. At this point, you will be able to manage them
-                    like any other student.</p>
-                <p>To conform to our security policy, the requested student’s username and email will be deleted on acceptance.
-                    These details are displayed here to enable you to identify them as genuine.</p>
-                <p>You should not accept a request from a student whose email and username you do not recognise, or if you weren’t
-                    expecting such a request.</p>
-
                 <table id="independent_request_table" class="header-primary data-primary">
                     <tr>
                         <th><p>Name</p></th>
@@ -300,44 +328,66 @@
                             <td><p><small>{{ join_request.new_user.first_name }}</small></p></td>
                             <td><p><small>{{ join_request.new_user.email }}</small></p></td>
                             <td><p><small>{{ join_request.pending_class_request.name }}
-                                ({{ join_request.pending_class_request.access_code }})</small></p></td>
+                                {% if user.email != join_request.pending_class_request.teacher.new_user.email %}
+                                    ({{ join_request.pending_class_request.teacher.new_user.first_name }}
+                                    {{ join_request.pending_class_request.teacher.new_user.last_name}})
+                                {% endif %}
+                            </small></p></td>
                             <td colspan="2" class="cell-center">
                                 <button id="allow_independent_button" class="button--small button--primary button--icon"
                                         onclick="postWithCsrf('{% url 'teacher_accept_student_request' join_request.id %}');">
                                     Add to class<span class="iconify" data-icon="mdi:plus"></span></button>
                                 <button id="deny_independent_button" class="button--small button--primary--danger button--icon"
                                         onclick="postWithCsrf('{% url 'teacher_reject_student_request' join_request.id %}');">
-                                    Reject request<span class="iconify" data-icon="mdi:block"></span></button>
+                                    Reject<span class="iconify" data-icon="mdi:block"></span></button>
                             </td>
                         </tr>
                     {% endfor %}
                 </table>
-                <br>
             {% else %}
-                <p><strong>No students have currently requested to join your classes.</strong></p>
+                <p><strong>No student has currently requested to join your classes.</strong></p>
             {% endif %}
         </div>
 
         <div id="new-class" class="background background--primary">
             <div class="container">
                 <h5>Create a new class</h5>
-                <p>When you set up a new class, a unique class access code will automatically be generated, with you being identified as the teacher for that
-                    class.</p>
-                <form method="post">
+                {% if is_admin %}
+                    <p>
+                        When you set up a new class, a unique class access code will automatically be generated for the
+                        teacher assigned to the class.
+                    </p>
+                {% else %}
+                    <p>
+                        When you set up a new class, a unique class access code will automatically be generated, with
+                        you being identified as the teacher for that class.
+                    </p>
+                {% endif %}
+
+                <form id="form-create-class" autocomplete="off" method="post">
 
                     {% csrf_token %}
 
                     {{ create_class_form.non_field_errors }}
 
                     <div class="row form--row">
-                        <div class="form--row__input col-sm-6 col-md-6">
+                        <div class="form--row__input col-sm-6 col-md-4">
                             <div class="input--icon">
                                 {{ create_class_form.class_name }}<span class="iconify" data-icon="mdi:account-multiple"></span>
                             </div>
                             <small>{{ create_class_form.class_name.help_text }}</small>
                             {{ create_class_form.class_name.errors }}
                         </div>
-                        <div class="form--row__input col-sm-12 col-md-6">
+                        {% if is_admin %}
+                            <div class="form--row__input col-sm-6 col-md-4">
+                                {{ create_class_form.teacher }}
+                                <small>{{ create_class_form.teacher.help_text }}</small>
+                                {{ create_class_form.teacher.errors }}
+                            </div>
+                        {% endif %}
+                    </div>
+                    <div class="row form--row">
+                        <div class="form--row__input col-sm-12 col-md-12">
                             <div class="form__checkbox">
                                 <div class="form__checkbox-input">
                                     {{ create_class_form.classmate_progress }}
@@ -359,7 +409,7 @@
                 <h4>Your account</h4>
             </section>
             <p>You can update your account details below.</p>
-            <form method="post" id="form-edit-teacher">
+            <form autocomplete="off" method="post" id="form-edit-teacher">
 
                 {% csrf_token %}
 
@@ -393,7 +443,7 @@
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.password }}
-                            <span class="iconify" data-icon="mdi:security"></span>
+                            <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.password.help_text }}</small>
                         {{ update_account_form.password.errors }}
@@ -401,6 +451,7 @@
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.confirm_password }}
+                            <span id="confirm-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.confirm_password.help_text }}</small>
                         {{ update_account_form.confirm_password.errors }}
@@ -408,7 +459,7 @@
                     <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ update_account_form.current_password }}
-                            <span class="iconify" data-icon="mdi:lock-outline"></span>
+                            <span id="current-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
                         </div>
                         <small>{{ update_account_form.current_password.help_text }}</small>
                         {{ update_account_form.current_password.errors }}
@@ -420,7 +471,7 @@
 
         <div class="background background--primary">
             <div class="container">
-                <h5>Two Factor Authentication</h5>
+                <h5>Two factor authentication</h5>
                 <p>Use your smartphone or tablet to enhance your account's security by using an authenticator app.</p>
                 {% if user|has_2FA %}
                     <div class="row row--regular">
@@ -441,7 +492,7 @@
                             <small class="text-danger"><strong>Note: Please make sure that you store any login details in a secure place.</strong></small>
                         </div>
                         <div class="col-sm-6">
-                            <h6>Disable Two Factor Authentication (2FA)</h6>
+                            <h6>Disable two factor authentication (2FA)</h6>
                             <p>We recommend you to continue using 2FA, however you can disable 2FA for your account using the button below.</p>
                             <div class="background">
                                 <a class="button button--primary button--primary--danger button--icon" href="{% url 'two_factor:disable' %}">
@@ -452,12 +503,56 @@
                 {% else %}
                     <div class="background">
                         <a class="button button--primary"
-                        href="{% url 'two_factor:setup' %}">Setup Two Factor Authentication</a>
+                        href="{% url 'two_factor:setup' %}">Setup two factor authentication</a>
                     </div>
                 {% endif %}
             </div>
         </div>
+
+        <div id="delete-account" class="background">
+            <div class="container">
+                <h5>Delete account</h5>
+                <p>If you no longer wish to have a Code for Life account, you can delete it by confirming below.
+                    You will receive an email to confirm this decision.
+                </p>
+                <p><b>This can't be reversed. All classes you've created will be permanently erased.</b>
+                </p>
+
+                <form autocomplete="off" method="post" id="form-delete-account">
+
+                {% csrf_token %}
+
+                {{ delete_account_form.non_field_errors }}
+
+                <div class="row form--row">
+                    <div class="form--row__input col-sm-6 col-md-4">
+                        <div class="input--icon">
+                            {{ delete_account_form.delete_password }}
+                            <span id="delete-password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                        </div>
+                        <small>{{ delete_account_form.delete_password.help_text }}</small>
+                        {{ delete_account_form.delete_password.errors }}
+                    </div>
+                    <div class="form--row__input col-sm-6 col-md-8">
+                        <div class="form__checkbox">
+                            <div class="form__checkbox-input">
+                                {{ delete_account_form.unsubscribe_newsletter }}
+                            </div>
+                            <label for="id_{{ delete_account_form.unsubscribe_newsletter.html_name }}">{{ delete_account_form.unsubscribe_newsletter.label }}</label>
+                        </div>
+                        {{ delete_account_form.unsubscribe_newsletter.errors }}
+                    </div>
+                </div>
+                <button id="delete_account_button" class="button button--primary button--primary--danger button--icon" name="delete_account">
+                    Delete account <span class="iconify" data-icon="mdi:delete-outline"></span>
+                </button>
+                </form>
+            </div>
+        </div>
     </div>
 </div>
 
-{% endblock content %}
+<script type="text/javascript"
+        src="{% static 'portal/js/school.js' %}"></script>
+
+{% endblock content %}

portal/templates/portal/teach/invited.html

@@ -0,0 +1,90 @@
+{% extends 'portal/base.html' %}
+{% load static %}
+{% load app_tags %}
+
+{% block content %}
+<div class="container registration justify-content-center">
+    <div class="form--register--text form--register form--register--teacher ml-0 col-xs-6">
+        <div class="form-div form">
+            <h4>Complete registration</h4>
+
+            {% if error_message %}
+            <ul class="errorlist">
+                <li>{{ error_message }}</li>
+            </ul>
+            {% else %}
+            <div class="row form--row">
+                <p class="semi-bold">
+                    Please create a password to complete your onboarding. It should be 10 characters long and a mix of
+                    upper and lower case letters, numbers and special characters, making it hard to guess.
+                </p>
+            </div>
+
+            <form class="d-flex flex-column" method="post" id="teacher-register-form" autocomplete="off">
+
+                {% csrf_token %}
+
+                {{ invited_teacher_form.non_field_errors }}
+
+                <div class="row form--row">
+                    <label for="{{ invited_teacher_form.teacher_password.auto_id }}"></label>
+                    <div class="input--icon">
+                        {{ invited_teacher_form.teacher_password }}
+                        <span id="teacher-password-field-icon" class="iconify"
+                            data-icon="material-symbols:visibility-off" ></span>
+                    </div>
+                    <small>{{ invited_teacher_form.teacher_password.help_text }}</small>
+                    {{ invited_teacher_form.teacher_password.errors }}
+                </div>
+                <div class="row form--row">
+                    <label for="{{ invited_teacher_form.teacher_confirm_password.auto_id }}"></label>
+                    <div class="input--icon">
+                        {{ invited_teacher_form.teacher_confirm_password }}
+                        <span id="teacher-confirm-password-field-icon" class="iconify"
+                            data-icon="material-symbols:visibility-off" ></span>
+                    </div>
+                    <small>{{ invited_teacher_form.teacher_confirm_password.help_text }}</small>
+                    {{ invited_teacher_form.teacher_confirm_password.errors }}
+                </div>
+
+                <div class="row--under">
+                    <div class="password-strength-container">
+                        <div id="teacher-password-sign" class="password-strength-sign"></div>
+                        <div id="teacher-password-text" class="password-strength-text"></div>
+                    </div>
+                </div>
+
+                <div class="row form--row">
+                    <div class="form__checkbox">
+                        <div class="form__checkbox-input">
+                            {{ invited_teacher_form.consent_ticked }}
+                        </div>
+                        <p class="semi-bold">I have read and understood the <a href="{% url 'terms' %}" target="_blank">Terms of use</a>
+                            and the <a href="{% url 'privacy_notice' %}" target="_blank">Privacy Notice</a>.</p>
+                    </div>
+                </div>
+                <div class="row form--row">
+                    {% include 'portal/partials/register_newsletter_tickbox.html' with newsletter_ticked=invited_teacher_form.newsletter_ticked %}
+                </div>
+
+                <div class="d-flex justify-content-end row">
+                    <button class="button button--home button--primary teacher--home--button button--icon" type="submit" name="teacher_signup"> Register<span class="iconify" data-icon="mdi:chevron-right"></span></button>
+                </div>
+
+            </form>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% include "portal/partials/service_unavailable_popup.html" %}
+
+<script>
+    const password_id = '{{ invited_teacher_form.teacher_password.auto_id }}';
+    var TEACHER_PASSWORD_FIELD_ID = password_id;
+    var INDEP_STUDENT_PASSWORD_FIELD_ID = password_id;
+</script>
+
+<script type="text/javascript" src="{% static 'portal/js/passwordStrength.js' %}"></script>
+
+{% endblock content %}

portal/templates/portal/teach/onboarding_classes.html

@@ -1,5 +1,5 @@
 {% extends 'portal/teach/base_registering.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block content %}
@@ -43,7 +43,7 @@
                 {{ form.non_field_errors }}
 
                 <div class="row form--row">
-                    <div class="form--row__input col-sm-6 col-md-6">
+                    <div class="form--row__input col-sm-6 col-md-4">
                         <div class="input--icon">
                             {{ form.class_name }}
                             <span class="iconify" data-icon="mdi:account-multiple"></span>
@@ -51,7 +51,9 @@
                         <small>{{ form.class_name.help_text }}</small>
                         {{ form.class_name.errors }}
                     </div>
-                    <div class="form--row__input col-sm-12 col-md-6">
+                </div>
+                <div class="row form--row">
+                    <div class="form--row__input col-sm-12 col-md-12">
                         <div class="form__checkbox">
                             <div class="form__checkbox-input">
                                 {{ form.classmate_progress }}