Merge pull request #11528 from rusikv/enhancement/oauth-minor-improvements

Oauth2 UI improvements

ui-ngx/src/app/core/http/entity.service.ts

@@ -459,7 +459,7 @@ export class EntityService {
         entitiesObservable = this.queueService.getQueueStatistics(pageLink, config);
         break;
       case EntityType.OAUTH2_CLIENT:
-        pageLink.sortOrder.property = 'createdTime';
+        pageLink.sortOrder.property = 'title';
         entitiesObservable = this.oauth2Service.findTenantOAuth2ClientInfos(pageLink, config);
         break;
     }

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

@@ -23,6 +23,9 @@
       <mat-error *ngIf="entityForm.get('title').hasError('required')">
         {{ 'admin.oauth2.client-title-required' | translate }}
       </mat-error>
+      <mat-error *ngIf="entityForm.get('title').hasError('maxlength')">
+        {{ 'admin.oauth2.client-title-max-length' | translate }}
+      </mat-error>
     </mat-form-field>
   </div>
   <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
@@ -67,7 +70,7 @@
       </mat-error>
     </mat-form-field>
   </div>
-  <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="">
+  <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
     <mat-expansion-panel-header>
       <mat-panel-title fxLayoutAlign="start center" translate>
         admin.oauth2.advanced-settings
@@ -162,7 +165,7 @@
           <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 [disabled]="!this.createNewDialog && !(this.isEdit || this.isAdd)">
+              <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}}

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

@@ -103,6 +103,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
   platformTypes = Object.values(PlatformType);
   platformTypeTranslations = platformTypeTranslations;
   generalSettingsMode = true;
