fix(console): datepicker, formfield cleanup, member role help, domain layout (#3765)

* key datepicker, formfield cleanup, member role help, domain layout

* accounts card template overlay

* fix account card trigger

* chore(deps-dev): bump @typescript-eslint/parser from 5.26.0 to 5.27.0 in /console (#3752)

chore(deps-dev): bump @typescript-eslint/parser in /console

Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.26.0 to 5.27.0.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.27.0/packages/parser)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* deps, i18n, feature info section

* lint

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

console/src/app/pages/actions/actions.component.html

@@ -22,7 +22,7 @@
 
     <ng-template cnslHasRole [hasRole]="['org.flow.read']">
       <div *ngIf="flow" class="flow">
-        <cnsl-form-field class="formfield" appearance="outline">
+        <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'FLOWS.FLOWTYPE' | translate }}</cnsl-label>
           <mat-select [formControl]="typeControl">
             <mat-option *ngFor="let type of typesForSelection" [value]="type">

console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html

@@ -1,38 +1,42 @@
-<span *ngIf="!id" class="action-dialog-title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
-<span *ngIf="id" class="action-dialog-title" mat-dialog-title>{{'FLOWS.DIALOG.UPDATE.TITLE' | translate}}</span>
+<span *ngIf="!id" class="action-dialog-title" mat-dialog-title>{{ 'FLOWS.DIALOG.ADD.TITLE' | translate }}</span>
+<span *ngIf="id" class="action-dialog-title" mat-dialog-title>{{ 'FLOWS.DIALOG.UPDATE.TITLE' | translate }}</span>
 
 <div mat-dialog-content>
-  <cnsl-form-field class="form-field" appearance="outline">
-    <cnsl-label>{{'FLOWS.NAME' | translate}}</cnsl-label>
-    <input cnslInput [(ngModel)]="name">
+  <cnsl-form-field class="form-field">
+    <cnsl-label>{{ 'FLOWS.NAME' | translate }}</cnsl-label>
+    <input cnslInput [(ngModel)]="name" />
   </cnsl-form-field>
 
-  <ngx-codemirror *ngIf="opened$ | async" [(ngModel)]="script" [options]="{
-    lineNumbers: true,
-    theme: 'material',
-    mode: 'javascript'
-  }"></ngx-codemirror>
+  <ngx-codemirror
+    *ngIf="opened$ | async"
+    [(ngModel)]="script"
+    [options]="{
+      lineNumbers: true,
+      theme: 'material',
+      mode: 'javascript'
+    }"
+  ></ngx-codemirror>
 
-  <cnsl-form-field class="form-field" appearance="outline">
-    <cnsl-label>{{'FLOWS.TIMEOUTINSEC' | translate}}</cnsl-label>
-    <input type="number" cnslInput [(ngModel)]="durationInSec">
+  <cnsl-form-field class="form-field">
+    <cnsl-label>{{ 'FLOWS.TIMEOUTINSEC' | translate }}</cnsl-label>
+    <input type="number" cnslInput [(ngModel)]="durationInSec" />
   </cnsl-form-field>
 
-  <mat-checkbox [(ngModel)]="allowedToFail">{{'FLOWS.ALLOWEDTOFAIL' | translate}}</mat-checkbox>
+  <mat-checkbox [(ngModel)]="allowedToFail">{{ 'FLOWS.ALLOWEDTOFAIL' | translate }}</mat-checkbox>
 </div>
 <div mat-dialog-actions class="action">
   <button *ngIf="id" mat-stroked-button color="warn" (click)="deleteAndCloseDialog()">
-    {{'ACTIONS.DELETE' | translate}}
+    {{ 'ACTIONS.DELETE' | translate }}
   </button>
 
   <span class="fill-space"></span>
 
   <button mat-stroked-button (click)="closeDialog()">
-    {{'ACTIONS.CANCEL' | translate}}
+    {{ 'ACTIONS.CANCEL' | translate }}
   </button>
 
   <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
-    <span *ngIf="!id">{{'ACTIONS.ADD' | translate}}</span>
-    <span *ngIf="id">{{'ACTIONS.SAVE' | translate}}</span>
+    <span *ngIf="!id">{{ 'ACTIONS.ADD' | translate }}</span>
+    <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
   </button>
