TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-13 03:24:26 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 319 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
console/src/app/app.component.html
View File

@ -134,7 +134,8 @@
</ng-template>
<ng-template appHasRole [appHasRole]="['user.grant.read(:[0-9]*)?']">
<a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
<a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
[routerLinkActive]="['active']" [routerLink]="[ '/grants']"
[routerLinkActiveOptions]="{ exact: true }">
<i class="icon las la-shield-alt"></i>
<span class="label">{{ 'MENU.GRANTS' | translate }}</span>

4
console/src/app/app.component.scss
View File

@ -36,6 +36,10 @@
.doc-link {
margin-right: 1rem;
@media only screen and (max-width: 500px) {
display: none;
}
}
.icon-container {

2
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@ -56,7 +56,7 @@
&:hover {
cursor: pointer;
background-color: #ffffff10;
background-color: #00000010;
}
.small-avatar {

2
console/src/app/modules/contributors/contributors.component.html
View File

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

5
console/src/app/modules/form-field/form-field.component.ts
View File

@ -45,7 +45,10 @@ class CnslFormFieldBase {
'[class.ng-valid]': '_shouldForward("valid")',
'[class.ng-invalid]': '_shouldForward("invalid")',
'[class.ng-pending]': '_shouldForward("pending")',
// '[class.cnsl-form-field-invalid]': '_control.errorState',
'[class.cnsl-form-field-disabled]': '_control.disabled',
'[class.cnsl-form-field-autofilled]': '_control.autofilled',
'[class.cnsl-focused]': '_control.focused',
'[class.cnsl-form-field-invalid]': '_control.errorState',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,

6
console/src/app/modules/info-section/info-section.component.html Normal file
View File

@ -0,0 +1,6 @@
<div class="info-section-row">
<i class="icon las la-info"></i>
<div class="info-section-content">
<ng-content></ng-content>
</div>
</div>

30
console/src/app/modules/info-section/info-section.component.scss Normal file
View File

@ -0,0 +1,30 @@
@import '~@angular/material/theming';
@mixin info-section-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
.info-section-row {
display: flex;
background-color: if($is-dark-theme, #ffffff13, #f3f3f3);
border-radius: 4px;
padding: .5rem 0;
padding-right: 1rem;
color: if($is-dark-theme, #d6d6d6, #3c4257);
font-size: 14px;
.icon {
margin-right: 1rem;
height: 1.2rem;
line-height: 1.2rem;
font-size: 1.2rem;
margin-left: .5rem;
color: $primary-color;
}
.info-section-content {
flex: 1;
}
}
}

25
console/src/app/modules/info-section/info-section.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InfoSectionComponent } from './info-section.component';
describe('InfoSectionComponent', () => {
let component: InfoSectionComponent;
let fixture: ComponentFixture<InfoSectionComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [InfoSectionComponent],
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(InfoSectionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

8
console/src/app/modules/info-section/info-section.component.ts Normal file
View File

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'cnsl-info-section',
templateUrl: './info-section.component.html',
styleUrls: ['./info-section.component.scss'],
})
export class InfoSectionComponent { }

17
console/src/app/modules/info-section/info-section.module.ts Normal file
View File

@ -0,0 +1,17 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { InfoSectionComponent } from './info-section.component';
@NgModule({
declarations: [InfoSectionComponent],
imports: [
CommonModule,
],
exports: [
InfoSectionComponent,
],
})
export class InfoSectionModule { }

15
console/src/app/modules/label/label.component.scss
View File

@ -5,12 +5,27 @@
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
$warn: map-get($theme, warn);
$warn-color: mat-color($warn, 500);
.cnsl-label {
display: block;
font-size: 12px;
color: if($is-dark-theme, var(--grey), var(--grey));
transition: color .2s ease;
margin-bottom: 4px;
font-weight: 400;
}
.cnsl-form-field-disabled {
.cnsl-label {
color: if($is-dark-theme, #ffffff80, #00000061);
}
}
.cnsl-form-field-invalid {
.cnsl-label {
color: $warn-color;
}
}
}

57
console/src/app/modules/meta-layout/meta.scss Normal file
View File

@ -0,0 +1,57 @@
@import '~@angular/material/theming';
@mixin meta-theme($theme) {
.meta-details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.meta-row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 13px;
}
.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;
}
.meta-flex-col {
display: flex;
flex-direction: column;
}
}

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;

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

@ -95,6 +95,7 @@
"SEND":"Senden",
"NEWVALUE":"Neuer Wert"
},
"RESOURCEID":"Ressourcen-ID",
"TABLE": {
"NOROWS":"Keine Daten"
},

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

@ -95,6 +95,7 @@
"SEND":"Send",
"NEWVALUE":"New Value"
},
"RESOURCEID":"Resource Id",
"TABLE": {
"NOROWS":"No data"
},

4
console/src/component-themes.scss
View File

@ -6,6 +6,7 @@
@import './styles/sidenav-list';
@import 'src/app/modules/avatar/avatar.component';
@import 'src/app/modules/changes/changes.component';
@import 'src/app/modules/info-section/info-section.component';
@import 'src/app/modules/detail-layout/detail-layout.component';
@import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
@import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card';
@ -13,6 +14,7 @@
@import 'src/app/app.component.scss';
@import 'src/app/modules/form-field/form-field.component.scss';
@import 'src/app/modules/label/label.component.scss';
@import 'src/app/modules/meta-layout/meta.scss';
@mixin component-themes($theme) {
@include avatar-theme($theme);
@ -30,4 +32,6 @@
@include cnsl-label-theme($theme);
@include cnsl-error-theme($theme);
@include link-theme($theme);
@include meta-theme($theme);
@include info-section-theme($theme);
}

4
console/src/styles/error.scss
View File

@ -11,9 +11,5 @@
font-size: 12px;
color: $warn-color;
margin-bottom: 5px;
// &.block {
// display: block;
// }
}
}

6
console/src/styles/input.scss
View File

@ -54,7 +54,11 @@
&[disabled] {
border-color: if($is-dark-theme,#36373850,#cccdce50);
cursor: not-allowed;
color: if($is-dark-theme, #ffffff80 ,#00000061);
&::placeholder {
color: if($is-dark-theme, #ffffff80 ,#00000061);
}
}
}