|
|
<%inherit file="base/root.mako"/>
|
|
|
|
|
|
<%def name="title()">
|
|
|
${_('Setup 2FA')}
|
|
|
%if c.rhodecode_name:
|
|
|
· ${h.branding(c.rhodecode_name)}
|
|
|
%endif
|
|
|
</%def>
|
|
|
<style>body{background-color:#eeeeee;}</style>
|
|
|
|
|
|
<div class="loginbox">
|
|
|
<div class="header-account">
|
|
|
<div id="header-inner" class="title">
|
|
|
<div id="logo">
|
|
|
% if c.rhodecode_name:
|
|
|
<div class="branding">
|
|
|
<a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
|
|
|
</div>
|
|
|
% endif
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="loginwrapper">
|
|
|
<h1>${_('Setup the authenticator app')}</h1>
|
|
|
|
|
|
<p>Authenticator apps like <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2' target="_blank" rel="noopener noreferrer">Google Authenticator</a>, etc. generate one-time passwords that are used as a second factor to verify you identity.</p>
|
|
|
<rhodecode-toast id="notifications"></rhodecode-toast>
|
|
|
|
|
|
<div id="setup_2fa">
|
|
|
${h.secure_form(h.route_path('setup_2fa'), request=request, id='totp_form')}
|
|
|
<div class="sign-in-title">
|
|
|
<h1>${_('Scan the QR code')}: "${totp_name}"</h1>
|
|
|
</div>
|
|
|
<p>${_('Use an authenticator app to scan.')}</p>
|
|
|
<img alt="qr-code" src="data:image/png;base64, ${qr}"/>
|
|
|
|
|
|
<p>${_('Unable to scan?')} <a id="toggleLink">${_('Click here')}</a></p>
|
|
|
<div id="secretDiv" class="hidden">
|
|
|
<p>${_('Copy and use this code to manually set up an authenticator app')}</p>
|
|
|
<input type="text" class="input-monospace" value="${key}" id="secret_totp" name="secret_totp" style="width: 400px"/>
|
|
|
<i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${key}" title="${_('Copy the secret key')}"></i>
|
|
|
</div>
|
|
|
|
|
|
<div id="verify_2fa">
|
|
|
|
|
|
<div class="form mt-4">
|
|
|
<div class="field">
|
|
|
<p>
|
|
|
<div class="label">
|
|
|
<label for="totp" class="form-label text-dark font-weight-bold" style="text-align: left;">${_('Verify the code from the app')}:</label>
|
|
|
</div>
|
|
|
</p>
|
|
|
<p>
|
|
|
<div>
|
|
|
<div class="input-group">
|
|
|
${h.text('totp', class_='form-control', style='width: 40%;')}
|
|
|
<div id="formErrors">
|
|
|
% if 'totp' in errors:
|
|
|
<span class="error-message">${errors.get('totp')}</span>
|
|
|
<br />
|
|
|
% endif
|
|
|
</div>
|
|
|
<div class="input-group-append">
|
|
|
${h.submit('verify_2fa',_('Verify'),class_="btn btn-primary", style='width: 40%;')}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
${h.end_form()}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.getElementById('toggleLink').addEventListener('click', function() {
|
|
|
let hiddenField = document.getElementById('secretDiv');
|
|
|
if (hiddenField.classList.contains('hidden')) {
|
|
|
hiddenField.classList.remove('hidden');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
