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

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",

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 =>
+  methods.forEach(m => m.set("isGoogle", m.get("name") === "google_oauth2"));
-    m.set("hasRegularIcon", m.get("name") === "google_oauth2" ? false : true)
-  );
 
   return methods;
 }

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}}
+    {{#if b.isGoogle}}
-      {{d-icon b.name}}
-    {{else}}
       <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>

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

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

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)

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::FacebookAuthenticator.new, frame_width: 580, frame_height: 400, icon: "fab-facebook"),
-    Auth::AuthProvider.new(authenticator: Auth::GoogleOAuth2Authenticator.new, frame_width: 850, frame_height: 500),
+    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)),
+    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),
+    Auth::AuthProvider.new(authenticator: Auth::GithubAuthenticator.new, icon: "fab-github"),
-    Auth::AuthProvider.new(authenticator: Auth::TwitterAuthenticator.new),
+    Auth::AuthProvider.new(authenticator: Auth::TwitterAuthenticator.new, icon: "fab-twitter"),
-    Auth::AuthProvider.new(authenticator: Auth::InstagramAuthenticator.new)
+    Auth::AuthProvider.new(authenticator: Auth::InstagramAuthenticator.new, icon: "fab-instagram")
   ]
 
   def self.auth_providers

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",