diff --git a/hypha/apply/users/templates/two_factor/core/backup_tokens.html b/hypha/apply/users/templates/two_factor/core/backup_tokens.html
index e2137f5cb3e53b3a27c9e4925eca3d6202878365..f13936464d47574e0204835a327b08df3772f483 100644
--- a/hypha/apply/users/templates/two_factor/core/backup_tokens.html
+++ b/hypha/apply/users/templates/two_factor/core/backup_tokens.html
@@ -17,10 +17,10 @@
</ul>
<p>{% blocktrans %}You should now download, or print these codes,
and keep them somewhere safe.{% endblocktrans %}</p>
- <p><a class="btn btn-link" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">
- {% trans "Save Codes" %}</a></p>
<form method="post">{% csrf_token %}{{ form }}
<button class="btn btn-primary" type="submit">{% trans "Regenerate Codes" %}</button>
+ <a class="btn btn-link link--left-space" href="data:text/plain;charset=UTF-8,{% tokens_text device.token_set.all %}" download="backup_codes.txt">
+ {% trans "Save Codes" %}</a>
</form>
{% else %}
<p>{% trans "You don't have any backup codes yet." %}</p>
diff --git a/hypha/apply/users/templates/two_factor/core/setup.html b/hypha/apply/users/templates/two_factor/core/setup.html
index b33f5e2d8e5f54860b7a394b070fc5666d39a4e3..4eb1cf4f74ff4a9334636c117458d7607e69ebf1 100644
--- a/hypha/apply/users/templates/two_factor/core/setup.html
+++ b/hypha/apply/users/templates/two_factor/core/setup.html
@@ -49,6 +49,8 @@
<form action="" method="post">{% csrf_token %}
{% include "two_factor/_wizard_forms.html" %}
+ <!-- Add empty p tag to add some space in between wizard form fields and wizard actions buttons. -->
+ <p></p>
{# hidden submit button to enable [enter] key #}
<input type="submit" value="" class="d-none" />
diff --git a/hypha/apply/users/templates/two_factor/core/setup_complete.html b/hypha/apply/users/templates/two_factor/core/setup_complete.html
index f7f3d8ffbdaf55da3f1f705b53b6bb4338f09704..422f3f0b5d028f8e182d1d5c1722c5d441a8366e 100644
--- a/hypha/apply/users/templates/two_factor/core/setup_complete.html
+++ b/hypha/apply/users/templates/two_factor/core/setup_complete.html
@@ -2,9 +2,7 @@
{% load i18n %}
{% block content %}
- <p><a href="{% url 'users:account' %}"
- class="btn btn-link">{% trans "Back to Account" %}</a></p>
- <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
+ <h1>{% block title %}{% trans "Two-Factor Authentication(2FA)" %}{% endblock %}</h1>
<p>{% blocktrans trimmed %}Congratulations, you've successfully enabled two-factor
authentication.{% endblocktrans %}</p>
@@ -12,7 +10,8 @@
To get the backup codes you can continue to Show Codes.{% endblocktrans %}</p>
{% if not phone_methods %}
- <p><a href="{% url 'users:backup_tokens_password' %}" class="btn btn-link">Show Codes</a></p>
+ <a href="{% url 'users:backup_tokens_password' %}" class="btn btn-link">Show Codes</a>
+ <a href="{% url 'users:account' %}" class="link link--bold link--left-space">{% trans "Back to Account" %}</a>
{% else %}
<p>{% blocktrans trimmed %}However, it might happen that you don't have access to
your primary token device. To enable account recovery, add a phone
diff --git a/hypha/apply/users/templates/two_factor/core/two_factor_required.html b/hypha/apply/users/templates/two_factor/core/two_factor_required.html
index 64ed802ae57c9688282b1cf70b24b9669efe7264..6bc76007338ad1e5427a8d746e1bd8b7cb70fd1e 100644
--- a/hypha/apply/users/templates/two_factor/core/two_factor_required.html
+++ b/hypha/apply/users/templates/two_factor/core/two_factor_required.html
@@ -7,16 +7,16 @@
<h1>{% block title %}{% trans "Permission Denied" %}{% endblock %}</h1>
<p>{% blocktrans trimmed %}The page you requested, enforces users to verify using
- two-factor authentication for security reasons. You need to enable these
- security features in order to access this page. Without enabling these security features,
+ two-factor authentication for security reasons. You need to set up these
+ security features in order to access this page. Without setting up these security features,
You can only access the account(Profile section) or can logout from the system.{% endblocktrans %}</p>
- <p>{% blocktrans trimmed %}Two-factor authentication is not enabled for your
- account. Enable two-factor authentication for enhanced account
+ <p>{% blocktrans trimmed %}Two-factor authentication is not already set up for your
+ account. Set up two-factor authentication for enhanced account
security.{% endblocktrans %}</p>
<p>
<a href="{% url 'two_factor:setup' %}" class="btn btn-primary">
- {% trans "Enable Two-Factor Authentication" %}</a>
+ {% trans "Set up Two-Factor Authentication (2FA)" %}</a>
</p>
{% endblock %}
diff --git a/hypha/apply/users/templates/users/account.html b/hypha/apply/users/templates/users/account.html
index 7944cf2b7dc1eeb47582bc1611cb05fc1dfd58c6..bb18d684f40e95a13a1cc7cdd0db62f7d7cde7a7 100644
--- a/hypha/apply/users/templates/users/account.html
+++ b/hypha/apply/users/templates/users/account.html
@@ -24,11 +24,12 @@
{% endfor %}
<button class="button button--primary" type="submit">{% trans "Update Profile" %}</button>
</form>
+ </div>
- {% if show_change_password and user.has_usable_password and not backends.associated %}
- <br>
- <hr>
- <div>
+ {% if show_change_password and user.has_usable_password and not backends.associated %}
+ <br>
+ <hr>
+ <div class="profile__column">
<h3>{% trans "Account Security" %}</h3>
<h4>{% trans "Password" %}</h4>
<p><a class="button button--primary" href="{% url 'users:password_change' %}">{% trans "Update password" %}</a></p>
@@ -36,15 +37,14 @@
<h4>{% trans "Two-Factor Authentication (2FA)" %}</h4>
{% if default_device %}
<div>
- <p><a class="link link--button link--button--narrow" href="{% url 'users:backup_tokens_password' %}">{% trans "Show backup codes" %}</a></p>
- <p><a class="link link--button link--button--narrow" href="{% url 'two_factor:disable' %}">{% trans "Disable 2FA" %}</a></p>
+ <p><a class="button button--primary" href="{% url 'users:backup_tokens_password' %}">{% trans "Show backup codes" %}</a></p>
+ <p><a class="button button--primary" href="{% url 'two_factor:disable' %}">{% trans "Disable 2FA" %}</a></p>
</div>
{% else %}
- <p><a class="link link--button link--button--narrow" href="{% url 'two_factor:setup' %}">{% trans "Enable 2FA" %}</a></p>
+ <p><a class="button button--primary" href="{% url 'two_factor:setup' %}">{% trans "Enable 2FA" %}</a></p>
{% endif %}
</div>
- {% endif %}
- </div>
+ {% endif %}
<div class="profile__column">
diff --git a/hypha/static_src/src/sass/apply/components/_button.scss b/hypha/static_src/src/sass/apply/components/_button.scss
index 7ad95b226f40a152ab53922aff23a42cfb61831c..f667b86802d4a9445289c89b76300c8dd395e889 100644
--- a/hypha/static_src/src/sass/apply/components/_button.scss
+++ b/hypha/static_src/src/sass/apply/components/_button.scss
@@ -5,6 +5,7 @@
background-image: none;
border: 0;
box-shadow: none;
+ line-height: 1.15;
&:hover {
cursor: pointer;
diff --git a/hypha/static_src/src/sass/apply/components/_two-factor.scss b/hypha/static_src/src/sass/apply/components/_two-factor.scss
index 188a16a8c4198b4e9d92fe3b1e9fe4e3d87801c0..d962a5cd793c696b5f310a3664201e739a5ef20c 100644
--- a/hypha/static_src/src/sass/apply/components/_two-factor.scss
+++ b/hypha/static_src/src/sass/apply/components/_two-factor.scss
@@ -26,6 +26,9 @@ label[for='id_generator-token'] {
// stylelint-disable property-no-vendor-prefix, selector-id-pattern, selector-max-id
#id_generator-token {
-moz-appearance: textfield;
+ border: 2px solid #2166b6;
+ line-height: 1.35;
+ width: 20%;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {