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
discourse · Mar 27, 2019 · 0d3531c · 0d3531c · discoursebot · Mar 27, 2019
1 parent a9798f0
commit 0d3531c
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -8,7 +8,7 @@ def initialize(params = {})
   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
@@ -215,12 +215,12 @@ def self.assets_digest
   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
@@ -158,6 +158,7 @@ module SvgSprite
     "share",
     "shield-alt",
     "shower",
+    "sign-in-alt",
     "sign-out-alt",
     "signal",
     "step-backward",