Modify OAuth login ui and fix display name, iconurl related logic (#25030)

Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

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)

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{}

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(

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{})

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 {