mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-11 00:25:12 +00:00
fix(console): new colorpicker, remove icons logo font (#1826)
* custom color picker, delete font * delete asset, i18n * escape deep styles * ts, proto * remove fallback img, color clickable, remove font * stylelint * fix spinner * fix deprecated chipinput.input * improve logo on login * fix qr code * always use black on white for qr code * fix header and footer css Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
255139862d
commit
59af02b2f3
@@ -16,245 +16,245 @@ import { ToastService } from 'src/app/services/toast.service';
|
||||
import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
|
||||
|
||||
@Component({
|
||||
selector: 'app-idp',
|
||||
templateUrl: './idp.component.html',
|
||||
styleUrls: ['./idp.component.scss'],
|
||||
selector: 'app-idp',
|
||||
templateUrl: './idp.component.html',
|
||||
styleUrls: ['./idp.component.scss'],
|
||||
})
|
||||
export class IdpComponent implements OnInit, OnDestroy {
|
||||
public mappingFields: OIDCMappingField[] = [];
|
||||
public styleFields: IDPStylingType[] = [];
|
||||
public mappingFields: OIDCMappingField[] = [];
|
||||
public styleFields: IDPStylingType[] = [];
|
||||
|
||||
public showIdSecretSection: boolean = false;
|
||||
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
|
||||
private service!: ManagementService | AdminService;
|
||||
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
|
||||
public showIdSecretSection: boolean = false;
|
||||
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
|
||||
private service!: ManagementService | AdminService;
|
||||
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
|
||||
|
||||
private subscription?: Subscription;
|
||||
public projectId: string = '';
|
||||
private subscription?: Subscription;
|
||||
public projectId: string = '';
|
||||
|
||||
public idpForm!: FormGroup;
|
||||
public oidcConfigForm!: FormGroup;
|
||||
public idpForm!: FormGroup;
|
||||
public oidcConfigForm!: FormGroup;
|
||||
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
private injector: Injector,
|
||||
private route: ActivatedRoute,
|
||||
private _location: Location,
|
||||
) {
|
||||
this.idpForm = new FormGroup({
|
||||
id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
|
||||
name: new FormControl('', [Validators.required]),
|
||||
stylingType: new FormControl('', [Validators.required]),
|
||||
});
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
private injector: Injector,
|
||||
private route: ActivatedRoute,
|
||||
private _location: Location,
|
||||
) {
|
||||
this.idpForm = new FormGroup({
|
||||
id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
|
||||
name: new FormControl('', [Validators.required]),
|
||||
stylingType: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
this.oidcConfigForm = new FormGroup({
|
||||
clientId: new FormControl('', [Validators.required]),
|
||||
clientSecret: new FormControl(''),
|
||||
issuer: new FormControl('', [Validators.required]),
|
||||
scopesList: new FormControl([], []),
|
||||
idpDisplayNameMapping: new FormControl(0),
|
||||
usernameMapping: new FormControl(0),
|
||||
});
|
||||
this.oidcConfigForm = new FormGroup({
|
||||
clientId: new FormControl('', [Validators.required]),
|
||||
clientSecret: new FormControl(''),
|
||||
issuer: new FormControl('', [Validators.required]),
|
||||
scopesList: new FormControl([], []),
|
||||
idpDisplayNameMapping: new FormControl(0),
|
||||
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(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;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
this.mappingFields = [
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
|
||||
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
|
||||
this.styleFields = [
|
||||
IDPStylingType.STYLING_TYPE_UNSPECIFIED,
|
||||
IDPStylingType.STYLING_TYPE_GOOGLE];
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.subscription = this.route.params.subscribe(params => this.getData(params));
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private getData({ projectid }: Params): void {
|
||||
this.projectId = projectid;
|
||||
}
|
||||
|
||||
public updateIdp(): void {
|
||||
return this.route.params.pipe(take(1));
|
||||
})).subscribe((params) => {
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setName(this.name?.value);
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDP(req).then(() => {
|
||||
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 UpdateIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setName(this.name?.value);
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
|
||||
(this.service as AdminService).updateIDP(req).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public updateOidcConfig(): void {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setClientId(this.clientId?.value);
|
||||
req.setClientSecret(this.clientSecret?.value);
|
||||
req.setIssuer(this.issuer?.value);
|
||||
req.setScopesList(this.scopesList?.value);
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
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 UpdateIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setClientId(this.clientId?.value);
|
||||
req.setClientSecret(this.clientSecret?.value);
|
||||
req.setIssuer(this.issuer?.value);
|
||||
req.setScopesList(this.scopesList?.value);
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
|
||||
|
||||
(this.service as AdminService).updateIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
|
||||
public addScope(event: MatChipInputEvent): void {
|
||||
const input = event.input;
|
||||
const value = event.value.trim();
|
||||
|
||||
if (value !== '') {
|
||||
if (this.scopesList?.value) {
|
||||
this.scopesList.value.push(value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
(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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public removeScope(uri: string): void {
|
||||
if (this.scopesList?.value) {
|
||||
const index = this.scopesList?.value.indexOf(uri);
|
||||
|
||||
if (index !== undefined && index >= 0) {
|
||||
this.scopesList?.value.splice(index, 1);
|
||||
});
|
||||
} 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 get backroutes(): string[] {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return ['/org', 'policy', 'login'];
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam', 'policy', 'login'];
|
||||
public ngOnInit(): void {
|
||||
this.subscription = this.route.params.subscribe(params => this.getData(params));
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private getData({ projectid }: Params): void {
|
||||
this.projectId = projectid;
|
||||
}
|
||||
|
||||
public updateIdp(): void {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setName(this.name?.value);
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDP(req).then(() => {
|
||||
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 UpdateIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setName(this.name?.value);
|
||||
req.setStylingType(this.stylingType?.value);
|
||||
|
||||
(this.service as AdminService).updateIDP(req).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public updateOidcConfig(): void {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setClientId(this.clientId?.value);
|
||||
req.setClientSecret(this.clientSecret?.value);
|
||||
req.setIssuer(this.issuer?.value);
|
||||
req.setScopesList(this.scopesList?.value);
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
|
||||
|
||||
(this.service as ManagementService).updateOrgIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
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 UpdateIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
req.setClientId(this.clientId?.value);
|
||||
req.setClientSecret(this.clientSecret?.value);
|
||||
req.setIssuer(this.issuer?.value);
|
||||
req.setScopesList(this.scopesList?.value);
|
||||
req.setUsernameMapping(this.usernameMapping?.value);
|
||||
req.setDisplayNameMapping(this.idpDisplayNameMapping?.value);
|
||||
|
||||
(this.service as AdminService).updateIDPOIDCConfig(req).then((oidcConfig) => {
|
||||
this.toast.showInfo('IDP.TOAST.SAVED', true);
|
||||
// this.router.navigate(['idp', ]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
|
||||
public addScope(event: MatChipInputEvent): void {
|
||||
const input = event.chipInput?.inputElement;
|
||||
const value = event.value.trim();
|
||||
|
||||
if (value !== '') {
|
||||
if (this.scopesList?.value) {
|
||||
this.scopesList.value.push(value);
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public get id(): AbstractControl | null {
|
||||
return this.idpForm.get('id');
|
||||
}
|
||||
public removeScope(uri: string): void {
|
||||
if (this.scopesList?.value) {
|
||||
const index = this.scopesList?.value.indexOf(uri);
|
||||
|
||||
public get name(): AbstractControl | null {
|
||||
return this.idpForm.get('name');
|
||||
if (index !== undefined && index >= 0) {
|
||||
this.scopesList?.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public get stylingType(): AbstractControl | null {
|
||||
return this.idpForm.get('stylingType');
|
||||
public get backroutes(): string[] {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return ['/org', 'policy', 'login'];
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam', 'policy', 'login'];
|
||||
}
|
||||
}
|
||||
|
||||
public get clientId(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('clientId');
|
||||
}
|
||||
public get id(): AbstractControl | null {
|
||||
return this.idpForm.get('id');
|
||||
}
|
||||
|
||||
public get clientSecret(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('clientSecret');
|
||||
}
|
||||
public get name(): AbstractControl | null {
|
||||
return this.idpForm.get('name');
|
||||
}
|
||||
|
||||
public get issuer(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('issuer');
|
||||
}
|
||||
public get stylingType(): AbstractControl | null {
|
||||
return this.idpForm.get('stylingType');
|
||||
}
|
||||
|
||||
public get scopesList(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('scopesList');
|
||||
}
|
||||
public get clientId(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('clientId');
|
||||
}
|
||||
|
||||
public get idpDisplayNameMapping(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('idpDisplayNameMapping');
|
||||
}
|
||||
public get clientSecret(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('clientSecret');
|
||||
}
|
||||
|
||||
public get usernameMapping(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('usernameMapping');
|
||||
}
|
||||
public get issuer(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('issuer');
|
||||
}
|
||||
|
||||
public get scopesList(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('scopesList');
|
||||
}
|
||||
|
||||
public get idpDisplayNameMapping(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('idpDisplayNameMapping');
|
||||
}
|
||||
|
||||
public get usernameMapping(): AbstractControl | null {
|
||||
return this.oidcConfigForm.get('usernameMapping');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user