FEATURE: Allow auth providers to define specific icons

FEATURE: Allow auth providers to define specific icons

Previously we relied on the provider name matching the name of the icon. Now icon names are explicitly set. Plugin providers which do not define an icon will get the default “sign-in-alt” icon

diff --git a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
index 9bc0004..5f39e06 100644
--- a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
+++ b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
@@ -38,6 +38,7 @@ const REPLACEMENTS = {
 };
 
 // TODO: use lib/svg_sprite/fa4-renames.json here
+// Note: these should not be edited manually. They define the fa4-fa5 migration
 const fa4Replacements = {
   "500px": "fab-500px",
   "address-book-o": "far-address-book",
@@ -167,7 +168,7 @@ const fa4Replacements = {
   "eye-slash": "far-eye-slash",
   eyedropper: "eye-dropper",
   fa: "fab-font-awesome",
-  facebook: "fab-facebook",
+  facebook: "fab-facebook-f",
   "facebook-f": "fab-facebook-f",
   "facebook-official": "fab-facebook",
   "facebook-square": "fab-facebook-square",
diff --git a/app/assets/javascripts/discourse/models/login-method.js.es6 b/app/assets/javascripts/discourse/models/login-method.js.es6
index 7207ad5..29bd3b1 100644
--- a/app/assets/javascripts/discourse/models/login-method.js.es6
+++ b/app/assets/javascripts/discourse/models/login-method.js.es6
@@ -99,9 +99,7 @@ export function findAll(siteSettings, capabilities, isMobileDevice) {
   }
 
   // exclude FA icon for Google, uses custom SVG
-  methods.forEach(m =>
-    m.set("hasRegularIcon", m.get("name") === "google_oauth2" ? false : true)
-  );
+  methods.forEach(m => m.set("isGoogle", m.get("name") === "google_oauth2"));
 
   return methods;
 }
diff --git a/app/assets/javascripts/discourse/templates/components/login-buttons.hbs b/app/assets/javascripts/discourse/templates/components/login-buttons.hbs
index d8efc3b..85ba0d6 100644
--- a/app/assets/javascripts/discourse/templates/components/login-buttons.hbs
+++ b/app/assets/javascripts/discourse/templates/components/login-buttons.hbs
@@ -1,9 +1,11 @@
 {{#each buttons as |b|}}
   <button class="btn btn-social {{b.name}}" {{action externalLogin b}}>
-    {{#if b.hasRegularIcon}}
-      {{d-icon b.name}}
-    {{else}}
+    {{#if b.isGoogle}}
       <svg class="fa d-icon d-icon-custom-google-oauth2 svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
+    {{else if b.icon}}
+      {{d-icon b.icon}}
+    {{else}}
+      {{d-icon "sign-in-alt"}}
     {{/if}}
     {{b.title}}
   </button>
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 5c22ca1..e1c2741 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -191,7 +191,6 @@
     margin-right: 9px;
     font-size: $font-0;
   }
-  &.google,
   &.google_oauth2 {
     background: $google;
     color: #333;
@@ -238,11 +237,6 @@
       background: lighten($github, 20%);
     }
   }
-  &.oauth2_basic {
-    .d-icon {
-      display: none;
-    }
-  }
 }
 
 // Button Sizes
diff --git a/app/serializers/auth_provider_serializer.rb b/app/serializers/auth_provider_serializer.rb
index 35c3de7..f2bc5cd 100644
--- a/app/serializers/auth_provider_serializer.rb
+++ b/app/serializers/auth_provider_serializer.rb
@@ -1,7 +1,8 @@
 class AuthProviderSerializer < ApplicationSerializer
 
   attributes :name, :custom_url, :pretty_name_override, :title_override, :message_override,
-             :frame_width, :frame_height, :full_screen_login, :can_connect, :can_revoke
+             :frame_width, :frame_height, :full_screen_login, :can_connect, :can_revoke,
+             :icon
 
   def title_override
     return SiteSetting.send(object.title_setting) if object.title_setting
diff --git a/lib/auth/auth_provider.rb b/lib/auth/auth_provider.rb
index 8f8d795..d8705cc 100644
--- a/lib/auth/auth_provider.rb
+++ b/lib/auth/auth_provider.rb
@@ -8,7 +8,7 @@ class Auth::AuthProvider
   def self.auth_attributes
     [:pretty_name, :title, :message, :frame_width, :frame_height, :authenticator,
      :pretty_name_setting, :title_setting, :enabled_setting, :full_screen_login, :full_screen_login_setting,
-     :custom_url, :background_color]
+     :custom_url, :background_color, :icon]
   end
 
   attr_accessor(*auth_attributes)
diff --git a/lib/discourse.rb b/lib/discourse.rb
index f6d30ca..96e014d 100644
--- a/lib/discourse.rb
+++ b/lib/discourse.rb
@@ -215,12 +215,12 @@ module Discourse
   end
 
   BUILTIN_AUTH ||= [
-    Auth::AuthProvider.new(authenticator: Auth::FacebookAuthenticator.new, frame_width: 580, frame_height: 400),
-    Auth::AuthProvider.new(authenticator: Auth::GoogleOAuth2Authenticator.new, frame_width: 850, frame_height: 500),
-    Auth::AuthProvider.new(authenticator: Auth::OpenIdAuthenticator.new("yahoo", "https://me.yahoo.com", 'enable_yahoo_logins', trusted: true)),
-    Auth::AuthProvider.new(authenticator: Auth::GithubAuthenticator.new),
-    Auth::AuthProvider.new(authenticator: Auth::TwitterAuthenticator.new),
-    Auth::AuthProvider.new(authenticator: Auth::InstagramAuthenticator.new)
+    Auth::AuthProvider.new(authenticator: Auth::FacebookAuthenticator.new, frame_width: 580, frame_height: 400, icon: "fab-facebook"),
+    Auth::AuthProvider.new(authenticator: Auth::GoogleOAuth2Authenticator.new, frame_width: 850, frame_height: 500), # Custom icon implemented in client
+    Auth::AuthProvider.new(authenticator: Auth::OpenIdAuthenticator.new("yahoo", "https://me.yahoo.com", 'enable_yahoo_logins', trusted: true), icon: "fab-yahoo"),
+    Auth::AuthProvider.new(authenticator: Auth::GithubAuthenticator.new, icon: "fab-github"),
+    Auth::AuthProvider.new(authenticator: Auth::TwitterAuthenticator.new, icon: "fab-twitter"),
+    Auth::AuthProvider.new(authenticator: Auth::InstagramAuthenticator.new, icon: "fab-instagram")
   ]
 
   def self.auth_providers
diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb
index fd2d688..9d9a79a 100644
--- a/lib/svg_sprite/svg_sprite.rb
+++ b/lib/svg_sprite/svg_sprite.rb
@@ -158,6 +158,7 @@ module SvgSprite
     "share",
     "shield-alt",
     "shower",
+    "sign-in-alt",
     "sign-out-alt",
     "signal",
     "step-backward",

GitHub sha: 0d3531c2

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: