💩 [#4429] Automatically open the username/password section when that …

…flow was entered

The JS approach to toggle this does not play well with the markup in
the library templates, so we need to resort to programmatically
clicking the show link...

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>