Use Bootstrap collapse to toggle OpenID login form

diff --git a/app/assets/javascripts/auth_providers.js b/app/assets/javascripts/auth_providers.js
index fe0a4fdce4b4f8893b72ed78b35e7046f025e740..d6a7c6393c677254bccc7e18e763219ce841bf57 100644 (file)
--- a/app/assets/javascripts/auth_providers.js
+++ b/app/assets/javascripts/auth_providers.js
@@ -7,13 +7,4 @@ $(document).ready(function () {
     params.referer = $("#referer").val();
     this.search = Qs.stringify(params);
   });
     params.referer = $("#referer").val();
     this.search = Qs.stringify(params);
   });

-
-  // Add click handler to show OpenID field
-  $("#openid_open_url").click(function () {
-    $("#login_auth_buttons").hide();
-    $("#openid_login_form").show();
-  });
-
-  // Hide OpenID field for now
-  $("#openid_login_form").hide();

 });
 });

diff --git a/app/views/application/_auth_providers.html.erb b/app/views/application/_auth_providers.html.erb
index 895a42eb0bdf49fea6a7ff4b2a4bc5a6151bcd34..b7fb5ba4daaf7d52b75bf111100a5868d35327b0 100644 (file)
--- a/app/views/application/_auth_providers.html.erb
+++ b/app/views/application/_auth_providers.html.erb
@@ -2,7 +2,7 @@
 
 <div>
   <%= tag.div :id => "login_auth_buttons",
 
 <div>
   <%= tag.div :id => "login_auth_buttons",

-              :class => ["row row-cols-1", { "row-cols-sm-2" => prefered_auth_button_available }, "g-2 mb-3"] do %>
+              :class => ["collapse show row row-cols-1", { "row-cols-sm-2" => prefered_auth_button_available }, "g-2 mb-3"] do %>

 
     <% if prefered_auth_button_available %>
       <div class="col justify-content-center d-flex align-items-center flex-wrap">
 
     <% if prefered_auth_button_available %>
       <div class="col justify-content-center d-flex align-items-center flex-wrap">


@@ -17,7 +17,8 @@
                                    :alt => t(".openid.alt"),
                                    :size => "36"),
                          :type => "button",
                                    :alt => t(".openid.alt"),
                                    :size => "36"),
                          :type => "button",

-                         :id => "openid_open_url",
+                         :data => { "bs-toggle" => "collapse",
+                                    "bs-target" => "#login_auth_buttons, #openid_login_form" },

                          :title => t(".openid.title"),
                          :class => "btn btn-light p-2" %>
         <% elsif provider != @preferred_auth_provider %>
                          :title => t(".openid.title"),
                          :class => "btn btn-light p-2" %>
         <% elsif provider != @preferred_auth_provider %>


@@ -28,7 +29,7 @@
   <% end %>
 
   <%# :tabindex starts high to allow rendering at the bottom of the template %>
   <% end %>
 
   <%# :tabindex starts high to allow rendering at the bottom of the template %>

-  <%= form_tag(auth_path(:provider => "openid"), :id => "openid_login_form") do %>
+  <%= form_tag auth_path(:provider => "openid"), :id => "openid_login_form", :class => "collapse" do %>

     <div class="mb-3">
       <label for="openid_url" class="form-label">
         <%= image_tag "openid.svg", :size => "36", :alt => "", :class => "align-text-bottom" %>
     <div class="mb-3">
       <label for="openid_url" class="form-label">
         <%= image_tag "openid.svg", :size => "36", :alt => "", :class => "align-text-bottom" %>