fix(console): show callback urls on update idp (#7668)

* fix(console): show callback urls on update idp

* styles

* lint

* center links

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="keyboard-shortcuts">
   <h1 class="title" mat-dialog-title>{{ 'KEYBOARDSHORTCUTS.TITLE' | translate }}</h1>
   <div mat-dialog-content>
     <div *ngIf="isNotOnSystem" class="keyboard-shortcuts-group">

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss

@@ -1,19 +1,28 @@
-@mixin keyboard-shortcuts-theme($theme) {
+.keyboard-shortcuts {
-  $primary: map-get($theme, primary);
+  padding: 1.5rem;
-  $background: map-get($theme, background);
+  border-radius: 6px !important;
-  $foreground: map-get($theme, foreground);
+
-  $text-color: map-get($foreground, text);
+  .action {
-  $accent: map-get($theme, accent);
+    display: flex;
-  $is-dark-theme: map-get($theme, is-dark);
+    margin-top: 1rem;
-  $accent-color: map-get($primary, 500);
+    button {
-  $back: map-get($background, background);
+      border-radius: 0.5rem;
-  $card-background-color: map-get($background, cards);
+      .mat-mdc-button-persistent-ripple {
+        border-style: none !important;
+      }
+    }
+
+    .fill-space {
+      flex: 1;
+    }
+  }
+
+  .title {
+    font-size: 1.2rem;
+    margin-top: 0;
+  }
 
   .keyboard-shortcuts-group {
-    $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
-
-    border: 1px solid $border-color;
-    background-color: $card-background-color;
     padding: 1rem;
     border-radius: 0.5rem;
     margin: 0.5rem 0 0 0;
@@ -21,7 +30,6 @@
     h2 {
       font-size: 1rem;
       margin: 0 0 1rem 0;
-      color: $text-color;
     }
 
     .keyboard-shortcuts-wrapper {
@@ -35,14 +43,6 @@
 
         .keyboard-shortcut-name {
           font-size: 14px;
-
-          strong {
-            color: $text-color;
-          }
-        }
-
-        &:not(:last-child) {
-          border-bottom: 1px solid map-get($foreground, dividers);
         }
 
         .fill-space {
@@ -68,7 +68,6 @@
       right: 0;
       bottom: 0;
       left: 0;
-      background: if($is-dark-theme, #fff, #000);
       opacity: 0.15;
       border-radius: 4px;
     }
@@ -86,30 +85,51 @@
   .keyboard-shortcuts-plus {
     font-size: 14px;
   }
-
-  .title {
-    font-size: 1.2rem;
-    margin-top: 0;
-    color: $text-color;
-  }
 }
 
-.action {
+@mixin keyboard-shortcuts-theme($theme) {
-  display: flex;
+  $primary: map-get($theme, primary);
-  margin-top: 1rem;
+  $background: map-get($theme, background);
-  button {
+  $foreground: map-get($theme, foreground);
-    border-radius: 0.5rem;
+  $text-color: map-get($foreground, text);
-    .mat-mdc-button-persistent-ripple {
+  $accent: map-get($theme, accent);
-      border-style: none !important;
+  $is-dark-theme: map-get($theme, is-dark);
+  $accent-color: map-get($primary, 500);
+  $back: map-get($background, background);
+  $card-background-color: map-get($background, cards);
+
+  .keyboard-shortcuts {
+    .title {
+      color: $text-color;
+    }
+
+    .keyboard-shortcuts-group {
+      $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
+      border: 1px solid $border-color;
+      background-color: $card-background-color;
+
+      h2 {
+        color: $text-color;
+      }
+
+      .keyboard-shortcuts-wrapper {
+        .keyboard-shortcut {
+          .keyboard-shortcut-name {
+            strong {
+              color: $text-color;
+            }
+          }
+          &:not(:last-child) {
+            border-bottom: 1px solid map-get($foreground, dividers);
+          }
+        }
+      }
+    }
+
+    .keyboard-shortcuts-action-key {
+      .keyboard-shortcuts-key-overlay {
+        background: if($is-dark-theme, #fff, #000);
+      }
     }
   }
-
-  .fill-space {
-    flex: 1;
-  }
-}
-
-.container {
-  padding: 1.5rem;
-  border-radius: 6px !important;
 }

console/src/app/modules/providers/provider-apple/provider-apple.component.html

@@ -19,7 +19,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'Apple' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'Apple' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/apple#apple-configuration"

console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'Microsoft' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'Microsoft' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/azure-ad-oidc#entra-id-configuration"

console/src/app/modules/providers/provider-github-es/provider-github-es.component.html

@@ -19,7 +19,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'GitHub' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'GitHub' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/github#github-configuration"

console/src/app/modules/providers/provider-github/provider-github.component.html

@@ -19,7 +19,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'GitHub' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'GitHub' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/github#github-configuration"

console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'GitLab' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'GitLab' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/gitlab#gitlab-configuration"

console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'GitLab' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'GitLab' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/gitlab#gitlab-configuration"

console/src/app/modules/providers/provider-google/provider-google.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'Google' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'Google' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/google#google-configuration"

console/src/app/modules/providers/provider-jwt/provider-jwt.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.JWT.TITLE' | translate"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.JWT.DESCRIPTION' | translate"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/jwt-idp"

console/src/app/modules/providers/provider-ldap/provider-ldap.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.LDAP.TITLE' | translate: { provider: 'Google' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.LDAP.DESCRIPTION' | translate: { provider: 'Google' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/ldap"

console/src/app/modules/providers/provider-next/provider-next.component.scss

@@ -33,7 +33,7 @@
     }
 
     .title {
-      margin: 0;
+      margin: 1.2rem 0;
     }
 
     .next-icon {

console/src/app/modules/providers/provider-oauth/provider-oauth.component.html

@@ -18,6 +18,10 @@
     </div>
 
     <cnsl-provider-next
+      [configureProvider]="(justCreated$ | async) === ''"
+      [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'OAuth' }"
+      [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'OAuth' }"
+      [copyUrls]="copyUrls$ | async"
       [autofillLink]="autofillLink$ | async"
       [activateLink]="activateLink$ | async"
       [expanded]="!!(expandWhatNow$ | async)"

console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts

@@ -65,6 +65,7 @@ export class ProviderOAuthComponent {
     this.service$,
   );
   public expandWhatNow$ = this.nextSvc.expandWhatNow(this.id$, this.activateLink$, this.justCreated$);
+  public copyUrls$ = this.nextSvc.callbackUrls();
 
   constructor(
     private authService: GrpcAuthService,

console/src/app/modules/providers/provider-oidc/provider-oidc.component.html

@@ -18,7 +18,7 @@
     </div>
 
     <cnsl-provider-next
-      [configureProvider]="(exists$ | async) === false"
+      [configureProvider]="(justCreated$ | async) === ''"
       [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.TITLE' | translate: { provider: 'OIDC' }"
       [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.CALLBACK.DESCRIPTION' | translate: { provider: 'OIDC' }"
       configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/google#google-configuration"