andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-18 05:52:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): improve client details dialog ux #11834 (#11836)

Browse Source 
# Which Problems Are Solved

The console provided conflicting warnings when creating a pkce based
project.


# How the Problems Are Solved
<img width="1026" height="432" alt="grafik"
src="https://github.com/user-attachments/assets/d6609d2d-1438-42bd-9bc4-2e896c3e47d9"
/>

Removed the `keep your client secret at a safe place...` warning when a
auth-method without a client secret is used.
Changed the dialog title to `Client Details` instead of `Client Secret`

# Additional Changes
- Improves type safety for data passed to the
`AppSecretDialogComponent`.
- Updates the `AppSecretDialogComponent` to use modern Angular features,
improving readability and maintainability.

# Additional Context
- Closes #11834

---------

Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Ramon
2026-04-29 08:46:49 +02:00
committed by GitHub
co-authored by Max Peintner
parent 83919d82b4
commit 2c8d63bb71
27 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+2 -2
View File
@@ -28,7 +28,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { AppSecretDialogComponent, AppSecretDialogData } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
@@ -461,7 +461,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
if (added.clientId) {
clientId = added.clientId;
}
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
const dialogRef = this.dialog.open<AppSecretDialogComponent, AppSecretDialogData>(AppSecretDialogComponent, {
data: {
clientSecret: clientSecret,
clientId: clientId,
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+3 -3
View File
@@ -53,7 +53,7 @@ import { ToastService } from 'src/app/services/toast.service';
import { ApplicationService } from 'src/app/services/application.service';
import { EnvironmentService } from 'src/app/services/environment.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { AppSecretDialogComponent, AppSecretDialogData } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
@@ -840,7 +840,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
.regenerateOIDCClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
this.dialog.open<AppSecretDialogComponent, AppSecretDialogData>(AppSecretDialogComponent, {
data: {
// clientId: data.toObject() as ClientSecret.AsObject.clientId,
clientSecret: resp.clientSecret,
@@ -878,7 +878,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
.regenerateAPIClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
this.dialog.open<AppSecretDialogComponent, AppSecretDialogData>(AppSecretDialogComponent, {
data: {
clientSecret: resp.clientSecret,
},
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
+7 -7
View File
@@ -1,8 +1,10 @@
<h1 mat-dialog-title>
<span class="title">{{ 'APP.OIDC.CLIENTSECRET' | translate }}</span>
<span class="title">{{ 'APP.OIDC.CLIENTDETAILS' | translate }}</span>
</h1>
<div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>
@if (data.clientSecret) {
<p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>
}
@if (data.clientId) {
<div class="flex">
@@ -19,8 +21,7 @@
>
@if (copied !== data.clientId) {
<i class="las la-clipboard"></i>
}
@if (copied === data.clientId) {
} @else {
<i class="las la-clipboard-check"></i>
}
</button>
@@ -41,8 +42,7 @@
>
@if (copied !== data.clientSecret) {
<i class="las la-clipboard"></i>
}
@if (copied === data.clientSecret) {
} @else {
<i class="las la-clipboard-check"></i>
}
</button>
@@ -57,7 +57,7 @@
color="primary"
mat-raised-button
class="ok-button"
(click)="closeDialog()"
(click)="dialogRef.close()"
data-e2e="close-dialog"
>
{{ 'ACTIONS.CLOSE' | translate }}
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.ts
+9 -9
View File
@@ -1,6 +1,11 @@
import { Component, Inject } from '@angular/core';
import { Component, inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export type AppSecretDialogData = {
clientId?: string;
clientSecret?: string;
};
@Component({
selector: 'cnsl-app-secret-dialog',
templateUrl: './app-secret-dialog.component.html',
@@ -8,13 +13,8 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
standalone: false,
})
export class AppSecretDialogComponent {
public copied: string = '';
constructor(
public dialogRef: MatDialogRef<AppSecretDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {}
protected readonly dialogRef = inject<MatDialogRef<AppSecretDialogComponent>>(MatDialogRef);
protected readonly data = inject<AppSecretDialogData>(MAT_DIALOG_DATA);
public closeDialog(): void {
this.dialogRef.close(false);
}
public copied: string = '';
}
console/src/app/pages/projects/apps/integrate/integrate.component.ts
+2 -2
View File
@@ -10,7 +10,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { AppSecretDialogComponent, AppSecretDialogData } from '../app-secret-dialog/app-secret-dialog.component';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { Framework } from 'src/app/components/quickstart/quickstart.component';
import { OIDC_CONFIGURATIONS } from 'src/app/utils/framework';
@@ -169,7 +169,7 @@ export class IntegrateAppComponent implements OnInit, OnDestroy {
if (added.clientId) {
clientId = added.clientId;
}
const dialogRef = this.dialog.open(AppSecretDialogComponent, {
const dialogRef = this.dialog.open<AppSecretDialogComponent, AppSecretDialogData>(AppSecretDialogComponent, {
data: {
clientSecret: clientSecret,
clientId: clientId,
console/src/assets/i18n/ar.json
+1 -1
View File
@@ -2598,7 +2598,7 @@
"TYPEREQUIRED": "النوع مطلوب.",
"TITLE": "تكوين OIDC",
"CLIENTID": "معرف العميل",
"CLIENTSECRET": "سر العميل",
"CLIENTDETAILS": "تفاصيل العميل",
"CLIENTSECRET_NOSECRET": "مع تدفق المصادقة المختار، لا يتطلب الأمر سراً وبالتالي فهو غير متاح.",
"CLIENTSECRET_DESCRIPTION": "احتفظ بسر العميل الخاص بك في مكان آمن حيث سيختفي بمجرد إغلاق الحوار.",
"REGENERATESECRET": "إعادة توليد سر العميل",
console/src/assets/i18n/bg.json
+1 -1
View File
@@ -2605,7 +2605,7 @@
"TYPEREQUIRED": "Типът е задължителен.",
"TITLE": "Конфигурация на OIDC",
"CLIENTID": "ID на клиента",
"CLIENTSECRET": "Тайна на клиента",
"CLIENTDETAILS": "Детайли за клиента",
"CLIENTSECRET_NOSECRET": "С избрания от вас поток за удостоверяване не се изисква тайна и следователно не е налична.",
"CLIENTSECRET_DESCRIPTION": "Пазете клиентската си тайна на сигурно място, тъй като тя ще изчезне, след като диалоговият прозорец бъде затворен.",
"REGENERATESECRET": "Повторно генериране на клиентска тайна",
console/src/assets/i18n/cs.json
+1 -1
View File
@@ -2587,7 +2587,7 @@
"TYPEREQUIRED": "Typ je vyžadován.",
"TITLE": "OIDC Konfigurace",
"CLIENTID": "ID klienta",
"CLIENTSECRET": "Tajemství klienta",
"CLIENTDETAILS": "Podrobnosti klienta",
"CLIENTSECRET_NOSECRET": "S vaším vybraným způsobem autentizace není požadováno žádné tajemství a proto není dostupné.",
"CLIENTSECRET_DESCRIPTION": "Uchovávejte toto tajemství klienta na bezpečném místě, jakmile je dialog zavřen, nelze jej již znovu zobrazit.",
"REGENERATESECRET": "Regenerovat tajemství klienta",
console/src/assets/i18n/de.json
+1 -1
View File
@@ -2578,7 +2578,7 @@
"TYPEREQUIRED": "Der Typ ist notwendig.",
"TITLE": "OIDC-Einstellungen",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"CLIENTDETAILS": "Client-Details",
"CLIENTSECRET_NOSECRET": "Bei ihrem gewählten Authentication Flow wird kein Secret benötigt und steht daher nicht zur Verfügung.",
"CLIENTSECRET_DESCRIPTION": "Verwahre das Client Secret an einem sicheren Ort, da es nicht mehr angezeigt werden kann, sobald der Dialog geschlossen wird.",
"REGENERATESECRET": "Client Secret neu generieren",
console/src/assets/i18n/en.json
+1 -1
View File
@@ -2609,7 +2609,7 @@
"TYPEREQUIRED": "The type is required.",
"TITLE": "OIDC Settings",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"CLIENTDETAILS": "Client Details",
"CLIENTSECRET_NOSECRET": "With your chosen authentication flow, no secret is required and is therefore not available.",
"CLIENTSECRET_DESCRIPTION": "Keep your client secret at a safe place as it will disappear once the dialog is closed.",
"REGENERATESECRET": "Regenerate Client Secret",
console/src/assets/i18n/es.json
+1 -1
View File
@@ -2575,7 +2575,7 @@
"TYPEREQUIRED": "Se requiere el tipo.",
"TITLE": "Ajustes OIDC",
"CLIENTID": "ID de cliente",
"CLIENTSECRET": "Secreto de cliente",
"CLIENTDETAILS": "Detalles del cliente",
"CLIENTSECRET_NOSECRET": "Con tu flujo de autenticación elegido, no se requiere ningún secreto y por tanto no está disponible.",
"CLIENTSECRET_DESCRIPTION": "Mantén tu secreto de cliente en un lugar seguro puesto que desaparecerá una vez que se cierre el diálogo.",
"REGENERATESECRET": "Regenerar secreto de cliente",
console/src/assets/i18n/fr.json
+1 -1
View File
@@ -2579,7 +2579,7 @@
"TYPEREQUIRED": "Le type est obligatoire.",
"TITLE": "Paramètres OIDC",
"CLIENTID": "ID client",
"CLIENTSECRET": "Secret du client",
"CLIENTDETAILS": "Détails du client",
"CLIENTSECRET_NOSECRET": "Avec le flux d'authentification que vous avez choisi, aucun secret n'est requis et n'est donc pas disponible.",
"CLIENTSECRET_DESCRIPTION": "Conservez votre secret client dans un endroit sûr car il disparaîtra une fois la boîte de dialogue fermée.",
"REGENERATESECRET": "Régénérer le secret du client",
console/src/assets/i18n/hu.json
+1 -1
View File
@@ -2602,7 +2602,7 @@
"TYPEREQUIRED": "A típus megadása kötelező.",
"TITLE": "OIDC konfiguráció",
"CLIENTID": "Ügyfél azonosító",
"CLIENTSECRET": "Ügyfél titok",
"CLIENTDETAILS": "Ügyfél részletei",
"CLIENTSECRET_NOSECRET": "A választott hitelesítési folyamatnál nem szükséges titok, ezért nem érhető el.",
"CLIENTSECRET_DESCRIPTION": "Tartsd biztonságos helyen az ügyfél titkot, mert eltűnik, miután a párbeszédablak bezárul.",
"REGENERATESECRET": "Ügyfél titok újragenerálása",
console/src/assets/i18n/id.json
+1 -1
View File
@@ -2602,7 +2602,7 @@
"TYPEREQUIRED": "Jenisnya wajib diisi.",
"TITLE": "Konfigurasi OIDC",
"CLIENTID": "ID Klien",
"CLIENTSECRET": "Rahasia Klien",
"CLIENTDETAILS": "Detail klien",
"CLIENTSECRET_NOSECRET": "Dengan alur autentikasi yang Anda pilih, tidak ada rahasia yang diperlukan dan oleh karena itu tidak tersedia.",
"CLIENTSECRET_DESCRIPTION": "Jaga rahasia klien Anda di tempat yang aman karena akan hilang setelah dialog ditutup.",
"REGENERATESECRET": "Regenerasi Rahasia Klien",
console/src/assets/i18n/it.json
+1 -1
View File
@@ -2579,7 +2579,7 @@
"TYPEREQUIRED": "Il tipo è necessario per completare.",
"TITLE": "Configurazione OIDC",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"CLIENTDETAILS": "Dettagli del client",
"CLIENTSECRET_NOSECRET": "Con il flusso di autenticazione scelto, non è richiesto alcun Client Secret e quindi non è disponibile.",
"CLIENTSECRET_DESCRIPTION": "Salvate il Client Secret in un luogo sicuro, perché non sarà più disponibile dopo aver chiuso la finestra di dialogo",
"REGENERATESECRET": "Rigenera il Client Secret",
console/src/assets/i18n/ja.json
+1 -1
View File
@@ -2604,7 +2604,7 @@
"TYPEREQUIRED": "タイプが必要です。",
"TITLE": "OIDC構成",
"CLIENTID": "クライアントID",
"CLIENTSECRET": "クライアントシークレット",
"CLIENTDETAILS": "クライアント詳細",
"CLIENTSECRET_NOSECRET": "選択した認証フローでは、シークレットは必要ないため、利用できません。",
"CLIENTSECRET_DESCRIPTION": "クライアントシークレットは、ダイアログを閉じた後は表示されません。安全な場所に保管してください。",
"REGENERATESECRET": "クライアントシークレットを再生成する",
console/src/assets/i18n/ko.json
+1 -1
View File
@@ -2604,7 +2604,7 @@
"TYPEREQUIRED": "유형은 필수 항목입니다.",
"TITLE": "OIDC 구성",
"CLIENTID": "클라이언트 ID",
"CLIENTSECRET": "클라이언트 시크릿",
"CLIENTDETAILS": "클라이언트 세부정보",
"CLIENTSECRET_NOSECRET": "선택한 인증 플로우에서는 시크릿이 필요하지 않으므로 사용할 수 없습니다.",
"CLIENTSECRET_DESCRIPTION": "클라이언트 시크릿을 안전한 곳에 보관하세요. 대화 상자가 닫히면 시크릿이 사라집니다.",
"REGENERATESECRET": "클라이언트 시크릿 재생성",
console/src/assets/i18n/mk.json
+1 -1
View File
@@ -2575,7 +2575,7 @@
"TYPEREQUIRED": "Типот е задолжителен.",
"TITLE": "OIDC Конфигурација",
"CLIENTID": "Client Id",
"CLIENTSECRET": "Клиентска тајна",
"CLIENTDETAILS": "Детали за клиентот",
"CLIENTSECRET_NOSECRET": "Со избраната метода за автентикација, не е потребна тајна и поради тоа не е достапна.",
"CLIENTSECRET_DESCRIPTION": "Чувајте ја вашата клиентска тајна на безбедно место, бидејќи ќе исчезне откако ќе се затвори дијалогот.",
"REGENERATESECRET": "Генерирај нова клиентска тајна",
console/src/assets/i18n/nl.json
+1 -1
View File
@@ -2597,7 +2597,7 @@
"TYPEREQUIRED": "Het type is vereist.",
"TITLE": "OIDC Configuratie",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Geheim",
"CLIENTDETAILS": "Clientdetails",
"CLIENTSECRET_NOSECRET": "Met uw gekozen authenticatiestroom is geen geheim vereist en is daarom niet beschikbaar.",
"CLIENTSECRET_DESCRIPTION": "Bewaar uw client geheim op een veilige plaats aangezien het zal verdwijnen zodra het dialoogvenster wordt gesloten.",
"REGENERATESECRET": "Regenereer Client Geheim",
console/src/assets/i18n/pl.json
+1 -1
View File
@@ -2578,7 +2578,7 @@
"TYPEREQUIRED": "Wymagany jest typ.",
"TITLE": "Konfiguracja OIDC",
"CLIENTID": "Identyfikator klienta",
"CLIENTSECRET": "Sekret klienta",
"CLIENTDETAILS": "Szczegóły klienta",
"CLIENTSECRET_NOSECRET": "Wybrany przez Ciebie przepływ uwierzytelniania nie wymaga sekretu i dlatego nie jest dostępny.",
"CLIENTSECRET_DESCRIPTION": "Trzymaj swój sekret klienta w bezpiecznym miejscu, ponieważ zniknie on po zamknięciu okna dialogowego.",
"REGENERATESECRET": "Odtwórz sekret klienta",
console/src/assets/i18n/pt.json
+1 -1
View File
@@ -2574,7 +2574,7 @@
"TYPEREQUIRED": "O tipo é obrigatório.",
"TITLE": "Configuração OIDC",
"CLIENTID": "ID do Cliente",
"CLIENTSECRET": "Segredo do Cliente",
"CLIENTDETAILS": "Detalhes do cliente",
"CLIENTSECRET_NOSECRET": "Com o fluxo de autenticação escolhido, nenhum segredo é necessário e, portanto, não está disponível.",
"CLIENTSECRET_DESCRIPTION": "Mantenha o segredo do cliente em um local seguro, pois ele desaparecerá assim que o diálogo for fechado.",
"REGENERATESECRET": "Regenerar Segredo do Cliente",
console/src/assets/i18n/ro.json
+1 -1
View File
@@ -2600,7 +2600,7 @@
"TYPEREQUIRED": "Tipul este necesar.",
"TITLE": "Configurație OIDC",
"CLIENTID": "ID client",
"CLIENTSECRET": "Secret client",
"CLIENTDETAILS": "Detalii client",
"CLIENTSECRET_NOSECRET": "Cu fluxul de autentificare ales, nu este necesar niciun secret și, prin urmare, nu este disponibil.",
"CLIENTSECRET_DESCRIPTION": "Păstrați secretul clientului într-un loc sigur, deoarece va dispărea odată ce dialogul este închis.",
"REGENERATESECRET": "Regenerați secretul clientului",
console/src/assets/i18n/ru.json
+1 -1
View File
@@ -2693,7 +2693,7 @@
"TYPEREQUIRED": "Тип обязателен.",
"TITLE": "Конфигурация OIDC",
"CLIENTID": "ID Клиента",
"CLIENTSECRET": "Клиентский ключ",
"CLIENTDETAILS": "Сведения о клиенте",
"CLIENTSECRET_NOSECRET": "При выбранном вами потоке аутентификации ключ не требуется и поэтому недоступен.",
"CLIENTSECRET_DESCRIPTION": "Сохраните ваш ключ в надёжном месте, так как он исчезнет после закрытия диалогового окна.",
"REGENERATESECRET": "Восстановить клиентский ключ",
console/src/assets/i18n/sv.json
+1 -1
View File
@@ -2607,7 +2607,7 @@
"TYPEREQUIRED": "Typen är obligatorisk.",
"TITLE": "OIDC-konfiguration",
"CLIENTID": "Klient-ID",
"CLIENTSECRET": "Klienthemlighet",
"CLIENTDETAILS": "Klientdetaljer",
"CLIENTSECRET_NOSECRET": "Med ditt valda autentiseringsflöde krävs ingen hemlighet och är därför inte tillgänglig.",
"CLIENTSECRET_DESCRIPTION": "Förvara din klienthemlighet på en säker plats eftersom den kommer att försvinna när dialogen stängs.",
"REGENERATESECRET": "Återskapa klienthemlighet",
console/src/assets/i18n/tr.json
+1 -1
View File
@@ -2607,7 +2607,7 @@
"TYPEREQUIRED": "Tür gereklidir.",
"TITLE": "OIDC Yapılandırması",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"CLIENTDETAILS": "İstemci ayrıntıları",
"CLIENTSECRET_NOSECRET": "Seçtiğiniz kimlik doğrulama akışıyla gizli anahtar gerekmez ve bu nedenle mevcut değildir.",
"CLIENTSECRET_DESCRIPTION": "Dialog kapandığında kaybolacağı için client secret'ınızı güvenli bir yerde saklayın.",
"REGENERATESECRET": "Client Secret'ı Yeniden Oluştur",
console/src/assets/i18n/uk.json
+1 -1
View File
@@ -2610,7 +2610,7 @@
"TYPEREQUIRED": "Тип є обов'язковим.",
"TITLE": "Конфігурація OIDC",
"CLIENTID": "ID клієнта",
"CLIENTSECRET": "Секрет клієнта",
"CLIENTDETAILS": "Дані клієнта",
"CLIENTSECRET_NOSECRET": "З вашим обраним потоком автентифікації секрет не потрібен і тому недоступний.",
"CLIENTSECRET_DESCRIPTION": "Зберігайте секрет клієнта в безпечному місці, оскільки він зникне після закриття діалогу.",
"REGENERATESECRET": "Регенерувати секрет клієнта",
console/src/assets/i18n/zh.json
+1 -1
View File
@@ -2611,7 +2611,7 @@
"TYPEREQUIRED": "类型是必填的。",
"TITLE": "OIDC 配置",
"CLIENTID": "客户端 ID",
"CLIENTSECRET": "客户端秘钥",
"CLIENTDETAILS": "客户端详情",
"CLIENTSECRET_NOSECRET": "使用您选择的身份验证流程，不需要任何秘密，因此不可用。",
"CLIENTSECRET_DESCRIPTION": "将您的客户保密在一个安全的地方，因为一旦对话框关闭，便无法再次查看。",
"REGENERATESECRET": "重新生成客户端密钥",