zitadel

package.json

@@ -25,6 +25,7 @@
     "@angular/router": "^17.2.0",
     "@angular/ssr": "^17.2.3",
     "@netlify/functions": "^2.6.0",
+    "angular-oauth2-oidc": "^17.0.2",
     "buffer": "^6.0.3",
     "chart.js": "^4.3.0",
     "express": "^4.19.2",

src/app/app.component.ts

@@ -7,6 +7,7 @@ import { register } from 'swiper/element/bundle';
 import { HeaderComponent } from './layout/header/header.component';
 import { FooterComponent } from './layout/footer/footer.component';
 import { AnalyticsService } from './services/analytics.service';
+import { AuthenticationService } from './services/authentication.service';
 
 @Component({
   selector: 'app-root',
@@ -20,6 +21,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   constructor(@Inject(PLATFORM_ID) private platformId: object,
     @Inject(DOCUMENT) private document: Document,
+    private auth: AuthenticationService,
     private router: Router,
     private analytics: AnalyticsService,
     private metaTagService: Meta) {

src/app/app.config.browser.ts

@@ -0,0 +1,14 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { appConfig } from './app.config';
+import { OAuthStorage } from 'angular-oauth2-oidc';
+
+const browserConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: OAuthStorage,
+      useValue: localStorage,
+    }
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, browserConfig);

src/app/app.config.ts

@@ -6,8 +6,27 @@ import { provideClientHydration } from '@angular/platform-browser';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ArrowDownNarrowWide, ArrowDownWideNarrow, BookText, Box, Check, ChevronDown, ChevronLeft, ChevronRight, Codesandbox, Cpu, Database, DollarSign, Facebook, Github, Home, Hotel, Linkedin, LucideAngularModule, MemoryStick, PcCase, Search, Server, SquareKanban, Twitter, User, Building2, Heater, CandlestickChart, MapPinned, Scale, Ellipsis, Menu, Leaf, ShoppingCart, ChevronUp, ExternalLink, Info } from 'lucide-angular';
 import { MarkdownModule } from 'ngx-markdown';
+import { AuthConfig, OAuthModule } from 'angular-oauth2-oidc';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
+const ZITADEL_CLIENT_ID = import.meta.env['NG_APP_ZITADEL_CLIENT_ID'];
+const ZITADEL_DOMAIN = import.meta.env['NG_APP_ZITADEL_DOMAIN'];
+const ZITADEL_USERINFO_ENDPOINT = import.meta.env['NG_APP_ZITADEL_USERINFO_ENDPOINT'];
+const DOMAIN_BASE_URL = import.meta.env['NG_APP_DOMAIN_BASE_URL'];
+
+const authConfig: AuthConfig = {
+  scope: 'openid profile email offline_access',
+  responseType: 'code',
+  oidc: true,
+  clientId: ZITADEL_CLIENT_ID,
+  issuer: ZITADEL_DOMAIN,
+  redirectUri: `${DOMAIN_BASE_URL}auth/callback`,
+  postLogoutRedirectUri: `${DOMAIN_BASE_URL}`,
+  requireHttps: false, // required for running locally
+  tokenEndpoint: `${ZITADEL_DOMAIN}/oauth/v2/token`,
+  userinfoEndpoint: ZITADEL_USERINFO_ENDPOINT,
+};
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
@@ -55,6 +74,21 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     importProvidersFrom(MarkdownModule.forRoot()),
+    importProvidersFrom(
+      OAuthModule.forRoot({
+        resourceServer: {
+          allowedUrls: [
+            `${ZITADEL_DOMAIN}/admin/v1`,
+            `${ZITADEL_DOMAIN}/management/v1`,
+            `${ZITADEL_DOMAIN}/auth/v1/`],
+          sendAccessToken: true,
+        },
+      })
+    ),
+    {
+      provide: AuthConfig,
+      useValue: authConfig,
+    }
   ],
 
 };

src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { LandingpageComponent } from './pages/landingpage/landingpage.component';
 import { ServerListingComponent } from './pages/server-listing/server-listing.component';
