mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-11 00:25:12 +00:00
feat: rehauled console (#3525)
* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * lock Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
00f7dbe875
commit
08ae39ae19
@@ -1,173 +1,168 @@
|
||||
<cnsl-detail-layout [backRouterLink]="backroutes" [title]="'IDP.DETAIL.TITLE' | translate"
|
||||
[description]="'IDP.DETAIL.DESCRIPTION' | translate">
|
||||
<div *ngIf="canWrite | async" actions>
|
||||
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="idpactions">
|
||||
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
|
||||
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
|
||||
<cnsl-top-view title="{{'IDP.DETAIL.TITLE' | translate}}"
|
||||
[sub]="idp?.oidcConfig ? ('IDP.OIDC.TITLE' | translate) : idp?.jwtConfig ? ('IDP.JWT.TITLE' | translate) : ''"
|
||||
[isActive]="idp?.state === IDPState.IDP_STATE_ACTIVE" [isInactive]="idp?.state === IDPState.IDP_STATE_INACTIVE"
|
||||
[hasContributors]="false" stateTooltip="{{'IDP.STATES.'+idp?.state | translate}}"
|
||||
[hasActions]="(serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']) | hasRole | async">
|
||||
<ng-template topActions cnslHasRole
|
||||
[hasRole]="serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']">
|
||||
<button mat-menu-item *ngIf="idp?.state !== IDPState.IDP_STATE_INACTIVE"
|
||||
(click)="changeState(IDPState.IDP_STATE_INACTIVE)">
|
||||
{{'ACTIONS.DEACTIVATE' | translate}}
|
||||
</button>
|
||||
<mat-menu #idpactions="matMenu" xPosition="before">
|
||||
<button mat-menu-item *ngIf="idp?.state === IDPState.IDP_STATE_INACTIVE"
|
||||
(click)="changeState(IDPState.IDP_STATE_ACTIVE)">
|
||||
{{'ACTIONS.REACTIVATE' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item matTooltip="{{'IDP.DELETE' | translate}}" (click)="deleteIdp()">
|
||||
<span [style.color]="'var(--warn)'">{{'IDP.DELETE_TITLE' | translate}}</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
<cnsl-info-row topContent *ngIf="idp" [idp]="idp"></cnsl-info-row>
|
||||
</cnsl-top-view>
|
||||
|
||||
<button mat-menu-item *ngIf="idp?.state !== IDPState.IDP_STATE_INACTIVE"
|
||||
(click)="changeState(IDPState.IDP_STATE_INACTIVE)">
|
||||
{{'ACTIONS.DEACTIVATE' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item *ngIf="idp?.state === IDPState.IDP_STATE_INACTIVE"
|
||||
(click)="changeState(IDPState.IDP_STATE_ACTIVE)">
|
||||
{{'ACTIONS.REACTIVATE' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item matTooltip="{{'IDP.DELETE' | translate}}" (click)="deleteIdp()">
|
||||
<span [style.color]="'var(--warn)'">{{'IDP.DELETE_TITLE' | translate}}</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="max-width-container">
|
||||
<form class="idp-form" (ngSubmit)="updateIdp()">
|
||||
<ng-container [formGroup]="idpForm">
|
||||
<div class="idp-content">
|
||||
|
||||
<div class="container">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="name" />
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field class="formfield" appearance="outline">
|
||||
<cnsl-label>{{ 'IDP.STYLE' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="stylingType">
|
||||
<mat-option *ngFor="let field of styleFields" [value]="field">
|
||||
{{ 'IDP.STYLEFIELD.'+field | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-info-row *ngIf="idp" [idp]="idp"></cnsl-info-row>
|
||||
<form class="idp-form" (ngSubmit)="updateIdp()">
|
||||
<ng-container [formGroup]="idpForm">
|
||||
<cnsl-info-section class="auto-reg-info">
|
||||
<div>
|
||||
<p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
|
||||
<mat-checkbox formControlName="autoRegister" [disabled]="(canWrite | async) === false">
|
||||
{{'IDP.AUTOREGISTER' | translate}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</cnsl-info-section>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<button color="primary" mat-raised-button class="continue-button"
|
||||
[disabled]="idpForm.invalid || (canWrite | async) === false" type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ng-container *ngIf="idp?.oidcConfig && oidcConfigForm">
|
||||
<h2>{{'IDP.OIDC.TITLE' | translate}}</h2>
|
||||
<p class="idp-desc cnsl-secondary-text">{{'IDP.OIDC.DESCRIPTION' | translate}}</p>
|
||||
|
||||
<form (ngSubmit)="updateOidcConfig()">
|
||||
<ng-container [formGroup]="oidcConfigForm">
|
||||
<div class="idp-content">
|
||||
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="name" />
|
||||
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="issuer" />
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="clientId" />
|
||||
</cnsl-form-field>
|
||||
<mat-checkbox class="idp-desc cnsl-secondary-text" [(ngModel)]="showIdSecretSection"
|
||||
[disabled]="(canWrite | async) === false" [ngModelOptions]="{standalone: true}">
|
||||
Update Client Secret
|
||||
</mat-checkbox>
|
||||
<cnsl-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
|
||||
<cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="clientSecret" />
|
||||
</cnsl-form-field>
|
||||
<div class="line">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
|
||||
|
||||
<input cnslInput [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
|
||||
</cnsl-form-field>
|
||||
<button (click)="addScope($any($event))" mat-icon-button>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<cnsl-form-field appearance="outline" class="formfield fullwidth">
|
||||
<mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
|
||||
<mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
|
||||
(removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
|
||||
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field class="formfield" appearance="outline">
|
||||
<cnsl-label>{{ 'IDP.STYLE' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="stylingType">
|
||||
<mat-option *ngFor="let field of styleFields" [value]="field">
|
||||
{{ 'IDP.STYLEFIELD.'+field | translate }}
|
||||
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="displayNameMapping">
|
||||
<mat-option *ngFor="let field of mappingFields" [value]="field">
|
||||
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field class="formfield" appearance="outline">
|
||||
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="usernameMapping">
|
||||
<mat-option *ngFor="let field of mappingFields" [value]="field">
|
||||
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-info-section class="auto-reg-info">
|
||||
<div>
|
||||
<p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
|
||||
<mat-checkbox formControlName="autoRegister" [disabled]="(canWrite | async) === false">
|
||||
{{'IDP.AUTOREGISTER' | translate}}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</cnsl-info-section>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<button color="primary" mat-raised-button class="continue-button"
|
||||
[disabled]="idpForm.invalid || (canWrite | async) === false" type="submit">
|
||||
[disabled]="oidcConfigForm.invalid || (canWrite | async) === false" type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="idp?.oidcConfig && oidcConfigForm">
|
||||
<h2>{{'IDP.OIDC.TITLE' | translate}}</h2>
|
||||
<p>{{'IDP.OIDC.DESCRIPTION' | translate}}</p>
|
||||
<ng-container *ngIf="idp?.jwtConfig && jwtConfigForm">
|
||||
<h2>{{'IDP.JWT.TITLE' | translate}}</h2>
|
||||
<p>{{'IDP.JWT.DESCRIPTION' | translate}}</p>
|
||||
|
||||
<form (ngSubmit)="updateOidcConfig()">
|
||||
<ng-container [formGroup]="oidcConfigForm">
|
||||
<div class="idp-content">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="issuer" />
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="clientId" />
|
||||
</cnsl-form-field>
|
||||
<mat-checkbox class="idp-desc" [(ngModel)]="showIdSecretSection" [disabled]="(canWrite | async) === false"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
Update Client Secret
|
||||
</mat-checkbox>
|
||||
<cnsl-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
|
||||
<cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="clientSecret" />
|
||||
</cnsl-form-field>
|
||||
<div class="line">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
|
||||
<form (ngSubmit)="updateJwtConfig()">
|
||||
<ng-container [formGroup]="jwtConfigForm">
|
||||
<div class="idp-content">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="issuer" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<input cnslInput [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
|
||||
</cnsl-form-field>
|
||||
<button (click)="addScope($any($event))" mat-icon-button>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<cnsl-form-field appearance="outline" class="formfield fullwidth">
|
||||
<mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
|
||||
<mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
|
||||
(removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
|
||||
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="headerName" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field class="formfield" appearance="outline">
|
||||
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="displayNameMapping">
|
||||
<mat-option *ngFor="let field of mappingFields" [value]="field">
|
||||
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
<cnsl-form-field class="formfield" appearance="outline">
|
||||
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="usernameMapping">
|
||||
<mat-option *ngFor="let field of mappingFields" [value]="field">
|
||||
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="jwtEndpoint" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<button color="primary" mat-raised-button class="continue-button"
|
||||
[disabled]="oidcConfigForm.invalid || (canWrite | async) === false" type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="keysEndpoint" />
|
||||
</cnsl-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="idp?.jwtConfig && jwtConfigForm">
|
||||
<h2>{{'IDP.JWT.TITLE' | translate}}</h2>
|
||||
<p>{{'IDP.JWT.DESCRIPTION' | translate}}</p>
|
||||
|
||||
<form (ngSubmit)="updateJwtConfig()">
|
||||
<ng-container [formGroup]="jwtConfigForm">
|
||||
<div class="idp-content">
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="issuer" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="headerName" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="jwtEndpoint" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field appearance="outline" class="formfield">
|
||||
<cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
|
||||
<input cnslInput formControlName="keysEndpoint" />
|
||||
</cnsl-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<button color="primary" mat-raised-button class="continue-button"
|
||||
[disabled]="jwtConfigForm.invalid || (canWrite | async) === false" type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</cnsl-detail-layout>
|
||||
<div class="btn-wrapper">
|
||||
<button color="primary" mat-raised-button class="continue-button"
|
||||
[disabled]="jwtConfigForm.invalid || (canWrite | async) === false" type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</div>
|
||||
@@ -1,37 +1,30 @@
|
||||
.idp-form {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
padding: 4rem 1rem 2rem 1rem;
|
||||
}
|
||||
|
||||
.idp-form {
|
||||
border-top: 1px solid #ffffff20;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.idp-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.idp-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 -.5rem;
|
||||
margin: 0 -0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.idp-desc {
|
||||
flex-basis: 100%;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.formfield {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 0.5rem;
|
||||
min-width: 150px;
|
||||
|
||||
.chip {
|
||||
border-radius: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@@ -45,7 +38,7 @@
|
||||
}
|
||||
|
||||
.auto-reg-info {
|
||||
margin: 0 .5rem 1rem .5rem;
|
||||
margin: 0 0.5rem 1rem 0.5rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import { MatChipInputEvent } from '@angular/material/chips';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { switchMap, take, takeUntil } from 'rxjs/operators';
|
||||
import { take } from 'rxjs/operators';
|
||||
import {
|
||||
UpdateIDPJWTConfigRequest,
|
||||
UpdateIDPOIDCConfigRequest,
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
UpdateOrgIDPRequest,
|
||||
} from 'src/app/proto/generated/zitadel/management_pb';
|
||||
import { AdminService } from 'src/app/services/admin.service';
|
||||
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
|
||||
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
@@ -51,9 +52,13 @@ export class IdpComponent implements OnDestroy {
|
||||
|
||||
IDPState: any = IDPState;
|
||||
|
||||
public canWrite: Observable<boolean> = this.authService.isAllowed([this.serviceType === PolicyComponentServiceType.ADMIN ?
|
||||
'iam.idp.write' : this.serviceType === PolicyComponentServiceType.MGMT ?
|
||||
'org.idp.write' : '']);
|
||||
public canWrite: Observable<boolean> = this.authService.isAllowed([
|
||||
this.serviceType === PolicyComponentServiceType.ADMIN
|
||||
? 'iam.idp.write'
|
||||
: this.serviceType === PolicyComponentServiceType.MGMT
|
||||
? 'org.idp.write'
|
||||
: '',
|
||||
]);
|
||||
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
@@ -63,6 +68,7 @@ export class IdpComponent implements OnDestroy {
|
||||
private _location: Location,
|
||||
private authService: GrpcAuthService,
|
||||
private dialog: MatDialog,
|
||||
breadcrumbService: BreadcrumbService,
|
||||
) {
|
||||
this.idpForm = new FormGroup({
|
||||
id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
|
||||
@@ -87,68 +93,80 @@ export class IdpComponent implements OnDestroy {
|
||||
headerName: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
this.route.data.pipe(
|
||||
takeUntil(this.destroy$),
|
||||
switchMap(data => {
|
||||
this.serviceType = data.serviceType;
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
this.service = this.injector.get(ManagementService as Type<ManagementService>);
|
||||
const serviceType = this.route.snapshot.data.serviceType;
|
||||
if (serviceType !== undefined) {
|
||||
this.serviceType = serviceType;
|
||||
|
||||
break;
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
this.service = this.injector.get(AdminService as Type<AdminService>);
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
this.service = this.injector.get(ManagementService as Type<ManagementService>);
|
||||
|
||||
break;
|
||||
}
|
||||
const iambread = new Breadcrumb({
|
||||
type: BreadcrumbType.IAM,
|
||||
name: 'System',
|
||||
routerLink: ['/system'],
|
||||
});
|
||||
const bread: Breadcrumb = {
|
||||
type: BreadcrumbType.ORG,
|
||||
routerLink: ['/org'],
|
||||
};
|
||||
breadcrumbService.setBreadcrumb([iambread, bread]);
|
||||
break;
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
this.service = this.injector.get(AdminService as Type<AdminService>);
|
||||
|
||||
this.mappingFields = [
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
|
||||
this.styleFields = [
|
||||
IDPStylingType.STYLING_TYPE_UNSPECIFIED,
|
||||
IDPStylingType.STYLING_TYPE_GOOGLE];
|
||||
const iamBread = new Breadcrumb({
|
||||
type: BreadcrumbType.IAM,
|
||||
name: 'System',
|
||||
routerLink: ['/system'],
|
||||
});
|
||||
breadcrumbService.setBreadcrumb([iamBread]);
|
||||
break;
|
||||
}
|
||||
|
||||
return this.route.params.pipe(take(1));
|
||||
})).subscribe((params) => {
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
this.checkWrite();
|
||||
this.mappingFields = [
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL,
|
||||
];
|
||||
this.styleFields = [IDPStylingType.STYLING_TYPE_UNSPECIFIED, IDPStylingType.STYLING_TYPE_GOOGLE];
|
||||
}
|
||||
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const idpId = this.route.snapshot.paramMap.get('id');
|
||||
if (idpId) {
|
||||
this.checkWrite();
|
||||
|
||||
(this.service as ManagementService).getOrgIDPByID(id).then(resp => {
|
||||
if (resp.idp) {
|
||||
this.idp = resp.idp;
|
||||
this.idpForm.patchValue(this.idp);
|
||||
if (this.idp.oidcConfig) {
|
||||
this.oidcConfigForm.patchValue(this.idp.oidcConfig);
|
||||
} else if (this.idp.jwtConfig) {
|
||||
this.jwtConfigForm.patchValue(this.idp.jwtConfig);
|
||||
this.jwtIssuer?.setValue(this.idp.jwtConfig.issuer);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
(this.service as AdminService).getIDPByID(id).then(resp => {
|
||||
if (resp.idp) {
|
||||
this.idp = resp.idp;
|
||||
this.idpForm.patchValue(this.idp);
|
||||
if (this.idp.oidcConfig) {
|
||||
this.oidcConfigForm.patchValue(this.idp.oidcConfig);
|
||||
} else if (this.idp.jwtConfig) {
|
||||
this.jwtConfigForm.patchValue(this.idp.jwtConfig);
|
||||
this.jwtIssuer?.setValue(this.idp.jwtConfig.issuer);
|
||||
}
|
||||
}
|
||||
});
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
(this.service as ManagementService).getOrgIDPByID(idpId).then((resp) => {
|
||||
if (resp.idp) {
|
||||
this.idp = resp.idp;
|
||||
this.idpForm.patchValue(this.idp);
|
||||
if (this.idp.oidcConfig) {
|
||||
this.oidcConfigForm.patchValue(this.idp.oidcConfig);
|
||||
} else if (this.idp.jwtConfig) {
|
||||
this.jwtConfigForm.patchValue(this.idp.jwtConfig);
|
||||
this.jwtIssuer?.setValue(this.idp.jwtConfig.issuer);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
(this.service as AdminService).getIDPByID(idpId).then((resp) => {
|
||||
if (resp.idp) {
|
||||
this.idp = resp.idp;
|
||||
this.idpForm.patchValue(this.idp);
|
||||
if (this.idp.oidcConfig) {
|
||||
this.oidcConfigForm.patchValue(this.idp.oidcConfig);
|
||||
} else if (this.idp.jwtConfig) {
|
||||
this.jwtConfigForm.patchValue(this.idp.jwtConfig);
|
||||
this.jwtIssuer?.setValue(this.idp.jwtConfig.issuer);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public checkWrite(): void {
|
||||
this.canWrite.pipe(take(1)).subscribe(canWrite => {
|
||||
this.canWrite.pipe(take(1)).subscribe((canWrite) => {
|
||||
if (canWrite) {
|
||||
this.idpForm.enable();
|
||||
this.oidcConfigForm.enable();
|
||||
@@ -175,22 +193,28 @@ export class IdpComponent implements OnDestroy {
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
dialogRef.afterClosed().subscribe((resp) => {
|
||||
if (resp) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
(this.service as ManagementService).removeOrgIDP(this.idp.id).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
this.router.navigate(this.backroutes);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.removeOrgIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
this.router.navigate(this.backroutes);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
(this.service as AdminService).removeIDP(this.idp.id).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
this.router.navigate(this.backroutes);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.removeIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
this.router.navigate(this.backroutes);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -199,35 +223,47 @@ export class IdpComponent implements OnDestroy {
|
||||
public changeState(state: IDPState): void {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
if (state === IDPState.IDP_STATE_ACTIVE) {
|
||||
(this.service as ManagementService).reactivateOrgIDP(this.idp.id).then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.REACTIVATED', true);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.reactivateOrgIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.REACTIVATED', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (state === IDPState.IDP_STATE_INACTIVE) {
|
||||
(this.service as ManagementService).deactivateOrgIDP(this.idp.id).then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.DEACTIVATED', true);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.deactivateOrgIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.DEACTIVATED', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
if (state === IDPState.IDP_STATE_ACTIVE) {
|
||||
(this.service as AdminService).reactivateIDP(this.idp.id).then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.REACTIVATED', true);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.reactivateIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.REACTIVATED', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (state === IDPState.IDP_STATE_INACTIVE) {
|
||||
(this.service as AdminService).deactivateIDP(this.idp.id).then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.DEACTIVATED', true);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.deactivateIDP(this.idp.id)
|
||||
.then(() => {
|
||||
this.idp.state = state;
|
||||
this.toast.showInfo('IDP.TOAST.DEACTIVATED', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -241,11 +277,14 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
req.setAutoRegister(this.autoRegister?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDP(req).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.updateOrgIDP(req)
|
||||
.then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
const req = new UpdateIDPRequest();
|
||||
|
||||
@@ -254,11 +293,14 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
req.setAutoRegister(this.autoRegister?.value);
|
||||
|
||||
(this.service as AdminService).updateIDP(req).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.updateIDP(req)
|
||||
.then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,11 +316,14 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.displayNameMapping?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.updateOrgIDPOIDCConfig(req)
|
||||
.then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
const req = new UpdateIDPOIDCConfigRequest();
|
||||
|
||||
@@ -290,11 +335,14 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.displayNameMapping?.value);
|
||||
|
||||
(this.service as AdminService).updateIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.updateIDPOIDCConfig(req)
|
||||
.then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,12 +356,15 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setJwtEndpoint(this.jwtEndpoint?.value);
|
||||
req.setKeysEndpoint(this.keyEndpoint?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDPJWTConfig(req).then((jwtConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService)
|
||||
.updateOrgIDPJWTConfig(req)
|
||||
.then((jwtConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
const req = new UpdateIDPJWTConfigRequest();
|
||||
|
||||
@@ -323,12 +374,15 @@ export class IdpComponent implements OnDestroy {
|
||||
req.setJwtEndpoint(this.jwtEndpoint?.value);
|
||||
req.setKeysEndpoint(this.keyEndpoint?.value);
|
||||
|
||||
(this.service as AdminService).updateIDPJWTConfig(req).then((jwtConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.updateIDPJWTConfig(req)
|
||||
.then((jwtConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -365,7 +419,7 @@ export class IdpComponent implements OnDestroy {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return ['/org', 'policy', 'login'];
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam', 'policy', 'login'];
|
||||
return ['/system', 'policy', 'login'];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -405,7 +459,6 @@ export class IdpComponent implements OnDestroy {
|
||||
return this.oidcConfigForm.get('usernameMapping');
|
||||
}
|
||||
|
||||
|
||||
public get jwtIssuer(): AbstractControl | null {
|
||||
return this.jwtConfigForm.get('issuer');
|
||||
}
|
||||
|
||||
@@ -9,11 +9,14 @@ import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
|
||||
import { InputModule } from 'src/app/modules/input/input.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
|
||||
import { InfoRowModule } from '../info-row/info-row.module';
|
||||
import { InfoSectionModule } from '../info-section/info-section.module';
|
||||
import { TopViewModule } from '../top-view/top-view.module';
|
||||
import { WarnDialogModule } from '../warn-dialog/warn-dialog.module';
|
||||
import { IdpRoutingModule } from './idp-routing.module';
|
||||
import { IdpComponent } from './idp.component';
|
||||
@@ -31,13 +34,16 @@ import { IdpComponent } from './idp.component';
|
||||
MatIconModule,
|
||||
InfoSectionModule,
|
||||
MatMenuModule,
|
||||
TopViewModule,
|
||||
MatTooltipModule,
|
||||
MatSelectModule,
|
||||
TranslateModule,
|
||||
MatCheckboxModule,
|
||||
InfoRowModule,
|
||||
MatChipsModule,
|
||||
HasRoleModule,
|
||||
HasRolePipeModule,
|
||||
DetailLayoutModule,
|
||||
],
|
||||
})
|
||||
export class IdpModule { }
|
||||
export class IdpModule {}
|
||||
|
||||
Reference in New Issue
Block a user