fix(console): angular 13, grpc web 1.3.0, dependencies (#2688)

* cli core, migrations

* material

* input directive

* fresh lock

* update oidc lib

* use angular-eslint next for ng 13

* clean lock

* change qrcode lib, env

* eslint

* deps

* grpc libs update, grpc web 1.0.3, rev env

* remove grpc-web from build/zitadel/Dockerfile

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner 2021-11-29 10:31:56 +01:00 committed by GitHub
parent 77a3f848e5
commit 33ae935bf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 6517 additions and 12531 deletions

View File

@ -18,7 +18,7 @@ ENV PROTOC_ARCH x86_64
FROM ${BUILDARCH}-base AS base
ARG PROTOC_VERSION=3.13.0
ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
ARG GRPC_WEB_VERSION=1.2.1
ARG GRPC_WEB_VERSION=1.3.0
# no arm specific version available and x86 works fine at the moment:
ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64

View File

@ -12,17 +12,13 @@ ENV PROTOC_ARCH x86_64
#######################
## This step sets up the folder structure,
## initalices go mods,
## downloads the protofiles,
## protoc and protoc-gen-grpc-web for later use
## downloads the protofiles and protoc for later use
#######################
FROM ${BUILDARCH}-base AS base
ARG PROTOC_VERSION=3.18.0
ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
ARG GATEWAY_VERSION=2.6.0
ARG VALIDATOR_VERSION=0.6.2
ARG GRPC_WEB_VERSION=1.2.1
# no arm specific version available and x86 works fine at the moment:
ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64
RUN apk add tar curl
WORKDIR /proto
@ -33,9 +29,6 @@ RUN apk add tar curl \
&& unzip -o $PROTOC_ZIP -d /usr/local bin/protoc \
&& unzip -o $PROTOC_ZIP -d /proto include/* \
&& rm -f $PROTOC_ZIP \
&& curl -OL https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_VERSION}/${GRPC_WEB} \
&& mv ${GRPC_WEB} /usr/local/bin/protoc-gen-grpc-web \
&& chmod +x /usr/local/bin/protoc-gen-grpc-web \
&& curl https://raw.githubusercontent.com/envoyproxy/protoc-gen-validate/v${VALIDATOR_VERSION}/validate/validate.proto --create-dirs -o include/validate/validate.proto \
&& curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/annotations.proto --create-dirs -o include/protoc-gen-openapiv2/options/annotations.proto \
&& curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/openapiv2.proto --create-dirs -o include/protoc-gen-openapiv2/options/openapiv2.proto \

1
console/.gitignore vendored
View File

@ -30,6 +30,7 @@ speed-measure-plugin*.json
.history/*
# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage

View File

@ -22,22 +22,15 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/tinycolor2/dist/tinycolor-min.js"
],
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
"styles": ["src/styles.scss"],
"scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"],
"allowedCommonJsDependencies": [
"@angular/common/locales/de",
"src/app/proto/generated/zitadel/admin_pb",
"src/app/proto/generated/zitadel/management_pb",
"src/app/proto/generated/**",
"google-protobuf/google/protobuf/empty_pb",
"file-saver",
"qrcode"
],
@ -126,27 +119,15 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/tinycolor2/dist/tinycolor-min.js"
]
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
"styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
"scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"]
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
},
"e2e": {

17957
console/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -10,60 +10,59 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.12",
"@angular/cdk": "~12.2.12",
"@angular/common": "~12.2.12",
"@angular/compiler": "~12.2.12",
"@angular/core": "~12.2.12",
"@angular/forms": "~12.2.12",
"@angular/material": "^12.2.12",
"@angular/material-moment-adapter": "^12.2.12",
"@angular/platform-browser": "~12.2.12",
"@angular/platform-browser-dynamic": "~12.2.12",
"@angular/router": "~12.2.12",
"@angular/service-worker": "~12.2.12",
"@angular/animations": "~13.0.2",
"@angular/cdk": "~13.0.2",
"@angular/common": "~13.0.2",
"@angular/compiler": "~13.0.2",
"@angular/core": "~13.0.2",
"@angular/forms": "~13.0.2",
"@angular/material": "^13.0.2",
"@angular/material-moment-adapter": "^13.0.2",
"@angular/platform-browser": "~13.0.2",
"@angular/platform-browser-dynamic": "~13.0.2",
"@angular/router": "~13.0.2",
"@angular/service-worker": "~13.0.2",
"@grpc/grpc-js": "^1.3.2",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@types/file-saver": "^2.0.2",
"@types/google-protobuf": "^3.15.3",
"@types/uuid": "^8.3.0",
"angular-oauth2-oidc": "^12.1.0",
"angularx-qrcode": "^11.0.0",
"angular-oauth2-oidc": "^13.0.1",
"cors": "^2.8.5",
"file-saver": "^2.0.5",
"google-proto-files": "^2.4.0",
"google-proto-files": "^2.5.0",
"google-protobuf": "^3.19.1",
"grpc-web": "^1.2.1",
"grpc-web": "^1.3.0",
"libphonenumber-js": "^1.9.34",
"moment": "^2.29.1",
"ng-qrcode": "^6.0.0",
"ngx-color": "^7.2.0",
"ngx-image-cropper": "^3.3.5",
"ngx-quicklink": "^0.2.6",
"rxjs": "~7.3.0",
"rxjs": "~7.4.0",
"tinycolor2": "^1.4.2",
"ts-protoc-gen": "^0.14.0",
"tslib": "^2.2.0",
"uuid": "^8.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-eslint/builder": "12.6.1",
"@angular-eslint/eslint-plugin": "12.5.0",
"@angular-eslint/eslint-plugin-template": "12.5.0",
"@angular-eslint/schematics": "12.6.1",
"@angular-eslint/template-parser": "12.5.0",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"eslint": "^7.26.0",
"@angular-devkit/build-angular": "~12.2.12",
"@angular/cli": "~12.2.12",
"@angular/compiler-cli": "~12.2.12",
"@angular/language-service": "~12.2.12",
"@angular-devkit/build-angular": "~13.0.2",
"@angular-eslint/builder": "^13.0.1",
"@angular-eslint/eslint-plugin": "^13.0.1",
"@angular-eslint/eslint-plugin-template": "^13.0.1",
"@angular-eslint/schematics": "^13.0.1",
"@angular-eslint/template-parser": "^13.0.1",
"@angular/cli": "~13.0.2",
"@angular/compiler-cli": "~13.0.2",
"@angular/language-service": "~13.0.2",
"@types/jasmine": "~3.9.1",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^16.10.2",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"codelyzer": "^6.0.0",
"eslint": "^8.2.0",
"jasmine-core": "~3.9.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.6",
@ -77,6 +76,6 @@
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",
"ts-node": "~10.2.1",
"typescript": "^4.2.4"
"typescript": "^4.4.4"
}
}
}

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
.root-header {
position: fixed;

View File

@ -40,6 +40,7 @@ import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
import { SignedoutComponent } from './pages/signedout/signedout.component';
import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
import { AdminService } from './services/admin.service';
import { AuthenticationService } from './services/authentication.service';
import { GrpcAuthService } from './services/grpc-auth.service';
import { GrpcService } from './services/grpc.service';
@ -47,6 +48,7 @@ import { AuthInterceptor } from './services/interceptors/auth.interceptor';
import { GRPC_INTERCEPTORS } from './services/interceptors/grpc-interceptor';
import { I18nInterceptor } from './services/interceptors/i18n.interceptor';
import { OrgInterceptor } from './services/interceptors/org.interceptor';
import { ManagementService } from './services/mgmt.service';
import { RefreshService } from './services/refresh.service';
import { SeoService } from './services/seo.service';
import { StatehandlerProcessorService, StatehandlerProcessorServiceImpl } from './services/statehandler-processor.service';
@ -183,6 +185,8 @@ const authConfig: AuthConfig = {
GrpcService,
AuthenticationService,
GrpcAuthService,
ManagementService,
AdminService,
SubscriptionService,
AssetService,
{ provide: 'windowObject', useValue: window },

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin app-card-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
.radio-button-wrapper {
display: flex;

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
.radio-button-wrapper {
display: flex;

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin avatar-theme($theme) {
$primary: map-get($theme, primary);

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin card-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
.change-header {
display: flex;

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin detail-layout-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin cnsl-form-field-theme($theme) {
$primary: map-get($theme, primary);

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
.idp-radio-button-wrapper {
display: flex;

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin info-row-theme($theme) {
$foreground: map-get($theme, foreground);

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin info-section-theme($theme) {
$primary: map-get($theme, primary);

View File

@ -2,452 +2,462 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { getSupportedInputTypes, Platform } from '@angular/cdk/platform';
import { AutofillMonitor } from '@angular/cdk/text-field';
import {
AfterViewInit,
Directive,
DoCheck,
ElementRef,
HostListener,
Inject,
Input,
NgZone,
OnChanges,
OnDestroy,
Optional,
Self,
AfterViewInit,
Directive,
DoCheck,
ElementRef,
HostListener,
Inject,
Input,
NgZone,
OnChanges,
OnDestroy,
Optional,
Self,
} from '@angular/core';
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
import { Subject } from 'rxjs';
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
const MAT_INPUT_INVALID_TYPES = [
'button',
'checkbox',
'file',
'hidden',
'image',
'radio',
'range',
'reset',
'submit',
];
const MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'];
let nextUniqueId = 0;
// Boilerplate for applying mixins to MatInput.
/** @docs-private */
class MatInputBase {
constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
public _parentForm: NgForm,
public _parentFormGroup: FormGroupDirective,
/** @docs-private */
public ngControl: NgControl) { }
}
const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
mixinErrorState(MatInputBase);
const _MatInputBase = mixinErrorState(
class {
constructor(
public _defaultErrorStateMatcher: ErrorStateMatcher,
public _parentForm: NgForm,
public _parentFormGroup: FormGroupDirective,
/** @docs-private */
public ngControl: NgControl,
) {}
},
);
/** Directive that allows a native input to work inside a `MatFormField`. */
@Directive({
selector: `input[cnslInput], textarea[cnslInput], select[cnslNativeControl]`,
exportAs: 'cnslInput',
host: {
/**
* @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
*/
// 'class': 'cnsl-input-element cnsl-form-field-autofill-control',
// '[class.mat-input-server]': '_isServer',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[attr.id]': 'id',
// At the time of writing, we have a lot of customer tests that look up the input based on its
// placeholder. Since we sometimes omit the placeholder attribute from the DOM to prevent screen
// readers from reading it twice, we have to keep it somewhere in the DOM for the lookup.
'[attr.data-placeholder]': 'placeholder',
'[disabled]': 'disabled',
'[required]': 'required',
'[attr.readonly]': 'readonly && !_isNativeSelect || null',
'[attr.aria-invalid]': 'errorState',
'[attr.aria-required]': 'required.toString()',
},
providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
selector: `input[cnslInput], textarea[cnslInput], select[cnslNativeControl]`,
exportAs: 'cnslInput',
host: {
/**
* @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
*/
// 'class': 'cnsl-input-element cnsl-form-field-autofill-control',
// '[class.mat-input-server]': '_isServer',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[attr.id]': 'id',
// At the time of writing, we have a lot of customer tests that look up the input based on its
// placeholder. Since we sometimes omit the placeholder attribute from the DOM to prevent screen
// readers from reading it twice, we have to keep it somewhere in the DOM for the lookup.
'[attr.data-placeholder]': 'placeholder',
'[disabled]': 'disabled',
'[required]': 'required',
'[attr.readonly]': 'readonly && !_isNativeSelect || null',
'[attr.aria-invalid]': 'errorState',
'[attr.aria-required]': 'required.toString()',
},
providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
})
export class InputDirective extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges,
OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
protected _uid: string = `cnsl-input-${nextUniqueId++}`;
protected _previousNativeValue: any;
private _inputValueAccessor: { value: any; };
private _previousPlaceholder!: string | null;
export class InputDirective
extends _MatInputBase
implements
MatFormFieldControl<any>,
OnChanges,
CanUpdateErrorState,
OnDestroy,
AfterViewInit,
DoCheck,
CanUpdateErrorState
{
protected _uid: string = `cnsl-input-${nextUniqueId++}`;
protected _previousNativeValue: any;
private _inputValueAccessor: { value: any };
private _previousPlaceholder!: string | null;
/** Whether the component is being rendered on the server. */
readonly _isServer: boolean;
/** Whether the component is being rendered on the server. */
readonly _isServer: boolean;
/** Whether the component is a native html select. */
readonly _isNativeSelect: boolean;
/** Whether the component is a native html select. */
readonly _isNativeSelect: boolean;
/** Whether the component is a textarea. */
readonly _isTextarea: boolean;
/** Whether the component is a textarea. */
readonly _isTextarea: boolean;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
focused: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
focused: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
readonly stateChanges: Subject<void> = new Subject<void>();
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
readonly stateChanges: Subject<void> = new Subject<void>();
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
controlType: string = 'mat-input';
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
controlType: string = 'mat-input';
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
autofilled: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
autofilled: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get disabled(): boolean {
if (this.ngControl && this.ngControl.disabled !== null) {
return this.ngControl.disabled;
}
return this._disabled;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get disabled(): boolean {
if (this.ngControl && this.ngControl.disabled !== null) {
return this.ngControl.disabled;
}
set disabled(value: boolean) {
this._disabled = coerceBooleanProperty(value);
return this._disabled;
}
set disabled(value: boolean) {
this._disabled = coerceBooleanProperty(value);
// Browsers may not fire the blur event if the input is disabled too quickly.
// Reset from here to ensure that the element doesn't become stuck.
if (this.focused) {
this.focused = false;
this.stateChanges.next();
}
// Browsers may not fire the blur event if the input is disabled too quickly.
// Reset from here to ensure that the element doesn't become stuck.
if (this.focused) {
this.focused = false;
this.stateChanges.next();
}
protected _disabled: boolean = false;
}
protected _disabled: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get id(): string { return this._id; }
set id(value: string) { this._id = value || this._uid; }
protected _id!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get id(): string {
return this._id;
}
set id(value: string) {
this._id = value || this._uid;
}
protected _id!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input() placeholder!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input() placeholder!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get required(): boolean { return this._required; }
set required(value: boolean) { this._required = coerceBooleanProperty(value); }
protected _required: boolean = false;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get required(): boolean {
return this._required;
}
set required(value: boolean) {
this._required = coerceBooleanProperty(value);
}
protected _required: boolean = false;
/** Input type of the element. */
@Input()
get type(): string { return this._type; }
set type(value: string) {
this._type = value || 'text';
this._validateType();
/** Input type of the element. */
@Input()
get type(): string {
return this._type;
}
set type(value: string) {
this._type = value || 'text';
this._validateType();
// When using Angular inputs, developers are no longer able to set the properties on the native
// input element. To ensure that bindings for `type` work, we need to sync the setter
// with the native property. Textarea elements don't support the type property or attribute.
if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
(this._elementRef.nativeElement as HTMLInputElement).type = this._type;
}
// When using Angular inputs, developers are no longer able to set the properties on the native
// input element. To ensure that bindings for `type` work, we need to sync the setter
// with the native property. Textarea elements don't support the type property or attribute.
if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
(this._elementRef.nativeElement as HTMLInputElement).type = this._type;
}
protected _type: string = 'text';
}
protected _type: string = 'text';
/** An object used to control when error messages are shown. */
@Input() errorStateMatcher!: ErrorStateMatcher;
/** An object used to control when error messages are shown. */
@Input() errorStateMatcher!: ErrorStateMatcher;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('aria-describedby') userAriaDescribedBy!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('aria-describedby') userAriaDescribedBy!: string;
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get value(): string { return this._inputValueAccessor.value; }
set value(value: string) {
if (value !== this.value) {
this._inputValueAccessor.value = value;
this.stateChanges.next();
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
@Input()
get value(): string {
return this._inputValueAccessor.value;
}
set value(value: string) {
if (value !== this.value) {
this._inputValueAccessor.value = value;
this.stateChanges.next();
}
}
/** Whether the element is readonly. */
@Input()
get readonly(): boolean {
return this._readonly;
}
set readonly(value: boolean) {
this._readonly = coerceBooleanProperty(value);
}
private _readonly: boolean = false;
protected _neverEmptyInputTypes: string[] = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter((t) =>
getSupportedInputTypes().has(t),
);
constructor(
protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
protected _platform: Platform,
/** @docs-private */
@Optional() @Self() public ngControl: NgControl,
@Optional() _parentForm: NgForm,
@Optional() _parentFormGroup: FormGroupDirective,
_defaultErrorStateMatcher: ErrorStateMatcher,
@Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
private _autofillMonitor: AutofillMonitor,
ngZone: NgZone,
@Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField,
) {
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
const element = this._elementRef.nativeElement;
const nodeName = element.nodeName.toLowerCase();
// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
this._inputValueAccessor = inputValueAccessor || element;
this._previousNativeValue = this.value;
// Force setter to be called in case id was not specified.
this.id = this.id;
// On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
// key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
// exists on iOS, we only bother to install the listener on iOS.
if (_platform.IOS) {
ngZone.runOutsideAngular(() => {
_elementRef.nativeElement.addEventListener('keyup', (event: Event) => {
const el: HTMLInputElement = event.target as HTMLInputElement;
if (!el.value && !el.selectionStart && !el.selectionEnd) {
// Note: Just setting `0, 0` doesn't fix the issue. Setting
// `1, 1` fixes it for the first time that you type text and
// then hold delete. Toggling to `1, 1` and then back to
// `0, 0` seems to completely fix it.
el.setSelectionRange(1, 1);
el.setSelectionRange(0, 0);
}
});
});
}
/** Whether the element is readonly. */
@Input()
get readonly(): boolean { return this._readonly; }
set readonly(value: boolean) { this._readonly = coerceBooleanProperty(value); }
private _readonly: boolean = false;
this._isServer = !this._platform.isBrowser;
this._isNativeSelect = nodeName === 'select';
this._isTextarea = nodeName === 'textarea';
protected _neverEmptyInputTypes: string[] = [
'date',
'datetime',
'datetime-local',
'month',
'time',
'week',
].filter(t => getSupportedInputTypes().has(t));
constructor(
protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
protected _platform: Platform,
/** @docs-private */
@Optional() @Self() public ngControl: NgControl,
@Optional() _parentForm: NgForm,
@Optional() _parentFormGroup: FormGroupDirective,
_defaultErrorStateMatcher: ErrorStateMatcher,
@Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
private _autofillMonitor: AutofillMonitor,
ngZone: NgZone,
@Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) {
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
const element = this._elementRef.nativeElement;
const nodeName = element.nodeName.toLowerCase();
// If no input value accessor was explicitly specified, use the element as the input value
// accessor.
this._inputValueAccessor = inputValueAccessor || element;
this._previousNativeValue = this.value;
// Force setter to be called in case id was not specified.
this.id = this.id;
// On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
// key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
// exists on iOS, we only bother to install the listener on iOS.
if (_platform.IOS) {
ngZone.runOutsideAngular(() => {
_elementRef.nativeElement.addEventListener('keyup', (event: Event) => {
const el: HTMLInputElement = event.target as HTMLInputElement;
if (!el.value && !el.selectionStart && !el.selectionEnd) {
// Note: Just setting `0, 0` doesn't fix the issue. Setting
// `1, 1` fixes it for the first time that you type text and
// then hold delete. Toggling to `1, 1` and then back to
// `0, 0` seems to completely fix it.
el.setSelectionRange(1, 1);
el.setSelectionRange(0, 0);
}
});
});
}
this._isServer = !this._platform.isBrowser;
this._isNativeSelect = nodeName === 'select';
this._isTextarea = nodeName === 'textarea';
if (this._isNativeSelect) {
this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' :
'mat-native-select';
}
if (this._isNativeSelect) {
this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' : 'mat-native-select';
}
}
ngAfterViewInit(): void {
if (this._platform.isBrowser) {
this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
this.autofilled = event.isAutofilled;
this.stateChanges.next();
});
}
}
ngOnChanges(): void {
ngAfterViewInit(): void {
if (this._platform.isBrowser) {
this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((event) => {
this.autofilled = event.isAutofilled;
this.stateChanges.next();
});
}
}
ngOnChanges(): void {
this.stateChanges.next();
}
ngOnDestroy(): void {
this.stateChanges.complete();
if (this._platform.isBrowser) {
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
}
}
ngDoCheck(): void {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
ngOnDestroy(): void {
this.stateChanges.complete();
// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
if (this._platform.isBrowser) {
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
}
// We need to dirty-check and set the placeholder attribute ourselves, because whether it's
// present or not depends on a query which is prone to "changed after checked" errors.
this._dirtyCheckPlaceholder();
}
/** Focuses the input. */
focus(options?: FocusOptions): void {
this._elementRef.nativeElement.focus(options);
}
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
/** Callback for the cases where the focused state of the input changes. */
/* eslint-disable */
@HostListener('focus', ['true'])
@HostListener('blur', ['false'])
/* eslint-enable */
_focusChanged(isFocused: boolean): void {
if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
this.focused = isFocused;
this.stateChanges.next();
}
}
ngDoCheck(): void {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// eslint-disable-next-line
@HostListener('input')
_onInput(): void {
// This is a noop function and is used to let Angular know whenever the value changes.
// Angular will run a new change detection each time the `input` event has been dispatched.
// It's necessary that Angular recognizes the value change, because when floatingLabel
// is set to false and Angular forms aren't used, the placeholder won't recognize the
// value changes and will not disappear.
// Listening to the input event wouldn't be necessary when the input is using the
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
}
// We need to dirty-check the native element's value, because there are some cases where
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
// updating the value using `emitEvent: false`).
this._dirtyCheckNativeValue();
// We need to dirty-check and set the placeholder attribute ourselves, because whether it's
// present or not depends on a query which is prone to "changed after checked" errors.
this._dirtyCheckPlaceholder();
/** Does some manual dirty checking on the native input `placeholder` attribute. */
private _dirtyCheckPlaceholder(): void {
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
// screen readers will read it out twice: once from the label and once from the attribute.
const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder;
if (placeholder !== this._previousPlaceholder) {
const element = this._elementRef.nativeElement;
this._previousPlaceholder = placeholder;
placeholder ? element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
}
}
/** Focuses the input. */
focus(options?: FocusOptions): void {
this._elementRef.nativeElement.focus(options);
/** Does some manual dirty checking on the native input `value` property. */
protected _dirtyCheckNativeValue(): void {
const newValue = this._elementRef.nativeElement.value;
if (this._previousNativeValue !== newValue) {
this._previousNativeValue = newValue;
this.stateChanges.next();
}
}
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
/** Callback for the cases where the focused state of the input changes. */
/* eslint-disable */
@HostListener('focus', ['true'])
@HostListener('blur', ['false'])
/* eslint-enable */
_focusChanged(isFocused: boolean): void {
if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
this.focused = isFocused;
this.stateChanges.next();
}
/** Make sure the input is a supported type. */
protected _validateType(): void {
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
throw getMatInputUnsupportedTypeError(this._type);
}
}
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// eslint-disable-next-line
@HostListener('input')
_onInput(): void {
// This is a noop function and is used to let Angular know whenever the value changes.
// Angular will run a new change detection each time the `input` event has been dispatched.
// It's necessary that Angular recognizes the value change, because when floatingLabel
// is set to false and Angular forms aren't used, the placeholder won't recognize the
// value changes and will not disappear.
// Listening to the input event wouldn't be necessary when the input is using the
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
/** Checks whether the input type is one of the types that are never empty. */
protected _isNeverEmpty(): boolean {
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
}
/** Checks whether the input is invalid based on the native validation. */
protected _isBadInput(): boolean {
// The `validity` property won't be present on platform-server.
const validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
return validity && validity.badInput;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get empty(): boolean {
return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get shouldLabelFloat(): boolean {
if (this._isNativeSelect) {
// For a single-selection `<select>`, the label should float when the selected option has
// a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
// overlapping the label with the options.
const selectElement = this._elementRef.nativeElement as HTMLSelectElement;
const firstOption: HTMLOptionElement | undefined = selectElement.options[0];
// On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
// -1 if the `value` is set to something, that isn't in the list of options, at a later point.
return (
this.focused ||
selectElement.multiple ||
!this.empty ||
!!(selectElement.selectedIndex > -1 && firstOption && firstOption.label)
);
} else {
return this.focused || !this.empty;
}
}
/** Does some manual dirty checking on the native input `placeholder` attribute. */
private _dirtyCheckPlaceholder(): void {
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
// screen readers will read it out twice: once from the label and once from the attribute.
const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder;
if (placeholder !== this._previousPlaceholder) {
const element = this._elementRef.nativeElement;
this._previousPlaceholder = placeholder;
placeholder ?
element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
setDescribedByIds(ids: string[]): void {
if (ids.length) {
this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
} else {
this._elementRef.nativeElement.removeAttribute('aria-describedby');
}
}
/** Does some manual dirty checking on the native input `value` property. */
protected _dirtyCheckNativeValue(): void {
const newValue = this._elementRef.nativeElement.value;
if (this._previousNativeValue !== newValue) {
this._previousNativeValue = newValue;
this.stateChanges.next();
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
onContainerClick(): void {
// Do not re-focus the input element if the element is already focused. Otherwise it can happen
// that someone clicks on a time input and the cursor resets to the "hours" field while the
// "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
if (!this.focused) {
this.focus();
}
}
/* eslint-disable */
static ngAcceptInputType_disabled: BooleanInput;
static ngAcceptInputType_readonly: BooleanInput;
static ngAcceptInputType_required: BooleanInput;
/** Make sure the input is a supported type. */
protected _validateType(): void {
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
throw getMatInputUnsupportedTypeError(this._type);
}
}
/** Checks whether the input type is one of the types that are never empty. */
protected _isNeverEmpty(): boolean {
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
}
/** Checks whether the input is invalid based on the native validation. */
protected _isBadInput(): boolean {
// The `validity` property won't be present on platform-server.
const validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
return validity && validity.badInput;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get empty(): boolean {
return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
!this.autofilled;
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
get shouldLabelFloat(): boolean {
if (this._isNativeSelect) {
// For a single-selection `<select>`, the label should float when the selected option has
// a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
// overlapping the label with the options.
const selectElement = this._elementRef.nativeElement as HTMLSelectElement;
const firstOption: HTMLOptionElement | undefined = selectElement.options[0];
// On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
// -1 if the `value` is set to something, that isn't in the list of options, at a later point.
return this.focused || selectElement.multiple || !this.empty ||
!!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
} else {
return this.focused || !this.empty;
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
setDescribedByIds(ids: string[]): void {
if (ids.length) {
this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
} else {
this._elementRef.nativeElement.removeAttribute('aria-describedby');
}
}
/**
* Implemented as part of MatFormFieldControl.
* @docs-private
*/
onContainerClick(): void {
// Do not re-focus the input element if the element is already focused. Otherwise it can happen
// that someone clicks on a time input and the cursor resets to the "hours" field while the
// "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
if (!this.focused) {
this.focus();
}
}
/* eslint-disable */
static ngAcceptInputType_disabled: BooleanInput;
static ngAcceptInputType_readonly: BooleanInput;
static ngAcceptInputType_required: BooleanInput;
// Accept `any` to avoid conflicts with other directives on `<input>` that may
// accept different types.
static ngAcceptInputType_value: any;
/* eslint-enable */
// Accept `any` to avoid conflicts with other directives on `<input>` that may
// accept different types.
static ngAcceptInputType_value: any;
/* eslint-enable */
}

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin cnsl-label-theme($theme) {
$primary: map-get($theme, primary);

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin onboarding-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@import './preview/preview.component.scss';

View File

@ -1,63 +1,63 @@
<h1 mat-dialog-title>
<span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
<span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
</h1>
<div mat-dialog-content>
<ng-container *ngIf="selectedType === undefined">
<p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
<ng-container *ngIf="selectedType === undefined">
<p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
<div class="type-selection">
<button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
<div class="otp-btn">
<mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
<span>{{'USER.MFA.OTP' | translate}}</span>
</div>
</button>
<button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
<div class="u2f-btn">
<div class="icon-row">
<i matTooltip="Fingerprint" class="las la-fingerprint"></i>
<i matTooltip="Security Key" class="lab la-usb"></i>
<mat-icon matTooltip="NFC">nfc</mat-icon>
</div>
<span>{{'USER.MFA.U2F' | translate}}</span>
</div>
</button>
<div class="type-selection">
<button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
<div class="otp-btn">
<mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
<span>{{'USER.MFA.OTP' | translate}}</span>
</div>
</ng-container>
<div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
<p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
<div class="qrcode-wrapper">
<qrcode *ngIf="otpurl" class="qrcode" [qrdata]="otpurl" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
</button>
<button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
<div class="u2f-btn">
<div class="icon-row">
<i matTooltip="Fingerprint" class="las la-fingerprint"></i>
<i matTooltip="Security Key" class="lab la-usb"></i>
<mat-icon matTooltip="NFC">nfc</mat-icon>
</div>
<span>{{'USER.MFA.U2F' | translate}}</span>
</div>
</button>
</div>
</ng-container>
<cnsl-form-field class="formfield" label="Access Code" required="true">
<cnsl-label>Code</cnsl-label>
<input cnslInput [(ngModel)]="otpcode" />
</cnsl-form-field>
<div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
<p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
<div class="qrcode-wrapper">
<qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
</div>
<div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
<p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
<cnsl-form-field class="formfield" label="Access Code" required="true">
<cnsl-label>Code</cnsl-label>
<input cnslInput [(ngModel)]="otpcode" />
</cnsl-form-field>
</div>
<cnsl-form-field class="form-field" label="Name" required="true">
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
</cnsl-form-field>
<div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
<p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
<mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
<cnsl-form-field class="form-field" label="Name" required="true">
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
</cnsl-form-field>
<p class="error">{{u2fError}}</p>
</div>
<mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
<p class="error">{{u2fError}}</p>
</div>
</div>
<div mat-dialog-actions class="action">
<button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
{{'ACTIONS.CLOSE' | translate}}
</button>
<button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
{{'ACTIONS.CLOSE' | translate}}
</button>
<button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
(click)="submitAuth()">
{{'ACTIONS.CREATE' | translate}}
</button>
<button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
(click)="submitAuth()">
{{'ACTIONS.CREATE' | translate}}
</button>
</div>

View File

@ -9,12 +9,12 @@
</div>
<cnsl-form-field class="form-field" label="Name" required="true">
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
</cnsl-form-field>
<button [disabled]="!name" mat-raised-button class="ok-button" color="primary"
(click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
(click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
</button>
<p class="error">{{error}}</p>
@ -26,7 +26,7 @@
</div>
<button mat-raised-button class="send-button" color="primary"
(click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
(click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
</button>
@ -34,9 +34,9 @@
<i class="icon las la-qrcode"></i>
<p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate}}</p>
</div>
<button mat-raised-button class="qr-button" color="primary"
(click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
(click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
</button>
</div>
@ -55,12 +55,13 @@
<p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>
<div class="qrcode-wrapper">
<qrcode *ngIf="qrcodeLink" class="qrcode" [qrdata]="qrcodeLink" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
</div>
<qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
</qr-code>
</div>
</div>
<mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
</div>
<div mat-dialog-actions class="action">
<button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
<button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
</div>

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin theme-card($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin membership-theme($theme) {
/* stylelint-disable */

View File

@ -12,7 +12,7 @@ import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { QRCodeModule } from 'angularx-qrcode';
import { QrCodeModule } from 'ng-qrcode';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
@ -93,7 +93,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
DetailFormMachineModule,
WarnDialogModule,
MatDialogModule,
QRCodeModule,
QrCodeModule,
MetaLayoutModule,
MatCheckboxModule,
HasRolePipeModule,
@ -124,4 +124,4 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
InfoSectionModule,
],
})
export class UserDetailModule { }
export class UserDetailModule {}

View File

@ -1,9 +1,9 @@
{
"authServiceUrl": "https://api.zitadel.dev",
"mgmtServiceUrl": "https://api.zitadel.dev",
"adminServiceUrl":"https://api.zitadel.dev",
"subscriptionServiceUrl":"https://sub.zitadel.dev",
"assetServiceUrl":"https://api.zitadel.dev",
"adminServiceUrl": "https://api.zitadel.dev",
"subscriptionServiceUrl": "https://sub.zitadel.dev",
"assetServiceUrl": "https://api.zitadel.dev",
"issuer": "https://issuer.zitadel.dev",
"clientid": "70669160379706195@zitadel"
}

View File

@ -18,16 +18,6 @@
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags

View File

@ -1,7 +1,7 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@import './component-themes';
@import '~@angular/material/theming';
@import '@angular/material/theming';
// Plus imports for other components in your app.

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin cnsl-error-theme($theme) {
$warn: map-get($theme, warn);

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin input-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin link-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin sidenav-list-theme($theme) {
/* stylelint-disable */

View File

@ -1,4 +1,4 @@
@use '~@angular/material' as mat;
@use '@angular/material' as mat;
@mixin table-theme($theme) {
/* stylelint-disable */

View File

@ -7,7 +7,9 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
teardown: { destroyAfterEach: false }
});
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.