forked from Github-Mirrors/canaille
90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
{# The multi-factor authentication code verification template.
|
|
|
|
Displays a form that asks for the multi-factor authentication code.
|
|
|
|
:param form: The code verification form.
|
|
:type form: :class:`~canaille.core.endpoints.forms.TwoFactorForm`
|
|
:param username: The username of the user attempting to log-in.
|
|
:type username: :class:`str`
|
|
:param method: The authentication factor method.
|
|
:type method: :class:`str` (*TOTP*, *HOTP*, *EMAIL_OTP*, *SMS_OTP*)
|
|
#}
|
|
{% extends theme('base.html') %}
|
|
{% import 'macro/flask.html' as flask %}
|
|
{% import 'macro/form.html' as fui %}
|
|
{% import 'core/partial/login_field.html' as login_field %}
|
|
|
|
{% block container %}
|
|
<div class="ui container">
|
|
<div class="content">
|
|
<div class="ui clearing segment">
|
|
{% block header %}
|
|
{% if logo_url %}
|
|
<a href="{{ url_for('core.account.index') }}">
|
|
<img class="ui tiny centered image" src="{{ logo_url }}" alt="{{ website_name }}">
|
|
</a>
|
|
{% else %}
|
|
<i class="massive sign in icon image ui"></i>
|
|
{% endif %}
|
|
|
|
<h2 class="ui center aligned header">
|
|
<div class="content">
|
|
{{ _("Sign in as %(username)s", username=username) }}
|
|
</div>
|
|
<div class="sub header">{% trans %}One-time password authentication.{% endtrans %}</div>
|
|
</h2>
|
|
{% endblock %}
|
|
|
|
{% block messages %}
|
|
{{ flask.messages() }}
|
|
{% endblock %}
|
|
|
|
{% call fui.render_form(form, hx_boost="false") %}
|
|
{% block fields %}
|
|
{{ login_field.render_field(form.otp, class="autofocus") }}
|
|
{% endblock %}
|
|
|
|
{% block buttons %}
|
|
<div class="ui right aligned container">
|
|
<div class="ui stackable buttons">
|
|
<a type="button" class="ui right floated button" href="{{ url_for('core.auth.login') }}">{{ _("I am not %(username)s", username=username) }}</a>
|
|
<button type="submit" class="ui right floated primary button">{{ _("Verify") }}</button>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% endcall %}
|
|
{% if method == "EMAIL_OTP" or method == "SMS_OTP" %}
|
|
{% if method == "EMAIL_OTP" %}
|
|
<form action="{{ url_for('core.auth.send_mail_otp') }}" method="post">
|
|
{% endif %}
|
|
{% if method == "SMS_OTP" %}
|
|
<form action="{{ url_for('core.auth.send_sms_otp') }}" method="post">
|
|
{% endif %}
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button class="send-code-button" type="submit">Didn't receive the code? Click here to send another one. <span id="countdown"></span></button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
countDownDuration = 10;
|
|
countdown = document.getElementById("countdown");
|
|
countdown.innerHTML = countDownDuration;
|
|
button = countdown.parentNode;
|
|
button.setAttribute("disabled", "");
|
|
|
|
x = setInterval(() => {
|
|
countDownDuration--;
|
|
if (countDownDuration <= 0) {
|
|
clearInterval(x);
|
|
countdown.innerHTML = "";
|
|
button.removeAttribute("disabled");
|
|
} else {
|
|
countdown.innerHTML = countDownDuration;
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
{% endblock %}
|