feat(console-v2): save table filters as queryparams, smtp update (#3624)

* show warn for missing smtp * org table, failed events, views table fallback, org table filters * log notification providers, user filter, copy to clip fix * lint Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-02-28 16:37:24 +00:00 · 2022-05-13 16:19:06 +02:00 · 2022-05-13 16:19:06 +02:00 · d0c1ad2c69
commit d0c1ad2c69
parent a674f99c2d
43 changed files with 669 additions and 227 deletions
--- a/console/package-lock.json
+++ b/console/package-lock.json
@ -28,6 +28,7 @@
        "@types/google-protobuf": "^3.15.3",
        "@types/uuid": "^8.3.0",
        "angular-oauth2-oidc": "^13.0.1",
+        "buffer": "^6.0.3",
        "codemirror": "^5.65.0",
        "cors": "^2.8.5",
        "file-saver": "^2.0.5",
@ -4690,7 +4691,6 @@
    },
    "node_modules/base64-js": {
      "version": "1.5.1",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -4754,6 +4754,30 @@
        "readable-stream": "^3.4.0"
      }
    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
    "node_modules/blob-util": {
      "version": "2.0.2",
      "dev": true,
@ -4940,8 +4964,9 @@
      }
    },
    "node_modules/buffer": {
-      "version": "5.7.1",
-      "dev": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
      "funding": [
        {
          "type": "github",
@ -4956,10 +4981,9 @@
          "url": "https://feross.org/support"
        }
      ],
-      "license": "MIT",
      "dependencies": {
        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
      }
    },
    "node_modules/buffer-crc32": {
@ -6225,6 +6249,30 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/cypress/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
    "node_modules/cypress/node_modules/chalk": {
      "version": "4.1.2",
      "dev": true,
@ -8696,7 +8744,6 @@
    },
    "node_modules/ieee754": {
      "version": "1.2.1",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -19971,8 +20018,7 @@
      "dev": true
    },
    "base64-js": {
-      "version": "1.5.1",
-      "dev": true
+      "version": "1.5.1"
    },
    "base64id": {
      "version": "2.0.0",
@ -20004,6 +20050,18 @@
        "buffer": "^5.5.0",
        "inherits": "^2.0.4",
        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        }
      }
    },
    "blob-util": {
@ -20138,11 +20196,12 @@
      }
    },
    "buffer": {
-      "version": "5.7.1",
-      "dev": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
      "requires": {
        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
      }
    },
    "buffer-crc32": {
@ -20895,6 +20954,16 @@
            "color-convert": "^2.0.1"
          }
        },
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        },
        "chalk": {
          "version": "4.1.2",
          "dev": true,
@ -22565,8 +22634,7 @@
      "requires": {}
    },
    "ieee754": {
-      "version": "1.2.1",
-      "dev": true
+      "version": "1.2.1"
    },
    "ignore": {
      "version": "5.2.0",
--- a/console/package.json
+++ b/console/package.json
@ -32,6 +32,7 @@
    "@types/google-protobuf": "^3.15.3",
    "@types/uuid": "^8.3.0",
    "angular-oauth2-oidc": "^13.0.1",
+    "buffer": "^6.0.3",
    "codemirror": "^5.65.0",
    "cors": "^2.8.5",
    "file-saver": "^2.0.5",
--- a/console/src/app/animations.ts
+++ b/console/src/app/animations.ts
@ -1,13 +1,13 @@
 import {
-  animate,
-  animateChild,
-  AnimationTriggerMetadata,
-  group,
-  query,
-  stagger,
-  style,
-  transition,
-  trigger,
+    animate,
+    animateChild,
+    AnimationTriggerMetadata,
+    group,
+    query,
+    stagger,
+    style,
+    transition,
+    trigger,
 } from '@angular/animations';

 export const toolbarAnimation: AnimationTriggerMetadata = trigger('toolbar', [
@ -121,10 +121,10 @@ export const enterAnimations: Array<AnimationTriggerMetadata> = [

 export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
  transition('HomePage => AddPage', [
-    style({ transform: 'translateX(50%)', opacity: 0.5 }),
+    style({ transform: 'translateX(30vw)', opacity: 0 }),
    animate('250ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 })),
  ]),
-  transition('AddPage => HomePage', [animate('250ms', style({ transform: 'translateX(50%)', opacity: 0.5 }))]),
+  transition('AddPage => HomePage', [animate('250ms', style({ transform: 'translateX(30vw)', opacity: 0 }))]),
  transition('HomePage => DetailPage', [
    query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
      optional: true,
@ -135,7 +135,7 @@ export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimation
        [
          style({
            transform: 'translateX(20%)',
-            opacity: 0.5,
+            opacity: 0,
          }),
          animate(
            '.35s ease-in',
--- a/console/src/app/app-routing.module.ts
+++ b/console/src/app/app-routing.module.ts
@ -16,6 +16,7 @@ const routes: Routes = [
  {
    path: 'orgs',
    loadChildren: () => import('./pages/org-list/org-list.module').then((m) => m.OrgListModule),
+    canActivate: [AuthGuard],
  },
  {
    path: 'granted-projects',
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@ -163,6 +163,11 @@ export class AppComponent implements OnInit, OnDestroy {

    this.matIconRegistry.addSvgIcon('mdi_symbol', this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/symbol.svg'));

+    this.matIconRegistry.addSvgIcon(
+      'mdi_shield_alert',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/shield-alert.svg'),
+    );
+
    this.matIconRegistry.addSvgIcon(
      'mdi_numeric',
      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/numeric.svg'),
@ -349,7 +354,7 @@ export class AppComponent implements OnInit, OnDestroy {
  public changedOrg(org: Org.AsObject): void {
    this.loadPrivateLabelling();
    this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => {
-      this.router.navigate(['/org'],{fragment: org.id} );
+      this.router.navigate(['/org'], { fragment: org.id });
    });
  }

--- a/console/src/app/directives/copy-to-clipboard/copy-to-clipboard.directive.ts
+++ b/console/src/app/directives/copy-to-clipboard/copy-to-clipboard.directive.ts
@ -9,6 +9,7 @@ export class CopyToClipboardDirective {

  @HostListener('click', ['$event']) onMouseEnter($event: any): void {
    $event.preventDefault();
+    $event.stopPropagation();
    this.copytoclipboard(this.valueToCopy);
  }

--- a/console/src/app/modules/filter-org/filter-org.component.spec.ts
+++ b/console/src/app/modules/filter-org/filter-org.component.spec.ts
@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { FilterUserComponent } from './filter-user.component';
+import { FilterOrgComponent } from './filter-org.component';

-describe('FilterUserComponent', () => {
-  let component: FilterUserComponent;
-  let fixture: ComponentFixture<FilterUserComponent>;
+describe('FilterOrgComponent', () => {
+  let component: FilterOrgComponent;
+  let fixture: ComponentFixture<FilterOrgComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ FilterUserComponent ]
-    })
-    .compileComponents();
+      declarations: [FilterOrgComponent],
+    }).compileComponents();
  });

  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterUserComponent);
+    fixture = TestBed.createComponent(FilterOrgComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
--- a/console/src/app/modules/filter-org/filter-org.component.ts
+++ b/console/src/app/modules/filter-org/filter-org.component.ts
@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { OrgNameQuery, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { UserNameQuery } from 'src/app/proto/generated/zitadel/user_pb';
@ -15,13 +17,44 @@ enum SubQuery {
  templateUrl: './filter-org.component.html',
  styleUrls: ['./filter-org.component.scss'],
 })
-export class FilterOrgComponent extends FilterComponent {
+export class FilterOrgComponent extends FilterComponent implements OnInit {
  public SubQuery: any = SubQuery;
  public searchQueries: OrgQuery[] = [];

  public states: OrgState[] = [OrgState.ORG_STATE_ACTIVE, OrgState.ORG_STATE_INACTIVE];
-  constructor() {
-    super();
+
+  constructor(router: Router, protected route: ActivatedRoute) {
+    super(router, route);
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      const { filter } = params;
+      if (filter) {
+        const stringifiedFilters = filter as string;
+        const filters: OrgQuery.AsObject[] = JSON.parse(stringifiedFilters) as OrgQuery.AsObject[];
+
+        const orgQueries = filters.map((filter) => {
+          if (filter.nameQuery) {
+            const orgQuery = new OrgQuery();
+
+            const orgNameQuery = new OrgNameQuery();
+            orgNameQuery.setName(filter.nameQuery.name);
+            orgNameQuery.setMethod(filter.nameQuery.method);
+
+            orgQuery.setNameQuery(orgNameQuery);
+            return orgQuery;
+          } else {
+            return undefined;
+          }
+        });
+
+        this.searchQueries = orgQueries.filter((q) => q !== undefined) as OrgQuery[];
+        this.filterChanged.emit(this.filterCount ? this.searchQueries : undefined);
+        // this.showFilter = true;
+        // this.filterOpen.emit(true);
+      }
+    });
  }

  public changeCheckbox(subquery: SubQuery, event: MatCheckboxChange) {
--- a/console/src/app/modules/filter-org/filter-org.module.ts
+++ b/console/src/app/modules/filter-org/filter-org.module.ts
@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

 import { FilterModule } from '../filter/filter.module';
@ -21,6 +22,7 @@ import { FilterOrgComponent } from './filter-org.component';
    MatButtonModule,
    MatIconModule,
    TranslateModule,
+    RouterModule,
  ],
  exports: [FilterOrgComponent],
 })
--- a/console/src/app/modules/filter-project/filter-project.component.ts
+++ b/console/src/app/modules/filter-project/filter-project.component.ts
@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { ProjectNameQuery, ProjectQuery, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
 import { UserNameQuery } from 'src/app/proto/generated/zitadel/user_pb';
@ -16,13 +18,43 @@ enum SubQuery {
  templateUrl: './filter-project.component.html',
  styleUrls: ['./filter-project.component.scss'],
 })
-export class FilterProjectComponent extends FilterComponent {
+export class FilterProjectComponent extends FilterComponent implements OnInit {
  public SubQuery: any = SubQuery;
  public searchQueries: ProjectQuery[] = [];

  public states: ProjectState[] = [ProjectState.PROJECT_STATE_ACTIVE, ProjectState.PROJECT_STATE_INACTIVE];
-  constructor() {
-    super();
+  constructor(router: Router, route: ActivatedRoute) {
+    super(router, route);
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      const { filter } = params;
+      if (filter) {
+        const stringifiedFilters = filter as string;
+        const filters: ProjectQuery.AsObject[] = JSON.parse(stringifiedFilters) as ProjectQuery.AsObject[];
+
+        const projectQueries = filters.map((filter) => {
+          if (filter.nameQuery) {
+            const nameQuery = new ProjectNameQuery();
+
+            const projectQuery = new ProjectQuery();
+            nameQuery.setName(filter.nameQuery.name);
+            nameQuery.setMethod(filter.nameQuery.method);
+
+            projectQuery.setNameQuery(nameQuery);
+            return projectQuery;
+          } else {
+            return undefined;
+          }
+        });
+
+        this.searchQueries = projectQueries.filter((q) => q !== undefined) as ProjectQuery[];
+        this.filterChanged.emit(this.filterCount ? this.searchQueries : undefined);
+        // this.showFilter = true;
+        // this.filterOpen.emit(true);
+      }
+    });
  }

  public changeCheckbox(subquery: SubQuery, event: MatCheckboxChange) {
--- a/console/src/app/modules/filter-project/filter-project.module.ts
+++ b/console/src/app/modules/filter-project/filter-project.module.ts
@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

 import { FilterModule } from '../filter/filter.module';
@ -21,6 +22,7 @@ import { FilterProjectComponent } from './filter-project.component';
    MatButtonModule,
    MatIconModule,
    TranslateModule,
+    RouterModule,
  ],
  exports: [FilterProjectComponent],
 })
--- a/console/src/app/modules/filter-user-grants/filter-user-grants.component.html
+++ b/console/src/app/modules/filter-user-grants/filter-user-grants.component.html
@ -1,82 +1,105 @@
 <cnsl-filter (resetted)="resetFilter()" (trigger)="emitFilter()">
  <div class="filter-row" id="filtercomp">
    <div class="name-query">
-      <mat-checkbox id="displayname" class="cb" [checked]="getSubFilter(SubQuery.DISPLAYNAME)"
-        (change)="changeCheckbox(SubQuery.DISPLAYNAME, $event )">{{'FILTER.DISPLAYNAME' | translate}}
+      <mat-checkbox
+        id="displayname"
+        class="cb"
+        [checked]="getSubFilter(SubQuery.DISPLAYNAME)"
+        (change)="changeCheckbox(SubQuery.DISPLAYNAME, $event)"
+        >{{ 'FILTER.DISPLAYNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.DISPLAYNAME) as dnq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="dnq.getMethod()" (selectionChange)="setMethod(dnq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
-              {{ 'FILTER.METHODS.'+method | translate }}
+              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
-          <input cnslInput name="value" [value]="dnq.getDisplayName()"
-            (change)="setValue(SubQuery.DISPLAYNAME, dnq, $event)" />
+          <input
+            cnslInput
+            name="value"
+            [value]="dnq.getDisplayName()"
+            (change)="setValue(SubQuery.DISPLAYNAME, dnq, $event)"
+          />
        </cnsl-form-field>
      </div>
    </div>

    <div class="usernane-query">
-      <mat-checkbox id="username" class="cb" [checked]="getSubFilter(SubQuery.USERNAME)"
-        (change)="changeCheckbox(SubQuery.USERNAME, $event )">{{'FILTER.USERNAME' | translate}}
+      <mat-checkbox
+        id="username"
+        class="cb"
+        [checked]="getSubFilter(SubQuery.USERNAME)"
+        (change)="changeCheckbox(SubQuery.USERNAME, $event)"
+        >{{ 'FILTER.USERNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.USERNAME) as unq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="unq.getMethod()" (selectionChange)="setMethod(unq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
-              {{ 'FILTER.METHODS.'+method | translate}}
+              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
-          <input cnslInput name="value" [value]="unq.getUserName()"
-            (change)="setValue(SubQuery.USERNAME, unq, $event)" />
+          <input cnslInput name="value" [value]="unq.getUserName()" (change)="setValue(SubQuery.USERNAME, unq, $event)" />
        </cnsl-form-field>
      </div>
    </div>

    <div class="email-query">
-      <mat-checkbox id="email" class="cb" [checked]="getSubFilter(SubQuery.ORGNAME)"
-        (change)="changeCheckbox(SubQuery.ORGNAME, $event )">{{'FILTER.ORGNAME' | translate}}
+      <mat-checkbox
+        id="email"
+        class="cb"
+        [checked]="getSubFilter(SubQuery.ORGNAME)"
+        (change)="changeCheckbox(SubQuery.ORGNAME, $event)"
+        >{{ 'FILTER.ORGNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.ORGNAME) as onq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="onq.getMethod()" (selectionChange)="setMethod(onq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
-              {{ 'FILTER.METHODS.'+method | translate}}
+              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
-          <input cnslInput name="value" [value]="onq.getOrgName()" (change)="setValue(SubQuery.ORNAME, onq, $event)" />
+          <input cnslInput name="value" [value]="onq.getOrgName()" (change)="setValue(SubQuery.ORGNAME, onq, $event)" />
        </cnsl-form-field>
      </div>
    </div>

    <div class="email-query">
-      <mat-checkbox id="projectname" class="cb" [checked]="getSubFilter(SubQuery.PROJECTNAME)"
-        (change)="changeCheckbox(SubQuery.PROJECTNAME, $event )">{{'FILTER.PROJECTNAME' | translate}}
+      <mat-checkbox
+        id="projectname"
+        class="cb"
+        [checked]="getSubFilter(SubQuery.PROJECTNAME)"
+        (change)="changeCheckbox(SubQuery.PROJECTNAME, $event)"
+        >{{ 'FILTER.PROJECTNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.PROJECTNAME) as pnq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="pnq.getMethod()" (selectionChange)="setMethod(pnq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
-              {{ 'FILTER.METHODS.'+method | translate}}
+              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
-          <input cnslInput name="value" [value]="pnq.getProjectName()"
-            (change)="setValue(SubQuery.PROJECTNAME, pnq, $event)" />
+          <input
+            cnslInput
+            name="value"
+            [value]="pnq.getProjectName()"
+            (change)="setValue(SubQuery.PROJECTNAME, pnq, $event)"
+          />
        </cnsl-form-field>
      </div>
    </div>
  </div>
-</cnsl-filter>
+</cnsl-filter>
--- a/console/src/app/modules/filter-user-grants/filter-user-grants.component.ts
+++ b/console/src/app/modules/filter-user-grants/filter-user-grants.component.ts
@ -1,12 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import {
-  DisplayNameQuery,
-  UserGrantOrgNameQuery,
-  UserGrantProjectNameQuery,
-  UserGrantQuery,
-  UserNameQuery,
+    DisplayNameQuery,
+    UserGrantOrgNameQuery,
+    UserGrantProjectNameQuery,
+    UserGrantQuery,
+    UserNameQuery,
 } from 'src/app/proto/generated/zitadel/user_pb';

 import { FilterComponent } from '../filter/filter.component';
@ -23,11 +25,68 @@ enum SubQuery {
  templateUrl: './filter-user-grants.component.html',
  styleUrls: ['./filter-user-grants.component.scss'],
 })
-export class FilterUserGrantsComponent extends FilterComponent {
+export class FilterUserGrantsComponent extends FilterComponent implements OnInit {
  public SubQuery: any = SubQuery;
  public searchQueries: UserGrantQuery[] = [];
-  constructor() {
-    super();
+
+  constructor(router: Router, route: ActivatedRoute) {
+    super(router, route);
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      const { filter } = params;
+      if (filter) {
+        const stringifiedFilters = filter as string;
+        const filters: UserGrantQuery.AsObject[] = JSON.parse(stringifiedFilters) as UserGrantQuery.AsObject[];
+
+        const userQueries = filters.map((filter) => {
+          if (filter.userNameQuery) {
+            const userGrantQuery = new UserGrantQuery();
+
+            const userNameQuery = new UserNameQuery();
+            userNameQuery.setUserName(filter.userNameQuery.userName);
+            userNameQuery.setMethod(filter.userNameQuery.method);
+
+            userGrantQuery.setUserNameQuery(userNameQuery);
+            return userGrantQuery;
+          } else if (filter.displayNameQuery) {
+            const userGrantQuery = new UserGrantQuery();
+
+            const displayNameQuery = new DisplayNameQuery();
+            displayNameQuery.setDisplayName(filter.displayNameQuery.displayName);
+            displayNameQuery.setMethod(filter.displayNameQuery.method);
+
+            userGrantQuery.setDisplayNameQuery(displayNameQuery);
+            return userGrantQuery;
+          } else if (filter.orgNameQuery) {
+            const userGrantQuery = new UserGrantQuery();
+
+            const orgNameQuery = new UserGrantOrgNameQuery();
+            orgNameQuery.setOrgName(filter.orgNameQuery.orgName);
+            orgNameQuery.setMethod(filter.orgNameQuery.method);
+
+            userGrantQuery.setOrgNameQuery(orgNameQuery);
+            return userGrantQuery;
+          } else if (filter.projectNameQuery) {
+            const userGrantQuery = new UserGrantQuery();
+
+            const projectNameQuery = new UserGrantProjectNameQuery();
+            projectNameQuery.setProjectName(filter.projectNameQuery.projectName);
+
+            userGrantQuery.setProjectNameQuery(projectNameQuery);
+            return userGrantQuery;
+          } else {
+            return undefined;
+          }
+        });
+
+        this.searchQueries = userQueries.filter((q) => q !== undefined) as UserGrantQuery[];
+        this.filterChanged.emit(this.filterCount ? this.searchQueries : undefined);
+        // this.showFilter = true;
+        // this.filterOpen.emit(true);
+      }
+    });
  }

  public changeCheckbox(subquery: SubQuery, event: MatCheckboxChange) {
--- a/console/src/app/modules/filter-user-grants/filter-user-grants.module.ts
+++ b/console/src/app/modules/filter-user-grants/filter-user-grants.module.ts
@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

 import { FilterModule } from '../filter/filter.module';
@ -21,6 +22,7 @@ import { FilterUserGrantsComponent } from './filter-user-grants.component';
    MatButtonModule,
    MatIconModule,
    TranslateModule,
+    RouterModule,
  ],
  exports: [FilterUserGrantsComponent],
 })
--- a/console/src/app/modules/filter-user/filter-user.component.ts
+++ b/console/src/app/modules/filter-user/filter-user.component.ts
@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import {
-  DisplayNameQuery,
-  EmailQuery,
-  SearchQuery as UserSearchQuery,
-  StateQuery,
-  UserNameQuery,
-  UserState,
+    DisplayNameQuery,
+    EmailQuery,
+    SearchQuery as UserSearchQuery,
+    StateQuery,
+    UserNameQuery,
+    UserState,
 } from 'src/app/proto/generated/zitadel/user_pb';

 import { FilterComponent } from '../filter/filter.component';
@ -24,7 +26,7 @@ enum SubQuery {
  templateUrl: './filter-user.component.html',
  styleUrls: ['./filter-user.component.scss'],
 })
-export class FilterUserComponent extends FilterComponent {
+export class FilterUserComponent extends FilterComponent implements OnInit {
  public SubQuery: any = SubQuery;
  public searchQueries: UserSearchQuery[] = [];

@ -36,8 +38,64 @@ export class FilterUserComponent extends FilterComponent {
    UserState.USER_STATE_LOCKED,
    UserState.USER_STATE_SUSPEND,
  ];
-  constructor() {
-    super();
+  constructor(router: Router, route: ActivatedRoute) {
+    super(router, route);
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe(take(1)).subscribe((params) => {
+      const { filter } = params;
+      if (filter) {
+        const stringifiedFilters = filter as string;
+        const filters: UserSearchQuery.AsObject[] = JSON.parse(stringifiedFilters) as UserSearchQuery.AsObject[];
+
+        const userQueries = filters.map((filter) => {
+          if (filter.userNameQuery) {
+            const userQuery = new UserSearchQuery();
+
+            const userNameQuery = new UserNameQuery();
+            userNameQuery.setUserName(filter.userNameQuery.userName);
+            userNameQuery.setMethod(filter.userNameQuery.method);
+
+            userQuery.setUserNameQuery(userNameQuery);
+            return userQuery;
+          } else if (filter.displayNameQuery) {
+            const userQuery = new UserSearchQuery();
+
+            const displayNameQuery = new DisplayNameQuery();
+            displayNameQuery.setDisplayName(filter.displayNameQuery.displayName);
+            displayNameQuery.setMethod(filter.displayNameQuery.method);
+
+            userQuery.setDisplayNameQuery(displayNameQuery);
+            return userQuery;
+          } else if (filter.emailQuery) {
+            const userQuery = new UserSearchQuery();
+
+            const emailQuery = new EmailQuery();
+            emailQuery.setEmailAddress(filter.emailQuery.emailAddress);
+            emailQuery.setMethod(filter.emailQuery.method);
+
+            userQuery.setEmailQuery(emailQuery);
+            return userQuery;
+          } else if (filter.stateQuery) {
+            const userQuery = new UserSearchQuery();
+
+            const stateQuery = new StateQuery();
+            stateQuery.setState(filter.stateQuery.state);
+
+            userQuery.setStateQuery(stateQuery);
+            return userQuery;
+          } else {
+            return undefined;
+          }
+        });
+
+        this.searchQueries = userQueries.filter((q) => q !== undefined) as UserSearchQuery[];
+        this.filterChanged.emit(this.filterCount ? this.searchQueries : undefined);
+        // this.showFilter = true;
+        // this.filterOpen.emit(true);
+      }
+    });
  }

  public changeCheckbox(subquery: SubQuery, event: MatCheckboxChange) {
--- a/console/src/app/modules/filter-user/filter-user.module.ts
+++ b/console/src/app/modules/filter-user/filter-user.module.ts
@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
+import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

 import { FilterModule } from '../filter/filter.module';
@ -19,6 +20,7 @@ import { FilterUserComponent } from './filter-user.component';
    MatSelectModule,
    MatCheckboxModule,
    MatButtonModule,
+    RouterModule,
    MatIconModule,
    TranslateModule,
  ],
--- a/console/src/app/modules/filter/filter.component.ts
+++ b/console/src/app/modules/filter/filter.component.ts
@ -1,6 +1,7 @@
 import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
 import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
 import { SearchQuery as MemberSearchQuery } from 'src/app/proto/generated/zitadel/member_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
 import { OrgQuery } from 'src/app/proto/generated/zitadel/org_pb';
@ -10,6 +11,12 @@ import { SearchQuery as UserSearchQuery, UserGrantQuery } from 'src/app/proto/ge
 import { ActionKeysType } from '../action-keys/action-keys.component';

 type FilterSearchQuery = UserSearchQuery | MemberSearchQuery | UserGrantQuery | ProjectQuery | OrgQuery;
+type FilterSearchQueryAsObject =
+  | UserSearchQuery.AsObject
+  | MemberSearchQuery.AsObject
+  | UserGrantQuery.AsObject
+  | ProjectQuery.AsObject
+  | OrgQuery.AsObject;

@Component({
  selector: 'cnsl-filter',
@ -23,6 +30,8 @@ export class FilterComponent implements OnDestroy {
  @Output() public resetted: EventEmitter<void> = new EventEmitter();
  @Output() public trigger: EventEmitter<void> = new EventEmitter();

+  private destroy$: Subject<void> = new Subject();
+
  public filterCount$: BehaviorSubject<number> = new BehaviorSubject(0);

  public showFilter: boolean = false;
@ -51,5 +60,33 @@ export class FilterComponent implements OnDestroy {

  public ngOnDestroy(): void {
    this.filterCount$.complete();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  constructor(private router: Router, protected route: ActivatedRoute) {
+    const changes$ = this.filterChanged.asObservable();
+    changes$.pipe(takeUntil(this.destroy$)).subscribe((queries) => {
+      const filters: Array<FilterSearchQueryAsObject | {}> | undefined = queries
+        ?.map((q) => q.toObject())
+        .map((query) =>
+          Object.keys(query).reduce((acc, key) => {
+            const _acc = acc;
+            if ((query as any)[key] !== undefined) (_acc as any)[key] = (query as any)[key];
+            return _acc as FilterSearchQueryAsObject;
+          }, {}),
+        );
+
+      if (filters && Object.keys(filters)) {
+        this.router.navigate([], {
+          relativeTo: this.route,
+          queryParams: {
+            ['filter']: JSON.stringify(filters),
+          },
+          queryParamsHandling: 'merge',
+          skipLocationChange: false,
+        });
+      }
+    });
  }
 }
--- a/console/src/app/modules/info-section/info-section.component.html
+++ b/console/src/app/modules/info-section/info-section.component.html
@ -1,8 +1,12 @@
-<div class="info-section-row" [ngClass]="{'info': type === 'INFO', 'warn': type === 'WARN'}">
-    <i *ngIf="type === 'INFO'" class="icon las la-info"></i>
-    <i *ngIf="type === 'WARN'" class="icon las la-exclamation"></i>
+<div
+  class="info-section-row"
+  [ngClass]="{ info: type === 'INFO', warn: type === 'WARN', alert: type === 'ALERT', fit: fitWidth }"
+>
+  <i *ngIf="type === 'INFO'" class="icon las la-info"></i>
+  <i *ngIf="type === 'WARN'" class="icon las la-exclamation"></i>
+  <i *ngIf="type === 'ALERT'" class="icon las la-exclamation"></i>

-    <div class="info-section-content">
-        <ng-content></ng-content>
-    </div>
+  <div class="info-section-content">
+    <ng-content></ng-content>
+  </div>
 </div>
--- a/console/src/app/modules/info-section/info-section.component.scss
+++ b/console/src/app/modules/info-section/info-section.component.scss
@ -10,23 +10,27 @@
  .info-section-row {
    display: flex;
    border-radius: 4px;
-    padding: .5rem 0;
+    padding: 0.5rem 0;
    padding-right: 1rem;
    font-size: 14px;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
+
+    &.fit {
+      width: fit-content;
+    }

    .icon {
      margin-right: 1rem;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: 1.2rem;
-      margin-left: .5rem;
-      padding: .25rem 0;
+      margin-left: 0.5rem;
+      padding: 0.25rem 0;
    }

    .info-section-content {
      flex: 1;
-      padding: .25rem 0;
+      padding: 0.25rem 0;
    }

    &.info {
@ -55,5 +59,14 @@
        color: map-get($foreground, warninfosection);
      }
    }
+
+    &.alert {
+      background-color: map-get($background, alertinfosection);
+      color: map-get($foreground, alertinfosection);
+
+      .icon {
+        color: map-get($foreground, alertinfosection);
+      }
+    }
  }
 }
--- a/console/src/app/modules/info-section/info-section.component.ts
+++ b/console/src/app/modules/info-section/info-section.component.ts
@ -4,6 +4,7 @@ export enum InfoSectionType {
  INFO = 'INFO',
  SUCCESS = 'SUCCESS',
  WARN = 'WARN',
+  ALERT = 'ALERT',
 }

@Component({
@ -12,6 +13,6 @@ export enum InfoSectionType {
  styleUrls: ['./info-section.component.scss'],
 })
 export class InfoSectionComponent {
-
  @Input() type: InfoSectionType = InfoSectionType.INFO;
+  @Input() fitWidth: boolean = false;
 }
--- a/console/src/app/modules/org-table/org-table.component.html
+++ b/console/src/app/modules/org-table/org-table.component.html
@ -1,5 +1,4 @@
 <cnsl-refresh-table
-  *ngIf="dataSource"
  [hideRefresh]="true"
  (refreshed)="refresh()"
  [dataSize]="dataSource.data.length"
@ -33,7 +32,7 @@

    <ng-container matColumnDef="primaryDomain">
      <th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</th>
-      <td mat-cell *matCellDef="let org">
+      <td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
        <span>{{ org.primaryDomain }}</span>
        <button
          color="primary"
@ -101,6 +100,6 @@
    [length]="totalResult || 0"
    [pageSize]="initialLimit"
    [pageSizeOptions]="[10, 20, 50, 100]"
-    (page)="changePage($event)"
+    (page)="changePage()"
  ></cnsl-paginator>
 </cnsl-refresh-table>
--- a/console/src/app/modules/org-table/org-table.component.ts
+++ b/console/src/app/modules/org-table/org-table.component.ts
@ -2,16 +2,19 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
-import { BehaviorSubject, catchError, finalize, from, map, Observable, of } from 'rxjs';
+import { BehaviorSubject, catchError, finalize, from, map, Observable, of, Subject, switchMap, takeUntil } from 'rxjs';
 import { Org, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+import { ToastService } from 'src/app/services/toast.service';

-import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
+import { PaginatorComponent } from '../paginator/paginator.component';

 enum OrgListSearchKey {
  NAME = 'NAME',
 }

+type Request = { limit: number; offset: number; queries: OrgQuery[] };
+
@Component({
  selector: 'cnsl-org-table',
  templateUrl: './org-table.component.html',
@ -23,7 +26,7 @@ export class OrgTableComponent {
  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
  @ViewChild('input') public filter!: Input;

-  public dataSource!: MatTableDataSource<Org.AsObject>;
+  public dataSource: MatTableDataSource<Org.AsObject> = new MatTableDataSource<Org.AsObject>([]);
  public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@ -35,27 +38,40 @@ export class OrgTableComponent {
  public filterOpen: boolean = false;
  public OrgState: any = OrgState;
  public copied: string = '';
-  constructor(private authService: GrpcAuthService, private router: Router) {
-    this.loadOrgs(this.initialLimit, 0);
+
+  private searchQueries: OrgQuery[] = [];
+  private destroy$: Subject<void> = new Subject();
+  private requestOrgs$: BehaviorSubject<Request> = new BehaviorSubject<Request>({
+    limit: this.initialLimit,
+    offset: 0,
+    queries: [],
+  });
+  private requestOrgsObservable$ = this.requestOrgs$.pipe(takeUntil(this.destroy$));
+
+  constructor(private authService: GrpcAuthService, private router: Router, private toast: ToastService) {
+    this.requestOrgs$.next({ limit: this.initialLimit, offset: 0, queries: this.searchQueries });
    this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
+
+    this.requestOrgsObservable$.pipe(switchMap((req) => this.loadOrgs(req))).subscribe((orgs) => {
+      this.dataSource = new MatTableDataSource<Org.AsObject>(orgs);
+    });
  }

-  public loadOrgs(limit: number, offset: number, queries?: OrgQuery[]): void {
+  public loadOrgs(request: Request): Observable<Org.AsObject[]> {
    this.loadingSubject.next(true);

-    from(this.authService.listMyProjectOrgs(limit, offset, queries))
-      .pipe(
-        map((resp) => {
-          this.timestamp = resp.details?.viewTimestamp;
-          this.totalResult = resp.details?.totalResult ?? 0;
-          return resp.resultList;
-        }),
-        catchError(() => of([])),
-        finalize(() => this.loadingSubject.next(false)),
-      )
-      .subscribe((views) => {
-        this.dataSource = new MatTableDataSource(views);
-      });
+    return from(this.authService.listMyProjectOrgs(request.limit, request.offset, request.queries)).pipe(
+      map((resp) => {
+        this.timestamp = resp.details?.viewTimestamp;
+        this.totalResult = resp.details?.totalResult ?? 0;
+        return resp.resultList;
+      }),
+      catchError((error) => {
+        this.toast.showError(error);
+        return of([]);
+      }),
+      finalize(() => this.loadingSubject.next(false)),
+    );
  }

  public selectOrg(item: Org.AsObject, event?: any): void {
@ -63,11 +79,20 @@ export class OrgTableComponent {
  }

  public refresh(): void {
-    this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
+    this.requestOrgs$.next({
+      limit: this.paginator.length,
+      offset: this.paginator.pageSize * this.paginator.pageIndex,
+      queries: this.searchQueries,
+    });
  }

  public applySearchQuery(searchQueries: OrgQuery[]): void {
-    this.loadOrgs(this.paginator.pageSize, this.paginator.pageSize * this.paginator.pageIndex, searchQueries);
+    this.searchQueries = searchQueries;
+    this.requestOrgs$.next({
+      limit: this.paginator ? this.paginator.pageSize : this.initialLimit,
+      offset: this.paginator ? this.paginator.pageSize * this.paginator.pageIndex : 0,
+      queries: this.searchQueries,
+    });
  }

  public setFilter(key: OrgListSearchKey): void {
@ -90,8 +115,8 @@ export class OrgTableComponent {
    this.router.navigate(['/org']);
  }

-  public changePage(event: PageEvent): void {
-    this.loadOrgs(event.pageSize, event.pageIndex * event.pageSize);
+  public changePage(): void {
+    this.refresh();
  }

  public gotoRouterLink(rL: any) {
--- a/console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.html
+++ b/console/src/app/modules/policies/notification-settings/dialog-add-sms-provider/dialog-add-sms-provider.component.html
@ -1,20 +1,20 @@
 <h1 mat-dialog-title class="title">
-  <span>{{ 'SETTING.SMS.ADDPROVIDER' | translate }}</span>
+  <span>{{ provider === SMSProviderType.Twilio ? 'Twilio' : ('SETTING.SMS.ADDPROVIDER' | translate) }}</span>
 </h1>
 <div mat-dialog-content>
-  <p class="desc cnsl-secondary-text">{{ 'SETTING.SMS.ADDPROVIDERDESCRIPTION' | translate }}</p>
+  <!-- <p class="desc cnsl-secondary-text">{{ 'SETTING.SMS.ADDPROVIDERDESCRIPTION' | translate }}</p> -->

-  <cnsl-form-field class="form-field" label="Access Code" required="true">
+  <!-- <cnsl-form-field class="form-field" label="Access Code" required="true">
    <cnsl-label>{{ 'MFA.TYPE' | translate }}</cnsl-label>
    <mat-select [(ngModel)]="provider">
      <mat-option *ngFor="let prov of availableSMSProviders" [value]="prov">
        <span *ngIf="prov === SMSProviderType.Twilio">Twilio</span>
      </mat-option>
    </mat-select>
-  </cnsl-form-field>
+  </cnsl-form-field> -->

  <form *ngIf="provider === SMSProviderType.Twilio" (ngSubmit)="closeDialogWithRequest()" [formGroup]="twilioForm">
-    <h2>Twilio</h2>
+    <!-- <h2>Twilio</h2> -->

    <cnsl-form-field class="sms-form-field" label="sid">
      <cnsl-label>{{ 'SETTING.SMS.TWILIO.SID' | translate }}</cnsl-label>
@ -43,6 +43,6 @@
    color="primary"
    (click)="closeDialogWithRequest()"
  >
-    <span>{{ 'ACTIONS.OK' | translate }}</span>
+    <span>{{ 'ACTIONS.SAVE' | translate }}</span>
  </button>
 </div>
--- a/console/src/app/modules/policies/notification-settings/notification-settings.component.html
+++ b/console/src/app/modules/policies/notification-settings/notification-settings.component.html
@ -4,6 +4,10 @@

 <h2>{{ 'SETTING.SMTP.TITLE' | translate }}</h2>

+<cnsl-info-section *ngIf="!form.valid" class="info-section-warn" [fitWidth]="true" [type]="InfoSectionType.ALERT">{{
+  'SETTING.SMTP.REQUIREDWARN' | translate
+}}</cnsl-info-section>
+
 <form (ngSubmit)="savePolicy()" [formGroup]="form" autocomplete="off">
  <cnsl-form-field class="smtp-form-field" label="Sender Address" required="true">
    <cnsl-label>{{ 'SETTING.SMTP.SENDERADDRESS' | translate }}</cnsl-label>
@ -50,26 +54,28 @@

 <br />
 <h2>{{ 'SETTING.SMS.TITLE' | translate }}</h2>
-<h3>{{ 'SETTING.SMS.PROVIDERS' | translate }}</h3>
 <div class="sms-providers">
-  <cnsl-card *ngFor="let provider of smsProviders" class="sms-card">
-    <div *ngIf="provider.twilio" class="sms-provider">
+  <cnsl-card class="sms-card" [nomargin]="true">
+    <div class="sms-provider">
      <h4 class="title">Twilio</h4>
-      <span class="cnsl-secondary-text">{{ 'SETTING.SMS.PROVIDER' | translate }}</span>

      <span
+        *ngIf="twilio"
        class="state"
        [ngClass]="{
-          active: provider.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_ACTIVE,
-          inactive: provider.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_INACTIVE
+          active: twilio?.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_ACTIVE,
+          inactive: twilio?.state === SMSProviderConfigState.SMS_PROVIDER_CONFIG_INACTIVE
        }"
      ></span>
+
+      <span class="fill-space"></span>
+      <button mat-icon-button (click)="addSMSProvider()"><i class="las la-pen"></i></button>
    </div>
  </cnsl-card>
-  <button mat-stroked-button (click)="addSMSProvider()">
+  <!-- <button mat-stroked-button (click)="addSMSProvider()">
    <div class="sms-card add">
      <mat-icon>add</mat-icon>
      <span>{{ 'ACTIONS.ADD' | translate }}</span>
    </div>
-  </button>
+  </button> -->
 </div>
--- a/console/src/app/modules/policies/notification-settings/notification-settings.component.scss
+++ b/console/src/app/modules/policies/notification-settings/notification-settings.component.scss
@ -2,11 +2,16 @@
  margin: 0.5rem 0;
 }

-.smtp-form-field {
+.smtp-form-field,
+.info-section-warn {
  max-width: 400px;
  display: block;
 }

+.info-section-warn {
+  margin-bottom: 0.5rem;
+}
+
 .smtp-checkbox {
  max-width: 400px;
  display: block;
@ -40,7 +45,6 @@
      display: flex;
      flex-direction: row;
      align-items: center;
-      margin-bottom: -0.5rem;

      .title {
        font-size: 16px;
--- a/console/src/app/modules/policies/notification-settings/notification-settings.component.ts
+++ b/console/src/app/modules/policies/notification-settings/notification-settings.component.ts
@ -3,13 +3,15 @@ import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/fo
 import { MatDialog } from '@angular/material/dialog';
 import {
    AddSMSProviderTwilioRequest,
+    UpdateSMTPConfigPasswordRequest,
    UpdateSMTPConfigPasswordResponse,
    UpdateSMTPConfigRequest,
 } from 'src/app/proto/generated/zitadel/admin_pb';
-import { SMSProvider, SMSProviderConfigState } from 'src/app/proto/generated/zitadel/settings_pb';
+import { DebugNotificationProvider, SMSProvider, SMSProviderConfigState } from 'src/app/proto/generated/zitadel/settings_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ToastService } from 'src/app/services/toast.service';

+import { InfoSectionType } from '../../info-section/info-section.component';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';

@ -21,11 +23,16 @@ import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-
 export class NotificationSettingsComponent implements OnInit {
  @Input() public serviceType!: PolicyComponentServiceType;
  public smsProviders: SMSProvider.AsObject[] = [];
-
+  public logNotificationProvider!: DebugNotificationProvider.AsObject;
+  public fileNotificationProvider!: DebugNotificationProvider.AsObject;
  public loading: boolean = false;
  public form!: FormGroup;

  public SMSProviderConfigState: any = SMSProviderConfigState;
+  public InfoSectionType: any = InfoSectionType;
+
+  // show available providers
+
  constructor(
    private service: AdminService,
    private dialog: MatDialog,
@ -66,6 +73,30 @@ export class NotificationSettingsComponent implements OnInit {
        console.log(this.smsProviders);
      }
    });
+
+    this.service
+      .getLogNotificationProvider()
+      .then((logNotificationProvider) => {
+        if (logNotificationProvider.provider) {
+          this.logNotificationProvider = logNotificationProvider.provider;
+        }
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+
+    this.service
+      .getFileSystemNotificationProvider()
+      .then((fileNotificationProvider) => {
+        if (fileNotificationProvider.provider) {
+          console.log(fileNotificationProvider);
+          this.fileNotificationProvider = fileNotificationProvider.provider;
+        }
+      })
+      .catch((error) => {
+        console.log('hehe');
+        this.toast.showError(error);
+      });
  }

  private updateData(): Promise<UpdateSMTPConfigPasswordResponse.AsObject> | any {
@ -76,18 +107,16 @@ export class NotificationSettingsComponent implements OnInit {
    req.setTls(this.tls?.value ?? false);
    req.setUser(this.user?.value ?? '');

-    console.log(req.toObject());
-
-    // return this.service.updateSMTPConfig(req).then(() => {
-    //   let passwordReq: UpdateSMTPConfigPasswordRequest;
-    //   if (this.password) {
-    //     passwordReq = new UpdateSMTPConfigPasswordRequest();
-    //     passwordReq.setPassword(this.password.value);
-    //     return this.service.updateSMTPConfigPassword(passwordReq);
-    //   } else {
-    //     return;
-    //   }
-    // });
+    return this.service.updateSMTPConfig(req).then(() => {
+      let passwordReq: UpdateSMTPConfigPasswordRequest;
+      if (this.password) {
+        passwordReq = new UpdateSMTPConfigPasswordRequest();
+        passwordReq.setPassword(this.password.value);
+        return this.service.updateSMTPConfigPassword(passwordReq);
+      } else {
+        return;
+      }
+    });
  }

  public savePolicy(): void {
@ -126,6 +155,10 @@ export class NotificationSettingsComponent implements OnInit {
    });
  }

+  public get twilio(): SMSProvider.AsObject | undefined {
+    return this.smsProviders.find((p) => p.twilio);
+  }
+
  public get senderAddress(): AbstractControl | null {
    return this.form.get('senderAddress');
  }
--- a/console/src/app/modules/policies/notification-settings/notification-settings.module.ts
+++ b/console/src/app/modules/policies/notification-settings/notification-settings.module.ts
@ -10,6 +10,7 @@ import { TranslateModule } from '@ngx-translate/core';

 import { CardModule } from '../../card/card.module';
 import { FormFieldModule } from '../../form-field/form-field.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
 import { InputModule } from '../../input/input.module';
 import { DialogAddSMSProviderComponent } from './dialog-add-sms-provider/dialog-add-sms-provider.component';
 import { NotificationSettingsComponent } from './notification-settings.component';
@ -19,6 +20,7 @@ import { NotificationSettingsComponent } from './notification-settings.component
  imports: [
    CommonModule,
    CardModule,
+    InfoSectionModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
--- a/console/src/app/modules/sidenav/sidenav.component.html
+++ b/console/src/app/modules/sidenav/sidenav.component.html
@ -32,6 +32,7 @@
            [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
          >
            <span>{{ setting.i18nKey | translate }}</span>
+            <mat-icon *ngIf="setting.showWarn" class="warn-icon" svgIcon="mdi_shield_alert"></mat-icon>
          </button>
        </ng-container>
        <ng-template #btn>
--- a/console/src/app/modules/sidenav/sidenav.component.scss
+++ b/console/src/app/modules/sidenav/sidenav.component.scss
@ -67,21 +67,35 @@
          background: none;
          text-align: left;
          padding: 0.75rem 0;
-          opacity: 0.6;
          font-size: 15px;
          cursor: pointer;
          color: map-get($foreground, base);
          display: flex;
          align-items: center;

+          span {
+            opacity: 0.6;
+          }
+
          i {
            font-size: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
          }

+          .warn-icon {
+            color: map-get($background, alert);
+            margin-left: 0.5rem;
+            font-size: 1.2rem;
+            height: 1.2rem;
+            width: 1.2rem;
+            flex-shrink: 0;
+          }
+
          &:hover {
-            opacity: 1;
+            span {
+              opacity: 1;
+            }
          }

          &.mob-only {
@ -108,7 +122,10 @@

          &.active {
            font-weight: 600;
-            opacity: 1;
+
+            span {
+              opacity: 1;
+            }
          }
        }
      }
--- a/console/src/app/modules/sidenav/sidenav.component.ts
+++ b/console/src/app/modules/sidenav/sidenav.component.ts
@ -9,6 +9,7 @@ export interface SidenavSetting {
  i18nKey: string;
  groupI18nKey?: string;
  requiredRoles?: { [serviceType in PolicyComponentServiceType]: string[] };
+  showWarn?: boolean;
 }

@Component({
--- a/console/src/app/pages/failed-events/failed-events.component.html
+++ b/console/src/app/pages/failed-events/failed-events.component.html
@ -1,40 +1,38 @@
 <div class="max-width-container">
  <h1 class="failed-events-title">{{ 'IAM.FAILEDEVENTS.TITLE' | translate }}</h1>
-  <p class="failed-events-desc cnsl-secondary-text">{{'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}</p>
+  <p class="failed-events-desc cnsl-secondary-text">{{ 'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}</p>

  <div class="table-wrapper">
-    <cnsl-refresh-table *ngIf="eventDataSource" (refreshed)="loadEvents()" [dataSize]="eventDataSource.data.length"
-      [loading]="loading$ | async">
-
-      <table [dataSource]="eventDataSource" mat-table class="table " aria-label="Elements">
+    <cnsl-refresh-table (refreshed)="loadEvents()" [dataSize]="eventDataSource.data.length" [loading]="loading$ | async">
+      <table [dataSource]="eventDataSource" mat-table class="table" aria-label="Elements">
        <ng-container matColumnDef="viewName">
-          <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.VIEWNAME' | translate }} </th>
-          <td mat-cell *matCellDef="let event"> {{event.viewName}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.VIEWNAME' | translate }}</th>
+          <td mat-cell *matCellDef="let event">{{ event.viewName }}</td>
        </ng-container>

        <ng-container matColumnDef="database">
-          <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.DATABASE' | translate }} </th>
-          <td mat-cell *matCellDef="let event"> {{event.database}} </td>
+          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.DATABASE' | translate }}</th>
+          <td mat-cell *matCellDef="let event">{{ event.database }}</td>
        </ng-container>

        <ng-container matColumnDef="failedSequence">
-          <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.FAILEDSEQUENCE' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILEDSEQUENCE' | translate }}</th>
          <td mat-cell *matCellDef="let event">
-            <span>{{event?.failedSequence}}</span>
+            <span>{{ event?.failedSequence }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="failureCount">
-          <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.FAILURECOUNT' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.FAILURECOUNT' | translate }}</th>
          <td mat-cell *matCellDef="let event">
-            <span>{{event?.failureCount }}</span>
+            <span>{{ event?.failureCount }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="errorMessage">
-          <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.ERRORMESSAGE' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'IAM.FAILEDEVENTS.ERRORMESSAGE' | translate }}</th>
          <td mat-cell *matCellDef="let event">
-            <span class="failed-event-error-message">{{event?.errorMessage }}</span>
+            <span class="failed-event-error-message">{{ event?.errorMessage }}</span>
          </td>
        </ng-container>

@ -42,8 +40,13 @@
          <th mat-header-cell *matHeaderCellDef></th>
          <td class="back" mat-cell *matCellDef="let event">
            <cnsl-table-actions>
-              <button actions color="warn" mat-icon-button matTooltip="{{'IAM.FAILEDEVENTS.DELETE' | translate}}"
-                (click)="cancelEvent(event.viewName, event.database, event.failedSequence)">
+              <button
+                actions
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'IAM.FAILEDEVENTS.DELETE' | translate }}"
+                (click)="cancelEvent(event.viewName, event.database, event.failedSequence)"
+              >
                <i class="las la-minus-circle"></i>
              </button>
            </cnsl-table-actions>
@ -51,10 +54,10 @@
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
-        <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
+        <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns"></tr>
      </table>
      <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="eventDataSource.data.length || 0">
      </cnsl-paginator>
    </cnsl-refresh-table>
  </div>
-</div>
+</div>
--- a/console/src/app/pages/failed-events/failed-events.component.ts
+++ b/console/src/app/pages/failed-events/failed-events.component.ts
@ -15,7 +15,7 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class FailedEventsComponent implements AfterViewInit {
  @ViewChild(MatPaginator) public eventPaginator!: MatPaginator;
-  public eventDataSource!: MatTableDataSource<FailedEvent.AsObject>;
+  public eventDataSource: MatTableDataSource<FailedEvent.AsObject> = new MatTableDataSource<FailedEvent.AsObject>([]);

  public eventDisplayedColumns: string[] = [
    'viewName',
@ -59,8 +59,8 @@ export class FailedEventsComponent implements AfterViewInit {
        catchError(() => of([])),
        finalize(() => this.loadingSubject.next(false)),
      )
-      .subscribe((views) => {
-        this.eventDataSource = new MatTableDataSource(views);
+      .subscribe((events) => {
+        this.eventDataSource = new MatTableDataSource<FailedEvent.AsObject>(events);
        this.eventDataSource.paginator = this.eventPaginator;
      });
  }
--- a/console/src/app/pages/iam-views/iam-views.component.html
+++ b/console/src/app/pages/iam-views/iam-views.component.html
@ -1,45 +1,42 @@
 <div class="max-width-container">
-    <h1 class="views-title">{{ 'IAM.VIEWS.TITLE' | translate }}</h1>
-    <p class="views-desc cnsl-secondary-text">{{'IAM.VIEWS.DESCRIPTION' | translate }}</p>
+  <h1 class="views-title">{{ 'IAM.VIEWS.TITLE' | translate }}</h1>
+  <p class="views-desc cnsl-secondary-text">{{ 'IAM.VIEWS.DESCRIPTION' | translate }}</p>

-    <cnsl-refresh-table *ngIf="dataSource" (refreshed)="loadViews()" [dataSize]="dataSource.data.length"
-        [loading]="loading$ | async">
+  <cnsl-refresh-table (refreshed)="loadViews()" [dataSize]="dataSource.data.length" [loading]="loading$ | async">
+    <table [dataSource]="dataSource" mat-table class="table views-table" aria-label="Views" matSort>
+      <ng-container matColumnDef="viewName">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'IAM.VIEWS.VIEWNAME' | translate }}</th>
+        <td mat-cell *matCellDef="let view">{{ view.viewName }}</td>
+      </ng-container>

-        <table [dataSource]="dataSource" mat-table class="table views-table" aria-label="Views" matSort>
-            <ng-container matColumnDef="viewName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let view"> {{view.viewName}} </td>
-            </ng-container>
+      <ng-container matColumnDef="database">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'IAM.VIEWS.DATABASE' | translate }}</th>
+        <td mat-cell *matCellDef="let view">{{ view.database }}</td>
+      </ng-container>

-            <ng-container matColumnDef="database">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
-                <td mat-cell *matCellDef="let view"> {{view.database}} </td>
-            </ng-container>
+      <ng-container matColumnDef="sequence">
+        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.SEQUENCE' | translate }}</th>
+        <td mat-cell *matCellDef="let view">{{ view.processedSequence }}</td>
+      </ng-container>

-            <ng-container matColumnDef="sequence">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
-                <td mat-cell *matCellDef="let view"> {{view.processedSequence}} </td>
-            </ng-container>
+      <ng-container matColumnDef="eventTimestamp">
+        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.EVENTTIMESTAMP' | translate }}</th>
+        <td mat-cell *matCellDef="let view">
+          <span>{{ view?.eventTimestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="eventTimestamp">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.EVENTTIMESTAMP' | translate }} </th>
-                <td mat-cell *matCellDef="let view">
-                    <span>{{view?.eventTimestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
-                </td>
-            </ng-container>
+      <ng-container matColumnDef="lastSuccessfulSpoolerRun">
+        <th mat-header-cell *matHeaderCellDef>{{ 'IAM.VIEWS.LASTSPOOL' | translate }}</th>
+        <td mat-cell *matCellDef="let view">
+          <span>{{ view?.lastSuccessfulSpoolerRun | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
+        </td>
+      </ng-container>

-            <ng-container matColumnDef="lastSuccessfulSpoolerRun">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.LASTSPOOL' | translate }} </th>
-                <td mat-cell *matCellDef="let view">
-                    <span>{{view?.lastSuccessfulSpoolerRun | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
-                        }}</span>
-                </td>
-            </ng-container>
-
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-        <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="dataSource.data.length || 0">
-        </cnsl-paginator>
-    </cnsl-refresh-table>
-</div>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+    <cnsl-paginator #paginator class="paginator" [hidePagination]="true" [length]="dataSource.data.length || 0">
+    </cnsl-paginator>
+  </cnsl-refresh-table>
+</div>
--- a/console/src/app/pages/iam-views/iam-views.component.ts
+++ b/console/src/app/pages/iam-views/iam-views.component.ts
@ -17,7 +17,7 @@ export class IamViewsComponent implements AfterViewInit {
  @ViewChild(MatSort) sort!: MatSort;

  @ViewChild(MatPaginator) public paginator!: MatPaginator;
-  public dataSource!: MatTableDataSource<View.AsObject>;
+  public dataSource: MatTableDataSource<View.AsObject> = new MatTableDataSource<View.AsObject>([]);

  public displayedColumns: string[] = ['viewName', 'database', 'sequence', 'eventTimestamp', 'lastSuccessfulSpoolerRun'];

@ -51,7 +51,7 @@ export class IamViewsComponent implements AfterViewInit {
        finalize(() => this.loadingSubject.next(false)),
      )
      .subscribe((views) => {
-        this.dataSource = new MatTableDataSource(views);
+        this.dataSource = new MatTableDataSource<View.AsObject>(views);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
--- a/console/src/app/pages/instance-settings/instance-settings.component.ts
+++ b/console/src/app/pages/instance-settings/instance-settings.component.ts
@ -31,7 +31,7 @@ export class InstanceSettingsComponent {
  public settingsList: SidenavSetting[] = [
    GENERAL,
    // notifications
-    NOTIFICATIONS,
+    { showWarn: true, ...NOTIFICATIONS },
    // login
    LOGIN,
    COMPLEXITY,
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.ts
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.ts
@ -241,7 +241,12 @@ export class UserTableComponent implements OnInit {

  public applySearchQuery(searchQueries: SearchQuery[]): void {
    this.selection.clear();
-    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize, this.type, searchQueries);
+    this.getData(
+      this.paginator ? this.paginator.pageSize : this.INITIAL_PAGE_SIZE,
+      this.paginator ? this.paginator.pageIndex * this.paginator.pageSize : 0,
+      this.type,
+      searchQueries,
+    );
  }

  public deleteUser(user: User.AsObject): void {
--- a/console/src/app/services/admin.service.ts
+++ b/console/src/app/services/admin.service.ts
@ -579,9 +579,8 @@ export class AdminService {
    return this.grpcService.admin.getLogNotificationProvider(req, null).then((resp) => resp.toObject());
  }

-  public getFileSystemNotificationProvider(
-    req: GetFileSystemNotificationProviderRequest,
-  ): Promise<GetFileSystemNotificationProviderResponse.AsObject> {
+  public getFileSystemNotificationProvider(): Promise<GetFileSystemNotificationProviderResponse.AsObject> {
+    const req = new GetFileSystemNotificationProviderRequest();
    return this.grpcService.admin.getFileSystemNotificationProvider(req, null).then((resp) => resp.toObject());
  }

--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -847,7 +847,8 @@
      "USER": "Benutzer",
      "PASSWORD": "Passwort",
      "TLS": "Transport Layer Security (TLS)",
-      "SAVED": "Erfolgreich gespeichert."
+      "SAVED": "Erfolgreich gespeichert.",
+      "REQUIREDWARN": "Damit Mails von Ihrer Domain verschickt werden können, müssen Sie Ihre SMTP Einstellungen konfigurieren."
    },
    "SMS": {
      "TITLE": "SMS Einstellungen",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -847,7 +847,8 @@
      "USER": "User",
      "PASSWORD": "Password",
      "TLS": "Transport Layer Security (TLS)",
-      "SAVED": "Saved successfully!"
+      "SAVED": "Saved successfully!",
+      "REQUIREDWARN": "To send notifications from your domain, you have to enter your SMTP data."
    },
    "SMS": {
      "TITLE": "SMS Settings",
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@ -847,7 +847,8 @@
      "USER": "Utente",
      "PASSWORD": "Password",
      "TLS": "Transport Layer Security (TLS)",
-      "SAVED": "Salvato con successo!"
+      "SAVED": "Salvato con successo!",
+      "REQUIREDWARN": "Per inviare notifiche dal tuo dominio, devi inserire i tuoi dati SMTP."
    },
    "SMS": {
      "TITLE": "Impostazioni SMS",
--- a/console/src/assets/mdi/shield-alert.svg
+++ b/console/src/assets/mdi/shield-alert.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5M11,7H13V13H11M11,15H13V17H11" /></svg>
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@ -253,6 +253,7 @@ $caos-dark-theme-background: (
  tooltip: map_get($mat-gray, 700),
  infosection: map_get($caos-dark-background, 300),
  warninfosection: #741f2c4a,
+  alertinfosection: #92400e50,
  successinfosection: map_get($caos-dark-background, 300),
  state: map_get($caos-dark-background, 300),
  state-active: #68cf8340,
@ -261,6 +262,7 @@ $caos-dark-theme-background: (
  moz-toolbar: map_get($caos-dark-background, 500),
  footer: #00000020,
  metadata-section: #00000020,
+  alert: #fbbf24,
 );

 $caos-light-theme-background: (
@ -287,11 +289,13 @@ $caos-light-theme-background: (
  tooltip: map_get($mat-gray, 700),
  infosection: map_get($caos-light-primary, 100),
  warninfosection: #ffc1c1,
+  alertinfosection: rgb(251, 191, 36),
  successinfosection: #cbf4c9,
  toolbar: rgba(map_get($caos-light-background, 500), 0.9),
  moz-toolbar: map_get($caos-light-background, 500),
  footer: #00000008,
  metadata-section: #605f5f08,
+  alert: rgb(251, 191, 36),
 );

 $caos-dark-theme-foreground: (
@ -313,6 +317,7 @@ $caos-dark-theme-foreground: (
  slider-off-active: rgba(white, 0.38),
  infosection: #f0f0f0,
  warninfosection: #ffc1c1,
+  alertinfosection: rgb(251, 191, 36),
  successinfosection: #cbf4c9,
  toolbar-items: map-get(map-get($caos-dark-primary, contrast), 500),
  slash: #ffffff6e,
@ -337,6 +342,7 @@ $caos-light-theme-foreground: (
  slider-off-active: rgba(black, 0.38),
  infosection: #4a4a4a,
  warninfosection: #620e0e,
+  alertinfosection: rgb(146, 64, 14),
  successinfosection: #0e6245,
  toolbar-items: map-get(map-get($caos-light-primary, contrast), 500),
  slash: #0000006e,
--- a/console/tsconfig.json
+++ b/console/tsconfig.json
@ -16,10 +16,7 @@
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
-    "lib": [
-      "es2019",
-      "dom"
-    ]
+    "lib": ["es2020", "dom"]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
				`@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5M11,7H13V13H11M11,15H13V17H11" /></svg>`