[#2036] Added view

maykinmedia · Mar 14, 2024 · c043537 · c043537
1 parent 5210464
commit c043537
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 40 deletions.
diff --git a/src/open_inwoner/accounts/templates/registration/login.html b/src/open_inwoner/accounts/templates/registration/login.html
@@ -115,7 +115,7 @@ <h2 class="tab__heading-4">Of registreer</h2>
                                         </a>
                                         {% link href="/accounts/register" text=_('Maak een account aan') primary=True icon='east' extra_classes="link--next link--register" %}
                                     {% endrender_card %}
-                                    <p>{% trans 'U kunt een account aanmaken om voortaan met uw e-mail adres en wachtwoord in te loggen.' %}</p>
+                                    <p class="tab-column__paragraph">{% trans 'U kunt een account aanmaken om voortaan met uw e-mail adres en wachtwoord in te loggen.' %}</p>
                                 {% endrender_column %}
                             {% endif %}
 
@@ -124,8 +124,7 @@ <h2 class="tab__heading-4">Of registreer</h2>
 
                     {% endrender_grid %}
                 </div>
-                {# Panel 2 #}
-                {# Panel 2 End #}
+                {# Panel 1 End #}
             </div>
         </div>
     </div>

diff --git a/src/open_inwoner/accounts/templates/registration/login_business.html b/src/open_inwoner/accounts/templates/registration/login_business.html
@@ -29,7 +29,6 @@ <h1 class="utrecht-heading-1">{% trans 'Inloggen' %}</h1>
 
                     {% 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 %}

diff --git a/src/open_inwoner/accounts/templates/registration/login_email.html b/src/open_inwoner/accounts/templates/registration/login_email.html
@@ -3,39 +3,39 @@
 
 {% block content %}
 
-<h1 class="utrecht-heading-1">{% trans 'Registreren' %}</h1>
-  {% render_grid %}
-   {% if settings.DIGID_ENABLED and digid_url %}
-    {% render_column start=5 span=5 %}
-        {% render_card direction='horizontal' tinted=True compact=True %}
-            <a href="{{ digid_url }}" class="link digid-logo">
-                <img class="digid-logo__image" src="{% static 'accounts/digid_logo.svg' %}" alt="DigiD inlogpagina">
-            </a>
-            {% link bold=True href=digid_url text=_('Registreren met DigiD') primary=True icon='arrow_forward' %}
-        {% endrender_card %}
-    {% endrender_column %}
-  {% endif %}
+    <h1 class="utrecht-heading-1">{% trans 'Log in met e-mail adres' %}</h1>
 
-  {% if eherkenning_enabled and eherkenning_url %}
-    {% render_column start=5 span=5 %}
-        {% render_card direction='horizontal' tinted=True compact=True %}
-            <a href="{{ eherkenning_url }}" class="link eherkenning-logo">
-                <img class="eherkenning-logo__image" src="{% static 'accounts/eherkenning.png' %}" height=30 alt="eHerkenning inlogpagina">
-            </a>
-            {% link bold=True href=eherkenning_url text=_('Registreren met eHerkenning') primary=True icon='arrow_forward' %}
-        {% endrender_card %}
-    {% endrender_column %}
-  {% endif %}
-
-  {% if login_allow_registration %}
-        {% render_column start=5 span=5 %}
-            {% render_card tinted=True compact=True  %}
-                <h3 class="h3">{% trans "Registreren met E-mail" %}</h3>
-                {% 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 %}
+    {# 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 active">Particulier</a></li>
+                <li class="list-item tab__header--item"><a href="/accounts/login-business" class="link tab__header">Zakelijk</a></li>
+            </ul>
+            {# Panel 1 #}
+            <div class="tabs__body">
+                <div id="particulier" class="tab__content">
+                    {% render_grid %}
+                        {% render_column start=4 span=5 %}
+                            {% 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 type="hidden" name="next" value="{{ next }}"/>
+                                        {% 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_column %}
+                    {% endrender_grid %}
+                </div>
+                {# Panel 1 End #}
+            </div>
+        </div>
+    </div>
+    {# Tab panels End #}
 
 {% endblock content %}
diff --git 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 CustomEmailLoginView(CustomLoginView):
+    template_name = "registration/login_email.html"
+
+
 class CustomBusinessLoginView(CustomLoginView):
     template_name = "registration/login_business.html"
 

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -315,7 +315,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/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
@@ -169,7 +169,7 @@
   }
 
   .tab__content {
-    margin: var(--spacing-mega) 0 0 0;
+    margin: var(--row-height) 0 0 0;
     scroll-margin-top: 150px;
 
     .tab__heading-4 {
@@ -184,3 +184,10 @@
     }
   }
 }
+
+/// Tabs voor login pages
+.login-tab--container {
+  .tab-column__paragraph {
+    color: var(--color-gray-dark-900);
+  }
+}
diff --git a/src/open_inwoner/urls.py b/src/open_inwoner/urls.py
@@ -29,6 +29,7 @@
     ResendTokenView,
     VerifyTokenView,
 )
+from open_inwoner.accounts.views.login import CustomEmailLoginView
 from open_inwoner.openklant.views.contactform import ContactFormView
 from open_inwoner.pdc.views import FAQView
 
@@ -89,6 +90,11 @@
         name="password_reset_confirm",
     ),
     path("accounts/login/", CustomLoginView.as_view(), name="login"),
+    path(
+        "accounts/login-email/",
+        CustomEmailLoginView.as_view(),
+        name="login_email",
+    ),
     path(
         "accounts/login-business/",
         CustomBusinessLoginView.as_view(),
@@ -190,7 +196,6 @@
         path("eherkenning/idp/", include("eherkenning.mock.idp.eherkenning_urls")),
     ] + urlpatterns
 
-
 if settings.DEBUG:
     urlpatterns = [
         # provide default styling template