pierre/BasicOIDC
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add form to authenticator page

Browse Source
This commit is contained in:
Pierre HUBERT 2022-04-19 10:10:05 +02:00
parent 38eddc1cf0
commit 18353f0639
4 changed files with 47 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/js/clipboard_utils.js Normal file
View 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();
}

2
src/controllers/two_factors_controller.rs
View File

@ -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),

45
templates/settings/add_2fa_totp_page.html
View File

@ -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>
<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>
</ul>
<p>If you can't scan the QrCode, please use the following parameters instead:</p>
<ul>
<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 %}

2
templates/settings/two_factors_page.html
View File

@ -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