TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-15 12:27:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into next

Browse Source
This commit is contained in:
Livio Spring 2023-10-31 07:35:25 +01:00
commit 233b90f004
No known key found for this signature in database
GPG Key ID: 26BB1C2FA5952CF0
690 changed files with 10676 additions and 5424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/console.yml vendored
View File

@ -30,6 +30,7 @@ jobs:
- -
uses: actions/cache/restore@v3 uses: actions/cache/restore@v3
timeout-minutes: 1 timeout-minutes: 1
continue-on-error: true
id: cache id: cache
with: with:
key: console-${{ hashFiles('console', 'proto', '!console/dist') }} key: console-${{ hashFiles('console', 'proto', '!console/dist') }}

1
.github/workflows/core-integration-test.yml vendored
View File

@ -56,6 +56,7 @@ jobs:
uses: actions/cache/restore@v3 uses: actions/cache/restore@v3
id: cache id: cache
timeout-minutes: 1 timeout-minutes: 1
continue-on-error: true
name: restore previous results name: restore previous results
with: with:
key: integration-test-postgres-${{ inputs.core_cache_key }} key: integration-test-postgres-${{ inputs.core_cache_key }}

1
.github/workflows/core-unit-test.yml vendored
View File

@ -40,6 +40,7 @@ jobs:
uses: actions/cache/restore@v3 uses: actions/cache/restore@v3
id: cache id: cache
timeout-minutes: 1 timeout-minutes: 1
continue-on-error: true
name: restore previous results name: restore previous results
with: with:
key: unit-test-${{ inputs.core_cache_key }} key: unit-test-${{ inputs.core_cache_key }}

1
.github/workflows/core.yml vendored
View File

@ -41,6 +41,7 @@ jobs:
- -
uses: actions/cache/restore@v3 uses: actions/cache/restore@v3
timeout-minutes: 1 timeout-minutes: 1
continue-on-error: true
id: cache id: cache
with: with:
key: core-${{ hashFiles( 'go.*', 'openapi', 'cmd', 'pkg/grpc/**/*.go', 'proto', 'internal') }} key: core-${{ hashFiles( 'go.*', 'openapi', 'cmd', 'pkg/grpc/**/*.go', 'proto', 'internal') }}

2
Makefile
View File

@ -83,7 +83,7 @@ console_build: console_dependencies console_client
.PHONY: clean .PHONY: clean
clean: clean:
$(RM) .artifacts/grpc $(RM) -r .artifacts/grpc
$(RM) $(gen_authopt_path) $(RM) $(gen_authopt_path)
$(RM) $(gen_zitadel_path) $(RM) $(gen_zitadel_path)

43
README.md
View File

