-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#2036] Added tab navigation for login pages
- Loading branch information
1 parent
bcfa399
commit 3caaac9
Showing
10 changed files
with
363 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
src/open_inwoner/accounts/templates/registration/login_business.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| {% extends 'master.html' %} | ||
| {% load i18n static logo_tags grid_tags card_tags form_tags link_tags button_tags solo_tags cms_tags %} | ||
|
|
||
|
|
||
| {% block header_image %} | ||
| {% static_placeholder 'login_banner' %} | ||
| {% endblock header_image %} | ||
|
|
||
|
|
||
| {% block content %} | ||
|
|
||
| <h1 class="utrecht-heading-1">{% trans 'Inloggen' %}</h1> | ||
| {% if login_text %}<p class="p">{{ login_text|linebreaksbr }}</p>{% endif %} | ||
|
|
||
| {# Tab panels Start #} | ||
| <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" class="link tab__header">Particulier</a></li> | ||
| <li class="list-item tab__header--item"><a href="/accounts/login-business" class="link tab__header active">Zakelijk</a></li> | ||
| </ul> | ||
| {# Panel 1 #} | ||
| <div class="tabs__body"> | ||
|
|
||
| {# Panel 2 #} | ||
| <div id="zakelijk" class="tab__content"> | ||
|
|
||
| {% render_grid %} | ||
| {% render_column start=4 span=5 %} | ||
| <h4 class="h4">Zakelijk</h4> | ||
| {% if eherkenning_enabled %} | ||
| {% get_solo 'digid_eherkenning_oidc_generics.OpenIDConnectEHerkenningConfig' as eherkenning_oidc_config %} | ||
| {% if eherkenning_oidc_config.enabled %} | ||
| {% render_card direction='horizontal' tinted=True %} | ||
| <a href="{% url 'eherkenning_oidc:init' %}" class="link eherkenning-logo"> | ||
| <img class="eherkenning-logo__image" src="{% static 'accounts/eherkenning.png' %}" height=30 alt="eHerkenning inlogpagina"> | ||
| </a> | ||
| {% url 'eherkenning_oidc:init' as href %} | ||
| {% link href=href text=_('Inloggen met eHerkenning') primary=True icon='arrow_forward' extra_classes="link--eherkenning" %} | ||
| {% endrender_card %} | ||
| {% else %} | ||
| {% render_card direction='horizontal' tinted=True %} | ||
| <a href="{% url 'eherkenning:login' %}" class="link eherkenning-logo"> | ||
| <img class="eherkenning-logo__image" src="{% static 'accounts/eherkenning.png' %}" height=30 alt="eHerkenning inlogpagina"> | ||
| </a> | ||
| {% url 'eherkenning:login' as href %} | ||
| {% with href|addnexturl:next as href_with_next %} | ||
| {% link href=href_with_next text=_('Inloggen met eHerkenning') primary=True icon='arrow_forward' extra_classes="link--eherkenning" %} | ||
| {% endwith %} | ||
| {% endrender_card %} | ||
| {% endif %} | ||
| {% endif %} | ||
| {% endrender_column %} | ||
| {% endrender_grid %} | ||
|
|
||
| </div> | ||
| {# Panel 2 End #} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {# Tab panels End #} | ||
|
|
||
| {% endblock content %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| // export class TabPanel { | ||
| // static selector = '.login-tab--container' | ||
| // | ||
| // constructor(node) { | ||
| // this.node = node | ||
| // this.tabHeadersRow = node.querySelector('.tabs__headers') | ||
| // this.tabHeaders = node.querySelectorAll('.tab__header') | ||
| // this.tabContent = node.querySelectorAll('.tab__content') | ||
| // | ||
| // this.hideContent() | ||
| // this.showContent() | ||
| // | ||
| // this.tabHeadersRow.addEventListener('click', (e) => { | ||
| // // To prevent scrolling to the tab | ||
| // e.preventDefault() | ||
| // const target = e.target | ||
| // if (target.classList.contains('tab__header')) { | ||
| // console.log('there is a tabheader') | ||
| // this.tabHeaders.forEach((item, i) => { | ||
| // if (target == item) { | ||
| // this.hideContent() | ||
| // this.showContent(i) | ||
| // } | ||
| // }) | ||
| // } | ||
| // }) | ||
| // } | ||
| // | ||
| // hideContent() { | ||
| // console.log('Hide tab...') | ||
| // this.tabContent.forEach((item) => { | ||
| // item.classList.add('hide') | ||
| // item.classList.remove('active') | ||
| // }) | ||
| // this.tabHeaders.forEach((item) => { | ||
| // item.classList.remove('active') | ||
| // }) | ||
| // } | ||
| // | ||
| // showContent(i = 0) { | ||
| // console.log('Show tab...') | ||
| // this.tabContent[i].classList.add('active') | ||
| // this.tabContent[i].classList.remove('hide') | ||
| // this.tabHeaders[i].classList.add('active') | ||
| // } | ||
| // } | ||
| // | ||
| // const tabpanels = document.querySelectorAll(TabPanel.selector) | ||
| // ;[...tabpanels].forEach((tabpanel) => new TabPanel(tabpanel)) |
Oops, something went wrong.