diff --git a/hypha/apply/users/templates/wagtailusers/users/edit.html b/hypha/apply/users/templates/wagtailusers/users/edit.html
index 1846bcb2872d6e8993df85cdbde49bc80ad9353c..6a8aa8d501281b72031c6d065fa74cc55b0beffe 100644
--- a/hypha/apply/users/templates/wagtailusers/users/edit.html
+++ b/hypha/apply/users/templates/wagtailusers/users/edit.html
@@ -1,79 +1,112 @@
<!-- Override the Wagtail's user edit template to add a custom 'Disable 2FA' button to account section-->
{% extends "wagtailusers/users/edit.html" %}
{% load i18n wagtailimages_tags users_tags %}
+{% load wagtailimages_tags %}
+{% load users_tags %}
+{% load i18n %}
{% block content %}
{% trans "Editing" as editing_str %}
{% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=user.get_username merged=1 tabbed=1 icon="user" %}
- <ul class="tab-nav merged">
- <li class="active"><a href="#account">{% trans "Account" %}</a></li>
- <li><a href="#roles">{% trans "Roles" %}</a></li>
- </ul>
+ <div class="w-tabs" data-tabs>
+ <div class="w-tabs__wrapper">
+ <div role="tablist" class="w-tabs__list nice-padding">
+ {% trans "Account" as account_text %}
+ {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='account' title=account_text %}
+ {% trans "Roles" as roles_text %}
+ {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='roles' title=roles_text %}
+ </div>
+ </div>
- <form action="{% url 'wagtailusers_users:edit' user.pk %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
- <div class="tab-content">
- {% csrf_token %}
+ <form action="{% url 'wagtailusers_users:edit' user.pk %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
+ <div class="tab-content nice-padding">
+ {% csrf_token %}
- <section id="account" class="active nice-padding">
- <ul class="fields">
- {% block fields %}
- <!-- Block Fields are overridden to show fields as per the requirement -->
- {% if form.separate_username_field %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.username_field %}
- {% endif %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.email %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.full_name %}
- {% block extra_fields %}{% endblock extra_fields %}
+ <section
+ id="tab-account"
+ class="w-tabs__panel"
+ role="tabpanel"
+ hidden
+ aria-labelledby="tab-label-account"
+ >
+ <ul class="fields">
+ {% block fields %}
+ <!-- Block Fields are overridden to show fields as per the requirement -->
+ {% if form.separate_username_field %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.username_field %}
+ {% endif %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.email %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.full_name %}
+ {% block extra_fields %}{% endblock extra_fields %}
- {% comment %}
- First/last name hidden input with dummy values because.. Wagtail admin
- See hypha.apply.users.forms.CustomUserEditForm
- {% endcomment %}
- {{ form.first_name }}
- {{ form.last_name }}
+ {% comment %}
+ First/last name hidden input with dummy values because.. Wagtail admin
+ See hypha.apply.users.forms.CustomUserEditForm
+ {% endcomment %}
+ {{ form.first_name }}
+ {{ form.last_name }}
- {% if form.password1 %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.password1 %}
- {% endif %}
- {% if form.password2 %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.password2 %}
- {% endif %}
- {% if form.is_active %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.is_active %}
- {% endif %}
+ {% if form.password1 %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.password1 %}
+ {% endif %}
+ {% if form.password2 %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.password2 %}
+ {% endif %}
+ {% if form.is_active %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.is_active %}
+ {% endif %}
- {% endblock fields %}
- <li>
- <input type="submit" value="{% trans 'Save' %}" class="button" />
- {% if can_delete %}
- <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button button-secondary no">{% trans "Delete user" %}</a>
- {% endif %}
- <!-- Add a custom button to user account edit form -->
- {% user_2fa_enabled user as is_2fa_enabled %}
- {% if is_2fa_enabled %}
- <a href="{% url 'users:admin_disable' user.pk %}" class="button">{% trans "Disable 2FA" %}</a>
- {% else %}
- <button type="button" title="{% trans "This account do not have 2FA enabled." %}" class="button" disabled>{% trans "Disable 2FA" %}</button>
+ {% endblock fields %}
+ <li>
+ <input type="submit" value="{% trans 'Save' %}" class="button" />
+ {% if can_delete %}
+ <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button button-secondary no">{% trans "Delete user" %}</a>
+ {% endif %}
+ <!-- Add a custom button to user account edit form -->
+ {% user_2fa_enabled user as is_2fa_enabled %}
+ {% if is_2fa_enabled %}
+ <a href="{% url 'users:admin_disable' user.pk %}" class="button">{% trans "Disable 2FA" %}</a>
+ {% else %}
+ <button type="button" title="{% trans "This account do not have 2FA enabled." %}" class="button" disabled>{% trans "Disable 2FA" %}</button>
+ {% endif %}
+ </li>
+ </ul>
+ </section>
+ <section
+ id="tab-roles"
+ class="w-tabs__panel"
+ role="tabpanel"
+ hidden
+ aria-labelledby="tab-label-roles"
+ >
+ <ul class="fields">
+ {% if form.is_superuser %}
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.is_superuser %}
{% endif %}
- </li>
- </ul>
- </section>
- <section id="roles" class="nice-padding">
- <ul class="fields">
- {% if form.is_superuser %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.is_superuser %}
- {% endif %}
- {% include "wagtailadmin/shared/field_as_li.html" with field=form.groups %}
- <li>
- <input type="submit" value="{% trans 'Save' %}" class="button" />
- {% if can_delete %}
- <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button button-secondary no">{% trans "Delete user" %}</a>
- {% endif %}
- </li>
- </ul>
- </section>
- </div>
- </form>
+ {% include "wagtailadmin/shared/field_as_li.html" with field=form.groups %}
+ <li>
+ <input type="submit" value="{% trans 'Save' %}" class="button" />
+ {% if can_delete %}
+ <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button button-secondary no">{% trans "Delete user" %}</a>
+ {% endif %}
+ </li>
+ </ul>
+ </section>
+ </div>
+ </form>
+ </div>
+{% endblock %}
+
+{% block extra_css %}
+ {{ block.super }}
+ {% include "wagtailadmin/pages/_editor_css.html" %}
+ {{ form.media.css }}
+{% endblock %}
+{% block extra_js %}
+ {{ block.super }}
+ {% include "wagtailadmin/pages/_editor_js.html" %}
+ {{ form.media.js }}
{% endblock %}
+