TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 20:47:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): idp write access (#2258)

Browse Source 
* fix: idp

* disable idp form in detail

* lint

* change list idp request

* fix external idp removal
This commit is contained in:
Max Peintner 2021-08-26 08:15:00 +02:00 committed by GitHub
parent 34002ec834
commit cd629a5d1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 179 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
console/src/app/modules/idp-table/idp-table.component.html
View File

@ -86,16 +86,15 @@
<td mat-cell *matCellDef="let idp">
<button
[disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IDPOwnerType.IDP_OWNER_TYPE_ORG"
mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.DELETE' | translate}}"
mat-icon-button color="warn" matTooltip="{{'ACTIONS.REMOVE' | translate}}"
(click)="removeIdp(idp)">
<i class="las la-trash"></i>
<mat-icon>remove_circle</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight"
[ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IDPOwnerType.IDP_OWNER_TYPE_SYSTEM}"
mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>

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

@ -40,10 +40,6 @@ td {
tr {
outline: none;
&.disabled * {
opacity: .8;
}
button {
visibility: hidden;
}
@ -53,6 +49,12 @@ tr {
visibility: visible;
}
}
&.disabled,
&.disabled * {
opacity: .8;
cursor: default;
}
}
.avatar {

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

@ -24,7 +24,7 @@
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid"
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid || (canWrite | async) === false"
type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
@ -46,7 +46,7 @@
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
</cnsl-form-field>
<mat-checkbox class="desc" [(ngModel)]="showIdSecretSection"
<mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [disabled]="(canWrite | async) === false"
[ngModelOptions]="{standalone: true}">
Update Client Secret
</mat-checkbox>
@ -69,7 +69,7 @@
<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)">
removable (removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
@ -96,7 +96,7 @@
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button"
[disabled]="oidcConfigForm.invalid" type="submit">
[disabled]="oidcConfigForm.invalid || (canWrite | async) === false" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

124
console/src/app/modules/idp/idp.component.ts
View File

@ -1,15 +1,16 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, OnDestroy, OnInit, Type } from '@angular/core';
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';
import { switchMap, take, takeUntil } from 'rxjs/operators';
import { UpdateIDPOIDCConfigRequest, UpdateIDPRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { IDPStylingType, OIDCMappingField } from 'src/app/proto/generated/zitadel/idp_pb';
import { UpdateOrgIDPOIDCConfigRequest, UpdateOrgIDPRequest } from 'src/app/proto/generated/zitadel/management_pb';
import { AdminService } from 'src/app/services/admin.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';
@ -20,7 +21,7 @@ import { PolicyComponentServiceType } from '../policies/policy-component-types.e
templateUrl: './idp.component.html',
styleUrls: ['./idp.component.scss'],
})
export class IdpComponent implements OnInit, OnDestroy {
export class IdpComponent implements OnDestroy {
public mappingFields: OIDCMappingField[] = [];
public styleFields: IDPStylingType[] = [];
@ -29,17 +30,22 @@ export class IdpComponent implements OnInit, OnDestroy {
private service!: ManagementService | AdminService;
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
private subscription?: Subscription;
private destroy$: Subject<void> = new Subject();
public projectId: string = '';
public idpForm!: FormGroup;
public oidcConfigForm!: FormGroup;
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,
private injector: Injector,
private route: ActivatedRoute,
private _location: Location,
private authService: GrpcAuthService,
) {
this.idpForm = new FormGroup({
id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
@ -56,61 +62,75 @@ export class IdpComponent implements OnInit, OnDestroy {
usernameMapping: new FormControl(0),
});
this.route.data.pipe(switchMap(data => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
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>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
this.mappingFields = [
OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
this.styleFields = [
IDPStylingType.STYLING_TYPE_UNSPECIFIED,
IDPStylingType.STYLING_TYPE_GOOGLE];
return this.route.params.pipe(take(1));
})).subscribe((params) => {
const { id } = params;
if (id) {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
(this.service as ManagementService).getOrgIDPByID(id).then(resp => {
if (resp.idp) {
const idpObject = resp.idp;
this.idpForm.patchValue(idpObject);
if (idpObject.oidcConfig) {
this.oidcConfigForm.patchValue(idpObject.oidcConfig);
}
}
});
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
(this.service as AdminService).getIDPByID(id).then(resp => {
if (resp.idp) {
const idpObject = resp.idp;
this.idpForm.patchValue(idpObject);
if (idpObject.oidcConfig) {
this.oidcConfigForm.patchValue(idpObject.oidcConfig);
}
}
});
break;
}
this.mappingFields = [
OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
this.styleFields = [
IDPStylingType.STYLING_TYPE_UNSPECIFIED,
IDPStylingType.STYLING_TYPE_GOOGLE];
return this.route.params.pipe(take(1));
})).subscribe((params) => {
const { id } = params;
if (id) {
this.checkWrite();
if (this.serviceType === PolicyComponentServiceType.MGMT) {
(this.service as ManagementService).getOrgIDPByID(id).then(resp => {
if (resp.idp) {
const idpObject = resp.idp;
this.idpForm.patchValue(idpObject);
if (idpObject.oidcConfig) {
this.oidcConfigForm.patchValue(idpObject.oidcConfig);
}
}
});
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
(this.service as AdminService).getIDPByID(id).then(resp => {
if (resp.idp) {
const idpObject = resp.idp;
this.idpForm.patchValue(idpObject);
if (idpObject.oidcConfig) {
this.oidcConfigForm.patchValue(idpObject.oidcConfig);
}
}
});
}
}
});
}
public checkWrite(): void {
this.canWrite.pipe(take(1)).subscribe(canWrite => {
if (canWrite) {
this.idpForm.enable();
this.oidcConfigForm.enable();
} else {
this.idpForm.disable();
this.oidcConfigForm.disable();
}
});
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.destroy$.next();
this.destroy$.complete();
}
private getData({ projectid }: Params): void {

8
console/src/app/modules/mfa-table/mfa-table.component.scss
View File

@ -1,4 +1,3 @@
.t .sp_wrapper {
display: block;
}
@ -22,7 +21,6 @@
justify-content: center;
margin: .5rem;
padding: 10px;
cursor: pointer;
position: relative;
min-height: 70px;
min-width: 150px;
@ -43,6 +41,8 @@
}
&:not(.disabled) {
cursor: default;
&:hover {
.rm {
display: block;
@ -55,4 +55,8 @@
cursor: not-allowed;
}
}
.new-mfa:not(.disabled) {
cursor: pointer;
}
}

134
console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.ts
View File

@ -2,80 +2,98 @@ import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { IDP, IDPOwnerType, IDPOwnerTypeQuery } from 'src/app/proto/generated/zitadel/idp_pb';
import { IDPQuery } from 'src/app/proto/generated/zitadel/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { PolicyComponentServiceType } from '../../policy-component-types.enum';
@Component({
selector: 'app-add-idp-dialog',
templateUrl: './add-idp-dialog.component.html',
styleUrls: ['./add-idp-dialog.component.scss'],
selector: 'app-add-idp-dialog',
templateUrl: './add-idp-dialog.component.html',
styleUrls: ['./add-idp-dialog.component.scss'],
})
export class AddIdpDialogComponent {
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public idpType!: IDPOwnerType;
public idpTypes: IDPOwnerType[] = [
IDPOwnerType.IDP_OWNER_TYPE_SYSTEM,
IDPOwnerType.IDP_OWNER_TYPE_ORG,
];
public idpType!: IDPOwnerType;
public idpTypes: IDPOwnerType[] = [
IDPOwnerType.IDP_OWNER_TYPE_SYSTEM,
IDPOwnerType.IDP_OWNER_TYPE_ORG,
];
public idp: IDP.AsObject | undefined = undefined;
public availableIdps: Array<IDP.AsObject[] | IDP.AsObject> | string[] = [];
public idp: IDP.AsObject | undefined = undefined;
public availableIdps: Array<IDP.AsObject[] | IDP.AsObject> | string[] = [];
constructor(
private mgmtService: ManagementService,
private adminService: AdminService,
public dialogRef: MatDialogRef<AddIdpDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
if (data.serviceType) {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.idpType = IDPOwnerType.IDP_OWNER_TYPE_ORG;
break;
case PolicyComponentServiceType.ADMIN:
this.idpType = IDPOwnerType.IDP_OWNER_TYPE_SYSTEM;
break;
}
}
this.loadIdps();
constructor(
private mgmtService: ManagementService,
private toast: ToastService,
public dialogRef: MatDialogRef<AddIdpDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
if (data.serviceType) {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.idpType = IDPOwnerType.IDP_OWNER_TYPE_ORG;
break;
case PolicyComponentServiceType.ADMIN:
this.idpType = IDPOwnerType.IDP_OWNER_TYPE_SYSTEM;
break;
}
}
public loadIdps(): void {
this.idp = undefined;
switch (this.idpType) {
case IDPOwnerType.IDP_OWNER_TYPE_ORG:
const query: IDPQuery = new IDPQuery();
const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
idpOTQ.setOwnerType(this.idpType);
query.setOwnerTypeQuery(idpOTQ);
this.loadIdps();
}
this.mgmtService.listOrgIDPs(undefined, undefined, [query]).then(resp => {
this.availableIdps = resp.resultList;
});
break;
case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
this.adminService.listIDPs().then(resp => {
this.availableIdps = resp.resultList;
});
break;
public loadIdps(): void {
this.idp = undefined;
}
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialogWithSuccess(): void {
this.dialogRef.close({
idp: this.idp,
type: this.idpType,
switch (this.idpType) {
case IDPOwnerType.IDP_OWNER_TYPE_ORG:
const query: IDPQuery = new IDPQuery();
const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
idpOTQ.setOwnerType(this.idpType);
query.setOwnerTypeQuery(idpOTQ);
const orgQuery = new IDPQuery();
const orgQ = new IDPOwnerTypeQuery();
orgQ.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
orgQuery.setOwnerTypeQuery(orgQ);
this.mgmtService.listOrgIDPs(undefined, undefined, [orgQuery]).then(resp => {
this.availableIdps = resp.resultList;
}).catch(error => {
this.availableIdps = [];
this.toast.showError(error);
});
break;
case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
const iamQuery = new IDPQuery();
const iamQ = new IDPOwnerTypeQuery();
iamQ.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_SYSTEM);
iamQuery.setOwnerTypeQuery(iamQ);
this.mgmtService.listOrgIDPs(undefined, undefined, [iamQuery]).then(resp => {
this.availableIdps = resp.resultList;
}).catch(error => {
this.availableIdps = [];
this.toast.showError(error);
});
break;
}
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialogWithSuccess(): void {
this.dialogRef.close({
idp: this.idp,
type: this.idpType,
});
}
}

10
console/src/app/modules/policies/login-policy/login-policy.component.html
View File

@ -177,7 +177,7 @@
<div class="idps">
<div class="idp"
[ngClass]="{'disabled': disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false)}"
[ngClass]="{'disabled': (disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))}"
*ngFor="let idp of idps">
<button
[disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false)"
@ -206,13 +206,7 @@
<ng-template appHasRole [appHasRole]="['org.idp.read']">
<app-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}"
[expanded]="false">
<div card-actions>
<i class="lab la-google"></i>
<i class="lab la-facebook"></i>
<i class="lab la-apple"></i>
<i class="lab la-github"></i>
<i class="lab la-gitlab"></i>
</div>
<app-idp-table [service]="service" [serviceType]="serviceType"
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false || ((serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))">
</app-idp-table>

7
console/src/app/modules/policies/login-policy/login-policy.component.scss
View File

@ -77,7 +77,6 @@
padding: 10px;
border: 1px solid var(--grey);
border-radius: .5rem;
cursor: pointer;
position: relative;
min-height: 70px;
min-width: 150px;
@ -106,6 +105,8 @@
}
&:not(.disabled) {
cursor: default;
&:hover {
.rm {
display: block;
@ -119,6 +120,10 @@
object-fit: scale-down;
}
}
.new-idp:not(.disabled) {
cursor: pointer;
}
}
.divider {

2
console/src/app/pages/orgs/orgs-routing.module.ts
View File

@ -34,7 +34,7 @@ const routes: Routes = [
loadChildren: () => import('src/app/modules/idp/idp.module').then(m => m.IdpModule),
canActivate: [RoleGuard],
data: {
roles: ['iam.idp.read'],
roles: ['org.idp.read'],
serviceType: PolicyComponentServiceType.MGMT,
},
},

4
console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
View File

@ -102,10 +102,10 @@ export class ExternalIdpsComponent implements OnInit {
let promise;
if (this.service instanceof ManagementService) {
promise = (this.service as ManagementService)
.removeHumanLinkedIDP(idp.providedUserId, idp.idpId, idp.userId);
.removeHumanLinkedIDP(idp.idpId, idp.providedUserId, idp.userId);
} else if (this.service instanceof GrpcAuthService) {
promise = (this.service as GrpcAuthService)
.removeMyLinkedIDP(idp.providedUserId, idp.idpId);
.removeMyLinkedIDP(idp.idpId, idp.providedUserId);
}
if (promise) {

4
console/src/app/services/grpc-auth.service.ts
View File

@ -429,11 +429,11 @@ export class GrpcAuthService {
}
public removeMyLinkedIDP(
externalUserId: string,
idpId: string,
linkedUserId: string,
): Promise<RemoveMyLinkedIDPResponse.AsObject> {
const req = new RemoveMyLinkedIDPRequest();
req.setLinkedUserId(externalUserId);
req.setLinkedUserId(linkedUserId);
req.setIdpId(idpId);
return this.grpcService.auth.removeMyLinkedIDP(req, null).then(resp => resp.toObject());
}

1
console/src/app/services/mgmt.service.ts
View File

@ -839,7 +839,6 @@ export class ManagementService {
linkedUserId: string,
): Promise<RemoveHumanLinkedIDPResponse.AsObject> {
const req = new RemoveHumanLinkedIDPRequest();
req.setUserId(userId);
req.setIdpId(idpId);
req.setUserId(userId);
req.setLinkedUserId(linkedUserId);