dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fixed edit and disabled oauth client settings scope

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-10-03 10:39:15 +03:00
parent 7aa77faf78
commit a004472c05
2 changed files with 10 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
View File

@ -162,28 +162,12 @@
</mat-slide-toggle>
</div>
</section>
<div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
<mat-form-field class="flex">
<mat-label translate>admin.oauth2.scope</mat-label>
<mat-chip-grid #scopeList required [disabled]="!this.createNewDialog && !(this.isEdit || this.isAdd)">
<mat-chip-row *ngFor="let scope of entityForm.get('scope').value; let k = index; trackBy: trackByParams"
removable (removed)="removeScope(k, entityForm)">
{{scope}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>
<input [matChipInputFor]="scopeList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
matChipInputAddOnBlur
(matChipInputTokenEnd)="addScope($event, entityForm)">
</mat-chip-grid>
<mat-error *ngIf="entityForm.get('scope').hasError('required')">
{{ 'admin.oauth2.scope-required' | translate }}
</mat-error>
</mat-form-field>
</div>
<tb-error style="display: block; margin-top: -24px;"
[error]="entityForm.get('scope').hasError('required') ? ('admin.oauth2.scope-required' | translate) : ''">
</tb-error>
<tb-string-items-list
formControlName="scope"
label="{{ 'admin.oauth2.scope' | translate }}"
requiredText="{{ 'admin.oauth2.scope-required' | translate }}"
required>
</tb-string-items-list>
</section>
<section class="tb-form-panel no-border no-padding no-gap" *ngIf="!generalSettingsMode">
<div class="tb-form-row tb-standard-fields no-border no-padding">

70
ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
View File

@ -33,18 +33,10 @@ import { AppState } from '@core/core.state';
import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
import { TranslateService } from '@ngx-translate/core';
import { Store } from '@ngrx/store';
import {
AbstractControl,
UntypedFormArray,
UntypedFormBuilder,
UntypedFormGroup,
ValidationErrors,
Validators
} from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { isDefinedAndNotNull } from '@core/utils';
import { OAuth2Service } from '@core/http/oauth2.service';
import { Subscription } from 'rxjs';
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { PageLink } from '@shared/models/page/page-link';
import { coerceBoolean } from '@app/shared/decorators/coercion';
@ -84,16 +76,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
private subscriptions: Array<Subscription> = [];
public static validateScope(control: AbstractControl): ValidationErrors | null {
const scope: string[] = control.value;
if (!scope || !scope.length) {
return {
required: true
};
}
return null;
}
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
clientAuthenticationMethods = Object.keys(ClientAuthenticationMethod);
@ -146,7 +128,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
loginButtonLabel: [entity?.loginButtonLabel ? entity.loginButtonLabel : null, Validators.required],
loginButtonIcon: [entity?.loginButtonIcon ? entity.loginButtonIcon : null],
userNameAttributeName: [entity?.userNameAttributeName ? entity.userNameAttributeName : 'email', Validators.required],
scope: this.fb.array(entity?.scope ? entity.scope : [], ClientComponent.validateScope),
scope: [entity?.scope ? entity.scope : [], Validators.required],
mapperConfig: this.fb.group({
allowUserCreation: [isDefinedAndNotNull(entity?.mapperConfig?.allowUserCreation) ?
entity.mapperConfig.allowUserCreation : true],
@ -166,6 +148,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
clientId: entity.clientId,
clientSecret: entity.clientSecret,
accessTokenUri: entity.accessTokenUri,
scope: entity.scope,
authorizationUri: entity.authorizationUri,
jwkSetUri: entity.jwkSetUri,
userInfoUri: entity.userInfoUri,
@ -181,19 +164,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
}, {emitEvent: false});
this.changeMapperConfigType(this.entityForm, this.entityValue.mapperConfig.type, this.entityValue.mapperConfig);
const scopeControls = this.entityForm.get('scope') as UntypedFormArray;
if (entity.scope.length === scopeControls.length) {
scopeControls.patchValue(entity.scope, {emitEvent: false});
} else {
const newScopeControls: Array<AbstractControl> = [];
if (entity.scope) {
for (const scope of entity.scope) {
newScopeControls.push(this.fb.control(scope, [Validators.required]));
}
}
this.entityForm.setControl('scope', this.fb.array(newScopeControls));
}
}
getProviderName(): string {
@ -204,35 +174,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
return this.getProviderName() === 'Custom';
}
trackByParams(index: number): number {
return index;
}
trackByItem(i, item) {
return item;
}
addScope(event: MatChipInputEvent, control: AbstractControl): void {
const input = event.chipInput.inputElement;
const value = event.value;
const controller = control.get('scope') as UntypedFormArray;
if ((value.trim() !== '')) {
controller.push(this.fb.control(value.trim()));
controller.markAsDirty();
}
if (input) {
input.value = '';
}
}
removeScope(i: number, control: AbstractControl): void {
const controller = control.get('scope') as UntypedFormArray;
controller.removeAt(i);
controller.markAsTouched();
controller.markAsDirty();
}
private initTemplates(templates: OAuth2ClientRegistrationTemplate[]): void {
templates.map(provider => {
delete provider.additionalInfo;
@ -264,7 +205,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
}));
this.subscriptions.push(this.entityForm.get('additionalInfo.providerName').valueChanges.subscribe((provider) => {
(this.entityForm.get('scope') as UntypedFormArray).clear();
this.entityForm.get('scope').setValue([]);
this.setProviderDefaultValue(provider, this.entityForm);
}));
}
@ -355,9 +296,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
const template = this.templates.get(provider);
template.clientId = '';
template.clientSecret = '';
template.scope.forEach(() => {
(clientRegistration.get('scope') as UntypedFormArray).push(this.fb.control(''));
});
clientRegistration.patchValue(template);
}
}