assets/js/clipboard_utils.js

@@ -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();
+}

src/controllers/two_factors_controller.rs

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

templates/settings/add_2fa_totp_page.html

@@ -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
+    <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
+        <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp" rel="noopener" target="_blank">FreeOTP
-        Authenticator</a> for example.</p>
+            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>
+    <p>If you can't scan the QrCode, please use the following parameters instead:</p>
-<ul>
+    <ul>
-    <li><strong>Account name:</strong> {{ account_name }}</li>
+        <li><strong>Account name:</strong> <i>{{ account_name }}</i> <a
-    <li><strong>Secret key:</strong> {{ secret_key }}</li>
+                href="javascript:copyToClipboard('{{ account_name }}')">Copy to clipboard</a></li>
-</ul>
+        <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 %}

templates/settings/two_factors_page.html

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