andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-13 01:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): angular 12, migrate grpc lib, ui element fixes (#1740)

Browse Source 
* fix: is default

* fix: feature tile in org, iam, neutral color for info boxes

* lint

* consolidation, ui elements

* feat(console): angular 12, migrate deprecated grpc to @grpc/grpc-js (#1741)

* update cli core

* update material

* mig

* migrate grpc to grpc-js

* audit

* lint

* node lts version, ng12 deprecation

* rem comment

* disable inlinestyles

* fix iam feature link, binding
This commit is contained in:
Max Peintner
2021-06-01 07:02:49 +02:00
committed by GitHub
parent 4fde6df477
commit 74ff154b19
51 changed files with 20195 additions and 7911 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/iam/iam.component.html
+1 -13
View File
@@ -5,19 +5,7 @@
<h2>{{'FEATURES.TITLE' | translate}}</h2>
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
<div *ngIf="features" class="tier">
<mat-icon class="icon">stars</mat-icon>
<div class="text" *ngIf="features.tier">
<p class="title"><strong>{{features.tier.name}}</strong></p>
<p>{{features.tier?.description}}</p>
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
<p>{{features.tier?.statusInfo}}</p>
</div>
<span class="fill-space"></span>
<a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
class="las la-external-link-alt"></i></a>
<button mat-raised-button [routerLink]="['/iam','features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
</div>
<cnsl-zitadel-tier [features]="features" [iam]="true"></cnsl-zitadel-tier>
<app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
</div>
console/src/app/pages/iam/iam.component.scss
-44
View File
@@ -18,47 +18,3 @@ h2 {
text-transform: uppercase;
margin-top: 2rem;
}
.tier {
display: flex;
flex-direction: row;
padding: 1rem;
border-radius: .5rem;
color: white;
background-color: rgb(245, 203, 99);
margin-bottom: .5rem;
.ext {
margin-right: .5rem;
align-self: center;
color: inherit;
}
.icon {
margin-right: 1rem;
font-size: 2rem;
}
.text {
display: flex;
flex-direction: column;
p {
margin: 0;
font-size: 14px;
}
.title {
font-size: 16px;
margin-bottom: .5rem;
}
}
.fill-space {
flex: 1;
}
button {
min-width: 200px;
}
}
console/src/app/pages/iam/iam.module.ts
+34 -32
View File
@@ -22,6 +22,7 @@ import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module
import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
import { ZitadelTierModule } from 'src/app/modules/zitadel-tier/zitadel-tier.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
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';
@@ -33,37 +34,38 @@ import { IamViewsComponent } from './iam-views/iam-views.component';
import { IamComponent } from './iam.component';
@NgModule({
declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
imports: [
CommonModule,
IamRoutingModule,
ChangesModule,
CardModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
HasRoleModule,
MatCheckboxModule,
MetaLayoutModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
InputModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatDialogModule,
ContributorsModule,
LocalizedDatePipeModule,
TimestampToDatePipeModule,
SharedModule,
RefreshTableModule,
HasRolePipeModule,
MatSortModule,
PolicyGridModule,
],
declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
imports: [
CommonModule,
IamRoutingModule,
ChangesModule,
CardModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
HasRoleModule,
MatCheckboxModule,
MetaLayoutModule,
MatIconModule,
MatTableModule,
ZitadelTierModule,
MatPaginatorModule,
InputModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatDialogModule,
ContributorsModule,
LocalizedDatePipeModule,
TimestampToDatePipeModule,
SharedModule,
RefreshTableModule,
HasRolePipeModule,
MatSortModule,
PolicyGridModule,
],
})
export class IamModule { }
console/src/app/pages/orgs/org-detail/org-detail.component.html
+1 -14
View File
@@ -44,20 +44,7 @@
<ng-container *ngIf="['features.read'] | hasRole | async">
<h2>{{'FEATURES.TITLE' | translate}}</h2>
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
<div *ngIf="features" class="tier">
<mat-icon class="icon">stars</mat-icon>
<div class="text" *ngIf="features.tier">
<p class="title"><strong>{{features.tier.name}}</strong></p>
<p>{{features.tier?.description}}</p>
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
<p>{{features.tier?.statusInfo}}</p>
</div>
<span class="fill-space"></span>
<a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
target="_blank"><i class="las la-external-link-alt"></i></a>
<button mat-raised-button [routerLink]="['features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
</div>
<cnsl-zitadel-tier [features]="features"></cnsl-zitadel-tier>
</ng-container>
<ng-template appHasRole [appHasRole]="['policy.read']">
console/src/app/pages/orgs/org-detail/org-detail.component.scss
-44
View File
@@ -19,50 +19,6 @@ h2 {
margin-bottom: 2rem;
}
.tier {
display: flex;
flex-direction: row;
padding: 1rem;
border-radius: .5rem;
color: white;
background-color: rgb(245, 203, 99);
margin-bottom: .5rem;
.ext {
margin-right: .5rem;
align-self: center;
color: inherit;
}
.icon {
margin-right: 1rem;
font-size: 2rem;
}
.text {
display: flex;
flex-direction: column;
p {
margin: 0;
font-size: 14px;
}
.title {
font-size: 16px;
margin-bottom: .5rem;
}
}
.fill-space {
flex: 1;
}
button {
min-width: 200px;
}
}
.domain {
display: flex;
align-items: center;
console/src/app/pages/orgs/orgs.module.ts
+2
View File
@@ -26,6 +26,7 @@ import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { ChangesModule } from '../../modules/changes/changes.module';
import { ZitadelTierModule } from '../../modules/zitadel-tier/zitadel-tier.module';
import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
import { OrgDetailComponent } from './org-detail/org-detail.component';
@@ -63,6 +64,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
CopyToClipboardModule,
PolicyGridModule,
FeaturesModule,
ZitadelTierModule,
],
})
export class OrgsModule { }
console/src/app/pages/projects/project-create/project-create.component.html
+1 -1
View File
@@ -20,7 +20,7 @@
<button color="primary" mat-raised-button class="continue-button" [disabled]="!project.name" cdkFocusInitial
type="submit">
{{'CONTINUE' | translate}}
{{'ACTIONS.CONTINUE' | translate}}
</button>
</form>
</div>
console/src/app/pages/user-grant-create/user-grant-create.component.html
+3 -3
View File
@@ -3,7 +3,7 @@
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
<h1 class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
{{ currentCreateStep }} of
{{ STEPS }}</span>
</div>
@@ -17,7 +17,7 @@
</p>
<ng-container>
<h1>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h1>
<h2>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h2>
<app-search-user-autocomplete class="block" singleOutput="true" [users]="user ? [user] : []"
(selectionChanged)="selectUser($event)"
@@ -26,7 +26,7 @@
</ng-container>
<ng-container *ngIf="context && (context == UserGrantContext.USER || context == UserGrantContext.NONE)">
<h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
<h2>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h2>
<app-search-project-autocomplete class="block" singleOutput="true"
(selectionChanged)="selectProject($event)">
console/src/app/pages/user-grant-create/user-grant-create.component.scss
+6 -18
View File
@@ -1,4 +1,3 @@
.container {
padding: 4rem 4rem 2rem 4rem;
@@ -32,23 +31,6 @@
display: block;
}
.column {
display: flex;
flex-direction: column;
.formfield {
width: 400px;
input {
font-size: 1.5rem;
}
&.autocomplete {
margin-top: 1rem;
}
}
}
.btn-container {
display: flex;
justify-content: space-between;
@@ -74,3 +56,9 @@
margin: auto;
}
}
h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 2rem;
}
console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
+2 -2
View File
@@ -1,9 +1,9 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin theme-card($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$primary-dark: mat.get-color-from-palette($primary, A900);
/* stylelint-enable */
.theme-conent,
console/src/app/pages/users/user-detail/memberships/memberships.component.scss
+3 -3
View File
@@ -1,11 +1,11 @@
@import '~@angular/material/theming';
@use '~@angular/material' as mat;
@mixin membership-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$primary-dark: mat.get-color-from-palette($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat-color($accent, 500);
$accent-color: mat.get-color-from-palette($accent, 500);
/* stylelint-enable */
.membership-groups {