[#2036] Fixed tab toggle

maykinmedia · Apr 18, 2024 · 54ab64a · 54ab64a
1 parent 65cdc96
commit 54ab64a
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 16 deletions.
diff --git a/src/open_inwoner/accounts/templates/registration/login.html b/src/open_inwoner/accounts/templates/registration/login.html
@@ -17,8 +17,8 @@ <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="/accounts/login#particulier" class="link tab__header active">Particulier</a></li>
-                <li class="list-item tab__header--item"><a href="/accounts/login#zakelijk" class="link tab__header">Zakelijk</a></li>
+                <li class="list-item tab__header--item"><a href="/accounts/login/#particulier" class="link tab__header ">Particulier</a></li>
+                <li class="list-item tab__header--item"><a href="/accounts/login/#zakelijk" class="link tab__header">Zakelijk</a></li>
             </ul>
             {# Panel 1 #}
             <div class="tabs__body">
@@ -94,7 +94,7 @@ <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
                                                     {% input form.username %}
                                                     {% input form.password %}
                                                     {% button text=_('Wachtwoord vergeten?') href='password_reset' secondary=True transparent=True align='right' %}
-                                                    {% form_actions primary_text=_("Inloggen") primary_icon="arrow_forward" secondary_href='django_registration_register' secondary_text=_('Registreer') secondary_icon='arrow_forward' single=True %}
+                                                    {% form_actions primary_text=_("Inloggen") primary_icon="arrow_forward" single=True %}
                                                 {% endrender_form %}
                                             {% endrender_card %}
                                         {% endif %}

diff --git a/src/open_inwoner/js/components/form/LoginForm.js b/src/open_inwoner/js/components/form/LoginForm.js
@@ -10,7 +10,7 @@ export class LoginFormFocus {
     this.removeAutofocusAndFocus()
     this.hideLoginFormOnLoad()
     this.addEmailToggleListener()
-
+    this.activateTabFromHash()
   }
 
   removeAutofocusAndFocus() {
@@ -47,6 +47,36 @@ export class LoginFormFocus {
       this.usernameInput.focus()
     }
   }
+
+  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')
+
+    if (hash.includes('zakelijk')) {
+      particulierLink.classList.remove('active')
+      particulierTab.classList.remove('active')
+      particulierTab.classList.add('hide')
+
+      zakelijkTab.classList.remove('hide')
+      zakelijkTab.classList.add('active')
+      zakelijkLink.classList.add('active')
+    } else {
+      particulierTab.classList.remove('hide')
+      particulierLink.classList.add('active')
+      particulierTab.classList.remove('active')
+
+      zakelijkTab.classList.add('hide')
+      zakelijkTab.classList.remove('active')
+      zakelijkLink.classList.remove('active')
+    }
+  }
 }
 
 const loginformFocuses = document.querySelectorAll(LoginFormFocus.selector)

diff --git a/src/open_inwoner/js/components/tab-panels/index.js b/src/open_inwoner/js/components/tab-panels/index.js
@@ -7,11 +7,8 @@ export class TabPanel {
     this.tabHeaders = node.querySelectorAll('.tab__header')
     this.tabContent = node.querySelectorAll('.tab__content')
 
-    this.hideContent()
-    this.showContent()
-
     this.tabHeadersRow.addEventListener('click', (e) => {
-      e.preventDefault() // Prevent the default action of anchor tag clicks
+      e.preventDefault() // Prevent 'other' tab__panel from disappearing immediately
 
       const target = e.target.closest('.tab__header')
       if (target) {
@@ -35,11 +32,41 @@ export class TabPanel {
   }
 
   showContent(index = 0) {
-    this.tabContent[index].classList.add('active')
-    this.tabContent[index].classList.remove('hide')
-    this.tabHeaders[index].classList.add('active')
+    this.tabContent.forEach((item, idx) => {
+      if (idx === index) {
+        item.classList.remove('hide')
+        item.classList.add('active')
+      } else {
+        item.classList.add('hide')
+        item.classList.remove('active')
+      }
+    })
+    this.tabHeaders.forEach((item, idx) => {
+      if (idx === index) {
+        item.classList.add('active')
+      } else {
+        item.classList.remove('active')
+      }
+    })
   }
 }
 
 const tabpanels = document.querySelectorAll(TabPanel.selector)
 ;[...tabpanels].forEach((tabpanel) => new TabPanel(tabpanel))
+
+// Activate tab from hash on page load
+// 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)
+      }
+    }
+  }
+})
diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
@@ -93,17 +93,14 @@
   .tab__content.active {
     margin: 1em;
     scroll-margin-top: 150px;
-
-    p {
-      padding: 0;
-    }
   }
 
   .active {
     display: block;
   }
 
-  .hide {
+  .hide,
+  &.hide {
     display: none;
   }
 
@@ -207,4 +204,8 @@
     font-weight: normal;
     margin: 0;
   }
+
+  .form__actions--single {
+    max-width: var(--form-width);
+  }
 }