feat(console): actions and flows (#2559)

* features, page, table, create dialog, i18n * trigger actions service, add action dialog * display flows, add flow dialog, duration pipe, i18n * optim flow layout, action presets * delete actions, flows, layout * drag drop list, fix update * lint * stylelint * fix template rest * actions, drag, fix hasrole * stylelint * toast, i18n * missing italian translations * it * fix ActionSearchQueries Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-02-28 20:47:22 +00:00 · 2021-11-16 08:18:03 +01:00 · 2021-11-16 08:18:03 +01:00 · 06e1af4f78
commit 06e1af4f78
parent b80751d7f7
36 changed files with 2271 additions and 914 deletions
--- a/console/src/app/app-routing.module.ts
+++ b/console/src/app/app-routing.module.ts
@ -73,6 +73,14 @@ const routes: Routes = [
        data: {
            roles: ['org.read'],
        },
+    },
+    {
+      path: 'actions',
+      loadChildren: () => import('./pages/actions/actions.module').then(m => m.ActionsModule),
+      canActivate: [AuthGuard, RoleGuard],
+      data: {
+          roles: ['org.read'],
+      },
  },
    {
        path: 'grants',
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@ -34,8 +34,7 @@

        <div class="filter-wrapper">
          <input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
-                        (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
-                        #input>
+            (click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
        </div>

        <div class="org-wrapper">
@ -51,7 +50,7 @@
        <ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
          <button mat-menu-item [routerLink]="[ '/org/create' ]">
            <mat-icon class="avatar">add</mat-icon>
-                        {{'MENU.NEWORG' | translate}}
+            {{'MENU.NEWORG' | translate}}
          </button>
        </ng-template>
      </mat-menu>
@ -62,7 +61,8 @@
      <div (clickOutside)="closeAccountCard()" class="icon-container">
        <cnsl-avatar
          *ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
-                    class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"  [avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName"
+          class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
+          [avatarUrl]="user.human?.profile?.avatarUrl || ''" [forColor]="user?.preferredLoginName"
          [name]="user.human.profile.displayName ? user.human.profile.displayName : (user.human.profile.firstName + ' '+ user.human.profile.lastName)"
          [size]="38">
        </cnsl-avatar>
@ -76,8 +76,8 @@
        [opened]="(isHandset$ | async) === false && authenticationService.authenticated">
        <div class="side-column">
          <div class="list">
-                        <a @navitem class="nav-item" [routerLinkActive]="['active']"
-                            [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/']">
+            <a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
+              [routerLink]="['/']">
              <i class="icon las la-home"></i>
              <span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
            </a>
@ -122,8 +122,7 @@

                <a @navitem matTooltip="{{'MENU.TOOLTIP.GRANTEDPROJECTS' | translate}}"
                  *ngIf="mgmtService?.grantedProjectsCount && (mgmtService?.grantedProjectsCount | async)"
-                                    class="nav-item" [routerLinkActive]="['active']"
-                                    [routerLink]="[ '/granted-projects']">
+                  class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/granted-projects']">
                  <i class="icon las la-layer-group"></i>
                  <div class="c_label">
                    <span>{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
@ -156,6 +155,15 @@
                  <span class="label">{{ 'MENU.GRANTS' | translate }}</span>
                </a>
              </ng-template>
+
+              <ng-template cnslHasFeature [hasFeature]="['actions']">
+                <a @navitem matTooltip="{{'MENU.TOOLTIP.ACTIONS' | translate}}" class="nav-item"
+                  [routerLinkActive]="['active']" [routerLink]="[ '/actions']"
+                  [routerLinkActiveOptions]="{ exact: true }">
+                  <i class="icon las la-exchange-alt"></i>
+                  <span class="label">{{ 'MENU.ACTIONS' | translate }}</span>
+                </a>
+              </ng-template>
            </div>

            <ng-container *ngIf="iamuser$ | async">
@ -180,12 +188,10 @@
            <span class="fill-space"></span>

            <div class="toc-line" *ngIf="privacyPolicy">
-                            <a class="toc" [href]="privacyPolicy.tosLink" alt="Terms and Conditions"
-                                target="_blank">{{'MENU.TOS'
+              <a class="toc" [href]="privacyPolicy.tosLink" alt="Terms and Conditions" target="_blank">{{'MENU.TOS'
                | translate}}</a>
              <span class="slash">|</span>
-                            <a class="toc" [href]="privacyPolicy.privacyLink" alt="Privacy Policy "
-                                target="_blank">{{'MENU.PRIVACY'
+              <a class="toc" [href]="privacyPolicy.privacyLink" alt="Privacy Policy " target="_blank">{{'MENU.PRIVACY'
                | translate}}</a>
              <span>&nbsp;&nbsp;&nbsp;</span>
            </div>
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@ -165,6 +165,16 @@ export class AppComponent implements OnDestroy {

    this.matIconRegistry.addSvgIcon('mdi_api', this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/api.svg'));

+    this.matIconRegistry.addSvgIcon(
+      'mdi_arrow_right_bottom',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/arrow-right-bottom.svg'),
+    );
+
+    this.matIconRegistry.addSvgIcon(
+      'mdi_arrow_decision',
+      this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/arrow-decision-outline.svg'),
+    );
+
    this.activatedRoute.queryParams.pipe(takeUntil(this.destroy$)).subscribe((route) => {
      const { org } = route;
      if (org) {
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@ -30,6 +30,7 @@ import { SubscriptionService } from 'src/app/services/subscription.service';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HasFeatureModule } from './directives/has-feature/has-feature.module';
 import { HasRoleModule } from './directives/has-role/has-role.module';
 import { OutsideClickModule } from './directives/outside-click/outside-click.module';
 import { AccountsCardModule } from './modules/accounts-card/accounts-card.module';
@ -118,6 +119,7 @@ const authConfig: AuthConfig = {
    InputModule,
    HasRolePipeModule,
    HasFeaturePipeModule,
+    HasFeatureModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatToolbarModule,
--- a/console/src/app/directives/has-feature/has-feature.directive.ts
+++ b/console/src/app/directives/has-feature/has-feature.directive.ts
@ -14,11 +14,11 @@ export class HasFeatureDirective {
        if (isAllowed && !this.hasView) {
          this.viewContainerRef.clear();
          this.viewContainerRef.createEmbeddedView(this.templateRef);
-        } else if (this.hasView) {
+        } else {
          this.viewContainerRef.clear();
          this.hasView = false;
        }
-      });
+      })
    }
  }

--- a/console/src/app/directives/has-role/has-role.directive.ts
+++ b/console/src/app/directives/has-role/has-role.directive.ts
@ -1,20 +1,18 @@
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';

-
@Directive({
  selector: '[cnslHasRole]',
 })
-
 export class HasRoleDirective {
  private hasView: boolean = false;
  @Input() public set hasRole(roles: string[] | RegExp[]) {
    if (roles && roles.length > 0) {
-      this.authService.isAllowed(roles).subscribe(isAllowed => {
+      this.authService.isAllowed(roles).subscribe((isAllowed) => {
        if (isAllowed && !this.hasView) {
          this.viewContainerRef.clear();
          this.viewContainerRef.createEmbeddedView(this.templateRef);
-        } else if (this.hasView) {
+        } else {
          this.viewContainerRef.clear();
          this.hasView = false;
        }
--- a/console/src/app/modules/features/features.component.html
+++ b/console/src/app/modules/features/features.component.html
@ -8,8 +8,7 @@
  <div class="detail">
    <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
    <p class="center">{{features?.tier?.name}}
-          <a class="ext" href="https://zitadel.ch/pricing"
-          target="_blank">
+      <a class="ext" href="https://zitadel.ch/pricing" target="_blank">
        <i class="las la-external-link-alt"></i>
      </a>
    </p>
@ -32,17 +31,18 @@
      </p>
    </div>

-        <p class="error" *ngIf="(stripeCustomer || stripeCustomer === null) && !customerValid">{{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>
+    <p class="error" *ngIf="(stripeCustomer || stripeCustomer === null) && !customerValid">
+      {{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>

    <div class="current-tier">
-            <a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL" target="_blank"
-                alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
+      <a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL"
+        target="_blank" alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
    </div>
  </ng-container>

  <ng-template cnslHasRole [hasRole]="['iam.features.delete']">
-        <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault"
-            matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="resetFeatures()" mat-stroked-button>
+    <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault" matTooltip="{{'POLICY.RESET' | translate}}"
+      color="warn" (click)="resetFeatures()" mat-stroked-button>
      {{'POLICY.RESET' | translate}}
    </button>
  </ng-template>
@ -68,8 +68,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyUsernameLogin}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyUsernameLogin"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyUsernameLogin" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -81,8 +81,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyPasswordReset}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordReset"
-          *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyPasswordReset" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -94,8 +94,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyRegistration}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyRegistration"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyRegistration" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -107,8 +107,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyIdp}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyIdp" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -120,8 +120,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyFactors}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyFactors"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyFactors" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -133,8 +133,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.loginPolicyPasswordless}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordless"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.loginPolicyPasswordless" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -149,8 +149,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.passwordComplexityPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.passwordComplexityPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.passwordComplexityPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -163,8 +163,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.lockoutPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.lockoutPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.lockoutPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -178,8 +178,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.labelPolicyPrivateLabel}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyPrivateLabel"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.labelPolicyPrivateLabel" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -191,8 +191,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.labelPolicyWatermark}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyWatermark"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.labelPolicyWatermark" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -204,10 +204,9 @@
      </div>
      <span class="left-desc">{{'FEATURES.DATA.CUSTOMDOMAIN' | translate}}</span>
      <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-          [ngTemplateOutletContext]="{active: features.customDomain}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customDomain"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.customDomain}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customDomain" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -221,8 +220,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.customTextMessage}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextMessage"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customTextMessage" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -234,8 +233,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.customTextLogin}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextLogin"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.customTextLogin" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -247,8 +246,8 @@
      <span class="fill-space"></span>
      <template [ngTemplateOutlet]="templateRef"
        [ngTemplateOutletContext]="{active: features.privacyPolicy}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.privacyPolicy"
-              *ngIf="(['iam.features.write'] | hasRole | async)">
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.privacyPolicy" *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>

@ -260,17 +259,27 @@
      </div>
      <span class="left-desc">{{'FEATURES.DATA.METADATAUSER' | translate}}</span>
      <span class="fill-space"></span>
-          <template [ngTemplateOutlet]="templateRef"
-                        [ngTemplateOutletContext]="{active: features.metadataUser}"></template>
-          <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.metadataUser"
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.metadataUser}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl
+        [(ngModel)]="features.metadataUser" *ngIf="(['iam.features.write'] | hasRole | async)">
+      </mat-slide-toggle>
+    </div>
+
+    <div class="row">
+      <div class="featureavatar pink">
+        <i class="icon las la-exchange-alt"></i>
+      </div>
+      <span class="left-desc">{{'FEATURES.DATA.FLOWS' | translate}}</span>
+      <span class="fill-space"></span>
+      <template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{active: features.actions}"></template>
+      <mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.actions"
        *ngIf="(['iam.features.write'] | hasRole | async)">
      </mat-slide-toggle>
    </div>
  </div>

  <div class="btn-container" *ngIf="(['iam.features.write'] | hasRole | async) === true">
-        <button (click)="savePolicy()" color="primary"
-            type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
+    <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
      }}</button>
  </div>
 </cnsl-detail-layout>
--- a/console/src/app/modules/features/features.component.scss
+++ b/console/src/app/modules/features/features.component.scss
@ -109,6 +109,10 @@
        background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
      }

+      &.pink {
+        background: linear-gradient(40deg, #db2777 30%, #be185d);
+      }
+
      &.yellow {
        background: linear-gradient(40deg, #f59e0b 30%, #b45309);
      }
--- a/console/src/app/modules/features/features.component.ts
+++ b/console/src/app/modules/features/features.component.ts
@ -167,6 +167,7 @@ export class FeaturesComponent implements OnDestroy {
        req.setPrivacyPolicy(this.features.privacyPolicy);
        req.setMetadataUser(this.features.metadataUser);
        req.setLockoutPolicy(this.features.lockoutPolicy);
+        req.setActions(this.features.actions);

        this.adminService.setOrgFeatures(req).then(() => {
          this.toast.showInfo('POLICY.TOAST.SET', true);
@ -191,6 +192,7 @@ export class FeaturesComponent implements OnDestroy {
        dreq.setCustomTextMessage(this.features.customTextMessage);
        dreq.setMetadataUser(this.features.metadataUser);
        dreq.setLockoutPolicy(this.features.lockoutPolicy);
+        dreq.setActions(this.features.actions);

        this.adminService.setDefaultFeatures(dreq).then(() => {
          this.toast.showInfo('POLICY.TOAST.SET', true);
--- a/console/src/app/pages/actions/action-table/action-table.component.html
+++ b/console/src/app/pages/actions/action-table/action-table.component.html
@ -0,0 +1,66 @@
+<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource?.data?.length ?? 0"
+  [timestamp]="actionsResult?.details?.viewTimestamp" [selection]="selection">
+  <div actions>
+    <a color="primary" mat-raised-button (click)="openAddAction()">
+      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+    </a>
+  </div>
+
+  <div class="table-wrapper">
+    <table class="table" mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let key">
+          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ID' | translate }} </th>
+        <td mat-cell *matCellDef="let action"> {{ action?.id }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.NAME' | translate }} </th>
+        <td mat-cell *matCellDef="let action"> {{ action?.name }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.STATE' | translate }} </th>
+        <td mat-cell *matCellDef="let action">
+          <span class="state"
+            [ngClass]="{'active': action.state === ActionState.ACTION_STATE_ACTIVE,'inactive': action.state === ActionState.ACTION_STATE_INACTIVE }">
+            {{'FLOWS.STATES.'+action.state | translate}}</span>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="timeout">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.TIMEOUT' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.timeout | durationToSeconds}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="allowedToFail">
+        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ALLOWEDTOFAIL' | translate }} </th>
+        <td mat-cell *matCellDef="let key">
+          {{key.allowedToFail}}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr class="highlight" mat-row *matRowDef="let action; columns: displayedColumns;" (click)="openDialog(action)">
+      </tr>
+    </table>
+    <cnsl-paginator #paginator class="paginator" [timestamp]="actionsResult?.details?.viewTimestamp"
+      [length]="actionsResult?.details?.totalResult || 0" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
+      (page)="changePage($event)"></cnsl-paginator>
+  </div>
+</cnsl-refresh-table>
--- a/console/src/app/pages/actions/action-table/action-table.component.scss
+++ b/console/src/app/pages/actions/action-table/action-table.component.scss
@ -0,0 +1,37 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}
--- a/console/src/app/pages/actions/action-table/action-table.component.spec.ts
+++ b/console/src/app/pages/actions/action-table/action-table.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionTableComponent } from './action-table.component';
+
+describe('ActionTableComponent', () => {
+  let component: ActionTableComponent;
+  let fixture: ComponentFixture<ActionTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console/src/app/pages/actions/action-table/action-table.component.ts
+++ b/console/src/app/pages/actions/action-table/action-table.component.ts
@ -0,0 +1,128 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
+import { Action, ActionState } from 'src/app/proto/generated/zitadel/action_pb';
+import {
+  CreateActionRequest,
+  ListActionsResponse,
+  UpdateActionRequest,
+} from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddActionDialogComponent } from '../add-action-dialog/add-action-dialog.component';
+
+@Component({
+  selector: 'cnsl-action-table',
+  templateUrl: './action-table.component.html',
+  styleUrls: ['./action-table.component.scss']
+})
+export class ActionTableComponent implements OnInit {
+  @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
+  public dataSource: MatTableDataSource<Action.AsObject> = new MatTableDataSource<Action.AsObject>();
+  public selection: SelectionModel<Action.AsObject> = new SelectionModel<Action.AsObject>(true, []);
+  public actionsResult!: ListActionsResponse.AsObject;
+  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+  @Input() public displayedColumns: string[] = ['select', 'id', 'name', 'state', 'timeout', 'allowedToFail'];
+
+  @Output() public changedSelection: EventEmitter<Array<Action.AsObject>> = new EventEmitter();
+
+  public ActionState: any = ActionState;
+  constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
+    private toast: ToastService) {
+    this.selection.changed.subscribe(() => {
+      this.changedSelection.emit(this.selection.selected);
+    });
+  }
+
+  public ngOnInit(): void {
+    this.getData(10, 0);
+  }
+
+
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+
+  public changePage(event: PageEvent): void {
+    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+  }
+
+  public deleteKey(action: Action.AsObject): void {
+    this.mgmtService.deleteAction(action.id).then(() => {
+      this.selection.clear();
+      this.toast.showInfo('FLOWS.TOAST.SELECTEDKEYSDELETED', true);
+      this.getData(10, 0);
+    }).catch(error => {
+      this.toast.showError(error);
+    });
+  }
+
+  public openAddAction(): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {},
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: CreateActionRequest) => {
+      if (req) {
+        this.mgmtService.createAction(req).then(resp => {
+          this.refreshPage();
+        }).catch((error: any) => {
+          this.toast.showError(error);
+        });
+      }
+    });
+  }
+
+  public openDialog(action: Action.AsObject): void {
+    const dialogRef = this.dialog.open(AddActionDialogComponent, {
+      data: {
+        action: action,
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: UpdateActionRequest) => {
+      if (req) {
+        this.mgmtService.updateAction(req).then(resp => {
+          this.refreshPage();
+        }).catch((error: any) => {
+          this.toast.showError(error);
+        });
+      }
+    });
+  }
+
+  private async getData(limit: number, offset: number): Promise<void> {
+    this.loadingSubject.next(true);
+    
+    this.mgmtService.listActions(limit, offset).then(resp => {
+      this.actionsResult = resp;
+      this.dataSource.data = this.actionsResult.resultList;
+      this.loadingSubject.next(false);
+    }).catch((error: any) => {
+      this.toast.showError(error);
+      this.loadingSubject.next(false);
+    });
+  }
+
+  public refreshPage(): void {
+    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+  }
+}
--- a/console/src/app/pages/actions/actions-routing.module.ts
+++ b/console/src/app/pages/actions/actions-routing.module.ts
@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ActionsComponent } from './actions.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ActionsComponent,
+},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ActionsRoutingModule { }
--- a/console/src/app/pages/actions/actions.component.html
+++ b/console/src/app/pages/actions/actions.component.html
@ -0,0 +1,66 @@
+<div class="enlarged-container">
+  <h1>{{ 'FLOWS.TITLE' | translate }}</h1>
+  <p class="desc">{{'FLOWS.DESCRIPTION' | translate }}</p>
+
+  <cnsl-info-section *ngIf="(['actions'] | hasFeature | async) === false" [featureLink]="['/org/features']" class="info"
+    [type]="InfoSectionType.WARN">
+    <span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'actions'})"></span>
+  </cnsl-info-section>
+
+  <div class="title-section">
+    <h2>{{'FLOWS.ACTIONSTITLE' | translate}}</h2>
+    <i class="las la-code"></i>
+  </div>
+
+  <ng-template cnslHasRole [hasRole]="[ 'org.action.read']">
+    <cnsl-action-table (changedSelection)="selection = $event"></cnsl-action-table>
+  </ng-template>
+
+  <div class="title-section">
+    <h2>{{'FLOWS.FLOWSTITLE' | translate}}</h2>
+    <i class="las la-exchange-alt"></i>
+  </div>
+
+  <ng-template cnslHasRole [hasRole]="[ 'org.flow.read']">
+    <div *ngIf="flow" class="flow">
+      <cnsl-form-field class="formfield" appearance="outline">
+        <cnsl-label>{{ 'FLOWS.FLOWTYPE' | translate }}</cnsl-label>
+        <mat-select [formControl]="typeControl">
+          <mat-option *ngFor="let type of typesForSelection" [value]="type">
+            {{ 'FLOWS.TYPES.'+type | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+
+      <div class="topelements">
+        <div class="flow-type mat-elevation-z1">
+          <span>{{'FLOWS.TYPES.'+flow.type | translate}}</span>
+          <button (click)="clearFlow()" color="warn" mat-raised-button>{{'ACTIONS.CLEAR' | translate}}</button>
+        </div>
+      </div>
+
+      <div class="trigger-wrapper">
+        <div *ngFor="let trigger of flow.triggerActionsList; index as i" class="trigger mat-elevation-z1">
+          <mat-icon svgIcon="mdi_arrow_right_bottom" class="icon"></mat-icon>
+          <span>{{'FLOWS.TRIGGERTYPES.'+trigger.triggerType | translate}}</span>
+          <span class="fill-space"></span>
+          <div class="action-wrapper" cdkDropList (cdkDropListDropped)="drop(i, trigger.actionsList, $event)">
+            <div cdkDrag cdkDragLockAxis="y" cdkDragBoundary=".action-wrapper" class="action"
+              *ngFor="let action of trigger.actionsList">
+              <i class="las la-code"></i>
+              <span>{{action.name}}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="topbottomline"></div>
+
+        <button class="add-btn" mat-raised-button color="primary" (click)="openAddTrigger()">
+          <span>{{'ACTIONS.NEW' | translate}}</span>
+          <span *ngIf="selection && selection.length">&nbsp;({{selection.length}})</span>
+          <mat-icon>add</mat-icon>
+        </button>
+      </div>
+    </div>
+  </ng-template>
+</div>
--- a/console/src/app/pages/actions/actions.component.scss
+++ b/console/src/app/pages/actions/actions.component.scss
@ -0,0 +1,124 @@
+h1 {
+  margin: 0;
+}
+
+.desc {
+  color: var(--grey);
+  margin-bottom: 2rem;
+  font-size: 14px;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+
+  h2 {
+    margin: 0;
+  }
+
+  i {
+    margin-left: .5rem;
+  }
+}
+
+.flow {
+  display: flex;
+  flex-direction: column;
+  max-width: 1000px;
+
+  .flow-type {
+    padding: 1rem 1rem;
+    margin: .5rem 0;
+    border-radius: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .topelements {
+    border: 3px solid var(--color-main);
+    border-radius: 1rem;
+    padding: 0 .5rem;
+  }
+
+  .trigger-wrapper {
+    padding-left: 100px;
+    position: relative;
+
+    .topbottomline {
+      position: absolute;
+      top: 0;
+      bottom: 100px;
+      left: 120px;
+      width: 3px;
+      z-index: -1;
+      background-color: var(--color-main);
+    }
+
+    .trigger {
+      padding: .5rem 1rem;
+      border-radius: .5rem;
+      display: flex;
+      align-items: center;
+      background: var(--color-main);
+      color: white;
+      margin: .5rem 0;
+      min-height: 40px;
+
+      .icon {
+        margin-right: 1rem;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      .action-wrapper {
+        padding: 0 .5rem;
+
+        .action {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          padding: .5rem 0;
+          cursor: move;
+
+          i {
+            margin-right: .5rem;
+          }
+        }
+      }
+    }
+  }
+
+  .add-btn {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    margin: 1rem 0;
+  }
+}
+
+.cdk-drag-preview {
+  color: white;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  border-radius: .5rem;
+  padding: 0 .5rem;
+  background-color: var(--color-main);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+
+  i {
+    margin-right: .5rem;
+  }
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, .2, 1);
+}
--- a/console/src/app/pages/actions/actions.component.spec.ts
+++ b/console/src/app/pages/actions/actions.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsComponent } from './actions.component';
+
+describe('ActionsComponent', () => {
+  let component: ActionsComponent;
+  let fixture: ComponentFixture<ActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console/src/app/pages/actions/actions.component.ts
+++ b/console/src/app/pages/actions/actions.component.ts
@ -0,0 +1,109 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Action, Flow, 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';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.component';
+
+@Component({
+  selector: 'cnsl-actions',
+  templateUrl: './actions.component.html',
+  styleUrls: ['./actions.component.scss'],
+})
+export class ActionsComponent {
+  public flow!: Flow.AsObject;
+  public flowType: FlowType = FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION;
+
+  public typeControl: FormControl = new FormControl(FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION);
+
+  public typesForSelection: FlowType[] = [FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION];
+
+  public selection: Action.AsObject[] = [];
+  public InfoSectionType: any = InfoSectionType;
+
+  constructor(private mgmtService: ManagementService, private dialog: MatDialog, private toast: ToastService) {
+    this.loadFlow();
+  }
+
+  private loadFlow() {
+    this.mgmtService.getFlow(this.flowType).then((flowResponse) => {
+      if (flowResponse.flow) this.flow = flowResponse.flow;
+    });
+  }
+
+  public clearFlow(): void {
+    const dialogRef = this.dialog.open(WarnDialogComponent, {
+      data: {
+        confirmKey: 'ACTIONS.CLEAR',
+        cancelKey: 'ACTIONS.CANCEL',
+        titleKey: 'FLOWS.DIALOG.CLEAR.TITLE',
+        descriptionKey: 'FLOWS.DIALOG.CLEAR.DESCRIPTION',
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((resp) => {
+      if (resp) {
+        this.mgmtService
+          .clearFlow(this.flowType)
+          .then((resp) => {
+            this.loadFlow();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  public openAddTrigger(): void {
+    const dialogRef = this.dialog.open(AddFlowDialogComponent, {
+      data: {
+        flowType: this.flowType,
+        triggerType: TriggerType.TRIGGER_TYPE_POST_AUTHENTICATION,
+        actions: this.selection && this.selection.length ? this.selection : [],
+      },
+      width: '400px',
+    });
+
+    dialogRef.afterClosed().subscribe((req: SetTriggerActionsRequest) => {
+      if (req) {
+        this.mgmtService
+          .setTriggerActions(req.getActionIdsList(), req.getFlowType(), req.getTriggerType())
+          .then((resp) => {
+            this.loadFlow();
+          })
+          .catch((error: any) => {
+            this.toast.showError(error);
+          });
+      }
+    });
+  }
+
+  drop(triggerActionsListIndex: number, array: any[], event: CdkDragDrop<Action.AsObject[]>) {
+    moveItemInArray(array, event.previousIndex, event.currentIndex);
+    this.saveFlow(triggerActionsListIndex);
+  }
+
+  saveFlow(index: number) {
+    console.log(this.flow.triggerActionsList[index].actionsList.map((action) => action.id));
+    this.mgmtService
+      .setTriggerActions(
+        this.flow.triggerActionsList[index].actionsList.map((action) => action.id),
+        this.flowType,
+        this.flow.triggerActionsList[index].triggerType,
+      )
+      .then((updateResponse) => {
+        this.toast.showInfo('FLOWS.TOAST.ACTIONSSET', true);
+      })
+      .catch((error) => {
+        this.toast.showError(error);
+      });
+  }
+}
--- a/console/src/app/pages/actions/actions.module.ts
+++ b/console/src/app/pages/actions/actions.module.ts
@ -0,0 +1,60 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { FormFieldModule } from 'src/app/modules/form-field/form-field.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
+import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
+import { DurationToSecondsPipeModule } from 'src/app/pipes/duration-to-seconds-pipe/duration-to-seconds-pipe.module';
+import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+import { ActionTableComponent } from './action-table/action-table.component';
+import { ActionsRoutingModule } from './actions-routing.module';
+import { ActionsComponent } from './actions.component';
+import { AddActionDialogComponent } from './add-action-dialog/add-action-dialog.component';
+import { AddFlowDialogComponent } from './add-flow-dialog/add-flow-dialog.component';
+
+@NgModule({
+  declarations: [ActionsComponent, ActionTableComponent, AddActionDialogComponent, AddFlowDialogComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ActionsRoutingModule,
+    TranslateModule,
+    MatDialogModule,
+    RefreshTableModule,
+    MatTableModule,
+    PaginatorModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    DurationToSecondsPipeModule,
+    TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
+    HasRoleModule,
+    MatTooltipModule,
+    MatCheckboxModule,
+    InputModule,
+    FormFieldModule,
+    MatSelectModule,
+    WarnDialogModule,
+    DragDropModule,
+    InfoSectionModule,
+    HasFeaturePipeModule,
+  ],
+})
+export class ActionsModule {}
--- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html
+++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.html
@ -0,0 +1,39 @@
+<span *ngIf="!id" class="title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
+<span *ngIf="id" class="title" mat-dialog-title>{{'FLOWS.DIALOG.UPDATE.TITLE' | translate}}</span>
+
+<div mat-dialog-content>
+  <!-- <p class="desc"> {{'FLOWS.DIALOG.ADD.DESCRIPTION' | translate}}</p> -->
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.NAME' | translate}}</cnsl-label>
+    <input cnslInput [(ngModel)]="name">
+  </cnsl-form-field>
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.SCRIPT' | translate}}</cnsl-label>
+    <textarea class="script" cnslInput [(ngModel)]="script"></textarea>
+  </cnsl-form-field>
+
+  <cnsl-form-field class="form-field" appearance="outline">
+    <cnsl-label>{{'FLOWS.TIMEOUTINSEC' | translate}}</cnsl-label>
+    <input type="number" cnslInput [(ngModel)]="durationInSec">
+  </cnsl-form-field>
+
+  <mat-checkbox [(ngModel)]="allowedToFail">{{'FLOWS.ALLOWEDTOFAIL' | translate}}</mat-checkbox>
+</div>
+<div mat-dialog-actions class=" action">
+  <button *ngIf="id" mat-stroked-button color="warn" (click)="deleteAndCloseDialog()">
+    {{'ACTIONS.DELETE' | translate}}
+  </button>
+
+  <span class="fill-space"></span>
+
+  <button mat-button (click)="closeDialog()">
+    {{'ACTIONS.CANCEL' | translate}}
+  </button>
+
+  <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
+    <span *ngIf="!id">{{'ACTIONS.ADD' | translate}}</span>
+    <span *ngIf="id">{{'ACTIONS.SAVE' | translate}}</span>
+  </button>
+</div>
--- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss
+++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss
@ -0,0 +1,27 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  font-size: .9rem;
+}
+
+.script {
+  min-height: 200px;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+
+  .fill-space {
+    flex: 1;
+  }
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}
--- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.spec.ts
+++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddKeyDialogComponent } from './add-key-dialog.component';
+
+describe('AddKeyDialogComponent', () => {
+    let component: AddKeyDialogComponent;
+    let fixture: ComponentFixture<AddKeyDialogComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddKeyDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddKeyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
--- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts
+++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts
@ -0,0 +1,99 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Action } from 'src/app/proto/generated/zitadel/action_pb';
+import { CreateActionRequest, UpdateActionRequest } from 'src/app/proto/generated/zitadel/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+
+@Component({
+    selector: 'cnsl-add-action-dialog',
+    templateUrl: './add-action-dialog.component.html',
+    styleUrls: ['./add-action-dialog.component.scss'],
+})
+export class AddActionDialogComponent {
+    public name: string = '';
+    public script: string = '';
+    public durationInSec: number = 10;
+    public allowedToFail: boolean = false;
+
+    public id: string = '';
+    
+    constructor(
+      private toast: ToastService,
+      private mgmtService: ManagementService,
+      private dialog: MatDialog,
+        public dialogRef: MatDialogRef<AddActionDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+       if (data && data.action) {
+        const action: Action.AsObject = data.action;
+        this.name = action.name;
+        this.script = action.script;
+        if (action.timeout?.seconds) {
+          this.durationInSec = action.timeout?.seconds;
+        }
+        this.allowedToFail = action.allowedToFail;
+        this.id = action.id;
+       }
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+      if (this.id) {
+        const req = new UpdateActionRequest();
+        req.setId(this.id);
+        req.setName(this.name);
+        req.setScript(this.script);
+
+        const duration = new Duration();
+        duration.setNanos(0);
+        duration.setSeconds(this.durationInSec);
+
+        req.setAllowedToFail(this.allowedToFail);
+
+        req.setTimeout(duration)
+        this.dialogRef.close(req);
+      } else {
+        const req = new CreateActionRequest();
+        req.setName(this.name);
+        req.setScript(this.script);
+
+        const duration = new Duration();
+        duration.setNanos(0);
+        duration.setSeconds(this.durationInSec);
+
+        req.setAllowedToFail(this.allowedToFail);
+
+        req.setTimeout(duration)
+        this.dialogRef.close(req);
+      }
+    }
+
+    public deleteAndCloseDialog(): void {
+      const dialogRef = this.dialog.open(WarnDialogComponent, {
+        data: {
+          confirmKey: 'ACTIONS.CLEAR',
+          cancelKey: 'ACTIONS.CANCEL',
+          titleKey: 'FLOWS.DIALOG.DELETEACTION.TITLE',
+          descriptionKey: 'FLOWS.DIALOG.DELETEACTION.DESCRIPTION',
+        },
+        width: '400px',
+      });
+
+      dialogRef.afterClosed().subscribe(resp => {
+        if (resp) {
+          this.mgmtService.deleteAction(this.id).then(resp => {
+            this.dialogRef.close();
+          }).catch((error: any) => {
+            this.toast.showError(error);
+          });
+        }
+      });
+    }
+}
--- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html
+++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html
@ -0,0 +1,42 @@
+<span class="title" mat-dialog-title>{{'FLOWS.DIALOG.ADD.TITLE' | translate}}</span>
+
+<div mat-dialog-content>
+  <!-- <p class="desc"> {{'FLOWS.DIALOG.ADD.DESCRIPTION' | translate}}</p> -->
+  <form *ngIf="form" [formGroup]="form">
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.FLOWTYPE' | translate}}</cnsl-label>
+      <mat-select formControlName="flowType">
+        <mat-option *ngFor="let type of typesForSelection" [value]="type">
+          {{ 'FLOWS.TYPES.'+type | translate }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.TRIGGERTYPE' | translate}}</cnsl-label>
+      <mat-select formControlName="triggerType" name="triggerType">
+        <mat-option *ngFor="let type of triggerTypesForSelection" [value]="type">
+          {{ 'FLOWS.TRIGGERTYPES.'+type | translate }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+
+    <cnsl-form-field class="form-field" appearance="outline">
+      <cnsl-label>{{'FLOWS.ACTIONS' | translate}}</cnsl-label>
+      <mat-select formControlName="actionIdsList" name="actionIdsList" multiple>
+        <mat-option *ngFor="let action of actions" [value]="action.id">
+          {{ action.name }}
+        </mat-option>
+      </mat-select>
+    </cnsl-form-field>
+  </form>
+</div>
+<div mat-dialog-actions class=" action">
+  <button mat-button (click)="closeDialog()">
+    {{'ACTIONS.CANCEL' | translate}}
+  </button>
+
+  <button color="primary" mat-raised-button class="ok-button" [disabled]="false" (click)="closeDialogWithSuccess()">
+    <span>{{'ACTIONS.SAVE' | translate}}</span>
+  </button>
+</div>
--- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss
+++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss
@ -0,0 +1,23 @@
+.title {
+  font-size: 1.2rem;
+  margin-top: 0;
+}
+
+.desc {
+  color: var(--grey);
+  font-size: .9rem;
+}
+
+.script {
+  min-height: 200px;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+}
--- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.spec.ts
+++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddKeyDialogComponent } from './add-key-dialog.component';
+
+describe('AddKeyDialogComponent', () => {
+    let component: AddKeyDialogComponent;
+    let fixture: ComponentFixture<AddKeyDialogComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [AddKeyDialogComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AddKeyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
--- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts
+++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts
@ -0,0 +1,78 @@
+import { Component, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+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';
+import { ToastService } from 'src/app/services/toast.service';
+
+
+@Component({
+    selector: 'cnsl-add-flow-dialog',
+    templateUrl: './add-flow-dialog.component.html',
+    styleUrls: ['./add-flow-dialog.component.scss'],
+})
+export class AddFlowDialogComponent {
+    public actions: Action.AsObject[] = [];
+    public typesForSelection: FlowType[] = [
+      FlowType.FLOW_TYPE_EXTERNAL_AUTHENTICATION,
+    ];
+    public triggerTypesForSelection: TriggerType[] = [
+      TriggerType.TRIGGER_TYPE_POST_AUTHENTICATION,
+      TriggerType.TRIGGER_TYPE_POST_CREATION,
+      TriggerType.TRIGGER_TYPE_PRE_CREATION,      
+    ];
+    
+    public form!: FormGroup;
+    constructor(
+      private toast: ToastService,
+      private mgmtService: ManagementService,
+      private fb: FormBuilder,
+      public dialogRef: MatDialogRef<AddFlowDialogComponent>,
+      @Inject(MAT_DIALOG_DATA) public data: any,
+    ) {
+      this.form = this.fb.group({
+        flowType: [data.flowType ? data.flowType : '', [Validators.required]],
+        triggerType: [data.triggerType ? data.triggerType : '', [Validators.required]],
+        actionIdsList: [data.actions ? (data.actions as Action.AsObject[]).map(a => a.id) : [], [Validators.required]],
+      });
+      this.getActionIds();
+    }
+
+    private getActionIds(): Promise<void> {
+      return this.mgmtService.listActions().then(resp => {
+        this.actions = resp.resultList;
+      }).catch((error: any) => {
+        this.toast.showError(error);
+      });
+    }
+
+    public closeDialog(): void {
+        this.dialogRef.close(false);
+    }
+
+    public closeDialogWithSuccess(): void {
+      // if (this.id) {
+        // const req = new UpdateActionRequest();
+        // req.setId(this.id);
+        // req.setName(this.name);
+        // req.setScript(this.script);
+
+        // const duration = new Duration();
+        // duration.setNanos(0);
+        // duration.setSeconds(this.durationInSec);
+
+        // req.setAllowedToFail(this.allowedToFail);
+
+        // req.setTimeout(duration)
+        // this.dialogRef.close(req);
+      // } else {
+        const req = new SetTriggerActionsRequest();
+        req.setActionIdsList(this.form.get('actionIdsList')?.value);
+        req.setFlowType(this.form.get('flowType')?.value);
+        req.setTriggerType(this.form.get('triggerType')?.value);
+
+        this.dialogRef.close(req);
+      // }
+    }
+}
--- a/console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds-pipe.module.ts
+++ b/console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds-pipe.module.ts
@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DurationToSecondsPipe } from './duration-to-seconds.pipe';
+
+
+@NgModule({
+    declarations: [
+      DurationToSecondsPipe,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+      DurationToSecondsPipe,
+    ],
+})
+export class DurationToSecondsPipeModule { }
--- a/console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds.pipe.ts
+++ b/console/src/app/pipes/duration-to-seconds-pipe/duration-to-seconds.pipe.ts
@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
+
+@Pipe({
+  name: 'durationToSeconds',
+})
+export class DurationToSecondsPipe implements PipeTransform {
+
+  transform(value?: Duration.AsObject, ...args: unknown[]): unknown {
+    if (value) {
+      return this.durationToSeconds(value);
+    } else {
+      return '';
+    }
+  }
+
+  private durationToSeconds(date: Duration.AsObject): any {
+    if (date?.seconds !== undefined && date?.nanos !== undefined) {
+      const ms = (date.seconds * 1000 + date.nanos / 1000 / 1000);
+      const secs = ms / 1000;
+      return `${secs.toFixed(2)} sec`
+    }
+  }
+}
+
--- a/console/src/app/services/mgmt.service.ts
+++ b/console/src/app/services/mgmt.service.ts
@ -3,11 +3,13 @@ import { Empty } from 'google-protobuf/google/protobuf/empty_pb';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject } from 'rxjs';

+import { FlowType, TriggerType } from '../proto/generated/zitadel/action_pb';
 import { AppQuery } from '../proto/generated/zitadel/app_pb';
 import { KeyType } from '../proto/generated/zitadel/auth_n_key_pb';
 import { ChangeQuery } from '../proto/generated/zitadel/change_pb';
 import { IDPOwnerType } from '../proto/generated/zitadel/idp_pb';
 import {
+  ActionQuery,
  ActivateCustomLabelPolicyRequest,
  ActivateCustomLabelPolicyResponse,
  AddAPIAppRequest,
@ -68,6 +70,10 @@ import {
  BulkRemoveUserGrantResponse,
  BulkSetUserMetadataRequest,
  BulkSetUserMetadataResponse,
+  ClearFlowRequest,
+  ClearFlowResponse,
+  CreateActionRequest,
+  CreateActionResponse,
  DeactivateAppRequest,
  DeactivateAppResponse,
  DeactivateOrgIDPRequest,
@ -80,8 +86,12 @@ import {
  DeactivateProjectResponse,
  DeactivateUserRequest,
  DeactivateUserResponse,
+  DeleteActionRequest,
+  DeleteActionResponse,
  GenerateOrgDomainValidationRequest,
  GenerateOrgDomainValidationResponse,
+  GetActionRequest,
+  GetActionResponse,
  GetAppByIDRequest,
  GetAppByIDResponse,
  GetCustomDomainClaimedMessageTextRequest,
@ -118,6 +128,8 @@ import {
  GetDefaultVerifyPhoneMessageTextResponse,
  GetFeaturesRequest,
  GetFeaturesResponse,
+  GetFlowRequest,
+  GetFlowResponse,
  GetGrantedProjectByIDRequest,
  GetGrantedProjectByIDResponse,
  GetHumanEmailRequest,
@ -167,6 +179,8 @@ import {
  GetUserMetadataRequest,
  GetUserMetadataResponse,
  IDPQuery,
+  ListActionsRequest,
+  ListActionsResponse,
  ListAppChangesRequest,
  ListAppChangesResponse,
  ListAppKeysRequest,
@ -344,10 +358,14 @@ import {
  SetHumanInitialPasswordRequest,
  SetPrimaryOrgDomainRequest,
  SetPrimaryOrgDomainResponse,
+  SetTriggerActionsRequest,
+  SetTriggerActionsResponse,
  SetUserMetadataRequest,
  SetUserMetadataResponse,
  UnlockUserRequest,
  UnlockUserResponse,
+  UpdateActionRequest,
+  UpdateActionResponse,
  UpdateAPIAppConfigRequest,
  UpdateAPIAppConfigResponse,
  UpdateAppRequest,
@ -881,6 +899,87 @@ export class ManagementService {
    return this.grpcService.mgmt.listHumanLinkedIDPs(req, null).then((resp) => resp.toObject());
  }

+  public getAction(
+    id: string,
+  ): Promise<GetActionResponse.AsObject> {
+    const req = new GetActionRequest();
+    req.setId(id);
+    return this.grpcService.mgmt.getAction(req, null).then(resp => resp.toObject());
+  }
+
+  public createAction(
+    req: CreateActionRequest,
+  ): Promise<CreateActionResponse.AsObject> {
+    return this.grpcService.mgmt.createAction(req, null).then(resp => resp.toObject());
+  }
+
+  public updateAction(
+    req: UpdateActionRequest,
+  ): Promise<UpdateActionResponse.AsObject> {
+    return this.grpcService.mgmt.updateAction(req, null).then(resp => resp.toObject());
+  }
+
+  public deleteAction(
+    id: string,
+  ): Promise<DeleteActionResponse.AsObject> {
+    const req = new DeleteActionRequest();
+    req.setId(id);
+    return this.grpcService.mgmt.deleteAction(req, null).then(resp => resp.toObject());
+  }
+
+  public listActions(
+    limit?: number,
+    offset?: number,
+    asc?: boolean,
+    queryList?: ActionQuery[],
+  ): Promise<ListActionsResponse.AsObject> {
+    const req = new ListActionsRequest();
+    const metadata = new ListQuery();
+    if (queryList) {
+      req.setQueriesList(queryList);
+    }
+
+    if (limit) {
+      metadata.setLimit(limit);
+    }
+    if (offset) {
+      metadata.setOffset(offset);
+    }
+    if (asc) {
+      metadata.setAsc(asc);
+    }
+    req.setQuery(metadata);
+    return this.grpcService.mgmt.listActions(req, null).then(resp => resp.toObject());
+  }
+
+  public getFlow(
+    type: FlowType
+  ): Promise<GetFlowResponse.AsObject> {
+    const req = new GetFlowRequest();
+    req.setType(type);
+    return this.grpcService.mgmt.getFlow(req, null).then(resp => resp.toObject());
+  }
+
+  public clearFlow(
+    type: FlowType
+  ): Promise<ClearFlowResponse.AsObject> {
+    const req = new ClearFlowRequest();
+    req.setType(type);
+    return this.grpcService.mgmt.clearFlow(req, null).then(resp => resp.toObject());
+  }
+
+  public setTriggerActions(
+    actionIdsList: string[],
+    type: FlowType,
+    triggerType: TriggerType,
+  ): Promise<SetTriggerActionsResponse.AsObject> {
+    const req = new SetTriggerActionsRequest();
+    req.setActionIdsList(actionIdsList);
+    req.setFlowType(type);
+    req.setTriggerType(triggerType);
+    return this.grpcService.mgmt.setTriggerActions(req, null).then(resp => resp.toObject());
+  }
+
  public getIAM(): Promise<GetIAMResponse.AsObject> {
    const req = new GetIAMRequest();
    return this.grpcService.mgmt.getIAM(req, null).then((resp) => resp.toObject());
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -91,6 +91,7 @@
    "SHOWORGS": "Alle Organisationen anzeigen",
    "GRANTSECTION": "Berechtigungssektion",
    "GRANTS": "Berechtigungen",
+    "ACTIONS": "Aktionen",
    "PRIVACY": "Datenschutz",
    "TOS": "AGB",
    "TOOLTIP": {
@ -102,7 +103,8 @@
      "GRANTEDPROJECTS": "Verwalte die berechtigten Projekte von anderen Organisationen",
      "HUMANUSERS": "Verwalte die Menschlichen Benutzer deiner Organisation",
      "MACHINEUSERS": "Verwalte die  Service Benutzer deiner Organisation",
-      "AUTHZ": "Verwalte die Berechtigungen deiner Organisationsbenutzer"
+      "AUTHZ": "Verwalte die Berechtigungen deiner Organisationsbenutzer",
+      "ACTIONS": "Hinterlege scripts die bei einem bestimmten Event ausgeführt werden."
    }
  },
  "ACTIONS": {
@ -519,6 +521,55 @@
      }
    }
  },
+  "FLOWS": {
+    "TITLE": "Aktionen und Abläufe",
+    "DESCRIPTION": "Hinterlege scripts die bei einem bestimmten Event ausgeführt werden.",
+    "ACTIONSTITLE": "Aktionen",
+    "FLOWSTITLE": "Abläufe",
+    "ID": "ID",
+    "NAME": "Name",
+    "STATE": "State",
+    "STATES": {
+      "0": "Kein Status",
+      "1": "inaktiv",
+      "2": "aktiv"
+    },
+    "TYPES": {
+      "0": "Unspezifisch",
+      "1": "Externe Authentifizierung"
+    },
+    "TRIGGERTYPES": {
+      "1": "Post Authentication",
+      "2": "Pre Creation",
+      "3": "Post Creation"
+    },
+    "TIMEOUT": "Timeout",
+    "TIMEOUTINSEC": "Timout in Sekunden",
+    "ALLOWEDTOFAIL": "Allowed To Fail",
+    "SCRIPT": "Script",
+    "FLOWTYPE": "Flow Typ",
+    "TRIGGERTYPE": "Trigger Typ",
+    "ACTIONS": "Aktionen",
+    "DIALOG": {
+      "ADD": {
+        "TITLE": "Aktion erstellen"
+      },
+      "UPDATE": {
+        "TITLE": "Aktion bearbeiten"
+      },
+      "DELETEACTION": {
+        "TITLE": "Aktion löschen?",
+        "DESCRIPTION": "Sie sind im Begriff eine Aktion zu löschen. Dieser Vorgang kann nicht zurückgesetzt werden. Sind Sie sicher?"
+      },
+      "CLEAR": {
+        "TITLE": "Flow zurücksetzen?",
+        "DESCRIPTION": "Sie sind im Begriff den Flow mitsamt seinen Triggern und Aktionen zurückzusetzen. Diese Änderung kann nicht wiederhergestellt werden."
+      }
+    },
+    "TOAST": {
+      "ACTIONSSET": "Aktionen gesetzt"
+    }
+  },
  "IAM": {
    "POLICIES": {
      "TITLE": "IAM Administration",
@ -669,7 +720,8 @@
      "LABELPOLICY": "Privatelabelling",
      "DOMAIN": "Organisations Domänen",
      "TEXTSANDLINKS": "Texte und Links",
-      "METADATA":"Metadata"
+      "METADATA": "Metadata",
+      "FLOWS": "Aktionen und Abläufe"
    },
    "DATA": {
      "AUDITLOGRETENTION": "Audit Log Retention",
@ -687,7 +739,8 @@
      "CUSTOMTEXTLOGIN": "Benutzerdefinierte Logininterface Texte",
      "CUSTOMTEXTMESSAGE": "Benutzerdefinierte Benachrichtigungstexte",
      "PRIVACYPOLICY": "Benutzerdefinierte Datenschutzrichtlinie und AGB",
-      "METADATAUSER":"User Metadata"
+      "METADATAUSER": "User Metadata",
+      "FLOWS": "Aktionen und Abläufe"
    },
    "TIERSTATES": {
      "0": "Aktiv",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -91,6 +91,7 @@
    "SHOWORGS": "Show All Organisations",
    "GRANTSECTION": "Authorization Section",
    "GRANTS": "Authorizations",
+    "ACTIONS": "Actions",
    "PRIVACY": "Privacy",
    "TOS": "Terms of Service",
    "TOOLTIP": {
@ -102,7 +103,8 @@
      "GRANTEDPROJECTS": "Show projects your organisation was granted access",
      "HUMANUSERS": "Show all registered human users on your organisation",
      "MACHINEUSERS": "Show service users of your organisation",
-      "AUTHZ": "Show authorizations available to your organisation users"
+      "AUTHZ": "Show authorizations available to your organisation users",
+      "ACTIONS": "Define scripts to execute on a certain event."
    }
  },
  "ACTIONS": {
@ -519,6 +521,55 @@
      }
    }
  },
+  "FLOWS": {
+    "TITLE": "Actions and Flows",
+    "DESCRIPTION": "Define scripts to execute on a certain event.",
+    "ACTIONSTITLE": "Actions",
+    "FLOWSTITLE": "Flows",
+    "ID": "ID",
+    "NAME": "Name",
+    "STATE": "State",
+    "STATES": {
+      "0": "no status",
+      "1": "inactive",
+      "2": "active"
+    },
+    "TYPES": {
+      "0": "Unspecified Type",
+      "1": "External Authentication"
+    },
+    "TRIGGERTYPES": {
+      "1": "Post Authentication",
+      "2": "Pre Creation",
+      "3": "Post Creation"
+    },
+    "TIMEOUT": "Timeout",
+    "TIMEOUTINSEC": "Timout in seconds",
+    "ALLOWEDTOFAIL": "Allowed To Fail",
+    "SCRIPT": "Script",
+    "FLOWTYPE": "Flow Type",
+    "TRIGGERTYPE": "Trigger Type",
+    "ACTIONS": "Actions",
+    "DIALOG": {
+      "ADD": {
+        "TITLE": "Create an Action"
+      },
+      "UPDATE": {
+        "TITLE": "Update Action"
+      },
+      "DELETEACTION": {
+        "TITLE": "Delete Action?",
+        "DESCRIPTION": "You are about to delete an action. This cannot be reverted. Are you sure?"
+      },
+      "CLEAR": {
+        "TITLE": "Clear flow?",
+        "DESCRIPTION": "You are about to reset the flow along with its triggers and actions. This change cannot be restored. Are you sure?"
+      }
+    },
+    "TOAST": {
+      "ACTIONSSET": "Actions set"
+    }
+  },
  "IAM": {
    "POLICIES": {
      "TITLE": "IAM Policies and Access Settings",
@ -669,7 +720,8 @@
      "LABELPOLICY": "Privatelabelling",
      "DOMAIN": "Organization Domain",
      "TEXTSANDLINKS": "Texts and Links",
-      "METADATA":"Metadata"
+      "METADATA": "Metadata",
+      "FLOWS": "Actions and Flows"
    },
    "DATA": {
      "AUDITLOGRETENTION": "Audit Log Retention",
@ -687,7 +739,8 @@
      "CUSTOMTEXTLOGIN": "Custom login interface texts",
      "CUSTOMTEXTMESSAGE": "Custom notification mail texts",
      "PRIVACYPOLICY": "Custom Privacy Policy and TOS Links",
-      "METADATAUSER":"User Metadata"
+      "METADATAUSER": "User Metadata",
+      "FLOWS": "Actions and Flows"
    },
    "TIERSTATES": {
      "0": "Active",
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@ -91,6 +91,7 @@
    "SHOWORGS": "Mostra tutte le organizzazioni",
    "GRANTSECTION": "Sezione di autorizzazione",
    "GRANTS": "Autorizzazioni",
+    "ACTIONS": "Azioni",
    "PRIVACY": "Informativa sulla privacy",
    "TOS": "Termini di servizio",
    "TOOLTIP": {
@ -102,7 +103,8 @@
      "GRANTEDPROJECTS": "Mostra i progetti a cui la tua organizzazione ha accesso",
      "HUMANUSERS": "Mostra tutti gli utenti umani registrati nella tua organizzazione",
      "MACHINEUSERS": "Mostra tutti gli utenti di servizio della tua organizzazione",
-      "AUTHZ": "Mostra le autorizzazioni disponibili per gli utenti della tua organizzazione"
+      "AUTHZ": "Mostra le autorizzazioni disponibili per gli utenti della tua organizzazione",
+      "ACTIONS": "Esegui processi su certi eventi."
    }
  },
  "ACTIONS": {
@ -124,7 +126,7 @@
    "CONTINUE": "Continua",
    "BACK": "Indietro",
    "CLOSE": "chiudi",
-    "CLEAR": "Chiaro",
+    "CLEAR": "Resetta",
    "CANCEL": "cancella",
    "INFO": "Info",
    "OK": "OK",
@ -519,6 +521,55 @@
      }
    }
  },
+  "FLOWS": {
+    "TITLE": "Azioni e Processi",
+    "DESCRIPTION": "Esegui processi su certi eventi.",
+    "ACTIONSTITLE": "Azioni",
+    "FLOWSTITLE": "Processi",
+    "ID": "ID",
+    "NAME": "Nome",
+    "STATE": "Stato",
+    "STATES": {
+      "0": "Nessun stato",
+      "1": "inattivo",
+      "2": "attivo"
+    },
+    "TYPES": {
+      "0": "Non specifico",
+      "1": "Autenticazione esterna"
+    },
+    "TRIGGERTYPES": {
+      "1": "Post autenticazione",
+      "2": "Pre creazione",
+      "3": "Post creazione"
+    },
+    "TIMEOUT": "Timeout",
+    "TIMEOUTINSEC": "Timeout in secondi",
+    "ALLOWEDTOFAIL": "Può fallire",
+    "SCRIPT": "Script",
+    "FLOWTYPE": "Tipo processo",
+    "TRIGGERTYPE": "Tipo trigger",
+    "ACTIONS": "Azioni",
+    "DIALOG": {
+      "ADD": {
+        "TITLE": "Crea azione"
+      },
+      "UPDATE": {
+        "TITLE": "Modifica azione"
+      },
+      "DELETEACTION": {
+        "TITLE": "Elimina azione?",
+        "DESCRIPTION": ""
+      },
+      "CLEAR": {
+        "TITLE": "Flow zurücksetzen?",
+        "DESCRIPTION": "Stai per cancellare un'azione. Questa azione non può essere annullata. Vuoi continuare?"
+      }
+    },
+    "TOAST": {
+      "ACTIONSSET": "Azioni salvate!"
+    }
+  },
  "IAM": {
    "POLICIES": {
      "TITLE": "Impostazioni IAM e impostazioni di accesso",
@ -669,7 +720,8 @@
      "LABELPOLICY": "Privatelabelling",
      "DOMAIN": "Dominio dell'organizzazione",
      "TEXTSANDLINKS": "Testi e link",
-      "METADATA": "Metadati"
+      "METADATA": "Metadati",
+      "FLOWS": "Azioni e processi"
    },
    "DATA": {
      "AUDITLOGRETENTION": "Ritenzione Audit Log",
@ -687,7 +739,8 @@
      "CUSTOMTEXTLOGIN": "Testi dell'interfaccia login",
      "CUSTOMTEXTMESSAGE": "Testi email personalizzati",
      "PRIVACYPOLICY": "Link personalizzati all'informativa sulla privacy e ai TOS",
-      "METADATAUSER": "Metadati utente"
+      "METADATAUSER": "Metadati utente",
+      "FLOWS": "Azioni e processi"
    },
    "TIERSTATES": {
      "0": "Attivo",
--- a/console/src/assets/mdi/arrow-decision-outline.svg
+++ b/console/src/assets/mdi/arrow-decision-outline.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="M9.64,13.4C8.63,12.5 7.34,12.03 6,12V15L2,11L6,7V10C7.67,10 9.3,10.57 10.63,11.59C10.22,12.15 9.89,12.76 9.64,13.4M18,15V12C17.5,12 13.5,12.16 13.05,16.2C14.61,16.75 15.43,18.47 14.88,20.03C14.33,21.59 12.61,22.41 11.05,21.86C9.5,21.3 8.67,19.59 9.22,18.03C9.5,17.17 10.2,16.5 11.05,16.2C11.34,12.61 14.4,9.88 18,10V7L22,11L18,15M13,19A1,1 0 0,0 12,18A1,1 0 0,0 11,19A1,1 0 0,0 12,20A1,1 0 0,0 13,19M11,11.12C11.58,10.46 12.25,9.89 13,9.43V5H16L12,1L8,5H11V11.12Z" /></svg>
--- a/console/src/assets/mdi/arrow-right-bottom.svg
+++ b/console/src/assets/mdi/arrow-right-bottom.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="M20 16L14.5 21.5L13.08 20.09L16.17 17H10.5C6.91 17 4 14.09 4 10.5V4H6V10.5C6 13 8 15 10.5 15H16.17L13.09 11.91L14.5 10.5L20 16Z" /></svg>
--- a/internal/query/action.go
+++ b/internal/query/action.go
@ -83,7 +83,7 @@ type ActionSearchQueries struct {
 	Queries []SearchQuery
 }

-func (q *ActionSearchQueries) ToQuery(query sq.SelectBuilder) sq.SelectBuilder {
+func (q *ActionSearchQueries) toQuery(query sq.SelectBuilder) sq.SelectBuilder {
 	query = q.SearchRequest.toQuery(query)
 	for _, q := range q.Queries {
 		query = q.ToQuery(query)
				`@ -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="M9.64,13.4C8.63,12.5 7.34,12.03 6,12V15L2,11L6,7V10C7.67,10 9.3,10.57 10.63,11.59C10.22,12.15 9.89,12.76 9.64,13.4M18,15V12C17.5,12 13.5,12.16 13.05,16.2C14.61,16.75 15.43,18.47 14.88,20.03C14.33,21.59 12.61,22.41 11.05,21.86C9.5,21.3 8.67,19.59 9.22,18.03C9.5,17.17 10.2,16.5 11.05,16.2C11.34,12.61 14.4,9.88 18,10V7L22,11L18,15M13,19A1,1 0 0,0 12,18A1,1 0 0,0 11,19A1,1 0 0,0 12,20A1,1 0 0,0 13,19M11,11.12C11.58,10.46 12.25,9.89 13,9.43V5H16L12,1L8,5H11V11.12Z" /></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="M20 16L14.5 21.5L13.08 20.09L16.17 17H10.5C6.91 17 4 14.09 4 10.5V4H6V10.5C6 13 8 15 10.5 15H16.17L13.09 11.91L14.5 10.5L20 16Z" /></svg>`