TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-15 18:02:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): add resource id to meta layout, error highlighting formfield label, missing tooltips, cleanup app detail (#1025)

Browse Source 
* add resource id to meta layout, tooltips

* input label disable prop, app detail info

* lint
This commit is contained in:
Max Peintner
2020-11-27 16:45:52 +01:00
committed by GitHub
parent 989bc0037b
commit be17fd7c96
36 changed files with 319 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
<app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
</div>
<div class="side" metainfo>
<div metainfo>
<app-contributors [totalResult]="totalMemberResult" [loading]="loading$ | async"
[membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"

8
console/src/app/pages/iam/iam.component.scss
View File

@@ -6,11 +6,3 @@
color: var(--grey);
margin-bottom: 2rem;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
}
}

12
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@@ -34,12 +34,16 @@
</div>
<div class="side" metainfo>
<div class="details">
<div class="row">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="org?.id" class="second">{{ org.id }}</span>
</div>
<div class="meta-row">
<span class="first">{{'ORG.PAGES.PRIMARYDOMAIN' | translate}}</span>
<span class="second"><span style="display: block;">{{primaryDomain}}</span></span>
</div>
<div class="row">
<div class="meta-row">
<span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
<span *ngIf="org && org.state !== undefined"
class="second">{{'ORG.STATE.'+org.state | translate}}</span>
@@ -54,7 +58,7 @@
(showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()" [disabled]="false">
</app-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="flex-col">
<mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="meta-flex-col">
<app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
</mat-tab>
</mat-tab-group>

28
console/src/app/pages/orgs/org-detail/org-detail.component.scss
View File

@@ -63,31 +63,3 @@
font-size: 14px;
color: #818a8a;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: .8rem;
margin-right: .5rem;
}
.second {
font-size: .8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
}
}
}

60
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
View File