-</div>
+</div>

console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html

@@ -1,27 +1,27 @@
-<span class="title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
+<span class="title" mat-dialog-title>{{ 'FLOWS.DIALOG.ADD.TITLE' | translate }}</span>
 
 <div mat-dialog-content>
   <form *ngIf="form" [formGroup]="form">
-    <cnsl-form-field class="form-field" appearance="outline">
-      <cnsl-label>{{'FLOWS.FLOWTYPE' | translate}}</cnsl-label>
+    <cnsl-form-field class="form-field">
+      <cnsl-label>{{ 'FLOWS.FLOWTYPE' | translate }}</cnsl-label>
       <mat-select formControlName="flowType">
         <mat-option *ngFor="let type of typesForSelection" [value]="type">
-          {{ 'FLOWS.TYPES.'+type | translate }}
+          {{ 'FLOWS.TYPES.' + type | translate }}
         </mat-option>
       </mat-select>
     </cnsl-form-field>
 
-    <cnsl-form-field class="form-field" appearance="outline">
-      <cnsl-label>{{'FLOWS.TRIGGERTYPE' | translate}}</cnsl-label>
+    <cnsl-form-field class="form-field">
+      <cnsl-label>{{ 'FLOWS.TRIGGERTYPE' | translate }}</cnsl-label>
       <mat-select formControlName="triggerType" name="triggerType">
         <mat-option *ngFor="let type of triggerTypesForSelection" [value]="type">
-          {{ 'FLOWS.TRIGGERTYPES.'+type | translate }}
+          {{ 'FLOWS.TRIGGERTYPES.' + type | translate }}
         </mat-option>
       </mat-select>
     </cnsl-form-field>
 
-    <cnsl-form-field class="form-field" appearance="outline">
-      <cnsl-label>{{'FLOWS.ACTIONS' | translate}}</cnsl-label>
+    <cnsl-form-field class="form-field">
+      <cnsl-label>{{ 'FLOWS.ACTIONS' | translate }}</cnsl-label>
       <mat-select formControlName="actionIdsList" name="actionIdsList" multiple>
         <mat-option *ngFor="let action of actions" [value]="action.id">
           {{ action.name }}
@@ -30,12 +30,12 @@
     </cnsl-form-field>
   </form>
 </div>
-<div mat-dialog-actions class=" action">
+<div mat-dialog-actions class="action">
   <button mat-stroked-button (click)="closeDialog()">
-    {{'ACTIONS.CANCEL' | translate}}
+    {{ 'ACTIONS.CANCEL' | translate }}
   </button>
 
   <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
-    <span>{{'ACTIONS.SAVE' | translate}}</span>
+    <span>{{ 'ACTIONS.SAVE' | translate }}</span>
   </button>
-</div>
+</div>

console/src/app/pages/domains/add-domain-dialog/add-domain-dialog.component.html

@@ -2,7 +2,7 @@
 <div mat-dialog-content>
   <p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.ADD.DESCRIPTION' | translate }}</p>
 
-  <cnsl-form-field label="Domain" required="true" class="form-field" appearance="outline">
+  <cnsl-form-field label="Domain" required="true" class="form-field">
     <cnsl-label>Domain</cnsl-label>
     <input cnslInput [(ngModel)]="newdomain" />
   </cnsl-form-field>

console/src/app/pages/domains/domain-verification/domain-verification.component.html

@@ -1,25 +1,36 @@
-<span class="title" mat-dialog-title>{{'ORG.PAGES.ORGDOMAIN.TITLE' | translate}} {{domain.domainName}}</span>
+<span class="title" mat-dialog-title>{{ 'ORG.PAGES.ORGDOMAIN.TITLE' | translate }} {{ domain.domainName }}</span>
 <div mat-dialog-content>
   <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate }}</p>
 
-  <cnsl-info-section [type]="InfoSectionType.WARN" class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_DESC' |
-    translate }}</cnsl-info-section>
+  <cnsl-info-section [type]="InfoSectionType.WARN" class="desc">{{
+    'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_DESC' | translate
+  }}</cnsl-info-section>
 
