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
This commit is contained in:
David Taylor 2019-03-27 13:25:04 +00:00
parent a9798f0c47
commit 0d3531c2f1
8 changed files with 18 additions and 21 deletions

View File

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

View File

@ -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;
}

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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)

View File

@ -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

View File

@ -158,6 +158,7 @@ module SvgSprite
"share",
"shield-alt",
"shower",
"sign-in-alt",
"sign-out-alt",
"signal",
"step-backward",