tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add select login provider templated

pull/3557/head
Vladyslav_Prykhodko 6 years ago
parent
c3407bfddc
commit
ae92f065e6
8 changed files with 325 additions and 212 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      ui-ngx/src/app/core/http/admin.service.ts
  2. 10
      ui-ngx/src/app/core/services/menu.service.ts
  3. 6
      ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
  4. 415
      ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
  5. 23
      ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
  6. 55
      ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
  7. 14
      ui-ngx/src/app/shared/models/settings.models.ts
  8. 9
      ui-ngx/src/assets/locale/locale.constant-en_US.json

5
ui-ngx/src/app/core/http/admin.service.ts
View File

@ -20,6 +20,7 @@ import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import {
AdminSettings,
ClientProviderTemplated,
MailServerSettings,
OAuth2Settings,
SecuritySettings,
@ -63,8 +64,8 @@ export class AdminService {
return this.http.get<OAuth2Settings>(`/api/oauth2/config`, defaultHttpOptionsFromConfig(config));
}
public getOAuth2Template(config?: RequestConfig): Observable<any> {
return this.http.get<any>(`/api/oauth2/config/template`, defaultHttpOptionsFromConfig(config));
public getOAuth2Template(config?: RequestConfig): Observable<Array<ClientProviderTemplated>> {
return this.http.get<Array<ClientProviderTemplated>>(`/api/oauth2/config/template`, defaultHttpOptionsFromConfig(config));
}
public saveOAuth2Settings(OAuth2Setting: OAuth2Settings,

10
ui-ngx/src/app/core/services/menu.service.ts
View File

@ -120,9 +120,9 @@ export class MenuService {
icon: 'security'
},
{
name: 'admin.oauth2.settings',
name: 'admin.oauth2.oauth2',
type: 'link',
path: '/settings/oauth2-settings',
path: '/settings/oauth2',
icon: 'security'
}
]
@ -246,13 +246,13 @@ export class MenuService {
icon: 'settings',
pages: [
{
name: 'admin.oauth2.settings',
name: 'admin.oauth2.oauth2',
type: 'link',
path: '/settings/oauth2-settings',
path: '/settings/oauth2',
icon: 'security'
}
]
})
});
}
return sections;

6
ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
View File

@ -81,14 +81,14 @@ const routes: Routes = [
}
},
{
path: 'oauth2-settings',
path: 'oauth2',
component: OAuth2SettingsComponent,
canDeactivate: [ConfirmOnExitGuard],
data: {
auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN],
title: 'admin.oauth2.settings',
title: 'admin.oauth2.oauth2',
breadcrumb: {
label: 'admin.oauth2.settings',
label: 'admin.oauth2.oauth2',
icon: 'security'
}
}

415
ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
View File

