diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html index a3af0d54be..9e64ef676b 100644 --- a/console/src/app/app.component.html +++ b/console/src/app/app.component.html @@ -49,6 +49,8 @@ + {{'MENU.DOCUMENTATION' | translate}}
- -
-
- {{'MENU.ADMINSECTION' | translate}} -
-
- - - {{'MENU.IAM' | translate}} - -
-
- +
- {{'MENU.ORGSECTION' | translate}} + {{org?.name ? org.name : ('MENU.ORGSECTION' | translate)}}
+
+ - {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} + {{'MENU.ORGANIZATION' | translate}} - +
- {{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}} - {{'MENU.PROJECT' | translate}} + {{'MENU.PROJECT' | translate}} {{mgmtService?.ownedProjectsCount | async}}
@@ -118,7 +107,7 @@
+ +
+
+ {{'MENU.ADMINSECTION' | translate}} +
+
+ + + {{'MENU.IAMPOLICIES' | translate}} + + + + + {{'MENU.IAMEVENTSTORE' | translate}} + +
+
diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss index 73f2a8da92..04591da529 100644 --- a/console/src/app/app.component.scss +++ b/console/src/app/app.component.scss @@ -34,6 +34,10 @@ flex: 1; } + .doc-link { + margin-right: 1rem; + } + .icon-container { display: flex; justify-content: space-between; @@ -105,10 +109,8 @@ cursor: pointer; padding: 0 1rem; margin-right: .5rem; - - &.indented { - padding-left: 2rem; - } + border-top-right-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; .icon { margin: .5rem 1rem; @@ -219,6 +221,7 @@ height: 1px; margin: .5rem 0; flex: 1; + min-width: 10px; } .hiddenline { diff --git a/console/src/app/pages/iam/eventstore/eventstore.component.html b/console/src/app/pages/iam/eventstore/eventstore.component.html new file mode 100644 index 0000000000..0e17a4dc02 --- /dev/null +++ b/console/src/app/pages/iam/eventstore/eventstore.component.html @@ -0,0 +1,12 @@ +
+

{{ 'IAM.EVENTSTORE.TITLE' | translate }}

+

{{'IAM.EVENTSTORE.DESCRIPTION' | translate }}

+ + + + + + + +
\ No newline at end of file diff --git a/console/src/app/pages/iam/eventstore/eventstore.component.scss b/console/src/app/pages/iam/eventstore/eventstore.component.scss new file mode 100644 index 0000000000..9fb7ff0c3f --- /dev/null +++ b/console/src/app/pages/iam/eventstore/eventstore.component.scss @@ -0,0 +1,8 @@ +h1 { + margin-top: 0; +} + +.desc { + color: var(--grey); + margin-bottom: 2rem; +} diff --git a/console/src/app/pages/iam/eventstore/eventstore.component.spec.ts b/console/src/app/pages/iam/eventstore/eventstore.component.spec.ts new file mode 100644 index 0000000000..09fee5cf69 --- /dev/null +++ b/console/src/app/pages/iam/eventstore/eventstore.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EventstoreComponent } from './eventstore.component'; + +describe('EventstoreComponent', () => { + let component: EventstoreComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [EventstoreComponent], + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EventstoreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/console/src/app/pages/iam/eventstore/eventstore.component.ts b/console/src/app/pages/iam/eventstore/eventstore.component.ts new file mode 100644 index 0000000000..716eb4a86d --- /dev/null +++ b/console/src/app/pages/iam/eventstore/eventstore.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-eventstore', + templateUrl: './eventstore.component.html', + styleUrls: ['./eventstore.component.scss'], +}) +export class EventstoreComponent { } diff --git a/console/src/app/pages/iam/iam-routing.module.ts b/console/src/app/pages/iam/iam-routing.module.ts index 838152a854..08d609bbdf 100644 --- a/console/src/app/pages/iam/iam-routing.module.ts +++ b/console/src/app/pages/iam/iam-routing.module.ts @@ -4,17 +4,26 @@ import { AuthGuard } from 'src/app/guards/auth.guard'; import { RoleGuard } from 'src/app/guards/role.guard'; import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum'; +import { EventstoreComponent } from './eventstore/eventstore.component'; import { IamComponent } from './iam.component'; const routes: Routes = [ { - path: '', + path: 'policies', component: IamComponent, canActivate: [AuthGuard, RoleGuard], data: { roles: ['iam.read'], }, }, + { + path: 'eventstore', + component: EventstoreComponent, + canActivate: [AuthGuard, RoleGuard], + data: { + roles: ['iam.read'], + }, + }, { path: 'members', loadChildren: () => import('./iam-members/iam-members.module').then(m => m.IamMembersModule), diff --git a/console/src/app/pages/iam/iam.component.html b/console/src/app/pages/iam/iam.component.html index db85ded387..29355d4be7 100644 --- a/console/src/app/pages/iam/iam.component.html +++ b/console/src/app/pages/iam/iam.component.html @@ -1,18 +1,9 @@
-

{{'IAM.DETAIL.TITLE' | translate}}

-

{{'IAM.DETAIL.DESCRIPTION' | translate}}

+

{{'IAM.POLICIES.TITLE' | translate}}

+

{{'IAM.POLICIES.DESCRIPTION' | translate}}

- - - - - - - -
diff --git a/console/src/app/pages/iam/iam.module.ts b/console/src/app/pages/iam/iam.module.ts index da36250a9e..adf2fc5542 100644 --- a/console/src/app/pages/iam/iam.module.ts +++ b/console/src/app/pages/iam/iam.module.ts @@ -26,13 +26,14 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; +import { EventstoreComponent } from './eventstore/eventstore.component'; import { FailedEventsComponent } from './failed-events/failed-events.component'; import { IamRoutingModule } from './iam-routing.module'; import { IamViewsComponent } from './iam-views/iam-views.component'; import { IamComponent } from './iam.component'; @NgModule({ - declarations: [IamComponent, IamViewsComponent, FailedEventsComponent], + declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent], imports: [ CommonModule, IamRoutingModule, diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json index b9b787d416..be36063fb6 100644 --- a/console/src/assets/i18n/de.json +++ b/console/src/assets/i18n/de.json @@ -36,7 +36,9 @@ }, "MENU": { "PERSONAL_INFO": "Persönliche Informationen", - "IAM":"Administration", + "DOCUMENTATION":"Dokumentation", + "IAMPOLICIES":"IAM", + "IAMEVENTSTORE":"Speicher", "ORGANIZATION": "Organisation", "ADMINSECTION":"ZITADEL Administration", "ORGSECTION":"Organisation", @@ -54,7 +56,8 @@ "GRANTS":"Berechtigungen", "TOOLTIP": { "PERSONAL":"Verwalte deinen persönlichen Account, deine IDPs, Login Methoden, Faktoren und Berechtigungen", - "IAM":"Verwalte ZITADELs globale Zugangsrichtlinien, bereinige views und fehlerhafte events", + "IAMPOLICIES":"Verwalte ZITADELs globale Zugangsrichtlinien und verwalte ZITADEL Manager", + "IAMEVENTSTORE":"Bereinige views und fehlerhafte Events", "ORG":"Verwalte die Zugangsrichtlinien und Domains deiner Organisation ", "SELFPROJECTS":"Verwalte die Projekte deiner Organisation", "GRANTEDPROJECTS":"Verwalte die berechtigten Projekte von anderen Organisationen", @@ -370,9 +373,13 @@ } }, "IAM": { - "DETAIL": { - "TITLE":"Administration Identity- und Access-Management Administration", - "DESCRIPTION":"Verwalte die Einstellungen von ZITADEL." + "POLICIES": { + "TITLE":"IAM Administration", + "DESCRIPTION":"Verwalte Richtlinen und Zugangseinstellungen von ZITADEL." + }, + "EVENTSTORE": { + "TITLE":"IAM Speicher Administration", + "DESCRIPTION":"Verwalte Speicher Einstellungen von ZITADEL." }, "MEMBER": { "TITLE":"Manager", diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index 4a3239bc1e..1c2446e98e 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -36,7 +36,9 @@ }, "MENU": { "PERSONAL_INFO": "Personal Information", - "IAM":"Administration", + "DOCUMENTATION":"Documentation", + "IAMPOLICIES":"IAM", + "IAMEVENTSTORE":"Storage", "ORGANIZATION": "Organisation", "ADMINSECTION":"ZITADEL Administration", "ORGSECTION":"Organisation", @@ -54,7 +56,8 @@ "GRANTS":"Authorizations", "TOOLTIP": { "PERSONAL":"Show your Personal Account, your IDPs, Login methods, Factors and Authorisations", - "IAM":"Show ZITADELs global access policies, clear views and failed events", + "IAMPOLICIES":"Manage ZITADELs global Access policies und elect ZITADEL Managers", + "IAMEVENTSTORE":"Clear views and failed events", "ORG":"Show your organisations access policies, and manage your domain names", "SELFPROJECTS":"Show your organisations own projects", "GRANTEDPROJECTS":"Show projects your organisation was granted access", @@ -370,9 +373,13 @@ } }, "IAM": { - "DETAIL": { - "TITLE":"Identity and Access Management Administration", - "DESCRIPTION":"Manage the ZITADEL settings." + "POLICIES": { + "TITLE":"IAM Policies and Access Settings", + "DESCRIPTION":"Manage your ZITADEL Policies and Management Access Settings." + }, + "EVENTSTORE": { + "TITLE":"IAM Storage Administration", + "DESCRIPTION":"Manage your ZITADEL views and failed events." }, "MEMBER": { "TITLE":"Managers", diff --git a/console/src/styles.scss b/console/src/styles.scss index 6103a34bef..3eaff83014 100644 --- a/console/src/styles.scss +++ b/console/src/styles.scss @@ -274,7 +274,7 @@ h2 { .max-width-container { max-width: 1350px; padding: 0 1.5rem; - padding-top: 4rem; + padding-top: 2rem; padding-left: 4rem; @media only screen and (min-width: 1024px) { @@ -293,7 +293,7 @@ h2 { .enlarged-container { padding: 0 1.5rem; - padding-top: 4rem; + padding-top: 2rem; padding-left: 4rem; @media only screen and (max-width: 500px) { diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss index e08e318e53..baf779d774 100644 --- a/console/src/styles/sidenav-list.scss +++ b/console/src/styles/sidenav-list.scss @@ -32,10 +32,8 @@ .c_label { .count { - background-color: $primary-color; padding: 3px 6px; border-radius: 50vw; - color: white; } } }