@@ -14,7 +14,7 @@
<app-card title="{{ 'APP.PAGES.DETAIL.TITLE' | translate }}" *ngIf="app">
<form [formGroup]="appNameForm" (ngSubmit)="saveApp()">
<div class="content">
<div class="name-content">
<mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
<mat-button-toggle [value]="AppState.APPSTATE_INACTIVE"
matTooltip="{{ 'ACTIONS.DEACTIVATE' | translate}}">
@@ -26,18 +26,18 @@
</mat-button-toggle>
</mat-button-toggle-group>
<cnsl-form-field class="formfield">
<cnsl-form-field class="name-field">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}
</p>
<p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
<cnsl-info-section class="docs-line" *ngIf="docs?.discoveryEndpoint">
<p><strong>Discovery Endpoint:</strong> {{docs.discoveryEndpoint}}</p>
<p><strong>Issuer:</strong> {{docs.issuer}}</p>
</cnsl-info-section>
</div>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary"
[disabled]="appNameForm.invalid || name?.disabled"
<button type="submit" color="primary" [disabled]="appNameForm.invalid || name?.disabled"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</form>
@@ -50,9 +50,12 @@
</div>
<div class="compliance">
<p class="problem" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
{{problem.localizedMessage}}
</p>
<cnsl-info-section class="problem">
<ul style="margin: 0;">
<li style="margin: 0 0 .5rem 0;" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
{{problem.localizedMessage}}</li>
</ul>
</cnsl-info-section>
</div>
<form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
<div class="content">
@@ -113,10 +116,16 @@
<mat-checkbox *ngIf="accessTokenType?.value === OIDCTokenType.OIDCTOKENTYPE_JWT" class="full-width"
formControlName="accessTokenRoleAssertion" color="primary">
{{'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate}}</mat-checkbox>
<p class="full-width desc">{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</p>
<mat-checkbox class="full-width" formControlName="idTokenRoleAssertion" color="primary">
<cnsl-info-section class="full-width desc">
<span>{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
</cnsl-info-section>
<mat-checkbox class="full-width" style="margin-bottom: .5rem" formControlName="idTokenRoleAssertion"
color="primary">
{{'APP.OIDC.IDTOKENROLEASSERTION' | translate}}</mat-checkbox>
<p class="full-width desc">{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</p>
<cnsl-info-section class="full-width desc">
<span>{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
</cnsl-info-section>
<div class="divider"></div>
@@ -126,10 +135,15 @@
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
<p class="step-description" style="margin-bottom: 2rem;">{{'APP.OIDC.DEVMODEDESC' | translate}}</p>
<p class="step-description"
<cnsl-info-section class="step-description">
<span style="margin-bottom: 2rem;">{{'APP.OIDC.DEVMODEDESC' | translate}}</span>
</cnsl-info-section>
<cnsl-info-section class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
</cnsl-info-section>
<p class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
@@ -141,7 +155,8 @@
<input #redInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
[formControl]="redirectControl">
</cnsl-form-field>
<button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
<button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button
[disabled]="redirectControl.invalid || !canWrite">
<mat-icon>add</mat-icon>
</button>
</form>
@@ -164,7 +179,8 @@
<input #postInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
[formControl]="postRedirectControl">
</cnsl-form-field>
<button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
<button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button
[disabled]="postRedirectControl.invalid || !canWrite">
<mat-icon>add</mat-icon>
</button>
</form>
@@ -193,8 +209,12 @@
</div>
<div class="side" metainfo>
<div class="details">
<div class="row">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="app?.id" class="second">{{ app.id }}</span>
</div>
<div class="meta-row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
<span *ngIf="app && app.state !== undefined"
[ngClass]="{'active': app.state === AppState.APPSTATE_ACTIVE, 'inactive': app.state === AppState.APPSTATE_INACTIVE}"

123
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
View File

@@ -37,6 +37,46 @@
font-size: 14px;
}
.name-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.toggle {
outline: none;
align-self: flex-start;
margin-top: 1rem;
margin-right: 1rem;
border-radius: .5rem;
* {
outline: none;
}
i {
margin-right: 1rem;
}
}
.name-field {
flex: 1;
}
}
.docs-line {
flex-basis: 100%;
margin: .5rem 0;
p {
margin: 0;
margin-bottom: .5rem;
}
p:last-child {
margin: 0;
}
}
.content {
display: flex;
flex-direction: row;
@@ -91,6 +131,7 @@
.desc {
color: var(--grey);
font-size: 14px;
margin-bottom: 1rem;
}
.devmode {
@@ -110,39 +151,12 @@
color: #f44336;
margin: 0 .5rem 1.5rem .5rem;
}
.docs-line {
flex-basis: 100%;
font-size: 14px;
color: var(--grey);
margin-top: 0;
}
.toggle {
outline: none;
align-self: flex-start;
margin-top: 1rem;
margin-right: 1rem;
border-radius: .5rem;
* {
outline: none;
}
i {
margin-right: 1rem;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
margin: 0 -.5rem;
.submit-button {
margin: 0 .5rem;
}
margin-top: 1rem;
}
.chip {
@@ -158,56 +172,5 @@
flex-basis: 100%;
margin: 1.5rem .5rem;
height: 1px;
background-color: var(--grey);
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
}
.fill-space {
flex: 1;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
font-size: 13px;
background-color: #8795a120;
&.active {
background-color: #85d996;
color: black;
}
&.inactive {
background-color: #ff8981;
color: black;
}
}
}
}
.mat-tab-label {
min-width: 100px !important;
}
.flex-col {
display: flex;
flex-direction: column;
}
background-color: rgba(#8795a1, .2);
}

2
console/src/app/pages/projects/apps/apps.module.ts
View File

@@ -20,6 +20,7 @@ import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
@@ -61,6 +62,7 @@ import { AppsRoutingModule } from './apps-routing.module';
InputModule,
MetaLayoutModule,
ChangesModule,
InfoSectionModule,
],
exports: [TranslateModule],
})

10
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
View File

@@ -26,8 +26,12 @@
</ng-template>
</div>
<div class="side" metainfo>
<div class="details">
<div class="row">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="projectId" class="second">{{ projectId }}</span>
</div>
<div class="meta-row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
<span *ngIf="project && project.state !== undefined" class="state"
[ngClass]="{'active': project.state === ProjectState.PROJECTSTATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECTSTATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
@@ -43,7 +47,7 @@
[disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
</app-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
</mat-tab>
</mat-tab-group>

51
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
View File

@@ -39,54 +39,3 @@
font-size: .9rem;
color: var(--grey);
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
}
.fill-space {
flex: 1;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
font-size: 11px;
background-color: #8795a120;
&.active {
background-color: #85d996;
color: black;
}
&.inactive {
background-color: #ff8981;
color: black;
}
}
}
}
.mat-tab-label {
min-width: 100px !important;
}
.flex-col {
display: flex;
flex-direction: column;
}
}

