diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 195252c47d..9528708623 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -4,7 +4,8 @@ explore = Explore help = Help logo = Logo sign_in = Sign In -sign_in_with = Sign In With +sign_in_with_provider = Sign in with %s +sign_in_or = or sign_out = Sign Out sign_up = Register link_account = Link Account diff --git a/public/img/auth/azuread.png b/public/img/auth/azuread.png deleted file mode 100644 index 1adbf15e28..0000000000 Binary files a/public/img/auth/azuread.png and /dev/null differ diff --git a/public/img/auth/azuread.svg b/public/img/auth/azuread.svg new file mode 100644 index 0000000000..6b69abcba4 --- /dev/null +++ b/public/img/auth/azuread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/azureadv2.png b/public/img/auth/azureadv2.png deleted file mode 100644 index 1adbf15e28..0000000000 Binary files a/public/img/auth/azureadv2.png and /dev/null differ diff --git a/public/img/auth/azureadv2.svg b/public/img/auth/azureadv2.svg new file mode 100644 index 0000000000..7dbd8ea625 --- /dev/null +++ b/public/img/auth/azureadv2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/bitbucket.png b/public/img/auth/bitbucket.png deleted file mode 100644 index b3d022a5a7..0000000000 Binary files a/public/img/auth/bitbucket.png and /dev/null differ diff --git a/public/img/auth/bitbucket.svg b/public/img/auth/bitbucket.svg new file mode 100644 index 0000000000..d3b15a9dc6 --- /dev/null +++ b/public/img/auth/bitbucket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/discord.png b/public/img/auth/discord.png deleted file mode 100644 index db0e70d5d4..0000000000 Binary files a/public/img/auth/discord.png and /dev/null differ diff --git a/public/img/auth/discord.svg b/public/img/auth/discord.svg new file mode 100644 index 0000000000..ea64a39f6e --- /dev/null +++ b/public/img/auth/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/dropbox.png b/public/img/auth/dropbox.png deleted file mode 100644 index c2f4c90974..0000000000 Binary files a/public/img/auth/dropbox.png and /dev/null differ diff --git a/public/img/auth/dropbox.svg b/public/img/auth/dropbox.svg new file mode 100644 index 0000000000..e75e7cc8cf --- /dev/null +++ b/public/img/auth/dropbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/facebook.png b/public/img/auth/facebook.png deleted file mode 100644 index 80aa5183ac..0000000000 Binary files a/public/img/auth/facebook.png and /dev/null differ diff --git a/public/img/auth/facebook.svg b/public/img/auth/facebook.svg new file mode 100644 index 0000000000..8163e2a966 --- /dev/null +++ b/public/img/auth/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/gitea.png b/public/img/auth/gitea.png deleted file mode 100644 index 30d3313594..0000000000 Binary files a/public/img/auth/gitea.png and /dev/null differ diff --git a/public/img/auth/gitea.svg b/public/img/auth/gitea.svg new file mode 100644 index 0000000000..f9015a31bd --- /dev/null +++ b/public/img/auth/gitea.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/github.png b/public/img/auth/github.png deleted file mode 100644 index 1fa19c55d2..0000000000 Binary files a/public/img/auth/github.png and /dev/null differ diff --git a/public/img/auth/github.svg b/public/img/auth/github.svg new file mode 100644 index 0000000000..0e5bf3b4d6 --- /dev/null +++ b/public/img/auth/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/gitlab.png b/public/img/auth/gitlab.png deleted file mode 100644 index ca30b45901..0000000000 Binary files a/public/img/auth/gitlab.png and /dev/null differ diff --git a/public/img/auth/gitlab.svg b/public/img/auth/gitlab.svg new file mode 100644 index 0000000000..742370ac9a --- /dev/null +++ b/public/img/auth/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/google.png b/public/img/auth/google.png deleted file mode 100644 index e2cfb67435..0000000000 Binary files a/public/img/auth/google.png and /dev/null differ diff --git a/public/img/auth/google.svg b/public/img/auth/google.svg new file mode 100644 index 0000000000..dbb741897c --- /dev/null +++ b/public/img/auth/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/mastodon.png b/public/img/auth/mastodon.png deleted file mode 100644 index 67254aad4c..0000000000 Binary files a/public/img/auth/mastodon.png and /dev/null differ diff --git a/public/img/auth/mastodon.svg b/public/img/auth/mastodon.svg new file mode 100644 index 0000000000..f21f1e1375 --- /dev/null +++ b/public/img/auth/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/microsoftonline.png b/public/img/auth/microsoftonline.png deleted file mode 100644 index a8129dce29..0000000000 Binary files a/public/img/auth/microsoftonline.png and /dev/null differ diff --git a/public/img/auth/microsoftonline.svg b/public/img/auth/microsoftonline.svg new file mode 100644 index 0000000000..72ef94eabb --- /dev/null +++ b/public/img/auth/microsoftonline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/nextcloud.png b/public/img/auth/nextcloud.png deleted file mode 100644 index 635806813a..0000000000 Binary files a/public/img/auth/nextcloud.png and /dev/null differ diff --git a/public/img/auth/nextcloud.svg b/public/img/auth/nextcloud.svg new file mode 100644 index 0000000000..900dfa630a --- /dev/null +++ b/public/img/auth/nextcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/openid_connect.svg b/public/img/auth/openid_connect.svg deleted file mode 100644 index b4df684ed9..0000000000 --- a/public/img/auth/openid_connect.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/img/auth/twitter.png b/public/img/auth/twitter.png deleted file mode 100644 index 9d3d89a4af..0000000000 Binary files a/public/img/auth/twitter.png and /dev/null differ diff --git a/public/img/auth/twitter.svg b/public/img/auth/twitter.svg new file mode 100644 index 0000000000..096b9add2b --- /dev/null +++ b/public/img/auth/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/auth/yandex.png b/public/img/auth/yandex.png deleted file mode 100644 index 3414ad4249..0000000000 Binary files a/public/img/auth/yandex.png and /dev/null differ diff --git a/public/img/auth/yandex.svg b/public/img/auth/yandex.svg new file mode 100644 index 0000000000..a128e8ad40 --- /dev/null +++ b/public/img/auth/yandex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/services/auth/signin.go b/services/auth/signin.go index 2af15c4133..1095b27fe2 100644 --- a/services/auth/signin.go +++ b/services/auth/signin.go @@ -61,7 +61,7 @@ func UserSignIn(username, password string) (*user_model.User, *auth.Source, erro } if !source.IsActive { - return nil, nil, oauth2.ErrAuthSourceNotActived + return nil, nil, oauth2.ErrAuthSourceNotActivated } authenticator, ok := source.Cfg.(PasswordAuthenticator) diff --git a/services/auth/source/oauth2/providers.go b/services/auth/source/oauth2/providers.go index 7ba370855a..0aa83ba494 100644 --- a/services/auth/source/oauth2/providers.go +++ b/services/auth/source/oauth2/providers.go @@ -19,7 +19,7 @@ import ( type Provider interface { Name() string DisplayName() string - Image() string + IconURL() string CustomURLSettings() *CustomURLSettings } @@ -34,23 +34,28 @@ type GothProvider interface { GothProviderCreator } -// ImagedProvider provide an overridden image setting for the provider -type ImagedProvider struct { +// 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. +// 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 { GothProvider - image string + sourceName, iconURL string } -// Image returns the image path for this provider -func (i *ImagedProvider) Image() string { - return i.image +func (p *AuthSourceProvider) Name() string { + return p.GothProvider.Name() } -// NewImagedProvider is a constructor function for the ImagedProvider -func NewImagedProvider(image string, provider GothProvider) *ImagedProvider { - return &ImagedProvider{ - GothProvider: provider, - image: image, +func (p *AuthSourceProvider) DisplayName() string { + return p.sourceName +} + +func (p *AuthSourceProvider) IconURL() string { + if p.iconURL != "" { + return p.iconURL } + return p.GothProvider.IconURL() } // Providers contains the map of registered OAuth2 providers in Gitea (based on goth) @@ -95,11 +100,13 @@ func GetActiveOAuth2Providers() ([]string, map[string]Provider, error) { var orderedKeys []string providers := make(map[string]Provider) for _, source := range authSources { - prov := gothProviders[source.Cfg.(*Source).Provider] - if source.Cfg.(*Source).IconURL != "" { - prov = &ImagedProvider{prov, source.Cfg.(*Source).IconURL} + oauth2Cfg, ok := source.Cfg.(*Source) + if !ok { + log.Error("Invalid OAuth2 source config: %v", oauth2Cfg) + continue } - providers[source.Name] = prov + gothProv := gothProviders[oauth2Cfg.Provider] + providers[source.Name] = &AuthSourceProvider{GothProvider: gothProv, sourceName: source.Name, iconURL: oauth2Cfg.IconURL} orderedKeys = append(orderedKeys, source.Name) } @@ -138,8 +145,7 @@ func ClearProviders() { goth.ClearProviders() } -// ErrAuthSourceNotActived login source is not actived error -var ErrAuthSourceNotActived = errors.New("auth source is not actived") +var ErrAuthSourceNotActivated = errors.New("auth source is not activated") // used to create different types of goth providers func createProvider(providerName string, source *Source) (goth.Provider, error) { @@ -150,7 +156,7 @@ func createProvider(providerName string, source *Source) (goth.Provider, error) p, ok := gothProviders[source.Provider] if !ok { - return nil, ErrAuthSourceNotActived + return nil, ErrAuthSourceNotActivated } provider, err = p.CreateGothProvider(providerName, callbackURL, source) diff --git a/services/auth/source/oauth2/providers_base.go b/services/auth/source/oauth2/providers_base.go index 61654d8eaa..c8e41430ab 100644 --- a/services/auth/source/oauth2/providers_base.go +++ b/services/auth/source/oauth2/providers_base.go @@ -3,6 +3,8 @@ package oauth2 +import "code.gitea.io/gitea/modules/setting" + // BaseProvider represents a common base for Provider type BaseProvider struct { name string @@ -19,9 +21,14 @@ func (b *BaseProvider) DisplayName() string { return b.displayName } -// Image returns an image path for this provider -func (b *BaseProvider) Image() string { - return "/assets/img/auth/" + b.name + ".png" +// 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" + } + return setting.AppSubURL + "/assets/img/auth/" + name + ".svg" } // CustomURLSettings returns the custom url settings for this provider @@ -29,4 +36,4 @@ func (b *BaseProvider) CustomURLSettings() *CustomURLSettings { return nil } -var _ (Provider) = &BaseProvider{} +var _ Provider = &BaseProvider{} diff --git a/services/auth/source/oauth2/providers_custom.go b/services/auth/source/oauth2/providers_custom.go index b5fe179441..65cf538ad7 100644 --- a/services/auth/source/oauth2/providers_custom.go +++ b/services/auth/source/oauth2/providers_custom.go @@ -49,7 +49,7 @@ func NewCustomProvider(name, displayName string, customURLSetting *CustomURLSett } } -var _ (GothProvider) = &CustomProvider{} +var _ GothProvider = &CustomProvider{} func init() { RegisterGothProvider(NewCustomProvider( diff --git a/services/auth/source/oauth2/providers_openid.go b/services/auth/source/oauth2/providers_openid.go index 2433cd3c7f..c394058d6f 100644 --- a/services/auth/source/oauth2/providers_openid.go +++ b/services/auth/source/oauth2/providers_openid.go @@ -24,9 +24,9 @@ func (o *OpenIDProvider) DisplayName() string { return "OpenID Connect" } -// Image returns an image path for this provider -func (o *OpenIDProvider) Image() string { - return "/assets/img/auth/openid_connect.svg" +// IconURL returns an icon path for this provider +func (o *OpenIDProvider) IconURL() string { + return setting.AppSubURL + "/assets/img/svg/gitea-openid.svg" } // CreateGothProvider creates a GothProvider from this Provider @@ -48,7 +48,7 @@ func (o *OpenIDProvider) CustomURLSettings() *CustomURLSettings { return nil } -var _ (GothProvider) = &OpenIDProvider{} +var _ GothProvider = &OpenIDProvider{} func init() { RegisterGothProvider(&OpenIDProvider{}) diff --git a/services/auth/source/oauth2/providers_simple.go b/services/auth/source/oauth2/providers_simple.go index 731c1b59a9..e95323a62a 100644 --- a/services/auth/source/oauth2/providers_simple.go +++ b/services/auth/source/oauth2/providers_simple.go @@ -48,7 +48,7 @@ func NewSimpleProvider(name, displayName string, scopes []string, newFn SimplePr } } -var _ (GothProvider) = &SimpleProvider{} +var _ GothProvider = &SimpleProvider{} func init() { RegisterGothProvider( @@ -69,13 +69,13 @@ func init() { })) // named gplus due to legacy gplus -> google migration (Google killed Google+). This ensures old connections still work - RegisterGothProvider(NewImagedProvider("/assets/img/auth/google.png", NewSimpleProvider("gplus", "Google", []string{"email"}, + RegisterGothProvider(NewSimpleProvider("gplus", "Google", []string{"email"}, func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider { if setting.OAuth2Client.UpdateAvatar || setting.OAuth2Client.EnableAutoRegistration { scopes = append(scopes, "profile") } return google.New(clientKey, secret, callbackURL, scopes...) - }))) + })) RegisterGothProvider(NewSimpleProvider("twitter", "Twitter", nil, func(clientKey, secret, callbackURL string, scopes ...string) goth.Provider { diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index 8d9375de75..22cb620bfe 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -53,29 +53,17 @@ {{end}} {{if and .OrderedOAuth2Names .OAuth2Providers}} -
-
- {{.locale.Tr "sign_in_with"}} -
+
+
+ {{.locale.Tr "sign_in_or"}} +
+ diff --git a/templates/user/settings/security/accountlinks.tmpl b/templates/user/settings/security/accountlinks.tmpl index b9f8af34c7..e7a685bb9f 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.DisplayName}} {{$provider.DisplayName}} {{end}} diff --git a/web_src/css/base.css b/web_src/css/base.css index b56e7b68d6..1c7a239188 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -468,6 +468,10 @@ a.label, padding-bottom: 7.42px !important; } +.ui.divider { + color: var(--color-text); +} + .ui.divider:not(.vertical,.horizontal) { border-top-color: var(--color-secondary) !important; border-bottom: none !important; diff --git a/web_src/css/form.css b/web_src/css/form.css index dfa7208ca2..a6106016b5 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -309,7 +309,8 @@ textarea:focus, .user.reset.password form .inline.field > textarea, .user.link-account form .inline.field > textarea, .user.signin form .inline.field > textarea, - .user.signup form .inline.field > textarea { + .user.signup form .inline.field > textarea, + .oauth-login-link { width: 50%; } } @@ -364,7 +365,8 @@ textarea:focus, .user.reset.password form input, .user.link-account form input, .user.signin form input, - .user.signup form input { + .user.signup form input, + .oauth-login-link { width: 100% !important; } } diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index dcd9c2f08c..b09fb90b71 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -7,3 +7,4 @@ @disabledOpacity: var(--opacity-disabled); @variationPopupTooltip: false; @linkHoverUnderline: underline; +@variationButtonSocial: false; diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 40d8b4e138..47510dbc9e 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -439,219 +439,6 @@ border-bottom-right-radius: 0; } -/*------------------- - Social - --------------------*/ - -/* Facebook */ - -.ui.facebook.button { - background-color: #3B5998; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.facebook.button:hover { - background-color: #304d8a; - color: #FFFFFF; - text-shadow: none; -} - -.ui.facebook.button:active { - background-color: #2d4373; - color: #FFFFFF; - text-shadow: none; -} - -/* Twitter */ - -.ui.twitter.button { - background-color: #1DA1F2; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.twitter.button:hover { - background-color: #0298f3; - color: #FFFFFF; - text-shadow: none; -} - -.ui.twitter.button:active { - background-color: #0c85d0; - color: #FFFFFF; - text-shadow: none; -} - -/* Google Plus */ - -.ui.google.plus.button { - background-color: #DD4B39; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.google.plus.button:hover { - background-color: #e0321c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.google.plus.button:active { - background-color: #c23321; - color: #FFFFFF; - text-shadow: none; -} - -/* Linked In */ - -.ui.linkedin.button { - background-color: #0077B5; - color: #FFFFFF; - text-shadow: none; -} - -.ui.linkedin.button:hover { - background-color: #00669c; - color: #FFFFFF; - text-shadow: none; -} - -.ui.linkedin.button:active { - background-color: #005582; - color: #FFFFFF; - text-shadow: none; -} - -/* YouTube */ - -.ui.youtube.button { - background-color: #FF0000; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.youtube.button:hover { - background-color: #e60000; - color: #FFFFFF; - text-shadow: none; -} - -.ui.youtube.button:active { - background-color: #cc0000; - color: #FFFFFF; - text-shadow: none; -} - -/* Instagram */ - -.ui.instagram.button { - background-color: #49769C; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.instagram.button:hover { - background-color: #3d698e; - color: #FFFFFF; - text-shadow: none; -} - -.ui.instagram.button:active { - background-color: #395c79; - color: #FFFFFF; - text-shadow: none; -} - -/* Pinterest */ - -.ui.pinterest.button { - background-color: #BD081C; - color: #FFFFFF; - text-shadow: none; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.pinterest.button:hover { - background-color: #ac0013; - color: #FFFFFF; - text-shadow: none; -} - -.ui.pinterest.button:active { - background-color: #8c0615; - color: #FFFFFF; - text-shadow: none; -} - -/* VK */ - -.ui.vk.button { - background-color: #45668E; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.vk.button:hover { - background-color: #395980; - color: #FFFFFF; -} - -.ui.vk.button:active { - background-color: #344d6c; - color: #FFFFFF; -} - -/* WhatsApp */ - -.ui.whatsapp.button { - background-color: #25D366; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.whatsapp.button:hover { - background-color: #19c55a; - color: #FFFFFF; -} - -.ui.whatsapp.button:active { - background-color: #1da851; - color: #FFFFFF; -} - -/* Telegram */ - -.ui.telegram.button { - background-color: #0088CC; - color: #FFFFFF; - background-image: none; - box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; -} - -.ui.telegram.button:hover { - background-color: #0077b3; - color: #FFFFFF; -} - -.ui.telegram.button:active { - background-color: #006699; - color: #FFFFFF; -} - /*-------------- Icon ---------------*/