Implemented the two factor auth login form.

assets/ts_src/ajax_ui.ts

@@ -363,6 +363,11 @@ class AjaxUI {
             return;
         }
 
+        //Ignore ajax errors with 200 code (like the ones during 2FA authentication)
+        if(request.status == 200) {
+            return;
+        }
+
         console.error("Error getting the ajax data from server!");
         console.log(event);
         console.log(request);

config/packages/scheb_two_factor.yaml

@@ -11,6 +11,7 @@ scheb_two_factor:
         issuer: 'Part-DB'               # Issuer name used in QR code
         digits: 6                       # Number of digits in authentication code
         window: 1                       # How many codes before/after the current one would be accepted as valid
+        template: security/2fa_form.html.twig
 
     backup_codes:
         enabled: true  # If the backup code feature should be enabled

config/packages/security.yaml

@@ -18,6 +18,11 @@ security:
             anonymous: true
             user_checker: App\Security\UserChecker
 
+            two_factor:
+                auth_form_path: 2fa_login
+                check_path: 2fa_login_check
+                csrf_token_generator: security.csrf.token_manager
+
               # activate different ways to authenticate
 
               #http_basic: true
@@ -42,5 +47,7 @@ security:
     # Easy way to control access for large sections of your site
     # Note: Only the *first* access control that matches will be used
     access_control:
-    # - { path: ^/admin, roles: ROLE_ADMIN }
+        # This makes the logout route available during two-factor authentication, allows the user to cancel
-    # - { path: ^/profile, roles: ROLE_USER }
+        - { path: ^/logout, role: IS_AUTHENTICATED_ANONYMOUSLY }
+        # This ensures that the form can only be accessed when two-factor authentication is in progress
+        - { path: ^/2fa, role: IS_AUTHENTICATED_2FA_IN_PROGRESS }

config/routes/scheb_two_factor.yaml

@@ -1,7 +1,7 @@
 2fa_login:
-    path: /2fa
+    path: /{_locale}/2fa
     defaults:
         _controller: "scheb_two_factor.form_controller:form"
 
 2fa_login_check:
-    path: /2fa_check
+    path: /{_locale}/2fa_check

templates/security/2fa_form.html.twig

@@ -0,0 +1,61 @@
+{% extends "main_card.html.twig" %}
+
+{% block title %}{% trans %}tfa.check.title{% endtrans %}{% endblock %}
+
+{% block card_title %}<i class="fas fa-shield-alt"></i> {% trans %}tfa.check.title{% endtrans %}{% endblock %}
+
+{% block  content %}
+    {% if authenticationError %}
+        <div class="alert alert-danger" role="alert">
+            <strong>{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}}</strong>
+        </div>
+    {% endif %}
+
+    {{ parent() }}
+{% endblock %}
+
+{% block card_content %}
+    <ul class="nav nav-pills mb-4">
+        {% for provider in availableTwoFactorProviders %}
+        <li class="nav-item">
+            <a class="nav-link {% if provider == twoFactorProvider %}active{% endif %}"
+               href="{{ path("2fa_login", {"preferProvider": provider}) }}">{{ 'tfa.provider.'~provider | trans }}</a>
+        </li>
+        {% endfor %}
+    </ul>
+
+    {# Display current two-factor provider #}
+
+    <form class="form form-horizontal" action="{{ path("2fa_login_check") }}" method="post">
+        <div class="form-group row">
+            <label for="_auth_code" class="col-form-label col-3">{% trans %}tfa.check.code.label{% endtrans %}</label>
+            <div class="col-9">
+                <input id="_auth_code" class="form-control" type="text" autocomplete="off" name="{{ authCodeParameterName }}" autofocus />
+                <small id="passwordHelpBlock" class="form-text text-muted">
+                    {% trans %}tfa.check.code.help{% endtrans %}
+                </small>
+            </div>
+        </div>
+        {% if displayTrustedOption %}
+            <div class="form-group row mt-3">
+                <div class="offset-3">
+                    <div class="custom-checkbox custom-control ml-2">
+                        <input id="_trusted" class="custom-control-input" type="checkbox" name="{{ trustedParameterName }}" />
+                        <label class="custom-control-label" for="_trusted">{% trans %}tfa.code.trusted_pc{% endtrans %}</label>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+
+
+        {% if isCsrfProtectionEnabled %}
+            <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
+        {% endif %}
+        <div class="form-group-row">
+            <div class="offset-3">
+                <button type="submit" class="btn btn-primary" value="{{ "login"|trans({}, 'SchebTwoFactorBundle') }}">{% trans %}login.btn{% endtrans %}</button>
+                <a class="ml-2" href="{{ logoutPath }}">{% trans %}user.logout{% endtrans %}</a>
+            </div>
+        </div>
+    </form>
+{% endblock %}