🚧 [#2036] Experimental commit

maykinmedia · Apr 11, 2024 · 04dc704 · 04dc704
1 parent d533c65
commit 04dc704
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 50 deletions.
diff --git a/src/open_inwoner/accounts/templates/registration/login.html b/src/open_inwoner/accounts/templates/registration/login.html
@@ -54,29 +54,6 @@ <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
                         {# 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 %}
-                                        <a href="{% url 'eherkenning_oidc:init' %}" class="link eherkenning-logo">
-                                            <img class="eherkenning-logo__image" src="{% static 'accounts/eherkenning.png' %}" width=55 alt="eHerkenning inlogpagina">
-                                        </a>
-                                        {% 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 %}
-                                        <a href="{% url 'eherkenning:login' %}" class="link eherkenning-logo">
-                                            <img class="eherkenning-logo__image" src="{% static 'accounts/eherkenning.png' %}" width=55 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='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 %}
@@ -100,13 +77,30 @@ <h1 class="utrecht-heading-1">{% trans 'Welkom' %}</h1>
                             {% if login_allow_registration %}
                                 {% render_column start=4 span=5 %}
                                     {% render_card direction='horizontal' tinted=True compact=True %}
-                                        <a href="/accounts/login-email" class="link icon--large">
+                                        <a href="/accounts/login#particuliermail" class="link icon--large">
                                             {% icon icon="login" icon_position="before" outlined=True %}
                                         </a>
-                                        {% link href="/accounts/login-email" text=_('Log in met e-mail adres') primary=True icon='east' extra_classes="link--next link--email" %}
+                                        {% link href="/accounts/login#particuliermail" text=_('Log in met e-mail adres') primary=True icon='east' extra_classes="link--next link--email" %}
                                     {% endrender_card %}
                                 {% endrender_column %}
 
+                                {# Hide mail login initially #}
+                                    {% 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 %}
+                                {# End hidden #}
+
                                 {% render_column start=4 span=5 %}
                                     <h2 class="tab__heading-4">Of registreer</h2>
                                     {% render_card direction='horizontal' tinted=True compact=True %}
@@ -159,29 +153,6 @@ <h2 class="tab__heading-4">Of registreer</h2>
                 </div>
                 {# Panel 2 End #}
 
-                {# Panel 3 #}
-                <div class="tabs__body">
-                    <div id="particulier-mail" 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>
-                </div>
-                {# Panel 3 End #}
-
             </div>
         </div>
     </div>

diff --git a/src/open_inwoner/js/components/form/LoginForm.js b/src/open_inwoner/js/components/form/LoginForm.js
@@ -0,0 +1,13 @@
+// bindEvents() {
+//     this.node.addEventListener('click', (e) => {
+//       /**
+//        * Remove focus from search in order to prevent native keyboard on mobile
+//        */
+//       const blurFormInput = document.querySelectorAll(
+//         '#login-form .input'
+//       )
+//       blurFormInput.forEach((elem) => {
+//         elem.blur()
+//       })
+//     })
+//   }
diff --git a/src/open_inwoner/js/components/form/index.js b/src/open_inwoner/js/components/form/index.js
@@ -1,3 +1,4 @@
 import './FileInput'
 import './ChoiceListSingle'
 import './DisableContactFormButton'
+import './LoginForm'
diff --git a/src/open_inwoner/js/components/tab-panels/index.js b/src/open_inwoner/js/components/tab-panels/index.js
@@ -1,5 +1,5 @@
 export class TabPanel {
-  static selector = '.tab--container'
+  static selector = '.login-tab--container'
 
   constructor(node) {
     this.node = node
@@ -30,6 +30,9 @@ export class TabPanel {
       item.classList.add('hide')
       item.classList.remove('active')
     })
+    this.tabHeaders.forEach((item) => {
+      item.classList.remove('active')
+    })
   }
 
   showContent(i = 0) {

diff --git a/src/open_inwoner/scss/components/LoginForm/LoginForm.scss 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/TabPanel/TabPanel.scss b/src/open_inwoner/scss/components/TabPanel/TabPanel.scss
@@ -103,7 +103,8 @@
   }
 
   .hide {
-    display: none;
+    //display: none;
+    opacity: 0.1;
   }
 
   .tabs__body {

diff --git 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';