diff --git a/src/open_inwoner/accounts/templates/django_registration/registration_form.html b/src/open_inwoner/accounts/templates/django_registration/registration_form.html index 7f206a1caa..07cb984914 100644 --- a/src/open_inwoner/accounts/templates/django_registration/registration_form.html +++ b/src/open_inwoner/accounts/templates/django_registration/registration_form.html @@ -3,7 +3,7 @@ {% block content %} -
+

{% trans 'Registreren' %}

{% render_grid %} {% if settings.DIGID_ENABLED and digid_url %} {% render_column start=5 span=5 %} @@ -11,7 +11,7 @@ - {% link bold=True href=digid_url text=_('Registreren met DigiD') secondary=True icon='arrow_forward' %} + {% link bold=True href=digid_url text=_('Registreren met DigiD') primary=True icon='arrow_forward' %} {% endrender_card %} {% endrender_column %} {% endif %} @@ -22,7 +22,7 @@ - {% link bold=True href=eherkenning_url text=_('Registreren met eHerkenning') secondary=True icon='arrow_forward' %} + {% link bold=True href=eherkenning_url text=_('Registreren met eHerkenning') primary=True icon='arrow_forward' %} {% endrender_card %} {% endrender_column %} {% endif %} @@ -30,13 +30,12 @@ {% if login_allow_registration %} {% render_column start=5 span=5 %} {% render_card tinted=True compact=True %} -

{% trans "Registreren met E-mail" %}


+

{% trans "Registreren met E-mail" %}

{% form form_object=form method="POST" id="registration-form" submit_text=_('Registreren') extra_classes="form__registration" show_required=True %} {% endrender_card %} {% endrender_column %} {% endif %} {% endrender_grid %} -
{% endblock content %} diff --git a/src/open_inwoner/accounts/templates/registration/login.html b/src/open_inwoner/accounts/templates/registration/login.html index 5a11e3abcd..a3e23c12a9 100644 --- a/src/open_inwoner/accounts/templates/registration/login.html +++ b/src/open_inwoner/accounts/templates/registration/login.html @@ -1,5 +1,5 @@ {% extends 'master.html' %} -{% load i18n static utils grid_tags card_tags form_tags link_tags button_tags solo_tags cms_tags %} +{% load i18n static utils grid_tags card_tags form_tags link_tags button_tags icon_tags solo_tags cms_tags %} {% block header_image %} @@ -8,95 +8,161 @@ {% block content %} -
- {% render_grid %} - {% render_column start=5 span=5 %} - {% render_card %} -

{% trans 'Welkom' %}

- {% if login_text %}
{{ login_text|markdown|safe }}
{% endif %} -
- {% if settings.DIGID_ENABLED %} - {% get_solo 'digid_eherkenning_oidc_generics.OpenIDConnectDigiDConfig' as digid_oidc_config %} - {% if digid_oidc_config.enabled %} - {% render_card direction='horizontal' tinted=True compact=True %} - - {% url 'digid_oidc:init' as href %} - {% with href|addnexturl:next as href_with_next %} - {% link href=href_with_next text=_('Inloggen met DigiD') secondary=True icon='arrow_forward' extra_classes="link--digid" %} - {% endwith %} - {% endrender_card %} - {% else %} - {% render_card direction='horizontal' tinted=True compact=True %} - - {% url 'digid:login' as href %} - {% with href|addnexturl:next as href_with_next %} - {% link href=href_with_next text=_('Inloggen met DigiD') secondary=True icon='arrow_forward' extra_classes="link--digid" %} - {% endwith %} - {% endrender_card %} - {% endif %} - {% endif %} - - {% 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 compact=True %} - - {% url 'eherkenning_oidc:init' as href %} - {% with href|addnexturl:next as href_with_next %} - {% link href=href_with_next text=_('Inloggen met eHerkenning') secondary=True icon='arrow_forward' extra_classes="link--eherkenning" %} - {% endwith %} - {% endrender_card %} - {% else %} - {% render_card direction='horizontal' tinted=True compact=True %} - - {% url 'eherkenning:login' as href %} - {% with href|addnexturl:next as href_with_next %} - {% link href=href_with_next text=_('Inloggen met eHerkenning') secondary=True icon='arrow_forward' extra_classes="link--eherkenning" %} - {% endwith %} - {% endrender_card %} - {% endif %} - {% endif %} - - {% get_solo 'mozilla_django_oidc_db.OpenIDConnectConfig' as oidc_config %} - {% get_solo 'configurations.SiteConfiguration' as site_config %} - {% if oidc_config.enabled and site_config.openid_enabled_for_regular_users %} - {% render_card tinted=True compact=True direction='horizontal' %} - {% if site_config.openid_connect_logo %} - - {% else %} -
- {% endif %} - {% url 'oidc_authentication_init' as href %} - {% with href|addnexturl:next as href_with_next %} - {% link text=site_config.openid_connect_login_text href=href_with_next secondary=True icon='arrow_forward' icon_position="after" %} - {% endwith %} - {% endrender_card %} - {% endif %} - - {% if login_allow_registration %} - {% render_card tinted=True compact=True %} - {% render_form id="login-form" method="POST" form=form show_required=True %} - {% csrf_token %} - - {% 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 %} - {% endrender_form %} - {% endrender_card %} - {% endif %} - {% endrender_card %} - {% endrender_column %} - {% endrender_grid %} +