@ -19,7 +19,7 @@
<mat-card class="settings-card">
<mat-card-title>
<div fxLayout="row">
<span class="mat-headline" translate>admin.oauth2.settings</span>
<span class="mat-headline" translate>admin.oauth2.oauth2</span>
<span fxFlex></span>
<div tb-help="oauth2Settings"></div>
</div>
@ -91,7 +91,7 @@
<ng-template matExpansionPanelContent>
<section [formGroupName]="j">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>Login Provider</mat-label>
<mat-label translate>admin.oauth2.login-provider</mat-label>
<mat-select formControlName="providerName">
<mat-option *ngFor="let provider of templateProvider" [value]="provider">
{{ provider | uppercase }}
@ -117,223 +117,254 @@
</mat-form-field>
</div>
<mat-tab-group dynamicHeight>
<mat-tab label="General">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-top: 16px;">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.access-token-uri</mat-label>
<input matInput formControlName="accessTokenUri" required>
<mat-error *ngIf="registration.get('accessTokenUri').hasError('required')">
{{ 'admin.oauth2.access-token-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('accessTokenUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.authorization-uri</mat-label>
<input matInput formControlName="authorizationUri" required>
<mat-error *ngIf="registration.get('authorizationUri').hasError('required')">
{{ 'admin.oauth2.authorization-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('authorizationUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
<input matInput formControlName="jwkSetUri" required>
<mat-error *ngIf="registration.get('jwkSetUri').hasError('required')">
{{ 'admin.oauth2.jwk-set-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('jwkSetUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.user-info-uri</mat-label>
<input matInput formControlName="userInfoUri" required>
<mat-error *ngIf="registration.get('userInfoUri').hasError('required')">
{{ 'admin.oauth2.user-info-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('userInfoUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.client-authentication-method</mat-label>
<mat-select formControlName="clientAuthenticationMethod">
<mat-option *ngFor="let clientAuthenticationMethod of clientAuthenticationMethods"
[value]="clientAuthenticationMethod">
{{ clientAuthenticationMethod | uppercase }}
</mat-option>
</mat-select>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" *ngIf="registration.get('providerName').value === 'Custom'">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.login-button-label</mat-label>
<input matInput formControlName="loginButtonLabel" required>
<mat-error
*ngIf="registration.get('loginButtonLabel').hasError('required')">
{{ 'admin.oauth2.login-button-label-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.login-button-icon</mat-label>
<input matInput formControlName="loginButtonIcon">
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.scope</mat-label>
<mat-chip-list #scopeList>
<mat-chip *ngFor="let scope of registration.get('scope').value; let k = index;"
removable (removed)="removeScope(k, registration)">
{{scope}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="scopeList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
matChipInputAddOnBlur
(matChipInputTokenEnd)="addScope($event, registration)">
</mat-chip-list>
<mat-error *ngIf="registration.get('scope').hasError('required')">
{{ 'admin.oauth2.jwk-set-uri-required' | translate }}
</mat-error>
</mat-form-field>
</mat-tab>
<mat-tab label="Mapper">
<mat-form-field class="mat-block" style="margin-top: 16px;">
<mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
<input matInput formControlName="userNameAttributeName" required>
<mat-error *ngIf="registration.get('userNameAttributeName').hasError('required')">
{{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
</mat-error>
</mat-form-field>
<section formGroupName="mapperConfig">
<div fxLayout="column" fxLayoutGap="8px">
<mat-checkbox formControlName="allowUserCreation">
{{ 'admin.oauth2.allow-user-creation' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="activateUser">
{{ 'admin.oauth2.activate-user' | translate }}
</mat-checkbox>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.type</mat-label>
<mat-select formControlName="type">
<mat-option *ngFor="let converterTypeExternalUser of converterTypesExternalUser"
[value]="converterTypeExternalUser">
{{ converterTypeExternalUser }}
</mat-option>
</mat-select>
</mat-form-field>
<section formGroupName="basic"
*ngIf="registration.get('mapperConfig.type').value === 'BASIC'">
<mat-form-field class="mat-block">
<mat-label translate>admin.oauth2.email-attribute-key</mat-label>
<input matInput formControlName="emailAttributeKey" required>
<mat-error
*ngIf="registration.get('mapperConfig.basic.emailAttributeKey').hasError('required')">
{{ 'admin.oauth2.email-attribute-key-required' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-expansion-panel class="mat-elevation-z0 custom-settings"
[disabled]="registration.get('providerName').value === 'Custom'"
[expanded]="registration.get('providerName').value === 'Custom'">
<mat-expansion-panel-header [fxHide]="registration.get('providerName').value === 'Custom'">
<mat-panel-description fxLayoutAlign="end center">
{{ 'admin.oauth2.custom-setting' | translate }}
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-tab-group dynamicHeight>
<mat-tab label="{{ 'admin.oauth2.general' | translate }}">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" style="margin-top: 16px;">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
<input matInput formControlName="firstNameAttributeKey">
<mat-label translate>admin.oauth2.access-token-uri</mat-label>
<input matInput formControlName="accessTokenUri" required>
<button mat-icon-button matSuffix
type="button"
(click)="toggleEditMode(registration, 'accessTokenUri')"
*ngIf="registration.get('providerName').value !== 'Custom'">
<mat-icon class="material-icons">create</mat-icon>
</button>
<mat-error *ngIf="registration.get('accessTokenUri').hasError('required')">
{{ 'admin.oauth2.access-token-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('accessTokenUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
<input matInput formControlName="lastNameAttributeKey">
<mat-label translate>admin.oauth2.authorization-uri</mat-label>
<input matInput formControlName="authorizationUri" required>
<button mat-icon-button matSuffix
type="button"
(click)="toggleEditMode(registration, 'authorizationUri')"
*ngIf="registration.get('providerName').value !== 'Custom'">
<mat-icon class="material-icons">create</mat-icon>
</button>
<mat-error *ngIf="registration.get('authorizationUri').hasError('required')">
{{ 'admin.oauth2.authorization-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('authorizationUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
<mat-select formControlName="tenantNameStrategy">
<mat-option *ngFor="let tenantNameStrategy of tenantNameStrategies"
[value]="tenantNameStrategy">
{{ tenantNameStrategy }}
</mat-option>
</mat-select>
<mat-form-field fxFlex class="mat-block" appearance="legacy">
<mat-label translate>admin.oauth2.jwk-set-uri</mat-label>
<input matInput formControlName="jwkSetUri">
<button mat-icon-button matSuffix
type="button" aria-label="Clear"
(click)="toggleEditMode(registration, 'jwkSetUri')"
*ngIf="registration.get('providerName').value !== 'Custom'">
<mat-icon class="material-icons">create</mat-icon>
</button>
<mat-error *ngIf="registration.get('jwkSetUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" *ngIf="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
<mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
<input matInput
formControlName="tenantNamePattern"
[required]="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
<mat-error
*ngIf="registration.get('mapperConfig.basic.tenantNamePattern').hasError('required')">
{{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.user-info-uri</mat-label>
<input matInput formControlName="userInfoUri" required>
<button mat-icon-button matSuffix
type="button"
(click)="toggleEditMode(registration, 'userInfoUri')"
*ngIf="registration.get('providerName').value !== 'Custom'">
<mat-icon class="material-icons">create</mat-icon>
</button>
<mat-error *ngIf="registration.get('userInfoUri').hasError('required')">
{{ 'admin.oauth2.user-info-uri-required' | translate }}
</mat-error>
<mat-error *ngIf="registration.get('userInfoUri').hasError('pattern')">
{{ 'admin.oauth2.uri-pattern-error' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
<input matInput formControlName="customerNamePattern">
<mat-label translate>admin.oauth2.client-authentication-method</mat-label>
<mat-select formControlName="clientAuthenticationMethod">
<mat-option *ngFor="let clientAuthenticationMethod of clientAuthenticationMethods"
[value]="clientAuthenticationMethod">
{{ clientAuthenticationMethod | uppercase }}
</mat-option>
</mat-select>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" *ngIf="registration.get('providerName').value === 'Custom'">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
<input matInput formControlName="defaultDashboardName">
<mat-label translate>admin.oauth2.login-button-label</mat-label>
<input matInput formControlName="loginButtonLabel" required>
<mat-error
*ngIf="registration.get('loginButtonLabel').hasError('required')">
{{ 'admin.oauth2.login-button-label-required' | translate }}
</mat-error>
</mat-form-field>
<mat-checkbox fxFlex formControlName="alwaysFullScreen" class="checkbox-row">
{{ 'admin.oauth2.always-fullscreen' | translate}}
</mat-checkbox>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.login-button-icon</mat-label>
<input matInput formControlName="loginButtonIcon">
</mat-form-field>
</div>
</section>
<section formGroupName="custom"
*ngIf="registration.get('mapperConfig.type').value === 'CUSTOM'">
<mat-form-field class="mat-block">
<mat-label translate>admin.oauth2.url</mat-label>
<input matInput formControlName="url" required>
<mat-error
*ngIf="registration.get('mapperConfig.custom.url').hasError('required')">
{{ 'admin.oauth2.url-required' | translate }}
</mat-error>
<mat-error
*ngIf="registration.get('mapperConfig.custom.url').hasError('pattern')">
{{ 'admin.oauth2.url-pattern' | translate }}
<section formGroupName="mapperConfig">
<div fxLayout="column" fxLayoutGap="8px" style="margin-bottom: 8px;">
<mat-checkbox formControlName="allowUserCreation">
{{ 'admin.oauth2.allow-user-creation' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="activateUser">
{{ 'admin.oauth2.activate-user' | translate }}
</mat-checkbox>
</div>
</section>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.scope</mat-label>
<mat-chip-list #scopeList>
<mat-chip *ngFor="let scope of registration.get('scope').value; let k = index;"
removable (removed)="removeScope(k, registration)">
{{scope}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="scopeList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
matChipInputAddOnBlur
(matChipInputTokenEnd)="addScope($event, registration)">
</mat-chip-list>
</mat-form-field>
</mat-tab>
<mat-tab label="{{ 'admin.oauth2.mapper' | translate }}">
<mat-form-field class="mat-block" style="margin-top: 16px;">
<mat-label translate>admin.oauth2.user-name-attribute-name</mat-label>
<input matInput formControlName="userNameAttributeName" required>
<mat-error *ngIf="registration.get('userNameAttributeName').hasError('required')">
{{ 'admin.oauth2.user-name-attribute-name-required' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<section formGroupName="mapperConfig">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>common.username</mat-label>
<input matInput formControlName="username" autocomplete="new-username">
<mat-label translate>admin.oauth2.type</mat-label>
<mat-select formControlName="type">
<mat-option *ngFor="let converterTypeExternalUser of converterTypesExternalUser"
[value]="converterTypeExternalUser">
{{ converterTypeExternalUser }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>common.password</mat-label>
<input matInput type="password" formControlName="password" autocomplete="new-password">
</mat-form-field>
</div>
</section>
</section>
</mat-tab>
</mat-tab-group>
<section formGroupName="basic"
*ngIf="registration.get('mapperConfig.type').value === 'BASIC'">
<mat-form-field class="mat-block">
<mat-label translate>admin.oauth2.email-attribute-key</mat-label>
<input matInput formControlName="emailAttributeKey" required>
<mat-error
*ngIf="registration.get('mapperConfig.basic.emailAttributeKey').hasError('required')">
{{ 'admin.oauth2.email-attribute-key-required' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.first-name-attribute-key</mat-label>
<input matInput formControlName="firstNameAttributeKey">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.last-name-attribute-key</mat-label>
<input matInput formControlName="lastNameAttributeKey">
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.tenant-name-strategy</mat-label>
<mat-select formControlName="tenantNameStrategy">
<mat-option *ngFor="let tenantNameStrategy of tenantNameStrategies"
[value]="tenantNameStrategy">
{{ tenantNameStrategy }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block" *ngIf="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
<mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
<input matInput
formControlName="tenantNamePattern"
[required]="registration.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
<mat-error
*ngIf="registration.get('mapperConfig.basic.tenantNamePattern').hasError('required')">
{{ 'admin.oauth2.tenant-name-pattern-required' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
<input matInput formControlName="customerNamePattern">
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>admin.oauth2.default-dashboard-name</mat-label>
<input matInput formControlName="defaultDashboardName">
</mat-form-field>
<mat-checkbox fxFlex formControlName="alwaysFullScreen" class="checkbox-row">
{{ 'admin.oauth2.always-fullscreen' | translate}}
</mat-checkbox>
</div>
</section>
<section formGroupName="custom"
*ngIf="registration.get('mapperConfig.type').value === 'CUSTOM'">
<mat-form-field class="mat-block">
<mat-label translate>admin.oauth2.url</mat-label>
<input matInput formControlName="url" required>
<mat-error
*ngIf="registration.get('mapperConfig.custom.url').hasError('required')">
{{ 'admin.oauth2.url-required' | translate }}
</mat-error>
<mat-error
*ngIf="registration.get('mapperConfig.custom.url').hasError('pattern')">
{{ 'admin.oauth2.url-pattern' | translate }}
</mat-error>
</mat-form-field>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>common.username</mat-label>
<input matInput formControlName="username" autocomplete="new-username">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>common.password</mat-label>
<input matInput type="password" formControlName="password" autocomplete="new-password">
</mat-form-field>
</div>
</section>
</section>
</mat-tab>
</mat-tab-group>
</ng-template>
</mat-expansion-panel>
</section>
</ng-template>

23
ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.scss
View File

@ -21,9 +21,32 @@
.registration-card{
margin-bottom: 8px;
border: 1px solid rgba(0, 0, 0, 0.2);
.custom-settings{
font-size: 16px;
.mat-expansion-panel-header{
padding: 0 2px;
}
}
}
.container{
margin-bottom: 16px;
}
}
:host ::ng-deep{
.registration-card{
.custom-settings{
.mat-expansion-panel-body{
padding: 0 2px 16px;
}
.mat-tab-label{
text-transform: none;
}
.mat-form-field-suffix .mat-icon-button .mat-icon{
font-size: 18px;
}
}
}
}

55
ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
View File

@ -18,6 +18,7 @@ import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewContainerR
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import {
ClientAuthenticationMethod,
ClientProviderTemplated,
ClientRegistration,
DomainParams,
MapperConfigType,
@ -50,9 +51,24 @@ import {
})
export class OAuth2SettingsComponent extends PageComponent implements OnInit, HasConfirmForm, OnDestroy {
private URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.?+=&%@\-/]*)?$/;
private URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:\/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:\/[\w#!:.,?+=&%@\-/]*)?$/;
private subscriptions: Subscription[] = [];
private templates = [];
private templates = new Map<string, ClientProviderTemplated>();
private defaultProvider = {
providerName: 'Custom',
clientAuthenticationMethod: 'Post',
userNameAttributeName: 'email',
mapperConfig: {
allowUserCreation: true,
activateUser: false,
type: 'BASIC',
basic: {
emailAttributeKey: 'email',
tenantNameStrategy: 'DOMAIN',
alwaysFullScreen: false
}
}
};
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
@ -99,9 +115,9 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
});
}
private initTemplates(templates: any): void {
this.templates = templates;
templates.map(provider => this.templateProvider.push(provider.name));
private initTemplates(templates: ClientProviderTemplated[]): void {
templates.map(provider => this.templates.set(provider.name, provider));
this.templateProvider.push(...Array.from(this.templates.keys()));
this.templateProvider.sort();
}
@ -118,7 +134,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
tenantNamePattern: [null],
customerNamePattern: [null],
defaultDashboardName: [null],
alwaysFullScreen: [false],
alwaysFullScreen: [false]
});
this.subscriptions.push(basicGroup.get('tenantNameStrategy').valueChanges.subscribe((domain) => {
@ -209,7 +225,7 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
accessTokenUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
authorizationUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
scope: this.fb.array([], [Validators.required]),
jwkSetUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
jwkSetUri: ['', [Validators.pattern(this.URL_REGEXP)]],
userInfoUri: ['', [Validators.required, Validators.pattern(this.URL_REGEXP)]],
clientAuthenticationMethod: ['POST', [Validators.required]],
userNameAttributeName: ['email', [Validators.required]],
@ -233,6 +249,27 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
}
}));
this.subscriptions.push(clientRegistration.get('providerName').valueChanges.subscribe((provider) => {
(clientRegistration.get('scope') as FormArray).clear();
if (provider === 'Custom') {
clientRegistration.reset(this.defaultProvider, {emitEvent: false});
clientRegistration.get('accessTokenUri').enable();
clientRegistration.get('authorizationUri').enable();
clientRegistration.get('jwkSetUri').enable();
clientRegistration.get('userInfoUri').enable();
} else {
const template = this.templates.get(provider);
template.scope.forEach(() => {
(clientRegistration.get('scope') as FormArray).push(this.fb.control(''));
});
clientRegistration.get('accessTokenUri').disable();
clientRegistration.get('authorizationUri').disable();
clientRegistration.get('jwkSetUri').disable();
clientRegistration.get('userInfoUri').disable();
clientRegistration.patchValue(this.templates.get(provider), {emitEvent: false});
}
}));
if (registrationData) {
registrationData.scope.forEach(() => {
(clientRegistration.get('scope') as FormArray).push(this.fb.control(''));
@ -366,4 +403,8 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
}
});
}
toggleEditMode(control: AbstractControl, path: string) {
control.get(path).disabled ? control.get(path).enable() : control.get(path).disable();
}
}

14
ui-ngx/src/app/shared/models/settings.models.ts
View File

@ -14,6 +14,9 @@
/// limitations under the License.
///
import { EntityId } from '@shared/models/id/entity-id';
import { TenantId } from '@shared/models/id/tenant-id';
export const smtpPortPattern: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
export interface AdminSettings<T> {
@ -75,6 +78,17 @@ export interface DomainParams {
clientRegistrations: ClientRegistration[];
}
export interface ClientProviderTemplated extends ClientRegistration{
additionalInfo: string;
comment: string;
createdTime: number;
helpLink: string;
id: EntityId;
name: string;
providerId: string;
tenantId: TenantId;
}
export interface ClientRegistration {
loginButtonLabel: string;
loginButtonIcon: string;

9
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -128,7 +128,7 @@
"add-provider": "Add provider",
"settings": "Settings",
"oauth2": {
"settings": "OAuth2 Settings",
"oauth2": "OAuth2",
"registration-id": "Registration ID",
"registration-id-required": "Registration ID is required.",
"registration-id-unique": "Registration ID need to unique for the system.",
@ -145,7 +145,6 @@
"redirect-uri-template": "Redirect URI template",
"redirect-uri-template-required": "Redirect URI template is required.",
"jwk-set-uri": "JSON Web Key URI",
"jwk-set-uri-required": "JSON Web Key URI is required.",
"user-info-uri": "User info URI",
"user-info-uri-required": "User info URI is required.",
"client-authentication-method": "Client authentication method",
@ -173,7 +172,11 @@
"delete-domain-title": "Are you sure you want to delete the domain '{{domainName}}'?",
"delete-domain-text": "Be careful, after the confirmation a domain and all registration data will be unavailable.",
"delete-registration-title": "Are you sure you want to delete the registration '{{name}}'?",
"delete-registration-text": "Be careful, after the confirmation a registration data will be unavailable."
"delete-registration-text": "Be careful, after the confirmation a registration data will be unavailable.",
"login-provider": "Login provider",
"custom-setting": "Custom settings",
"general": "General",
"mapper": "Mapper"
}
},
"alarm": {

Write Preview
Loading…
Cancel
Save