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

feat(console): add idp auto-register option to detail and create page (#2344)

Browse Source 
* idp detail auto register option, idp create

* fix idp displaynamemapping, i18n

* rm log

* rm log
This commit is contained in:
Max Peintner 2021-09-14 09:44:37 +02:00 committed by GitHub
parent 0300871767
commit 04f79d2e86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 106 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
console/src/app/modules/idp-create/idp-create.component.html
View File

@ -25,8 +25,17 @@
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
</div>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
<mat-checkbox formControlName="autoRegister">
{{'IDP.AUTOREGISTER' | translate}}
</mat-checkbox>
</div>
</cnsl-info-section>
<div class="content">
<p class="desc">Client Id / Client Secret</p>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />

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

@ -28,6 +28,16 @@
}
}
.auto-reg-info {
margin: 0 .5rem 1rem .5rem;
display: block;
width: 100%;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.content {
display: flex;
margin: 0 -.5rem;

10
console/src/app/modules/idp-create/idp-create.component.ts
View File

@ -48,6 +48,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
scopesList: new FormControl(['openid', 'profile', 'email'], []),
idpDisplayNameMapping: new FormControl(0),
usernameMapping: new FormControl(0),
autoRegister: new FormControl(false),
});
this.route.data.pipe(take(1)).subscribe(data => {
@ -92,6 +93,8 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
req.setScopesList(this.scopesList?.value);
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
req.setUsernameMapping(this.usernameMapping?.value);
req.setAutoRegister(this.autoRegister?.value);
this.loading = true;
(this.service as ManagementService).addOrgOIDCIDP(req).then((idp) => {
setTimeout(() => {
@ -113,6 +116,8 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
req.setScopesList(this.scopesList?.value);
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
req.setUsernameMapping(this.usernameMapping?.value);
req.setAutoRegister(this.autoRegister?.value);
this.loading = true;
(this.service as AdminService).addOIDCIDP(req).then((idp) => {
setTimeout(() => {
@ -171,10 +176,15 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
public get issuer(): AbstractControl | null {
return this.formGroup.get('issuer');
}
public get scopesList(): AbstractControl | null {
return this.formGroup.get('scopesList');
}
public get autoRegister(): AbstractControl | null {
return this.formGroup.get('autoRegister');
}
public get idpDisplayNameMapping(): AbstractControl | null {
return this.formGroup.get('idpDisplayNameMapping');
}

34
console/src/app/modules/idp-create/idp-create.module.ts
View File

@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@ -10,24 +11,27 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { IdpCreateRoutingModule } from './idp-create-routing.module';
import { IdpCreateComponent } from './idp-create.component';
@NgModule({
declarations: [IdpCreateComponent],
imports: [
IdpCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatSelectModule,
MatIconModule,
MatChipsModule,
MatTooltipModule,
TranslateModule,
MatProgressBarModule,
],
declarations: [IdpCreateComponent],
imports: [
IdpCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InfoSectionModule,
InputModule,
MatButtonModule,
MatSelectModule,
MatIconModule,
MatChipsModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
MatProgressBarModule,
],
})
export class IdpCreateModule { }

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

@ -20,6 +20,15 @@
</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>
@ -77,7 +86,7 @@
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-select formControlName="displayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
</mat-option>

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

@ -39,6 +39,16 @@
}
}
.auto-reg-info {
margin: 0 .5rem 1rem .5rem;
display: block;
width: 100%;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.line {
display: flex;
align-items: flex-end;

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

@ -3,7 +3,7 @@ import { Location } from '@angular/common';
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 { ActivatedRoute } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { switchMap, take, takeUntil } from 'rxjs/operators';
import { UpdateIDPOIDCConfigRequest, UpdateIDPRequest } from 'src/app/proto/generated/zitadel/admin_pb';
@ -51,6 +51,7 @@ export class IdpComponent implements OnDestroy {
id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
name: new FormControl('', [Validators.required]),
stylingType: new FormControl('', [Validators.required]),
autoRegister: new FormControl(false, [Validators.required]),
});
this.oidcConfigForm = new FormGroup({
@ -58,7 +59,7 @@ export class IdpComponent implements OnDestroy {
clientSecret: new FormControl(''),
issuer: new FormControl('', [Validators.required]),
scopesList: new FormControl([], []),
idpDisplayNameMapping: new FormControl(0),
displayNameMapping: new FormControl(0),
usernameMapping: new FormControl(0),
});
@ -121,9 +122,11 @@ export class IdpComponent implements OnDestroy {
if (canWrite) {
this.idpForm.enable();
this.oidcConfigForm.enable();
this.id?.disable();
} else {
this.idpForm.disable();
this.oidcConfigForm.disable();
this.id?.disable();
}
});
}
@ -133,10 +136,6 @@ export class IdpComponent implements OnDestroy {
this.destroy$.complete();
}
private getData({ projectid }: Params): void {
this.projectId = projectid;
}
public updateIdp(): void {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
const req = new UpdateOrgIDPRequest();
@ -144,6 +143,7 @@ export class IdpComponent implements OnDestroy {
req.setIdpId(this.id?.value);
req.setName(this.name?.value);
req.setStylingType(this.stylingType?.value);
req.setAutoRegister(this.autoRegister?.value);
(this.service as ManagementService).updateOrgIDP(req).then(() => {
this.toast.showInfo('IDP.TOAST.SAVED', true);
@ -157,6 +157,7 @@ export class IdpComponent implements OnDestroy {
req.setIdpId(this.id?.value);
req.setName(this.name?.value);
req.setStylingType(this.stylingType?.value);
req.setAutoRegister(this.autoRegister?.value);
(this.service as AdminService).updateIDP(req).then(() => {
this.toast.showInfo('IDP.TOAST.SAVED', true);
@ -177,7 +178,7 @@ export class IdpComponent implements OnDestroy {
req.setIssuer(this.issuer?.value);
req.setScopesList(this.scopesList?.value);
req.setUsernameMapping(this.usernameMapping?.value);
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
req.setDisplayNameMapping(this.displayNameMapping?.value);
(this.service as ManagementService).updateOrgIDPOIDCConfig(req).then((oidcConfig) => {
this.toast.showInfo('IDP.TOAST.SAVED', true);
@ -194,7 +195,7 @@ export class IdpComponent implements OnDestroy {
req.setIssuer(this.issuer?.value);
req.setScopesList(this.scopesList?.value);
req.setUsernameMapping(this.usernameMapping?.value);
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
req.setDisplayNameMapping(this.displayNameMapping?.value);
(this.service as AdminService).updateIDPOIDCConfig(req).then((oidcConfig) => {
this.toast.showInfo('IDP.TOAST.SAVED', true);
@ -254,6 +255,10 @@ export class IdpComponent implements OnDestroy {
return this.idpForm.get('stylingType');
}
public get autoRegister(): AbstractControl | null {
return this.idpForm.get('autoRegister');
}
public get clientId(): AbstractControl | null {
return this.oidcConfigForm.get('clientId');
}
@ -270,8 +275,8 @@ export class IdpComponent implements OnDestroy {
return this.oidcConfigForm.get('scopesList');
}
public get idpDisplayNameMapping(): AbstractControl | null {
return this.oidcConfigForm.get('idpDisplayNameMapping');
public get displayNameMapping(): AbstractControl | null {
return this.oidcConfigForm.get('displayNameMapping');
}
public get usernameMapping(): AbstractControl | null {

34
console/src/app/modules/idp/idp.module.ts
View File

@ -11,25 +11,27 @@ import { TranslateModule } from '@ngx-translate/core';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { IdpRoutingModule } from './idp-routing.module';
import { IdpComponent } from './idp.component';
@NgModule({
declarations: [IdpComponent],
imports: [
CommonModule,
IdpRoutingModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
MatSelectModule,
TranslateModule,
MatCheckboxModule,
MatChipsModule,
DetailLayoutModule,
],
declarations: [IdpComponent],
imports: [
CommonModule,
IdpRoutingModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatIconModule,
InfoSectionModule,
MatTooltipModule,
MatSelectModule,
TranslateModule,
MatCheckboxModule,
MatChipsModule,
DetailLayoutModule,
],
})
export class IdpModule { }

2
console/src/assets/i18n/de.json
View File

@ -1167,6 +1167,8 @@
"0": "kein Styling",
"1": "Google"
},
"AUTOREGISTER":"Automatische Registrierung",
"AUTOREGISTER_DESC":"Wenn aktiviert und noch kein Account vorhanden ist, wird einer für den entsprechenden Benutzer erstellt.",
"TYPE": "Typ",
"ID": "ID",
"NAME": "Name",

2
console/src/assets/i18n/en.json
View File

@ -1169,6 +1169,8 @@
"0": "No Styling",
"1": "Google"
},
"AUTOREGISTER":"Auto Register",
"AUTOREGISTER_DESC":"If selected and no account exists yet, one will be created.",
"TYPE": "Type",
"ID": "ID",
"NAME": "Name",