👌 [#4347] PR feedback

* use `onLoaded` instead to add admin form toggle functionality
* use BEM syntax for admin login options
* fix admin-login-divider styling and use CSS var instead of hardcoded colors

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

@@ -1,9 +1,16 @@
-const defaultLogin = document.querySelector('.admin-login-password');
-const loginForm = document.querySelector('#login-form');
+import {onLoaded} from 'utils/dom';
 
-if (defaultLogin && loginForm) {
-  defaultLogin.addEventListener('click', e => {
-    loginForm.style.display = 'block';
-    defaultLogin.style.display = 'none';
-  });
-}
+const addAdminLoginExpand = () => {
+  const defaultLoginToggle = document.querySelector('.admin-login-option--password');
+  const loginForm = document.querySelector('#login-form');
+
+  if (defaultLoginToggle && loginForm) {
+    defaultLoginToggle.addEventListener('click', e => {
+      e.preventDefault();
+      loginForm.classList.toggle('login-form--enabled');
+      defaultLoginToggle.classList.toggle('admin-login-option--disabled');
+    });
+  }
+};
+
+onLoaded(addAdminLoginExpand);

src/openforms/scss/admin/_app_overrides.scss

@@ -3,6 +3,7 @@
 
  Generic overrides should go in _admin_theme.scss
  */
+@use 'microscope-sass/lib/bem';
 @import '~microscope-sass/lib/responsive';
 @import '~microscope-sass/lib/util';
 
@@ -96,31 +97,42 @@ $djai-padding--tablet: 30px;
   text-align: center;
   clear: both;
   padding-top: 1em;
+
+  @include bem.modifier('disabled') {
+    display: none;
+  }
 }
 
 .admin-login-divider {
-  text-align: center;
-  clear: both;
-  padding-top: 1em;
-
-  width: 100%;
-  text-align: center;
-  border-bottom: 1px solid #ccc;
-  line-height: 0.1em;
-  margin: 10px 0 10px;
-
-  span {
-    background: #fff;
-    padding: 0 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-block-start: 1em;
+  &:after,
+  &:before {
+    content: '';
+    display: block;
+    border-bottom: 1px solid var(--border-color);
+    flex-grow: 1;
+  }
+  > span {
+    flex-shrink: 0;
+    padding-inline: 10px;
   }
 }
 
 /**
  * mozilla-django-oidc-db
  * hide the regular admin login form by default if OIDC is enabled
  */
-#login-form:has(~ .admin-login-oidc) {
-  display: none;
+#login-form {
+  &:has(~ .admin-login-option--oidc) {
+    display: none;
+  }
+
+  &.login-form--enabled {
+    display: block;
+  }
 }
 
 /* Styling for react-jsonschema-form */

src/openforms/templates/maykin_2fa/login.html

@@ -4,11 +4,11 @@
 {% 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-password">
+        <div class="admin-login-option admin-login-option--password">
             <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-oidc">
+        <div class="admin-login-option admin-login-option--oidc">
             <a href="{% url 'oidc_authentication_init' %}">{% trans "Login with organization account" %}</a>
         </div>
     {% endif %}