[#2328] Refactor tabpanels on login page

src/open_inwoner/accounts/templates/registration/login.html

@@ -17,13 +17,13 @@ <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
     <div class="tab--container login-tab--container">
         <div class="tabs">
             <ul class="list tabs__headers">
-                <li class="list-item tab__header--item"><a href="{% url 'login' %}#particulier" class="link tab__header ">Particulier</a></li>
-                <li class="list-item tab__header--item"><a href="{% url 'login' %}#zakelijk" class="link tab__header">Zakelijk</a></li>
+                <li class="list-item tab__header--item"><a href="{% url 'login' %}#particulier" class="link tab__header" data-panel="particulier-tab" id="particulier_tab">Particulier</a></li>
+                <li class="list-item tab__header--item"><a href="{% url 'login' %}#zakelijk" class="link tab__header" data-panel="zakelijk-tab" id="zakelijk_tab">Zakelijk</a></li>
             </ul>
             {# Panel 1 #}
             <div class="tabs__body">
 
-                <div id="particulier" class="tab__content">
+                <div id="particulier_panel" class="tab__content">
                     {% render_grid %}
 
                         {# Digid #}
@@ -127,7 +127,7 @@ <h2 class="tab__heading-4">Of registreer</h2>
                 {# Panel 1 End #}
 
                 {# Panel 2 #}
-                <div id="zakelijk" class="tab__content">
+                <div id="zakelijk_panel" class="tab__content">
 
                     {% render_grid %}
                         {% render_column start=4 span=5 %}

src/open_inwoner/js/components/form/LoginForm.js

@@ -50,34 +50,34 @@ export class LoginFormFocus {
 
   activateTabFromHash() {
     const hash = window.location.hash
-    const particulierLink = document.querySelector(
-      '.tab__header[href="/accounts/login/#particulier"]'
-    )
-    const zakelijkLink = document.querySelector(
-      '.tab__header[href="/accounts/login/#zakelijk"]'
-    )
-    const particulierTab = document.getElementById('particulier')
-    const zakelijkTab = document.getElementById('zakelijk')
+    const zakelijkTab = document.getElementById('zakelijk_tab')
+    const particulierTab = document.getElementById('particulier_tab')
+    const particulierPanel = document.getElementById('particulier_panel')
+    const zakelijkPanel = document.getElementById('zakelijk_panel')
 
     if (hash.includes('zakelijk')) {
-      particulierLink.classList.remove('active')
       particulierTab.classList.remove('active')
-      particulierTab.classList.add('hide')
+      particulierPanel.classList.remove('active')
+      particulierPanel.classList.add('hide')
 
-      zakelijkTab.classList.remove('hide')
+      zakelijkPanel.classList.remove('hide')
+      zakelijkPanel.classList.add('active')
       zakelijkTab.classList.add('active')
-      zakelijkLink.classList.add('active')
     } else {
-      particulierTab.classList.remove('hide')
-      particulierLink.classList.add('active')
-      particulierTab.classList.remove('active')
+      particulierPanel.classList.remove('hide')
+      particulierTab.classList.add('active')
+      particulierPanel.classList.remove('active')
 
-      zakelijkTab.classList.add('hide')
+      zakelijkPanel.classList.add('hide')
+      zakelijkPanel.classList.remove('active')
       zakelijkTab.classList.remove('active')
-      zakelijkLink.classList.remove('active')
     }
   }
 }
 
-const loginformFocuses = document.querySelectorAll(LoginFormFocus.selector)
-;[...loginformFocuses].forEach((element) => new LoginFormFocus(element))
+/**
+ * Controls focustrap and show/hide of login-form elements
+ */
+document
+  .querySelectorAll(LoginFormFocus.selector)
+  .forEach((loginformNode) => new LoginFormFocus(loginformNode))

src/open_inwoner/js/components/tab-panels/index.js

@@ -51,22 +51,36 @@ export class TabPanel {
   }
 }
 
-const tabpanels = document.querySelectorAll(TabPanel.selector)
-;[...tabpanels].forEach((tabpanel) => new TabPanel(tabpanel))
+/**
+ * Controls which tabs are active
+ */
+document
+  .querySelectorAll(TabPanel.selector)
+  .forEach((tabpanel) => new TabPanel(tabpanel))
 
-// Activate tab from hash on page load
-// Relies on instantiated TabPanel instances
+/**
+ * Activate Zakelijk tab from hash on page load, when coming from external link.
+ * Relies on instantiated TabPanel instances.
+ */
 window.addEventListener('load', () => {
-  const hash = window.location.hash
-  if (hash) {
-    const tabHeader = document.querySelector(`.tab__header[href="${hash}"]`)
-    if (tabHeader) {
-      const index = [...tabHeader.parentNode.children].indexOf(tabHeader)
-      const tabPanel = tabHeader.closest('.tab--container')
-      const tabPanelInstance = tabPanel && tabPanel.TabPanel
-      if (tabPanelInstance) {
-        tabPanelInstance.showContent(index)
-      }
+  const tabHeaders = document.querySelectorAll('.tab__header[data-panel]')
+  tabHeaders.forEach((tabHeader) => {
+    const panelId = tabHeader.dataset.panel
+    const panel = document.getElementById(panelId)
+    if (panel) {
+      tabHeader.addEventListener('click', () => {
+        // Hide all panels, ensuring only one panel is visible at a time
+        document.querySelectorAll('.tab__content').forEach((panel) => {
+          panel.classList.remove('active')
+        })
+        // Activate panel
+        panel.classList.add('active')
+        // Activate tab
+        tabHeaders.forEach((header) => {
+          header.classList.remove('active')
+        })
+        tabHeader.classList.add('active')
+      })
     }
-  }
+  })
 })

src/open_inwoner/scss/components/TabPanel/TabPanel.scss

@@ -136,7 +136,7 @@
 
 .login-tab--container {
   .list-item.tab__header--item {
-    min-width: 100px;
+    min-width: 50%;
 
     @media (min-width: 500px) {
       min-width: 180px;
@@ -163,6 +163,7 @@
       color: var(--color-accent);
       font-weight: bold;
       margin: 0;
+      text-decoration: none;
     }
   }