feat: port reduction (#323)

* move mgmt pkg

* begin package restructure

* rename auth package to authz

* begin start api

* move auth

* move admin

* fix merge

* configs and interceptors

* interceptor

* revert generate-grpc.sh

* some cleanups

* console

* move console

* fix tests and merging

* js linting

* merge

* merging and configs

* change k8s base to current ports

* fixes

* cleanup

* regenerate proto

* remove unnecessary whitespace

* missing param

* go mod tidy

* fix merging

* move login pkg

* cleanup

* move api pkgs again

* fix pkg naming

* fix generate-static.sh for login

* update workflow

* fixes

* logging

* remove duplicate

* comment for optional gateway interfaces

* regenerate protos

* fix proto imports for grpc web

* protos

* grpc web generate

* grpc web generate

* fix changes

* add translation interceptor

* fix merging

* regenerate mgmt proto

console/package.json

@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "prodbuild": "ng build --prod",
+    "prodbuild": "ng build --prod --base-href /console/",
     "lint": "ng lint && stylelint './projects/**/*.scss' --syntax scss",
     "postinstall": "../build/console/generate-grpc.sh"
   },

console/src/app/app.component.html

@@ -5,9 +5,9 @@
         </button>
         <a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
             <img class="logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
-                src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
+                src="./assets/images/zitadel-logo-oneline-darkdesign.svg" />
             <ng-template #lighttheme>
-                <img class="logo" src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+                <img class="logo" src="./assets/images/zitadel-logo-oneline-lightdesign.svg" />
             </ng-template>
         </a>
 
@@ -126,4 +126,4 @@
             </div>
         </mat-drawer-content>
     </mat-drawer-container>
-</ng-container>
+</ng-container>

console/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule, registerLocaleData } from '@angular/common';
+import { APP_BASE_HREF, CommonModule, registerLocaleData, PlatformLocation } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import localeDe from '@angular/common/locales/de';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
@@ -42,7 +42,7 @@ registerLocaleData(localeDe);
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
-    return new TranslateHttpLoader(http);
+  return new TranslateHttpLoader(http, './assets/i18n/');
 }
 
 const appInitializerFn = (grpcServ: GrpcService) => {
@@ -57,12 +57,10 @@ const stateHandlerFn = (stateHandler: StatehandlerService) => {
     };
 };
 
