feat(console): integrate frontend (#95)

* feat: console frontend

* chore(dependabot): cycle and npm

* chore: rename citadel to zitadel, remove generated files

* chore: delete go files

* chore(frontend): ci steps

* chore: remove docker and envoy files

* chore: remove docker file

* chore: working dir

* chore: run proto build

* add console start

* chore: restructure folders

* chore: remove gui build

* statikFs

* generate proto for console

* add statik import

* import

* chore: try statik

* chore: path

* chore: path

* chore: script in root

* chore: order build steps

* chore: go get

* chore: folder traversal

* chore: non empty test file

* chore: gitignore

* chore: gitignore

* chore: statik path

* chore: switch to failing FE build

* fix: build

* fix: project-grant-test

* fix: rm test

* add statik.go

* go mod tidy

* chore: place test, seperate test from build

* chore: lint all the world

* chore: ci the world instead

* chore: tune docker

* chore: undo container test

* chore: fix run

* chore: docker build

* chore: test docker build

* chore: go build flags

* finaly

* fix caos_local

* go mod

Co-authored-by: Livio Amstutz <[email protected]>
Co-authored-by: Max Peintner <[email protected]>

console/src/app/directives/has-role/has-role.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AuthUserService } from 'src/app/services/auth-user.service';
+
+
+@Directive({
+    selector: '[appHasRole]',
+})
+
+export class HasRoleDirective {
+    private hasView: boolean = false;
+    @Input() public set appHasRole(roles: string[]) {
+        if (roles && roles.length > 0) {
+            this.userService.isAllowed(roles).subscribe(isAllowed => {
+                if (isAllowed && !this.hasView) {
+                    this.viewContainerRef.clear();
+                    this.viewContainerRef.createEmbeddedView(this.templateRef);
+                } else if (this.hasView) {
+                    console.log('User blocked!', roles, isAllowed);
+                    this.viewContainerRef.clear();
+                    this.hasView = false;
+                }
+            });
+        }
+    }
+
+    constructor(
+        private userService: AuthUserService,
+        protected templateRef: TemplateRef<any>,
+        protected viewContainerRef: ViewContainerRef,
+    ) { }
+}

console/src/app/directives/has-role/has-role.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { HasRoleDirective } from './has-role.directive';
+
+
+
+@NgModule({
+    declarations: [
+        HasRoleDirective,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        HasRoleDirective,
+    ],
+})
+export class HasRoleModule { }

console/src/app/directives/outside-click/outside-click.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+    selector: '[appOutsideClick]',
+})
+export class OutsideClickDirective {
+    constructor(private elementRef: ElementRef) { }
+
+    @Output() public clickOutside: EventEmitter<HTMLElement> = new EventEmitter();
+
+    @HostListener('document:click', ['$event.target']) onMouseEnter(targetElement: HTMLElement): void {
+        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
+        if (!clickedInside) {
+            this.clickOutside.emit(targetElement);
+        }
+    }
+}

console/src/app/directives/outside-click/outside-click.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { OutsideClickDirective } from './outside-click.directive';
+
+
+
+
+@NgModule({
+    declarations: [
+        OutsideClickDirective,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        OutsideClickDirective,
+    ],
+})
+export class OutsideClickModule { }

console/src/app/directives/scrollable/scrollable.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+    selector: '[appScrollable]',
+})
+export class ScrollableDirective {
+    // when using this directive, add overflow-y scroll to css
+    @Output() scrollPosition: EventEmitter<any> = new EventEmitter();
+
+    constructor(public el: ElementRef) { }
+
+    @HostListener('scroll', ['$event'])
+    public onScroll(event: any): void {
+        try {
+            const top = event.target.scrollTop;
+            const height = this.el.nativeElement.scrollHeight;
+            const offset = this.el.nativeElement.offsetHeight;
+
+            // emit bottom event
+            if (top > height - offset - 1) {
+                this.scrollPosition.emit('bottom');
+            }
+
+            // emit top event
+            if (top === 0) {
+                this.scrollPosition.emit('top');
+            }
+
+        } catch (err) { }
+    }
+
+}

console/src/app/directives/scrollable/scrollable.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { ScrollableDirective } from './scrollable.directive';
+
+
+
+@NgModule({
+    declarations: [
+        ScrollableDirective,
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        ScrollableDirective,
+    ],
+})
+export class ScrollableModule { }