TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 11:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): ui issues (#1670)

Browse Source 
* mark required fields

* membership overflow, deactivate btn

* app create show info

* remove padding

* lint scss

* fix count of results

* rm log
This commit is contained in:
Max Peintner 2021-04-27 08:15:53 +02:00 committed by GitHub
parent c4607409a5
commit 10e85d999e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1196 additions and 1154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/app/modules/project-members/project-members-datasource.ts
View File

@ -49,6 +49,8 @@ export class ProjectMembersDataSource extends DataSource<Member.AsObject> {
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;

2
console/src/app/modules/user-grants/user-grants-datasource.ts
View File

@ -119,6 +119,8 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;

2
console/src/app/pages/iam/iam.component.ts
View File

@ -41,6 +41,8 @@ export class IamComponent {
map(resp => {
if (resp.details?.totalResult) {
this.totalMemberResult = resp.details.totalResult;
} else {
this.totalMemberResult = 0;
}
return resp.resultList;
}),

3
console/src/app/pages/orgs/org-detail/org-detail.component.ts
View File

@ -204,7 +204,10 @@ export class OrgDetailComponent implements OnInit {
map(resp => {
if (resp.details?.totalResult) {
this.totalMemberResult = resp.details?.totalResult;
} else {
this.totalMemberResult = 0;
}
return resp.resultList;
}),
catchError(() => of([])),

17
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
View File

@ -3,16 +3,27 @@
</h1>
<p class="desc">{{'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<p *ngIf="data.clientId">ClientId: {{data.clientId}}</p>
<div class="flex" *ngIf="data.clientId">
<span class="overflow-auto"><span class="desc">ClientId:</span> {{data.clientId}}</span>
<button color="primary" [disabled]="copied == data.clientId" matTooltip="copy to clipboard" appCopyToClipboard
[valueToCopy]="data.clientId" (copiedValue)="this.copied = $event" mat-icon-button>
<i *ngIf="copied != data.clientId" class="las la-clipboard"></i>
<i *ngIf="copied == data.clientId" class="las la-clipboard-check"></i>
</button>
</div>
<div *ngIf="data.clientSecret" class="flex">
<div *ngIf="data.clientSecret; else showNoSecretInfo" class="flex">
<span class="overflow-auto"><span class="desc">ClientSecret:</span> {{data.clientSecret}}</span>
<button color="primary" [disabled]="copied == data.clientSecret" matTooltip="copy to clipboard"
appCopyToClipboard [valueToCopy]="data.clientSecret" (copiedValue)="this.copied = $event" mat-icon-button>
<i *ngIf="copied != data.clientSecret" class="las la-clipboard"></i>
<i *ngIf="copied == data.clientSecret" class="las la-clipboard-check"></i>
</button>
<span class="secret">{{data.clientSecret}}</span>
</div>
<ng-template #showNoSecretInfo>
<cnsl-info-section>{{'APP.OIDC.CLIENTSECRET_NOSECRET' | translate}}</cnsl-info-section>
</ng-template>
</div>
<div mat-dialog-actions class="action">

9
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
View File

@ -23,11 +23,16 @@
.flex {
display: flex;
align-items: center;
padding: .5rem;
border: 1px solid #ffffff20;
border-radius: .5rem;
justify-content: space-between;
.secret {
.overflow-auto {
overflow: auto;
.desc {
font-size: 14px;
color: var(--grey);
}
}
}

2
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
View File

@ -87,6 +87,8 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
map(resp => {
if (resp.details?.totalResult) {
this.totalMemberResult = resp.details.totalResult;
} else {
this.totalMemberResult = 0;
}
return resp.resultList;
}),

2
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.ts
View File

@ -93,6 +93,8 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
this.grantedProjectList = resp.resultList;
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;

2
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
View File

@ -95,6 +95,8 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
map(resp => {
if (resp.details?.totalResult) {
this.totalMemberResult = resp.details?.totalResult;
} else {
this.totalMemberResult = 0;
}
return resp.resultList;
}),

2
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts
View File

@ -29,6 +29,8 @@ export class ProjectGrantsDataSource extends DataSource<GrantedProject.AsObject>
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;

2
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts
View File

@ -112,6 +112,8 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
this.ownedProjectList = resp.resultList;
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
} else {
this.totalResult = 0;
}
if (this.totalResult > 10) {
this.grid = false;

4
console/src/app/pages/users/user-create-machine/user-create-machine.component.html
View File

@ -5,7 +5,7 @@
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
<div class="content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}</cnsl-label>
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnsl-error *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
@ -15,7 +15,7 @@
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}</cnsl-label>
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnsl-error *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}

16
console/src/app/pages/users/user-create/user-create.component.html
View File

@ -5,7 +5,7 @@
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
<div class="content">
<p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
<input cnslInput matRipple formControlName="email" required />
<span cnsl-error *ngIf="email?.invalid && !email?.errors?.required">
@ -15,7 +15,7 @@
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required
[ngStyle]="{'padding-right': suffixPadding ? suffixPadding : '10px'}" />
@ -30,21 +30,21 @@
</cnsl-form-field>
</div>
<div class="content">
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnsl-error *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnsl-error *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnsl-error *ngIf="nickName?.invalid && nickName?.errors?.required">
@ -54,7 +54,7 @@
<p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
@ -65,7 +65,7 @@
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
@ -79,7 +79,7 @@
<p class="section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="fill">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" />
<span cnsl-error *ngIf="phone?.invalid && phone?.errors?.required">

2
console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts
View File

@ -71,6 +71,8 @@ export class ExternalIdpsComponent implements OnInit {
}
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
} else {
this.totalResult = 0;
}
this.loadingSubject.next(false);
}).catch((error: any) => {

1
console/src/app/pages/users/user-detail/memberships/memberships.component.ts
View File

@ -63,6 +63,7 @@ export class MembershipsComponent implements OnInit {
} else {
this.mgmtService.listUserMemberships(userId, 100, 0, []).then(resp => {
this.memberships = resp.resultList;
this.totalResult = resp.details?.totalResult || 0;
this.loading = false;
});
}

2
console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
View File

@ -19,7 +19,7 @@
(click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
translate}}</button>
<button class="state-button" mat-stroked-button color="warn"
*ngIf="user?.state !== UserState.USER_STATE_ACTIVE"
*ngIf="user?.state == UserState.USER_STATE_INACTIVE"
(click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
</ng-template>
</div>

2
console/src/app/pages/users/user-list/user-table/user-table.component.ts
View File

@ -183,6 +183,8 @@ export class UserTableComponent implements OnInit {
this.userService.listUsers(limit, offset, [query]).then(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;

1
console/src/assets/i18n/de.json
View File

@ -1078,6 +1078,7 @@
"TITLE": "OIDC-Konfiguration",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"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",
"DEVMODE": "Entwicklermodus",

1
console/src/assets/i18n/en.json
View File

@ -1079,6 +1079,7 @@
"TITLE": "OIDC Configuration",
"CLIENTID": "Client ID",
"CLIENTSECRET": "Client Secret",
"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",
"DEVMODE": "Development Mode",