fix: make individual identities repeatable

templates/includes/individual-identities.twig

@@ -6,7 +6,7 @@
     {% set configuration = configuration|merge({'priority': 'secondary'}) %}
 {% endif %}
 
-<form id="external" class="text-left" action="{{ currentUrl }}" method="post" name="g">
+<form id="external-{{ component_index }}" class="external text-left" action="{{ currentUrl }}" method="post" name="g">
 
     <div class="text-bold margin-bottom-12 {% if muni_jvs %}color-{{ configuration.priority }}{% elseif configuration.priority == 'primary' %}text-dark{% else %}text-muted{% endif %}" >
         {% if attribute(configuration.title, currentLanguage) is defined %}{{ attribute(configuration.title, currentLanguage) }}
@@ -17,7 +17,7 @@
     </div>
 
     {% for idp in configuration.identities %}
-        {% if muni_jvs %}<div class="margin-bottom-12 {% if loop.index0 >= configuration.number_shown %}idp-hidden vhide{% endif %}">{% endif %}
+        <div class="{% if muni_jvs %}margin-bottom-12{% endif %}{% if loop.index0 >= configuration.number_shown %} idp-hidden d-none vhide{% endif %}">
             <button class="btn-individual-identity btn {% if muni_jvs %}btn-primary btn-border color-{{ configuration.priority }} hover-none-{{ configuration.priority }}{% else %}btn-{{ configuration.priority }} btn-lg{% endif %}" type="submit" name="idpentityid" value="{{ idp.upstream_idp }}">
                 {% if muni_jvs %}<span class="no-uppercase color-{{ configuration.priority }} individual-identity-span-wrap">{% endif %}
                     <img class="individual-identity-logo" {% if idp.background_color is defined %}style="background-color: {{ idp.background_color }}"{% endif %} src="{{ idp.logo }}" alt=""/>
@@ -27,16 +27,16 @@
                         {% endif %}</span>
                 {% if muni_jvs %}</span>{% endif %}
             </button>
-        {% if muni_jvs %}</div>{% endif %}
+        </div>
     {% endfor %}
 
-    <input type="hidden" id="authstate" name="authstate" value="{{ authstate }}" />
-    <input type="hidden" id="source" name="source" value="{{ sp_source_name }}" />
+    <input type="hidden" name="authstate" value="{{ authstate }}" />
+    <input type="hidden" name="source" value="{{ sp_source_name }}" />
 </form>
 
 {% if configuration.identities|length > configuration.number_shown %}
     <div class="text-center">
-        <button id="more-options" class="btn {% if muni_jvs %}btn-primary btn-s btn-white hover-none-primary{% else %}btn-outline-{{ configuration.priority }} btn-lg btn-more-options text-center border-0 text-decoration-underline{% endif %}" type="button">
+        <button class="btn more-options {% if muni_jvs %}btn-primary btn-s btn-white hover-none-primary{% else %}btn-outline-{{ configuration.priority }} btn-lg text-center border-0 text-decoration-underline{% endif %}" type="button" data-targetform="external-{{ component_index }}">
             <span class="no-uppercase padding-zero">{{ '{campusmultiauth:more_options}'|trans }}{% if muni_jvs %}<span class="btn-icon icon icon-angle-down"></span>{% else %} <i class="fas fa-arrow-down"></i>{% endif %}</span>
         </button>
     </div>

templates/selectsource.twig

@@ -36,7 +36,7 @@
                             {% if component_configuration.name == 'local_login' %}
                                 {% include '@campusmultiauth/includes/local-login.twig' with {'configuration': component_configuration} %}
                             {% elseif component_configuration.name == 'individual_identities' %}
-                                {% include '@campusmultiauth/includes/individual-identities.twig' with {'configuration': component_configuration} %}
+                                {% include '@campusmultiauth/includes/individual-identities.twig' with {'configuration': component_configuration, 'component_index': loop.index0} %}
                             {% elseif component_configuration.name == 'searchbox' %}
                                 {% include '@campusmultiauth/includes/searchbox.twig' with {'configuration': component_configuration, 'component_index': loop.index0} %}
                             {% endif %}

www/resources/campus-idp.css

@@ -62,7 +62,12 @@ html, body {
     margin-bottom: 12px;
 }
 
-.btn-more-options {
+.more-options {
+    border-bottom: 1px solid #0000dc;
+    margin-bottom: 24px;
+}
+
+.framework_bootstrap5 .more-options {
     width: 160px;
     margin-top: -24px;
 }
@@ -71,7 +76,7 @@ html, body {
     display: none;
 }
 
-#external {
+.external {
     margin-bottom: 24px;
 }
 
@@ -362,11 +367,6 @@ html, body {
     margin-bottom: 24px;
 }
 
-#more-options {
-    border-bottom: 1px solid #0000dc;
-    margin-bottom: 24px;
-}
-
 body {
     min-height: 100vh;
     display: flex;

www/resources/campus-idp.js

@@ -6,9 +6,9 @@ function showElement(element) {
     element.classList.remove('vhide', 'd-none');
 }
 
-function showMoreOptions() {
-    document.querySelectorAll('.idp-hidden').forEach(showElement);
-    hideElement(document.getElementById('more-options'));
+function showMoreOptions(showButton) {
+    document.getElementById(showButton.dataset.targetform).querySelectorAll('.idp-hidden').forEach(showElement);
+    hideElement(showButton);
 }
 
 function selectizeScore() {
@@ -83,9 +83,11 @@ function selectizeLoad(query, callback) {
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-    var moreOptions = document.getElementById("more-options");
+    var moreOptions = document.querySelectorAll(".more-options");
     if (moreOptions) {
-        moreOptions.addEventListener("click", showMoreOptions);
+        moreOptions.forEach(function(showButton){
+            showButton.addEventListener("click", showMoreOptions.bind(null, showButton));
+        });
     }
 
     var togglePassword = document.getElementById("toggle-password");