mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-14 01:45:12 +00:00
feat: rehauled console (#3525)
* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * lock Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
00f7dbe875
commit
08ae39ae19
@@ -1,26 +1,32 @@
|
||||
<div class="info-row" *ngIf="user">
|
||||
<div class="info">
|
||||
<p class="title">{{ 'USER.PAGES.STATE' | translate }}</p>
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'USER.PAGES.STATE' | translate }}</p>
|
||||
<p *ngIf="user && user.state !== undefined" class="state"
|
||||
[ngClass]="{'active': user.state === UserState.USER_STATE_ACTIVE, 'inactive': user.state === UserState.USER_STATE_INACTIVE}">
|
||||
{{'USER.DATA.STATE'+user.state
|
||||
| translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
|
||||
<p *ngIf="user && user.details && user.details.creationDate" class="desc">{{user.details.creationDate |
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'USER.ID' | translate }}</p>
|
||||
<p *ngIf="user && user.id" class="info-row-desc">{{user.id }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
|
||||
<p *ngIf="user && user.details && user.details.creationDate" class="info-row-desc">{{user.details.creationDate |
|
||||
timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
|
||||
<p *ngIf="user && user.details && user.details.changeDate" class="desc">{{user.details.changeDate | timestampToDate
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
|
||||
<p *ngIf="user && user.details && user.details.changeDate" class="info-row-desc">{{user.details.changeDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info width">
|
||||
<p class="title">{{ 'USER.PAGES.LOGINNAMES' | translate }}</p>
|
||||
<div class="info-wrapper width">
|
||||
<p class="info-row-title">{{ 'USER.PAGES.LOGINNAMES' | translate }}</p>
|
||||
<div class="copy-row" *ngFor="let login of user?.loginNamesList">
|
||||
<button [disabled]="copied === login"
|
||||
[matTooltip]="(copied !== login ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate" cnslCopyToClipboard
|
||||
@@ -31,64 +37,159 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row" *ngIf="app">
|
||||
<div class="info">
|
||||
<p class="title">{{ 'APP.PAGES.STATE' | translate }}</p>
|
||||
<p *ngIf="app && app.state !== undefined" class="state"
|
||||
[ngClass]="{'active': app.state === AppState.APP_STATE_ACTIVE, 'inactive': app.state === AppState.APP_STATE_INACTIVE}">
|
||||
{{'APP.PAGES.DETAIL.STATE.'+app.state
|
||||
<div class="info-row" *ngIf="org">
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'ORG.PAGES.STATE' | translate }}</p>
|
||||
<p *ngIf="org && org.state !== undefined" class="state"
|
||||
[ngClass]="{'active': org.state === OrgState.ORG_STATE_ACTIVE, 'inactive': org.state === OrgState.ORG_STATE_INACTIVE}">
|
||||
{{'ORG.STATE.'+org.state
|
||||
| translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
|
||||
<p *ngIf="app && app.details && app.details.creationDate" class="desc">{{app.details.creationDate | timestampToDate
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
|
||||
<p *ngIf="org && org.id" class="info-row-desc">{{org.id }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper width">
|
||||
<p class="info-row-title">{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</p>
|
||||
<div class="copy-row" *ngIf="org.primaryDomain">
|
||||
<button [disabled]="copied === org.primaryDomain"
|
||||
[matTooltip]="(copied !== org.primaryDomain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="org.primaryDomain" (copiedValue)="copied = $event">
|
||||
{{org.primaryDomain}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
|
||||
<p *ngIf="org && org.details && org.details.creationDate" class="info-row-desc">{{org.details.creationDate |
|
||||
timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
|
||||
<p *ngIf="org && org.details && org.details.changeDate" class="info-row-desc">{{org.details.changeDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
|
||||
<p *ngIf="app && app.details && app.details.changeDate" class="desc">{{app.details.changeDate | timestampToDate |
|
||||
localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
<div class="info-row" *ngIf="project">
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
|
||||
<p *ngIf="project && project.state !== undefined" class="state"
|
||||
[ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}">
|
||||
{{'PROJECT.STATE.'+project.state
|
||||
| translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
|
||||
<div class="copy-row" *ngIf="app?.oidcConfig?.clientId">
|
||||
<button *ngIf="app.oidcConfig && app.oidcConfig?.clientId" [disabled]="copied === app.oidcConfig?.clientId"
|
||||
[matTooltip]="(copied !== app.oidcConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="app.oidcConfig.clientId" (copiedValue)="copied = $event">
|
||||
{{app.oidcConfig?.clientId}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="copy-row" *ngIf="app?.apiConfig?.clientId">
|
||||
<button *ngIf="app && app.apiConfig && app.apiConfig.clientId" [disabled]="copied === app.apiConfig?.clientId"
|
||||
[matTooltip]="(copied !== app.apiConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="app.apiConfig.clientId" (copiedValue)="copied = $event">
|
||||
{{app.apiConfig?.clientId}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
|
||||
<p *ngIf="project && project.id" class="info-row-desc">{{project.id }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'APP.PAGES.URLS' | translate }}</p>
|
||||
<div class="copy-row" *ngFor="let environmentV of (environmentMap | keyvalue)">
|
||||
<div *ngIf="environmentV.value" class="environment">
|
||||
<span class="key">{{environmentV.key}}</span>
|
||||
<button [disabled]="copied === environmentV.value"
|
||||
[matTooltip]="(copied !== environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="environmentV.value" (copiedValue)="copied = environmentV.key">
|
||||
{{environmentV.value}}
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
|
||||
<p *ngIf="project && project.details && project.details.creationDate" class="info-row-desc">
|
||||
{{project.details.creationDate |
|
||||
timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
|
||||
<p *ngIf="project && project.details && project.details.changeDate" class="info-row-desc">
|
||||
{{project.details.changeDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-row" *ngIf="grantedProject">
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
|
||||
<p *ngIf="grantedProject && grantedProject.state !== undefined" class="state"
|
||||
[ngClass]="{'active': grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}">
|
||||
{{'PROJECT.STATE.'+grantedProject.state
|
||||
| translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
|
||||
<p *ngIf="grantedProject && grantedProject.projectId" class="info-row-desc">{{grantedProject.projectId }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
|
||||
<p *ngIf="grantedProject && grantedProject.details && grantedProject.details.creationDate" class="info-row-desc">
|
||||
{{grantedProject.details.creationDate |
|
||||
timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
|
||||
<p *ngIf="grantedProject && grantedProject.details && grantedProject.details.changeDate" class="info-row-desc">
|
||||
{{grantedProject.details.changeDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="app">
|
||||
<div class="info-row">
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'APP.PAGES.STATE' | translate }}</p>
|
||||
<p *ngIf="app && app.state !== undefined" class="state"
|
||||
[ngClass]="{'active': app.state === AppState.APP_STATE_ACTIVE, 'inactive': app.state === AppState.APP_STATE_INACTIVE}">
|
||||
{{'APP.PAGES.DETAIL.STATE.'+app.state
|
||||
| translate}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'APP.PAGES.ID' | translate }}</p>
|
||||
<p *ngIf="app && app.id" class="info-row-desc">{{app.id }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
|
||||
<p *ngIf="app && app.details && app.details.creationDate" class="info-row-desc">{{app.details.creationDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
|
||||
<p *ngIf="app && app.details && app.details.changeDate" class="info-row-desc">{{app.details.changeDate |
|
||||
timestampToDate |
|
||||
localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
|
||||
<div class="copy-row" *ngIf="app?.oidcConfig?.clientId">
|
||||
<button *ngIf="app.oidcConfig && app.oidcConfig?.clientId" [disabled]="copied === app.oidcConfig?.clientId"
|
||||
[matTooltip]="(copied !== app.oidcConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="app.oidcConfig.clientId" (copiedValue)="copied = $event">
|
||||
{{app.oidcConfig?.clientId}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="copy-row" *ngIf="app?.apiConfig?.clientId">
|
||||
<button *ngIf="app && app.apiConfig && app.apiConfig.clientId" [disabled]="copied === app.apiConfig?.clientId"
|
||||
[matTooltip]="(copied !== app.apiConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
|
||||
cnslCopyToClipboard [valueToCopy]="app.apiConfig.clientId" (copiedValue)="copied = $event">
|
||||
{{app.apiConfig?.clientId}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<div class="info-row" *ngIf="idp">
|
||||
<div class="info width">
|
||||
<p class="title">{{ 'IDP.ID' | translate }}</p>
|
||||
<div class="info-wrapper width">
|
||||
<p class="info-row-title">{{ 'IDP.ID' | translate }}</p>
|
||||
<div class="copy-row">
|
||||
<button [disabled]="copied === idp.id"
|
||||
[matTooltip]="(copied !== idp.id ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate" cnslCopyToClipboard
|
||||
@@ -98,20 +199,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
|
||||
<p class="desc" *ngIf="idp && idp.details && idp.details.creationDate">{{idp.details.creationDate | timestampToDate
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
|
||||
<p class="info-row-desc" *ngIf="idp && idp.details && idp.details.creationDate">{{idp.details.creationDate |
|
||||
timestampToDate
|
||||
| localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
|
||||
<p class="desc" *ngIf="idp && idp.details && idp.details.changeDate">{{idp.details.changeDate | timestampToDate |
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
|
||||
<p class="info-row-desc" *ngIf="idp && idp.details && idp.details.changeDate">{{idp.details.changeDate |
|
||||
timestampToDate |
|
||||
localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p class="title">{{ 'IDP.STATE' | translate }}</p>
|
||||
<div class="info-wrapper">
|
||||
<p class="info-row-title">{{ 'IDP.STATE' | translate }}</p>
|
||||
<p *ngIf="idp && idp.state !== undefined" class="state"
|
||||
[ngClass]="{'active': idp.state === IDPState.IDP_STATE_ACTIVE, 'inactive': idp.state === IDPState.IDP_STATE_INACTIVE}">
|
||||
{{'IDP.STATES.'+idp.state
|
||||
|
||||
@@ -4,37 +4,42 @@
|
||||
$foreground: map-get($theme, foreground);
|
||||
$button-text-color: map-get($foreground, text);
|
||||
$button-disabled-text-color: map-get($foreground, disabled-button);
|
||||
$secondary-text: map-get($foreground, secondary-text);
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 -.5rem;
|
||||
margin: 0 -0.5rem;
|
||||
|
||||
@media only screen and (min-width: 500px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.info {
|
||||
.info-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .5rem .5rem;
|
||||
margin: 0 0.5rem 0.5rem 0.5rem;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(.width) {
|
||||
min-width: 100px;
|
||||
.state {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
// &:not(.width) {
|
||||
// min-width: 100px;
|
||||
// }
|
||||
|
||||
.info-row-title {
|
||||
font-size: 12px;
|
||||
color: $secondary-text;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin: .5rem 0;
|
||||
.info-row-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
@@ -46,15 +51,16 @@
|
||||
align-items: stretch;
|
||||
|
||||
button {
|
||||
transition: opacity .15s ease-in-out;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
background-color: #8795a110;
|
||||
border: 1px solid #8795a160;
|
||||
border-radius: 4px;
|
||||
padding: .25rem 1rem;
|
||||
margin: .25rem 0;
|
||||
padding: 0.25rem 1rem;
|
||||
margin: 0.25rem 0;
|
||||
color: $button-text-color;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
cursor: copy;
|
||||
|
||||
&[disabled] {
|
||||
color: $button-disabled-text-color;
|
||||
@@ -65,7 +71,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: .25rem 0;
|
||||
margin: 0.25rem 0;
|
||||
|
||||
.key {
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { App, AppState } from 'src/app/proto/generated/zitadel/app_pb';
|
||||
import { IDP, IDPState } from 'src/app/proto/generated/zitadel/idp_pb';
|
||||
import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
|
||||
import { GrantedProject, Project, ProjectGrantState, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
|
||||
import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
|
||||
|
||||
@Component({
|
||||
@@ -9,30 +10,22 @@ import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
|
||||
templateUrl: './info-row.component.html',
|
||||
styleUrls: ['./info-row.component.scss'],
|
||||
})
|
||||
export class InfoRowComponent implements OnInit {
|
||||
export class InfoRowComponent {
|
||||
@Input() public user!: User.AsObject;
|
||||
@Input() public org!: Org.AsObject;
|
||||
@Input() public app!: App.AsObject;
|
||||
@Input() public idp!: IDP.AsObject;
|
||||
@Input() public project!: Project.AsObject;
|
||||
@Input() public grantedProject!: GrantedProject.AsObject;
|
||||
|
||||
public UserState: any = UserState;
|
||||
public OrgState: any = OrgState;
|
||||
public AppState: any = AppState;
|
||||
public IDPState: any = IDPState;
|
||||
public ProjectState: any = ProjectState;
|
||||
public ProjectGrantState: any = ProjectGrantState;
|
||||
|
||||
public copied: string = '';
|
||||
|
||||
public environmentMap: { [key: string]: string; } = {};
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.app) {
|
||||
this.http.get('./assets/environment.json')
|
||||
.toPromise().then((env: any) => {
|
||||
this.environmentMap = {
|
||||
issuer: env.issuer,
|
||||
api: env.api,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user