@ -30,16 +30,37 @@
<img src="./docs/static/logos/oidc-cert.png" /></a> <img src="./docs/static/logos/oidc-cert.png" /></a>
</p> </p>
Do you look for a user management that's quickly set up like Auth0 and open source like Keycloak?
Are you searching for a user management tool that is quickly set up like Auth0 and open source like Keycloak?
Do you have a project that requires multi-tenant user management with self-service for your customers? Do you have a project that requires multi-tenant user management with self-service for your customers?
Look no further — ZITADEL is the identity infrastructure, simplified for you. Look no further — ZITADEL is the identity infrastructure, simplified for you.
We provide you with a wide range of out-of-the-box features to accelerate your project. We provide you with a wide range of out-of-the-box features to accelerate your project, including:
Multi-tenancy with branding customization, secure login, self-service, OpenID Connect, OAuth2.x, SAML2, LDAP, Passkeys / FIDO2, OTP, U2F, and an unlimited audit trail is there for you, ready to use.
With ZITADEL you can rely on a hardened and extensible turnkey solution to solve all of your authentication and authorization needs. :white_check_mark: Multi-tenancy with branding customization
:white_check_mark: Secure login
:white_check_mark: Self-service
:white_check_mark: OpenID Connect
:white_check_mark: OAuth2.x
:white_check_mark: SAML2
:white_check_mark: LDAP
:white_check_mark: Passkeys / FIDO2
:white_check_mark: OTP
:white_check_mark: U2F, and an unlimited audit trail is there for you, ready to use.
With ZITADEL, you are assured of a robust and customizable turnkey solution for all your authentication and authorization needs.
--- ---
@ -51,7 +72,7 @@ With ZITADEL you can rely on a hardened and extensible turnkey solution to solve
### Deploy ZITADEL (Self-Hosted) ### Deploy ZITADEL (Self-Hosted)
Deploying ZITADEL locally takes less than 3 minutes. So go ahead and give it a try! Deploying ZITADEL locally takes less than 3 minutes. Go ahead and give it a try!
* [Linux](https://zitadel.com/docs/self-hosting/deploy/linux) * [Linux](https://zitadel.com/docs/self-hosting/deploy/linux)
* [MacOS](https://zitadel.com/docs/self-hosting/deploy/macos) * [MacOS](https://zitadel.com/docs/self-hosting/deploy/macos)
@ -67,7 +88,7 @@ See all guides [here](https://zitadel.com/docs/self-hosting/deploy/overview)
If you want to experience a hands-free ZITADEL, you should use [ZITADEL Cloud](https://zitadel.cloud). If you want to experience a hands-free ZITADEL, you should use [ZITADEL Cloud](https://zitadel.cloud).
ZITADEL Cloud comes with a free tier and provides you all the features that you find in the open source version. ZITADEL Cloud comes with a free tier, providing you with all the same features as the open-source version.
Learn more about the [pay-as-you-go pricing](https://zitadel.com/pricing). Learn more about the [pay-as-you-go pricing](https://zitadel.com/pricing).
### Example applications ### Example applications
@ -122,14 +143,14 @@ Self-Service
- [Administration UI (Console)](https://zitadel.com/docs/guides/manage/console/overview) - [Administration UI (Console)](https://zitadel.com/docs/guides/manage/console/overview)
Deployment Deployment
- [Postgres](https://zitadel.com/docs/self-hosting/manage/database#postgres) (version >= 14) or [CockroachDB](https://zitadel.com/docs/self-hosting/manage/database#cockroach) (version >= 22.0) - [Postgres](https://zitadel.com/docs/self-hosting/manage/database#postgres) (version >= 14) or [CockroachDB](https://zitadel.com/docs/self-hosting/manage/database#cockroach) (version latest stable)
- [Zero Downtime Updates](https://zitadel.com/docs/concepts/architecture/solution#zero-downtime-updates) - [Zero Downtime Updates](https://zitadel.com/docs/concepts/architecture/solution#zero-downtime-updates)
Track upcoming features on our [roadmap](https://zitadel.com/roadmap). Track upcoming features on our [roadmap](https://zitadel.com/roadmap).
## How To Contribute ## How To Contribute
Details about how to contribute you can find in the [Contribution Guide](./CONTRIBUTING.md) Find details about how you can contribute in our [Contribution Guide](./CONTRIBUTING.md)
## Contributors ## Contributors
@ -161,13 +182,13 @@ Use [Console](https://zitadel.com/docs/guides/manage/console/overview) or our [A
## Security ## Security
See the policy [here](./SECURITY.md). You can find our security policy [here](./SECURITY.md).
[Technical Advisories](https://zitadel.com/docs/support/technical_advisory) are published regarding major issues with the ZITADEL platform that could potentially impact security or stability in production environments. [Technical Advisories](https://zitadel.com/docs/support/technical_advisory) are published regarding major issues with the ZITADEL platform that could potentially impact security or stability in production environments.
## License ## License
See the exact licensing terms [here](./LICENSE) [here](./LICENSE) are our exact licensing terms.
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License. See our [license](./LICENSE) for detailed information governing permissions and limitations on use.

4
build/workflow.Dockerfile
View File

@ -103,7 +103,7 @@ COPY --from=core-assets /go/src/github.com/zitadel/zitadel/internal ./internal
# ####################################### # #######################################
# download console dependencies # download console dependencies
# ####################################### # #######################################
FROM node:18-buster AS console-deps FROM node:20-buster AS console-deps
WORKDIR /zitadel/console WORKDIR /zitadel/console
@ -115,7 +115,7 @@ RUN yarn install --frozen-lockfile
# ####################################### # #######################################
# generate console client # generate console client
# ####################################### # #######################################
FROM node:18-buster AS console-client FROM node:20-buster AS console-client
WORKDIR /zitadel/console WORKDIR /zitadel/console

63
cmd/defaults.yaml
View File

@ -201,6 +201,9 @@ Projections:
Customizations: Customizations:
Projects: Projects:
TransactionDuration: 2s TransactionDuration: 2s
custom_texts:
TransactionDuration: 2s
BulkLimit: 400
# The Notifications projection is used for sending emails and SMS to users # The Notifications projection is used for sending emails and SMS to users
Notifications: Notifications:
# As notification projections don't result in database statements, retries don't have an effect # As notification projections don't result in database statements, retries don't have an effect
@ -389,11 +392,27 @@ EncryptionKeys:
UserAgentCookieKeyID: "userAgentCookieKey" # ZITADEL_ENCRYPTIONKEYS_USERAGENTCOOKIEKEYID UserAgentCookieKeyID: "userAgentCookieKey" # ZITADEL_ENCRYPTIONKEYS_USERAGENTCOOKIEKEYID
SystemAPIUsers: SystemAPIUsers:
# Add keys for authentication of the systemAPI here: # # Add keys for authentication of the systemAPI here:
# you can specify any name for the user, but they will have to match the `issuer` and `sub` claim in the JWT: # # you can specify any name for the user, but they will have to match the `issuer` and `sub` claim in the JWT:
# - superuser: # - superuser:
# Path: /path/to/superuser/key.pem # you can provide the key either by reference with the path # Path: /path/to/superuser/ey.pem # you can provide the key either by reference with the path
# Memberships:
# # MemberType System allows the user to access all APIs for all instances or organizations
# - MemberType: System
# Roles:
# - "SYSTEM_OWNER"
# # Actually, we don't recommend adding IAM_OWNER and ORG_OWNER to the System membership, as this basically enables god mode for the system user
# - "IAM_OWNER"
# - "ORG_OWNER"
# # MemberType IAM and Organization let you restrict access to a specific instance or organization by specifying the AggregateID
# - MemberType: IAM
# Roles: "IAM_OWNER"
# AggregateID: "123456789012345678"
# - MemberType: Organization
# Roles: "ORG_OWNER"
# AggregateID: "123456789012345678"
# - superuser2: # - superuser2:
# # If no memberships are specified, the user has a membership of type System with the role "SYSTEM_OWNER"
# KeyData: <base64 encoded key> # or you can directly embed it as base64 encoded value # KeyData: <base64 encoded key> # or you can directly embed it as base64 encoded value
#TODO: remove as soon as possible #TODO: remove as soon as possible
@ -767,7 +786,7 @@ DefaultInstance:
PreHeader: Verify email PreHeader: Verify email
Subject: Verify email Subject: Verify email
Greeting: Hello {{.DisplayName}}, Greeting: Hello {{.DisplayName}},
Text: A new email has been added. Please use the button below to verify your mail. (Code {{.Code}}) If you din't add a new email, please ignore this email. Text: A new email has been added. Please use the button below to verify your email. (Code {{.Code}}) If you din't add a new email, please ignore this email.
ButtonText: Verify email ButtonText: Verify email
- MessageTextType: VerifyPhone - MessageTextType: VerifyPhone
Language: en Language: en
@ -795,7 +814,11 @@ DefaultInstance:
ButtonText: Login ButtonText: Login
Features: Features:
- FeatureLoginDefaultOrg: true - FeatureLoginDefaultOrg: true
Limits:
# AuditLogRetention limits the number of events that can be queried via the events API by their age.
# A value of "0s" means that all events are available.
# If this value is set, it overwrites the system default unless it is not reset via the admin API.
AuditLogRetention: # ZITADEL_DEFAULTINSTANCE_LIMITS_AUDITLOGRETENTION
Quotas: Quotas:
# Items take a slice of quota configurations, whereas, for each unit type and instance, one or zero quotas may exist. # Items take a slice of quota configurations, whereas, for each unit type and instance, one or zero quotas may exist.
# The following unit types are supported # The following unit types are supported
@ -830,10 +853,36 @@ DefaultInstance:
# # CallURL is called when a relative amount of the quota is used. # # CallURL is called when a relative amount of the quota is used.
# CallURL: "https://httpbin.org/post" # CallURL: "https://httpbin.org/post"
AuditLogRetention: 0s # AuditLogRetention limits the number of events that can be queried via the events API by their age.
# A value of "0s" means that all events are available.
# If an audit log retention is set using an instance limit, it will overwrite the system default.
AuditLogRetention: 0s # ZITADEL_AUDITLOGRETENTION
InternalAuthZ: InternalAuthZ:
RolePermissionMappings: RolePermissionMappings:
- Role: "SYSTEM_OWNER"
Permissions:
- "system.instance.read"
- "system.instance.write"
- "system.instance.delete"
- "system.domain.read"
- "system.domain.write"
- "system.domain.delete"
- "system.debug.read"
- "system.debug.write"
- "system.debug.delete"
- "system.feature.write"
- "system.limits.write"
- "system.limits.delete"
- "system.quota.write"
- "system.quota.delete"
- "system.iam.member.read"
- Role: "SYSTEM_OWNER_VIEWER"
Permissions:
- "system.instance.read"
- "system.domain.read"
- "system.debug.read"
- "system.iam.member.read"
- Role: "IAM_OWNER" - Role: "IAM_OWNER"
Permissions: Permissions:
- "iam.read" - "iam.read"
@ -904,6 +953,7 @@ InternalAuthZ:
- "project.grant.member.write" - "project.grant.member.write"
- "project.grant.member.delete" - "project.grant.member.delete"
- "events.read" - "events.read"
- "milestones.read"
- Role: "IAM_OWNER_VIEWER" - Role: "IAM_OWNER_VIEWER"
Permissions: Permissions:
- "iam.read" - "iam.read"
@ -929,6 +979,7 @@ InternalAuthZ:
- "project.grant.read" - "project.grant.read"
- "project.grant.member.read" - "project.grant.member.read"
- "events.read" - "events.read"
- "milestones.read"
- Role: "IAM_ORG_MANAGER" - Role: "IAM_ORG_MANAGER"
Permissions: Permissions:
- "org.read" - "org.read"

5
cmd/ready/config.go
View File

@ -7,7 +7,9 @@ import (
"github.com/spf13/viper" "github.com/spf13/viper"
"github.com/zitadel/logging" "github.com/zitadel/logging"
internal_authz "github.com/zitadel/zitadel/internal/api/authz"
"github.com/zitadel/zitadel/internal/config/hook" "github.com/zitadel/zitadel/internal/config/hook"
"github.com/zitadel/zitadel/internal/domain"
) )
type Config struct { type Config struct {
@ -23,7 +25,8 @@ func MustNewConfig(v *viper.Viper) *Config {
mapstructure.StringToTimeDurationHookFunc(), mapstructure.StringToTimeDurationHookFunc(),
mapstructure.StringToTimeHookFunc(time.RFC3339), mapstructure.StringToTimeHookFunc(time.RFC3339),
mapstructure.StringToSliceHookFunc(","), mapstructure.StringToSliceHookFunc(","),
hook.StringToFeatureHookFunc(), hook.EnumHookFunc(domain.FeatureString),
hook.EnumHookFunc(internal_authz.MemberTypeString),
)), )),
) )
logging.OnError(err).Fatal("unable to read default config") logging.OnError(err).Fatal("unable to read default config")

5
cmd/ready/ready.go
View File

@ -32,6 +32,9 @@ func ready(config *Config) bool {
return false return false
} }
defer res.Body.Close() defer res.Body.Close()
if res.StatusCode != 200 {
logging.WithFields("status", res.StatusCode).Warn("ready check failed") logging.WithFields("status", res.StatusCode).Warn("ready check failed")
return res.StatusCode == 200 return false
}
return true
} }

6
cmd/setup/config.go
View File

@ -15,6 +15,7 @@ import (
"github.com/zitadel/zitadel/internal/config/systemdefaults" "github.com/zitadel/zitadel/internal/config/systemdefaults"
"github.com/zitadel/zitadel/internal/crypto" "github.com/zitadel/zitadel/internal/crypto"
"github.com/zitadel/zitadel/internal/database" "github.com/zitadel/zitadel/internal/database"
"github.com/zitadel/zitadel/internal/domain"
"github.com/zitadel/zitadel/internal/eventstore" "github.com/zitadel/zitadel/internal/eventstore"
"github.com/zitadel/zitadel/internal/id" "github.com/zitadel/zitadel/internal/id"
"github.com/zitadel/zitadel/internal/query/projection" "github.com/zitadel/zitadel/internal/query/projection"
@ -45,7 +46,8 @@ func MustNewConfig(v *viper.Viper) *Config {
mapstructure.StringToTimeHookFunc(time.RFC3339), mapstructure.StringToTimeHookFunc(time.RFC3339),
mapstructure.StringToSliceHookFunc(","), mapstructure.StringToSliceHookFunc(","),
database.DecodeHook, database.DecodeHook,
hook.StringToFeatureHookFunc(), hook.EnumHookFunc(domain.FeatureString),
hook.EnumHookFunc(authz.MemberTypeString),
)), )),
) )
logging.OnError(err).Fatal("unable to read default config") logging.OnError(err).Fatal("unable to read default config")
@ -101,7 +103,7 @@ func MustNewSteps(v *viper.Viper) *Steps {
mapstructure.StringToTimeDurationHookFunc(), mapstructure.StringToTimeDurationHookFunc(),
mapstructure.StringToTimeHookFunc(time.RFC3339), mapstructure.StringToTimeHookFunc(time.RFC3339),
mapstructure.StringToSliceHookFunc(","), mapstructure.StringToSliceHookFunc(","),
hook.StringToFeatureHookFunc(), hook.EnumHookFunc(domain.FeatureString),
)), )),
) )
logging.OnError(err).Fatal("unable to read steps") logging.OnError(err).Fatal("unable to read steps")

