andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-13 09:25:12 +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,