scoped link css; added display_name

README.md

@@ -51,6 +51,7 @@ module OpenProject::SomeAuthPlugin
             host: 'foobar.biz',
             port: '692',
             #, ... more provider options
+            display_name: 'Provider 2'
           }
         ]
       end
@@ -65,6 +66,8 @@ end
 
 Register each OmniAuth strategy by calling `strategy` with the strategy's name and returning the options for the providers using that strategy in the passed block.
 
-As you can see in the first registered provider you can also give a new option called 'icon'.
+As you can see in the first registered provider you can also give a new option called `icon`.
 Using this option you can define which icon is to be rendered for the given provider.
 In the example our own plugin provides the icon. In the plugin's directory it has to be placed under `app/assets/images/some_auth_plugin/some_provider.png`.
+
+Another extra attribute shown is `display_name`. While `name` is used to identify the provider in URLs `display_name` is what is shown to the user.

app/views/hooks/login/_providers.html.erb

@@ -27,18 +27,6 @@ See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
-<style type="text/css">
-  <% OpenProject::Plugins::AuthPlugin.providers.each do |pro| %>
-    <% if pro[:icon] %>
-      #content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
-        background-image: url('<%= image_path(pro[:icon]) %>');
-      }
-      #top-menu #nav-login-content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
-        background-image: url('<%= image_path(pro[:icon]) %>');
-      }
-    <% end %>
-  <% end %>
-</style>
 <% OpenProject::Plugins::AuthPlugin.providers.each do |pro| %>
   <%
     opts = {
@@ -50,6 +38,16 @@ See doc/COPYRIGHT.rdoc for more details.
     end
   %>
   <a href="<%= url_for opts %>" class="auth-provider auth-provider-<%= pro[:name] %>">
-    <span class="auth-provider-name"><%= pro[:name] %></span>
+    <style type="text/css" scoped="scoped">
+      <% if pro[:icon] %>
+        #content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
+          background-image: url('<%= image_path(pro[:icon]) %>');
+        }
+        #top-menu #nav-login-content .login-auth-providers a.auth-provider.auth-provider-<%= pro[:name] %> {
+          background-image: url('<%= image_path(pro[:icon]) %>');
+        }
+      <% end %>
+    </style>
+    <span class="auth-provider-name"><%= pro[:display_name] || pro[:name] %></span>
   </a>
 <% end %>