{% trans 'Welkom' %}

+ {% if login_text %} +
{{ login_text|markdown|safe }}
+ {% endif %} + + {# Tab panels Start #} +
+
+ + {# Panel 1 #} +
+ +
+ {% render_grid %} + + {# Digid #} + {% if settings.DIGID_ENABLED %} + {% render_column start=4 span=5 %} + {% get_solo 'digid_eherkenning_oidc_generics.OpenIDConnectDigiDConfig' as digid_oidc_config %} + {% if digid_oidc_config.enabled %} + {% render_card direction='horizontal' tinted=True compact=True %} + {% url 'digid_oidc:init' as href %} + {% with href|addnexturl:next as href_with_next %} + + {% link href=href_with_next text=_('Inloggen met DigiD') primary=True icon='east' extra_classes="link--next link--digid" %} + {% endwith %} + {% endrender_card %} + {% else %} + {% render_card direction='horizontal' tinted=True compact=True %} + {% url 'digid:login' as href %} + {% with href|addnexturl:next as href_with_next %} + + {% link href=href_with_next text=_('Inloggen met DigiD') primary=True icon='east' extra_classes="link--next link--digid" %} + {% endwith %} + {% endrender_card %} + {% endif %} + {% endrender_column %} + {% endif %} + {# end digid #} + + {% if settings.DIGID_ENABLED %} + {% get_solo 'mozilla_django_oidc_db.OpenIDConnectConfig' as oidc_config %} + {% get_solo 'configurations.SiteConfiguration' as site_config %} + {% if oidc_config.enabled and site_config.openid_enabled_for_regular_users %} + {% render_column start=4 span=5 %} + {% render_card tinted=True compact=True direction='horizontal' %} + {% url 'oidc_authentication_init' as href %} + {% with href|addnexturl:next as href_with_next %} + {% if site_config.openid_connect_logo %} + + {% else %} +
+ {% endif %} + {% link text=site_config.openid_connect_login_text href=href_with_next primary=True icon='east' icon_position="after" extra_classes="link--next link--oidc" %} + {% endwith %} + {% endrender_card %} + {% endrender_column %} + {% endif %} + + {% if login_allow_registration %} +
+ {% render_card direction='horizontal' tinted=True compact=True %} + {% url 'login' as href %} + {% with href|add:"#particuliermail" as href_with_hash %} + + {% icon icon="login" icon_position="before" outlined=True %} + + {% link href=href_with_hash text=_('Log in met e-mail adres') primary=True icon='east' extra_classes="link--next link--email" %} + {% endwith %} + {% endrender_card %} +
+ + {# Hide mail login initially #} +
+ {% if login_allow_registration %} + {% render_card tinted=True compact=True %} + {% render_form id="login-form" method="POST" form=form show_required=True %} + {% csrf_token %} + + {% 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="east" single=True %} + {% endrender_form %} + {% endrender_card %} + {% endif %} +
+ {# End hidden #} + + {% render_column start=4 span=5 %} +

Of registreer

+ {% render_card direction='horizontal' tinted=True compact=True %} + {% url 'django_registration_register' as href %} + + {% icon icon="account_circle" icon_position="before" outlined=True %} + + {% link href=href text=_('Maak een account aan') primary=True icon='east' extra_classes="link--next link--register" %} + {% endrender_card %} +

{% trans 'U kunt een account aanmaken om voortaan met uw e-mail adres en wachtwoord in te loggen.' %}

+ {% endrender_column %} + {% endif %} + + {% endif %} + {# another Digid end #} + + {% endrender_grid %} +
+ {# Panel 1 End #} + + {# Panel 2 #} +
+ + {% render_grid %} + {% render_column start=4 span=5 %} + {% 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 compact=True %} + {% url 'eherkenning_oidc:init' as href %} + {% with href|addnexturl:next as href_with_next %} + + {% link href=href_with_next text=_('Inloggen met eHerkenning') primary=True icon='east' extra_classes="link--eherkenning" %} + {% endwith %} + {% endrender_card %} + {% else %} + {% render_card direction='horizontal' tinted=True compact=True %} + {% 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='east' extra_classes="link--eherkenning" %} + {% endwith %} + {% endrender_card %} + {% endif %} + {% endif %} + {% endrender_column %} + {% endrender_grid %} + +
+ {# Panel 2 End #} + +
+
+ {# Tab panels End #} {% endblock content %} diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html index 67f85e35a1..450a9541c7 100644 --- a/src/open_inwoner/components/templates/components/Header/Header.html +++ b/src/open_inwoner/components/templates/components/Header/Header.html @@ -24,7 +24,7 @@ {% url 'login' as login_url %} {% trans "Inloggen" as login %} - {% button text="" title="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %} + {% button text="" title="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True %} {% endif %}
diff --git a/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html b/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html index 5e93437bbc..eccacad48e 100644 --- a/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html +++ b/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html @@ -36,7 +36,7 @@ {% url 'login' as login_url %} {% trans "Inloggen" as login %} - {% button text="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %} + {% button text="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True %} {% endif %} diff --git a/src/open_inwoner/js/components/form/LoginForm.js b/src/open_inwoner/js/components/form/LoginForm.js new file mode 100644 index 0000000000..f87d4dc011 --- /dev/null +++ b/src/open_inwoner/js/components/form/LoginForm.js @@ -0,0 +1,83 @@ +export class LoginFormFocus { + static selector = '#login-form' + + constructor(node) { + this.node = node + this.usernameInput = node.querySelector('input[name="username"]') + this.loginFormColumn = document.getElementById('column__login-form') + this.emailToggleParent = document.getElementById('column__email-toggle') + + this.removeAutofocusAndFocus() + this.hideLoginFormOnLoad() + this.addEmailToggleListener() + this.activateTabFromHash() + } + + removeAutofocusAndFocus() { + if (this.usernameInput) { + this.usernameInput.removeAttribute('autofocus') + this.usernameInput.blur() + } + } + + hideLoginFormOnLoad() { + if (this.loginFormColumn) { + this.emailToggleParent.setAttribute('aria-expanded', 'false') + this.loginFormColumn.classList.add('hide') + } + } + + addEmailToggleListener() { + if (this.emailToggleParent) { + const emailToggleParents = + this.emailToggleParent.querySelectorAll('.link') + emailToggleParents.forEach((link) => { + link.addEventListener('click', (event) => { + event.preventDefault() + this.emailToggleParent.classList.add('hide') + this.toggleLoginFormVisibility() + }) + }) + } + } + + toggleLoginFormVisibility() { + if (this.loginFormColumn) { + this.loginFormColumn.classList.toggle('hide') + 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) +;[...loginformFocuses].forEach((element) => new LoginFormFocus(element)) diff --git a/src/open_inwoner/js/components/form/index.js b/src/open_inwoner/js/components/form/index.js index 019a738f9c..645926ca79 100644 --- a/src/open_inwoner/js/components/form/index.js +++ b/src/open_inwoner/js/components/form/index.js @@ -2,3 +2,4 @@ import './FileInput' import './ChoiceListMultiple' import './ChoiceListSingle' import './DisableContactFormButton' +import './LoginForm' diff --git a/src/open_inwoner/js/components/index.js b/src/open_inwoner/js/components/index.js index 604d973bba..26a0e38111 100644 --- a/src/open_inwoner/js/components/index.js +++ b/src/open_inwoner/js/components/index.js @@ -27,6 +27,7 @@ import './plan-preview' import './questionnaire' import './readmore' import './search' +import { TabPanel } from './tab-panels' import './toggle' import { StatusAccordion } from './cases/status_accordion' import './session' @@ -58,6 +59,8 @@ const elementWrappers = [ [StatusAccordion.selector, (elt) => new StatusAccordion(elt)], [FileInput.selector, (elt) => new FileInput(elt)], [ToggleHide.selector, (elt) => new ToggleHide(elt)], + [TabPanel.selector, (elt) => new TabPanel(elt)], + // add more when needed ] // harden against multiple events diff --git a/src/open_inwoner/js/components/tab-panels/index.js b/src/open_inwoner/js/components/tab-panels/index.js new file mode 100644 index 0000000000..b533fc534b --- /dev/null +++ b/src/open_inwoner/js/components/tab-panels/index.js @@ -0,0 +1,72 @@ +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.tabHeadersRow.addEventListener('click', (e) => { + e.preventDefault() // Prevent 'other' tab__panel from disappearing immediately + + const target = e.target.closest('.tab__header') + if (target) { + const index = [...this.tabHeaders].indexOf(target) + if (index !== -1) { + this.hideContent() + this.showContent(index) + } + } + }) + } + + hideContent() { + this.tabContent.forEach((item) => { + item.classList.add('hide') + item.classList.remove('active') + }) + this.tabHeaders.forEach((item) => { + item.classList.remove('active') + }) + } + + showContent(index = 0) { + 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/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index e5b76b2875..8f8dd96479 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/src/open_inwoner/scss/components/Button/Button.scss @@ -100,6 +100,19 @@ border-color: transparent; color: var(--color-primary); + &.button--primary { + border-color: transparent; + color: var(--color-primary); + background-color: transparent; + + &:hover { + background-color: transparent; + border-color: transparent; + color: var(--color-primary); + text-decoration: underline; + } + } + &.button--secondary { color: var(--color-secondary); background-color: transparent; diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index 11dcbe8aa2..542f1e109b 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -115,15 +115,22 @@ &--tinted { --card-color-background: var(--color-gray-lightest); + border: var(--card-size-border) solid var(--color-gray-lightest); // contrast for accessibility .form .caption__content { color: var(--color-tinted-mute); } - .card__body--direction-horizontal .link .link__text { - text-align: right; - padding-left: var(--spacing-small); + .card__body--direction-horizontal { + display: flex; + justify-content: space-between; + padding: 20px; + + .link .link__text { + text-align: right; + padding-left: var(--spacing-small); + } } } @@ -264,11 +271,6 @@ } } - &__body--direction-horizontal { - display: flex; - justify-content: space-between; - } - &__body--flex { display: flex; flex-direction: column; @@ -356,7 +358,7 @@ } /// On a stretched card, the one and only link after a list should be placed on above the bottom border. - &-- stretch &__body { + &--stretch &__body { padding-bottom: var(--card-spacing); @media (min-width: 768px) { diff --git a/src/open_inwoner/scss/components/LoginForm/LoginForm.scss b/src/open_inwoner/scss/components/LoginForm/LoginForm.scss new file mode 100644 index 0000000000..22847911d3 --- /dev/null +++ b/src/open_inwoner/scss/components/LoginForm/LoginForm.scss @@ -0,0 +1,7 @@ +#login-form { + //display: none; + + &.active { + display: grid; + } +} diff --git a/src/open_inwoner/scss/components/Logo/DigidLogo.scss b/src/open_inwoner/scss/components/Logo/DigidLogo.scss index 13eaf730ad..0870da310b 100644 --- a/src/open_inwoner/scss/components/Logo/DigidLogo.scss +++ b/src/open_inwoner/scss/components/Logo/DigidLogo.scss @@ -1,5 +1,5 @@ .digid-logo { &__image { - height: 40px; + height: 50px; } } diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss index 883f480431..9eb94c2fe9 100644 --- a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss +++ b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss @@ -4,118 +4,212 @@ display: flex; max-width: 100%; width: 100%; -} -.tabs { - background: #fff; - overflow: initial; - width: 100%; + .tabs { + background: #fff; + overflow: initial; + width: 100%; - @media (min-width: 500px) { - overflow: hidden; + @media (min-width: 500px) { + overflow: hidden; + } } -} -.list.tabs__headers { - display: block; - align-items: center; - box-sizing: border-box; - width: 100%; - margin: 0; - overflow: hidden; - padding: 0; - position: relative; - - &::before { - left: 0; - right: 0; - bottom: 0px; - height: 0; - border-bottom: 2px solid var(--color-gray-light); - content: ''; - top: auto; + .list.tabs__headers { display: block; - position: absolute; + align-items: center; + box-sizing: border-box; + width: 100%; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + + &::before { + left: 0; + right: 0; + bottom: 0px; + height: 0; + border-bottom: 2px solid var(--color-gray-light); + content: ''; + top: auto; + display: block; + position: absolute; + } + + &::after { + clear: both; + display: block; + content: ''; + } } - &::after { - clear: both; + .list-item.tab__header--item { + max-width: var(--mobile-xs-width); + border: none; display: block; - content: ''; + float: none; + padding: 0; + border: 0; + margin-right: -1px; + position: relative; + + @media (min-width: 360px) { + max-width: 200px; + float: left; + } } -} -.list-item.tab__header--item { - max-width: var(--mobile-xs-width); - border: none; - display: block; - float: none; - padding: 0; - border: 0; - margin-right: -1px; - position: relative; + .link.tab__header { + box-sizing: border-box; + color: var(--color-gray-lighter); + display: inline-block; + cursor: pointer; + width: 100%; + padding: var(--spacing-large); + transition: 0.3s; + + &:target { + scroll-margin-top: 150px; + } - @media (min-width: 360px) { - max-width: 200px; - float: left; - } -} + &:target::before { + scroll-margin-top: 150px; + } -.link.tab__header { - box-sizing: border-box; - color: var(--color-gray-lighter); - display: inline-block; - cursor: pointer; - width: 100%; - padding: var(--spacing-large); - transition: 0.3s; + &:active { + background-color: var(--color-white); + } - &:target { - scroll-margin-top: 150px; + &.active { + border-bottom: 2px solid var(--color-primary); + color: var(--font-color-body); + font-weight: bold; + margin: 0; + } } - &:target::before { + + .tab__content, + .tab__content.active { + margin: 1em; scroll-margin-top: 150px; } - &.active { - border-bottom: 2px solid var(--color-primary); - color: var(--font-color-body); - font-weight: bold; - margin: 0; + .active { + display: block; } -} -.tabs__body { - padding: 0; + .hide, + &.hide { + display: none; + } - // Styling for Benefits reports/Mijn uitkeringen - .form { - max-width: var(--mobile-ms-width); + .tabs__body { + padding: 0; + + // Styling for Benefits reports/Mijn uitkeringen + .form { + //max-width: var(--mobile-ms-width); + + .form__actions { + margin-top: 0; + } - .form__actions { - margin-top: 0; + .form__control [class*='icon'] { + transform: none; + } } + } - .form__control [class*='icon'] { - transform: none; + .form { + /// Make required asterisk visible for this component + .label__label--required { + color: var(--color-red); + padding-left: var(--spacing-tiny); + //make asterisks invisible by default, only make them visible if component has the caption + display: inline; } } } -.tab__content, -.tab__content.active { - margin: 1em; - scroll-margin-top: 150px; +/// Tabs on login page - p { - padding: 0; +.login-tab--container { + .list-item.tab__header--item { + min-width: 100px; + + @media (min-width: 500px) { + min-width: 180px; + } } -} -.active { - display: block; -} + .link.tab__header { + font-weight: normal; + padding: var(--spacing-large) var(--spacing-large) var(--spacing-large) 0; + border-bottom: 2px solid var(--color-gray-light); + + // for inactive tabs + @media (min-width: 500px) { + border-bottom: none; + } + + &:active { + background-color: var(--color-white); + } + + &.active { + background-color: var(--color-white); + border-bottom: 2px solid var(--color-accent); + color: var(--color-accent); + font-weight: bold; + margin: 0; + } + } + + .tab__content { + margin: var(--row-height) 0 0 0; + scroll-margin-top: 150px; + + .tab__heading-4 { + font-size: var(--font-size-heading-4); + margin-bottom: var(--spacing-large); + } + + .grid { + gap: var(--spacing-large); + } + + .card { + & .link--next [class*='icon'] { + font-size: var(--font-size-body); + } + } -.hide { - display: none; + &#particulier { + #column__email-toggle, + #column__login-form { + &.hide { + display: none; + } + } + + #column__login-form .button--transparent { + color: var(--color-primary); + padding-left: 0; + } + } + } + + .tab-column__paragraph { + color: var(--font-color-body); + font-family: var(--font-family-body); + font-size: var(--font-size-body); + line-height: var(--font-line-height-body); + font-weight: normal; + margin: 0; + } + + .form__actions--single { + max-width: var(--form-width); + } } diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss index 14eee75787..2fac1e5cee 100644 --- a/src/open_inwoner/scss/components/Typography/Link.scss +++ b/src/open_inwoner/scss/components/Typography/Link.scss @@ -78,6 +78,17 @@ text-decoration: none; } + &.icon--large { + &:hover { + text-decoration: none; + } + + *[class*='icon'] { + color: var(--color-gray-90); + font-size: 50px; + } + } + *[class*='icon']:first-child, *[class*='Icon']:first-child { transform: scale(1); diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss index 810a1cb588..cebb0fc69d 100644 --- a/src/open_inwoner/scss/components/_index.scss +++ b/src/open_inwoner/scss/components/_index.scss @@ -58,6 +58,7 @@ @import './KCMSurvey/KCMSurvey.scss'; @import './List/List.scss'; @import './List/ListItem.scss'; +@import './LoginForm/LoginForm'; @import './Logo/DigidLogo.scss'; @import './Logo/Logo.scss'; @import './MainImage/MainImage.scss'; diff --git a/src/open_inwoner/scss/views/_view.scss b/src/open_inwoner/scss/views/_view.scss index 1e4eadc72b..15464085f8 100644 --- a/src/open_inwoner/scss/views/_view.scss +++ b/src/open_inwoner/scss/views/_view.scss @@ -27,4 +27,13 @@ color: var(--color-primary); } } + + &---django_registration_register { + .label__label--required { + color: var(--color-red); + padding-left: var(--spacing-tiny); + //make asterisks invisible by default, only make them visible if component has the caption + display: inline; + } + } } diff --git a/src/open_inwoner/templates/registration/password_reset_form.html b/src/open_inwoner/templates/registration/password_reset_form.html index 58f863fe8a..e924648814 100644 --- a/src/open_inwoner/templates/registration/password_reset_form.html +++ b/src/open_inwoner/templates/registration/password_reset_form.html @@ -1,15 +1,20 @@ {% extends 'master.html' %} -{% load i18n static form_tags %} +{% load i18n static grid_tags form_tags %} {% block content %} -

{% trans "Reset password" %}

-

{% trans "Forgot your password? Enter your email address below. Then you will receive an email with instructions to set a new password." %}

-

{% trans "Please note: this only works if you do are not using DigiD to log in." %}

- - {% render_form id="password-reset-form" method="POST" form=form%} - {% csrf_token %} - {% input form.email %} - {% form_actions primary_text=_("Reset password") primary_icon="arrow_forward" %} - {% endrender_form %} + + {% render_grid %} + {% render_column start=0 span=6 %} +

{% trans "Reset password" %}

+

{% trans "Forgot your password? Enter your email address below. Then you will receive an email with instructions to set a new password." %}

+

{% trans "Please note: this only works if you do are not using DigiD to log in." %}

+ + {% render_form id="password-reset-form" method="POST" form=form %} + {% csrf_token %} + {% input form.email %} + {% form_actions primary_text=_("Reset password") primary_icon="arrow_forward" %} + {% endrender_form %} + {% endrender_column %} + {% endrender_grid %} {% endblock content %}