fix: IDP login button styles (#869)

* fix: styling type on idp

* fix: google styling

* fix: google styling

* fix: google styling

* fix: remove logo src from angular

* fix: pr requests

* fix drop column migration

* fix: drop column migration

* fix: grant id

console/src/app/modules/idp-create/idp-create.component.ts

@@ -47,7 +47,6 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
     ) {
         this.formGroup = new FormGroup({
             name: new FormControl('', [Validators.required]),
-            logoSrc: new FormControl('', []),
             clientId: new FormControl('', [Validators.required]),
             clientSecret: new FormControl('', [Validators.required]),
             issuer: new FormControl('', [Validators.required]),
@@ -103,7 +102,6 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
         req.setClientId(this.clientId?.value);
         req.setClientSecret(this.clientSecret?.value);
         req.setIssuer(this.issuer?.value);
-        req.setLogoSrc(this.logoSrc?.value);
         req.setScopesList(this.scopesList?.value);
         req.setIdpDisplayNameMapping(this.idpDisplayNameMapping?.value);
         req.setUsernameMapping(this.usernameMapping?.value);
@@ -153,10 +151,6 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
         return this.formGroup.get('name');
     }
 
-    public get logoSrc(): AbstractControl | null {
-        return this.formGroup.get('logoSrc');
-    }
-
     public get clientId(): AbstractControl | null {
         return this.formGroup.get('clientId');
     }

console/src/app/modules/idp-table/idp-table.component.html

@@ -32,8 +32,6 @@
                     <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                         [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
                         (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-                        <img *ngIf="idp?.logoSrc?.startsWith('https://'); else genAvatar" [src]="idp.logoSrc"
-                            alt="ipp logo {{idp?.name}}" />
                         <ng-template #genAvatar>
                             <div class="avatar">
                                 <span>{{idp.name.charAt(0)}}</span>
@@ -103,4 +101,4 @@
     </div>
     <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
         [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-</app-refresh-table>
+</app-refresh-table>

console/src/app/modules/idp/idp.component.html

@@ -12,10 +12,6 @@
                         <mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
                         <input matInput formControlName="name" />
                     </mat-form-field>
-                    <!--<mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'IDP.LOGOSRC' | translate }}</mat-label>
-                    <input matInput formControlName="logoSrc" />
-                </mat-form-field>-->
                 </div>
             </ng-container>
 
@@ -92,4 +88,4 @@
         </ng-container>
     </div>
 
-</app-detail-layout>
+</app-detail-layout>

console/src/app/modules/idp/idp.component.ts

@@ -50,7 +50,6 @@ export class IdpComponent implements OnInit, OnDestroy {
         this.idpForm = new FormGroup({
             id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
             name: new FormControl('', [Validators.required]),
-            logoSrc: new FormControl({ disabled: true, value: '' }, [Validators.required]),
         });
 
         this.oidcConfigForm = new FormGroup({
@@ -121,7 +120,6 @@ export class IdpComponent implements OnInit, OnDestroy {
 
         req.setId(this.id?.value);
         req.setName(this.name?.value);
-        req.setLogoSrc(this.logoSrc?.value);
 
         this.service.UpdateIdp(req).then((idp) => {
           this.toast.showInfo('IDP.TOAST.SAVED', true);
@@ -206,10 +204,6 @@ export class IdpComponent implements OnInit, OnDestroy {
         return this.idpForm.get('name');
     }
 
-    public get logoSrc(): AbstractControl | null {
-      return this.idpForm.get('logoSrc');
-    }
-
     public get clientId(): AbstractControl | null {
         return this.oidcConfigForm.get('clientId');
     }

console/src/assets/i18n/de.json

@@ -718,7 +718,6 @@
         "NAME":"Name",
         "CONFIG":"Konfiguration",
         "STATE":"Status",
-        "LOGOSRC":"Logo Src",
         "ISSUER":"Issuer",
         "SCOPESLIST":"Scopes List",
         "CLIENTID":"Client ID",

console/src/assets/i18n/en.json

@@ -718,7 +718,6 @@
         "NAME":"Name",
         "CONFIG":"Configuration",
         "STATE":"State",
-        "LOGOSRC":"Logo Src",
         "ISSUER":"Issuer",
         "SCOPESLIST":"Scopes List",
         "CLIENTID":"Client ID",

internal/admin/repository/eventsourcing/handler/idp_providers.go

@@ -105,6 +105,7 @@ func (m *IDPProvider) fillData(provider *iam_view_model.IDPProviderView) (err er
 
 func (m *IDPProvider) fillConfigData(provider *iam_view_model.IDPProviderView, config *iam_model.IDPConfig) {
 	provider.Name = config.Name
+	provider.StylingType = int32(config.StylingType)
 	provider.IDPConfigType = int32(config.Type)
 	provider.IDPState = int32(config.State)
 }

internal/api/grpc/admin/idp_config_converter.go

@@ -9,9 +9,9 @@ import (
 
 func createOidcIdpToModel(idp *admin.OidcIdpConfigCreate) *iam_model.IDPConfig {
 	return &iam_model.IDPConfig{
-		Name:    idp.Name,
+		Name:        idp.Name,
-		LogoSrc: idp.LogoSrc,
+		StylingType: idpConfigStylingTypeToModel(idp.StylingType),
-		Type:    iam_model.IDPConfigTypeOIDC,
+		Type:        iam_model.IDPConfigTypeOIDC,
 		OIDCConfig: &iam_model.OIDCIDPConfig{
 			ClientID:              idp.ClientId,
 			ClientSecretString:    idp.ClientSecret,
@@ -27,7 +27,7 @@ func updateIdpToModel(idp *admin.IdpUpdate) *iam_model.IDPConfig {
 	return &iam_model.IDPConfig{
 		IDPConfigID: idp.Id,
 		Name:        idp.Name,
-		LogoSrc:     idp.LogoSrc,
+		StylingType: idpConfigStylingTypeToModel(idp.StylingType),
 	}
 }
 
@@ -56,7 +56,7 @@ func idpFromModel(idp *iam_model.IDPConfig) *admin.Idp {
 		ChangeDate:   changeDate,
 		Sequence:     idp.Sequence,
 		Name:         idp.Name,
-		LogoSrc:      idp.LogoSrc,
+		StylingType:  idpConfigStylingTypeFromModel(idp.StylingType),
 		State:        idpConfigStateFromModel(idp.State),
 		IdpConfig:    idpConfigFromModel(idp),
 	}
@@ -75,7 +75,7 @@ func idpViewFromModel(idp *iam_model.IDPConfigView) *admin.IdpView {
 		ChangeDate:    changeDate,
 		Sequence:      idp.Sequence,
 		Name:          idp.Name,
-		LogoSrc:       idp.LogoSrc,
+		StylingType:   idpConfigStylingTypeFromModel(idp.StylingType),
 		State:         idpConfigStateFromModel(idp.State),
 		IdpConfigView: idpConfigViewFromModel(idp),
 	}
@@ -206,3 +206,21 @@ func idpConfigsFromView(viewIdps []*iam_model.IDPConfigView) []*admin.IdpView {
 	}
 	return idps
 }
+
+func idpConfigStylingTypeFromModel(stylingType iam_model.IDPStylingType) admin.IdpStylingType {
+	switch stylingType {
+	case iam_model.IDPStylingTypeGoogle:
+		return admin.IdpStylingType_IDPSTYLINGTYPE_GOOGLE
+	default:
+		return admin.IdpStylingType_IDPSTYLINGTYPE_UNSPECIFIED
+	}
+}
+
+func idpConfigStylingTypeToModel(stylingType admin.IdpStylingType) iam_model.IDPStylingType {
+	switch stylingType {
+	case admin.IdpStylingType_IDPSTYLINGTYPE_GOOGLE:
+		return iam_model.IDPStylingTypeGoogle
+	default:
+		return iam_model.IDPStylingTypeUnspecified
+	}
+}

internal/api/grpc/management/idp_config_converter.go

@@ -9,9 +9,9 @@ import (
 
 func createOidcIdpToModel(idp *management.OidcIdpConfigCreate) *iam_model.IDPConfig {
 	return &iam_model.IDPConfig{
-		Name:    idp.Name,
+		Name:        idp.Name,
-		LogoSrc: idp.LogoSrc,
+		StylingType: idpConfigStylingTypeToModel(idp.StylingType),
-		Type:    iam_model.IDPConfigTypeOIDC,
+		Type:        iam_model.IDPConfigTypeOIDC,
 		OIDCConfig: &iam_model.OIDCIDPConfig{
 			ClientID:              idp.ClientId,
 			ClientSecretString:    idp.ClientSecret,
@@ -27,7 +27,7 @@ func updateIdpToModel(idp *management.IdpUpdate) *iam_model.IDPConfig {
 	return &iam_model.IDPConfig{
 		IDPConfigID: idp.Id,
 		Name:        idp.Name,
-		LogoSrc:     idp.LogoSrc,
+		StylingType: idpConfigStylingTypeToModel(idp.StylingType),
 	}
 }
 
@@ -56,7 +56,7 @@ func idpFromModel(idp *iam_model.IDPConfig) *management.Idp {
 		ChangeDate:   changeDate,
 		Sequence:     idp.Sequence,
 		Name:         idp.Name,
-		LogoSrc:      idp.LogoSrc,
+		StylingType:  idpConfigStylingTypeFromModel(idp.StylingType),
 		State:        idpConfigStateFromModel(idp.State),
 		IdpConfig:    idpConfigFromModel(idp),
 	}
@@ -76,7 +76,7 @@ func idpViewFromModel(idp *iam_model.IDPConfigView) *management.IdpView {
 		Sequence:      idp.Sequence,
 		ProviderType:  idpProviderTypeFromModel(idp.IDPProviderType),
 		Name:          idp.Name,
-		LogoSrc:       idp.LogoSrc,
+		StylingType:   idpConfigStylingTypeFromModel(idp.StylingType),
 		State:         idpConfigStateFromModel(idp.State),
 		IdpConfigView: idpConfigViewFromModel(idp),
 	}
@@ -211,3 +211,21 @@ func oidcMappingFieldToModel(field management.OIDCMappingField) iam_model.OIDCMa
 		return iam_model.OIDCMappingFieldUnspecified
 	}
 }
+
+func idpConfigStylingTypeFromModel(stylingType iam_model.IDPStylingType) management.IdpStylingType {
+	switch stylingType {
+	case iam_model.IDPStylingTypeGoogle:
+		return management.IdpStylingType_IDPSTYLINGTYPE_GOOGLE
+	default:
+		return management.IdpStylingType_IDPSTYLINGTYPE_UNSPECIFIED
+	}
+}
+
+func idpConfigStylingTypeToModel(stylingType management.IdpStylingType) iam_model.IDPStylingType {
+	switch stylingType {
+	case management.IdpStylingType_IDPSTYLINGTYPE_GOOGLE:
+		return iam_model.IDPStylingTypeGoogle
+	default:
+		return iam_model.IDPStylingTypeUnspecified
+	}
+}

internal/auth/repository/eventsourcing/handler/idp_providers.go

@@ -111,6 +111,7 @@ func (m *IDPProvider) fillData(provider *iam_view_model.IDPProviderView) (err er
 
 func (m *IDPProvider) fillConfigData(provider *iam_view_model.IDPProviderView, config *iam_model.IDPConfig) {
 	provider.Name = config.Name
+	provider.StylingType = int32(config.StylingType)
 	provider.IDPConfigType = int32(config.Type)
 	provider.IDPState = int32(config.State)
 }

internal/iam/model/idp_config.go

@@ -10,7 +10,7 @@ type IDPConfig struct {
 	IDPConfigID string
 	Type        IdpConfigType
 	Name        string
-	LogoSrc     []byte
+	StylingType IDPStylingType
 	State       IDPConfigState
 	OIDCConfig  *OIDCIDPConfig
 }
@@ -42,6 +42,13 @@ const (
 	IDPConfigStateRemoved
 )
 
+type IDPStylingType int32
+
+const (
+	IDPStylingTypeUnspecified IDPStylingType = iota
+	IDPStylingTypeGoogle
+)
+
 type OIDCMappingField int32
 
 const (
@@ -82,3 +89,12 @@ func (oi *OIDCIDPConfig) CryptSecret(crypt crypto.Crypto) error {
 	oi.ClientSecret = cryptedSecret
 	return nil
 }
+
+func (st IDPStylingType) GetCSSClass() string {
+	switch st {
+	case IDPStylingTypeGoogle:
+		return "google"
+	default:
+		return ""
+	}
+}

internal/iam/model/idp_config_view.go

@@ -10,7 +10,7 @@ type IDPConfigView struct {
 	AggregateID     string
 	IDPConfigID     string
 	Name            string
-	LogoSrc         []byte
+	StylingType     IDPStylingType
 	State           IDPConfigState
 	CreationDate    time.Time
 	ChangeDate      time.Time

internal/iam/model/idp_provider_view.go

@@ -10,6 +10,7 @@ type IDPProviderView struct {
 	IDPConfigID     string
 	IDPProviderType IDPProviderType
 	Name            string
+	StylingType     IDPStylingType
 	IDPConfigType   IdpConfigType
 	IDPState        IDPConfigState
 

internal/iam/repository/eventsourcing/model/idp_config.go

@@ -1,7 +1,6 @@
 package model
 
 import (
-	"bytes"
 	"encoding/json"
 	"github.com/caos/logging"
 	es_models "github.com/caos/zitadel/internal/eventstore/models"
@@ -14,7 +13,7 @@ type IDPConfig struct {
 	State       int32  `json:"-"`
 	Name        string `json:"name,omitempty"`
 	Type        int32  `json:"idpType,omitempty"`
-	LogoSrc     []byte `json:"logoSrc,omitempty"`
+	StylingType int32  `json:"stylingType,omitempty"`
 
 	OIDCIDPConfig *OIDCIDPConfig `json:"-"`
 }
@@ -39,8 +38,8 @@ func (c *IDPConfig) Changes(changed *IDPConfig) map[string]interface{} {
 	if changed.Name != "" && c.Name != changed.Name {
 		changes["name"] = changed.Name
 	}
-	if changed.LogoSrc != nil && bytes.Equal(c.LogoSrc, changed.LogoSrc) {
+	if changed.StylingType != changed.StylingType {
-		changes["logoSrc"] = changed.LogoSrc
+		changes["stylingType"] = changed.StylingType
 	}
 	return changes
 }
@@ -68,7 +67,7 @@ func IDPConfigFromModel(idp *model.IDPConfig) *IDPConfig {
 		Name:        idp.Name,
 		State:       int32(idp.State),
 		Type:        int32(idp.Type),
-		LogoSrc:     idp.LogoSrc,
+		StylingType: int32(idp.StylingType),
 	}
 	if idp.OIDCConfig != nil {
 		converted.OIDCIDPConfig = OIDCIDPConfigFromModel(idp.OIDCConfig)
@@ -81,7 +80,7 @@ func IDPConfigToModel(idp *IDPConfig) *model.IDPConfig {
 		ObjectRoot:  idp.ObjectRoot,
 		IDPConfigID: idp.IDPConfigID,
 		Name:        idp.Name,
-		LogoSrc:     idp.LogoSrc,
+		StylingType: model.IDPStylingType(idp.StylingType),
 		State:       model.IDPConfigState(idp.State),
 		Type:        model.IdpConfigType(idp.Type),
 	}

internal/iam/repository/view/model/idp_config.go

@@ -26,7 +26,7 @@ type IDPConfigView struct {
 	IDPConfigID     string    `json:"idpConfigId" gorm:"column:idp_config_id;primary_key"`
 	AggregateID     string    `json:"-" gorm:"column:aggregate_id"`
 	Name            string    `json:"name" gorm:"column:name"`
-	LogoSrc         []byte    `json:"logoSrc" gorm:"column:logo_src"`
+	StylingType     int32     `json:"stylingType" gorm:"column:styling_type"`
 	CreationDate    time.Time `json:"-" gorm:"column:creation_date"`
 	ChangeDate      time.Time `json:"-" gorm:"column:change_date"`
 	IDPState        int32     `json:"-" gorm:"column:idp_state"`
@@ -49,7 +49,7 @@ func IDPConfigViewFromModel(idp *model.IDPConfigView) *IDPConfigView {
 		AggregateID:               idp.AggregateID,
 		IDPState:                  int32(idp.State),
 		Name:                      idp.Name,
-		LogoSrc:                   idp.LogoSrc,
+		StylingType:               int32(idp.StylingType),
 		Sequence:                  idp.Sequence,
 		CreationDate:              idp.CreationDate,
 		ChangeDate:                idp.ChangeDate,
@@ -70,7 +70,7 @@ func IDPConfigViewToModel(idp *IDPConfigView) *model.IDPConfigView {
 		AggregateID:               idp.AggregateID,
 		State:                     model.IDPConfigState(idp.IDPState),
 		Name:                      idp.Name,
-		LogoSrc:                   idp.LogoSrc,
+		StylingType:               model.IDPStylingType(idp.StylingType),
 		Sequence:                  idp.Sequence,
 		CreationDate:              idp.CreationDate,
 		ChangeDate:                idp.ChangeDate,

internal/iam/repository/view/model/idp_provider.go

@@ -27,6 +27,7 @@ type IDPProviderView struct {
 	ChangeDate   time.Time `json:"-" gorm:"column:change_date"`
 
 	Name            string `json:"-" gorm:"column:name"`
+	StylingType     int32  `json:"-" gorm:"column:styling_type"`
 	IDPConfigType   int32  `json:"-" gorm:"column:idp_config_type"`
 	IDPProviderType int32  `json:"idpProviderType" gorm:"column:idp_provider_type"`
 	IDPState        int32  `json:"-" gorm:"column:idp_state"`
@@ -41,6 +42,7 @@ func IDPProviderViewFromModel(provider *model.IDPProviderView) *IDPProviderView
 		CreationDate:    provider.CreationDate,
 		ChangeDate:      provider.ChangeDate,
 		Name:            provider.Name,
+		StylingType:     int32(provider.StylingType),
 		IDPConfigID:     provider.IDPConfigID,
 		IDPConfigType:   int32(provider.IDPConfigType),
 		IDPProviderType: int32(provider.IDPProviderType),
@@ -55,6 +57,7 @@ func IDPProviderViewToModel(provider *IDPProviderView) *model.IDPProviderView {
 		CreationDate:    provider.CreationDate,
 		ChangeDate:      provider.ChangeDate,
 		Name:            provider.Name,
+		StylingType:     model.IDPStylingType(provider.StylingType),
 		IDPConfigID:     provider.IDPConfigID,
 		IDPConfigType:   model.IdpConfigType(provider.IDPConfigType),
 		IDPProviderType: model.IDPProviderType(provider.IDPProviderType),

internal/management/repository/eventsourcing/handler/idp_providers.go

@@ -111,6 +111,7 @@ func (m *IDPProvider) fillData(provider *iam_view_model.IDPProviderView) (err er
 
 func (m *IDPProvider) fillConfigData(provider *iam_view_model.IDPProviderView, config *iam_model.IDPConfig) {
 	provider.Name = config.Name
+	provider.StylingType = int32(config.StylingType)
 	provider.IDPConfigType = int32(config.Type)
 	provider.IDPState = int32(config.State)
 }

internal/ui/login/handler/register_option_handler.go

@@ -35,7 +35,12 @@ func (l *Login) renderRegisterOption(w http.ResponseWriter, r *http.Request, aut
 	data := registerOptionData{
 		baseData: l.getBaseData(r, authReq, "RegisterOption", errType, errMessage),
 	}
-	l.renderer.RenderTemplate(w, r, l.renderer.Templates[tmplRegisterOption], data, nil)
+	funcs := map[string]interface{}{
+		"hasExternalLogin": func() bool {
+			return authReq.LoginPolicy.AllowExternalIDP && authReq.AllowedExternalIDPs != nil && len(authReq.AllowedExternalIDPs) > 0
+		},
+	}
+	l.renderer.RenderTemplate(w, r, l.renderer.Templates[tmplRegisterOption], data, funcs)
 }
 
 func (l *Login) handleRegisterOptionCheck(w http.ResponseWriter, r *http.Request) {

internal/ui/login/handler/renderer.go

@@ -140,6 +140,9 @@ func CreateRenderer(pathPrefix string, staticDir http.FileSystem, cookieName str
 		"hasExternalLogin": func() bool {
 			return false
 		},
+		"idpProviderClass": func(stylingType iam_model.IDPStylingType) string {
+			return stylingType.GetCSSClass()
+		},
 	}
 	var err error
 	r.Renderer, err = renderer.NewRenderer(

internal/ui/login/static/resources/themes/caos/css/dark.css

@@ -161,7 +161,8 @@ button, .button {
   outline: none;
   display: inline-block;
   text-align: center;
-  line-height: 40px;
+  line-height: 44px;
+  padding: 1px 6px;
 }
 button:hover, .button:hover {
   background-color: #f60075;
@@ -184,6 +185,29 @@ button:disabled:hover, .button:disabled:hover {
   background-color: #999999;
   border: 1px solid #999999;
 }
+button.google, .button.google {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 1px;
+  color: #FFFFFF;
+  background-color: #4285F4;
+}
+button.google span.logo, .button.google span.logo {
+  height: 46px;
+  width: 46px;
+  background-color: #FFFFFF;
+  background-image: url("../../../images/idp/google.png");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+}
+button.google span.provider-name, .button.google span.provider-name {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
 input:not([type=radio]), select {
   background-color: #252525;

internal/ui/login/static/resources/themes/caos/css/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCDc;EDEd,OCDQ;EDER;EACA;EACA;;;AAMJ;EACI,OCXQ;EDYR,aClBS;EDmBT;EACA,WEzBS;EF0BT;;;AAGJ;EACI,OCnBQ;EDoBR,aC1BS;ED2BT;EACA,WEhCU;;;AFmCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvDW;EDwDX;EACA;;AAEA;EACI,OC3DY;;AD8DhB;EACI;;;AAIR;EACI,kBCvEc;EDwEd,OCtEW;EDuEX;EACA;EACA;EACA;EACA,QExFU;EFyFV;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCnFY;EDoFZ,OCvFU;EDwFV;;AAGJ;EACI,kBC1FO;ED2FP,OC5FI;ED6FJ;;AACA;EACI,kBC7FQ;;ADiGhB;EACI,kBEvFW;EFwFX;;AAEA;EACI,kBE3FO;EF4FP;;;AAOZ;EACI,kBEnGmB;EFoGnB,OClHQ;EDmHR,QE/HU;EFgIV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EE9HN;;AACA;EFyHE;IExHA;IACA;;;AF+HA;EElIF;;AACA;EFiIE;IEhIA;IACA;;;;AFsIA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WE5JE;EF6JF;;AAGJ;EACI;EACA;EACA;EACA,OE/IC;;;AFqJT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCpMA;;ADwMR;EACI,OE7LK;EF8LL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCnOI;EDoOJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBE7NW;;AFgOf;EACI;;AAIR;EACI;;AAKA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,cEtPO;EFuPP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OElRP;;AFyRL;EACI;;AAEJ;EACI;EACA;EACA;EACA;EE5SV;;AACA;EFuSM;IEtSJ;IACA;;;AF8SQ;EACI;EACA;EEnTd;;AACA;EFgTU;IE/SR;IACA;;;AFqTI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OE7TN;;AFkUE;EACI,OEpUL;;AFyUP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC7WI;;ADgXR;EACI,MClXU;;;ADuXd;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OEpZO","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCDc;EDEd,OCDQ;EDER;EACA;EACA;;;AAMJ;EACI,OCXQ;EDYR,aClBS;EDmBT;EACA,WEzBS;EF0BT;;;AAGJ;EACI,OCnBQ;EDoBR,aC1BS;ED2BT;EACA,WEhCU;;;AFmCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvDW;EDwDX;EACA;;AAEA;EACI,OC3DY;;AD8DhB;EACI;;;AAIR;EACI,kBCvEc;EDwEd,OCtEW;EDuEX;EACA;EACA;EACA;EACA,QExFU;EFyFV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCpFY;EDqFZ,OCxFU;EDyFV;;AAGJ;EACI,kBC3FO;ED4FP,OC7FI;ED8FJ;;AACA;EACI,kBC9FQ;;ADkGhB;EACI,kBExFW;EFyFX;;AAEA;EACI,kBE5FO;EF6FP;;AAIR;EACI;EACA;EACA;EACA;EACA,OEhGa;EFiGb,kBEhGmB;;AFkGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBE9HmB;EF+HnB,OC7IQ;ED8IR,QE1JU;EF2JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EEzJN;;AACA;EFoJE;IEnJA;IACA;;;AF0JA;EE7JF;;AACA;EF4JE;IE3JA;IACA;;;;AFiKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WEvLE;EFwLF;;AAGJ;EACI;EACA;EACA;EACA,OE1KC;;;AFgLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OC/NA;;ADmOR;EACI,OExNK;EFyNL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC9PI;ED+PJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBExPW;;AF2Pf;EACI;;AAIR;EACI;;AAKA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,cEjRO;EFkRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OE7SP;;AFoTL;EACI;;AAEJ;EACI;EACA;EACA;EACA;EEvUV;;AACA;EFkUM;IEjUJ;IACA;;;AFyUQ;EACI;EACA;EE9Ud;;AACA;EF2UU;IE1UR;IACA;;;AFgVI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OErVN;;AF0VE;EACI,OE5VL;;AFiWP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCxYI;;AD2YR;EACI,MC7YU;;;ADkZd;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OE5aO","file":"dark.css"}

internal/ui/login/static/resources/themes/caos/css/light.css

@@ -161,7 +161,8 @@ button, .button {
   outline: none;
   display: inline-block;
   text-align: center;
-  line-height: 40px;
+  line-height: 44px;
+  padding: 1px 6px;
 }
 button:hover, .button:hover {
   background-color: #f60075;
@@ -184,6 +185,29 @@ button:disabled:hover, .button:disabled:hover {
   background-color: #999999;
   border: 1px solid #999999;
 }
+button.google, .button.google {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 1px;
+  color: #FFFFFF;
+  background-color: #4285F4;
+}
+button.google span.logo, .button.google span.logo {
+  height: 46px;
+  width: 46px;
+  background-color: #FFFFFF;
+  background-image: url("../../../images/idp/google.png");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+}
+button.google span.provider-name, .button.google span.provider-name {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -546,6 +570,13 @@ html button.other-user:hover .other-user-image, html .button.other-user:hover .o
     background-size: 80px 60px;
   }
 }
+html button.google, html .button.google {
+  color: #8b8d8d;
+  background-color: #FFFFFF;
+}
+html button.google span.logo, html .button.google span.logo {
+  background-image: url("../../../images/idp/google.png");
+}
 html input:not([type=radio]), html select {
   background-color: #FFFFFF;
   color: #282828;

internal/ui/login/static/resources/themes/caos/css/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"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","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCMW;EDLX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCDc;EDEd,OCDQ;EDER;EACA;EACA;;;AAMJ;EACI,OCXQ;EDYR,aClBS;EDmBT;EACA,WEzBS;EF0BT;;;AAGJ;EACI,OCnBQ;EDoBR,aC1BS;ED2BT;EACA,WEhCU;;;AFmCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvDW;EDwDX;EACA;;AAEA;EACI,OC3DY;;AD8DhB;EACI;;;AAIR;EACI,kBCvEc;EDwEd,OCtEW;EDuEX;EACA;EACA;EACA;EACA,QExFU;EFyFV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCpFY;EDqFZ,OCxFU;EDyFV;;AAGJ;EACI,kBC3FO;ED4FP,OC7FI;ED8FJ;;AACA;EACI,kBC9FQ;;ADkGhB;EACI,kBExFW;EFyFX;;AAEA;EACI,kBE5FO;EF6FP;;AAIR;EACI;EACA;EACA;EACA;EACA,OEhGa;EFiGb,kBEhGmB;;AFkGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBE9HmB;EF+HnB,OC7IQ;ED8IR,QE1JU;EF2JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EEzJN;;AACA;EFoJE;IEnJA;IACA;;;AF0JA;EE7JF;;AACA;EF4JE;IE3JA;IACA;;;;AFiKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WEvLE;EFwLF;;AAGJ;EACI;EACA;EACA;EACA,OE1KC;;;AFgLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OC/NA;;ADmOR;EACI,OExNK;EFyNL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC9PI;ED+PJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBExPW;;AF2Pf;EACI;;AAIR;EACI;;AAKA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,cEjRO;EFkRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OE7SP;;AFoTL;EACI;;AAEJ;EACI;EACA;EACA;EACA;EEvUV;;AACA;EFkUM;IEjUJ;IACA;;;AFyUQ;EACI;EACA;EE9Ud;;AACA;EF2UU;IE1UR;IACA;;;AFgVI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OErVN;;AF0VE;EACI,OE5VL;;AFiWP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCxYI;;AD2YR;EACI,MC7YU;;;ADkZd;EACI;EACA;;;AAIR;EAEQ;EAEJ;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OE5aO;;;ACrCX;EACI,kBFeQ;EEdR,OFac;;AERd;EACI;;AAGJ;EACI,OFGU;;AEAd;EACI;EACA;EACA;;AAEA;EACI,kBFIa;EEHb;EACA,ODyBgB;;ACtBpB;EACI,kBFVG;EEWH,ODoBgB;ECnBhB;EACA;;AACA;EACI,kBFdI;;AEkBZ;EACI,kBDRO;ECSP;;AAEA;EACI,kBDZG;ECaH;;AAIR;EACI,OFhCM;;AEkCN;EACI;EACA,kBDHY;;ACQhB;EDxCV;;AACA;ECuCU;IDtCR;IACA;;;ACyCQ;EACI,kBDbY;;ACeZ;ED/Cd;;AACA;EC8Cc;ID7CZ;IACA;;;ACmDQ;EDtDV;;AACA;ECqDU;IDpDR;IACA;;;ACwDY;ED3Dd;;AACA;EC0Dc;IDzDZ;IACA;;;AC8DI;EACI,OD7Bc;EC8Bd,kBD7BoB;;AC+BpB;EACI;;AAKZ;EACI,kBD5CoB;EC6CpB,OF9EU;;AEkFV;EACI,MFnFM;;AEsFV;EACI,MFtFA;;AE0FR;EAEQ;;;AAMR;EACI,OFpGU;;AEwGb;EACI,ODhEM;;ACoEN;EACI,ODtEG;;;AC8EZ;EDrHF;;AACA;ECoHE;IDnHA;IACA;;;ACsHA;EDzHF;;AACA;ECwHE;IDvHA;IACA;;;;AC2HJ;EACI;;;AAGJ;EACI,OD5FY","file":"light.css"}

internal/ui/login/static/resources/themes/scss/light.scss

@@ -79,6 +79,15 @@ html {
                 }
             }
         }
+
+        &.google {
+            color: $idpGoogleFontColorLight;
+            background-color: $idpGoogleBackgroundColorLight;
+
+            span.logo {
+                background-image: url($idpGoogleImg + '.png');
+            }
+        }
     }
 
     input:not([type='radio']), select {

internal/ui/login/static/resources/themes/scss/main.scss

@@ -97,7 +97,8 @@ button, .button {
     outline: none;
     display: inline-block;
     text-align: center;
-    line-height: 40px;
+    line-height: 44px;
+    padding: 1px 6px;
 
     &:hover {
         background-color: $primaryColorHover;
@@ -123,6 +124,32 @@ button, .button {
             border: 1px solid $inputBorderColor;
         }
     }
+
+    &.google {
+        display: flex;
+        align-items: center;
+        position: relative;
+        padding: 0 1px;
+        color: $idpGoogleFontColor;
+        background-color: $idpGoogleBackgroundColor;
+
+        span.logo {
+            height: 46px;
+            width: 46px;
+            background-color: #FFFFFF;
+            background-image: url($idpGoogleImg + '.png');
+            background-size: 25px;
+            background-position: center;
+            background-repeat: no-repeat;
+            border-radius: 5px;
+        }
+
+        span.provider-name {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
 }
 
 
@@ -438,4 +465,4 @@ footer {
 
 .error {
     color: $nokColor;
-}
+}

internal/ui/login/static/resources/themes/scss/variables.scss

@@ -33,11 +33,15 @@ $inputBackgroundColor: #252525;
 $buttonBackgroundColorHover: $inputBackgroundColor;
 $profileImgDark: "../../../images/icon-user-dark";
 $otherUserImgDark: "../../../images/icon-newuser-dark";
+$idpGoogleImg: "../../../images/idp/google";
+$idpGoogleFontColor: #FFFFFF;
+$idpGoogleBackgroundColor: #4285F4;
 $nokColor: #F20D6B;
 $okColor: #0DF279;
 $errorColor: red;
 
 
+
 // ----- LIGHT-THEME --------
 $backgroundColorLight: #f5f5f5;
 $fontColorLight: $backgroundColor;
@@ -47,5 +51,8 @@ $inputBackgroundColorLight: #FFFFFF;
 $buttonBackgroundColorHoverLight: $inputBackgroundColorLight;
 $profileImgLight: "../../../images/icon-user-light";
 $otherUserImgLight: "../../../images/icon-newuser-light";
+$idpGoogleImgLight: "../../../images/idp/google";
+$idpGoogleFontColorLight: #8b8d8d;
+$idpGoogleBackgroundColorLight: #FFFFFF;
 $nokColorLight: #F20D6B;
 $okColorLight: #50CA3D;

internal/ui/login/static/resources/themes/zitadel/css/dark.css

@@ -162,7 +162,8 @@ button, .button {
   outline: none;
   display: inline-block;
   text-align: center;
-  line-height: 40px;
+  line-height: 44px;
+  padding: 1px 6px;
 }
 button:hover, .button:hover {
   background-color: #5b8fd3;
@@ -185,6 +186,29 @@ button:disabled:hover, .button:disabled:hover {
   background-color: #999999;
   border: 1px solid #999999;
 }
+button.google, .button.google {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 1px;
+  color: #FFFFFF;
+  background-color: #4285F4;
+}
+button.google span.logo, .button.google span.logo {
+  height: 46px;
+  width: 46px;
+  background-color: #FFFFFF;
+  background-image: url("../../../images/idp/google.png");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+}
+button.google span.provider-name, .button.google span.provider-name {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
 input:not([type=radio]), select {
   background-color: #252525;

internal/ui/login/static/resources/themes/zitadel/css/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCQc;EDPd,OCQQ;EDPR;EACA;EACA;EAEI;;;AAIR;EACI,OCFQ;EDGR,aC3BS;ED4BT;EACA,WCzBS;ED0BT;;;AAGJ;EACI,OCVQ;EDWR,aCnCS;EDoCT;EACA,WChCU;;;ADmCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC9CW;ED+CX;EACA;;AAEA;EACI,OClDY;;ADqDhB;EACI;;;AAIR;EACI,kBC9Dc;ED+Dd,OC7DW;ED8DX;EACA;EACA;EACA;EACA,QCxFU;EDyFV;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC1EY;ED2EZ,OC9EU;ED+EV;;AAGJ;EACI,kBCjFO;EDkFP,OCnFI;EDoFJ;;AACA;EACI,kBCpFQ;;ADwFhB;EACI,kBCvFW;EDwFX;;AAEA;EACI,kBC3FO;ED4FP;;;AAOZ;EACI,kBCnGmB;EDoGnB,OCzGQ;ED0GR,QC/HU;EDgIV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;EC9HN;;AACA;EDyHE;ICxHA;IACA;;;AD+HA;EClIF;;AACA;EDiIE;IChIA;IACA;;;;ADsIA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WC5JE;ED6JF;;AAGJ;EACI;EACA;EACA;EACA,OC/IC;;;ADqJT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OC3LA;;AD+LR;EACI,OC7LK;ED8LL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC1NI;ED2NJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBC7NW;;ADgOf;EACI;;AAIR;EACI;;AAKA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,cCtPO;EDuPP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OClRP;;ADyRL;EACI;;AAEJ;EACI;EACA;EACA;EACA;EC5SV;;AACA;EDuSM;ICtSJ;IACA;;;AD8SQ;EACI;EACA;ECnTd;;AACA;EDgTU;IC/SR;IACA;;;ADqTI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OC7TN;;ADkUE;EACI,OCpUL;;ADyUP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCpWI;;ADuWR;EACI,MCzWU;;;AD8Wd;EACI;EACA;;;AAIR;EAII;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OCpZO","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA,kBCQc;EDPd,OCQQ;EDPR;EACA;EACA;EAEI;;;AAIR;EACI,OCFQ;EDGR,aC3BS;ED4BT;EACA,WCzBS;ED0BT;;;AAGJ;EACI,OCVQ;EDWR,aCnCS;EDoCT;EACA,WChCU;;;ADmCd;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC9CW;ED+CX;EACA;;AAEA;EACI,OClDY;;ADqDhB;EACI;;;AAIR;EACI,kBC9Dc;ED+Dd,OC7DW;ED8DX;EACA;EACA;EACA;EACA,QCxFU;EDyFV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBC3EY;ED4EZ,OC/EU;EDgFV;;AAGJ;EACI,kBClFO;EDmFP,OCpFI;EDqFJ;;AACA;EACI,kBCrFQ;;ADyFhB;EACI,kBCxFW;EDyFX;;AAEA;EACI,kBC5FO;ED6FP;;AAIR;EACI;EACA;EACA;EACA;EACA,OChGa;EDiGb,kBChGmB;;ADkGnB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAOZ;EACI,kBC9HmB;ED+HnB,OCpIQ;EDqIR,QC1JU;ED2JV;EACA;EACA;;;AAIA;EACI;EACA;EACA;EACA;ECzJN;;AACA;EDoJE;ICnJA;IACA;;;AD0JA;EC7JF;;AACA;ED4JE;IC3JA;IACA;;;;ADiKA;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI,WCvLE;EDwLF;;AAGJ;EACI;EACA;EACA;EACA,OC1KC;;;ADgLT;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCtNA;;AD0NR;EACI,OCxNK;EDyNL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCrPI;EDsPJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBCxPW;;AD2Pf;EACI;;AAIR;EACI;;AAKA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA,cCjRO;EDkRP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OC7SP;;ADoTL;EACI;;AAEJ;EACI;EACA;EACA;EACA;ECvUV;;AACA;EDkUM;ICjUJ;IACA;;;ADyUQ;EACI;EACA;EC9Ud;;AACA;ED2UU;IC1UR;IACA;;;ADgVI;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OCrVN;;AD0VE;EACI,OC5VL;;ADiWP;EACI;;AACA;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC/XI;;ADkYR;EACI,MCpYU;;;ADyYd;EACI;EACA;;;AAIR;EAII;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI,OC5aO","file":"dark.css"}

internal/ui/login/static/resources/themes/zitadel/css/light.css

@@ -162,7 +162,8 @@ button, .button {
   outline: none;
   display: inline-block;
   text-align: center;
-  line-height: 40px;
+  line-height: 44px;
+  padding: 1px 6px;
 }
 button:hover, .button:hover {
   background-color: #5b8fd3;
@@ -185,6 +186,29 @@ button:disabled:hover, .button:disabled:hover {
   background-color: #999999;
   border: 1px solid #999999;
 }
+button.google, .button.google {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 1px;
+  color: #FFFFFF;
+  background-color: #4285F4;
+}
+button.google span.logo, .button.google span.logo {
+  height: 46px;
+  width: 46px;
+  background-color: #FFFFFF;
+  background-image: url("../../../images/idp/google.png");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+}
+button.google span.provider-name, .button.google span.provider-name {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -547,6 +571,13 @@ html button.other-user:hover .other-user-image, html .button.other-user:hover .o
     background-size: 80px 60px;
   }
 }
+html button.google, html .button.google {
+  color: #8b8d8d;
+  background-color: #FFFFFF;
+}
+html button.google span.logo, html .button.google span.logo {
+  background-image: url("../../../images/idp/google.png");
+}
 html input:not([type=radio]), html select {
   background-color: #FFFFFF;
   color: #282828;

internal/ui/login/static/resources/themes/zitadel/css/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"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","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"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D0Ba;ECzBb;EACA,ODyBgB;;ACtBpB;EACI,kBDDG;ECEH,ODoBgB;ECnBhB;EACA;;AACA;EACI,kBDLI;;ACSZ;EACI,kBDRO;ECSP;;AAEA;EACI,kBDZG;ECaH;;AAIR;EACI,ODvBM;;ACyBN;EACI;EACA,kBDHY;;ACQhB;EDxCV;;AACA;ECuCU;IDtCR;IACA;;;ACyCQ;EACI,kBDbY;;ACeZ;ED/Cd;;AACA;EC8Cc;ID7CZ;IACA;;;ACmDQ;EDtDV;;AACA;ECqDU;IDpDR;IACA;;;ACwDY;ED3Dd;;AACA;EC0Dc;IDzDZ;IACA;;;AC8DI;EACI,OD7Bc;EC8Bd,kBD7BoB;;AC+BpB;EACI;;AAKZ;EACI,kBD5CoB;EC6CpB,ODrEU;;ACyEV;EACI,MD1EM;;AC6EV;EACI,MD1DW;;ACsEnB;EACI,OD3FU;;AC+Fb;EACI,ODhEM;;ACoEN;EACI,ODtEG;;;AC8EZ;EDrHF;;AACA;ECoHE;IDnHA;IACA;;;ACsHA;EDzHF;;AACA;ECwHE;IDvHA;IACA;;;;AC2HJ;EACI;;;AAGJ;EACI,OD5FY","file":"light.css"}

internal/ui/login/static/templates/login.html

@@ -42,8 +42,9 @@
 
             {{ $reqid := .AuthReqID}}
             {{range $provider := .IDPProviders}}
-                <a href="{{ externalIDPAuthURL $reqid $provider.IDPConfigID}}" class="button secondary idp-providers">
+                <a href="{{ externalIDPAuthURL $reqid $provider.IDPConfigID}}" class="button secondary idp-provider {{idpProviderClass $provider.StylingType}}">
-                    {{$provider.Name}}
+                    <span class="logo"></span>
+                    <span class="provider-name">{{$provider.Name}}</span>
                 </a>
             {{end}}
         </div>

internal/ui/login/static/templates/register_option.html

@@ -19,8 +19,9 @@
         {{if .LoginPolicy.AllowExternalIDP}}
             {{ $reqid := .AuthReqID}}
             {{range $provider := .IDPProviders}}
-                <a href="{{ externalIDPRegisterURL $reqid $provider.IDPConfigID}}" class="button secondary idp-providers">
+                <a href="{{ externalIDPRegisterURL $reqid $provider.IDPConfigID}}" class="button secondary idp-provider {{idpProviderClass $provider.StylingType}}">
-                    {{$provider.Name}}
+                    <span class="logo"></span>
+                    <span class="provider-name">{{$provider.Name}}</span>
                 </a>
             {{end}}
         {{end}}

internal/usergrant/repository/view/model/user_grant.go

@@ -66,6 +66,7 @@ func UserGrantToModel(grant *UserGrantView) *model.UserGrantView {
 		OrgPrimaryDomain: grant.OrgPrimaryDomain,
 		RoleKeys:         grant.RoleKeys,
 		Sequence:         grant.Sequence,
+		GrantID:          grant.GrantID,
 	}
 }
 

migrations/cockroach/V1.19__idp_configs.sql

@@ -0,0 +1,12 @@
+ALTER TABLE management.idp_configs DROP COLUMN logo_src;
+ALTER TABLE adminapi.idp_configs DROP COLUMN logo_src;
+ALTER TABLE auth.idp_configs DROP COLUMN logo_src;
+
+ALTER TABLE management.idp_configs ADD COLUMN styling_type SMALLINT;
+ALTER TABLE adminapi.idp_configs ADD COLUMN styling_type SMALLINT;
+ALTER TABLE auth.idp_configs ADD COLUMN styling_type SMALLINT;
+
+ALTER TABLE management.idp_providers ADD COLUMN styling_type SMALLINT;
+ALTER TABLE adminapi.idp_providers ADD COLUMN styling_type SMALLINT;
+ALTER TABLE auth.idp_providers ADD COLUMN styling_type SMALLINT;
+

pkg/grpc/admin/admin.pb.validate.go

@@ -3342,7 +3342,7 @@ func (m *Idp) Validate() error {
 
 	// no validation rules for Name
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	// no validation rules for Sequence
 
@@ -3435,7 +3435,7 @@ func (m *IdpUpdate) Validate() error {
 
 	// no validation rules for Name
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	return nil
 }
@@ -3580,7 +3580,7 @@ func (m *OidcIdpConfigCreate) Validate() error {
 		}
 	}
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	if l := utf8.RuneCountInString(m.GetClientId()); l < 1 || l > 200 {
 		return OidcIdpConfigCreateValidationError{
@@ -3893,7 +3893,7 @@ func (m *IdpView) Validate() error {
 
 	// no validation rules for Name
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	// no validation rules for Sequence
 

pkg/grpc/admin/admin.swagger.json

@@ -1948,9 +1948,8 @@
         "name": {
           "type": "string"
         },
-        "logo_src": {
+        "styling_type": {
-          "type": "string",
+          "$ref": "#/definitions/v1IdpStylingType"
-          "format": "byte"
         },
         "oidc_config": {
           "$ref": "#/definitions/v1OidcIdpConfig"
@@ -2117,6 +2116,14 @@
       ],
       "default": "IDPCONFIGSTATE_UNSPECIFIED"
     },
+    "v1IdpStylingType": {
+      "type": "string",
+      "enum": [
+        "IDPSTYLINGTYPE_UNSPECIFIED",
+        "IDPSTYLINGTYPE_GOOGLE"
+      ],
+      "default": "IDPSTYLINGTYPE_UNSPECIFIED"
+    },
     "v1IdpType": {
       "type": "string",
       "enum": [
@@ -2135,9 +2142,8 @@
         "name": {
           "type": "string"
         },
-        "logo_src": {
+        "styling_type": {
-          "type": "string",
+          "$ref": "#/definitions/v1IdpStylingType"
-          "format": "byte"
         }
       }
     },
@@ -2161,9 +2167,8 @@
         "name": {
           "type": "string"
         },
-        "logo_src": {
+        "styling_type": {
-          "type": "string",
+          "$ref": "#/definitions/v1IdpStylingType"
-          "format": "byte"
         },
         "oidc_config": {
           "$ref": "#/definitions/v1OidcIdpConfigView"
@@ -2257,9 +2262,8 @@
         "name": {
           "type": "string"
         },
-        "logo_src": {
+        "styling_type": {
-          "type": "string",
+          "$ref": "#/definitions/v1IdpStylingType"
-          "format": "byte"
         },
         "client_id": {
           "type": "string"

pkg/grpc/admin/proto/admin.proto

@@ -797,7 +797,7 @@ message Idp {
     google.protobuf.Timestamp creation_date = 3;
     google.protobuf.Timestamp change_date = 4;
     string name = 5;
-    bytes logo_src = 6;
+    IdpStylingType styling_type = 6;
     oneof idp_config {
         OidcIdpConfig oidc_config = 7;
     }
@@ -807,7 +807,7 @@ message Idp {
 message IdpUpdate {
     string id = 1 [(validate.rules).string = {min_len: 1}];
     string name = 2;
-    bytes logo_src = 3;
+    IdpStylingType styling_type = 3;
 }
 
 message OidcIdpConfig {
@@ -817,6 +817,11 @@ message OidcIdpConfig {
     repeated string scopes = 4;
 }
 
+enum IdpStylingType {
+    IDPSTYLINGTYPE_UNSPECIFIED = 0;
+    IDPSTYLINGTYPE_GOOGLE = 1;
+}
+
 enum IdpState {
     IDPCONFIGSTATE_UNSPECIFIED = 0;
     IDPCONFIGSTATE_ACTIVE = 1;
@@ -831,7 +836,7 @@ enum OIDCMappingField {
 
 message OidcIdpConfigCreate {
     string name = 1 [(validate.rules).string = {min_len: 1, max_len: 200}];
-    bytes logo_src = 2;
+    IdpStylingType styling_type = 2;
     string client_id = 3 [(validate.rules).string = {min_len: 1, max_len: 200}];
     string client_secret = 4 [(validate.rules).string = {min_len: 1, max_len: 200}];
     string issuer = 5 [(validate.rules).string = {min_len: 1, max_len: 200}];
@@ -865,7 +870,7 @@ message IdpView {
     google.protobuf.Timestamp creation_date = 3;
     google.protobuf.Timestamp change_date = 4;
     string name = 5;
-    bytes logo_src = 6;
+    IdpStylingType styling_type = 6;
     oneof idp_config_view {
         OidcIdpConfigView oidc_config = 7;
     }

pkg/grpc/management/management.pb.validate.go

@@ -12471,7 +12471,7 @@ func (m *Idp) Validate() error {
 
 	// no validation rules for Name
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	// no validation rules for Sequence
 
@@ -12569,7 +12569,7 @@ func (m *IdpUpdate) Validate() error {
 		}
 	}
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	return nil
 }
@@ -12718,7 +12718,7 @@ func (m *OidcIdpConfigCreate) Validate() error {
 		}
 	}
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	if l := utf8.RuneCountInString(m.GetClientId()); l < 1 || l > 200 {
 		return OidcIdpConfigCreateValidationError{
@@ -13031,7 +13031,7 @@ func (m *IdpView) Validate() error {
 
 	// no validation rules for Name
 
-	// no validation rules for LogoSrc
+	// no validation rules for StylingType
 
 	// no validation rules for ProviderType
 

pkg/grpc/management/proto/management.proto

@@ -2856,7 +2856,7 @@ message Idp {
     google.protobuf.Timestamp creation_date = 3;
     google.protobuf.Timestamp change_date = 4;
     string name = 5;
-    bytes logo_src = 6;
+    IdpStylingType styling_type = 6;
     oneof idp_config {
         OidcIdpConfig oidc_config = 7;
     }
@@ -2866,7 +2866,7 @@ message Idp {
 message IdpUpdate {
     string id = 1 [(validate.rules).string = {min_len: 1}];
     string name = 2 [(validate.rules).string = {min_len: 1, max_len: 200}];
-    bytes logo_src = 3;
+    IdpStylingType styling_type = 3;
 }
 
 message OidcIdpConfig {
@@ -2878,6 +2878,11 @@ message OidcIdpConfig {
     OIDCMappingField username_mapping = 6;
 }
 
+enum IdpStylingType {
+  IDPSTYLINGTYPE_UNSPECIFIED = 0;
+  IDPSTYLINGTYPE_GOOGLE = 1;
+}
+
 enum IdpState {
     IDPCONFIGSTATE_UNSPECIFIED = 0;
     IDPCONFIGSTATE_ACTIVE = 1;
@@ -2892,7 +2897,7 @@ enum OIDCMappingField {
 
 message OidcIdpConfigCreate {
     string name = 1 [(validate.rules).string = {min_len: 1, max_len: 200}];
-    bytes logo_src = 2;
+    IdpStylingType styling_type = 2;
     string client_id = 3 [(validate.rules).string = {min_len: 1, max_len: 200}];
     string client_secret = 4 [(validate.rules).string = {min_len: 1, max_len: 200}];
     string issuer = 5 [(validate.rules).string = {min_len: 1, max_len: 200}];
@@ -2926,7 +2931,7 @@ message IdpView {
     google.protobuf.Timestamp creation_date = 3;
     google.protobuf.Timestamp change_date = 4;
     string name = 5;
-    bytes logo_src = 6;
+    IdpStylingType styling_type = 6;
     IdpProviderType provider_type = 7;
     oneof idp_config_view {
         OidcIdpConfigView oidc_config = 8;