Merge pull request #4478 from open-formulieren/issue/4429-keep-mfa-ex…

…panded

Keep username/password form/2fa form visible

src/openforms/js/components/admin/login.js

@@ -5,11 +5,22 @@ const addAdminLoginExpand = () => {
   const loginForm = document.querySelector('#login-form');
 
   if (defaultLoginToggle && loginForm) {
-    defaultLoginToggle.addEventListener('click', e => {
-      e.preventDefault();
+    const showLoginForm = () => {
       loginForm.classList.toggle('login-form--enabled');
       defaultLoginToggle.classList.toggle('admin-login-option--disabled');
+    };
+
+    // bind click event
+    defaultLoginToggle.addEventListener('click', e => {
+      e.preventDefault();
+      showLoginForm();
     });
+
+    // if the form is bound, there is feedback, so toggle it to visible
+    const {bound, wizardstep} = defaultLoginToggle.dataset;
+    if (bound === 'true' || wizardstep !== 'auth') {
+      showLoginForm();
+    }
   }
 };
 

src/openforms/templates/maykin_2fa/login.html

@@ -4,9 +4,15 @@
 {% block extra_login_options %}
     {% get_solo 'mozilla_django_oidc_db.OpenIDConnectConfig' as oidc_config %}
     {% if oidc_config.enabled %}
-        <div class="admin-login-option admin-login-option--password">
+
+        <div
+            class="admin-login-option admin-login-option--password"
+            data-bound="{{ form.is_bound|yesno:'true,false' }}"
+            data-wizardstep="{{ wizard.steps.current }}"
+        >
             <a href="#">{% trans "Login with application account" %}</a>
         </div>
+
         <div class="admin-login-divider"><span>{% trans "or" %}</span></div>
         <div class="admin-login-option admin-login-option--oidc">
             <a href="{% url 'oidc_authentication_init' %}">{% trans "Login with organization account" %}</a>