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:
parent
872ae595b8
commit
c8026ddb6c
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user