From 603880a06c72348e9369c7c54839367f3e93ed8f Mon Sep 17 00:00:00 2001
From: sandeepsajan0 <sandeepsajan0@gmail.com>
Date: Fri, 3 Jun 2022 17:38:33 +0530
Subject: [PATCH] Fix buttons sizes, text and css issues
---
.../two_factor/core/backup_tokens.html | 4 ++--
.../users/templates/two_factor/core/setup.html | 2 ++
.../two_factor/core/setup_complete.html | 7 +++----
.../two_factor/core/two_factor_required.html | 10 +++++-----
hypha/apply/users/templates/users/account.html | 18 +++++++++---------
.../src/sass/apply/components/_button.scss | 1 +
.../src/sass/apply/components/_two-factor.scss | 3 +++
7 files changed, 25 insertions(+), 20 deletions(-)
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 e2137f5cb..f13936464 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 b33f5e2d8..4eb1cf4f7 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 f7f3d8ffb..422f3f0b5 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 64ed802ae..6bc760073 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 7944cf2b7..bb18d684f 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 7ad95b226..f667b8680 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 188a16a8c..d962a5cd7 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 {
--
GitLab