-export let authConfig = {
-    redirectUri: window.location.origin + '/auth/callback',
+const authConfig: AuthConfig = {
     scope: 'openid profile email', // offline_access
     responseType: 'code',
     oidc: true,
-    postLogoutRedirectUri: window.location.origin + '/signedout',
 };
 
 @NgModule({

console/src/app/pages/home/home.component.html

@@ -1,8 +1,8 @@
 <div class="wrapper">
     <div class="header">
-        <img *ngIf="dark; else lighttheme" src="../assets/images/zitadel-logo-oneline-darkdesign.svg" />
+        <img *ngIf="dark; else lighttheme" src="./assets/images/zitadel-logo-oneline-darkdesign.svg" />
         <ng-template #lighttheme>
-            <img src="../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+            <img src="./assets/images/zitadel-logo-oneline-lightdesign.svg" />
         </ng-template>
     </div>
 
@@ -79,4 +79,4 @@
             </div>
         </ng-template>
     </div>
-</div>
+</div>

console/src/app/pages/signedout/signedout.component.html

@@ -1,9 +1,9 @@
 <div class="wrap">
     <div class="block">
         <div class="header">
-            <img *ngIf="dark; else lighttheme" src="../../../assets/images/zitadel-logo-oneline-darkdesign.svg" />
+            <img *ngIf="dark; else lighttheme" src="./assets/images/zitadel-logo-oneline-darkdesign.svg" />
             <ng-template #lighttheme>
-                <img src="../../../assets/images/zitadel-logo-oneline-lightdesign.svg" />
+                <img src="./assets/images/zitadel-logo-oneline-lightdesign.svg" />
             </ng-template>
             <p>{{'USER.SIGNEDOUT' | translate}}</p>
 
@@ -11,4 +11,4 @@
                 [routerLink]="[ '/users/me' ]">{{'USER.SIGNEDOUT_BTN' | translate}}</button>
         </div>
     </div>
-</div>
+</div>

console/src/app/services/auth.service.ts

@@ -64,6 +64,8 @@ export class AuthService {
     public async authenticate(config?: Partial<AuthConfig>, setState: boolean = true): Promise<boolean> {
         this.config.issuer = config?.issuer || this.grpcService.issuer;
         this.config.clientId = config?.clientId || this.grpcService.clientid;
+        this.config.redirectUri = config?.redirectUri || this.grpcService.redirectUri;
+        this.config.postLogoutRedirectUri = config?.postLogoutRedirectUri || this.grpcService.postLogoutRedirectUri;
         this.config.customQueryParams = config?.customQueryParams;
         this.oauthService.configure(this.config);
         // this.oauthService.setupAutomaticSilentRefresh();

console/src/app/services/grpc.service.ts

@@ -1,48 +1,54 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-
-import { AdminServicePromiseClient } from '../proto/generated/admin_grpc_web_pb';
-import { AuthServicePromiseClient } from '../proto/generated/auth_grpc_web_pb';
-import { ManagementServicePromiseClient } from '../proto/generated/management_grpc_web_pb';
-import { GrpcRequestFn } from './grpc-handler';
-
-@Injectable({
-    providedIn: 'root',
-})
-export class GrpcService {
-    public issuer: string = '';
-    public clientid: string = '';
-
-    public auth!: AuthServicePromiseClient;
-    public mgmt!: ManagementServicePromiseClient;
-    public admin!: AdminServicePromiseClient;
-
-    constructor(
-        private http: HttpClient,
-    ) { }
-
-    public async loadAppEnvironment(): Promise<any> {
-        return this.http.get('/assets/environment.json')
-            .toPromise().then((data: any) => {
-                if (data && data.authServiceUrl && data.mgmtServiceUrl && data.issuer) {
-                    this.auth = new AuthServicePromiseClient(data.authServiceUrl);
-                    this.mgmt = new ManagementServicePromiseClient(data.mgmtServiceUrl);
-                    this.admin = new AdminServicePromiseClient(data.adminServiceUrl);
-
-                    this.issuer = data.issuer;
-                    if (data.clientid) {
-                        this.clientid = data.clientid;
-                    }
-                }
-                return Promise.resolve(data);
-            }).catch(() => {
-                console.log('Failed to load environment from assets');
-            });
-    }
-}
-
-export type RequestFactory<TClient, TReq, TResp> = (
-    client: TClient,
-) => GrpcRequestFn<TReq, TResp>;
-
-export type ResponseMapper<TResp, TMappedResp> = (resp: TResp) => TMappedResp;
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { PlatformLocation } from '@angular/common';
+
+import { AdminServicePromiseClient } from '../proto/generated/admin_grpc_web_pb';
+import { AuthServicePromiseClient } from '../proto/generated/auth_grpc_web_pb';
+import { ManagementServicePromiseClient } from '../proto/generated/management_grpc_web_pb';
+import { GrpcRequestFn } from './grpc-handler';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class GrpcService {
+    public issuer: string = '';
+    public clientid: string = '';
+    public redirectUri: string = '';
+    public postLogoutRedirectUri: string = '';
+
+    public auth!: AuthServicePromiseClient;
+    public mgmt!: ManagementServicePromiseClient;
+    public admin!: AdminServicePromiseClient;
+
+    constructor(
+        private http: HttpClient,
+        private platformLocation: PlatformLocation,
+    ) { }
+
+    public async loadAppEnvironment(): Promise<any> {
+        return this.http.get('./assets/environment.json')
+            .toPromise().then((data: any) => {
+                if (data && data.authServiceUrl && data.mgmtServiceUrl && data.issuer) {
+                    this.auth = new AuthServicePromiseClient(data.authServiceUrl);
+                    this.mgmt = new ManagementServicePromiseClient(data.mgmtServiceUrl);
+                    this.admin = new AdminServicePromiseClient(data.adminServiceUrl);
+
+                    this.issuer = data.issuer;
+                    if (data.clientid) {
+                        this.clientid = data.clientid;
+                        this.redirectUri = window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'auth/callback';
+                        this.postLogoutRedirectUri = window.location.origin + this.platformLocation.getBaseHrefFromDOM() + 'signedout';
+                    }
+                }
+                return Promise.resolve(data);
+            }).catch(() => {
+                console.log('Failed to load environment from assets');
+            });
+    }
+}
+
+export type RequestFactory<TClient, TReq, TResp> = (
+    client: TClient,
+) => GrpcRequestFn<TReq, TResp>;
+
+export type ResponseMapper<TResp, TMappedResp> = (resp: TResp) => TMappedResp;

console/src/index.html

@@ -22,4 +22,4 @@
     <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 
-</html>
+</html>