From 04f79d2e865b4bde518bcd3ff0773e19428dbe19 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Tue, 14 Sep 2021 09:44:37 +0200 Subject: [PATCH] feat(console): add idp auto-register option to detail and create page (#2344) * idp detail auto register option, idp create * fix idp displaynamemapping, i18n * rm log * rm log --- .../idp-create/idp-create.component.html | 11 +++++- .../idp-create/idp-create.component.scss | 10 ++++++ .../idp-create/idp-create.component.ts | 10 ++++++ .../modules/idp-create/idp-create.module.ts | 34 +++++++++++-------- .../src/app/modules/idp/idp.component.html | 11 +++++- .../src/app/modules/idp/idp.component.scss | 10 ++++++ console/src/app/modules/idp/idp.component.ts | 25 ++++++++------ console/src/app/modules/idp/idp.module.ts | 34 ++++++++++--------- console/src/assets/i18n/de.json | 2 ++ console/src/assets/i18n/en.json | 2 ++ 10 files changed, 106 insertions(+), 43 deletions(-) diff --git a/console/src/app/modules/idp-create/idp-create.component.html b/console/src/app/modules/idp-create/idp-create.component.html index 3f7f3a76b..813ea06a2 100644 --- a/console/src/app/modules/idp-create/idp-create.component.html +++ b/console/src/app/modules/idp-create/idp-create.component.html @@ -25,8 +25,17 @@ + + +
+

{{'IDP.AUTOREGISTER_DESC' | translate}}

+ + {{'IDP.AUTOREGISTER' | translate}} + +
+ +
-

Client Id / Client Secret

{{ 'IDP.CLIENTID' | translate }} diff --git a/console/src/app/modules/idp-create/idp-create.component.scss b/console/src/app/modules/idp-create/idp-create.component.scss index 9b44629fe..97397c644 100644 --- a/console/src/app/modules/idp-create/idp-create.component.scss +++ b/console/src/app/modules/idp-create/idp-create.component.scss @@ -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; diff --git a/console/src/app/modules/idp-create/idp-create.component.ts b/console/src/app/modules/idp-create/idp-create.component.ts index 8001cc43e..bffaa4d16 100644 --- a/console/src/app/modules/idp-create/idp-create.component.ts +++ b/console/src/app/modules/idp-create/idp-create.component.ts @@ -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'); } diff --git a/console/src/app/modules/idp-create/idp-create.module.ts b/console/src/app/modules/idp-create/idp-create.module.ts index bb176bcdd..e8ff5cdb8 100644 --- a/console/src/app/modules/idp-create/idp-create.module.ts +++ b/console/src/app/modules/idp-create/idp-create.module.ts @@ -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 { } diff --git a/console/src/app/modules/idp/idp.component.html b/console/src/app/modules/idp/idp.component.html index 5a34d37e6..caaab96d8 100644 --- a/console/src/app/modules/idp/idp.component.html +++ b/console/src/app/modules/idp/idp.component.html @@ -20,6 +20,15 @@ + + +
+

{{'IDP.AUTOREGISTER_DESC' | translate}}

+ + {{'IDP.AUTOREGISTER' | translate}} + +
+
@@ -77,7 +86,7 @@ {{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }} - + {{ 'IDP.MAPPINGFIELD.'+field | translate }} diff --git a/console/src/app/modules/idp/idp.component.scss b/console/src/app/modules/idp/idp.component.scss index 910855284..c599d021e 100644 --- a/console/src/app/modules/idp/idp.component.scss +++ b/console/src/app/modules/idp/idp.component.scss @@ -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; diff --git a/console/src/app/modules/idp/idp.component.ts b/console/src/app/modules/idp/idp.component.ts index 55a37a9e7..17be80656 100644 --- a/console/src/app/modules/idp/idp.component.ts +++ b/console/src/app/modules/idp/idp.component.ts @@ -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 { diff --git a/console/src/app/modules/idp/idp.module.ts b/console/src/app/modules/idp/idp.module.ts index 8a1d73cf1..0e51572ae 100644 --- a/console/src/app/modules/idp/idp.module.ts +++ b/console/src/app/modules/idp/idp.module.ts @@ -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 { } diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json index 4509bc565..62b411761 100644 --- a/console/src/assets/i18n/de.json +++ b/console/src/assets/i18n/de.json @@ -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", diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index 110a48ec6..07aa62ea3 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -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",