-  <p *ngIf="domain.validationType !== DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED && !(dns || http)"
-    class="desc">
-    {{'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING' | translate: domain }}
-    {{'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING_TYPE' | translate}}
-    {{'ORG.PAGES.ORGDOMAIN.TYPES.'+ domain.validationType | translate}}</p>
+  <p
+    *ngIf="domain.validationType !== DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED && !(dns || http)"
+    class="desc"
+  >
+    {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING' | translate: domain }}
+    {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING_TYPE' | translate }}
+    {{ 'ORG.PAGES.ORGDOMAIN.TYPES.' + domain.validationType | translate }}
+  </p>
 
   <div class="btn-container">
-    <button [disabled]="domain.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED"
-      color="primary" type="submit" mat-raised-button *ngIf="!(dns || http)" (click)="validate()">
+    <button
+      [disabled]="domain.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED"
+      color="primary"
+      type="submit"
+      mat-raised-button
+      *ngIf="!(dns || http)"
+      (click)="validate()"
+    >
       {{ 'ACTIONS.VERIFY' | translate }}
     </button>
     <mat-spinner class="spinner" *ngIf="validating" diameter="20" mode="indeterminate"></mat-spinner>
 
-    <button *ngIf="!showNew" mat-stroked-button color="primary"
-      (click)="showNew = true">{{'ORG.PAGES.ORGDOMAIN.REQUESTNEWTOKEN' | translate}}</button>
+    <button *ngIf="!showNew" mat-stroked-button color="primary" (click)="showNew = true">
+      {{ 'ORG.PAGES.ORGDOMAIN.REQUESTNEWTOKEN' | translate }}
+    </button>
   </div>
 
   <ng-container *ngIf="showNew">
@@ -33,11 +44,10 @@
 
     <div *ngIf="http">
       <p>HTTP TOKEN</p>
-      <p class="entry">{{http?.url}}.txt</p>
+      <p class="entry">{{ http?.url }}.txt</p>
 
       <div class="btn-container">
-        <button mat-stroked-button (click)="saveFile()" color="primary">{{ 'ORG.PAGES.DOWNLOAD_FILE' | translate
-          }}</button>
+        <button mat-stroked-button (click)="saveFile()" color="primary">{{ 'ORG.PAGES.DOWNLOAD_FILE' | translate }}</button>
         <button color="primary" class="verify-button" type="submit" mat-raised-button (click)="validate()">
           <span>{{ 'ACTIONS.VERIFY' | translate }}</span>
         </button>
@@ -47,10 +57,17 @@
 
     <div *ngIf="dns">
       <p>DNS TOKEN</p>
-      <div class="line" *ngIf="dns?.token">
-        <p class="entry">{{dns?.token}}</p>
-        <button color="primary" [disabled]="copied === data.clientSecret" matTooltip="copy to clipboard"
-          cnslCopyToClipboard [valueToCopy]="dns.token" (copiedValue)="copied = $event" mat-icon-button>
+      <div class="domain-line" *ngIf="dns?.token">
+        <p class="entry">{{ dns?.token }}</p>
+        <button
+          color="primary"
+          [disabled]="copied === data.clientSecret"
+          matTooltip="copy to clipboard"
+          cnslCopyToClipboard
+          [valueToCopy]="dns.token"
+          (copiedValue)="copied = $event"
+          mat-icon-button
+        >
           <i *ngIf="copied !== dns.token" class="las la-clipboard"></i>
           <i *ngIf="copied === dns.token" class="las la-clipboard-check"></i>
         </button>
@@ -59,12 +76,12 @@
         </button>
         <mat-spinner class="spinner" *ngIf="validating" diameter="20" mode="indeterminate"></mat-spinner>
       </div>
-      <p class="entry">{{dns?.url}}</p>
+      <p class="entry">{{ dns?.url }}</p>
     </div>
   </ng-container>
 </div>
 <div mat-dialog-actions class="action">
-  <button mat-stroked-button class="ok-button" (click)="closeDialog()">
-    {{'ACTIONS.CLOSE' | translate}}
+  <button mat-stroked-button (click)="closeDialog()">
+    {{ 'ACTIONS.CLOSE' | translate }}
   </button>
-</div>
+</div>

console/src/app/pages/domains/domain-verification/domain-verification.component.scss

@@ -14,9 +14,10 @@
 
 .entry {
   margin: 0.5rem 0;
+  display: inline-block;
 }
 
-.line {
+.domain-line {
   display: flex;
   align-items: center;
 }
@@ -24,8 +25,4 @@
 .action {
   display: flex;
   justify-content: flex-start;
-
-  .ok-button {
-    margin-left: 0.5rem;
-  }
 }

console/src/app/pages/org-create/org-create.component.html

@@ -22,11 +22,11 @@
 
           <form [formGroup]="orgForm" (ngSubmit)="next()">
             <div class="content">
-              <cnsl-form-field class="formfield" appearance="outline">
+              <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                 <input cnslInput formControlName="name" />
               </cnsl-form-field>
-              <cnsl-form-field class="formfield" appearance="outline">
+              <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
                 <input cnslInput formControlName="domain" />
               </cnsl-form-field>
@@ -54,35 +54,35 @@
             <form [formGroup]="userForm" class="form">
               <div class="content">
                 <p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
                   <input cnslInput formControlName="userName" required />
                   <span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </cnsl-form-field>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
                   <input cnslInput formControlName="email" required />
                   <span cnslError *ngIf="email?.invalid && email?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </cnsl-form-field>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
                   <input cnslInput formControlName="firstName" required />
                   <span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </cnsl-form-field>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
                   <input cnslInput formControlName="lastName" required />
                   <span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </cnsl-form-field>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
                   <input cnslInput formControlName="nickName" />
                   <span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
@@ -92,7 +92,7 @@
 
                 <p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
 
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
                   <mat-select formControlName="gender">
                     <mat-option *ngFor="let gender of genders" [value]="gender">
@@ -103,7 +103,7 @@
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </cnsl-form-field>
-                <cnsl-form-field class="formfield" appearance="outline">
+                <cnsl-form-field class="formfield">
                   <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
                   <mat-select formControlName="preferredLanguage">
                     <mat-option *ngFor="let language of languages" [value]="language">
@@ -131,7 +131,7 @@
                   </cnsl-password-complexity-view>
 
                   <form [formGroup]="pwdForm" class="pwd-form">
-                    <cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
+                    <cnsl-form-field class="pwd" *ngIf="password">
                       <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
                       <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
 
@@ -139,7 +139,7 @@
                         {{ 'USER.VALIDATION.REQUIRED' | translate }}
                       </span>
                     </cnsl-form-field>
-                    <cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
+                    <cnsl-form-field class="pwd" *ngIf="confirmPassword">
                       <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
                       <input
                         cnslInput
@@ -186,7 +186,7 @@
 
           <form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
             <div class="content">
-              <cnsl-form-field class="formfield" appearance="outline">
+              <cnsl-form-field class="formfield">
                 <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                 <input cnslInput formControlName="name" />
               </cnsl-form-field>

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -24,8 +24,16 @@
 </cnsl-top-view>
 <div class="max-width-container">
   <cnsl-meta-layout>
-    <ng-template cnslHasRole [hasRole]="['policy.read']">
+    <ng-container *ngIf="['policy.read'] | hasRole | async; else nopolicyreadpermission">
       <cnsl-settings-grid [type]="PolicyComponentServiceType.MGMT"></cnsl-settings-grid>
+    </ng-container>
+
+    <ng-template #nopolicyreadpermission>
+      <div class="no-permission-warn-wrapper">
+        <cnsl-info-section class="info-section-warn" [fitWidth]="true" [type]="InfoSectionType.ALERT">{{
+          'ORG.PAGES.NOPERMISSION' | translate
+        }}</cnsl-info-section>
+      </div>
     </ng-template>
 
     <div metainfo>

console/src/app/pages/orgs/org-detail/org-detail.component.scss

@@ -8,3 +8,7 @@
   text-transform: uppercase;
   margin-top: 2rem;
 }
+
+.no-permission-warn-wrapper {
+  padding-top: 1.5rem;
+}

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject, from, Observable, of, Subject, takeUntil } from 'rxjs'
 import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
+import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
@@ -31,6 +32,8 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
   public totalMemberResult: number = 0;
   public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
   private destroy$: Subject<void> = new Subject();
+
+  public InfoSectionType: any = InfoSectionType;
   constructor(
     private dialog: MatDialog,
     public mgmtService: ManagementService,

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -24,7 +24,7 @@
         <ng-template matStepLabel>{{ 'APP.OIDC.NAMEANDTYPESECTION' | translate }}</ng-template>
 
         <p class="step-title">{{ 'APP.OIDC.TITLEFIRST' | translate }}</p>
-        <cnsl-form-field appearance="outline" class="name-formfield">
+        <cnsl-form-field class="name-formfield">
           <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
           <input cnslInput cdkFocusInitial formControlName="name" />
           <span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
@@ -250,12 +250,12 @@
   <div *ngIf="devmode" class="dev">
     <form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
       <div class="content">
-        <cnsl-form-field appearance="outline" class="formfield">
+        <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
           <input cnslInput formControlName="name" />
         </cnsl-form-field>
 
-        <cnsl-form-field appearance="outline" class="formfield">
+        <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
           <mat-select formControlName="appType">
             <mat-option *ngFor="let appType of appTypes" [value]="appType">
@@ -265,7 +265,7 @@
         </cnsl-form-field>
 
         <ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
-          <cnsl-form-field appearance="outline" class="formfield">
+          <cnsl-form-field class="formfield">
             <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
             <mat-select formControlName="grantTypesList" multiple>
               <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
@@ -274,7 +274,7 @@
             </mat-select>
           </cnsl-form-field>
 
-          <cnsl-form-field appearance="outline" class="formfield">
+          <cnsl-form-field class="formfield">
             <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
             <mat-select formControlName="responseTypesList" multiple>
               <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
@@ -284,7 +284,7 @@
           </cnsl-form-field>
         </ng-container>
 
-        <cnsl-form-field appearance="outline" class="formfield">
+        <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
           <mat-select formControlName="authMethodType">
             <mat-option *ngFor="let type of authMethodTypes" [value]="type.type">

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -87,12 +87,12 @@
             <form [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
               <div class="app-oidc-content">
                 <div class="app-oidc-grid">
-                  <cnsl-form-field class="app-formfield" appearance="outline">
+                  <cnsl-form-field class="app-formfield">
                     <cnsl-label>{{ 'APP.OIDC.CLIENTID' | translate }}</cnsl-label>
                     <input cnslInput formControlName="clientId" />
                   </cnsl-form-field>
 
-                  <cnsl-form-field appearance="outline" class="app-formfield">
+                  <cnsl-form-field class="app-formfield">
                     <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="appType">
                       <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
@@ -101,7 +101,7 @@
                     </mat-select>
                   </cnsl-form-field>
 
-                  <cnsl-form-field class="app-formfield" appearance="outline">
+                  <cnsl-form-field class="app-formfield">
                     <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="responseTypesList" multiple>
                       <mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
@@ -110,7 +110,7 @@
                     </mat-select>
                   </cnsl-form-field>
 
-                  <cnsl-form-field appearance="outline" class="app-formfield">
+                  <cnsl-form-field class="app-formfield">
                     <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
                     <mat-select formControlName="authMethodType">
                       <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
@@ -119,7 +119,7 @@
                     </mat-select>
                   </cnsl-form-field>
 
-                  <cnsl-form-field class="app-formfield" appearance="outline">
+                  <cnsl-form-field class="app-formfield">
                     <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
                     <mat-select formControlName="grantTypesList" multiple>
                       <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
@@ -158,7 +158,7 @@
         <ng-container *ngIf="currentSetting === 'token'">
           <cnsl-card *ngIf="oidcTokenForm && app?.oidcConfig" title=" {{ 'APP.OIDC.TOKENSECTIONTITLE' | translate }}">
             <form [formGroup]="oidcTokenForm" (ngSubmit)="saveOIDCApp()">
-              <cnsl-form-field appearance="outline" class="app-formfield">
+              <cnsl-form-field class="app-formfield">
                 <cnsl-label>{{ 'APP.OIDC.TOKENTYPE' | translate }}</cnsl-label>
                 <mat-select formControlName="accessTokenType">
                   <mat-option *ngFor="let type of oidcTokenTypes" [value]="type">