+import { authGuard } from './guards/auth.guard';
 
 export const routes: Routes = [
   { path: '', component: LandingpageComponent },
@@ -11,5 +12,13 @@ export const routes: Routes = [
   { path: 'legal/tos', loadComponent: () => import('./pages/tos/tos.component').then(m => m.TOSComponent)},
   { path: 'datacenters', loadComponent: () => import('./pages/datacenters/datacenters.component').then(m => m.DatacentersComponent)},
   { path: 'vendors', loadComponent: () => import('./pages/vendors/vendors.component').then(m => m.VendorsComponent)},
+
+  { path: 'auth/callback', loadComponent: () => import('./auth/callback/callback.component').then(m => m.CallbackComponent)},
+
+  { path: 'dashboard',
+    loadComponent: () => import('./pages/my-spare-cores/my-spare-cores.component').then(m => m.MySpareCoresComponent),
+    canActivate: [authGuard]
+  },
+
   { path: '**', redirectTo: '' }
 ];

src/app/auth/callback/callback.component.html

@@ -0,0 +1,4 @@
+<div class="w-full">
+  <div class="content_section">
+  </div>
+</div>

src/app/auth/callback/callback.component.scss

@@ -0,0 +1,7 @@
+.content_section {
+  @apply bg-primary;
+  @apply text-white;
+
+  padding: 4rem 2rem;
+  height: 100vh;
+}

src/app/auth/callback/callback.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CallbackComponent } from './callback.component';
+
+describe('CallbackComponent', () => {
+  let component: CallbackComponent;
+  let fixture: ComponentFixture<CallbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CallbackComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CallbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/callback/callback.component.ts

@@ -0,0 +1,33 @@
+import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { AuthenticationService } from '../../services/authentication.service';
+import { Router, RouterModule } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
+
+@Component({
+  selector: 'app-callback',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './callback.component.html',
+  styleUrl: './callback.component.scss'
+})
+export class CallbackComponent implements OnInit{
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private authService: AuthenticationService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+
+    if(isPlatformBrowser(this.platformId)) {
+      this.authService.loginCodeFlow().then(() => {
+        const url = sessionStorage.getItem('prelogin_url') || '/';
+        sessionStorage.removeItem('prelogin_url');
+        this.router.navigateByUrl(url);
+      });
+    }
+
+  }
+
+}

src/app/guards/auth.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/guards/auth.guard.ts

@@ -0,0 +1,22 @@
+import { CanActivateFn } from '@angular/router';
+import { AuthenticationService } from '../services/authentication.service';
+import { inject } from '@angular/core';
+import { map, take } from 'rxjs';
+
+export const authGuard: CanActivateFn = () => {
+
+  const authService = inject(AuthenticationService);
+
+  return authService.authedState.pipe(
+    take(1), // Otherwise the Observable doesn't complete!
+    map((isAuthenticated) => {
+      if (isAuthenticated) {
+        return true
+      } else {
+        authService.authenticate();
+        return authService.isLoggedIn();
+      }
+    })
+  );
+
+};

src/app/layout/header/header.component.html

@@ -19,27 +19,41 @@
                   Datacenters
                 </a>
               </li>
-              <li class="hidden lg:flex">
+              <li *ngIf="!isLoggedIn()" class="hidden lg:flex">
                 <a class="navbar_link" routerLink="/vendors" >
                   <lucide-icon class="h-4 w-4" name="home"></lucide-icon>
                   Vendors
                 </a>
               </li>
+              <li *ngIf="isLoggedIn()" class="hidden lg:flex">
+                <a class="navbar_link" routerLink="/dashboard" >
+                  <lucide-icon class="h-4 w-4" name="home"></lucide-icon>
+                  My Spare Cores
+                </a>
+              </li>
               <li class="lg:hidden">
                 <lucide-icon
                   class="navbar_link cursor-pointer h-8 w-8"
                   data-dropdown-toggle="menu_options"
                   name="menu" >
                 </lucide-icon>
               </li>
-              <!--
-              <li>
-                <button class="login_button text-sm items-center">
+              <li *ngIf="!isLoggedIn()">
+                <button
+                  class="login_button text-sm items-center"
+                  (click)="login()">
                   <lucide-icon name="user" class="h-4 w-4 mr-1"></lucide-icon>
                   Log in
                 </button>
               </li>
-              -->
+              <li *ngIf="isLoggedIn()">
+                <button
+                  class="login_button text-sm items-center"
+                  (click)="logout()">
+                  <lucide-icon name="user" class="h-4 w-4 mr-1"></lucide-icon>
+                  Log out
+                </button>
+              </li>
           </ul>
       </div>
   </div>

src/app/layout/header/header.component.ts

@@ -1,14 +1,34 @@
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { LucideAngularModule } from 'lucide-angular';
+import { AuthenticationService } from '../../services/authentication.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [LucideAngularModule, RouterLink],
+  imports: [LucideAngularModule, RouterLink, CommonModule],
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: {ngSkipHydration: 'true'},
 })
 export class HeaderComponent {
 
+  constructor(
+    private authService: AuthenticationService
+  ) { }
+
+  isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  login() {
+    this.authService.authenticate();
+  }
+
+  logout() {
+    this.authService.signout();
+  }
+
 }

src/app/pages/my-spare-cores/my-spare-cores.component.html

@@ -0,0 +1,33 @@
+<div class="w-full bg-primary">
+  <div class="content pt-16 pb-16">
+    <app-breadcrumbs [segments]="breadcrumbs"></app-breadcrumbs>
+
+    <div class="flex flex-col gap-4 my-8">
+      <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
+      <div class="text-white text-xl pr-16">
+        Explore, search and evaluate cloud compute resources and pricing in the table below. This comprehensive comparison includes diverse attributes like CPU count, detailed processor information, memory, GPU, storage, network speed and amount, available operating systems, and pricing models such as spot and on-demand. Use the sidebar for filtering the results, or enter your phrase in the “Search prompt” bar.
+      </div>
+    </div>
+
+    <div class="flex gap-8">
+      <div class="filter_bar bg-primary">
+        <div class="filters overflow-hidden bg-secondary">
+        </div>
+      </div>
+      <div class=" list_holder flex flex-col gap-4 limited-full">
+        <div class="top_buttons w-full flex justify-end gap-6 items-center" >
+
+        </div>
+        <div>
+          <div class="w-full overflow-x-auto relative" style="padding-left: 1px;">
+
+
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>