+  advancedExpanded = false;
 
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
@@ -126,7 +127,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
 
   buildForm(entity: OAuth2Client): UntypedFormGroup {
     return this.fb.group({
-      title: [entity?.title ? entity.title : '', [Validators.required]],
+      title: [entity?.title ? entity.title : '', [Validators.required, Validators.maxLength(100)]],
       additionalInfo: this.fb.group({
         providerName: [entity?.additionalInfo?.providerName ? entity?.additionalInfo?.providerName : '', Validators.required]
       }),
@@ -333,7 +334,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     }
 
     this.subscriptions.push(basicGroup.get('tenantNameStrategy').valueChanges.subscribe((domain) => {
-      if (domain === 'CUSTOM') {
+      if (domain === 'CUSTOM' && (this.createNewDialog || this.isEdit || this.isAdd)) {
         basicGroup.get('tenantNamePattern').enable();
       } else {
         basicGroup.get('tenantNamePattern').disable();
@@ -345,7 +346,10 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
 
   private setProviderDefaultValue(provider: string, clientRegistration: UntypedFormGroup) {
     if (provider === 'Custom') {
+      const title = clientRegistration.get('title').value;
       clientRegistration.reset(this.defaultProvider, {emitEvent: false});
+      clientRegistration.patchValue({title}, {emitEvent: false});
+      this.advancedExpanded = true;
     } else {
       const template = this.templates.get(provider);
       template.clientId = '';

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts

@@ -61,14 +61,12 @@ export class ClientsTableConfigResolver implements Resolve<EntityTableConfig<OAu
     this.config.headerComponent = ClientTableHeaderComponent;
     this.config.addDialogStyle = {width: '850px', maxHeight: '100vh'};
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
-    this.config.displayPagination = false;
-    this.config.pageMode = false;
 
     this.config.columns.push(
       new DateEntityTableColumn<OAuth2ClientInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),
-      new EntityTableColumn<OAuth2ClientInfo>('title', 'admin.oauth2.title', '170px'),
+      new EntityTableColumn<OAuth2ClientInfo>('title', 'admin.oauth2.title', '35%'),
       new EntityTableColumn<OAuth2ClientInfo>('providerName', 'admin.oauth2.provider', '170px'),
-      new EntityTableColumn<OAuth2ClientInfo>('platforms', 'admin.oauth2.allowed-platforms', '100%',
+      new EntityTableColumn<OAuth2ClientInfo>('platforms', 'admin.oauth2.allowed-platforms', '170px',
         (clientInfo) => {
           return clientInfo.platforms && clientInfo.platforms.length ?
             clientInfo.platforms.map(platform => this.translate.instant(platformTypeTranslations.get(platform))).join(', ') :

ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts

@@ -54,8 +54,6 @@ export class DomainTableConfigResolver implements Resolve<EntityTableConfig<Doma
     this.config.headerComponent = DomainTableHeaderComponent;
     this.config.addDialogStyle = {width: '850px', maxHeight: '100vh'};
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
-    this.config.displayPagination = false;
-    this.config.pageMode = false;
 
     this.config.columns.push(
       new DateEntityTableColumn<DomainInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),

ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app-table-config.resolver.ts

@@ -55,8 +55,6 @@ export class MobileAppTableConfigResolver implements Resolve<EntityTableConfig<M
     this.config.headerComponent = MobileAppTableHeaderComponent;
     this.config.addDialogStyle = {width: '850px', maxHeight: '100vh'};
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
-    this.config.displayPagination = false;
-    this.config.pageMode = false;
 
     this.config.columns.push(
       new DateEntityTableColumn<MobileAppInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),
@@ -134,8 +132,8 @@ export class MobileAppTableConfigResolver implements Resolve<EntityTableConfig<M
 
   private appSecretText(entity): string {
     let text = entity.appSecret;
-    if (text.length > 40) {
-      text = `${text.slice(0, 40)}…`;
+    if (text.length > 35) {
+      text = `${text.slice(0, 35)}…`;
     }
     return text;
   }

ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.html

@@ -25,6 +25,9 @@
       <mat-error *ngIf="entityForm.hasError('unique')">
         {{ 'admin.oauth2.mobile-package-unique' | translate }}
       </mat-error>
+      <mat-error *ngIf="entityForm.get('pkgName').hasError('maxlength')">
+        {{ 'admin.oauth2.mobile-package-max-length' | translate }}
+      </mat-error>
     </mat-form-field>
   </div>
   <div class="tb-form-row tb-standard-fields no-border no-padding">

ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.ts

@@ -54,7 +54,7 @@ export class MobileAppComponent extends EntityComponent<MobileAppInfo> {
 
   buildForm(entity: MobileAppInfo): UntypedFormGroup {
     return this.fb.group({
-      pkgName: [entity?.pkgName ? entity.pkgName : '', [Validators.required]],
+      pkgName: [entity?.pkgName ? entity.pkgName : '', [Validators.required, Validators.maxLength(255)]],
       appSecret: [entity?.appSecret ? entity.appSecret : btoa(randomAlphanumeric(64)),
         [Validators.required, this.base64Format]],
       oauth2Enabled: isDefinedAndNotNull(entity?.oauth2Enabled) ? entity.oauth2Enabled : true,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -234,14 +234,15 @@
           "delete-mobile-app-text": "Be careful, after the confirmation the mobile application and all related data will become unrecoverable.",
           "title": "Title",
           "client-title-required": "Title is required",
+          "client-title-max-length": "Title should be less than 100",
           "advanced-settings": "Advanced settings",
           "domain-details": "Domain details",
           "no-domains": "No domains found",
           "search-domains": "Search domains",
           "mobile-app-details": "Mobile application details",
           "add-mobile-app": "Add mobile application",
-          "no-mobile-apps": "Search mobile applications",
-          "search-mobile-apps": "No mobile applications found",
+          "no-mobile-apps": "No mobile applications found",
+          "search-mobile-apps": "Search mobile applications",
           "send-token": "Send token",
           "create-new": "Create new",
           "client-authentication-method": "Client authentication method",
@@ -315,6 +316,7 @@
           "mobile-package-placeholder": "Ex.: my.example.app",
           "mobile-package-hint": "For Android: your own unique Application ID. For iOS: Product bundle identifier.",
           "mobile-package-unique": "Application package must be unique.",
+          "mobile-package-max-length": "Application package should be less than 256",
           "mobile-app-secret": "Application secret",
           "mobile-app-secret-hint": "Base64 encoded string representing at least 512 bits of data.",
           "mobile-app-secret-required": "Application secret is required.",