1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-04-27 02:51:00 +00:00

2fa redesign (#7677)

* ['enable 2fa' page] redesigned it

* ['2fa - backup tokens' page] redesigned it.

* ['disable 2fa' page] redesigned it
This commit is contained in:
llj 2025-03-29 13:14:29 +08:00 committed by GitHub
parent 872ae595b8
commit c8026ddb6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 59 additions and 47 deletions

View File

@ -2856,8 +2856,31 @@ a.sf-popover-item {
}
/* two-factor-auth */
.tfa-panel {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0,0,0, 0.1);
padding: 30px 25px 40px;
width: 336px;
margin: 5rem auto;
}
.tfa-panel .hd {
font-size: 1rem;
text-align: center;
}
.tfa-panel .con {
font-size: .875rem;
color: #666;
}
.tfa-panel .qr-code-image {
margin: 6px 0 20px;
}
.two-factor-auth-wizard-btns {
margin-top: 8px;
margin-top: 1.25rem;
}
.two-factor-auth-backup-token-list {
@ -2868,15 +2891,6 @@ a.sf-popover-item {
margin-bottom: 15px;
}
#id_generator-token,
#id_sms-number,
#id_validation-token {
/* token input */
width: 260px;
padding: 2px 3px;
border-radius: 2px;
}
/* terms & conditions */
#tc-content {
padding-top: 0;

View File

@ -1,6 +1,6 @@
{% load i18n %}
<div class="two-factor-auth-wizard-btns">
<a href="{{ cancel_url }}" class="sf-btn-link">{% trans "Cancel" %}</a>
<button type="submit">{% trans "Next" %}</button>
<button type="submit" class="btn-block btn btn-primary">{% trans "Next" %}</button>
<a href="{{ cancel_url }}" class="btn-block btn btn-secondary mt-3">{% trans "Cancel" %}</a>
</div>

View File

@ -2,30 +2,30 @@
{% load i18n %}
{% block main_content %}
<div class="new-narrow-panel">
<h2 class="hd">{% trans "Backup Tokens" %}</h2>
<div class="tfa-panel">
<h2 class="hd fw-normal mb-4">{% trans "Backup Tokens" %}</h2>
<div class="con">
<p>{% blocktrans %}Backup tokens can be used when your primary and backup
phone numbers aren't available. The backup tokens below can be used
for login verification. If you've used up all your backup tokens, you
can generate a new set of backup tokens. Only the backup tokens shown
below will be valid.{% endblocktrans %}</p>
<p>{% blocktrans %}Backup tokens can be used when your primary and backup
phone numbers aren't available. The backup tokens below can be used
for login verification. If you've used up all your backup tokens, you
can generate a new set of backup tokens. Only the backup tokens shown
below will be valid.{% endblocktrans %}</p>
{% if device.token_set.count %}
<ul class="two-factor-auth-backup-token-list">
{% for token in device.token_set.all %}
<li>{{ token.token }}</li>
<li>{{ token.token }}</li>
{% endfor %}
</ul>
<p>{% blocktrans %}Print these tokens and keep them somewhere safe.{% endblocktrans %}</p>
{% else %}
{% else %}
<p>{% trans "You don't have any backup codes yet." %}</p>
{% endif %}
{% endif %}
<form method="post">{% csrf_token %}{{ form }}
<a href="{{ SITE_ROOT }}" class="sf-btn-link">{% trans "Back" %}</a>
<button type="submit" style="margin-top:5px;">{% trans "Generate Tokens" %}</button>
</form>
</div>
<form method="post" class="mt-5">{% csrf_token %}{{ form }}
<button type="submit" class="btn btn-primary btn-block">{% trans "Generate Tokens" %}</button>
<a href="{{ SITE_ROOT }}profile/" class="btn btn-secondary btn-block mt-3">{% trans "Back" %}</a>
</form>
</div>
</div>
{% endblock %}

View File

@ -2,22 +2,21 @@
{% load i18n %}
{% block main_content %}
<div class="new-narrow-panel">
<h2 class="hd">{% trans "Enable Two-Factor Authentication" %}</h2>
<div class="tfa-panel text-center">
<h2 class="hd fw-normal mb-4">{% trans "Enable Two-Factor Authentication" %}</h2>
<div class="con">
{% if wizard.steps.current == 'welcome' %}
<p>You are about to take your account security to the
next level. Follow the steps in this wizard to enable two-factor
authentication.</p>
{% elif wizard.steps.current == 'method' %}
<p>Please select which authentication method you would
like to use.</p>
<p>Please select which authentication method you would like to use.</p>
{% elif wizard.steps.current == 'generator' %}
<p>{% blocktrans %}To start using a token generator, please use your
smartphone to scan the QR code below. For example, use Google
Authenticator. Then, enter the token generated by the app.
{% endblocktrans %}</p>
<img src="{{ QR_URL }}" alt="QR Code" />
<img src="{{ QR_URL }}" alt="QR Code" class="qr-code-image" />
{% elif wizard.steps.current == 'sms' %}
<p>Please enter the phone number you wish to receive the
text messages on. This number will be validated in the next step.
@ -28,11 +27,9 @@
{% elif wizard.steps.current == 'validation' %}
{% if challenge_succeeded %}
{% if device.method == 'call' %}
<p>We are calling your phone right now, please enter the
digits you hear.</p>
<p>We are calling your phone right now, please enter the digits you hear.</p>
{% elif device.method == 'sms' %}
<p>We sent you a text message, please enter the tokens we
sent.</p>
<p>We sent you a text message, please enter the tokens we sent.</p>
{% endif %}
{% else %}
<p class="alert alert-warning" role="alert">We've
@ -57,6 +54,8 @@
{% block extra_script %}
<script type="text/javascript">
$('input[type="text"], input[type="number"]', $('.new-narrow-panel')).trigger('focus');
$('input[type="text"], input[type="number"]', $('.tfa-panel')).trigger('focus');
$('#id_generator-token').prev().addClass('d-none');
$('#id_generator-token').addClass('form-control m-0').attr('placeholder', '{% trans "Token" %}');
</script>
{% endblock %}

View File

@ -2,15 +2,14 @@
{% load i18n %}
{% block main_content %}
<div class="new-narrow-panel">
<h2 class="hd">{% trans "Disable Two-Factor Authentication" %}</h2>
<div class="con">
<p>{% blocktrans %}You are about to disable two-factor authentication. This
compromises your account security, are you sure?{% endblocktrans %}</p>
<form method="post" action="">{% csrf_token %}
<button type="submit" class="submit">{% trans "Disable" %}</button>
<a href="{% url 'edit_profile'%}" class="sf-btn-link">{% trans "Cancel" %}</a>
</form>
</div>
<div class="tfa-panel text-center">
<h2 class="hd fw-normal mb-4">{% trans "Disable Two-Factor Authentication" %}</h2>
<div class="con">
<p>{% blocktrans %}You are about to disable two-factor authentication. This compromises your account security, are you sure?{% endblocktrans %}</p>
<form method="post" action="" class="mt-5">{% csrf_token %}
<button type="submit" class="btn btn-primary btn-block">{% trans "Disable" %}</button>
<a href="{% url 'edit_profile'%}" class="btn btn-secondary btn-block mt-3">{% trans "Cancel" %}</a>
</form>
</div>
</div>
{% endblock %}