10
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
View File

@@ -110,8 +110,12 @@
</ng-container>
</div>
<div class="side" metainfo>
<div class="details">
<div class="row">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="projectId" class="second">{{ projectId }}</span>
</div>
<div class="meta-row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
<span *ngIf="project && project.state !== undefined" class="state"
[ngClass]="{'active': project.state === ProjectState.PROJECTSTATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECTSTATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
@@ -127,7 +131,7 @@
[disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
</app-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
</mat-tab>
</mat-tab-group>

47
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
View File

@@ -54,53 +54,6 @@
align-items: center;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
font-size: 11px;
background-color: #8795a120;
&.active {
background-color: #85d996;
color: black;
}
&.inactive {
background-color: #ff8981;
color: black;
}
}
}
}
.mat-tab-label {
min-width: 100px !important;
}
.flex-col {
display: flex;
flex-direction: column;
}
}
.desc {
color: var(--grey);
font-size: 14px;

5
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
View File

@@ -66,8 +66,9 @@
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let project">
<button *ngIf="project.projectId !== zitadelProjectId" color="warn" mat-icon-button
matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.projectId)">
<button class="dlt-button" *ngIf="project.projectId !== zitadelProjectId" color="warn"
mat-icon-button matTooltip="{{'ACTIONS.DELETE' | translate}}"
(click)="deleteProject(project.projectId)">
<i class="las la-trash"></i>
</button>
</td>

10
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
View File

@@ -45,4 +45,14 @@ h1 {
tr {
outline: none;
.dlt-button {
visibility: hidden;
}
&:hover {
.dlt-button {
visibility: visible;
}
}
}

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

@@ -40,7 +40,7 @@
<app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<button card-actions mat-icon-button (click)="refreshUser()">
<button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
</button>
<app-contact *ngIf="user?.human" [human]="user.human" [state]="user.state" canWrite="true"
@@ -64,8 +64,12 @@
</div>
<div *ngIf="user" class="side" metainfo>
<div class="details">
<div class="row" *ngIf="user?.preferredLoginName">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>

34
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
View File

@@ -65,40 +65,6 @@
}
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: .8rem;
margin-right: .5rem;
white-space: nowrap;
}
.second {
font-size: .8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
}
.changes {
flex: 1;
min-height: 0;
}
}
}
.resendemail {
margin-right: 1rem;
}

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

@@ -40,7 +40,7 @@
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let idp">
<button mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
<button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
(click)="removeExternalIdp(idp)">
<i class="las la-trash"></i>
</button>

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

@@ -30,7 +30,7 @@
</div>
</ng-template>
<button [disabled]="disabled" class="add-img" (click)="addMember()" mat-icon-button
aria-label="add membership">
matTooltip="{{'ACTIONS.ADD' | translate}}" aria-label="add membership">
<mat-icon>add</mat-icon>
</button>
<span class="fill-space"></span>

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

@@ -67,7 +67,7 @@
<app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<button card-actions mat-icon-button (click)="refreshUser()">
<button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
</button>
<app-contact disablePhoneCode="true"
@@ -97,12 +97,16 @@
</div>
<div *ngIf="user" class="side" metainfo>
<div class="details">
<div class="row" *ngIf="user?.preferredLoginName">
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
<div class="row">
<div class="meta-row">
<span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
<span *ngIf="user && user.state !== undefined" class="state"
[ngClass]="{'active': user.state === UserState.USERSTATE_ACTIVE, 'inactive': user.state === UserState.USERSTATE_INACTIVE}">{{'USER.DATA.STATE'+user.state | translate}}</span>

45
console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
View File

@@ -29,51 +29,6 @@
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
white-space: nowrap;
}
.second {
font-size: .13px;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
.state {
border-radius: 50vw;
padding: 2px .5rem;
letter-spacing: .05em;
font-size: 11px;
background-color: #8795a120;
&.active {
background-color: #85d996;
color: black;
}
&.inactive {
background-color: #ff8981;
color: black;
}
}
}
}
.changes {
flex: 1;
min-height: 0;