feat(console): add some well known links in app detail, add refresh token grant type in dev mode creation (#4826)

* fix(console): add some well known links

* [servicename]/v1

* add refresh token grant type to devmode creation

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

@@ -15,7 +15,6 @@ import {
   OIDCAuthMethodType,
   OIDCGrantType,
   OIDCResponseType,
-  SAMLConfig,
 } from 'src/app/proto/generated/zitadel/app_pb';
 import {
   AddAPIAppRequest,
@@ -111,8 +110,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
   }[] = [
     { type: OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE, checked: true, disabled: false },
     { type: OIDCGrantType.OIDC_GRANT_TYPE_IMPLICIT, checked: false, disabled: true },
-    // { type: OIDCGrantType.OIDCGRANTTYPE_REFRESH_TOKEN, checked: false, disabled: true },
-    // TODO show when implemented
+    { type: OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN, checked: false, disabled: true },
   ];
 
   public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];

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

@@ -389,6 +389,14 @@
 
         <ng-container *ngIf="currentSetting === 'urls'">
           <cnsl-card title=" {{ 'APP.URLS' | translate }}">
+            <cnsl-info-section *ngIf="environmentMap?.issuer">
+              <div
+                [innerHtml]="
+                  'APP.OIDC.WELLKNOWN' | translate: { url: environmentMap.issuer + '/.well-known/openid-configuration' }
+                "
+              ></div>
+            </cnsl-info-section>
+
             <div class="app-info-row">
               <div class="app-info-wrapper" *ngFor="let environmentV of environmentMap | keyvalue">
                 <p class="app-info-row-title cnsl-secondary-text">{{ environmentV.key }}</p>
@@ -407,6 +415,25 @@
                 </div>
               </div>
             </div>
+
+            <div class="app-info-row">
+              <div class="app-info-wrapper" *ngFor="let wellKnownV of wellKnownMap | keyvalue">
+                <p class="app-info-row-title cnsl-secondary-text">{{ wellKnownV.key }}</p>
+                <div class="app-copy-row">
+                  <div *ngIf="wellKnownV.value" class="environment">
+                    <button
+                      [disabled]="copied === wellKnownV.value"
+                      [matTooltip]="(copied !== wellKnownV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
+                      cnslCopyToClipboard
+                      [valueToCopy]="wellKnownV.value"
+                      (copiedValue)="copied = wellKnownV.key"
+                    >
+                      {{ wellKnownV.value }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </cnsl-card>
         </ng-container>
 

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

@@ -79,6 +79,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
   public app?: App.AsObject;
 
   public environmentMap: { [key: string]: string } = {};
+  public wellKnownMap: { [key: string]: string } = {};
 
   public oidcResponseTypes: OIDCResponseType[] = [
     OIDCResponseType.OIDC_RESPONSE_TYPE_CODE,
@@ -176,10 +177,20 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     this.http.get('./assets/environment.json').subscribe((env: any) => {
       this.environmentMap = {
         issuer: env.issuer,
-        adminServiceUrl: env.api,
-        mgmtServiceUrl: env.api,
-        authServiceUrl: env.api,
+        adminServiceUrl: `${env.api}/auth/v1`,
+        mgmtServiceUrl: `${env.api}/management/v1`,
+        authServiceUrl: `${env.api}/admin/v1`,
       };
+
+      this.http.get(`${env.issuer}/.well-known/openid-configuration`).subscribe((wellKnown: any) => {
+        this.wellKnownMap = {
+          authorization_endpoint: wellKnown.authorization_endpoint,
+          end_session_endpoint: wellKnown.end_session_endpoint,
+          introspection_endpoint: wellKnown.introspection_endpoint,
+          token_endpoint: wellKnown.token_endpoint,
+          userinfo_endpoint: wellKnown.userinfo_endpoint,
+        };
+      });
     });
   }
 

console/src/assets/i18n/de.json

@@ -1683,6 +1683,7 @@
     "TITLEFIRST": "Name der Applikation.",
     "TYPETITLE": "Art der Anwendung",
     "OIDC": {
+      "WELLKNOWN": "Weitere Links können vom <a href='{{url}}' title='Discovery endpoint' target='_blank'>Discovery endpoint</a> abgerufen werden.",
       "INFO": {
         "ISSUER": "Issuer",
         "CLIENTID": "Client Id"

console/src/assets/i18n/en.json

@@ -1683,6 +1683,7 @@
     "TITLEFIRST": "Name of the application",
     "TYPETITLE": "Type of application",
     "OIDC": {
+      "WELLKNOWN": "Further links can be retrieved from the <a href='{{url}}' title='Discovery endpoint' target='_blank'>discovery endpoint</a>.",
       "INFO": {
         "ISSUER": "Issuer",
         "CLIENTID": "Client Id"

console/src/assets/i18n/fr.json

@@ -1679,6 +1679,7 @@
     "ORIGINS": "Origines",
     "NOTANORIGIN": "La valeur saisie n'est pas une origine",
     "OIDC": {
+      "WELLKNOWN": "Pour plus d'informations, consultez le <a href='{{url}}' title='Discovery endpoint' target='_blank'>discovery endpoint</a>.",
       "INFO": {
         "ISSUER": "Émetteur",
         "CLIENTID": "Id client"

console/src/assets/i18n/it.json

@@ -1683,6 +1683,7 @@
     "TITLEFIRST": "Nome dell' applicazione",
     "TYPETITLE": "Che tipo di applicazione vuoi creare?",
     "OIDC": {
+      "WELLKNOWN": "Per ulteriori informazioni, consultare il sito <a href='{{url}}' title='Discovery endpoint' target='_blank'>discovery endpoint</a>.",
       "INFO": {
         "ISSUER": "Issuer",
         "CLIENTID": "Client ID"

console/src/assets/i18n/zh.json

@@ -1678,6 +1678,7 @@
     "ORIGINS": "其他来源",
     "NOTANORIGIN": "输入的值不是有效来源",
     "OIDC": {
+      "WELLKNOWN": "欲了解更多信息，请看<a href='{url}}' title='发现端点' target='_blank'>发现端点</a>。",
       "INFO": {
         "ISSUER": "Issuer",
         "CLIENTID": "Client Id"