4
cmd/setup/steps.yaml
View File

@ -35,8 +35,8 @@ FirstInstance:
# If FirstInstance.Org.Machine.Machine is defined, a service user is created with the IAM_OWNER role, not a human user. # If FirstInstance.Org.Machine.Machine is defined, a service user is created with the IAM_OWNER role, not a human user.
Machine: Machine:
Machine: Machine:
Username: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_USERNAME Username: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINE_USERNAME
Name: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_NAME Name: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINE_NAME
MachineKey: MachineKey:
# date format: 2023-01-01T00:00:00Z # date format: 2023-01-01T00:00:00Z
ExpirationDate: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINEKEY_EXPIRATIONDATE ExpirationDate: # ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINEKEY_EXPIRATIONDATE

4
cmd/start/config.go
View File

@ -24,6 +24,7 @@ import (
"github.com/zitadel/zitadel/internal/config/systemdefaults" "github.com/zitadel/zitadel/internal/config/systemdefaults"
"github.com/zitadel/zitadel/internal/crypto" "github.com/zitadel/zitadel/internal/crypto"
"github.com/zitadel/zitadel/internal/database" "github.com/zitadel/zitadel/internal/database"
"github.com/zitadel/zitadel/internal/domain"
"github.com/zitadel/zitadel/internal/eventstore" "github.com/zitadel/zitadel/internal/eventstore"
"github.com/zitadel/zitadel/internal/id" "github.com/zitadel/zitadel/internal/id"
"github.com/zitadel/zitadel/internal/logstore" "github.com/zitadel/zitadel/internal/logstore"
@ -92,7 +93,8 @@ func MustNewConfig(v *viper.Viper) *Config {
database.DecodeHook, database.DecodeHook,
actions.HTTPConfigDecodeHook, actions.HTTPConfigDecodeHook,
systemAPIUsersDecodeHook, systemAPIUsersDecodeHook,
hook.StringToFeatureHookFunc(), hook.EnumHookFunc(domain.FeatureString),
hook.EnumHookFunc(internal_authz.MemberTypeString),
)), )),
) )
logging.OnError(err).Fatal("unable to read config") logging.OnError(err).Fatal("unable to read config")

84
cmd/start/config_test.go Normal file
View File

@ -0,0 +1,84 @@
package start
import (
"reflect"
"strings"
"testing"
"github.com/spf13/viper"
"github.com/stretchr/testify/require"
"github.com/zitadel/logging"
"github.com/zitadel/zitadel/internal/actions"
"github.com/zitadel/zitadel/internal/api/authz"
"github.com/zitadel/zitadel/internal/command"
"github.com/zitadel/zitadel/internal/domain"
)
func TestMustNewConfig(t *testing.T) {
type args struct {
yaml string
}
tests := []struct {
name string
args args
want *Config
}{{
name: "features ok",
args: args{yaml: `
DefaultInstance:
Features:
- FeatureLoginDefaultOrg: true
`},
want: &Config{
DefaultInstance: command.InstanceSetup{
Features: map[domain.Feature]any{
domain.FeatureLoginDefaultOrg: true,
},
},
},
}, {
name: "membership types ok",
args: args{yaml: `
SystemAPIUsers:
- superuser:
Memberships:
- MemberType: System
- MemberType: Organization
- MemberType: IAM
`},
want: &Config{
SystemAPIUsers: map[string]*authz.SystemAPIUser{
"superuser": {
Memberships: authz.Memberships{{
MemberType: authz.MemberTypeSystem,
}, {
MemberType: authz.MemberTypeOrganization,
}, {
MemberType: authz.MemberTypeIAM,
}},
},
},
},
}}
for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) {
v := viper.New()
v.SetConfigType("yaml")
err := v.ReadConfig(strings.NewReader(`Log:
Level: info
Actions:
HTTP:
DenyList: []
` + tt.args.yaml))
require.NoError(t, err)
tt.want.Log = &logging.Config{Level: "info"}
tt.want.Actions = &actions.Config{HTTP: actions.HTTPConfig{DenyList: []actions.AddressChecker{}}}
require.NoError(t, tt.want.Log.SetLogger())
got := MustNewConfig(v)
if !reflect.DeepEqual(got, tt.want) {
t.Errorf("MustNewConfig() = %v, want %v", got, tt.want)
}
})
}
}

29
cmd/start/start.go
View File

