Two factor authentication : TOTP #5
12
assets/js/clipboard_utils.js
Normal file
12
assets/js/clipboard_utils.js
Normal file
@ -0,0 +1,12 @@
|
||||
function copyToClipboard(str) {
|
||||
const input = document.createElement("input");
|
||||
input.value = str;
|
||||
|
||||
document.body.appendChild(input);
|
||||
|
||||
input.select();
|
||||
input.setSelectionRange(0, str.length);
|
||||
document.execCommand("copy");
|
||||
|
||||
input.remove();
|
||||
}
|
@ -61,7 +61,7 @@ pub async fn add_totp_factor_route(user: CurrentUser, app_conf: web::Data<AppCon
|
||||
HttpResponse::Ok()
|
||||
.body(AddTotpPage {
|
||||
_p: BaseSettingsPage::get(
|
||||
"Configure new TOTP factor",
|
||||
"New authenticator app",
|
||||
&user,
|
||||
None,
|
||||
None),
|
||||
|
@ -1,22 +1,43 @@
|
||||
{% extends "base_settings_page.html" %}
|
||||
{% block content %}
|
||||
<div style="max-width: 700px;">
|
||||
|
||||
<p>On this page you can configure a new Authenticator app. Please use the authenticator app to scan the QR code.</p>
|
||||
<p>On this page you can configure a new Authenticator app. Please use an authenticator app to scan the QR code.</p>
|
||||
|
||||
<p>Note: if you have not an authenticator app yet, you might want to use
|
||||
<a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" rel="noopener" target="_blank">FreeOTP
|
||||
Authenticator</a> for example.</p>
|
||||
|
||||
<img src="data:image/png;base64,{{ qr_code }}" style="width: 150px; margin: 0px 20px;"/>
|
||||
<img src="data:image/png;base64,{{ qr_code }}" style="width: 150px; margin: 20px 0px;"/>
|
||||
|
||||
<p>If you can't scan the QrCode, please use the following parameters instead:</p>
|
||||
<ul>
|
||||
<li><strong>Account name:</strong> {{ account_name }}</li>
|
||||
<li><strong>Secret key:</strong> {{ secret_key }}</li>
|
||||
<li><strong>Account name:</strong> <i>{{ account_name }}</i> <a
|
||||
href="javascript:copyToClipboard('{{ account_name }}')">Copy to clipboard</a></li>
|
||||
<li><strong>Secret key:</strong> <i>{{ secret_key }}</i> <a
|
||||
href="javascript:copyToClipboard('{{ secret_key }}')">Copy
|
||||
to clipboard</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Once you have scanned the QrCode, please generate a first QrCode and type it below:</p>
|
||||
<p>Once you have scanned the QrCode, please generate a code and type it below:</p>
|
||||
|
||||
TODO : add form
|
||||
<div class="form-group">
|
||||
<label for="inputDevName" class="form-label mt-4">Device name</label>
|
||||
<input type="text" class="form-control" id="inputDevName" aria-describedby="emailHelp" placeholder="Enter email"
|
||||
value="Authenticator app">
|
||||
<small class="form-text text-muted">Please give a name to your device to identity it more easily later.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inputFirstCode" class="form-label mt-4">First code</label>
|
||||
<input type="text" class="form-control" id="inputFirstCode" aria-describedby="emailHelp" placeholder="XXXXXX"
|
||||
maxlength="6"/>
|
||||
<small class="form-text text-muted">Check that your authenticator app is working correctly by typing a first
|
||||
code.</small>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/clipboard_utils.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
@ -11,7 +11,7 @@
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/settings/two_factors/add_totp" type="button" class="btn btn-primary">Add One Time Password (OTP) factor</a>
|
||||
<a href="/settings/two_factors/add_totp" type="button" class="btn btn-primary">Add Authenticator App</a>
|
||||
</p>
|
||||
TODO : show the list of currently registered 2 factors methods
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user