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

* fix(console): show callback urls on update idp * styles * lint * center links
2025-08-11 20:47:32 +00:00 · 2024-03-28 17:22:08 +01:00
parent 3ca80d637d
commit 6ca35009be
15 changed files with 83 additions and 58 deletions
--- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html
+++ b/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">
--- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
+++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss
@@ -1,19 +1,28 @@
-@mixin keyboard-shortcuts-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $text-color: map-get($foreground, text);
-  $accent: map-get($theme, accent);
-  $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 {
+  padding: 1.5rem;
+  border-radius: 6px !important;
+
+  .action {
+    display: flex;
+    margin-top: 1rem;
+    button {
+      border-radius: 0.5rem;
+      .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 {
-  display: flex;
-  margin-top: 1rem;
-  button {
-    border-radius: 0.5rem;
-    .mat-mdc-button-persistent-ripple {
-      border-style: none !important;
+@mixin keyboard-shortcuts-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $text-color: map-get($foreground, text);
+  $accent: map-get($theme, accent);
+  $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;
 }
--- a/console/src/app/modules/providers/provider-apple/provider-apple.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-github/provider-github.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-google/provider-google.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-ldap/provider-ldap.component.html
+++ b/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"
--- a/console/src/app/modules/providers/provider-next/provider-next.component.scss
+++ b/console/src/app/modules/providers/provider-next/provider-next.component.scss
@@ -33,7 +33,7 @@
    }

    .title {
-      margin: 0;
+      margin: 1.2rem 0;
    }

    .next-icon {
--- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html
+++ b/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)"
--- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts
+++ b/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,
--- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html
+++ b/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"