feat(console): refresh toggle out of granttype context (#1785)

* refresh toggle * disable if not code flow, lint * lint * fix: change oidc config order * accept refresh option within flow Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-08-11 23:47:33 +00:00 · 2021-05-31 09:04:49 +02:00
parent 769fb93506
commit 1f41cc5ca8
6 changed files with 301 additions and 221 deletions
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -198,11 +198,21 @@
                </div>

                <div class="content">
+                  <div class="grid">
                    <cnsl-form-field class="formfield" appearance="outline">
                        <cnsl-label>{{ 'APP.OIDC.CLIENTID' | translate }}</cnsl-label>
                        <input cnslInput formControlName="clientId" />
                    </cnsl-form-field>

+                    <cnsl-form-field appearance="outline" class="formfield">
+                      <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
+                      <mat-select formControlName="appType">
+                        <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
+                          {{ 'APP.OIDC.APPTYPE.'+type | translate }}
+                        </mat-option>
+                      </mat-select>
+                    </cnsl-form-field>
+
                    <cnsl-form-field class="formfield" appearance="outline">
                        <cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
                        <mat-select formControlName="responseTypesList" multiple>
@@ -212,6 +222,15 @@
                        </mat-select>
                    </cnsl-form-field>

+                    <cnsl-form-field appearance="outline" class="formfield">
+                        <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
+                        <mat-select formControlName="authMethodType">
+                            <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
+                                {{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
+                            </mat-option>
+                        </mat-select>
+                    </cnsl-form-field>
+
                    <cnsl-form-field class="formfield" appearance="outline">
                      <cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
                      <mat-select formControlName="grantTypesList" multiple>
@@ -221,23 +240,11 @@
                      </mat-select>
                    </cnsl-form-field>

-                    <cnsl-form-field appearance="outline" class="formfield">
-                        <cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
-                        <mat-select formControlName="appType">
-                            <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
-                                {{ 'APP.OIDC.APPTYPE.'+type | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </cnsl-form-field>
-
-                    <cnsl-form-field appearance="outline" class="formfield">
-                        <cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
-                        <mat-select formControlName="authMethodType">
-                            <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
-                                {{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
-                            </mat-option>
-                        </mat-select>
-                    </cnsl-form-field>
+                    <mat-checkbox color="primary" class="rt"
+                        (change)="toggleRefreshToken($event)" [disabled]="!this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)" [checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)">
+                        {{ 'APP.OIDC.REFRESHTOKEN' | translate }}
+                    </mat-checkbox>
+                  </div>

                    <div class="divider"></div>

--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@@ -142,6 +142,17 @@
  flex-wrap: wrap;
  margin: 0 -.5rem;

+  .grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+    .rt {
+      margin-top: 2.3rem;
+      margin-left: .5rem;
+    }
+  }
+
  &.nowrap {
    flex-wrap: nowrap;
  }
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
@@ -3,6 +3,7 @@ import { Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -112,6 +113,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
  public OIDCAuthMethodType: any = OIDCAuthMethodType;
  public APIAuthMethodType: any = APIAuthMethodType;
  public OIDCTokenType: any = OIDCTokenType;
+  public OIDCGrantType: any = OIDCGrantType;

  public ChangeType: any = ChangeType;

@@ -439,6 +441,24 @@ export class AppDetailComponent implements OnInit, OnDestroy {
    }
  }

+  public toggleRefreshToken(event: MatCheckboxChange): void {
+    const c = this.grantTypesList?.value;
+
+    if (event.checked) {
+      if (!c.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)) {
+        this.grantTypesList?.setValue([OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN, ...c]);
+      }
+    } else {
+      const index = (this.grantTypesList?.value as OIDCGrantType[])
+        .findIndex(gt => gt === OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN);
+      if (index > -1) {
+        const copy = Object.assign([], this.grantTypesList?.value);
+        copy.splice(index, 1);
+        this.grantTypesList?.setValue(copy);
+      }
+    }
+  }
+

  public saveOIDCApp(): void {
    this.requestRedirectValuesSubject$.next();
--- a/console/src/app/pages/projects/apps/authmethods.ts
+++ b/console/src/app/pages/projects/apps/authmethods.ts
@@ -174,7 +174,7 @@ export function getAuthMethodFromPartialConfig(
  },
 ): string {
  if (config?.oidc) {
-        const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList, config.oidc.authMethodType];
+    const toCheck = [config.oidc.responseTypesList, config.oidc.grantTypesList?.sort(), config.oidc.authMethodType];
    const code = JSON.stringify(
      [
        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
@@ -183,6 +183,14 @@ export function getAuthMethodFromPartialConfig(
      ],
    );

+    const codeWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_BASIC,
+      ],
+    );
+
    const pkce = JSON.stringify(
      [
        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
@@ -191,6 +199,14 @@ export function getAuthMethodFromPartialConfig(
      ],
    );

+    const pkceWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE,
+      ],
+    );
+
    const post = JSON.stringify(
      [
        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
@@ -199,6 +215,14 @@ export function getAuthMethodFromPartialConfig(
      ],
    );

+    const postWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_POST,
+      ],
+    );
+
    const pkjwt = JSON.stringify(
      [
        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
@@ -207,6 +231,14 @@ export function getAuthMethodFromPartialConfig(
      ],
    );

+    const pkjwtWithRefresh = JSON.stringify(
+      [
+        [OIDCResponseType.OIDC_RESPONSE_TYPE_CODE],
+        [OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN].sort(),
+        OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_PRIVATE_KEY_JWT,
+      ],
+    );
+
    const implicit = JSON.stringify(
      [
        [OIDCResponseType.OIDC_RESPONSE_TYPE_ID_TOKEN_TOKEN],
@@ -217,9 +249,17 @@ export function getAuthMethodFromPartialConfig(

    switch (JSON.stringify(toCheck)) {
      case code: return CODE_METHOD.key;
+      case codeWithRefresh: return CODE_METHOD.key;
+
      case pkce: return PKCE_METHOD.key;
+      case pkceWithRefresh: return PKCE_METHOD.key;
+
      case post: return POST_METHOD.key;
+      case postWithRefresh: return POST_METHOD.key;
+
      case pkjwt: return PK_JWT_METHOD.key;
+      case pkjwtWithRefresh: return PK_JWT_METHOD.key;
+
      case implicit: return IMPLICIT_METHOD.key;
      default:
        return CUSTOM_METHOD.key;
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -1106,6 +1106,7 @@
        "1": "ID-Token",
        "2": "Token-ID-Token"
      },
+      "REFRESHTOKEN":"Refresh Token",
      "GRANTTYPE": "Berechtigungstypen",
      "GRANT": {
        "0": "Authorisation Code",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -1107,6 +1107,7 @@
        "1": "ID Token",
        "2": "Token-ID Token"
      },
+      "REFRESHTOKEN":"Refresh Token",
      "GRANTTYPE": "Grant Types",
      "GRANT": {
        "0": "Authorization Code",