feat(console): onboarding flow (#5225)

Implements an onboarding UI for users

console/src/app/pipes/event-pipe/event-pipe.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { LocalizedDatePipeModule } from '../localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from '../timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+import { EventPipe } from './event.pipe';
+
+@NgModule({
+  declarations: [EventPipe],
+  imports: [CommonModule, TimestampToDatePipeModule, LocalizedDatePipeModule],
+  exports: [EventPipe],
+})
+export class EventPipeModule {}

console/src/app/pipes/event-pipe/event.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Event } from 'src/app/proto/generated/zitadel/event_pb';
+import { LocalizedDatePipe } from '../localized-date-pipe/localized-date.pipe';
+import { TimestampToDatePipe } from '../timestamp-to-date-pipe/timestamp-to-date.pipe';
+
+@Pipe({
+  name: 'event',
+})
+export class EventPipe implements PipeTransform {
+  constructor(private translateService: TranslateService) {}
+
+  public transform(event?: Event.AsObject): any {
+    if (event && event.editor?.displayName && event.creationDate) {
+      const timestampToDate = new TimestampToDatePipe().transform(event.creationDate);
+      const datePipeOutput = new LocalizedDatePipe(this.translateService).transform(timestampToDate);
+      return `${event.editor?.displayName} last changed it on ${datePipeOutput}`;
+    } else if (event && event.creationDate) {
+      const timestampToDate = new TimestampToDatePipe().transform(event.creationDate);
+      const datePipeOutput = new LocalizedDatePipe(this.translateService).transform(timestampToDate);
+      return `done on ${datePipeOutput}`;
+    } else {
+      return '';
+    }
+  }
+}