TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-10 19:22:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): MDC components (#6482)

Browse Source 
mdc components

---------

Co-authored-by: Elio Bischof <eliobischof@gmail.com>
This commit is contained in:
Max Peintner
2023-10-26 10:29:06 +02:00
committed by GitHub
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';

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

@@ -19,14 +19,16 @@
>
<button
actions
class="cnsl-action-button button"
class="button"
(click)="addPasswordless()"
mat-raised-button
color="primary"
matTooltip="{{ 'ACTIONS.NEW' | translate }}"
>
<mat-icon>add</mat-icon>
{{ 'USER.PASSWORDLESS.U2F' | translate }}
<div class="cnsl-action-button">
<mat-icon>add</mat-icon>
<span>{{ 'USER.PASSWORDLESS.U2F' | translate }}</span>
</div>
</button>
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">

4
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactorState, WebAuthNToken } from 'src/app/proto/generated/zitadel/user_pb';

5
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';

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

@@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin auth-user-detail-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);

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

@@ -2,7 +2,7 @@ import { MediaMatcher } from '@angular/cdk/layout';
import { Location } from '@angular/common';
import { Component, EventEmitter, OnDestroy } from '@angular/core';
import { Validators } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Buffer } from 'buffer';

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

@@ -17,14 +17,16 @@
>
<button
actions
class="button cnsl-action-button"
class="button"
(click)="addAuthFactor()"
mat-raised-button
color="primary"
matTooltip="{{ 'ACTIONS.NEW' | translate }}"
>
<mat-icon class="icon">add</mat-icon>
<span>{{ 'USER.MFA.ADD' | translate }}</span>
<div class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon>
<span>{{ 'USER.MFA.ADD' | translate }}</span>
</div>
</button>
<table class="table" mat-table [dataSource]="dataSource">

4
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactor, AuthFactorState } from 'src/app/proto/generated/zitadel/user_pb';

5
console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'cnsl-code-dialog',

5
console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';

5
console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.ts
View File

@@ -1,9 +1,6 @@
import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { debounceTime } from 'rxjs';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { CountryCallingCodesService, CountryPhoneCode } from 'src/app/services/country-calling-codes.service';

5
console/src/app/pages/users/user-detail/auth-user-detail/resend-email-dialog/resend-email-dialog.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'cnsl-resend-email-dialog',

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

@@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin contact-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
@@ -87,7 +85,3 @@
}
}
}
.mat-form-field-wrapper {
padding-bottom: 0 !important;
}

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

@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatDialog } from '@angular/material/dialog';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Human, UserState } from 'src/app/proto/generated/zitadel/user_pb';

4
console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.module.ts
View File

@@ -1,9 +1,9 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';

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

@@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatDialog } from '@angular/material/dialog';
import { Subscription } from 'rxjs';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { Gender, Human, Profile } from 'src/app/proto/generated/zitadel/user_pb';

6
console/src/app/pages/users/user-detail/detail-form/detail-form.module.ts
View File

@@ -1,10 +1,10 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { DropzoneModule } from 'src/app/directives/dropzone/dropzone.module';
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';

5
console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AssetService } from 'src/app/services/asset.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';

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

@@ -1,7 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable } from 'rxjs';
import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';

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

@@ -47,4 +47,5 @@ form {
margin-top: 2rem;
display: block;
padding: 0.5rem 4rem;
height: 3.5rem;
}

16
console/src/app/pages/users/user-detail/user-detail.module.ts
View File

@@ -1,14 +1,14 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
@@ -36,7 +36,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
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 { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatSelectModule } from '@angular/material/select';
import { QRCodeModule } from 'angularx-qrcode';
import { InfoDialogModule } from 'src/app/modules/info-dialog/info-dialog.module';
import { MetadataModule } from 'src/app/modules/metadata/metadata.module';

3
console/src/app/pages/users/user-detail/user-detail/machine-secret-dialog/machine-secret-dialog.component.html
View File

@@ -1,8 +1,9 @@
<h1 mat-dialog-title>
<span class="title">{{ 'USER.SECRETDIALOG.CLIENTSECRET' | translate }}</span>
</h1>
<p class="desc cnsl-secondary-text">{{ 'USER.SECRETDIALOG.CLIENTSECRET_DESCRIPTION' | translate }}</p>
<div mat-dialog-content>
<p class="desc cnsl-secondary-text">{{ 'USER.SECRETDIALOG.CLIENTSECRET_DESCRIPTION' | translate }}</p>
<div class="flex" *ngIf="data.clientId">
<span class="overflow-auto" data-e2e="client-id"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
<button

5
console/src/app/pages/users/user-detail/user-detail/machine-secret-dialog/machine-secret-dialog.component.ts
View File

@@ -1,8 +1,5 @@
import { Component, Inject } from '@angular/core';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'cnsl-machine-secret-dialog',

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

@@ -15,14 +15,16 @@
<button
actions
[disabled]="user && disabled"
class="button cnsl-action-button"
class="button"
(click)="sendPasswordlessRegistration()"
mat-raised-button
color="primary"
matTooltip="{{ 'ACTIONS.NEW' | translate }}"
>
<i class="icon las la-paper-plane"></i>
<span>{{ 'USER.PASSWORDLESS.SEND' | translate }}</span>
<div class="cnsl-action-button">
<i class="icon las la-paper-plane"></i>
<span>{{ 'USER.PASSWORDLESS.SEND' | translate }}</span>
</div>
</button>
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">

4
console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactorState, User, WebAuthNToken } from 'src/app/proto/generated/zitadel/user_pb';

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

@@ -1,5 +1,3 @@
@use '@angular/material' as mat;
@mixin user-detail-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

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

@@ -2,7 +2,7 @@ import { MediaMatcher } from '@angular/cdk/layout';
import { Location } from '@angular/common';
import { Component, EventEmitter, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Buffer } from 'buffer';

4
console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatDialog } from '@angular/material/dialog';
import { MatSort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { BehaviorSubject, Observable } from 'rxjs';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { AuthFactor, AuthFactorState, User } from 'src/app/proto/generated/zitadel/user_pb';