TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 22:37:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): better error messages (#5409)

Browse Source 
* fix(console): better error messages

* fix: fix i18n error labels

* rollout cnsl-i18n-errors

* move errors to form-field

* fix: form control errors

* rollout validators

* translate

* replace variables

* lint

* self review

* fix confirm validation

* use help observable

* fix validation errors

* cleanup

* custom validator for idp templates

* lint

* validate on blur

* remove element

---------

Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
Elio Bischof 2023-03-14 22:29:45 +01:00 committed by GitHub
parent e00cc187fa
commit 93e1fe0056
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 504 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
console/src/app/modules/form-field/error.directive.ts → console/src/app/modules/form-field/error/error.directive.ts
View File

0
console/src/app/modules/form-field/animations.ts → console/src/app/modules/form-field/field/animations.ts
View File

20
console/src/app/modules/form-field/field/form-field.component.html Normal file
View File

@ -0,0 +1,20 @@
<div class="cnsl-form-field-wrapper" (click)="_control.onContainerClick && _control.onContainerClick($event)">
<ng-content select="cnsl-label"></ng-content>
<div class="cnsl-rel" #inputContainer>
<ng-content></ng-content>
<ng-content select="cnslSuffix"></ng-content>
</div>
<ng-container *ngIf="help$ && help$ | async as help">
<div [ngSwitch]="help.type" class="cnsl-form-field-subscript-wrapper">
<div *ngSwitchCase="'hints'" class="cnsl-form-field-hint-wrapper" [@transitionMessages]="_subscriptAnimationState">
<ng-content select="cnsl-hint"></ng-content>
</div>
<div *ngSwitchCase="'errors'" class="cnsl-form-field-error-wrapper" [@transitionMessages]="_subscriptAnimationState">
<span cnslError *ngFor="let err of help.validationErrors">
{{ err.i18nKey | translate : err.params }}
</span>
<ng-content select="cnsl-error"></ng-content>
</div>
</div>
</ng-container>
</div>

0
console/src/app/modules/form-field/form-field.component.scss → console/src/app/modules/form-field/field/form-field.component.scss
View File

0
console/src/app/modules/form-field/form-field.component.spec.ts → console/src/app/modules/form-field/field/form-field.component.spec.ts
View File

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

@ -10,6 +10,7 @@ import {
HostListener,
Inject,
InjectionToken,
Input,
OnDestroy,
QueryList,
ViewChild,
@ -17,11 +18,10 @@ import {
} from '@angular/core';
import { NgControl } from '@angular/forms';
import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
import { Subject } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import { combineLatest, map, Observable, of, startWith, Subject, takeUntil } from 'rxjs';
import { CnslErrorDirective, CNSL_ERROR } from '../error/error.directive';
import { cnslFormFieldAnimations } from './animations';
import { CnslErrorDirective, CNSL_ERROR } from './error.directive';
export const CNSL_FORM_FIELD = new InjectionToken<CnslFormFieldComponent>('CnslFormFieldComponent');
@ -29,6 +29,15 @@ class CnslFormFieldBase {
constructor(public _elementRef: ElementRef) {}
}
interface Help {
type: 'hints' | 'errors';
validationErrors?: Array<ValidationError>;
}
interface ValidationError {
i18nKey: string;
params: any;
}
@Component({
selector: 'cnsl-form-field',
templateUrl: './form-field.component.html',
@ -59,19 +68,24 @@ export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestr
@ViewChild('inputContainer') _inputContainerRef!: ElementRef;
@ContentChild(MatFormFieldControl) _controlNonStatic!: MatFormFieldControl<any>;
@ContentChild(MatFormFieldControl, { static: true }) _controlStatic!: MatFormFieldControl<any>;
@Input() public disableValidationErrors = false;
get _control(): MatFormFieldControl<any> {
return this._explicitFormFieldControl || this._controlNonStatic || this._controlStatic;
}
set _control(value: MatFormFieldControl<any>) {
this._explicitFormFieldControl = value;
}
private _explicitFormFieldControl!: MatFormFieldControl<any>;
readonly stateChanges: Subject<void> = new Subject<void>();
public help$?: Observable<Help>;
_subscriptAnimationState: string = '';
@ContentChildren(CNSL_ERROR as any, { descendants: true }) _errorChildren!: QueryList<CnslErrorDirective>;
// TODO: Remove?
@HostListener('blur', ['false'])
_focusChanged(isFocused: boolean): void {
if (isFocused !== this.focused && !isFocused) {
@ -91,8 +105,6 @@ export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestr
}
public ngAfterViewInit(): void {
// Avoid animations on load.
this._subscriptAnimationState = 'enter';
this._changeDetectorRef.detectChanges();
}
@ -103,25 +115,21 @@ export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestr
public ngAfterContentInit(): void {
this._validateControlChild();
this.mapHelp();
const control = this._control;
control.stateChanges.pipe(startWith(null)).subscribe(() => {
control.stateChanges.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
this._syncDescribedByIds();
this._changeDetectorRef.markForCheck();
});
// Run change detection if the value changes.
// TODO: Is that not redundant (see immediately above)?
if (control.ngControl && control.ngControl.valueChanges) {
control.ngControl.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(() => this._changeDetectorRef.markForCheck());
}
// Update the aria-described by when the number of errors changes.
this._errorChildren.changes.pipe(startWith(null)).subscribe(() => {
this._syncDescribedByIds();
this._changeDetectorRef.markForCheck();
});
}
/** Throws an error if the form field's control is missing. */
@ -147,14 +155,68 @@ export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestr
}
}
private mapHelp(): void {
const validationErrors$: Observable<Array<ValidationError>> = this.disableValidationErrors
? of([])
: this._control.stateChanges?.pipe(
map(() => this.currentValidationErrors()),
startWith([]),
) || of([]);
const childrenErrors$: Observable<boolean> = this._errorChildren.changes.pipe(
map(() => {
return this._errorChildren.length > 0;
}),
startWith(false),
);
this.help$ = combineLatest([validationErrors$, childrenErrors$]).pipe(
map((combined) => {
return combined[0].length >= 1
? <Help>{
type: 'errors',
validationErrors: combined[0],
}
: combined[1]
? <Help>{
type: 'errors',
}
: <Help>{
type: 'hints',
validationErrors: undefined,
};
}),
);
this._changeDetectorRef.markForCheck();
}
private currentValidationErrors(): Array<ValidationError> {
return (
Object.entries(this._control.ngControl?.control?.errors || [])
?.filter(this.filterErrorsProperties)
.map(this.mapToValidationError)
.filter(this.distinctFilter) || []
);
}
private filterErrorsProperties(kv: [string, any]): boolean {
return typeof kv[1] == 'object' && (kv[1] as { valid: boolean }).valid === false;
}
private mapToValidationError(kv: [string, any]): ValidationError {
return {
i18nKey: 'ERRORS.INVALID_FORMAT',
...(kv[1] as ValidationError | any),
};
}
private distinctFilter(_: ValidationError, index: number, arr: Array<ValidationError>): boolean {
return arr.findIndex((item) => item.i18nKey) === index;
}
/** Determines whether a class from the NgControl should be forwarded to the host element. */
_shouldForward(prop: keyof NgControl): boolean {
const ngControl: any = this._control ? this._control.ngControl : null;
return ngControl && ngControl[prop];
}
/** Determines whether to display hints or errors. */
_getDisplayedMessages(): 'error' | 'hint' {
return this._errorChildren && this._errorChildren.length > 0 ? 'error' : 'hint';
}
}

15
console/src/app/modules/form-field/form-field.component.html
View File

@ -1,15 +0,0 @@
<div class="cnsl-form-field-wrapper" (click)="_control.onContainerClick && _control.onContainerClick($event)">
<ng-content select="cnsl-label"></ng-content>
<div class="cnsl-rel" #inputContainer>
<ng-content></ng-content>
<ng-content select="cnslSuffix"></ng-content>
</div>
<div class="cnsl-form-field-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">
<div *ngSwitchCase="'error'" class="cnsl-form-field-error-wrapper" [@transitionMessages]="_subscriptAnimationState">
<ng-content select="cnsl-error"></ng-content>
</div>
<div *ngSwitchCase="'hint'" class="cnsl-form-field-hint-wrapper" [@transitionMessages]="_subscriptAnimationState">
<ng-content select="cnsl-hint"></ng-content>
</div>
</div>
</div>

7
console/src/app/modules/form-field/form-field.module.ts
View File

@ -1,15 +1,16 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';
import { TranslateModule } from '@ngx-translate/core';
import { LabelModule } from 'src/app/modules/label/label.module';
import { LabelComponent } from '../label/label.component';
import { CnslErrorDirective } from './error.directive';
import { CnslFormFieldComponent } from './form-field.component';
import { CnslErrorDirective } from './error/error.directive';
import { CnslFormFieldComponent } from './field/form-field.component';
@NgModule({
declarations: [CnslFormFieldComponent, CnslErrorDirective],
imports: [CommonModule, MatRippleModule, LabelModule],
imports: [CommonModule, MatRippleModule, LabelModule, TranslateModule],
exports: [CnslFormFieldComponent, LabelComponent, CnslErrorDirective],
})
export class FormFieldModule {}

73
console/src/app/modules/form-field/validators/validators.ts Normal file
View File

@ -0,0 +1,73 @@
import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
export function containsSymbolValidator(c: AbstractControl): ValidationErrors | null {
return regexpValidator(c, /[^a-z0-9]/gi, 'ERRORS.SYMBOLERROR');
}
export function containsNumberValidator(c: AbstractControl): ValidationErrors | null {
return regexpValidator(c, /[0-9]/g, 'ERRORS.NUMBERERROR');
}
export function containsUpperCaseValidator(c: AbstractControl): ValidationErrors | null {
return regexpValidator(c, /[A-Z]/g, 'ERRORS.UPPERCASEMISSING');
}
export function containsLowerCaseValidator(c: AbstractControl): ValidationErrors | null {
return regexpValidator(c, /[a-z]/g, 'ERRORS.LOWERCASEMISSING');
}
export function phoneValidator(c: AbstractControl): ValidationErrors | null {
return regexpValidator(c, /^($|(\+|00)[0-9 ]+$)/, 'ERRORS.PHONE');
}
export function requiredValidator(c: AbstractControl): ValidationErrors | null {
return i18nErr(Validators.required(c), 'ERRORS.REQUIRED');
}
export function emailValidator(c: AbstractControl): ValidationErrors | null {
return i18nErr(Validators.email(c), 'ERRORS.NOTANEMAIL');
}
export function minLengthValidator(minLength: number): ValidatorFn {
return (c: AbstractControl): ValidationErrors | null => {
return i18nErr(Validators.minLength(minLength)(c), 'ERRORS.MINLENGTH', { requiredLength: minLength });
};
}
export function passwordConfirmValidator(passwordControlName: string = 'password') {
return (c: AbstractControl): ValidationErrors | null => {
if (!c.parent || !c) {
return null;
}
const pwd = c.parent.get(passwordControlName);
const cpwd = c;
if (!pwd || !cpwd) {
return null;
}
if (pwd.value !== cpwd.value) {
return i18nErr(undefined, 'ERRORS.PWNOTEQUAL');
}
return null;
};
}
function regexpValidator(c: AbstractControl, regexp: RegExp, i18nKey: string): ValidationErrors | null {
return !c.value || regexp.test(c.value) ? null : i18nErr({ invalid: true }, i18nKey, { regexp: regexp });
}
function i18nErr(err: ValidationErrors | null | undefined, i18nKey: string, params?: any): ValidationErrors | null {
if (err === null) {
return null;
} else {
return {
...err,
invalid: true,
[i18nKey.toLowerCase().replaceAll('.', '')]: {
valid: false,
i18nKey: i18nKey,
params: params,
},
};
}
}

24
console/src/app/modules/password-complexity-view/password-complexity-view.component.html
View File

@ -28,23 +28,23 @@
</span>
</div>
<div class="val" *ngIf="this.policy.hasSymbol">
<i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
<i *ngIf="password?.pristine || password?.errors?.errorssymbolerror" class="las la-times red"></i>
<i *ngIf="password?.dirty && !password?.errors?.errorssymbolerror" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'ERRORS.SYMBOLERROR' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasNumber">
<i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
<i *ngIf="password?.pristine || password?.errors?.errorsnumbererror" class="las la-times red"></i>
<i *ngIf="password?.dirty && !password?.errors?.errorsnumbererror" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'ERRORS.NUMBERERROR' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasUppercase">
<i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
<i *ngIf="password?.pristine || password?.errors?.errorsuppercasemissing" class="las la-times red"></i>
<i *ngIf="password?.dirty && !password?.errors?.errorsuppercasemissing" class="las la-check green"></i>
<span class="cnsl-secondary-text"> {{ 'ERRORS.UPPERCASEMISSING' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasLowercase">
<i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
<span class="cnsl-secondary-text">{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
<i *ngIf="password?.pristine || password?.errors?.errorslowercasemissing" class="las la-times red"></i>
<i *ngIf="password?.dirty && !password?.errors?.errorslowercasemissing" class="las la-check green"></i>
<span class="cnsl-secondary-text">{{ 'ERRORS.LOWERCASEMISSING' | translate }}</span>
</div>
</div>

13
console/src/app/modules/policies/login-policy/login-policy.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
import { take } from 'rxjs';
@ -18,6 +18,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { InfoSectionType } from '../../info-section/info-section.component';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
@ -45,11 +46,11 @@ export class LoginPolicyComponent implements OnInit {
public InfoSectionType: any = InfoSectionType;
public PasswordlessType: any = PasswordlessType;
public lifetimeForm: UntypedFormGroup = this.fb.group({
passwordCheckLifetime: [{ disabled: true }, [Validators.required]],
externalLoginCheckLifetime: [{ disabled: true }, [Validators.required]],
mfaInitSkipLifetime: [{ disabled: true }, [Validators.required]],
secondFactorCheckLifetime: [{ disabled: true }, [Validators.required]],
multiFactorCheckLifetime: [{ disabled: true }, [Validators.required]],
passwordCheckLifetime: [{ disabled: true }, [requiredValidator]],
externalLoginCheckLifetime: [{ disabled: true }, [requiredValidator]],
mfaInitSkipLifetime: [{ disabled: true }, [requiredValidator]],
secondFactorCheckLifetime: [{ disabled: true }, [requiredValidator]],
multiFactorCheckLifetime: [{ disabled: true }, [requiredValidator]],
});
constructor(
private toast: ToastService,

9
console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.ts
View File

@ -1,10 +1,11 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import {
MatLegacyDialog as MatDialog,
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import {
AddSMSProviderTwilioRequest,
UpdateSMSProviderTwilioRequest,
@ -44,15 +45,15 @@ export class DialogAddSMSProviderComponent {
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.twilioForm = this.fb.group({
sid: ['', [Validators.required]],
senderNumber: ['', [Validators.required]],
sid: ['', [requiredValidator]],
senderNumber: ['', [requiredValidator]],
});
this.smsProviders = data.smsProviders;
if (!!this.twilio) {
this.twilioForm.patchValue(this.twilio);
} else {
this.twilioForm.addControl('token', new FormControl('', Validators.required));
this.twilioForm.addControl('token', new FormControl('', requiredValidator));
}
}

13
console/src/app/modules/policies/notification-settings/notification-settings.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { take } from 'rxjs';
import {
@ -15,6 +15,7 @@ import { DebugNotificationProvider, SMSProvider, SMSProviderConfigState } from '
import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { InfoSectionType } from '../../info-section/info-section.component';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
@ -55,11 +56,11 @@ export class NotificationSettingsComponent implements OnInit {
private authService: GrpcAuthService,
) {
this.form = this.fb.group({
senderAddress: [{ disabled: true, value: '' }, [Validators.required]],
senderName: [{ disabled: true, value: '' }, [Validators.required]],
tls: [{ disabled: true, value: true }, [Validators.required]],
hostAndPort: [{ disabled: true, value: '' }, [Validators.required]],
user: [{ disabled: true, value: '' }, [Validators.required]],
senderAddress: [{ disabled: true, value: '' }, [requiredValidator]],
senderName: [{ disabled: true, value: '' }, [requiredValidator]],
tls: [{ disabled: true, value: true }, [requiredValidator]],
hostAndPort: [{ disabled: true, value: '' }, [requiredValidator]],
user: [{ disabled: true, value: '' }, [requiredValidator]],
});
}

11
console/src/app/modules/policies/oidc-configuration/oidc-configuration.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
import { take } from 'rxjs';
import {
@ -12,6 +12,7 @@ import { OIDCSettings } from 'src/app/proto/generated/zitadel/settings_pb';
import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
@Component({
selector: 'cnsl-oidc-configuration',
@ -31,10 +32,10 @@ export class OIDCConfigurationComponent implements OnInit {
private authService: GrpcAuthService,
) {
this.form = this.fb.group({
accessTokenLifetime: [{ disabled: true }, [Validators.required]],
idTokenLifetime: [{ disabled: true }, [Validators.required]],
refreshTokenExpiration: [{ disabled: true }, [Validators.required]],
refreshTokenIdleExpiration: [{ disabled: true }, [Validators.required]],
accessTokenLifetime: [{ disabled: true }, [requiredValidator]],
idTokenLifetime: [{ disabled: true }, [requiredValidator]],
refreshTokenExpiration: [{ disabled: true }, [requiredValidator]],
refreshTokenIdleExpiration: [{ disabled: true }, [requiredValidator]],
});
}

17
console/src/app/modules/policies/secret-generator/dialog-add-secret-generator/dialog-add-secret-generator.component.ts
View File

@ -1,10 +1,11 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { UpdateSecretGeneratorRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
@ -33,13 +34,13 @@ export class DialogAddSecretGeneratorComponent {
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.specsForm = this.fb.group({
generatorType: [SecretGeneratorType.SECRET_GENERATOR_TYPE_APP_SECRET, [Validators.required]],
expiry: [1, [Validators.required]],
includeDigits: [true, [Validators.required]],
includeLowerLetters: [true, [Validators.required]],
includeSymbols: [true, [Validators.required]],
includeUpperLetters: [true, [Validators.required]],
length: [6, [Validators.required]],
generatorType: [SecretGeneratorType.SECRET_GENERATOR_TYPE_APP_SECRET, [requiredValidator]],
expiry: [1, [requiredValidator]],
includeDigits: [true, [requiredValidator]],
includeLowerLetters: [true, [requiredValidator]],
includeSymbols: [true, [requiredValidator]],
includeUpperLetters: [true, [requiredValidator]],
length: [6, [requiredValidator]],
});
this.generatorType?.setValue(data.type);

5
console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts
View File

@ -1,11 +1,12 @@
import { Component, Inject } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../form-field/validators/validators';
@Component({
selector: 'cnsl-project-role-detail-dialog',
@ -24,7 +25,7 @@ export class ProjectRoleDetailDialogComponent {
) {
this.projectId = data.projectId;
this.formGroup = new UntypedFormGroup({
key: new UntypedFormControl({ value: '', disabled: true }, [Validators.required]),
key: new UntypedFormControl({ value: '', disabled: true }, [requiredValidator]),
displayName: new UntypedFormControl(''),
group: new UntypedFormControl(''),
});

15
console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs';
@ -20,6 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -51,12 +52,12 @@ export class ProviderGithubESComponent {
breadcrumbService: BreadcrumbService,
) {
this.form = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
clientId: new UntypedFormControl('', [Validators.required]),
clientSecret: new UntypedFormControl('', [Validators.required]),
authorizationEndpoint: new UntypedFormControl('', [Validators.required]),
tokenEndpoint: new UntypedFormControl('', [Validators.required]),
userEndpoint: new UntypedFormControl('', [Validators.required]),
name: new UntypedFormControl('', [requiredValidator]),
clientId: new UntypedFormControl('', [requiredValidator]),
clientSecret: new UntypedFormControl('', [requiredValidator]),
authorizationEndpoint: new UntypedFormControl('', [requiredValidator]),
tokenEndpoint: new UntypedFormControl('', [requiredValidator]),
userEndpoint: new UntypedFormControl('', [requiredValidator]),
scopesList: new UntypedFormControl(['openid', 'profile', 'email'], []),
});

7
console/src/app/modules/providers/provider-github/provider-github.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs';
@ -20,6 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -53,8 +54,8 @@ export class ProviderGithubComponent {
) {
this.form = new FormGroup({
name: new FormControl('', []),
clientId: new FormControl('', [Validators.required]),
clientSecret: new FormControl('', [Validators.required]),
clientId: new FormControl('', [requiredValidator]),
clientSecret: new FormControl('', [requiredValidator]),
scopesList: new FormControl(['openid', 'profile', 'email'], []),
});

7
console/src/app/modules/providers/provider-google/provider-google.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs';
@ -20,6 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -53,8 +54,8 @@ export class ProviderGoogleComponent {
) {
this.form = new FormGroup({
name: new FormControl('', []),
clientId: new FormControl('', [Validators.required]),
clientSecret: new FormControl('', [Validators.required]),
clientId: new FormControl('', [requiredValidator]),
clientSecret: new FormControl('', [requiredValidator]),
scopesList: new FormControl(['openid', 'profile', 'email'], []),
});

13
console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';
import {
@ -19,6 +19,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -82,11 +83,11 @@ export class ProviderJWTComponent {
});
this.form = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
headerName: new UntypedFormControl('', [Validators.required]),
issuer: new UntypedFormControl('', [Validators.required]),
jwtEndpoint: new UntypedFormControl('', [Validators.required]),
keysEndpoint: new UntypedFormControl('', [Validators.required]),
name: new UntypedFormControl('', [requiredValidator]),
headerName: new UntypedFormControl('', [requiredValidator]),
issuer: new UntypedFormControl('', [requiredValidator]),
jwtEndpoint: new UntypedFormControl('', [requiredValidator]),
keysEndpoint: new UntypedFormControl('', [requiredValidator]),
});
}

17
console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
import { ActivatedRoute, Router } from '@angular/router';
import { take } from 'rxjs';
@ -20,6 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -52,13 +53,13 @@ export class ProviderOAuthComponent {
breadcrumbService: BreadcrumbService,
) {
this.form = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
clientId: new UntypedFormControl('', [Validators.required]),
clientSecret: new UntypedFormControl('', [Validators.required]),
authorizationEndpoint: new UntypedFormControl('', [Validators.required]),
tokenEndpoint: new UntypedFormControl('', [Validators.required]),
userEndpoint: new UntypedFormControl('', [Validators.required]),
idAttribute: new UntypedFormControl('', [Validators.required]),
name: new UntypedFormControl('', [requiredValidator]),
clientId: new UntypedFormControl('', [requiredValidator]),
clientSecret: new UntypedFormControl('', [requiredValidator]),
authorizationEndpoint: new UntypedFormControl('', [requiredValidator]),
tokenEndpoint: new UntypedFormControl('', [requiredValidator]),
userEndpoint: new UntypedFormControl('', [requiredValidator]),
idAttribute: new UntypedFormControl('', [requiredValidator]),
scopesList: new UntypedFormControl(['openid', 'profile', 'email'], []),
});

11
console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts
View File

@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, Injector, Type } from '@angular/core';
import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs';
@ -20,6 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { requiredValidator } from '../../form-field/validators/validators';
import { PolicyComponentServiceType } from '../../policies/policy-component-types.enum';
@ -51,10 +52,10 @@ export class ProviderOIDCComponent {
breadcrumbService: BreadcrumbService,
) {
this.oidcFormGroup = new UntypedFormGroup({
name: new UntypedFormControl('', [Validators.required]),
clientId: new UntypedFormControl('', [Validators.required]),
clientSecret: new UntypedFormControl('', [Validators.required]),
issuer: new UntypedFormControl('', [Validators.required]),
name: new UntypedFormControl('', [requiredValidator]),
clientId: new UntypedFormControl('', [requiredValidator]),
clientSecret: new UntypedFormControl('', [requiredValidator]),
issuer: new UntypedFormControl('', [requiredValidator]),
scopesList: new UntypedFormControl(['openid', 'profile', 'email'], []),
});

7
console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts
View File

@ -1,9 +1,10 @@
import { Component, Inject } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import {
MatLegacyDialogRef as MatDialogRef,
MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
} from '@angular/material/legacy-dialog';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { Action, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
import { SetTriggerActionsRequest } from 'src/app/proto/generated/zitadel/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
@ -34,8 +35,8 @@ export class AddFlowDialogComponent {
}
this.form = this.fb.group({
triggerType: [data.triggerType ? data.triggerType : '', [Validators.required]],
actionIdsList: [data.actions ? (data.actions as Action.AsObject[]).map((a) => a.id) : [], [Validators.required]],
triggerType: [data.triggerType ? data.triggerType : '', [requiredValidator]],
actionIdsList: [data.actions ? (data.actions as Action.AsObject[]).map((a) => a.id) : [], [requiredValidator]],
});
this.getActionIds();

32
console/src/app/pages/org-create/org-create.component.html
View File

@ -57,37 +57,22 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
<input cnslInput formControlName="email" required />
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
@ -99,9 +84,6 @@
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
@ -109,9 +91,6 @@
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
@ -148,10 +127,6 @@
<cnsl-form-field class="pwd" *ngIf="password">
<cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="pwd" *ngIf="confirmPassword">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
@ -162,13 +137,6 @@
formControlName="confirmPassword"
type="password"
/>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</form>
</ng-container>

58
console/src/app/pages/org-create/org-create.component.ts
View File

@ -4,7 +4,15 @@ import { Component } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
import { Router } from '@angular/router';
import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
import {
containsLowerCaseValidator,
containsNumberValidator,
containsSymbolValidator,
containsUpperCaseValidator,
minLengthValidator,
passwordConfirmValidator,
requiredValidator,
} from 'src/app/modules/form-field/validators/validators';
import { SetUpOrgRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { Gender } from 'src/app/proto/generated/zitadel/user_pb';
@ -13,26 +21,6 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
function passwordConfirmValidator(c: AbstractControl): any {
if (!c.parent || !c) {
return;
}
const pwd = c.parent.get('password');
const cpwd = c.parent.get('confirmPassword');
if (!pwd || !cpwd) {
return;
}
if (pwd.value !== cpwd.value) {
return {
invalid: true,
notequal: {
valid: false,
},
};
}
}
@Component({
selector: 'cnsl-org-create',
templateUrl: './org-create.component.html',
@ -49,7 +37,7 @@ function passwordConfirmValidator(c: AbstractControl): any {
})
export class OrgCreateComponent {
public orgForm: UntypedFormGroup = this.fb.group({
name: ['', [Validators.required]],
name: ['', [requiredValidator]],
domain: [''],
});
@ -133,10 +121,10 @@ export class OrgCreateComponent {
private initForm(): void {
this.userForm = this.fb.group({
userName: ['', [Validators.required]],
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
email: ['', [Validators.required]],
userName: ['', [requiredValidator]],
firstName: ['', [requiredValidator]],
lastName: ['', [requiredValidator]],
email: ['', [requiredValidator]],
isVerified: [false, []],
gender: [''],
nickName: [''],
@ -145,7 +133,7 @@ export class OrgCreateComponent {
}
public initPwdValidators(): void {
const validators: Validators[] = [Validators.required];
const validators: Validators[] = [requiredValidator];
if (this.usePassword) {
this.mgmtService.getDefaultPasswordComplexityPolicy().then((data) => {
@ -153,23 +141,23 @@ export class OrgCreateComponent {
this.policy = data.policy;
if (this.policy.minLength) {
validators.push(Validators.minLength(this.policy.minLength));
validators.push(minLengthValidator(this.policy.minLength));
}
if (this.policy.hasLowercase) {
validators.push(lowerCaseValidator);
validators.push(containsLowerCaseValidator);
}
if (this.policy.hasUppercase) {
validators.push(upperCaseValidator);
validators.push(containsUpperCaseValidator);
}
if (this.policy.hasNumber) {
validators.push(numberValidator);
validators.push(containsNumberValidator);
}
if (this.policy.hasSymbol) {
validators.push(symbolValidator);
validators.push(containsSymbolValidator);
}
const pwdValidators = [...validators] as ValidatorFn[];
const confirmPwdValidators = [...validators, passwordConfirmValidator] as ValidatorFn[];
const confirmPwdValidators = [requiredValidator, passwordConfirmValidator()] as ValidatorFn[];
this.pwdForm = this.fb.group({
password: ['', pwdValidators],
confirmPassword: ['', confirmPwdValidators],
@ -189,13 +177,13 @@ export class OrgCreateComponent {
this.createSteps = 1;
this.orgForm = this.fb.group({
name: ['', [Validators.required]],
name: ['', [requiredValidator]],
});
} else {
this.createSteps = 2;
this.orgForm = this.fb.group({
name: ['', [Validators.required]],
name: ['', [requiredValidator]],
domain: [''],
});
}

1
console/src/app/pages/projects/apps/app-create/app-create.component.html
View File

@ -37,7 +37,6 @@
<cnsl-form-field class="name-formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial formControlName="name" />
<span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
</cnsl-form-field>
<p class="step-title">{{ 'APP.TYPETITLE' | translate }}</p>

17
console/src/app/pages/projects/apps/app-create/app-create.component.ts
View File

@ -2,13 +2,14 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { StepperSelectionEvent } from '@angular/cdk/stepper';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Buffer } from 'buffer';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import {
APIAuthMethodType,
OIDCAppType,
@ -127,8 +128,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
private breadcrumbService: BreadcrumbService,
) {
this.form = this.fb.group({
name: ['', [Validators.required]],
appType: ['', [Validators.required]],
name: ['', [requiredValidator]],
appType: ['', [requiredValidator]],
// apptype OIDC
responseTypesList: ['', []],
grantTypesList: ['', []],
@ -140,8 +141,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.initForm();
this.firstFormGroup = this.fb.group({
name: ['', [Validators.required]],
appType: [WEB_TYPE, [Validators.required]],
name: ['', [requiredValidator]],
appType: [WEB_TYPE, [requiredValidator]],
});
this.samlConfigForm = this.fb.group({
@ -192,7 +193,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
});
this.secondFormGroup = this.fb.group({
authMethod: [this.authMethods[0].key, [Validators.required]],
authMethod: [this.authMethods[0].key, [requiredValidator]],
});
this.secondFormGroup.valueChanges.subscribe((form) => {
@ -276,8 +277,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
public setDevFormValidators(): void {
if (this.isDevOIDC) {
const grantTypesControl = new UntypedFormControl('', [Validators.required]);
const responseTypesControl = new UntypedFormControl('', [Validators.required]);
const grantTypesControl = new UntypedFormControl('', [requiredValidator]);
const responseTypesControl = new UntypedFormControl('', [requiredValidator]);
this.form.addControl('grantTypesList', grantTypesControl);
this.form.addControl('responseTypesList', responseTypesControl);

7
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts
View File

@ -1,9 +1,10 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
import { UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { BulkAddProjectRolesRequest } from 'src/app/proto/generated/zitadel/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@ -32,7 +33,7 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
public formArray!: UntypedFormArray;
public formGroup: UntypedFormGroup = this.fb.group({
key: new UntypedFormControl('', [Validators.required]),
key: new UntypedFormControl('', [requiredValidator]),
displayName: new UntypedFormControl(''),
group: new UntypedFormControl(''),
});
@ -50,7 +51,7 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
public addEntry(): void {
const newGroup = this.fb.group({
key: new UntypedFormControl('', [Validators.required]),
key: new UntypedFormControl('', [requiredValidator]),
displayName: new UntypedFormControl(''),
group: new UntypedFormControl(''),
});

9
console/src/app/pages/users/user-create-machine/user-create-machine.component.html
View File

@ -12,19 +12,10 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>

7
console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
View File

@ -1,8 +1,9 @@
import { Location } from '@angular/common';
import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { minLengthValidator, requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { AddMachineUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
import { AccessTokenType } from 'src/app/proto/generated/zitadel/user_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
@ -45,8 +46,8 @@ export class UserCreateMachineComponent implements OnDestroy {
private initForm(): void {
this.userForm = this.fb.group({
userName: ['', [Validators.required, Validators.minLength(2)]],
name: ['', [Validators.required]],
userName: ['', [requiredValidator, minLengthValidator(2)]],
name: ['', [requiredValidator]],
description: ['', []],
accessTokenType: [AccessTokenType.ACCESS_TOKEN_TYPE_BEARER, []],
});

42
console/src/app/pages/users/user-create/user-create.component.html
View File

@ -15,12 +15,6 @@
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
<input cnslInput matRipple formControlName="email" required />
<span cnslError *ngIf="email?.invalid && !email?.errors?.required">
{{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
</span>
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
@ -31,35 +25,19 @@
[ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
/>
<span #suffix *ngIf="envSuffix" cnslSuffix>{{ envSuffix }}</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
@ -84,10 +62,6 @@
<cnsl-form-field *ngIf="password">
<cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field *ngIf="confirmPassword">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
@ -98,13 +72,6 @@
formControlName="confirmPassword"
type="password"
/>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</div>
</form>
@ -120,9 +87,6 @@
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
@ -130,9 +94,6 @@
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
</div>
@ -154,9 +115,6 @@
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}" />
<span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
</div>

63
console/src/app/pages/users/user-create/user-create.component.ts
View File

@ -13,27 +13,17 @@ import { ToastService } from 'src/app/services/toast.service';
import { CountryCallingCodesService, CountryPhoneCode } from 'src/app/services/country-calling-codes.service';
import { formatPhone } from 'src/app/utils/formatPhone';
import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from '../../validators';
function passwordConfirmValidator(c: AbstractControl): any {
if (!c.parent || !c) {
return;
}
const pwd = c.parent.get('password');
const cpwd = c.parent.get('confirmPassword');
if (!pwd || !cpwd) {
return;
}
if (pwd.value !== cpwd.value) {
return {
invalid: true,
notequal: {
valid: false,
},
};
}
}
import {
containsLowerCaseValidator,
containsNumberValidator,
containsSymbolValidator,
containsUpperCaseValidator,
emailValidator,
minLengthValidator,
passwordConfirmValidator,
phoneValidator,
requiredValidator,
} from '../../../modules/form-field/validators/validators';
@Component({
selector: 'cnsl-user-create',
@ -113,40 +103,40 @@ export class UserCreateComponent implements OnInit, OnDestroy {
private initForm(): void {
this.userForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
userName: ['', [Validators.required, Validators.minLength(2)]],
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [requiredValidator, emailValidator]],
userName: ['', [requiredValidator, minLengthValidator(2)]],
firstName: ['', requiredValidator],
lastName: ['', requiredValidator],
nickName: [''],
gender: [],
preferredLanguage: [''],
phone: [''],
phone: ['', phoneValidator],
isVerified: [false, []],
});
const validators: Validators[] = [Validators.required];
const validators: Validators[] = [requiredValidator];
this.mgmtService.getPasswordComplexityPolicy().then((data) => {
if (data.policy) {
this.policy = data.policy;
if (this.policy.minLength) {
validators.push(Validators.minLength(this.policy.minLength));
validators.push(minLengthValidator(this.policy.minLength));
}
if (this.policy.hasLowercase) {
validators.push(lowerCaseValidator);
validators.push(containsLowerCaseValidator);
}
if (this.policy.hasUppercase) {
validators.push(upperCaseValidator);
validators.push(containsUpperCaseValidator);
}
if (this.policy.hasNumber) {
validators.push(numberValidator);
validators.push(containsNumberValidator);
}
if (this.policy.hasSymbol) {
validators.push(symbolValidator);
validators.push(containsSymbolValidator);
}
const pwdValidators = [...validators] as ValidatorFn[];
const confirmPwdValidators = [...validators, passwordConfirmValidator] as ValidatorFn[];
const confirmPwdValidators = [requiredValidator, passwordConfirmValidator()] as ValidatorFn[];
this.pwdForm = this.fb.group({
password: ['', pwdValidators],
@ -203,14 +193,13 @@ export class UserCreateComponent implements OnInit, OnDestroy {
public setCountryCallingCode(): void {
let value = (this.phone?.value as string) || '';
this.phone?.setValue('+' + this.selected?.countryCallingCode + ' ' + value.replace(/\+[0-9]*\s/, ''));
this.countryPhoneCodes.forEach((code) => (value = value.replace(`+${code.countryCallingCode}`, '')));
value = value.trim();
this.phone?.setValue('+' + this.selected?.countryCallingCode + ' ' + value);
}
ngOnInit(): void {
// Set default selected country for phone numbers
const defaultCountryCallingCode = 'CH';
this.countryPhoneCodes = this.countryCallingCodesService.getCountryCallingCodes();
this.selected = this.countryPhoneCodes.find((code) => code.countryCode === defaultCountryCallingCode);
}
ngOnDestroy(): void {

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

@ -1,12 +1,14 @@
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 { ActivatedRoute, Params } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Buffer } from 'buffer';
import { Subscription, take } from 'rxjs';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { phoneValidator, requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { MetadataDialogComponent } from 'src/app/modules/metadata/metadata-dialog/metadata-dialog.component';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
@ -304,6 +306,7 @@ export class AuthUserDetailComponent implements OnDestroy {
descriptionKey: 'USER.LOGINMETHODS.PHONE.EDITDESC',
value: this.user?.human?.phone?.phone,
type: type,
validator: Validators.compose([phoneValidator, requiredValidator]),
},
width: '400px',
});

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

@ -3,6 +3,7 @@
</h1>
<p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
<div mat-dialog-content>
<form [formGroup]="dialogForm" (ngSubmit)="closeDialogWithValue()">
<div class="phone-grid">
<cnsl-form-field *ngIf="isPhone">
<cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
@ -19,13 +20,10 @@
<cnsl-label>{{ data.labelKey | translate }}</cnsl-label>
<input
cnslInput
[formControl]="valueControl"
[formControlName]="controlKey"
matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}"
[matTooltipDisabled]="!isPhone"
/>
<span cnslError *ngIf="valueControl?.invalid && valueControl?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
@ -37,6 +35,7 @@
<span>{{ data.isVerifiedTextDescKey | translate }}</span>
</cnsl-info-section>
</ng-container>
</form>
</div>
<div mat-dialog-actions class="action">
<button mat-stroked-button class="ok-button" (click)="closeDialog()">
@ -44,7 +43,7 @@
</button>
<button
[disabled]="valueControl.invalid"
[disabled]="dialogForm.invalid"
cdkFocusInitial
color="primary"
mat-raised-button

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

@ -1,9 +1,12 @@
import { KeyValuePipe } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { UntypedFormControl, Validators } from '@angular/forms';
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 { TranslateService } from '@ngx-translate/core';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { CountryCallingCodesService, CountryPhoneCode } from 'src/app/services/country-calling-codes.service';
import { formatPhone } from 'src/app/utils/formatPhone';
@ -13,15 +16,16 @@ export enum EditDialogType {
}
@Component({
selector: 'cnsl-edit-email-dialog',
selector: 'cnsl-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.scss'],
})
export class EditDialogComponent implements OnInit {
public controlKey = 'editingField';
public isPhone: boolean = false;
public isVerified: boolean = false;
public phoneCountry: string = 'CH';
public valueControl: UntypedFormControl = new UntypedFormControl(['', [Validators.required]]);
public dialogForm!: UntypedFormGroup;
public EditDialogType: any = EditDialogType;
public selected: CountryPhoneCode | undefined;
public countryPhoneCodes: CountryPhoneCode[] = [];
@ -29,25 +33,33 @@ export class EditDialogComponent implements OnInit {
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private countryCallingCodesService: CountryCallingCodesService,
private translateSvc: TranslateService,
private kvPipe: KeyValuePipe,
) {
this.valueControl.setValue(data.value);
if (data.type === EditDialogType.PHONE) {
this.isPhone = true;
}
this.dialogForm = new FormGroup({
[this.controlKey]: new UntypedFormControl(data.value, data.validator || requiredValidator),
});
}
public setCountryCallingCode(): void {
let value = (this.valueControl?.value as string) || '';
this.valueControl?.setValue('+' + this.selected?.countryCallingCode + ' ' + value.replace(/\+[0-9]*\s/, ''));
console.log(this);
let value = (this.dialogForm.controls[this.controlKey]?.value as string) || '';
this.countryPhoneCodes.forEach((code) => (value = value.replace(`+${code.countryCallingCode}`, '')));
value = value.trim();
this.dialogForm.controls[this.controlKey]?.setValue('+' + this.selected?.countryCallingCode + ' ' + value);
console.log(this);
}
ngOnInit(): void {
if (this.isPhone) {
// Get country phone codes and set selected flag to guessed country or default country
this.countryPhoneCodes = this.countryCallingCodesService.getCountryCallingCodes();
const phoneNumber = formatPhone(this.valueControl?.value);
const phoneNumber = formatPhone(this.dialogForm.controls[this.controlKey]?.value);
this.selected = this.countryPhoneCodes.find((code) => code.countryCode === phoneNumber.country);
this.valueControl.setValue(phoneNumber.phone);
this.dialogForm.controls[this.controlKey].setValue(phoneNumber.phone);
}
}
@ -56,6 +68,10 @@ export class EditDialogComponent implements OnInit {
}
closeDialogWithValue(): void {
this.dialogRef.close({ value: this.valueControl.value, isVerified: this.isVerified });
this.dialogRef.close({ value: this.dialogForm.controls[this.controlKey].value, isVerified: this.isVerified });
}
public get ctrl() {
return this.dialogForm.get(this.controlKey);
}
}

9
console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html
View File

@ -3,19 +3,10 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>

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

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { AccessTokenType, Human, Machine } from 'src/app/proto/generated/zitadel/user_pb';
@Component({
@ -25,10 +26,10 @@ export class DetailFormMachineComponent implements OnInit, OnDestroy {
constructor(private fb: UntypedFormBuilder) {
this.machineForm = this.fb.group({
userName: [{ value: '', disabled: true }, [Validators.required]],
name: [{ value: '', disabled: this.disabled }, Validators.required],
userName: [{ value: '', disabled: true }, [requiredValidator]],
name: [{ value: '', disabled: this.disabled }, requiredValidator],
description: [{ value: '', disabled: this.disabled }],
accessTokenType: [AccessTokenType.ACCESS_TOKEN_TYPE_BEARER, [Validators.required]],
accessTokenType: [AccessTokenType.ACCESS_TOKEN_TYPE_BEARER, [requiredValidator]],
});
}

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

@ -1,7 +1,8 @@
import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-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';
import { ProfilePictureComponent } from './profile-picture/profile-picture.component';
@ -30,11 +31,11 @@ export class DetailFormComponent implements OnDestroy, OnChanges {
constructor(private fb: UntypedFormBuilder, private dialog: MatDialog) {
this.profileForm = this.fb.group({
userName: [{ value: '', disabled: true }, [Validators.required]],
firstName: [{ value: '', disabled: this.disabled }, Validators.required],
lastName: [{ value: '', disabled: this.disabled }, Validators.required],
userName: [{ value: '', disabled: true }, [requiredValidator]],
firstName: [{ value: '', disabled: this.disabled }, requiredValidator],
lastName: [{ value: '', disabled: this.disabled }, requiredValidator],
nickName: [{ value: '', disabled: this.disabled }],
displayName: [{ value: '', disabled: this.disabled }, Validators.required],
displayName: [{ value: '', disabled: this.disabled }, requiredValidator],
gender: [{ value: 0, disabled: this.disabled }],
preferredLanguage: [{ value: '', disabled: this.disabled }],
});
@ -42,11 +43,11 @@ export class DetailFormComponent implements OnDestroy, OnChanges {
public ngOnChanges(): void {
this.profileForm = this.fb.group({
userName: [{ value: '', disabled: true }, [Validators.required]],
firstName: [{ value: '', disabled: this.disabled }, Validators.required],
lastName: [{ value: '', disabled: this.disabled }, Validators.required],
userName: [{ value: '', disabled: true }, [requiredValidator]],
firstName: [{ value: '', disabled: this.disabled }, requiredValidator],
lastName: [{ value: '', disabled: this.disabled }, requiredValidator],
nickName: [{ value: '', disabled: this.disabled }],
displayName: [{ value: '', disabled: this.disabled }, Validators.required],
displayName: [{ value: '', disabled: this.disabled }, requiredValidator],
gender: [{ value: 0, disabled: this.disabled }],
preferredLanguage: [{ value: '', disabled: this.disabled }],
});

17
console/src/app/pages/users/user-detail/password/password.component.html
View File

@ -17,17 +17,10 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="password" formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="passwordRepeat" formControlName="confirmPassword" type="password" />
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</div>
@ -58,9 +51,6 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PASSWORD.OLD' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="password" type="password" formControlName="currentPassword" />
<span cnslError *ngIf="currentPassword?.errors?.required">
{{ 'USER.PASSWORD.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<div class="validation between" *ngIf="this.policy">
@ -71,10 +61,6 @@
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="new password" type="password" formControlName="newPassword" />
<span cnslError *ngIf="newPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
@ -85,9 +71,6 @@
type="password"
formControlName="confirmPassword"
/>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</div>
</div>

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

@ -2,28 +2,21 @@ import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Subject, Subscription, take, takeUntil } from 'rxjs';
import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
import {
containsLowerCaseValidator,
containsNumberValidator,
containsSymbolValidator,
containsUpperCaseValidator,
minLengthValidator,
passwordConfirmValidator,
requiredValidator,
} from 'src/app/modules/form-field/validators/validators';
import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
function passwordConfirmValidator(c: AbstractControl): any {
if (!c.parent || !c) {
return;
}
const pwd = c.parent.get('password');
const cpwd = c.parent.get('confirmPassword');
if (!pwd || !cpwd) {
return;
}
if (pwd.value !== cpwd.value) {
return { invalid: true, notequal: 'Password is not equal' };
}
}
@Component({
selector: 'cnsl-password',
templateUrl: './password.component.html',
@ -76,7 +69,7 @@ export class PasswordComponent implements OnDestroy {
});
}
const validators: Validators[] = [Validators.required];
const validators: Validators[] = [requiredValidator];
this.authService
.getMyPasswordComplexityPolicy()
.then((resp) => {
@ -84,19 +77,19 @@ export class PasswordComponent implements OnDestroy {
this.policy = resp.policy;
}
if (this.policy.minLength) {
validators.push(Validators.minLength(this.policy.minLength));
validators.push(minLengthValidator(this.policy.minLength));
}
if (this.policy.hasLowercase) {
validators.push(lowerCaseValidator);
validators.push(containsLowerCaseValidator);
}
if (this.policy.hasUppercase) {
validators.push(upperCaseValidator);
validators.push(containsUpperCaseValidator);
}
if (this.policy.hasNumber) {
validators.push(numberValidator);
validators.push(containsNumberValidator);
}
if (this.policy.hasSymbol) {
validators.push(symbolValidator);
validators.push(containsSymbolValidator);
}
this.setupForm(validators);
@ -117,13 +110,13 @@ export class PasswordComponent implements OnDestroy {
if (this.userId) {
this.passwordForm = this.fb.group({
password: ['', validators],
confirmPassword: ['', [...validators, passwordConfirmValidator]],
confirmPassword: ['', [requiredValidator, passwordConfirmValidator()]],
});
} else {
this.passwordForm = this.fb.group({
currentPassword: ['', Validators.required],
currentPassword: ['', requiredValidator],
newPassword: ['', validators],
confirmPassword: ['', [...validators, passwordConfirmValidator]],
confirmPassword: ['', [requiredValidator, passwordConfirmValidator()]],
});
}
}

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

@ -1,12 +1,14 @@
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 { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Buffer } from 'buffer';
import { take } from 'rxjs/operators';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { phoneValidator, requiredValidator } from 'src/app/modules/form-field/validators/validators';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { MetadataDialogComponent } from 'src/app/modules/metadata/metadata-dialog/metadata-dialog.component';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
@ -461,6 +463,7 @@ export class UserDetailComponent implements OnInit {
descriptionKey: 'USER.LOGINMETHODS.PHONE.EDITDESC',
value: this.user.human?.phone?.phone,
type: EditDialogType.PHONE,
validator: Validators.compose([phoneValidator, requiredValidator]),
},
width: '400px',
});

53
console/src/app/pages/validators.ts
View File

@ -1,53 +0,0 @@
import { UntypedFormControl } from '@angular/forms';
export function symbolValidator(c: UntypedFormControl): any {
const REGEXP: RegExp = /[^a-z0-9]/gi;
return REGEXP.test(c.value)
? null
: {
invalid: true,
symbolValidator: {
valid: false,
},
};
}
export function numberValidator(c: UntypedFormControl): any {
const REGEXP = /[0-9]/g;
return REGEXP.test(c.value)
? null
: {
invalid: true,
numberValidator: {
valid: false,
},
};
}
export function upperCaseValidator(c: UntypedFormControl): any {
const REGEXP = /[A-Z]/g;
return REGEXP.test(c.value)
? null
: {
invalid: true,
upperCaseValidator: {
valid: false,
},
};
}
export function lowerCaseValidator(c: UntypedFormControl): any {
const REGEXP = /[a-z]/g;
return REGEXP.test(c.value)
? null
: {
invalid: true,
lowerCaseValidator: {
valid: false,
},
};
}

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

@ -239,11 +239,20 @@
"NOROWS": "Keine Daten"
},
"ERRORS": {
"REQUIRED": "Bitte fülle alle benötigten Felder aus.",
"REQUIRED": "Bitte fülle dieses Feld aus.",
"TOKENINVALID": {
"TITLE": "Du bist abgemeldet",
"DESCRIPTION": "Klicke auf \"Einloggen\", um Dich erneut anzumelden."
}
},
"INVALID_FORMAT": "Das Format is ungültig.",
"NOTANEMAIL": "Der eingegebene Wert ist keine E-Mail Adresse.",
"MINLENGTH": "Muss mindestens {{requiredLength}} Zeichen lang sein.",
"UPPERCASEMISSING": "Muss einen Grossbuchstaben beinhalten.",
"LOWERCASEMISSING": "Muss einen Kleinbuchstaben beinhalten.",
"SYMBOLERROR": "Muss ein Symbol/Satzzeichen beinhalten.",
"NUMBERERROR": "Muss eine Ziffer beinhalten.",
"PWNOTEQUAL": "Die Passwörter stimmen nicht überein.",
"PHONE": "Die Telefonnummer muss mit 00 oder + starten."
},
"USER": {
"SETTINGS": {
@ -524,8 +533,7 @@
"SET": "Passwort neu setzen",
"RESENDNOTIFICATION": "Email zum Zurücksetzen senden",
"REQUIRED": "Bitte prüfe, dass alle notwendigen Felder ausgefüllt sind.",
"MINLENGTHERROR": "Muss mindestens {{value}} Zeichen lang sein.",
"NOTEQUAL": "Die Passwörter stimmen nicht überein."
"MINLENGTHERROR": "Muss mindestens {{value}} Zeichen lang sein."
},
"ID": "ID",
"EMAIL": "E-Mail",
@ -579,17 +587,6 @@
"3": "Nach Rolle filtern"
}
},
"VALIDATION": {
"INVALIDPATTERN": "Das Passwort erfüllt nicht die vorgegebenen Regeln.",
"NOTANEMAIL": "Der eingegebene Wert ist keine E-Mail Adresse.",
"REQUIRED": "Das Eingabefeld ist leer.",
"MINLENGTH": "Das Passwort muss mindestens {{requiredLength}} Zeichen lang sein.",
"NOEMAIL": "Benutzername darf keine E-Mail-Adresse sein.",
"UPPERCASEMISSING": "Muss einen Grossbuchstaben beinhalten.",
"LOWERCASEMISSING": "Muss einen Kleinbuchstaben beinhalten.",
"SYMBOLERROR": "Muss ein Symbol/Satzzeichen beinhalten.",
"NUMBERERROR": "Muss eine Ziffer beinhalten."
},
"STATE": {
"0": "Unbekannt",
"1": "Aktiv",

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

@ -240,11 +240,20 @@
"NOROWS": "No data"
},
"ERRORS": {
"REQUIRED": "Some required fields are missing.",
"REQUIRED": "Please fill in this field.",
"TOKENINVALID": {
"TITLE": "Your authorization token has expired.",
"DESCRIPTION": "Click the button below to log in again."
}
},
"INVALID_FORMAT": "The formatting is invalid.",
"NOTANEMAIL": "The given value is not an e-mail address.",
"MINLENGTH": "Must be at least {{requiredLength}} characters long.",
"UPPERCASEMISSING": "Must include an uppercase character.",
"LOWERCASEMISSING": "Must include a lowercase character.",
"SYMBOLERROR": "Must include a symbol or punctuation mark.",
"NUMBERERROR": "Must include a digit.",
"PWNOTEQUAL": "The passwords provided do not match.",
"PHONE": "The phone number must start with 00 or +."
},
"USER": {
"SETTINGS": {
@ -525,8 +534,7 @@
"SET": "Set New Password",
"RESENDNOTIFICATION": "Send Password Reset Link",
"REQUIRED": "Some required fields are missing.",
"MINLENGTHERROR": "Has to be at least {{value}} characters long.",
"NOTEQUAL": "The passwords provided do not match."
"MINLENGTHERROR": "Has to be at least {{value}} characters long."
},
"ID": "ID",
"EMAIL": "E-mail",
@ -580,17 +588,6 @@
"3": "filter for rolename"
}
},
"VALIDATION": {
"INVALIDPATTERN": "The password does not fulfil the defined rules.",
"NOTANEMAIL": "The given value is not an e-mail address",
"REQUIRED": "The input field is empty.",
"MINLENGTH": "The password has to be at least {{requiredLength}} characters long.",
"NOEMAIL": "The user name cannot be an e-mail address.",
"UPPERCASEMISSING": "Must include an uppercase character.",
"LOWERCASEMISSING": "Must include a lowercase character.",
"SYMBOLERROR": "Must include a symbol or punctuation mark.",
"NUMBERERROR": "Must include a digit."
},
"STATE": {
"0": "Unknown",
"1": "Active",

27
console/src/assets/i18n/fr.json
View File

@ -239,11 +239,20 @@
"NOROWS": "Pas de données"
},
"ERRORS": {
"REQUIRED": "Certains champs obligatoires sont manquants.",
"REQUIRED": "Remplis ce champ s'il te plaît.",
"TOKENINVALID": {
"TITLE": "Votre jeton d'autorisation a expiré.",
"DESCRIPTION": "Cliquez sur le bouton ci-dessous pour vous reconnecter."
}
},
"INVALID_FORMAT": "Le format n'est pas valide",
"NOTANEMAIL": "La valeur donnée n'est pas une adresse e-mail",
"MINLENGTH": "Doit comporter au moins {{length}} caractères.",
"UPPERCASEMISSING": "Doit inclure un caractère majuscule.",
"LOWERCASEMISSING": "Doit inclure un caractère minuscule.",
"SYMBOLERROR": "Doit inclure un symbole ou un signe de ponctuation.",
"NUMBERERROR": "Doit inclure un chiffre.",
"PWNOTEQUAL": "Les mots de passe fournis ne correspondent pas.",
"PHONE": "Le numéro de téléphone doit commencer par 00 ou +."
},
"USER": {
"SETTINGS": {
@ -524,8 +533,7 @@
"SET": "Définir un nouveau mot de passe",
"RESENDNOTIFICATION": "Envoyer le lien de réinitialisation du mot de passe",
"REQUIRED": "Certains champs obligatoires sont manquants.",
"MINLENGTHERROR": "Doit comporter au moins {{value}} caractères.",
"NOTEQUAL": "Les mots de passe fournis ne correspondent pas."
"MINLENGTHERROR": "Doit comporter au moins {{value}} caractères."
},
"ID": "ID",
"EMAIL": "E-mail",
@ -579,17 +587,6 @@
"3": "filtre pour nom de rôle"
}
},
"VALIDATION": {
"INVALIDPATTERN": "Le mot de passe ne répond pas aux règles définies.",
"NOTANEMAIL": "La valeur donnée n'est pas une adresse e-mail",
"REQUIRED": "Le champ de saisie est vide.",
"MINLENGTH": "Le mot de passe doit comporter au moins{{length}} caractères.",
"NOEMAIL": "Le nom d'utilisateur ne peut pas être une adresse électronique.",
"UPPERCASEMISSING": "Doit inclure un caractère majuscule.",
"LOWERCASEMISSING": "Doit inclure un caractère minuscule.",
"SYMBOLERROR": "Doit inclure un symbole ou un signe de ponctuation.",
"NUMBERERROR": "Doit inclure un chiffre."
},
"STATE": {
"0": "Inconnu",
"1": "Actif",

27
console/src/assets/i18n/it.json
View File

@ -239,11 +239,20 @@
"NOROWS": "Nessun dato"
},
"ERRORS": {
"REQUIRED": "Mancano alcuni campi obbligatori.",
"REQUIRED": "Compilare questo campo.",
"TOKENINVALID": {
"TITLE": "Il tuo Access Token \u00e8 scaduto.",
"DESCRIPTION": "Clicca il pulsante per richiedere una nuova sessione."
}
},
"INVALID_FORMAT": "Il formato non è valido.",
"NOTANEMAIL": "Il valore dato non \u00e8 un indirizzo e-mail.",
"MINLENGTH": "Deve essere lunga almeno {{requiredLength}} caratteri.",
"UPPERCASEMISSING": "Deve includere un carattere maiuscolo.",
"LOWERCASEMISSING": "Deve includere un carattere minuscolo.",
"SYMBOLERROR": "Deve includere un simbolo o un segno di punteggiatura.",
"NUMBERERROR": "Deve includere una cifra.",
"PWNOTEQUAL": "Le password fornite non corrispondono.",
"PHONE": "Il numero di telefono deve iniziare con 00 o +."
},
"USER": {
"SETTINGS": {
@ -524,8 +533,7 @@
"SET": "Imposta nuova password",
"RESENDNOTIFICATION": "Invia email per la reimpostazione",
"REQUIRED": "Mancano alcuni campi obbligatori.",
"MINLENGTHERROR": "Deve essere lunga almeno {{valore}} caratteri.",
"NOTEQUAL": "Le password fornite non corrispondono."
"MINLENGTHERROR": "Deve essere lunga almeno {{valore}} caratteri."
},
"ID": "ID",
"EMAIL": "E-mail",
@ -579,17 +587,6 @@
"3": "filtro per rolename"
}
},
"VALIDATION": {
"INVALIDPATTERN": "La password non soddisfa le regole definite.",
"NOTANEMAIL": "Il valore dato non \u00e8 un indirizzo e-mail",
"REQUIRED": "Il campo di input \u00e8 vuoto.",
"MINLENGTH": "Deve essere lunga almeno {{requiredLength}} caratteri.",
"NOEMAIL": "Il nome utente non pu\u00f2 essere un indirizzo e-mail.",
"UPPERCASEMISSING": "Deve includere un carattere maiuscolo.",
"LOWERCASEMISSING": "Deve includere un carattere minuscolo.",
"SYMBOLERROR": "Deve includere un simbolo o un segno di punteggiatura.",
"NUMBERERROR": "Deve includere una cifra."
},
"STATE": {
"0": "Sconosciuto",
"1": "Attivo",

27
console/src/assets/i18n/pl.json
View File

@ -239,11 +239,20 @@
"NOROWS": "Brak danych"
},
"ERRORS": {
"REQUIRED": "Brakuje niektórych wymaganych pól.",
"REQUIRED": "Proszę wypełnić to pole.",
"TOKENINVALID": {
"TITLE": "Twój token autoryzacji wygasł.",
"DESCRIPTION": "Kliknij przycisk poniżej, aby ponownie się zalogować."
}
},
"INVALID_FORMAT": "Format jest nieprawidłowy.",
"NOTANEMAIL": "Podana wartość nie jest adresem e-mail.",
"MINLENGTH": "Musi mieć co najmniej {{requiredLength}} znaków.",
"UPPERCASEMISSING": "Musi zawierać wielką literę.",
"LOWERCASEMISSING": "Musi zawierać małą literę.",
"SYMBOLERROR": "Musi zawierać symbol lub znak interpunkcyjny.",
"NUMBERERROR": "Musi zawierać cyfrę.",
"PWNOTEQUAL": "Podane hasła nie są identyczne.",
"PHONE": "Numer telefonu musi zaczynać się od 00 lub +."
},
"USER": {
"SETTINGS": {
@ -524,8 +533,7 @@
"SET": "Ustaw nowe hasło",
"RESENDNOTIFICATION": "Wyślij link resetowania hasła",
"REQUIRED": "Brakuje niektórych wymaganych pól.",
"MINLENGTHERROR": "Musi mieć co najmniej {{value}} znaków.",
"NOTEQUAL": "Podane hasła nie są identyczne."
"MINLENGTHERROR": "Musi mieć co najmniej {{value}} znaków."
},
"ID": "ID",
"EMAIL": "E-mail",
@ -579,17 +587,6 @@
"3": "filtruj po roli"
}
},
"VALIDATION": {
"INVALIDPATTERN": "Hasło nie spełnia określonych reguł.",
"NOTANEMAIL": "Podana wartość nie jest adresem e-mail",
"REQUIRED": "Pole jest puste.",
"MINLENGTH": "Hasło musi mieć co najmniej {{requiredLength}} znaków.",
"NOEMAIL": "Nazwa użytkownika nie może być adresem e-mail.",
"UPPERCASEMISSING": "Musi zawierać wielką literę.",
"LOWERCASEMISSING": "Musi zawierać małą literę.",
"SYMBOLERROR": "Musi zawierać symbol lub znak interpunkcyjny.",
"NUMBERERROR": "Musi zawierać cyfrę."
},
"STATE": {
"0": "Nieznany",
"1": "Aktywny",

27
console/src/assets/i18n/zh.json
View File

@ -239,11 +239,20 @@
"NOROWS": "没有数据"
},
"ERRORS": {
"REQUIRED": "缺少一些必填字段。",
"REQUIRED": "请填写此栏",
"TOKENINVALID": {
"TITLE": "您的授权令牌已过期。",
"DESCRIPTION": "点击下方按钮再次登录。"
}
},
"INVALID_FORMAT": "格式是无效的。",
"NOTANEMAIL": "给定的值不是合法电子邮件地址。",
"MINLENGTH": "长度必须至少是{{requiredLength}}字符。",
"UPPERCASEMISSING": "密码必须包含大写字符。",
"LOWERCASEMISSING": "密码必须包含小写字符。",
"SYMBOLERROR": "密码必须包含符号或标点符号。",
"NUMBERERROR": "密码必须包含数字。",
"PWNOTEQUAL": "提供的密码不匹配。",
"PHONE": "电话号码必须以00或+开头。"
},
"USER": {
"SETTINGS": {
@ -524,8 +533,7 @@
"SET": "设置新密码",
"RESENDNOTIFICATION": "发送重置密码链接",
"REQUIRED": "缺少必填字段。",
"MINLENGTHERROR": "密码长度必须至少为 {{value}} 个字符。",
"NOTEQUAL": "提供的密码不匹配。"
"MINLENGTHERROR": "密码长度必须至少为 {{value}} 个字符。"
},
"ID": "ID",
"EMAIL": "电子邮件",
@ -579,17 +587,6 @@
"3": "过滤角色名称"
}
},
"VALIDATION": {
"INVALIDPATTERN": "密码不符合定义的规则。",
"NOTANEMAIL": "给定的值不是合法电子邮件地址",
"REQUIRED": "输入字段为空。",
"MINLENGTH": "密码长度必须至少为 {{requiredLength}} 个字符。",
"NOEMAIL": "用户名不能是电子邮件地址。",
"UPPERCASEMISSING": "密码必须包含大写字符。",
"LOWERCASEMISSING": "密码必须包含小写字符。",
"SYMBOLERROR": "密码必须包含符号或标点符号。",
"NUMBERERROR": "密码必须包含数字。"
},
"STATE": {
"0": "未知",
"1": "启用",

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

@ -41,7 +41,7 @@
@import './styles/color.scss';
@import 'src/app/pages/instance/instance.component.scss';
@import 'src/app/modules/refresh-table/refresh-table.component.scss';
@import 'src/app/modules/form-field/form-field.component.scss';
@import 'src/app/modules/form-field/field/form-field.component.scss';
@import 'src/app/modules/label/label.component.scss';
@import 'src/app/modules/meta-layout/meta.scss';
@import 'src/app/pages/projects/owned-projects/project-grant-detail/project-grant-illustration/project-grant-illustration.component';