\ No newline at end of file
diff --git a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.html b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.html
index 5999665d07..b78687189f 100644
--- a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.html
+++ b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.html
@@ -1,6 +1,6 @@
-
+
\ No newline at end of file
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 97397c644b..0e04172e42 100644
--- a/console/src/app/modules/idp-create/idp-create.component.scss
+++ b/console/src/app/modules/idp-create/idp-create.component.scss
@@ -1,3 +1,7 @@
+.desc {
+ color: var(--grey);
+ font-size: 14px;
+}
.container {
padding: 4rem 4rem 2rem 4rem;
@@ -29,7 +33,6 @@
}
.auto-reg-info {
- margin: 0 .5rem 1rem .5rem;
display: block;
width: 100%;
@@ -38,7 +41,7 @@
}
}
-.content {
+.idp-content {
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
@@ -51,7 +54,7 @@
}
.formfield {
- flex: 1 0 auto;
+ flex: 1;
margin: 0 .5rem;
@media only screen and (max-width: 450px) {
@@ -60,13 +63,17 @@
}
}
-.continue-button {
- margin-top: 3rem;
- display: block;
- padding: .5rem 4rem;
-
- @media only screen and (max-width: 450px) {
+.actions {
+ button[mat-stroked-button] {
+ float: left;
margin-top: 1rem;
- margin-bottom: 2rem;
+ border-radius: .5rem;
+ }
+
+ button[mat-raised-button] {
+ float: right;
+ margin-top: 1rem;
+ border-radius: .5rem;
+ min-width: 100px;
}
}
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 bffaa4d16b..07672ce961 100644
--- a/console/src/app/modules/idp-create/idp-create.component.ts
+++ b/console/src/app/modules/idp-create/idp-create.component.ts
@@ -6,14 +6,15 @@ import { MatChipInputEvent } from '@angular/material/chips';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
-import { AddOIDCIDPRequest } from 'src/app/proto/generated/zitadel/admin_pb';
+import { AddJWTIDPRequest, AddOIDCIDPRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { OIDCMappingField } from 'src/app/proto/generated/zitadel/idp_pb';
-import { AddOrgOIDCIDPRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { AddOrgJWTIDPRequest, AddOrgOIDCIDPRequest } 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 '../policies/policy-component-types.enum';
+import { JWT, OIDC, RadioItemIdpType } from './idptypes';
@Component({
selector: 'app-idp-create',
@@ -29,10 +30,23 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
private subscription?: Subscription;
public projectId: string = '';
- public formGroup!: FormGroup;
- public createSteps: number = 1;
+ public oidcFormGroup!: FormGroup;
+ public jwtFormGroup!: FormGroup;
+
+ public createSteps: number = 2;
public currentCreateStep: number = 1;
public loading: boolean = false;
+
+ public idpTypes: RadioItemIdpType[] = [
+ OIDC,
+ JWT,
+ ];
+
+ OIDC: any = OIDC;
+ JWT: any = JWT;
+
+ public idpType!: RadioItemIdpType;
+
constructor(
private router: Router,
private route: ActivatedRoute,
@@ -40,7 +54,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
private injector: Injector,
private _location: Location,
) {
- this.formGroup = new FormGroup({
+ this.oidcFormGroup = new FormGroup({
name: new FormControl('', [Validators.required]),
clientId: new FormControl('', [Validators.required]),
clientSecret: new FormControl('', [Validators.required]),
@@ -51,6 +65,16 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
autoRegister: new FormControl(false),
});
+ this.jwtFormGroup = new FormGroup({
+ jwtName: new FormControl('', [Validators.required]),
+ jwtHeaderName: new FormControl('', [Validators.required]),
+ jwtIssuer: new FormControl('', [Validators.required]),
+ jwtEndpoint: new FormControl('', [Validators.required]),
+ jwtKeysEndpoint: new FormControl('', [Validators.required]),
+ jwtStylingType: new FormControl(0),
+ jwtAutoRegister: new FormControl(false),
+ });
+
this.route.data.pipe(take(1)).subscribe(data => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
@@ -82,7 +106,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
this.projectId = projectid;
}
- public addIdp(): void {
+ public addOIDCIdp(): void {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
const req = new AddOrgOIDCIDPRequest();
@@ -133,6 +157,56 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
}
}
+ public addJWTIdp(): void {
+ if (this.serviceType === PolicyComponentServiceType.MGMT) {
+ const req = new AddOrgJWTIDPRequest();
+
+ req.setName(this.jwtName?.value);
+ req.setHeaderName(this.jwtHeaderName?.value);
+ req.setIssuer(this.jwtIssuer?.value);
+ req.setJwtEndpoint(this.jwtEndpoint?.value);
+ req.setKeysEndpoint(this.jwtKeysEndpoint?.value);
+ req.setAutoRegister(this.jwtAutoRegister?.value);
+ req.setStylingType(this.jwtStylingType?.value);
+
+ this.loading = true;
+ (this.service as ManagementService).addOrgJWTIDP(req).then((idp) => {
+ setTimeout(() => {
+ this.loading = false;
+ this.router.navigate([
+ (this.serviceType === PolicyComponentServiceType.MGMT ? 'org' :
+ this.serviceType === PolicyComponentServiceType.ADMIN ? 'iam' : ''),
+ 'policy', 'login']);
+ }, 2000);
+ }).catch(error => {
+ this.toast.showError(error);
+ });
+ } else if (PolicyComponentServiceType.ADMIN) {
+ const req = new AddJWTIDPRequest();
+
+ req.setName(this.jwtName?.value);
+ req.setHeaderName(this.jwtHeaderName?.value);
+ req.setIssuer(this.jwtIssuer?.value);
+ req.setJwtEndpoint(this.jwtEndpoint?.value);
+ req.setKeysEndpoint(this.jwtKeysEndpoint?.value);
+ req.setAutoRegister(this.jwtAutoRegister?.value);
+ req.setStylingType(this.jwtStylingType?.value);
+
+ this.loading = true;
+ (this.service as AdminService).addJWTIDP(req).then((idp) => {
+ setTimeout(() => {
+ this.loading = false;
+ this.router.navigate([
+ (this.serviceType === PolicyComponentServiceType.MGMT ? 'org' :
+ this.serviceType === PolicyComponentServiceType.ADMIN ? 'iam' : ''),
+ 'policy', 'login']);
+ }, 2000);
+ }).catch(error => {
+ this.toast.showError(error);
+ });
+ }
+ }
+
public close(): void {
this._location.back();
}
@@ -162,35 +236,62 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
}
public get name(): AbstractControl | null {
- return this.formGroup.get('name');
+ return this.oidcFormGroup.get('name');
}
public get clientId(): AbstractControl | null {
- return this.formGroup.get('clientId');
+ return this.oidcFormGroup.get('clientId');
}
public get clientSecret(): AbstractControl | null {
- return this.formGroup.get('clientSecret');
+ return this.oidcFormGroup.get('clientSecret');
}
public get issuer(): AbstractControl | null {
- return this.formGroup.get('issuer');
+ return this.oidcFormGroup.get('issuer');
}
public get scopesList(): AbstractControl | null {
- return this.formGroup.get('scopesList');
+ return this.oidcFormGroup.get('scopesList');
}
public get autoRegister(): AbstractControl | null {
- return this.formGroup.get('autoRegister');
+ return this.oidcFormGroup.get('autoRegister');
}
public get idpDisplayNameMapping(): AbstractControl | null {
- return this.formGroup.get('idpDisplayNameMapping');
+ return this.oidcFormGroup.get('idpDisplayNameMapping');
}
public get usernameMapping(): AbstractControl | null {
- return this.formGroup.get('usernameMapping');
+ return this.oidcFormGroup.get('usernameMapping');
}
+ public get jwtName(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtName');
+ }
+
+ public get jwtHeaderName(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtHeaderName');
+ }
+
+ public get jwtIssuer(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtIssuer');
+ }
+
+ public get jwtEndpoint(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtEndpoint');
+ }
+
+ public get jwtKeysEndpoint(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtKeysEndpoint');
+ }
+
+ public get jwtStylingType(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtStylingType');
+ }
+
+ public get jwtAutoRegister(): AbstractControl | null {
+ return this.jwtFormGroup.get('jwtAutoRegister');
+ }
}
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 e8ff5cdb82..315975a16e 100644
--- a/console/src/app/modules/idp-create/idp-create.module.ts
+++ b/console/src/app/modules/idp-create/idp-create.module.ts
@@ -14,9 +14,10 @@ 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';
+import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component';
@NgModule({
- declarations: [IdpCreateComponent],
+ declarations: [IdpCreateComponent, IdpTypeRadioComponent],
imports: [
IdpCreateRoutingModule,
CommonModule,
diff --git a/console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.html b/console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.html
new file mode 100644
index 0000000000..a6bd703eaa
--- /dev/null
+++ b/console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.html
@@ -0,0 +1,12 @@
+
+