feat(console): user metadata, rehaul detail pages (#2209)

* service, sidenav, i18n, dialog * detail layout, user detail * metadata dialog from * dialog * features * formarray * metadata component * comp * user metadata refresh * use formarray, control, bulk save * metadata revert, has feature directive * lint * lint * typo * info row user, warn color optim * card cleanup, actions for user detail * project, org, user, app rehaul * lint * scss * digit fix * features and project grid rehaul * info-section layout, org domain info * readd palette scss * add svg email warn * missing translation * rm unused ts * lockoutpolicy * check for lockout feature
2026-11-06 14:22:15 +00:00 · 2021-09-13 13:38:57 +02:00
parent e4bdaf26b0
commit 490cafa538
111 changed files with 2437 additions and 1063 deletions
@@ -0,0 +1,82 @@
+<div class="info-row" *ngIf="user">
+  <div class="info">
+    <p class="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 class="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 class="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="copy-row" *ngFor="let login of user?.loginNamesList">
+      <button [disabled]="copied == login"
+          [matTooltip]="(copied != login ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
+          appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event">
+          {{login}}
+      </button>
+    </div>
+  </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
+    | translate}}</p>
+  </div>
+
+  <div class="info">
+    <p class="title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
+    <p class="desc">{{app?.details?.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
+  </div>
+
+  <div class="info">
+    <p class="title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
+    <p class="desc">{{app?.details?.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
+  </div>
+
+  <div class="info" >
+    <p class="title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
+    <div class="copy-row" *ngIf="app?.oidcConfig?.clientId">
+      <button [disabled]="copied == app.oidcConfig?.clientId"
+          [matTooltip]="(copied != app.oidcConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
+          appCopyToClipboard [valueToCopy]="app.oidcConfig?.clientId" (copiedValue)="copied = $event">
+          {{app.oidcConfig?.clientId}}
+      </button>
+    </div>
+
+    <div class="copy-row" *ngIf="app?.apiConfig?.clientId">
+      <button [disabled]="copied == app.apiConfig?.clientId"
+          [matTooltip]="(copied != app.apiConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
+          appCopyToClipboard [valueToCopy]="app.apiConfig?.clientId" (copiedValue)="copied = $event">
+          {{app.apiConfig?.clientId}}
+      </button>
+    </div>
+  </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"
+                appCopyToClipboard [valueToCopy]="environmentV.value"
+                (copiedValue)="copied = environmentV.key">
+              {{environmentV.value}}
+            </button>
+        </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,77 @@
+@use '~@angular/material' as mat;
+
+@mixin info-row-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $button-text-color: map-get($foreground, text);
+  $button-disabled-text-color: map-get($foreground, disabled-button);
+
+  .info-row {
+    display: flex;
+    flex-direction: column;
+    margin: 0 -.5rem;
+
+    @media only screen and (min-width: 500px) {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      margin: .5rem .5rem;
+      flex: 1;
+      align-items: flex-start;
+      box-sizing: border-box;
+
+      &:not(.width) {
+        min-width: 100px;
+      }
+
+      .title {
+        font-size: 14px;
+        color: var(--grey);
+        margin: 0;
+      }
+
+      .desc {
+        margin: .5rem 0;
+        font-size: 14px;
+        padding: 2px 0;
+      }
+
+      .copy-row {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: stretch;
+
+        button {
+          transition: opacity .15s ease-in-out;
+          background-color: #8795a110;
+          border: 1px solid #8795a160;
+          border-radius: 4px;
+          padding: .25rem 1rem;
+          margin: .25rem 0;
+          color: $button-text-color;
+          text-overflow: ellipsis;
+          overflow: hidden;
+
+          &[disabled] {
+            color: $button-disabled-text-color;
+          }
+        }
+
+        .environment {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          margin: .25rem 0;
+
+          .key {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoRowComponent } from './info-row.component';
+
+describe('InfoRowComponent', () => {
+  let component: InfoRowComponent;
+  let fixture: ComponentFixture<InfoRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [InfoRowComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,36 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+import { App, AppState } from 'src/app/proto/generated/zitadel/app_pb';
+import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
+
+@Component({
+  selector: 'cnsl-info-row',
+  templateUrl: './info-row.component.html',
+  styleUrls: ['./info-row.component.scss'],
+})
+export class InfoRowComponent implements OnInit {
+  @Input() public user!: User.AsObject;
+  @Input() public app!: App.AsObject;
+  public UserState: any = UserState;
+  public AppState: any = AppState;
+  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,
+            adminServiceUrl: env.adminServiceUrl,
+            mgmtServiceUrl: env.mgmtServiceUrl,
+            authServiceUrl: env.adminServiceUrl,
+          };
+        });
+    }
+  }
+
+}
@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { InfoRowComponent } from './info-row.component';
+
+
+
+@NgModule({
+  declarations: [
+    InfoRowComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatTooltipModule,
+    TranslateModule,
+    CopyToClipboardModule,
+    MatButtonModule,
+    LocalizedDatePipeModule,
+    TimestampToDatePipeModule,
+  ],
+  exports: [
+    InfoRowComponent,
+  ],
+})
+export class InfoRowModule { }