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

* 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>

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

@@ -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,

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

@@ -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));
     }
   }
 

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

@@ -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]],
     });
   }
 

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

@@ -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]],
     });
   }
 

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

@@ -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);