diff --git a/src/eherkenning/tests/test_mock_views.py b/src/eherkenning/tests/test_mock_views.py index c8964affb3..e08b43f486 100644 --- a/src/eherkenning/tests/test_mock_views.py +++ b/src/eherkenning/tests/test_mock_views.py @@ -45,7 +45,7 @@ class TestAppIndexTests(TestCase): def test_eherkenning_enabled(self, mock_solo): mock_solo.return_value.eherkenning_enabled = True - url = reverse("login") + url = reverse("login_business") response = self.client.get(url) self.assertEqual(response.status_code, 200) @@ -54,7 +54,7 @@ def test_eherkenning_enabled(self, mock_solo): def test_eherkenning_disabled(self, mock_solo): mock_solo.return_value.eherkenning_enabled = False - url = reverse("login") + url = reverse("login_business") response = self.client.get(url) self.assertEqual(response.status_code, 200) 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..7c62d9a047 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 %} @@ -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..7ce7785311 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,139 @@ {% 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 %} +

{% trans 'Welkom' %}

+ {% if login_text %} +
{{ login_text|markdown|safe }}
+ {% 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 %} + {# Tab panels Start #} +
+
+ + {# Panel 1 #} +
- {% 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 %} +
+ {% render_grid %} - {% 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 %} + {# 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 %} + {% link href=href text=_('Inloggen met DigiD') primary=True icon='east' extra_classes="link--next link--digid" %} + {% 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 %} + {% render_column start=4 span=5 %} + {% get_solo 'digid_eherkenning_oidc_generics.OpenIDConnectDigiDConfig' as digid_oidc_config %} + {% if eherkenning_oidc_config.enabled %} + {% render_card direction='horizontal' tinted=True compact=True %} + + {% url 'eherkenning_oidc:init' as href %} + {% link href=href text=_('Inloggen met eHerkenning') primary=True icon='east' extra_classes="link--next link--eherkenning" %} + {% 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--next link--eherkenning" %} + {% endwith %} + {% endrender_card %} + {% endif %} + {% endrender_column %} + + {% 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' %} + {% 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 primary=True icon='east' icon_position="after" extra_classes="link--next link--oidc" %} + {% endwith %} + {% endrender_card %} + {% endrender_column %} + {% endif %} + + {% if login_allow_registration %} + {% render_column start=4 span=5 %} + {% render_card direction='horizontal' tinted=True compact=True %} + + {% icon icon="login" icon_position="before" outlined=True %} + + {% link href="#email" text=_('Log in met e-mail adres') primary=True icon='east' extra_classes="link--next link--email" %} + {% endrender_card %} + {% endrender_column %} + + {% render_column start=4 span=5 %} + {% 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' primary=True transparent=True align='right' %} + {% form_actions primary_text=_("Inloggen") primary_icon="east" secondary_href='django_registration_register' secondary_text=_('Registreer') secondary_icon='east' single=True %} + {% endrender_form %} + {% endrender_card %} + {% endrender_column %} + + {% render_column start=4 span=5 %} +

Of registreer

+ {% render_card direction='horizontal' tinted=True compact=True %} + + {% icon icon="account_circle" icon_position="before" outlined=True %} + + {% link href="/accounts/register" text=_('Maak een account aan') primary=True icon='east' extra_classes="link--next link--register" %} + {% endrender_card %} + {% endrender_column %} + + {% endif %} + + {% endif %} + {# another Digid end #} + + {% endrender_grid %} +
+ {# Panel 2 #} + {# Panel 2 End #} +
+
+ {# Tab panels End #} {% endblock content %} diff --git a/src/open_inwoner/accounts/templates/registration/login_business.html b/src/open_inwoner/accounts/templates/registration/login_business.html new file mode 100644 index 0000000000..8756d89ad7 --- /dev/null +++ b/src/open_inwoner/accounts/templates/registration/login_business.html @@ -0,0 +1,65 @@ +{% extends 'master.html' %} +{% load i18n static utils grid_tags card_tags form_tags link_tags button_tags icon_tags solo_tags cms_tags %} + + +{% block header_image %} + {% static_placeholder 'login_banner' %} +{% endblock header_image %} + + +{% block content %} + +

{% trans 'Inloggen' %}

+ {% if login_text %} +
{{ login_text|markdown|safe }}
+ {% endif %} + + {# Tab panels Start #} +
+
+ + {# Panel 1 #} +
+ + {# Panel 2 #} +
+ + {% render_grid %} + {% render_column start=4 span=5 %} +

Zakelijk

+ {% 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 %} + + {% url 'eherkenning_oidc:init' as href %} + {% link href=href text=_('Inloggen met eHerkenning') primary=True icon='east' extra_classes="link--next link--eherkenning" %} + {% endrender_card %} + {% else %} + {% render_card direction='horizontal' tinted=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--next 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/accounts/tests/test_auth.py b/src/open_inwoner/accounts/tests/test_auth.py index 9ea470b54e..93f8e0fb9b 100644 --- a/src/open_inwoner/accounts/tests/test_auth.py +++ b/src/open_inwoner/accounts/tests/test_auth.py @@ -1642,7 +1642,7 @@ def test_login_page_shows_correct_eherkenning_login_url(self): else f"{reverse('eherkenning:login')}?next=" ) - response = self.app.get(reverse("login")) + response = self.app.get(reverse("login_business")) eherkenning_login_title = _("Inloggen met eHerkenning") eherkenning_login_link = response.pyquery( diff --git a/src/open_inwoner/accounts/views/__init__.py b/src/open_inwoner/accounts/views/__init__.py index 9ccf128874..7058d48017 100644 --- a/src/open_inwoner/accounts/views/__init__.py +++ b/src/open_inwoner/accounts/views/__init__.py @@ -29,6 +29,7 @@ from .invite import InviteAcceptView from .login import ( AddPhoneNumberWizardView, + CustomBusinessLoginView, CustomLoginView, ResendTokenView, VerifyTokenView, @@ -69,6 +70,7 @@ "InviteAcceptView", "AddPhoneNumberWizardView", "CustomLoginView", + "CustomBusinessLoginView", "ResendTokenView", "VerifyTokenView", "PasswordResetView", diff --git a/src/open_inwoner/accounts/views/login.py b/src/open_inwoner/accounts/views/login.py index e019d71838..105d6fd261 100644 --- a/src/open_inwoner/accounts/views/login.py +++ b/src/open_inwoner/accounts/views/login.py @@ -91,6 +91,10 @@ def form_valid(self, form): return redirect(furl(reverse("verify_token")).add(params).url) +class CustomBusinessLoginView(CustomLoginView): + template_name = "registration/login_business.html" + + class VerifyTokenView(ThrottleMixin, FormView): throttle_visits = 3 throttle_period = 60 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 048d0f7770..a0c80a1ce0 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/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index 17c6662a97..d65ccbca99 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 a2523250ba..89afce3666 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -72,15 +72,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); + } } } @@ -221,11 +228,6 @@ } } - &__body--direction-horizontal { - display: flex; - justify-content: space-between; - } - &__body--flex { display: flex; flex-direction: column; diff --git a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss index 883f480431..0654b6c716 100644 --- a/src/open_inwoner/scss/components/TabPanel/TabPanel.scss +++ b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss @@ -4,118 +4,183 @@ 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; + } + &:target::before { + scroll-margin-top: 150px; + } - @media (min-width: 360px) { - max-width: 200px; - float: left; - } -} + &:active { + background-color: var(--color-white); + } -.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 { + border-bottom: 2px solid var(--color-primary); + color: var(--font-color-body); + font-weight: bold; + margin: 0; + } + } - &:target { + .tab__content, + .tab__content.active { + margin: 1em; scroll-margin-top: 150px; + + p { + padding: 0; + } } - &:target::before { - scroll-margin-top: 150px; + + .active { + display: block; } - &.active { - border-bottom: 2px solid var(--color-primary); - color: var(--font-color-body); - font-weight: bold; - margin: 0; + .hide { + display: none; } -} -.tabs__body { - padding: 0; + .tabs__body { + padding: 0; + + // Styling for Benefits reports/Mijn uitkeringen + .form { + //max-width: var(--mobile-ms-width); - // 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(--spacing-mega) 0 0 0; + scroll-margin-top: 150px; -.hide { - display: none; + .tab__heading-4 { + font-size: var(--font-size-heading-4); + margin-bottom: var(--spacing-large); + } + + .card { + & .link--next [class*='icon'] { + font-size: var(--font-size-body); + } + } + } } diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss index 14eee75787..5de5e6f747 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: 46px; + } + } + *[class*='icon']:first-child, *[class*='Icon']:first-child { transform: scale(1); diff --git a/src/open_inwoner/urls.py b/src/open_inwoner/urls.py index 4f1b33901a..c2052b7418 100644 --- a/src/open_inwoner/urls.py +++ b/src/open_inwoner/urls.py @@ -15,6 +15,7 @@ from open_inwoner.accounts.forms import CustomRegistrationForm from open_inwoner.accounts.views import ( AddPhoneNumberWizardView, + CustomBusinessLoginView, CustomDigiDAssertionConsumerServiceMockView, CustomDigiDAssertionConsumerServiceView, CustomeHerkenningAssertionConsumerServiceMockView, @@ -88,6 +89,11 @@ name="password_reset_confirm", ), path("accounts/login/", CustomLoginView.as_view(), name="login"), + path( + "accounts/login-business/", + CustomBusinessLoginView.as_view(), + name="login_business", + ), path("accounts/verify/", VerifyTokenView.as_view(), name="verify_token"), path("accounts/resend-token/", ResendTokenView.as_view(), name="resend_token"), path(