feat: previous selections delete

templates/includes/searchbox.twig

@@ -33,17 +33,25 @@
                                     <div class="box-vcards-list__content u-pb-0 u-pt-0 u-pr-0 u-pl-10">
                                         {% if attribute(idp.name, currentLanguage) is defined %}{{ attribute(idp.name, currentLanguage) }}{% elseif idp.name is iterable and idp.name is not empty %}idp.name|first{% else %}{{ '{campusmultiauth:undefined}'|trans }}{% endif %}
                                     </div>
+                                    <div class="remove-option">
+                                        <span class="icon icon-times"></span>
+                                    </div>
                                 </div>
                             </button>
                         </div>
                     {% else %}
-                        <button class="list-group-item list-group-item-action d-flex align-items-center" type="submit">
-                            <span class="mb-0">
-                                <img src="{{ idp.img }}" class="img-searchbox" alt=""/>
-                            </span>
-                            <span class="margin-left-24">
-                                {% if attribute(idp.name, currentLanguage) is defined %}{{ attribute(idp.name, currentLanguage) }}{% elseif idp.name is iterable and idp.name is not empty %}idp.name|first{% else %}{{ '{campusmultiauth:undefined}'|trans }}{% endif %}
-                            </span>
+                        <button class="list-group-item list-group-item-action d-flex align-items-center" type="submit" name="searchbox" value="{{ idp.entityid }}">
+                            <div class="full-width">
+                                <span class="mb-0">
+                                    <img src="{{ idp.img }}" class="img-searchbox" alt=""/>
+                                </span>
+                                <span class="margin-left-24">
+                                    {% if attribute(idp.name, currentLanguage) is defined %}{{ attribute(idp.name, currentLanguage) }}{% elseif idp.name is iterable and idp.name is not empty %}idp.name|first{% else %}{{ '{campusmultiauth:undefined}'|trans }}{% endif %}
+                                </span>
+                                <div class="remove-option">
+                                    <i class="fas fa-times"></i>
+                                </div>
+                            </div>
                         </button>
                     {% endif %}
                     {% set counter = counter + 1 %}

www/removeCookie.php

+<?php
+
+use SimpleSAML\Module\campusmultiauth\Auth\Source\Campusidp;
+use SimpleSAML\Logger;
+
+$prevIdps = Campusidp::getCookie(Campusidp::COOKIE_PREVIOUS_IDPS) === null ?
+    [] :
+    json_decode(gzinflate(base64_decode(Campusidp::getCookie(Campusidp::COOKIE_PREVIOUS_IDPS))), true);
+
+$entityid = $_POST['entityid'];
+
+foreach ($prevIdps as $index => $idp) {
+    if ($idp['entityid'] === $entityid) {
+        unset($prevIdps[$index]);
+    }
+}
+
+Campusidp::setCookie(Campusidp::COOKIE_PREVIOUS_IDPS, base64_encode(gzdeflate(json_encode($prevIdps))));

www/resources/campus-idp.css

@@ -89,6 +89,11 @@ html, body {
     margin: 24px;
 }
 
+.remove-option {
+    float: right;
+    margin-right: 10px;
+}
+
 .header-img {
     width: 170px;
     margin: 0 auto 0 36px;

www/resources/campus-idp.js

@@ -117,6 +117,24 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
+    document.querySelectorAll('.remove-option').forEach(function (element) {
+        element.addEventListener('click', function (e) {
+            e.stopPropagation();
+
+            let button = this.parentElement.parentElement;
+
+            $.ajax({
+                url: "./removeCookie.php",
+                type: "POST",
+                data: {
+                    entityid: button.value
+                },
+            });
+
+            button.remove();
+        })
+    })
+
     document.querySelectorAll('.idps-form-nojs-div').forEach(hideElement);
     document.querySelectorAll('.idps-form-div').forEach(showElement);