#28 collapsible login form

kontron · May 9, 2024 · 1ebe5f7 · 1ebe5f7
1 parent 83cfcd1
commit 1ebe5f7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 9 deletions.
diff --git a/app/views/hooks/_view_account_login_bottom.html.erb b/app/views/hooks/_view_account_login_bottom.html.erb
@@ -22,6 +22,12 @@
 
 <% if Setting.plugin_redmine_oauth[:button_icon] != 'none' %>
   <%= stylesheet_link_tag 'redmine_oauth', plugin: 'redmine_oauth' %>
+  <% if Setting.plugin_redmine_oauth[:hide_login_form] %>
+    <%= javascript_include_tag('redmine_oauth.js', plugin: :redmine_oauth) %>
+    <fieldset id= "oauth-fieldset-login-form" class="oauth_collapsible oauth_collapsed">
+      <legend class="oauth_legend" onclick="oauth_toggle_fieldset(this)"><%= l(:button_login) %></legend>
+    </fieldset>
+  <% end %>
   <%= form_tag(oauth_path(back_url: back_url), method: :get, id: 'oauth-login') do %>
     <%= back_url_hidden_field_tag %>
     <%= button_tag(name: 'login-oauth', tabindex: 6, id: 'login-oauth-submit', title: l(:oauth_login_with),
@@ -53,6 +59,8 @@
   });
   <%# Hidden login form %>
   <% if Setting.plugin_redmine_oauth[:hide_login_form] %>
-    $('div#login-form').hide();
+    let login_form = $('div#login-form');
+    login_form.appendTo('#oauth-fieldset-login-form');
+    login_form.toggle();
   <% end %>
 <% end %>
diff --git a/app/views/settings/_oauth_settings.html.erb b/app/views/settings/_oauth_settings.html.erb
@@ -35,7 +35,7 @@
     ], @settings[:oauth_name]), onchange: 'oauth_settings_visibility()' %>
   <em class="info"><%= l(:oauth_provider_info) %></em>
 </p>
-<div id="oauth_options" class="<%= (@settings[:oauth_name] == 'none') ? 'oauth-hidden' : '' %>">
+<div id="oauth_options" class="<%= (@settings[:oauth_name] == 'none') ? 'oauth_hidden' : '' %>">
     <p>
         <label for="button_color"><%= l(:oauth_login_button) %></label>
         <span>
@@ -95,11 +95,8 @@
       <%= check_box_tag 'settings[hide_login_form]', true, @settings[:hide_login_form] %>
       <em class="info"> <%= l(:label_default)%>: <%= l(:general_text_No)%></em>
     </p>
-    <% if %w(Custom).include?(@settings[:oauth_name]) %>
-      <div id="oauth_options_custom">
-    <% else %>
-      <div id="oauth_options_custom" style="display: none">
-    <% end %>
+    <% style = %w(Custom).exclude?(@settings[:oauth_name]) ? 'display: none' : 'display: block' %>
+    <div id="oauth_options_custom" style="<%= style %>">
       <p>
         <label><%= l(:oauth_custom_name) %></label>
         <input type="text" id="settings_custom_name" name="settings[custom_name]" value="<%= @settings[:custom_name] %>" 

diff --git a/assets/javascripts/redmine_oauth.js b/assets/javascripts/redmine_oauth.js
@@ -115,4 +115,12 @@ function oauth_settings_visibility()
         default:
             break;
     }
-}
+}
+
+function oauth_toggle_fieldset(el)
+{
+    let fieldset = el.parentNode;
+    fieldset.classList.toggle('oauth_expanded');
+    fieldset.classList.toggle('oauth_collapsed');
+    $('div#login-form').toggle();
+}
diff --git a/assets/stylesheets/redmine_oauth.css b/assets/stylesheets/redmine_oauth.css
@@ -29,10 +29,37 @@ input#button_color {
   padding: 0;
 }
 
-.oauth-hidden {
+.oauth_hidden {
   display: none;
 }
 
 button#login-oauth-submit:hover {
   background: #dddddd !important;
 }
+
+fieldset.oauth_collapsible {
+  border-width: 2px 0 0 0;
+  border-color: #FDBF3B;
+  width: 340px;
+  margin: auto;
+}
+
+fieldset.oauth_collapsed>legend::before {
+  content: "\a0\25ba\a0";
+  color: #FDBF3B;
+  position: relative;
+  bottom: 2px;
+}
+
+fieldset.oauth_expanded>legend::before {
+  content: "\a0\25bc\a0";
+  color: #FDBF3B;
+}
+
+fieldset.oauth_collapsible > legend {
+  cursor: pointer;
+}
+
+legend.oauth_legend {
+  font-weight: bolder;
+}