From 9cef7a4600d96220fb46817bb2efc9f7b7c4a58f Mon Sep 17 00:00:00 2001 From: Giteabot Date: Tue, 13 Jun 2023 08:04:40 -0400 Subject: [PATCH] Use inline SVG for built-in OAuth providers (#25171) (#25234) Backport #25171 by @silverwind The plan is that all built-in auth providers use inline SVG for more flexibility in styling and to get the GitHub icon to follow `currentcolor`. This only removes the `public/img/auth` directory and adds the missing svgs to our svg build. It should map the built-in providers to these SVGs and render them. If the user has set a Icon URL, it should render that as an `img` tag instead. ``` gitea-azure-ad gitea-bitbucket gitea-discord gitea-dropbox gitea-facebook gitea-gitea gitea-gitlab gitea-google gitea-mastodon gitea-microsoftonline gitea-nextcloud gitea-twitter gitea-yandex octicon-mark-github ``` GitHub logo is now white again on dark theme: Screenshot 2023-06-12 at 21 45 34 Co-authored-by: silverwind Co-authored-by: wxiaoguang --- modules/svg/svg.go | 2 +- public/img/auth/azureadv2.svg | 1 - public/img/auth/gitea.svg | 1 - public/img/auth/github.svg | 1 - public/img/auth/gitlab.svg | 1 - public/img/svg/gitea-azuread.svg | 1 + public/img/svg/gitea-azureadv2.svg | 1 + public/img/svg/gitea-bitbucket.svg | 1 + public/img/svg/gitea-discord.svg | 1 + public/img/svg/gitea-dropbox.svg | 1 + public/img/svg/gitea-facebook.svg | 1 + public/img/svg/gitea-google.svg | 1 + public/img/svg/gitea-mastodon.svg | 1 + public/img/svg/gitea-microsoftonline.svg | 1 + public/img/svg/gitea-nextcloud.svg | 1 + public/img/svg/gitea-twitter.svg | 1 + public/img/svg/gitea-yandex.svg | 1 + services/auth/source/oauth2/providers.go | 16 +++++++---- services/auth/source/oauth2/providers_base.go | 28 +++++++++++++------ .../auth/source/oauth2/providers_openid.go | 9 ++++-- templates/user/auth/signin_inner.tmpl | 10 +++---- .../user/settings/security/accountlinks.tmpl | 2 +- .../svg/gitea-azuread.svg | 0 web_src/svg/gitea-azureadv2.svg | 1 + .../svg/gitea-bitbucket.svg | 0 .../svg/gitea-discord.svg | 0 .../svg/gitea-dropbox.svg | 0 .../svg/gitea-facebook.svg | 0 .../svg/gitea-google.svg | 0 .../svg/gitea-mastodon.svg | 0 .../svg/gitea-microsoftonline.svg | 0 .../svg/gitea-nextcloud.svg | 0 .../svg/gitea-twitter.svg | 0 .../svg/gitea-yandex.svg | 0 34 files changed, 57 insertions(+), 27 deletions(-) delete mode 100644 public/img/auth/azureadv2.svg delete mode 100644 public/img/auth/gitea.svg delete mode 100644 public/img/auth/github.svg delete mode 100644 public/img/auth/gitlab.svg create mode 100644 public/img/svg/gitea-azuread.svg create mode 100644 public/img/svg/gitea-azureadv2.svg create mode 100644 public/img/svg/gitea-bitbucket.svg create mode 100644 public/img/svg/gitea-discord.svg create mode 100644 public/img/svg/gitea-dropbox.svg create mode 100644 public/img/svg/gitea-facebook.svg create mode 100644 public/img/svg/gitea-google.svg create mode 100644 public/img/svg/gitea-mastodon.svg create mode 100644 public/img/svg/gitea-microsoftonline.svg create mode 100644 public/img/svg/gitea-nextcloud.svg create mode 100644 public/img/svg/gitea-twitter.svg create mode 100644 public/img/svg/gitea-yandex.svg rename public/img/auth/azuread.svg => web_src/svg/gitea-azuread.svg (100%) create mode 100644 web_src/svg/gitea-azureadv2.svg rename public/img/auth/bitbucket.svg => web_src/svg/gitea-bitbucket.svg (100%) rename public/img/auth/discord.svg => web_src/svg/gitea-discord.svg (100%) rename public/img/auth/dropbox.svg => web_src/svg/gitea-dropbox.svg (100%) rename public/img/auth/facebook.svg => web_src/svg/gitea-facebook.svg (100%) rename public/img/auth/google.svg => web_src/svg/gitea-google.svg (100%) rename public/img/auth/mastodon.svg => web_src/svg/gitea-mastodon.svg (100%) rename public/img/auth/microsoftonline.svg => web_src/svg/gitea-microsoftonline.svg (100%) rename public/img/auth/nextcloud.svg => web_src/svg/gitea-nextcloud.svg (100%) rename public/img/auth/twitter.svg => web_src/svg/gitea-twitter.svg (100%) rename public/img/auth/yandex.svg => web_src/svg/gitea-yandex.svg (100%) diff --git a/modules/svg/svg.go b/modules/svg/svg.go index 071340764e04..6db5c7109b2f 100644 --- a/modules/svg/svg.go +++ b/modules/svg/svg.go @@ -62,5 +62,5 @@ func RenderHTML(icon string, others ...interface{}) template.HTML { } return template.HTML(svgStr) } - return template.HTML("") + return "" } diff --git a/public/img/auth/azureadv2.svg b/public/img/auth/azureadv2.svg deleted file mode 100644 index 7dbd8ea62567..000000000000 --- a/public/img/auth/azureadv2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/auth/gitea.svg b/public/img/auth/gitea.svg deleted file mode 100644 index f9015a31bdd8..000000000000 --- a/public/img/auth/gitea.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/auth/github.svg b/public/img/auth/github.svg deleted file mode 100644 index 0e5bf3b4d67d..000000000000 --- a/public/img/auth/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/auth/gitlab.svg b/public/img/auth/gitlab.svg deleted file mode 100644 index 742370ac9ac7..000000000000 --- a/public/img/auth/gitlab.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/img/svg/gitea-azuread.svg b/public/img/svg/gitea-azuread.svg new file mode 100644 index 000000000000..36845b7ee366 --- /dev/null +++ b/public/img/svg/gitea-azuread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-azureadv2.svg b/public/img/svg/gitea-azureadv2.svg new file mode 100644 index 000000000000..a5fa73a76cf7 --- /dev/null +++ b/public/img/svg/gitea-azureadv2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-bitbucket.svg b/public/img/svg/gitea-bitbucket.svg new file mode 100644 index 000000000000..7794df3d29ba --- /dev/null +++ b/public/img/svg/gitea-bitbucket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-discord.svg b/public/img/svg/gitea-discord.svg new file mode 100644 index 000000000000..5397e30ca5fb --- /dev/null +++ b/public/img/svg/gitea-discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-dropbox.svg b/public/img/svg/gitea-dropbox.svg new file mode 100644 index 000000000000..bbcbdb634131 --- /dev/null +++ b/public/img/svg/gitea-dropbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-facebook.svg b/public/img/svg/gitea-facebook.svg new file mode 100644 index 000000000000..497c5652995b --- /dev/null +++ b/public/img/svg/gitea-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-google.svg b/public/img/svg/gitea-google.svg new file mode 100644 index 000000000000..95fa7a376119 --- /dev/null +++ b/public/img/svg/gitea-google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-mastodon.svg b/public/img/svg/gitea-mastodon.svg new file mode 100644 index 000000000000..3511f097c9fa --- /dev/null +++ b/public/img/svg/gitea-mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-microsoftonline.svg b/public/img/svg/gitea-microsoftonline.svg new file mode 100644 index 000000000000..84bea0305dab --- /dev/null +++ b/public/img/svg/gitea-microsoftonline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-nextcloud.svg b/public/img/svg/gitea-nextcloud.svg new file mode 100644 index 000000000000..c28b620ccd76 --- /dev/null +++ b/public/img/svg/gitea-nextcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-twitter.svg b/public/img/svg/gitea-twitter.svg new file mode 100644 index 000000000000..16598dd43be6 --- /dev/null +++ b/public/img/svg/gitea-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/svg/gitea-yandex.svg b/public/img/svg/gitea-yandex.svg new file mode 100644 index 000000000000..54ded7eb8725 --- /dev/null +++ b/public/img/svg/gitea-yandex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/auth/source/oauth2/providers.go b/services/auth/source/oauth2/providers.go index 0aa83ba49439..16620fad6dc3 100644 --- a/services/auth/source/oauth2/providers.go +++ b/services/auth/source/oauth2/providers.go @@ -5,6 +5,9 @@ package oauth2 import ( "errors" + "fmt" + "html" + "html/template" "net/url" "sort" @@ -19,7 +22,7 @@ import ( type Provider interface { Name() string DisplayName() string - IconURL() string + IconHTML() template.HTML CustomURLSettings() *CustomURLSettings } @@ -35,7 +38,7 @@ type GothProvider interface { } // AuthSourceProvider provides a provider for an AuthSource. Multiple auth sources could use the same registered GothProvider -// So each auth source should have its own DisplayName and IconURL for display. +// So each auth source should have its own DisplayName and IconHTML for display. // The Name is the GothProvider's name, to help to find the GothProvider to sign in. // The DisplayName is the auth source config's name, site admin set it on the admin page, the IconURL can also be set there. type AuthSourceProvider struct { @@ -51,11 +54,14 @@ func (p *AuthSourceProvider) DisplayName() string { return p.sourceName } -func (p *AuthSourceProvider) IconURL() string { +func (p *AuthSourceProvider) IconHTML() template.HTML { if p.iconURL != "" { - return p.iconURL + img := fmt.Sprintf(`%s`, + html.EscapeString(p.iconURL), html.EscapeString(p.DisplayName()), + ) + return template.HTML(img) } - return p.GothProvider.IconURL() + return p.GothProvider.IconHTML() } // Providers contains the map of registered OAuth2 providers in Gitea (based on goth) diff --git a/services/auth/source/oauth2/providers_base.go b/services/auth/source/oauth2/providers_base.go index c8e41430ab24..5ba06febaf70 100644 --- a/services/auth/source/oauth2/providers_base.go +++ b/services/auth/source/oauth2/providers_base.go @@ -3,7 +3,12 @@ package oauth2 -import "code.gitea.io/gitea/modules/setting" +import ( + "html/template" + + "code.gitea.io/gitea/modules/log" + "code.gitea.io/gitea/modules/svg" +) // BaseProvider represents a common base for Provider type BaseProvider struct { @@ -21,14 +26,21 @@ func (b *BaseProvider) DisplayName() string { return b.displayName } -// IconURL returns an icon path for this provider -// Use svg for default icons, providers_openid has its own IconURL function -func (b *BaseProvider) IconURL() string { - name := b.name - if b.name == "gplus" { - name = "google" +// IconHTML returns icon HTML for this provider +func (b *BaseProvider) IconHTML() template.HTML { + svgName := "gitea-" + b.name + switch b.name { + case "gplus": + svgName = "gitea-google" + case "github": + svgName = "octicon-mark-github" } - return setting.AppSubURL + "/assets/img/auth/" + name + ".svg" + svgHTML := svg.RenderHTML(svgName, 20, "gt-mr-3") + if svgHTML == "" { + log.Error("No SVG icon for oauth2 provider %q", b.name) + svgHTML = svg.RenderHTML("gitea-openid", 20, "gt-mr-3") + } + return svgHTML } // CustomURLSettings returns the custom url settings for this provider diff --git a/services/auth/source/oauth2/providers_openid.go b/services/auth/source/oauth2/providers_openid.go index c394058d6f31..54530ae8a85b 100644 --- a/services/auth/source/oauth2/providers_openid.go +++ b/services/auth/source/oauth2/providers_openid.go @@ -4,8 +4,11 @@ package oauth2 import ( + "html/template" + "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/svg" "github.com/markbates/goth" "github.com/markbates/goth/providers/openidConnect" @@ -24,9 +27,9 @@ func (o *OpenIDProvider) DisplayName() string { return "OpenID Connect" } -// IconURL returns an icon path for this provider -func (o *OpenIDProvider) IconURL() string { - return setting.AppSubURL + "/assets/img/svg/gitea-openid.svg" +// IconHTML returns icon HTML for this provider +func (o *OpenIDProvider) IconHTML() template.HTML { + return svg.RenderHTML("gitea-openid", 20, "gt-mr-3") } // CreateGothProvider creates a GothProvider from this Provider diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index 22cb620bfee3..504457f394f8 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -53,16 +53,16 @@ {{end}} {{if and .OrderedOAuth2Names .OAuth2Providers}} -
+
+ {{.locale.Tr "sign_in_or"}} +
+
-
- {{.locale.Tr "sign_in_or"}} -
{{range $key := .OrderedOAuth2Names}} {{$provider := index $.OAuth2Providers $key}} {{end}} diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl index e7a685bb9fbd..bcf432f69033 100644 --- a/templates/user/settings/security/accountlinks.tmpl +++ b/templates/user/settings/security/accountlinks.tmpl @@ -8,7 +8,7 @@ {{range $key := .OrderedOAuth2Names}} {{$provider := index $.OAuth2Providers $key}} - {{$provider.DisplayName}} + {{$provider.IconHTML}} {{$provider.DisplayName}} {{end}} diff --git a/public/img/auth/azuread.svg b/web_src/svg/gitea-azuread.svg similarity index 100% rename from public/img/auth/azuread.svg rename to web_src/svg/gitea-azuread.svg diff --git a/web_src/svg/gitea-azureadv2.svg b/web_src/svg/gitea-azureadv2.svg new file mode 100644 index 000000000000..6b69abcba4ad --- /dev/null +++ b/web_src/svg/gitea-azureadv2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/bitbucket.svg b/web_src/svg/gitea-bitbucket.svg similarity index 100% rename from public/img/auth/bitbucket.svg rename to web_src/svg/gitea-bitbucket.svg diff --git a/public/img/auth/discord.svg b/web_src/svg/gitea-discord.svg similarity index 100% rename from public/img/auth/discord.svg rename to web_src/svg/gitea-discord.svg diff --git a/public/img/auth/dropbox.svg b/web_src/svg/gitea-dropbox.svg similarity index 100% rename from public/img/auth/dropbox.svg rename to web_src/svg/gitea-dropbox.svg diff --git a/public/img/auth/facebook.svg b/web_src/svg/gitea-facebook.svg similarity index 100% rename from public/img/auth/facebook.svg rename to web_src/svg/gitea-facebook.svg diff --git a/public/img/auth/google.svg b/web_src/svg/gitea-google.svg similarity index 100% rename from public/img/auth/google.svg rename to web_src/svg/gitea-google.svg diff --git a/public/img/auth/mastodon.svg b/web_src/svg/gitea-mastodon.svg similarity index 100% rename from public/img/auth/mastodon.svg rename to web_src/svg/gitea-mastodon.svg diff --git a/public/img/auth/microsoftonline.svg b/web_src/svg/gitea-microsoftonline.svg similarity index 100% rename from public/img/auth/microsoftonline.svg rename to web_src/svg/gitea-microsoftonline.svg diff --git a/public/img/auth/nextcloud.svg b/web_src/svg/gitea-nextcloud.svg similarity index 100% rename from public/img/auth/nextcloud.svg rename to web_src/svg/gitea-nextcloud.svg diff --git a/public/img/auth/twitter.svg b/web_src/svg/gitea-twitter.svg similarity index 100% rename from public/img/auth/twitter.svg rename to web_src/svg/gitea-twitter.svg diff --git a/public/img/auth/yandex.svg b/web_src/svg/gitea-yandex.svg similarity index 100% rename from public/img/auth/yandex.svg rename to web_src/svg/gitea-yandex.svg