Merge factors type for authentication

templates/login/choose_second_factor.html

@@ -4,13 +4,15 @@
 <div>
     <p>You need to validate a second factor to complete your login.</p>
 
-    {% for factor in factors %}
-    <p>
-        <a class="btn btn-primary btn-lg" href="{{ factor.login_url(_p.redirect_uri) }}" style="width: 100%;">
-            {{ factor.name }} <br/>
-            <small>{{ factor.type_str() }}</small>
-        </a>
-    </p>
+    {% for factor in user.get_distinct_factors_types() %}
+    <a class="btn btn-primary btn-lg" href="{{ factor.login_url(_p.redirect_uri) }}" style="width: 100%; display: flex;">
+        <img src="{{ factor.type_image() }}" alt="Factor icon" style="margin-right: 1em;" />
+        <div style="text-align: left;">
+            {{ factor.type_str() }} <br/>
+            <small style="font-size: 0.7em;">{{ factor.description_str() }}</small>
+        </div>
+    </a>
+    <br />
     {% endfor %}
 </div>
 

templates/login/otp_input.html

@@ -10,8 +10,8 @@
 </style>
 
 <div>
-    <p>Please go to your authenticator app <i>{{ factor.name }}</i>, generate a new code and enter it here:</p>
-    <form id="totp_form" method="post" action="{{ factor.login_url(_p.redirect_uri) }}">
+    <p>Please open one of your registered authenticator app, generate a new code and enter it here:</p>
+    <form id="totp_form" method="post">
         <input type="hidden" id="code" name="code"/>
         <div class="form-group">
             <div id="otp" class="inputs d-flex flex-row justify-content-center mt-2">
@@ -34,6 +34,9 @@
 
 <script>
 function OTPInput() {
+    // Set form destination
+    document.getElementById("totp_form").action = location.href;
+
     const inputs = document.querySelectorAll('#otp > *[id]');
     for (let i = 0; i < inputs.length; i++) {
         // Reset form on init

templates/login/webauthn_input.html

@@ -4,7 +4,7 @@
 <p style="color:red" id="err_target"></p>
 
 <div>
-    <p>Please insert now your security key <i>{{ factor.name }}</i>, and accept authentication request.</p>
+    <p>Please insert now on of your registered security key, and accept authentication request.</p>
 </div>
 
 <div style="margin: 10px 0px;">