@ -19,7 +19,7 @@ import (
"github.com/spf13/cobra" "github.com/spf13/cobra"
"github.com/spf13/viper" "github.com/spf13/viper"
"github.com/zitadel/logging" "github.com/zitadel/logging"
"github.com/zitadel/oidc/v2/pkg/op" "github.com/zitadel/oidc/v3/pkg/op"
"github.com/zitadel/saml/pkg/provider" "github.com/zitadel/saml/pkg/provider"
"golang.org/x/net/http2" "golang.org/x/net/http2"
"golang.org/x/net/http2/h2c" "golang.org/x/net/http2/h2c"
@ -164,6 +164,7 @@ func startZitadel(config *Config, masterKey string, server chan<- *Server) error
return internal_authz.CheckPermission(ctx, &authz_es.UserMembershipRepo{Queries: q}, config.InternalAuthZ.RolePermissionMappings, permission, orgID, resourceID) return internal_authz.CheckPermission(ctx, &authz_es.UserMembershipRepo{Queries: q}, config.InternalAuthZ.RolePermissionMappings, permission, orgID, resourceID)
} }
}, },
config.AuditLogRetention,
config.SystemAPIUsers, config.SystemAPIUsers,
) )
if err != nil { if err != nil {
@ -315,9 +316,17 @@ func startAPIs(
authZRepo, authZRepo,
queries, queries,
} }
oidcPrefixes := []string{"/.well-known/openid-configuration", "/oidc/v1", "/oauth/v2"}
// always set the origin in the context if available in the http headers, no matter for what protocol // always set the origin in the context if available in the http headers, no matter for what protocol
router.Use(middleware.OriginHandler) router.Use(middleware.OriginHandler)
verifier := internal_authz.Start(repo, http_util.BuildHTTP(config.ExternalDomain, config.ExternalPort, config.ExternalSecure), config.SystemAPIUsers) // adds used HTTPPathPattern and RequestMethod to context
router.Use(middleware.ActivityHandler)
systemTokenVerifier, err := internal_authz.StartSystemTokenVerifierFromConfig(http_util.BuildHTTP(config.ExternalDomain, config.ExternalPort, config.ExternalSecure), config.SystemAPIUsers)
if err != nil {
return err
}
accessTokenVerifer := internal_authz.StartAccessTokenVerifierFromRepo(repo)
verifier := internal_authz.StartAPITokenVerifier(repo, accessTokenVerifer, systemTokenVerifier)
tlsConfig, err := config.TLS.Config() tlsConfig, err := config.TLS.Config()
if err != nil { if err != nil {
return err return err
@ -364,10 +373,10 @@ func startAPIs(
if err := apis.RegisterServer(ctx, admin.CreateServer(config.Database.DatabaseName(), commands, queries, config.SystemDefaults, config.ExternalSecure, keys.User, config.AuditLogRetention)); err != nil { if err := apis.RegisterServer(ctx, admin.CreateServer(config.Database.DatabaseName(), commands, queries, config.SystemDefaults, config.ExternalSecure, keys.User, config.AuditLogRetention)); err != nil {
return err return err
} }
if err := apis.RegisterServer(ctx, management.CreateServer(commands, queries, config.SystemDefaults, keys.User, config.ExternalSecure, config.AuditLogRetention)); err != nil { if err := apis.RegisterServer(ctx, management.CreateServer(commands, queries, config.SystemDefaults, keys.User, config.ExternalSecure)); err != nil {
return err return err
} }
if err := apis.RegisterServer(ctx, auth.CreateServer(commands, queries, authRepo, config.SystemDefaults, keys.User, config.ExternalSecure, config.AuditLogRetention)); err != nil { if err := apis.RegisterServer(ctx, auth.CreateServer(commands, queries, authRepo, config.SystemDefaults, keys.User, config.ExternalSecure)); err != nil {
return err return err
} }
if err := apis.RegisterService(ctx, user_v2.CreateServer(commands, queries, keys.User, keys.IDPConfig, idp.CallbackURL(config.ExternalSecure), idp.SAMLRootURL(config.ExternalSecure))); err != nil { if err := apis.RegisterService(ctx, user_v2.CreateServer(commands, queries, keys.User, keys.IDPConfig, idp.CallbackURL(config.ExternalSecure), idp.SAMLRootURL(config.ExternalSecure))); err != nil {
@ -408,11 +417,11 @@ func startAPIs(
} }
apis.RegisterHandlerOnPrefix(openapi.HandlerPrefix, openAPIHandler) apis.RegisterHandlerOnPrefix(openapi.HandlerPrefix, openAPIHandler)
oidcProvider, err := oidc.NewProvider(config.OIDC, login.DefaultLoggedOutPath, config.ExternalSecure, commands, queries, authRepo, keys.OIDC, keys.OIDCKey, eventstore, dbClient, userAgentInterceptor, instanceInterceptor.Handler, limitingAccessInterceptor) oidcServer, err := oidc.NewServer(config.OIDC, login.DefaultLoggedOutPath, config.ExternalSecure, commands, queries, authRepo, keys.OIDC, keys.OIDCKey, eventstore, dbClient, userAgentInterceptor, instanceInterceptor.Handler, limitingAccessInterceptor, config.Log.Slog())
if err != nil { if err != nil {
return fmt.Errorf("unable to start oidc provider: %w", err) return fmt.Errorf("unable to start oidc provider: %w", err)
} }
apis.RegisterHandlerPrefixes(oidcProvider.HttpHandler(), "/.well-known/openid-configuration", "/oidc/v1", "/oauth/v2") apis.RegisterHandlerPrefixes(oidcServer, oidcPrefixes...)
samlProvider, err := saml.NewProvider(config.SAML, config.ExternalSecure, commands, queries, authRepo, keys.OIDC, keys.SAML, eventstore, dbClient, instanceInterceptor.Handler, userAgentInterceptor, limitingAccessInterceptor) samlProvider, err := saml.NewProvider(config.SAML, config.ExternalSecure, commands, queries, authRepo, keys.OIDC, keys.SAML, eventstore, dbClient, instanceInterceptor.Handler, userAgentInterceptor, limitingAccessInterceptor)
if err != nil { if err != nil {
@ -420,7 +429,7 @@ func startAPIs(
} }
apis.RegisterHandlerOnPrefix(saml.HandlerPrefix, samlProvider.HttpHandler()) apis.RegisterHandlerOnPrefix(saml.HandlerPrefix, samlProvider.HttpHandler())
c, err := console.Start(config.Console, config.ExternalSecure, oidcProvider.IssuerFromRequest, middleware.CallDurationHandler, instanceInterceptor.Handler, limitingAccessInterceptor, config.CustomerPortal) c, err := console.Start(config.Console, config.ExternalSecure, oidcServer.IssuerFromRequest, middleware.CallDurationHandler, instanceInterceptor.Handler, limitingAccessInterceptor, config.CustomerPortal)
if err != nil { if err != nil {
return fmt.Errorf("unable to start console: %w", err) return fmt.Errorf("unable to start console: %w", err)
} }
@ -433,11 +442,11 @@ func startAPIs(
authRepo, authRepo,
store, store,
console.HandlerPrefix+"/", console.HandlerPrefix+"/",
op.AuthCallbackURL(oidcProvider), oidcServer.AuthCallbackURL(),
provider.AuthCallbackURL(samlProvider), provider.AuthCallbackURL(samlProvider),
config.ExternalSecure, config.ExternalSecure,
userAgentInterceptor, userAgentInterceptor,
op.NewIssuerInterceptor(oidcProvider.IssuerFromRequest).Handler, op.NewIssuerInterceptor(oidcServer.IssuerFromRequest).Handler,
provider.NewIssuerInterceptor(samlProvider.IssuerFromRequest).Handler, provider.NewIssuerInterceptor(samlProvider.IssuerFromRequest).Handler,
instanceInterceptor.Handler, instanceInterceptor.Handler,
assetsCache.Handler, assetsCache.Handler,
@ -454,7 +463,7 @@ func startAPIs(
apis.HandleFunc(login.EndpointDeviceAuth, login.RedirectDeviceAuthToPrefix) apis.HandleFunc(login.EndpointDeviceAuth, login.RedirectDeviceAuthToPrefix)
// After OIDC provider so that the callback endpoint can be used // After OIDC provider so that the callback endpoint can be used
if err := apis.RegisterService(ctx, oidc_v2.CreateServer(commands, queries, oidcProvider, config.ExternalSecure)); err != nil { if err := apis.RegisterService(ctx, oidc_v2.CreateServer(commands, queries, oidcServer, config.ExternalSecure)); err != nil {
return err return err
} }
// handle grpc at last to be able to handle the root, because grpc and gateway require a lot of different prefixes // handle grpc at last to be able to handle the root, because grpc and gateway require a lot of different prefixes

1
console/angular.json
View File

@ -30,6 +30,7 @@
"includePaths": ["node_modules"] "includePaths": ["node_modules"]
}, },
"allowedCommonJsDependencies": [ "allowedCommonJsDependencies": [
"opentype.js",
"fast-sha256", "fast-sha256",
"buffer", "buffer",
"moment", "moment",

42
console/package.json
View File

@ -12,18 +12,18 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^16.2.0", "@angular/animations": "^16.2.5",
"@angular/cdk": "^16.2.0", "@angular/cdk": "^16.2.4",
"@angular/common": "^16.2.0", "@angular/common": "^16.2.5",
"@angular/compiler": "^16.2.0", "@angular/compiler": "^16.2.5",
"@angular/core": "^16.2.0", "@angular/core": "^16.2.5",
"@angular/forms": "^16.2.0", "@angular/forms": "^16.2.5",
"@angular/material": "^16.2.0", "@angular/material": "^16.2.4",
"@angular/material-moment-adapter": "^16.2.0", "@angular/material-moment-adapter": "^16.2.4",
"@angular/platform-browser": "^16.2.0", "@angular/platform-browser": "^16.2.5",
"@angular/platform-browser-dynamic": "^16.2.0", "@angular/platform-browser-dynamic": "^16.2.5",
"@angular/router": "^16.2.0", "@angular/router": "^16.2.5",
"@angular/service-worker": "^16.2.0", "@angular/service-worker": "^16.2.5",
"@ctrl/ngx-codemirror": "^6.1.0", "@ctrl/ngx-codemirror": "^6.1.0",
"@grpc/grpc-js": "^1.9.3", "@grpc/grpc-js": "^1.9.3",
"@ngx-translate/core": "^14.0.0", "@ngx-translate/core": "^14.0.0",
@ -50,15 +50,15 @@
"zone.js": "~0.13.1" "zone.js": "~0.13.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^16.2.0", "@angular-devkit/build-angular": "^16.2.2",
"@angular-eslint/builder": "16.1.0", "@angular-eslint/builder": "16.2.0",
"@angular-eslint/eslint-plugin": "16.1.0", "@angular-eslint/eslint-plugin": "16.2.0",
"@angular-eslint/eslint-plugin-template": "16.1.0", "@angular-eslint/eslint-plugin-template": "16.2.0",
"@angular-eslint/schematics": "16.1.0", "@angular-eslint/schematics": "16.2.0",
"@angular-eslint/template-parser": "16.1.0", "@angular-eslint/template-parser": "16.2.0",
"@angular/cli": "^16.2.0", "@angular/cli": "^16.2.2",
"@angular/compiler-cli": "^16.2.0", "@angular/compiler-cli": "^16.2.5",
"@angular/language-service": "^16.2.0", "@angular/language-service": "^16.2.5",
"@bufbuild/buf": "^1.23.1", "@bufbuild/buf": "^1.23.1",
"@types/file-saver": "^2.0.2", "@types/file-saver": "^2.0.2",
"@types/google-protobuf": "^3.15.3", "@types/google-protobuf": "^3.15.3",

8
console/src/app/app.component.scss
View File

@ -1,15 +1,13 @@
@use '@angular/material' as mat;
@mixin main-theme($theme) { @mixin main-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
.main-container { .main-container {

1
console/src/app/app.component.ts
View File

@ -218,7 +218,6 @@ export class AppComponent implements OnDestroy {
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
this.themeService.setDefaultColors();
this.router.navigate(['/users/me']); this.router.navigate(['/users/me']);
}); });
} }

8
console/src/app/app.module.ts
View File

@ -13,11 +13,11 @@ import localePt from '@angular/common/locales/pt';
import localeZh from '@angular/common/locales/zh'; import localeZh from '@angular/common/locales/zh';
import { APP_INITIALIZER, NgModule } from '@angular/core'; import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatNativeDateModule } from '@angular/material/core'; import { MatNativeDateModule } from '@angular/material/core';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker'; import { ServiceWorkerModule } from '@angular/service-worker';

12
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@ -3,11 +3,11 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$card-background-color: mat.get-color-from-palette($background, cards); $card-background-color: map-get($background, cards);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);
@ -54,10 +54,6 @@
button { button {
border-radius: 50vh; border-radius: 50vh;
margin: 0.5rem; margin: 0.5rem;
.mat-button-wrapper {
font-size: 0.8rem;
}
} }
.l-accounts { .l-accounts {

4
console/src/app/modules/accounts-card/accounts-card.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

6
console/src/app/modules/action-keys/action-keys.component.scss
View File

@ -1,12 +1,10 @@
@use '@angular/material' as mat;
@mixin action-keys-theme($theme) { @mixin action-keys-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500); $accent-color: map-get($primary, 500);
$back: map-get($background, background); $back: map-get($background, background);
.action-keys-wrapper { .action-keys-wrapper {
@ -45,7 +43,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: mat.get-color-from-palette($primary, default-contrast); background: map-get($primary, default-contrast);
opacity: 0.2; opacity: 0.2;
border-radius: 4px; border-radius: 4px;
} }

5
console/src/app/modules/add-key-dialog/add-key-dialog.component.ts
View File

@ -1,9 +1,6 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { UntypedFormControl } from '@angular/forms'; import { UntypedFormControl } from '@angular/forms';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb'; import { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb';
export enum AddKeyDialogType { export enum AddKeyDialogType {

6
console/src/app/modules/add-key-dialog/add-key-dialog.module.ts
View File

@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatMomentDateModule } from '@angular/material-moment-adapter'; import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddKeyDialogComponent } from './add-key-dialog.component'; import { AddKeyDialogComponent } from './add-key-dialog.component';
@NgModule({ @NgModule({
@ -22,6 +23,7 @@ import { AddKeyDialogComponent } from './add-key-dialog.component';
MatSelectModule, MatSelectModule,
MatIconModule, MatIconModule,
FormsModule, FormsModule,
MatDialogModule,
MatDatepickerModule, MatDatepickerModule,
MatMomentDateModule, MatMomentDateModule,
ReactiveFormsModule, ReactiveFormsModule,

3
console/src/app/modules/add-member-dialog/member-create-dialog.component.html
View File

@ -1,9 +1,10 @@
<h1 mat-dialog-title> <h1 mat-dialog-title>
<span class="title">{{ 'MEMBER.ADD' | translate }}</span> <span class="title">{{ 'MEMBER.ADD' | translate }}</span>
</h1> </h1>
<p class="desc cnsl-secondary-text">{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}</p>
<div mat-dialog-content> <div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}</p>
<ng-container *ngIf="showCreationTypeSelector"> <ng-container *ngIf="showCreationTypeSelector">
<cnsl-form-field class="full-width"> <cnsl-form-field class="full-width">
<cnsl-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</cnsl-label> <cnsl-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</cnsl-label>

1
console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
View File

@ -14,7 +14,6 @@
box-sizing: border-box; box-sizing: border-box;
.role-cb { .role-cb {
padding: 0.25rem 0;
box-sizing: border-box; box-sizing: border-box;
.role-cb-content { .role-cb-content {

5
console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { GrantedProject, Project } from 'src/app/proto/generated/zitadel/project_pb'; import { GrantedProject, Project } from 'src/app/proto/generated/zitadel/project_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb'; import { User } from 'src/app/proto/generated/zitadel/user_pb';

12
console/src/app/modules/add-member-dialog/member-create-dialog.module.ts
View File

@ -1,12 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; import { MatChipsModule } from '@angular/material/chips';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; import { MatDialogModule } from '@angular/material/dialog';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module'; import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';

8
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss
View File

@ -12,8 +12,6 @@
flex-direction: column; flex-direction: column;
.role-cb { .role-cb {
padding: 0.25rem 0;
.role-cb-content { .role-cb-content {
padding-left: 0.5rem; padding-left: 0.5rem;
display: flex; display: flex;
@ -30,5 +28,9 @@
.action { .action {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
.ok-button {
margin-left: 1rem;
}
} }

5
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { getMembershipColor } from 'src/app/utils/color'; import { getMembershipColor } from 'src/app/utils/color';
@Component({ @Component({

8
console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts
View File

@ -1,13 +1,14 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module'; import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.component'; import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.component';
@NgModule({ @NgModule({
@ -17,6 +18,7 @@ import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.compone
TranslateModule, TranslateModule,
MatCheckboxModule, MatCheckboxModule,
MatButtonModule, MatButtonModule,
MatDialogModule,
LocalizedDatePipeModule, LocalizedDatePipeModule,
MatTooltipModule, MatTooltipModule,
RoleTransformPipeModule, RoleTransformPipeModule,

5
console/src/app/modules/add-token-dialog/add-token-dialog.component.ts
View File

@ -1,9 +1,6 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { UntypedFormControl } from '@angular/forms'; import { UntypedFormControl } from '@angular/forms';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
@Component({ @Component({
selector: 'cnsl-add-token-dialog', selector: 'cnsl-add-token-dialog',

6
console/src/app/modules/add-token-dialog/add-token-dialog.module.ts
View File

@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatMomentDateModule } from '@angular/material-moment-adapter'; import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { MatDialogModule } from '@angular/material/dialog';
import { InfoSectionModule } from '../info-section/info-section.module'; import { InfoSectionModule } from '../info-section/info-section.module';
import { AddTokenDialogComponent } from './add-token-dialog.component'; import { AddTokenDialogComponent } from './add-token-dialog.component';
@ -22,6 +23,7 @@ import { AddTokenDialogComponent } from './add-token-dialog.component';
InfoSectionModule, InfoSectionModule,
InputModule, InputModule,
MatSelectModule, MatSelectModule,
MatDialogModule,
MatIconModule, MatIconModule,
FormsModule, FormsModule,
MatDatepickerModule, MatDatepickerModule,

6
console/src/app/modules/app-card/app-card.component.scss
View File

@ -1,12 +1,10 @@
@use '@angular/material' as mat;
@mixin app-card-theme($theme) { @mixin app-card-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500); $accent-color: map-get($primary, 500);
$back: map-get($background, background); $back: map-get($background, background);
.cnsl-app-card { .cnsl-app-card {
@ -26,7 +24,7 @@
font-weight: 600; font-weight: 600;
background-color: $back; background-color: $back;
transition: background-color box-shadow 0.3s ease-in; transition: background-color box-shadow 0.3s ease-in;
color: mat.get-color-from-palette($primary, default-contrast); color: map-get($primary, default-contrast);
&.add { &.add {
background-color: map-get($primary, 500); background-color: map-get($primary, 500);

4
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.auth-method-radio-button-wrapper { .auth-method-radio-button-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -20,7 +18,7 @@
@mixin app-auth-method-radio-theme($theme) { @mixin app-auth-method-radio-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background); $background: map-get($theme, background);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

4
console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.app-type-radio-button-wrapper { .app-type-radio-button-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -10,7 +8,7 @@
@mixin app-type-radio-theme($theme) { @mixin app-type-radio-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$background: map-get($theme, background); $background: map-get($theme, background);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

4
console/src/app/modules/avatar/avatar.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin avatar-theme($theme) { @mixin avatar-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
.avatar-circle { .avatar-circle {
border-radius: 50%; border-radius: 50%;

4
console/src/app/modules/card/card.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { CardComponent } from './card.component'; import { CardComponent } from './card.component';

13
console/src/app/modules/card/card.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin card-theme($theme) { @mixin card-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$background: map-get($theme, background); $background: map-get($theme, background);
$card-background-color: mat.get-color-from-palette($background, cards); $card-background-color: map-get($background, cards);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
$border-selected-color: if($is-dark-theme, #fff, #000); $border-selected-color: if($is-dark-theme, #fff, #000);
@ -59,6 +57,13 @@
.cnsl-chip { .cnsl-chip {
height: auto; height: auto;
border: 1px solid $border-color; border: 1px solid $border-color;
background: if($is-dark-theme, map-get($background, state), #e4e7e4) !important;
.cnsl-chip-content {
display: flex;
align-items: center;
font-size: 14px !important;
}
} }
.cnsl-chip-list { .cnsl-chip-list {

2
console/src/app/modules/changes/changes.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
.change-header { .change-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

6
console/src/app/modules/changes/changes.module.ts
View File

@ -1,10 +1,10 @@
import { ScrollingModule } from '@angular/cdk/scrolling'; import { ScrollingModule } from '@angular/cdk/scrolling';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module'; import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';

4
console/src/app/modules/client-keys/client-keys.component.html
View File

@ -12,7 +12,9 @@
mat-raised-button mat-raised-button
(click)="openAddKey()" (click)="openAddKey()"
> >
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }} <div class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon><span>{{ 'ACTIONS.NEW' | translate }}</span>
</div>
</a> </a>
</div> </div>

4
console/src/app/modules/client-keys/client-keys.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections'; import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; import { MatTableDataSource } from '@angular/material/table';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'; import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { Moment } from 'moment'; import { Moment } from 'moment';

12
console/src/app/modules/client-keys/client-keys.module.ts
View File

@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatTableModule } from '@angular/material/table';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

2
console/src/app/modules/contributors/contributors.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin contributors-theme($theme) { @mixin contributors-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);

6
console/src/app/modules/contributors/contributors.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module'; import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module';

10
console/src/app/modules/create-layout/create-layout.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin app-create-theme($theme) { @mixin app-create-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
// Number of steps creating app // Number of steps creating app
$steps: 3; $steps: 3;
@ -35,7 +33,11 @@
.abort { .abort {
font-size: 1.2rem; font-size: 1.2rem;
margin-left: 2rem; margin-left: 1.5rem;
text-transform: uppercase;
font-size: 14px;
opacity: 0.8;
letter-spacing: 0.05em;
} }
.abort-2 { .abort-2 {

4
console/src/app/modules/create-layout/create-layout.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutComponent } from './create-layout.component'; import { CreateLayoutComponent } from './create-layout.component';

6
console/src/app/modules/detail-layout/detail-layout.component.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin detail-layout-theme($theme) { @mixin detail-layout-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$lighter-color: rgba(mat.get-color-from-palette($primary, 300), 0.5); $lighter-color: rgba(map-get($primary, 300), 0.5);
.detail-layout-head { .detail-layout-head {
margin-bottom: 2rem; margin-bottom: 2rem;

2
console/src/app/modules/detail-layout/detail-layout.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { BackModule } from 'src/app/directives/back/back.module'; import { BackModule } from 'src/app/directives/back/back.module';

5
console/src/app/modules/display-json-dialog/display-json-dialog.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { mapTo } from 'rxjs'; import { mapTo } from 'rxjs';
import { Event } from 'src/app/proto/generated/zitadel/event_pb'; import { Event } from 'src/app/proto/generated/zitadel/event_pb';

4
console/src/app/modules/display-json-dialog/display-json-dialog.module.ts
View File

@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { CodemirrorModule } from '@ctrl/ngx-codemirror'; import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { ToObjectPipeModule } from 'src/app/pipes/to-object/to-object.module'; import { ToObjectPipeModule } from 'src/app/pipes/to-object/to-object.module';
@ -19,6 +20,7 @@ import { DisplayJsonDialogComponent } from './display-json-dialog.component';
FormsModule, FormsModule,
TranslateModule, TranslateModule,
MatButtonModule, MatButtonModule,
MatDialogModule,
MatIconModule, MatIconModule,
CodemirrorModule, CodemirrorModule,
TimestampToDatePipeModule, TimestampToDatePipeModule,

2
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html
View File

@ -1,4 +1,4 @@
<span class="title" mat-dialog-title>{{ 'ORG.DOMAINS.ADD.TITLE' | translate }}</span> <h1 class="title" mat-dialog-title>{{ 'ORG.DOMAINS.ADD.TITLE' | translate }}</h1>
<div mat-dialog-content> <div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.ADD.DESCRIPTION' | translate }}</p> <p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.ADD.DESCRIPTION' | translate }}</p>

4
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss
View File

@ -7,10 +7,6 @@
font-size: 0.9rem; font-size: 0.9rem;
} }
.form-field {
width: 100%;
}
.action { .action {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

5
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
@Component({ @Component({
selector: 'cnsl-add-domain-dialog', selector: 'cnsl-add-domain-dialog',

5
console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts
View File

@ -1,14 +1,15 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';
import { MatDialogModule } from '@angular/material/dialog';
import { AddDomainDialogComponent } from './add-domain-dialog.component'; import { AddDomainDialogComponent } from './add-domain-dialog.component';
@NgModule({ @NgModule({
declarations: [AddDomainDialogComponent], declarations: [AddDomainDialogComponent],
imports: [CommonModule, TranslateModule, MatButtonModule, InputModule, FormsModule], imports: [CommonModule, TranslateModule, MatButtonModule, InputModule, MatDialogModule, FormsModule],
}) })
export class AddDomainDialogModule {} export class AddDomainDialogModule {}

5
console/src/app/modules/domains/domain-verification/domain-verification.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component'; import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { GenerateOrgDomainValidationResponse } from 'src/app/proto/generated/zitadel/management_pb'; import { GenerateOrgDomainValidationResponse } from 'src/app/proto/generated/zitadel/management_pb';

4
console/src/app/modules/domains/domains.component.html
View File

@ -9,7 +9,7 @@
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<i class="las la-info-circle"></i> <mat-icon class="icon">info_outline</mat-icon>
</a> </a>
</div> </div>
<p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p> <p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
@ -24,9 +24,11 @@
class="cnsl-action-button" class="cnsl-action-button"
(click)="addNewDomain()" (click)="addNewDomain()"
> >
<div class="cnsl-action-button">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span> <span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys> <cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
</div>
</button> </button>
</div> </div>

2
console/src/app/modules/domains/domains.component.scss
View File

@ -10,7 +10,7 @@
margin: 0; margin: 0;
} }
a i { a .icon {
font-size: 1.2rem; font-size: 1.2rem;
height: 1.2rem; height: 1.2rem;
line-height: 1.2rem; line-height: 1.2rem;

3
console/src/app/modules/domains/domains.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; import { MatDialog } from '@angular/material/dialog';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component'; import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component'; import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Domain, DomainValidationType } from 'src/app/proto/generated/zitadel/org_pb'; import { Domain, DomainValidationType } from 'src/app/proto/generated/zitadel/org_pb';
@ -63,7 +63,6 @@ export class DomainsComponent implements OnInit {
public addNewDomain(): void { public addNewDomain(): void {
const dialogRef = this.dialog.open(AddDomainDialogComponent, { const dialogRef = this.dialog.open(AddDomainDialogComponent, {
data: {},
width: '400px', width: '400px',
}); });

8
console/src/app/modules/domains/domains.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module'; import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@ -15,6 +15,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { AddDomainDialogModule } from './add-domain-dialog/add-domain-dialog.module'; import { AddDomainDialogModule } from './add-domain-dialog/add-domain-dialog.module';
import { DomainVerificationComponent } from './domain-verification/domain-verification.component'; import { DomainVerificationComponent } from './domain-verification/domain-verification.component';
import { DomainsComponent } from './domains.component'; import { DomainsComponent } from './domains.component';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({ @NgModule({
declarations: [DomainsComponent, DomainVerificationComponent], declarations: [DomainsComponent, DomainVerificationComponent],
@ -30,6 +31,7 @@ import { DomainsComponent } from './domains.component';
MatTooltipModule, MatTooltipModule,
CopyToClipboardModule, CopyToClipboardModule,
InputModule, InputModule,
MatDialogModule,
TranslateModule, TranslateModule,
InfoSectionModule, InfoSectionModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,

14
console/src/app/modules/edit-text/edit-text.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);
@ -22,6 +22,10 @@
.edit-text-area { .edit-text-area {
min-height: 80px; min-height: 80px;
&.defaulttext {
color: if($is-dark-theme, #ffffff50, #00000050);
}
} }
&.hovering { &.hovering {
@ -41,7 +45,7 @@
padding: 4px 0.5rem; padding: 4px 0.5rem;
font-size: 12px; font-size: 12px;
background: $primary-color; background: $primary-color;
color: mat.get-color-from-palette($primary, default-contrast); color: map-get($primary, default-contrast);
margin: 0.25rem; margin: 0.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -98,7 +102,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: flex-start; align-self: flex-start;
margin-top: 30px; margin-top: 20px;
} }
} }
} }

4
console/src/app/modules/edit-text/edit-text.module.ts
View File

@ -2,9 +2,9 @@ import { TextFieldModule } from '@angular/cdk/text-field';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';

9
console/src/app/modules/filter-events/filter-events.component.html
View File

@ -3,15 +3,20 @@
mat-stroked-button mat-stroked-button
cdkOverlayOrigin cdkOverlayOrigin
(click)="showFilter = !showFilter" (click)="showFilter = !showFilter"
class="cnsl-action-button"
#triggereventfilter="cdkOverlayOrigin" #triggereventfilter="cdkOverlayOrigin"
data-e2e="open-filter-button" data-e2e="open-filter-button"
> >
<div class="cnsl-action-button">
<i class="las la-filter no-margin"></i> <i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span> <span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span> <span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="showFilter = !showFilter"> <cnsl-action-keys
[doNotUseContrast]="true"
[type]="ActionKeysType.FILTER"
(actionTriggered)="showFilter = !showFilter"
>
</cnsl-action-keys> </cnsl-action-keys>
</div>
</button> </button>
<ng-template <ng-template
cdkConnectedOverlay cdkConnectedOverlay

12
console/src/app/modules/filter-events/filter-events.component.scss
View File

@ -1,17 +1,15 @@
@use '@angular/material' as mat;
@mixin filter-events-theme($theme) { @mixin filter-events-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$lighter-primary-color: mat.get-color-from-palette($primary, 300); $lighter-primary-color: map-get($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700); $darker-primary-color: map-get($primary, 700);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text); $secondary-text: map-get($foreground, secondary-text);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color); $link-hover-color: if($is-dark-theme, map-get($primary, 200), $primary-color);
$link-color: if($is-dark-theme, $lighter-primary-color, $primary-color); $link-color: if($is-dark-theme, $lighter-primary-color, $primary-color);
.filter-events-wrapper { .filter-events-wrapper {
@ -66,7 +64,7 @@
background-color: if($is-dark-theme, #00000020, #00000008); background-color: if($is-dark-theme, #00000020, #00000008);
margin: 0 -0.5rem; margin: 0 -0.5rem;
.aggregate-type-select .mat-select { .aggregate-type-select .mat-mdc-select {
height: 36px; height: 36px;
padding: 7px 10px; padding: 7px 10px;
} }

12
console/src/app/modules/filter-events/filter-events.module.ts
View File

@ -1,14 +1,14 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { OverlayModule } from '@angular/cdk/overlay'; import { OverlayModule } from '@angular/cdk/overlay';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { ActionKeysModule } from '../action-keys/action-keys.module'; import { ActionKeysModule } from '../action-keys/action-keys.module';
import { InputModule } from '../input/input.module'; import { InputModule } from '../input/input.module';
import { FilterEventsComponent } from './filter-events.component'; import { FilterEventsComponent } from './filter-events.component';
@ -23,9 +23,9 @@ import { FilterEventsComponent } from './filter-events.component';
ReactiveFormsModule, ReactiveFormsModule,
OverlayModule, OverlayModule,
MatDatepickerModule, MatDatepickerModule,
MatLegacyProgressSpinnerModule, MatProgressSpinnerModule,
TranslateModule, TranslateModule,
MatLegacyCheckboxModule, MatCheckboxModule,
MatSelectModule, MatSelectModule,
ActionKeysModule, ActionKeysModule,
], ],

2
console/src/app/modules/filter-org/filter-org.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox'; import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs'; import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb'; import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-org/filter-org.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-project/filter-project.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox'; import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs'; import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb'; import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-project/filter-project.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-user-grants/filter-user-grants.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox'; import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs'; import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb'; import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-user-grants/filter-user-grants.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

2
console/src/app/modules/filter-user/filter-user.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox'; import { MatCheckboxChange } from '@angular/material/checkbox';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs'; import { take } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb'; import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';

6
console/src/app/modules/filter-user/filter-user.module.ts
View File

@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

10
console/src/app/modules/filter/filter.component.html
View File

@ -1,16 +1,12 @@
<div class="cnsl-filter-button-wrapper"> <div class="cnsl-filter-button-wrapper">
<button <button mat-stroked-button class="filter-toggle" (click)="toggleFilter()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
mat-stroked-button <div class="cnsl-action-button">
class="filter-toggle cnsl-action-button"
(click)="toggleFilter()"
cdkOverlayOrigin
#trigger="cdkOverlayOrigin"
>
<i class="las la-filter no-margin"></i> <i class="las la-filter no-margin"></i>
<span>{{ 'ACTIONS.FILTER' | translate }}</span> <span>{{ 'ACTIONS.FILTER' | translate }}</span>
<span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span> <span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
<cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="toggleFilter()"> <cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="toggleFilter()">
</cnsl-action-keys> </cnsl-action-keys>
</div>
</button> </button>
<ng-template <ng-template
cdkConnectedOverlay cdkConnectedOverlay

14
console/src/app/modules/filter/filter.component.scss
View File

@ -3,11 +3,11 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$card-background-color: mat.get-color-from-palette($background, cards); $card-background-color: map-get($background, cards);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);
@ -56,14 +56,14 @@
} }
.filter-row { .filter-row {
padding: 0.5rem 0; padding: 0.5rem 0 0 0;
.cb { .cb {
padding: 0.5rem 0; padding: 0;
font-size: 15px; font-size: 15px;
} }
.filter-select-method .mat-select { .filter-select-method .mat-mdc-select {
height: 36px; height: 36px;
padding: 7px 10px; padding: 7px 10px;
} }

6
console/src/app/modules/filter/filter.module.ts
View File

@ -2,10 +2,10 @@ import { A11yModule } from '@angular/cdk/a11y';
import { OverlayModule } from '@angular/cdk/overlay'; import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatSelectModule } from '@angular/material/select';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { ActionKeysModule } from '../action-keys/action-keys.module'; import { ActionKeysModule } from '../action-keys/action-keys.module';

21
console/src/app/modules/footer/footer.component.scss
View File

@ -4,11 +4,11 @@
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$lighter-primary-color: mat.get-color-from-palette($primary, 300); $lighter-primary-color: map-get($primary, 300);
$darker-primary-color: mat.get-color-from-palette($primary, 700); $darker-primary-color: map-get($primary, 700);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);
@ -60,19 +60,6 @@
justify-content: flex-end; justify-content: flex-end;
flex: 1; flex: 1;
margin: 0.5rem 0; margin: 0.5rem 0;
i {
margin-right: 0.5rem;
}
svg {
opacity: 0.7;
fill: map-get($foreground, text);
height: 1.25rem;
width: 1.25rem;
margin-right: -8px;
margin-left: 0.5rem;
}
} }
.swiss-wrapper { .swiss-wrapper {

15
console/src/app/modules/form-field/field/form-field.component.scss
View File

@ -1,8 +1,6 @@
@use '@angular/material' as mat;
@mixin cnsl-form-field-theme($theme) { @mixin cnsl-form-field-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
@ -16,6 +14,15 @@
.cnsl-form-field-wrapper { .cnsl-form-field-wrapper {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
.mat-datepicker-toggle button {
padding: 0;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
} }
.cnsl-rel { .cnsl-rel {
@ -35,7 +42,7 @@
} }
input { input {
color: mat.get-color-from-palette($foreground, text); color: map-get($foreground, text);
} }
// Wrapper for the hints and error messages. // Wrapper for the hints and error messages.

2
console/src/app/modules/form-field/field/form-field.component.ts
View File

@ -17,7 +17,7 @@ import {
ViewEncapsulation, ViewEncapsulation,
} from '@angular/core'; } from '@angular/core';
import { NgControl } from '@angular/forms'; import { NgControl } from '@angular/forms';
import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field'; import { MatFormFieldControl } from '@angular/material/form-field';
import { combineLatest, map, Observable, of, startWith, Subject, takeUntil } from 'rxjs'; import { combineLatest, map, Observable, of, startWith, Subject, takeUntil } from 'rxjs';
import { CnslErrorDirective, CNSL_ERROR } from '../error/error.directive'; import { CnslErrorDirective, CNSL_ERROR } from '../error/error.directive';

8
console/src/app/modules/header/header.component.html
View File

@ -177,21 +177,25 @@
id="systembutton" id="systembutton"
*ngIf="!isOnInstance && (['iam.read$', 'iam.write$'] | hasRole | async)" *ngIf="!isOnInstance && (['iam.read$', 'iam.write$'] | hasRole | async)"
[routerLink]="['/instance']" [routerLink]="['/instance']"
class="iam-settings cnsl-action-button" class="iam-settings"
mat-stroked-button mat-stroked-button
> >
<div class="cnsl-action-button">
<span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span> <span class="iam-label">{{ 'MENU.INSTANCE' | translate }}</span>
<i class="las la-cog"></i> <i class="las la-cog"></i>
</div>
</a> </a>
<a <a
id="orgbutton" id="orgbutton"
*ngIf="isOnInstance && (['org.read'] | hasRole | async)" *ngIf="isOnInstance && (['org.read'] | hasRole | async)"
[routerLink]="['/org']" [routerLink]="['/org']"
class="org-settings cnsl-action-button" class="org-settings"
mat-stroked-button mat-stroked-button
> >
<div class="cnsl-action-button">
<span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span> <span class="iam-label">{{ 'MENU.ORGANIZATION' | translate }}</span>
<i class="las la-cog"></i> <i class="las la-cog"></i>
</div>
</a> </a>
</div> </div>

8
console/src/app/modules/header/header.component.scss
View File

@ -9,17 +9,17 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);
.filter-form { .filter-form {
margin: 0 0.5rem; margin: 0 0.5rem;
color: mat.get-color-from-palette($foreground, text) !important; color: map-get($foreground, text) !important;
} }
.header-wrapper { .header-wrapper {

4
console/src/app/modules/header/header.module.ts
View File

@ -2,10 +2,10 @@ import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatRippleModule } from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';

6
console/src/app/modules/idp-table/idp-table.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);

4
console/src/app/modules/idp-table/idp-table.component.ts
View File

@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections'; import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; import { MatTableDataSource } from '@angular/material/table';
import { Router, RouterLink } from '@angular/router'; import { Router, RouterLink } from '@angular/router';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb'; import { Duration } from 'google-protobuf/google/protobuf/duration_pb';

8
console/src/app/modules/idp-table/idp-table.module.ts
View File

@ -1,11 +1,11 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatTableModule } from '@angular/material/table';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; import { MatTooltipModule } from '@angular/material/tooltip';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

5
console/src/app/modules/info-dialog/info-dialog.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { InfoSectionType } from '../info-section/info-section.component'; import { InfoSectionType } from '../info-section/info-section.component';

5
console/src/app/modules/info-dialog/info-dialog.module.ts
View File

@ -1,15 +1,16 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { MatDialogModule } from '@angular/material/dialog';
import { InfoSectionModule } from '../info-section/info-section.module'; import { InfoSectionModule } from '../info-section/info-section.module';
import { InputModule } from '../input/input.module'; import { InputModule } from '../input/input.module';
import { InfoDialogComponent } from './info-dialog.component'; import { InfoDialogComponent } from './info-dialog.component';
@NgModule({ @NgModule({
declarations: [InfoDialogComponent], declarations: [InfoDialogComponent],
imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], imports: [CommonModule, FormsModule, MatDialogModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule],
}) })
export class InfoDialogModule {} export class InfoDialogModule {}

6
console/src/app/modules/info-overlay/info-overlay.component.scss
View File

@ -3,10 +3,10 @@
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$background: map-get($theme, background); $background: map-get($theme, background);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$accent-color: mat.get-color-from-palette($accent, 500); $accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background); $back: map-get($background, background);

2
console/src/app/modules/info-overlay/info-overlay.module.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { InfoOverlayComponent } from './info-overlay.component'; import { InfoOverlayComponent } from './info-overlay.component';

2
console/src/app/modules/info-row/info-row.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin info-row-theme($theme) { @mixin info-row-theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$button-text-color: map-get($foreground, text); $button-text-color: map-get($foreground, text);

4
console/src/app/modules/info-row/info-row.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; import { MatButtonModule } from '@angular/material/button';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';

4
console/src/app/modules/info-section/info-section.component.scss
View File

@ -1,10 +1,8 @@
@use '@angular/material' as mat;
@mixin info-section-theme($theme) { @mixin info-section-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
.info-section-row { .info-section-row {

13
console/src/app/modules/input/input.directive.ts
View File

@ -17,15 +17,8 @@ import {
} from '@angular/core'; } from '@angular/core';
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms'; import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core'; import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
import { import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';
MatLegacyFormField as MatFormField, import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
MatLegacyFormFieldControl as MatFormFieldControl,
MAT_LEGACY_FORM_FIELD as MAT_FORM_FIELD,
} from '@angular/material/legacy-form-field';
import {
getMatLegacyInputUnsupportedTypeError as getMatInputUnsupportedTypeError,
MAT_LEGACY_INPUT_VALUE_ACCESSOR as MAT_INPUT_VALUE_ACCESSOR,
} from '@angular/material/legacy-input';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError. // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
@ -370,7 +363,7 @@ export class InputDirective
private _dirtyCheckPlaceholder(): void { private _dirtyCheckPlaceholder(): void {
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise // If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
// screen readers will read it out twice: once from the label and once from the attribute. // screen readers will read it out twice: once from the label and once from the attribute.
const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder; const placeholder = null;
if (placeholder !== this._previousPlaceholder) { if (placeholder !== this._previousPlaceholder) {
const element = this._elementRef.nativeElement; const element = this._elementRef.nativeElement;
this._previousPlaceholder = placeholder; this._previousPlaceholder = placeholder;

2
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
View File

@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div mat-dialog-actions class="action"> <div mat-dialog-actions class="action">
<button mat-stroked-button (click)="closeDialog()"> <button cdkFocusInitial mat-stroked-button (click)="closeDialog()">
{{ 'ACTIONS.CLOSE' | translate }} {{ 'ACTIONS.CLOSE' | translate }}
</button> </button>
<span class="fill-space"></span> <span class="fill-space"></span>

6
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
View File

@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin keyboard-shortcuts-theme($theme) { @mixin keyboard-shortcuts-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$background: map-get($theme, background); $background: map-get($theme, background);
@ -7,9 +5,9 @@
$text-color: map-get($foreground, text); $text-color: map-get($foreground, text);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500); $accent-color: map-get($primary, 500);
$back: map-get($background, background); $back: map-get($background, background);
$card-background-color: mat.get-color-from-palette($background, cards); $card-background-color: map-get($background, cards);
.keyboard-shortcuts-group { .keyboard-shortcuts-group {
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));

5
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts
View File

@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts'; import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts';

2
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts
View File

@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

6
console/src/app/modules/label/label.component.scss
View File

@ -1,11 +1,9 @@
@use '@angular/material' as mat;
@mixin cnsl-label-theme($theme) { @mixin cnsl-label-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500); $primary-color: map-get($primary, 500);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map-get($theme, is-dark);
$warn: map-get($theme, warn); $warn: map-get($theme, warn);
$warn-color: mat.get-color-from-palette($warn, 500); $warn-color: map-get($warn, 500);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text); $secondary-text: map-get($foreground, secondary-text);

Some files were not shown because too many files have changed in this diff Show More