2020-07-09 13:47:35 +03:00
|
|
|
<!--
|
|
|
|
|
|
2021-01-11 13:42:16 +02:00
|
|
|
Copyright © 2016-2021 The Thingsboard Authors
|
2020-07-09 13:47:35 +03:00
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
<div>
|
|
|
|
|
<mat-card class="settings-card">
|
|
|
|
|
<mat-card-title>
|
|
|
|
|
<div fxLayout="row">
|
2020-09-08 17:05:13 +03:00
|
|
|
<span class="mat-headline" translate>admin.oauth2.oauth2</span>
|
2020-07-09 13:47:35 +03:00
|
|
|
<span fxFlex></span>
|
|
|
|
|
<div tb-help="oauth2Settings"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</mat-card-title>
|
|
|
|
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
|
|
|
|
|
</mat-progress-bar>
|
|
|
|
|
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
|
|
|
|
|
<mat-card-content style="padding-top: 16px;">
|
|
|
|
|
<form [formGroup]="oauth2SettingsForm" (ngSubmit)="save()">
|
|
|
|
|
<fieldset [disabled]="isLoading$ | async">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-checkbox formControlName="enabled">
|
|
|
|
|
{{ 'admin.oauth2.enable' | translate }}
|
|
|
|
|
</mat-checkbox>
|
2020-10-12 18:11:22 +03:00
|
|
|
<section *ngIf="oauth2SettingsForm.get('enabled').value" style="margin-top: 1em;">
|
2021-06-10 11:50:11 +03:00
|
|
|
<ng-container formArrayName="oauth2ParamsInfos">
|
2020-10-05 11:09:41 +03:00
|
|
|
<div class="container">
|
|
|
|
|
<mat-accordion multi>
|
2021-06-10 11:50:11 +03:00
|
|
|
<ng-container *ngFor="let oauth2ParamsInfo of oauth2ParamsInfos.controls; let i = index; trackBy: trackByParams">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-expansion-panel [formGroupName]="i">
|
|
|
|
|
<mat-expansion-panel-header>
|
|
|
|
|
<mat-panel-title fxLayoutAlign="start center">
|
2021-06-10 11:50:11 +03:00
|
|
|
{{ domainListTittle(oauth2ParamsInfo) }}
|
2020-10-05 11:09:41 +03:00
|
|
|
</mat-panel-title>
|
|
|
|
|
<mat-panel-description fxLayoutAlign="end center">
|
2020-09-07 17:19:12 +03:00
|
|
|
<button mat-icon-button
|
|
|
|
|
type="button"
|
2021-06-10 11:50:11 +03:00
|
|
|
(click)="deleteOAuth2ParamsInfo($event, i)"
|
2020-09-07 17:19:12 +03:00
|
|
|
matTooltip="{{ 'action.delete' | translate }}"
|
|
|
|
|
matTooltipPosition="above">
|
|
|
|
|
<mat-icon>delete</mat-icon>
|
|
|
|
|
</button>
|
2020-10-05 11:09:41 +03:00
|
|
|
</mat-panel-description>
|
|
|
|
|
</mat-expansion-panel-header>
|
|
|
|
|
|
|
|
|
|
<ng-template matExpansionPanelContent>
|
2021-06-10 11:50:11 +03:00
|
|
|
<mat-tab-group dynamicHeight>
|
|
|
|
|
<mat-tab label="{{ 'admin.oauth2.domains' | translate }}">
|
|
|
|
|
<ng-container formArrayName="domainInfos">
|
|
|
|
|
<div style="padding-top: 16px;"></div>
|
|
|
|
|
<section *ngFor="let domainInfo of domainInfos(oauth2ParamsInfo).controls; let n = index; trackBy: trackByParams"
|
|
|
|
|
class="domains-list">
|
|
|
|
|
<div [formGroupName]="n" fxLayout="row" fxLayoutGap="8px">
|
|
|
|
|
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
|
|
|
|
|
<div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50">
|
|
|
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
|
|
|
|
|
<mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.protocol</mat-label>
|
|
|
|
|
<mat-select formControlName="scheme">
|
|
|
|
|
<mat-option *ngFor="let protocol of protocols" [value]="protocol">
|
|
|
|
|
{{ domainSchemaTranslations.get(protocol) | translate | uppercase }}
|
|
|
|
|
</mat-option>
|
|
|
|
|
</mat-select>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.domain-name</mat-label>
|
|
|
|
|
<input matInput formControlName="name" required>
|
|
|
|
|
<mat-error *ngIf="domainInfo.get('name').hasError('pattern')">
|
|
|
|
|
{{ 'admin.error-verification-url' | translate }}
|
|
|
|
|
</mat-error>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
</div>
|
|
|
|
|
<mat-error *ngIf="domainInfo.hasError('unique')">
|
|
|
|
|
{{ 'admin.domain-name-unique' | translate }}
|
2020-10-07 00:44:36 +03:00
|
|
|
</mat-error>
|
2021-06-10 11:50:11 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div fxFlex fxLayout="column">
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
|
|
|
|
|
<input matInput [value]="redirectURI(domainInfo)" readonly>
|
|
|
|
|
<button mat-icon-button color="primary" matSuffix type="button"
|
|
|
|
|
ngxClipboard cbContent="{{ redirectURI(domainInfo) }}"
|
|
|
|
|
matTooltip="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
|
|
|
|
|
matTooltipPosition="above">
|
|
|
|
|
<mat-icon class="material-icons" svgIcon="mdi:clipboard-arrow-left"></mat-icon>
|
|
|
|
|
</button>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
|
|
|
|
|
<mat-form-field fxFlex *ngIf="domainInfo.get('scheme').value === 'MIXED'" class="mat-block">
|
|
|
|
|
<mat-label></mat-label>
|
|
|
|
|
<input matInput [value]="redirectURIMixed(domainInfo)" readonly>
|
|
|
|
|
<button mat-icon-button color="primary" matSuffix type="button"
|
|
|
|
|
ngxClipboard cbContent="{{ redirectURIMixed(domainInfo) }}"
|
|
|
|
|
matTooltip="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
|
|
|
|
|
matTooltipPosition="above">
|
|
|
|
|
<mat-icon class="material-icons" svgIcon="mdi:clipboard-arrow-left"></mat-icon>
|
|
|
|
|
</button>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
</div>
|
2020-10-07 00:44:36 +03:00
|
|
|
</div>
|
2020-07-09 13:47:35 +03:00
|
|
|
|
2021-06-10 11:50:11 +03:00
|
|
|
<div fxLayout="column" fxLayoutAlign="center start">
|
|
|
|
|
<button type="button" mat-icon-button color="primary"
|
|
|
|
|
(click)="removeDomainInfo($event, oauth2ParamsInfo, n)"
|
|
|
|
|
[disabled]="domainInfos(oauth2ParamsInfo).controls.length < 2"
|
|
|
|
|
matTooltip="{{ 'admin.oauth2.delete-domain' | translate }}"
|
2020-10-05 11:09:41 +03:00
|
|
|
matTooltipPosition="above">
|
2021-06-10 11:50:11 +03:00
|
|
|
<mat-icon>close</mat-icon>
|
2020-10-05 11:09:41 +03:00
|
|
|
</button>
|
2021-06-10 11:50:11 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<div fxLayout="row" fxLayoutAlign="end center" style="margin-bottom: 1.25em">
|
|
|
|
|
<button mat-button mat-raised-button color="primary"
|
|
|
|
|
[disabled]="(isLoading$ | async)"
|
|
|
|
|
(click)="addDomainInfo(oauth2ParamsInfo)"
|
|
|
|
|
type="button">
|
|
|
|
|
{{'admin.oauth2.add-domain' | translate}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</mat-tab>
|
|
|
|
|
<mat-tab label="{{ 'admin.oauth2.mobile-apps' | translate }}">
|
|
|
|
|
<ng-container formArrayName="mobileInfos">
|
|
|
|
|
<div style="padding-top: 16px;"></div>
|
|
|
|
|
<div *ngIf="mobileInfos(oauth2ParamsInfo).length === 0">
|
|
|
|
|
<span fxLayoutAlign="center center"
|
|
|
|
|
class="tb-prompt" translate>admin.oauth2.no-mobile-apps</span>
|
|
|
|
|
</div>
|
|
|
|
|
<section *ngFor="let mobileInfo of mobileInfos(oauth2ParamsInfo).controls; let n = index; trackBy: trackByParams"
|
|
|
|
|
class="apps-list">
|
|
|
|
|
<div [formGroupName]="n" fxLayout="row" fxLayoutGap="8px">
|
|
|
|
|
<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
|
|
|
|
|
<div fxFlex fxLayout="column">
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.mobile-package</mat-label>
|
|
|
|
|
<input matInput formControlName="pkgName" required>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
<mat-error *ngIf="mobileInfo.hasError('unique')">
|
|
|
|
|
{{ 'admin.oauth2.mobile-package-unique' | translate }}
|
|
|
|
|
</mat-error>
|
|
|
|
|
</div>
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.mobile-callback-url-scheme</mat-label>
|
|
|
|
|
<input matInput formControlName="callbackUrlScheme" required>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
</div>
|
|
|
|
|
<div fxLayout="column" fxLayoutAlign="center start">
|
|
|
|
|
<button type="button" mat-icon-button color="primary"
|
|
|
|
|
(click)="removeMobileInfo($event, oauth2ParamsInfo, n)"
|
|
|
|
|
matTooltip="{{ 'admin.oauth2.delete-mobile-app' | translate }}"
|
2020-10-05 11:09:41 +03:00
|
|
|
matTooltipPosition="above">
|
2021-06-10 11:50:11 +03:00
|
|
|
<mat-icon>close</mat-icon>
|
2020-10-05 11:09:41 +03:00
|
|
|
</button>
|
2021-06-10 11:50:11 +03:00
|
|
|
</div>
|
2020-07-09 13:47:35 +03:00
|
|
|
</div>
|
2021-06-10 11:50:11 +03:00
|
|
|
</section>
|
|
|
|
|
<div fxLayout="row" fxLayoutAlign="end center" style="margin-bottom: 1.25em">
|
|
|
|
|
<button mat-button mat-raised-button color="primary"
|
|
|
|
|
[disabled]="(isLoading$ | async)"
|
|
|
|
|
(click)="addMobileInfo(oauth2ParamsInfo)"
|
|
|
|
|
type="button">
|
|
|
|
|
{{'admin.oauth2.add-mobile-app' | translate}}
|
2020-10-05 11:09:41 +03:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2021-06-10 11:50:11 +03:00
|
|
|
</ng-container>
|
|
|
|
|
</mat-tab>
|
|
|
|
|
</mat-tab-group>
|
|
|
|
|
<div class="mat-h3" translate>admin.oauth2.providers</div>
|
2020-10-05 11:09:41 +03:00
|
|
|
<ng-container formArrayName="clientRegistrations">
|
|
|
|
|
<div class="container">
|
2021-06-10 11:50:11 +03:00
|
|
|
<mat-expansion-panel *ngFor="let registration of clientRegistrations(oauth2ParamsInfo).controls; let j = index; trackBy: trackByParams"
|
2020-10-05 11:09:41 +03:00
|
|
|
class="registration-card mat-elevation-z0">
|
|
|
|
|
<mat-expansion-panel-header>
|
|
|
|
|
<mat-panel-title fxLayoutAlign="start center">
|
|
|
|
|
{{ getProviderName(registration) }}
|
|
|
|
|
</mat-panel-title>
|
|
|
|
|
<mat-panel-description fxLayoutAlign="end center">
|
|
|
|
|
<button mat-icon-button
|
|
|
|
|
type="button"
|
2021-06-10 11:50:11 +03:00
|
|
|
[disabled]="clientRegistrations(oauth2ParamsInfo).controls.length < 2"
|
|
|
|
|
(click)="deleteRegistration($event, oauth2ParamsInfo, j)"
|
2020-10-05 11:09:41 +03:00
|
|
|
matTooltip="{{ 'admin.oauth2.delete-provider' | translate }}"
|
|
|
|
|
matTooltipPosition="above">
|
|
|
|
|
<mat-icon>delete</mat-icon>
|
|
|
|
|
</button>
|
|
|
|
|
</mat-panel-description>
|
|
|
|
|
</mat-expansion-panel-header>
|
|
|
|
|
|
|
|
|
|
<ng-template matExpansionPanelContent>
|
|
|
|
|
<section [formGroupName]="j">
|
|
|
|
|
<section formGroupName="additionalInfo" fxLayout="row">
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.login-provider</mat-label>
|
|
|
|
|
<mat-select formControlName="providerName">
|
|
|
|
|
<mat-option *ngFor="let provider of templateProvider" [value]="provider">
|
2020-10-08 15:59:51 +03:00
|
|
|
{{ provider }}
|
2020-10-05 11:09:41 +03:00
|
|
|
</mat-option>
|
|
|
|
|
</mat-select>
|
|
|
|
|
</mat-form-field>
|
2020-10-12 18:11:22 +03:00
|
|
|
<div [tb-help]="getHelpLink(registration)" *ngIf="!isCustomProvider(registration)"></div>
|
2020-10-05 11:09:41 +03:00
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.client-id</mat-label>
|
|
|
|
|
<input matInput formControlName="clientId" required>
|
|
|
|
|
<mat-error *ngIf="registration.get('clientId').hasError('required')">
|
|
|
|
|
{{ 'admin.oauth2.client-id-required' | translate }}
|
|
|
|
|
</mat-error>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<mat-label translate>admin.oauth2.client-secret</mat-label>
|
|
|
|
|
<input matInput formControlName="clientSecret" required>
|
|
|
|
|
<mat-error *ngIf="registration.get('clientSecret').hasError('required')">
|
|
|
|
|
{{ 'admin.oauth2.client-secret-required' | translate }}
|
|
|
|
|
</mat-error>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<mat-expansion-panel class="mat-elevation-z0 custom-settings"
|
2020-10-12 18:11:22 +03:00
|
|
|
[disabled]="isCustomProvider(registration)"
|
|
|
|
|
[expanded]="isCustomProvider(registration)">
|
|
|
|
|
<mat-expansion-panel-header [fxHide]="isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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.access-token-uri</mat-label>
|
|
|
|
|
<input matInput formControlName="accessTokenUri" required>
|
|
|
|
|
<button mat-icon-button matSuffix
|
|
|
|
|
type="button"
|
|
|
|
|
(click)="toggleEditMode(registration, 'accessTokenUri')"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="!isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-07 17:19:12 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-form-field fxFlex class="mat-block">
|
|
|
|
|
<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')"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="!isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-07 17:19:12 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
|
|
|
|
|
<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')"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="!isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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">
|
|
|
|
|
<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')"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="!isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
</div>
|
2020-10-05 11:09:41 +03:00
|
|
|
|
2020-09-07 17:19:12 +03:00
|
|
|
<mat-form-field fxFlex class="mat-block">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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 }}
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-option>
|
|
|
|
|
</mat-select>
|
2020-09-07 17:19:12 +03:00
|
|
|
</mat-form-field>
|
|
|
|
|
|
2020-10-12 18:11:22 +03:00
|
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" *ngIf="isCustomProvider(registration)">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-form-field fxFlex class="mat-block" floatLabel="always">
|
|
|
|
|
<mat-label translate>admin.oauth2.login-button-label</mat-label>
|
|
|
|
|
<input matInput formControlName="loginButtonLabel"
|
2020-10-12 19:33:52 +03:00
|
|
|
placeholder="{{ 'admin.oauth2.login-button-label-placeholder' | translate }}"
|
2020-10-05 11:09:41 +03:00
|
|
|
required>
|
|
|
|
|
<mat-error *ngIf="registration.get('loginButtonLabel').hasError('required')">
|
|
|
|
|
{{ 'admin.oauth2.login-button-label-required' | translate }}
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-error>
|
|
|
|
|
</mat-form-field>
|
|
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
</div>
|
2020-10-05 11:09:41 +03:00
|
|
|
</section>
|
2020-09-08 17:05:13 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<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; trackBy: trackByParams"
|
|
|
|
|
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.scope-required' | translate }}
|
|
|
|
|
</mat-error>
|
|
|
|
|
</mat-form-field>
|
2020-10-13 00:59:56 +03:00
|
|
|
<tb-error style="display: block; margin-top: -24px;"
|
|
|
|
|
[error]="registration.get('scope').hasError('required')
|
|
|
|
|
? ('admin.oauth2.scope-required' | translate) : ''">
|
|
|
|
|
</tb-error>
|
2020-09-08 17:05:13 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
</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>
|
2020-09-08 17:05:13 +03:00
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<section formGroupName="mapperConfig">
|
2020-09-08 17:05:13 +03:00
|
|
|
<mat-form-field fxFlex class="mat-block">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-label translate>admin.oauth2.type</mat-label>
|
|
|
|
|
<mat-select formControlName="type">
|
2020-10-12 18:11:22 +03:00
|
|
|
<mat-option *ngFor="let mapperConfigType of mapperConfigTypes"
|
|
|
|
|
[value]="mapperConfigType">
|
|
|
|
|
{{ mapperConfigType }}
|
2020-10-05 11:09:41 +03:00
|
|
|
</mat-option>
|
|
|
|
|
</mat-select>
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-form-field>
|
|
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<section formGroupName="basic"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="registration.get('mapperConfig.type').value !== mapperConfigType.CUSTOM">
|
|
|
|
|
<mat-form-field class="mat-block"
|
|
|
|
|
*ngIf="registration.get('mapperConfig.type').value !== mapperConfigType.GITHUB">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-form-field>
|
|
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<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" [fxShow]="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>
|
2020-09-08 17:05:13 +03:00
|
|
|
|
|
|
|
|
<mat-form-field fxFlex class="mat-block">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-label translate>admin.oauth2.customer-name-pattern</mat-label>
|
|
|
|
|
<input matInput formControlName="customerNamePattern">
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-form-field>
|
|
|
|
|
|
2020-10-05 11:09:41 +03:00
|
|
|
<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"
|
2020-10-12 18:11:22 +03:00
|
|
|
*ngIf="registration.get('mapperConfig.type').value === mapperConfigType.CUSTOM">
|
2020-10-05 11:09:41 +03:00
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
</mat-form-field>
|
2020-10-05 11:09:41 +03:00
|
|
|
|
|
|
|
|
<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>
|
2020-09-08 17:05:13 +03:00
|
|
|
</section>
|
2020-10-05 11:09:41 +03:00
|
|
|
</mat-tab>
|
|
|
|
|
</mat-tab-group>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</mat-expansion-panel>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</mat-expansion-panel>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
|
|
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
|
|
|
|
|
<button mat-button mat-raised-button color="primary"
|
|
|
|
|
[disabled]="(isLoading$ | async)"
|
2021-06-10 11:50:11 +03:00
|
|
|
(click)="addRegistration(oauth2ParamsInfo)"
|
2020-10-05 11:09:41 +03:00
|
|
|
type="button">
|
|
|
|
|
{{'admin.oauth2.add-provider' | translate}}
|
|
|
|
|
</button>
|
2020-09-07 17:19:12 +03:00
|
|
|
</div>
|
2020-10-05 11:09:41 +03:00
|
|
|
</ng-template>
|
|
|
|
|
|
|
|
|
|
</mat-expansion-panel>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</mat-accordion>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</section>
|
2020-07-09 13:47:35 +03:00
|
|
|
</fieldset>
|
2020-10-05 11:09:41 +03:00
|
|
|
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
|
|
|
|
|
<button type="button" mat-raised-button color="primary"
|
|
|
|
|
[disabled]="isLoading$ | async"
|
|
|
|
|
*ngIf="oauth2SettingsForm.get('enabled').value"
|
2021-06-10 11:50:11 +03:00
|
|
|
(click)="addOAuth2ParamsInfo()">
|
2020-10-05 11:09:41 +03:00
|
|
|
<mat-icon>add</mat-icon>
|
|
|
|
|
<span translate>action.add</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button mat-button mat-raised-button color="primary"
|
|
|
|
|
[disabled]="(isLoading$ | async) || oauth2SettingsForm.invalid || !oauth2SettingsForm.dirty"
|
|
|
|
|
type="submit">
|
|
|
|
|
{{'action.save' | translate}}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2020-07-09 13:47:35 +03:00
|
|
|
</form>
|
|
|
|
|
</mat-card-content>
|
|
|
|
|
</mat-card>
|
|
|
|
|
</div>
|
