Add Angular frontend with Authentik OIDC authentication

- Angular 17 with standalone components
- Angular Material + Tailwind CSS
- OIDC authorization code flow with Authentik
- Role-based access control (USER, DEVELOPER, APPROVER, ADMIN)
- Dashboard with pending requests, tunnel list, and create mapping
- Nginx reverse proxy to backend API
- Multi-container Docker Compose setup (frontend, backend, postgres)
- Environment-based configuration (local, test, prod)

.dockerignore

@@ -0,0 +1,28 @@
+# Frontend
+frontend/
+node_modules/
+dist/
+.angular/
+
+# IDE
+.idea/
+.vscode/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Build
+build/
+.gradle/
+
+# Test
+coverage/
+
+# Environment
+.env
+*.env

.gitignore

@@ -6,7 +6,6 @@ build/
 !gradle/wrapper/gradle-wrapper.jar
 !**/src/main/**/build/
 !**/src/test/**/build/
-CFTunnels/
 
 ### STS ###
 .apt_generated

README.md

@@ -1,186 +0,0 @@
-# CFTunnels - Cloudflare Tunnels Management API
-
-> **Note**: All pull requests should be raised against the `test` branch.
-
-A Spring Boot REST API for managing Cloudflare Tunnels with ingress mappings and an approval workflow.
-
-## Overview
-
-CFTunnels provides a programmatic way to manage Cloudflare Tunnel configurations, allowing teams to:
-
-- View and manage Cloudflare Tunnels
-- Add, modify, and delete ingress mappings
-- Request mapping changes through an approval workflow
-- Track tunnel configurations locally
-
-## Features
-
-- **Tunnel Management**: Create, update, and delete Cloudflare tunnels
-- **Ingress Mappings**: Add custom ingress rules to tunnel configurations
-- **Approval Workflow**: Request/approve/reject mapping changes
-- **Security**: OIDC-based authentication with role-based access
-- **API Documentation**: OpenAPI/Swagger documentation
-
-## Technology Stack
-
-- Java 17
-- Spring Boot 3.x
-- Spring Data JPA
-- Spring Security with OIDC
-- H2 Database (configurable for PostgreSQL)
-- Cloudflare API v4
-
-## Prerequisites
-
-- Java 17 or higher
-- Cloudflare account with API key
-- OIDC provider (e.g., Google, Okta, Auth0)
-
-## Configuration
-
-Copy `.env.example` to `.env` and configure:
-
-```bash
-cp .env.example .env
-```
-
-### Required Environment Variables
-
-| Variable | Description |
-|---------|-------------|
-| `CLOUDFLARE_ACCOUNT_ID` | Cloudflare Account ID |
-| `CLOUDFLARE_API_KEY` | Cloudflare API Key |
-| `CLOUDFLARE_EMAIL` | Cloudflare account email |
-| `SPRING_PROFILES_ACTIVE` | Environment (local, dev, prod) |
-
-### Security Configuration
-
-OIDC settings in `application.properties`:
-
-```properties
-spring.security.oauth2.client.registration.<provider>.client-id=your-client-id
-spring.security.oauth2.client.registration.<provider>.client-secret=your-client-secret
-spring.security.oauth2.client.provider.<provider>.issuer-uri=https://your-oidc-provider
-```
-
-## Running Locally
-
-### Using Gradle
-
-```bash
-./gradlew bootRun
-```
-
-### Using Docker
-
-```bash
-docker-compose up --build
-```
-
-The API will be available at `http://localhost:8080`
-
-## API Documentation
-
-Once running, access:
-
-- **Swagger UI**: `http://localhost:8080/swagger-ui.html`
-- **OpenAPI JSON**: `http://localhost:8080/v3/api-docs`
-
-## API Endpoints
-
-### Base URL: `/cloudflare`
-
-| Method | Endpoint | Description | Required Role |
-|--------|----------|-------------|---------------|
-| GET | `/whoami` | Get current user info | USER |
-| GET | `/tunnels` | List all Cloudflare tunnels | USER |
-| GET | `/configured/tunnels` | List locally configured tunnels | USER |
-| GET | `/requests` | List all mapping requests | USER |
-| GET | `/tunnels/{tunnelId}/mappings` | Get tunnel configuration | DEVELOPER |
-| POST | `/tunnels/{tunnelId}/mappings` | Add ingress mapping | ADMIN |
-| DELETE | `/tunnels/{tunnelId}/mappings` | Delete ingress mapping | DEVELOPER |
-| POST | `/tunnels/configure/{tunnelId}/requests` | Create mapping request | DEVELOPER |
-| PUT | `/requests/{requestId}/approve` | Approve mapping request | APPROVER |
-| PUT | `/requests/{requestId}/reject` | Reject mapping request | APPROVER |
-| PUT | `/tunnels/configure/{tunnelId}` | Configure tunnel for environment | ADMIN |
-
-## Role-Based Access
-
-| Role | Permissions |
-|------|-------------|
-| USER | View tunnels and requests |
-| DEVELOPER | Create/modify/delete mappings, create requests |
-| APPROVER | Approve/reject requests |
-| ADMIN | Full access including tunnel configuration |
-
-## Example Usage
-
-### List all tunnels
-
-```bash
-curl -H "Authorization: Bearer $TOKEN" \
-  http://localhost:8080/cloudflare/tunnels
-```
-
-### Add an ingress mapping
-
-```bash
-curl -X POST \
-  -H "Authorization: Bearer $TOKEN" \
-  -H "Content-Type: application/json" \
-  -d '{
-    "hostname": "api.example.com",
-    "service": "http://localhost:8080",
-    "originRequest": {"noTLSVerify": true}
-  }' \
-  http://localhost:8080/cloudflare/tunnels/{tunnelId}/mappings
-```
-
-## Project Structure
-
-```
-CFTunnels/
-├── src/main/java/com/hithomelabs/CFTunnels/
-│   ├── CfTunnelsApplication.java     # Main application
-│   ├── Config/                      # Configuration classes
-│   ├── Controllers/                # REST controllers
-│   │   └── TunnelController.java     # Main API controller
-│   ├── Entity/                     # JPA entities
-│   │   ├── Mapping.java            # Ingress mapping
-│   │   ├── Protocol.java         # Protocol enum
-│   │   ├── Request.java         # Mapping request
-│   │   ├── Tunnel.java          # Tunnel entity
-│   │   └── User.java            # User entity
-│   ├── Models/                     # DTOs
-│   ├── Repositories/              # JPA repositories
-│   └── Services/                 # Business logic
-│       ├── CloudflareAPIService.java   # Cloudflare API
-│       └── MappingRequestService.java  # Request workflow
-└── src/main/resources/
-    ├── application.properties    # Main config
-    └── schema.sql              # Database schema
-```
-
-## Testing
-
-Run tests with:
-
-```bash
-./gradlew test
-```
-
-Run integration tests:
-
-```bash
-./gradlew integrationTest
-```
-
-## License
-
-Private - All rights reserved
-
-## References
-
-- [Cloudflare Tunnel Documentation](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/)
-- [Cloudflare API v4](https://api.cloudflare.com/)
-- [Spring Boot Documentation](https://docs.spring.io/spring-boot/docs/current/reference/)

build.gradle

@@ -45,9 +45,9 @@ repositories {
 dependencies {
 	implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.8.5'
 	implementation group: 'org.springframework.boot', name:'spring-boot-starter-oauth2-client', version: '3.5.5'
-	implementation 'org.springframework.boot:spring-boot-starter-web'
 	compileOnly 'org.projectlombok:lombok:1.18.30'
 	annotationProcessor 'org.projectlombok:lombok:1.18.30'
+	implementation 'org.springframework.boot:spring-boot-starter-web'
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 	testImplementation 'org.springframework.security:spring-security-test'
 	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'

docker-compose.yaml

@@ -1,9 +1,27 @@
 services:
+  frontend:
+    build:
+      context: ./frontend
+      args:
+        - OAUTH_CLIENT_ID=${OAUTH_CLIENT_ID}
+        - OAUTH_REDIRECT_URI=${OAUTH_REDIRECT_URI}
+    container_name: cftunnels-frontend_${ENV}
+    ports:
+      - "${FRONTEND_PORT:-80}:80"
+    environment:
+      - OAUTH_CLIENT_ID=${OAUTH_CLIENT_ID}
+      - OAUTH_REDIRECT_URI=${OAUTH_REDIRECT_URI}
+    depends_on:
+      - app
+    restart: unless-stopped
+    networks:
+      - cftunnels-network
+
   app:
     image: gitea.hithomelabs.com/hithomelabs/cftunnels:${ENV}
     container_name: cftunnels_${ENV}
     ports:
-      - ${HOST_PORT}:8080
+      - "${HOST_PORT:-8080}:8080"
     environment:
       - CLOUDFLARE_ACCOUNT_ID=${CLOUDFLARE_ACCOUNT_ID}
       - CLOUDFLARE_API_KEY=${CLOUDFLARE_API_KEY}
@@ -17,7 +35,12 @@ services:
       - SWAGGER_OAUTH_CLIENT_ID=${SWAGGER_OAUTH_CLIENT_ID}
     env_file:
       - stack.env
+    depends_on:
+      - postgres
     restart: unless-stopped
+    networks:
+      - cftunnels-network
+
   postgres:
     image: postgres:15-alpine
     container_name: cftunnel-db-${ENV}
@@ -27,6 +50,12 @@ services:
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
     restart: unless-stopped
     ports:
-      - "${DB_PORT}:5432"
+      - "${DB_PORT:-5432}:5432"
     volumes:
       - ${DB_PATH}:/var/lib/postgresql/data
+    networks:
+      - cftunnels-network
+
+networks:
+  cftunnels-network:
+    driver: bridge

frontend/.dockerignore

@@ -0,0 +1,24 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+.angular/
+
+# IDE
+.idea/
+.vscode/
+
+# OS
+.DS_Store
+
+# Logs
+*.log
+npm-debug.log*
+
+# Test
+coverage/
+
+# Misc
+*.tgz
+.cache/

frontend/.gitignore

@@ -0,0 +1,32 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+.angular/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment files (keep template)
+# environment.ts is generated from environment.*.ts by Angular CLI
+
+# Test coverage
+coverage/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+*.tgz
+.cache/

frontend/Dockerfile

@@ -0,0 +1,38 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build arguments for OIDC config
+ARG OAUTH_CLIENT_ID=cftunnels
+ARG OAUTH_REDIRECT_URI=http://localhost:80/login
+
+# Set build-time environment variables
+ENV OAUTH_CLIENT_ID=$OAUTH_CLIENT_ID
+ENV OAUTH_REDIRECT_URI=$OAUTH_REDIRECT_URI
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files
+COPY --from=build /app/dist/cftunnels-frontend/browser /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/angular.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "cftunnels-frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "standalone": true
+        },
+        "@schematics/angular:directive": {
+          "standalone": true
+        },
+        "@schematics/angular:pipe": {
+          "standalone": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/cftunnels-frontend",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            },
+            "local": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.local.ts"
+                }
+              ]
+            },
+            "test": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "cftunnels-frontend:build:production"
+            },
+            "development": {
+              "buildTarget": "cftunnels-frontend:build:development"
+            },
+            "local": {
+              "buildTarget": "cftunnels-frontend:build:local"
+            },
+            "test": {
+              "buildTarget": "cftunnels-frontend:build:test"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

frontend/nginx.conf

@@ -0,0 +1,40 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API calls to backend
+    location /cloudflare/ {
+        proxy_pass http://app:8080/cloudflare/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # Timeouts
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "cftunnels-frontend",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/cdk": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/material": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@angular/router": "^17.3.0",
+    "angular-oauth2-oidc": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.6.0",
+    "zone.js": "~0.14.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@types/node": "^20.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "~5.4.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: `<router-outlet></router-outlet>`,
+})
+export class AppComponent {}

frontend/src/app/app.config.ts

@@ -0,0 +1,28 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { OAuthModule } from 'angular-oauth2-oidc';
+
+import { routes } from './app/app.routes';
+import { authInterceptor } from './app/core/auth/auth.interceptor';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([authInterceptor])),
+    provideAnimations(),
+    importProvidersFrom(
+      OAuthModule.forRoot({
+        config: {
+          issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+          redirectUri: window.location.origin + '/login',
+          clientId: 'cftunnels',
+          scope: 'openid profile email offline_access',
+          responseType: 'code',
+          showDebugInformation: true,
+        },
+      })
+    ),
+  ],
+};

frontend/src/app/app.routes.ts

@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+import { authGuard } from './core/auth/auth.guard';
+import { loginGuard } from './core/auth/login.guard';
+
+export const routes: Routes = [
+  {
+    path: '',
+    canActivate: [authGuard],
+    loadComponent: () =>
+      import('./features/dashboard/dashboard.component').then(
+        (m) => m.DashboardComponent
+      ),
+  },
+  {
+    path: 'login',
+    canActivate: [loginGuard],
+    loadComponent: () =>
+      import('./features/login/login.component').then((m) => m.LoginComponent),
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];

frontend/src/app/core/auth/auth.guard.ts

@@ -0,0 +1,17 @@
+import { inject } from '@angular/core';
+import { Router, CanActivateFn } from '@angular/router';
+import { AuthService } from './auth.service';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService['oauthService'].isAuthenticated()) {
+    return true;
+  }
+
+  router.navigate(['/login'], {
+    queryParams: { returnUrl: state.url },
+  });
+  return false;
+};

frontend/src/app/core/auth/auth.interceptor.ts

@@ -0,0 +1,30 @@
+import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { catchError, throwError } from 'rxjs';
+import { AuthService } from './auth.service';
+
+export const authInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  const token = authService.getAccessToken();
+
+  if (token && req.url.includes('/cloudflare/')) {
+    req = req.clone({
+      setHeaders: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  }
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      if (error.status === 401) {
+        authService.logout();
+        router.navigate(['/login']);
+      }
+      return throwError(() => error);
+    })
+  );
+};

frontend/src/app/core/auth/auth.service.ts

@@ -0,0 +1,99 @@
+import { Injectable, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  OAuthService,
+  AuthConfig,
+} from 'angular-oauth2-oidc';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { User } from '../shared/models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  private userSubject = new BehaviorSubject<User | null>(null);
+  public user$ = this.userSubject.asObservable();
+
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
+
+  constructor(
+    private oauthService: OAuthService,
+    private router: Router
+  ) {}
+
+  configure(): void {
+    const authCodeFlowConfig: AuthConfig = {
+      issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+      redirectUri: window.location.origin + '/login',
+      clientId: 'cftunnels',
+      scope: 'openid profile email offline_access',
+      responseType: 'code',
+      showDebugInformation: true,
+      strictDiscoveryDocumentValidation: false,
+      useSilentRefresh: true,
+    };
+
+    this.oauthService.configure(authCodeFlowConfig);
+    this.oauthService.loadDiscoveryDocumentAndTryLogin();
+  }
+
+  async login(): Promise<void> {
+    await this.oauthService.loadDiscoveryDocument();
+    await this.oauthService.initCodeFlow();
+  }
+
+  async handleLoginCallback(): Promise<void> {
+    await this.oauthService.loadDiscoveryDocumentAndTryLogin();
+    if (this.oauthService.isAuthenticated()) {
+      await this.fetchUserInfo();
+      this.isAuthenticatedSubject.next(true);
+    }
+  }
+
+  private async fetchUserInfo(): Promise<void> {
+    try {
+      const claims = await this.oauthService.loadUserProfile();
+      const userInfo = claims as unknown as {
+        info: { email: string; name: string };
+        groups: string[];
+      };
+
+      const user: User = {
+        username: userInfo.info?.name || userInfo.info?.email || 'Unknown',
+        roles: userInfo.groups || [],
+      };
+
+      this.userSubject.next(user);
+    } catch (error) {
+      console.error('Error fetching user info:', error);
+    }
+  }
+
+  logout(): void {
+    this.oauthService.logOut();
+    this.userSubject.next(null);
+    this.isAuthenticatedSubject.next(false);
+    this.router.navigate(['/login']);
+  }
+
+  getAccessToken(): string | null {
+    return this.oauthService.getAccessToken();
+  }
+
+  hasRole(role: string): boolean {
+    const user = this.userSubject.getValue();
+    if (!user) return false;
+    return user.roles.some(
+      (r) => r === role || r === `ROLE_${role}` || r === `ROLE_${role.toUpperCase()}`
+    );
+  }
+
+  hasAnyRole(roles: string[]): boolean {
+    return roles.some((role) => this.hasRole(role));
+  }
+
+  getUser(): User | null {
+    return this.userSubject.getValue();
+  }
+}

frontend/src/app/core/auth/login.guard.ts

@@ -0,0 +1,15 @@
+import { inject } from '@angular/core';
+import { Router, CanActivateFn } from '@angular/router';
+import { AuthService } from './auth.service';
+
+export const loginGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService['oauthService'].isAuthenticated()) {
+    router.navigate(['/']);
+    return false;
+  }
+
+  return true;
+};

frontend/src/app/core/services/api.service.ts

@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import {
+  ApiResponse,
+  User,
+  Request,
+  Tunnel,
+  Mapping,
+} from '../../shared/models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiService {
+  private baseUrl = '/cloudflare';
+
+  constructor(private http: HttpClient) {}
+
+  whoami(): Observable<ApiResponse<User>> {
+    return this.http.get<ApiResponse<User>>(`${this.baseUrl}/whoami`);
+  }
+
+  getRequests(): Observable<ApiResponse<Request[]>> {
+    return this.http.get<ApiResponse<Request[]>>(`${this.baseUrl}/requests`);
+  }
+
+  approveRequest(requestId: string): Observable<Request> {
+    return this.http.put<Request>(
+      `${this.baseUrl}/requests/${requestId}/approve`,
+      {}
+    );
+  }
+
+  rejectRequest(requestId: string): Observable<Request> {
+    return this.http.put<Request>(
+      `${this.baseUrl}/requests/${requestId}/reject`,
+      {}
+    );
+  }
+
+  getConfiguredTunnels(): Observable<ApiResponse<Tunnel[]>> {
+    return this.http.get<ApiResponse<Tunnel[]>>(
+      `${this.baseUrl}/configured/tunnels`
+    );
+  }
+
+  getTunnelMappings(tunnelId: string): Observable<ApiResponse<Mapping[]>> {
+    return this.http.get<ApiResponse<Mapping[]>>(
+      `${this.baseUrl}/tunnels/${tunnelId}/mappings`
+    );
+  }
+
+  createMappingRequest(
+    tunnelId: string,
+    mapping: { subdomain: string; protocol: string; port: number }
+  ): Observable<Request> {
+    return this.http.post<Request>(
+      `${this.baseUrl}/tunnels/${tunnelId}/requests`,
+      mapping
+    );
+  }
+}

frontend/src/app/features/dashboard/create-mapping/create-mapping.component.ts

@@ -0,0 +1,220 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Tunnel } from '../../../shared/models';
+import { ApiService } from '../../../core/services/api.service';
+
+@Component({
+  selector: 'app-create-mapping',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+  ],
+  template: `
+    <mat-card class="create-card">
+      <mat-card-header>
+        <mat-icon mat-card-avatar>add_circle</mat-icon>
+        <mat-card-title>Create New Mapping Request</mat-card-title>
+        <mat-card-subtitle>Request a new subdomain mapping</mat-card-subtitle>
+      </mat-card-header>
+
+      <mat-card-content>
+        <form [formGroup]="mappingForm" (ngSubmit)="onSubmit()">
+          <div class="form-row">
+            <mat-form-field appearance="outline">
+              <mat-label>Subdomain</mat-label>
+              <input
+                matInput
+                formControlName="subdomain"
+                placeholder="myapp"
+              />
+              <span matSuffix>.hithomelabs.com</span>
+              @if (mappingForm.get('subdomain')?.hasError('required')) {
+                <mat-error>Subdomain is required</mat-error>
+              }
+            </mat-form-field>
+          </div>
+
+          <div class="form-row">
+            <mat-form-field appearance="outline">
+              <mat-label>Tunnel</mat-label>
+              <mat-select formControlName="tunnelId">
+                @for (tunnel of tunnels; track tunnel.id) {
+                  <mat-option [value]="tunnel.id">
+                    {{ tunnel.name }} ({{ tunnel.environment }})
+                  </mat-option>
+                }
+              </mat-select>
+              @if (mappingForm.get('tunnelId')?.hasError('required')) {
+                <mat-error>Tunnel is required</mat-error>
+              }
+            </mat-form-field>
+          </div>
+
+          <div class="form-row two-columns">
+            <mat-form-field appearance="outline">
+              <mat-label>Protocol</mat-label>
+              <mat-select formControlName="protocol">
+                <mat-option value="http">HTTP</mat-option>
+                <mat-option value="https">HTTPS</mat-option>
+                <mat-option value="ssh">SSH</mat-option>
+                <mat-option value="tcp">TCP</mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Port</mat-label>
+              <input
+                matInput
+                type="number"
+                formControlName="port"
+                placeholder="8080"
+              />
+              @if (mappingForm.get('port')?.hasError('required')) {
+                <mat-error>Port is required</mat-error>
+              }
+              @if (mappingForm.get('port')?.hasError('min')) {
+                <mat-error>Port must be greater than 0</mat-error>
+              }
+              @if (mappingForm.get('port')?.hasError('max')) {
+                <mat-error>Port must be less than 65535</mat-error>
+              }
+            </mat-form-field>
+          </div>
+
+          <div class="form-actions">
+            <button
+              mat-raised-button
+              color="primary"
+              type="submit"
+              [disabled]="mappingForm.invalid || isSubmitting"
+            >
+              @if (isSubmitting) {
+                <mat-spinner diameter="20"></mat-spinner>
+              } @else {
+                <mat-icon>send</mat-icon>
+              }
+              Submit Request
+            </button>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+  `,
+  styles: [
+    `
+      .create-card {
+        margin-bottom: 1.5rem;
+      }
+
+      .form-row {
+        margin-bottom: 1rem;
+      }
+
+      .two-columns {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+
+      mat-form-field {
+        width: 100%;
+      }
+
+      .form-actions {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 1.5rem;
+      }
+
+      button[mat-raised-button] {
+        min-width: 150px;
+      }
+
+      button mat-spinner {
+        display: inline-block;
+      }
+    `,
+  ],
+})
+export class CreateMappingComponent implements OnInit {
+  mappingForm: FormGroup;
+  tunnels: Tunnel[] = [];
+  isSubmitting = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private apiService: ApiService,
+    private snackBar: MatSnackBar
+  ) {
+    this.mappingForm = this.fb.group({
+      subdomain: ['', [Validators.required, Validators.pattern(/^[a-z0-9-]+$/)]],
+      tunnelId: ['', Validators.required],
+      protocol: ['http', Validators.required],
+      port: ['', [Validators.required, Validators.min(1), Validators.max(65535)]],
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadTunnels();
+  }
+
+  loadTunnels(): void {
+    this.apiService.getConfiguredTunnels().subscribe({
+      next: (response) => {
+        this.tunnels = response.data;
+      },
+      error: (err) => {
+        console.error('Error loading tunnels:', err);
+        this.snackBar.open('Failed to load tunnels', 'Close', {
+          duration: 3000,
+        });
+      },
+    });
+  }
+
+  onSubmit(): void {
+    if (this.mappingForm.invalid) return;
+
+    this.isSubmitting = true;
+    const { subdomain, tunnelId, protocol, port } = this.mappingForm.value;
+
+    this.apiService.createMappingRequest(tunnelId, {
+      subdomain,
+      protocol,
+      port,
+    }).subscribe({
+      next: () => {
+        this.snackBar.open('Mapping request submitted successfully!', 'Close', {
+          duration: 3000,
+        });
+        this.mappingForm.reset({ protocol: 'http' });
+        this.isSubmitting = false;
+      },
+      error: (err) => {
+        console.error('Error creating mapping request:', err);
+        this.snackBar.open('Failed to submit mapping request', 'Close', {
+          duration: 3000,
+        });
+        this.isSubmitting = false;
+      },
+    });
+  }
+}

frontend/src/app/features/dashboard/dashboard.component.ts

@@ -0,0 +1,167 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { AuthService } from '../../core/auth/auth.service';
+import { ApiService } from '../../core/services/api.service';
+import { User, Request, Tunnel } from '../../shared/models';
+import { PendingRequestsComponent } from './pending-requests/pending-requests.component';
+import { TunnelListComponent } from './tunnel-list/tunnel-list.component';
+import { CreateMappingComponent } from './create-mapping/create-mapping.component';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    MatCardModule,
+    PendingRequestsComponent,
+    TunnelListComponent,
+    CreateMappingComponent,
+  ],
+  template: `
+    <mat-toolbar color="primary" class="toolbar">
+      <span class="title">
+        <mat-icon>hub</mat-icon>
+        CFTunnels
+      </span>
+      <span class="spacer"></span>
+      <span class="user-info" *ngIf="user">
+        {{ user.username }}
+        <span class="roles">({{ user.roles.join(', ') }})</span>
+      </span>
+      <button mat-icon-button (click)="logout()" title="Logout">
+        <mat-icon>logout</mat-icon>
+      </button>
+    </mat-toolbar>
+
+    <div class="dashboard-container">
+      <div class="dashboard-content">
+        <!-- Pending Requests Section - APPROVER/ADMIN only -->
+        @if (canApprove()) {
+          <app-pending-requests
+            [requests]="pendingRequests"
+            (requestUpdated)="loadRequests()"
+          ></app-pending-requests>
+        }
+
+        <!-- Tunnel List Section - DEVELOPER+ -->
+        @if (canViewTunnels()) {
+          <app-tunnel-list [tunnels]="tunnels"></app-tunnel-list>
+        }
+
+        <!-- Create Mapping Section - USER+ -->
+        <app-create-mapping></app-create-mapping>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .toolbar {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+      }
+
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-weight: 500;
+      }
+
+      .spacer {
+        flex: 1 1 auto;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-right: 1rem;
+        font-size: 0.9rem;
+      }
+
+      .roles {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 0.8rem;
+      }
+
+      .dashboard-container {
+        display: flex;
+        justify-content: center;
+        padding: 1.5rem;
+      }
+
+      .dashboard-content {
+        width: 100%;
+        max-width: 900px;
+      }
+    `,
+  ],
+})
+export class DashboardComponent implements OnInit {
+  user: User | null = null;
+  pendingRequests: Request[] = [];
+  tunnels: Tunnel[] = [];
+
+  constructor(
+    private authService: AuthService,
+    private apiService: ApiService
+  ) {}
+
+  ngOnInit(): void {
+    this.authService.user$.subscribe((user) => {
+      this.user = user;
+      if (user) {
+        this.loadData();
+      }
+    });
+  }
+
+  loadData(): void {
+    this.loadRequests();
+    this.loadTunnels();
+  }
+
+  loadRequests(): void {
+    this.apiService.getRequests().subscribe({
+      next: (response) => {
+        this.pendingRequests = response.data.filter(
+          (r) => r.status === 'PENDING'
+        );
+      },
+      error: (err) => console.error('Error loading requests:', err),
+    });
+  }
+
+  loadTunnels(): void {
+    this.apiService.getConfiguredTunnels().subscribe({
+      next: (response) => {
+        this.tunnels = response.data;
+      },
+      error: (err) => console.error('Error loading tunnels:', err),
+    });
+  }
+
+  canApprove(): boolean {
+    return this.authService.hasAnyRole(['APPROVER', 'ADMIN']);
+  }
+
+  canViewTunnels(): boolean {
+    return this.authService.hasAnyRole(['DEVELOPER', 'APPROVER', 'ADMIN']);
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+}

frontend/src/app/features/dashboard/pending-requests/pending-requests.component.ts

@@ -0,0 +1,174 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { Request } from '../../../shared/models';
+import { ApiService } from '../../../core/services/api.service';
+
+@Component({
+  selector: 'app-pending-requests',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatProgressBarModule,
+  ],
+  template: `
+    <mat-card class="requests-card">
+      <mat-card-header>
+        <mat-icon mat-card-avatar>pending_actions</mat-icon>
+        <mat-card-title>Pending Requests</mat-card-title>
+        <mat-card-subtitle
+          >{{ requests.length }} request(s) awaiting approval</mat-card-subtitle
+        >
+      </mat-card-header>
+
+      <mat-card-content>
+        @if (isLoading) {
+          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        }
+
+        @if (!isLoading && requests.length === 0) {
+          <div class="empty-state">
+            <mat-icon>check_circle</mat-icon>
+            <p>No pending requests</p>
+          </div>
+        }
+
+        @for (request of requests; track request.id) {
+          <div class="request-item">
+            <div class="request-info">
+              <span class="subdomain">{{ request.mapping.subdomain }}.hithomelabs.com</span>
+              <span class="tunnel">→ {{ request.mapping.tunnel.name }}</span>
+              <span class="port">Port: {{ request.mapping.port }}</span>
+            </div>
+            <div class="request-actions">
+              <button
+                mat-mini-fab
+                color="primary"
+                (click)="approve(request.id)"
+                [disabled]="actionInProgress"
+                title="Approve"
+              >
+                <mat-icon>check</mat-icon>
+              </button>
+              <button
+                mat-mini-fab
+                color="warn"
+                (click)="reject(request.id)"
+                [disabled]="actionInProgress"
+                title="Reject"
+              >
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+          </div>
+        }
+      </mat-card-content>
+    </mat-card>
+  `,
+  styles: [
+    `
+      .requests-card {
+        margin-bottom: 1.5rem;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2rem;
+        color: #4caf50;
+      }
+
+      .empty-state mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+      }
+
+      .request-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+        border-bottom: 1px solid #eee;
+      }
+
+      .request-item:last-child {
+        border-bottom: none;
+      }
+
+      .request-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .subdomain {
+        font-weight: 500;
+        color: #1976d2;
+      }
+
+      .tunnel {
+        color: #666;
+        font-size: 0.9rem;
+      }
+
+      .port {
+        color: #999;
+        font-size: 0.85rem;
+      }
+
+      .request-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+    `,
+  ],
+})
+export class PendingRequestsComponent implements OnInit {
+  @Input() requests: Request[] = [];
+  @Output() requestUpdated = new EventEmitter<void>();
+
+  isLoading = false;
+  actionInProgress = false;
+
+  constructor(private apiService: ApiService) {}
+
+  ngOnInit(): void {}
+
+  approve(requestId: string): void {
+    this.actionInProgress = true;
+    this.apiService.approveRequest(requestId).subscribe({
+      next: () => {
+        this.requestUpdated.emit();
+        this.actionInProgress = false;
+      },
+      error: (err) => {
+        console.error('Error approving request:', err);
+        this.actionInProgress = false;
+      },
+    });
+  }
+
+  reject(requestId: string): void {
+    this.actionInProgress = true;
+    this.apiService.rejectRequest(requestId).subscribe({
+      next: () => {
+        this.requestUpdated.emit();
+        this.actionInProgress = false;
+      },
+      error: (err) => {
+        console.error('Error rejecting request:', err);
+        this.actionInProgress = false;
+      },
+    });
+  }
+}

frontend/src/app/features/dashboard/tunnel-list/tunnel-list.component.ts

@@ -0,0 +1,182 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Tunnel, Mapping } from '../../../shared/models';
+import { ApiService } from '../../../core/services/api.service';
+
+@Component({
+  selector: 'app-tunnel-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatExpansionModule,
+    MatProgressSpinnerModule,
+  ],
+  template: `
+    <mat-card class="tunnels-card">
+      <mat-card-header>
+        <mat-icon mat-card-avatar>dns</mat-icon>
+        <mat-card-title>Tunnels</mat-card-title>
+        <mat-card-subtitle
+          >{{ tunnels.length }} tunnel(s) configured</mat-card-subtitle
+        >
+      </mat-card-header>
+
+      <mat-card-content>
+        @if (isLoading) {
+          <div class="loading-container">
+            <mat-spinner diameter="30"></mat-spinner>
+          </div>
+        }
+
+        @if (!isLoading && tunnels.length === 0) {
+          <div class="empty-state">
+            <mat-icon>info</mat-icon>
+            <p>No tunnels configured</p>
+          </div>
+        }
+
+        <mat-accordion>
+          @for (tunnel of tunnels; track tunnel.id) {
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <mat-panel-title>
+                  <mat-icon class="tunnel-icon">hub</mat-icon>
+                  {{ tunnel.name }}
+                </mat-panel-title>
+                <mat-panel-description>
+                  {{ tunnel.environment }}
+                </mat-panel-description>
+              </mat-expansion-panel-header>
+
+              @if (expandedTunnelId === tunnel.id) {
+                @if (mappingsLoading) {
+                  <mat-spinner diameter="20"></mat-spinner>
+                } @else if (tunnelMappings[tunnel.id]?.length === 0) {
+                  <p class="no-mappings">No mappings for this tunnel</p>
+                } @else {
+                  @for (mapping of tunnelMappings[tunnel.id]; track mapping.id) {
+                    <div class="mapping-item">
+                      <span class="hostname"
+                        >{{ mapping.subdomain }}.hithomelabs.com</span
+                      >
+                      <span class="service"
+                        >→ {{ mapping.protocol }}://192.168.0.100:{{
+                          mapping.port
+                        }}</span
+                      >
+                    </div>
+                  }
+                }
+              } @else {
+                <button
+                  mat-button
+                  color="primary"
+                  (click)="loadMappings(tunnel.id)"
+                >
+                  <mat-icon>visibility</mat-icon>
+                  View Mappings
+                </button>
+              }
+            </mat-expansion-panel>
+          }
+        </mat-accordion>
+      </mat-card-content>
+    </mat-card>
+  `,
+  styles: [
+    `
+      .tunnels-card {
+        margin-bottom: 1.5rem;
+      }
+
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        padding: 2rem;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 2rem;
+        color: #666;
+      }
+
+      .empty-state mat-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+      }
+
+      .tunnel-icon {
+        margin-right: 0.5rem;
+      }
+
+      .mapping-item {
+        display: flex;
+        flex-direction: column;
+        padding: 0.75rem;
+        margin: 0.5rem 0;
+        background: #f5f5f5;
+        border-radius: 4px;
+      }
+
+      .hostname {
+        font-weight: 500;
+        color: #1976d2;
+      }
+
+      .service {
+        color: #666;
+        font-size: 0.9rem;
+      }
+
+      .no-mappings {
+        color: #999;
+        font-style: italic;
+      }
+
+      mat-panel-title {
+        display: flex;
+        align-items: center;
+      }
+    `,
+  ],
+})
+export class TunnelListComponent implements OnInit {
+  @Input() tunnels: Tunnel[] = [];
+
+  isLoading = false;
+  mappingsLoading = false;
+  expandedTunnelId: string | null = null;
+  tunnelMappings: { [key: string]: Mapping[] } = {};
+
+  constructor(private apiService: ApiService) {}
+
+  ngOnInit(): void {}
+
+  loadMappings(tunnelId: string): void {
+    this.expandedTunnelId = tunnelId;
+    this.mappingsLoading = true;
+
+    this.apiService.getTunnelMappings(tunnelId).subscribe({
+      next: (response) => {
+        this.tunnelMappings[tunnelId] = response.data;
+        this.mappingsLoading = false;
+      },
+      error: (err) => {
+        console.error('Error loading mappings:', err);
+        this.mappingsLoading = false;
+      },
+    });
+  }
+}

frontend/src/app/features/login/login.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AuthService } from '../../core/auth/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+  ],
+  template: `
+    <div class="login-container">
+      <mat-card class="login-card">
+        <mat-card-header>
+          <mat-card-title>
+            <mat-icon class="logo-icon">hub</mat-icon>
+            CFTunnels
+          </mat-card-title>
+          <mat-card-subtitle>Cloudflare Tunnel Management</mat-card-subtitle>
+        </mat-card-header>
+
+        <mat-card-content>
+          <p>Sign in to manage your Cloudflare Tunnels and mappings.</p>
+
+          @if (isLoading) {
+            <div class="spinner-container">
+              <mat-spinner diameter="40"></mat-spinner>
+            </div>
+          } @else {
+            <button
+              mat-raised-button
+              color="primary"
+              class="login-button"
+              (click)="login()"
+            >
+              <mat-icon>login</mat-icon>
+              Login with Authentik
+            </button>
+          }
+        </mat-card-content>
+      </mat-card>
+    </div>
+  `,
+  styles: [
+    `
+      .login-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+
+      .login-card {
+        width: 400px;
+        padding: 2rem;
+        text-align: center;
+      }
+
+      .logo-icon {
+        font-size: 48px;
+        width: 48px;
+        height: 48px;
+        margin-bottom: 1rem;
+        color: #667eea;
+      }
+
+      mat-card-title {
+        font-size: 2rem;
+        margin-bottom: 0.5rem;
+      }
+
+      mat-card-subtitle {
+        margin-bottom: 2rem;
+      }
+
+      p {
+        color: #666;
+        margin-bottom: 2rem;
+      }
+
+      .login-button {
+        width: 100%;
+        padding: 1rem;
+        font-size: 1.1rem;
+      }
+
+      .spinner-container {
+        display: flex;
+        justify-content: center;
+        margin-top: 2rem;
+      }
+    `,
+  ],
+})
+export class LoginComponent implements OnInit {
+  isLoading = false;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('code') || urlParams.has('state')) {
+      this.isLoading = true;
+      this.authService.handleLoginCallback().then(() => {
+        this.router.navigate(['/']);
+      });
+    }
+  }
+
+  async login(): Promise<void> {
+    this.isLoading = true;
+    await this.authService.login();
+  }
+}

frontend/src/app/shared/models/index.ts

@@ -0,0 +1,35 @@
+export interface User {
+  username: string;
+  roles: string[];
+}
+
+export interface Tunnel {
+  id: string;
+  name: string;
+  environment: string;
+}
+
+export interface Mapping {
+  id: string;
+  subdomain: string;
+  protocol: string;
+  port: number;
+  tunnel: Tunnel;
+}
+
+export interface Request {
+  id: string;
+  mapping: Mapping;
+  createdBy: User;
+  acceptedBy?: User;
+  status: 'PENDING' | 'APPROVED' | 'REJECTED';
+}
+
+export interface ApiResponse<T> {
+  status: string;
+  data: T;
+}
+
+export interface TunnelWithMappings extends Tunnel {
+  mappings?: Mapping[];
+}

frontend/src/environments/environment.local.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: false,
+  apiUrl: '/cloudflare',
+  issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+  oauthClientId: 'cftunnels',
+  redirectUri: 'http://localhost:80/login'
+};

frontend/src/environments/environment.prod.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: true,
+  apiUrl: '/cloudflare',
+  issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+  oauthClientId: 'cftunnels',
+  redirectUri: 'https://cftunnels.hithomelabs.com/login'
+};

frontend/src/environments/environment.test.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: false,
+  apiUrl: '/cloudflare',
+  issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+  oauthClientId: 'cftunnels',
+  redirectUri: 'https://testcf.hithomelabs.com/login'
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: false,
+  apiUrl: '/cloudflare',
+  issuer: 'https://auth.hithomelabs.com/application/o/cftunnels/',
+  oauthClientId: 'cftunnels',
+  redirectUri: '/login'
+};

frontend/src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CFTunnels</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

frontend/src/styles.scss

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  background-color: #f5f5f5;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

frontend/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

src/main/java/com/hithomelabs/CFTunnels/CfTunnelsApplication.java

@@ -2,44 +2,10 @@ package com.hithomelabs.CFTunnels;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
-/**
+
- * Main Spring Boot application class for Cloudflare Tunnels API.
- *
- * <p>This application provides a RESTful API for managing Cloudflare Tunnels,
- * allowing users to create tunnel mappings to services with an approval workflow.</p>
- *
- * <p><b>Features:</b></p>
- * <ul>
- *   <li>Create, update, and delete Cloudflare tunnels</li>
- *   <li>Add ingress mappings to tunnels</li>
- *   <li>Request/approval workflow for mapping changes</li>
- *   <li>OIDC-based authentication with role-based access</li>
- * </ul>
- *
- * <p><b>Technology Stack:</b></p>
- * <ul>
- *   <li>Java 17</li>
- *   <li>Spring Boot 3.x</li>
- *   <li>Spring Data JPA</li>
- *   <li>Spring Security with OIDC</li>
- *   <li>H2 Database (configurable for PostgreSQL)</li>
- *   <li>Cloudflare API</li>
- * </ul>
- *
- * <p>Access the API documentation at:
- * {@code /swagger-ui.html} for the Swagger/OpenAPI UI</p>
- *
- * @see <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-negative">Cloudflare Tunnel Documentation</a>
- * @since 1.0.0
- */
 @SpringBootApplication
 public class CfTunnelsApplication {
 
-    /**
-     * Main entry point for the application.
-     * 
-     * @param args command line arguments passed to the application
-     */
 	public static void main(String[] args) {
 		SpringApplication.run(CfTunnelsApplication.class, args);
 	}

src/main/java/com/hithomelabs/CFTunnels/Config/CloudflareConfig.java

@@ -3,47 +3,11 @@ package com.hithomelabs.CFTunnels.Config;
 import org.springframework.boot.context.properties.ConfigurationProperties;
 import org.springframework.context.annotation.Configuration;
 
-/**
- * Configuration class for Cloudflare API credentials.
- * 
- * <p>Loads Cloudflare configuration from application properties
- * using the {@code cloudflare.*} prefix.</p>
- * 
- * <p><b>Example configuration in application.properties:</b></p>
- * <pre>
- * cloudflare.account-id=your-account-id
- * cloudflare.api-key=your-api-key
- * cloudflare.email=your@email.com
- * </pre>
- * 
- * @see <a href="https://api.cloudflare.com/">Cloudflare API Documentation</a>
- */
 @Configuration
 @ConfigurationProperties(prefix = "cloudflare")
 public class CloudflareConfig {
-
-    /**
-     * Cloudflare account ID.
-     * 
-     * <p>Found in the Cloudflare Dashboard under
-     * Overview > Account ID</p>
-     */
     private String accountId;
-
-    /**
-     * Cloudflare API Key.
-     * 
-     * <p>Generated in Cloudflare Dashboard under
-     * Profile > API Tokens > Global API Key</p>
-     */
     private String apiKey;
-
-    /**
-     * Cloudflare account email.
-     * 
-     * <p>The email address associated with your
-     * Cloudflare account.</p>
-     */
     private String email;
 
     // Getters and Setters

src/main/java/com/hithomelabs/CFTunnels/Controllers/TunnelController.java

@@ -22,6 +22,7 @@ import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.web.servlet.error.ErrorController;
 import org.springframework.dao.DataAccessException;
 import org.springframework.http.*;
+import org.springframework.http.*;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.security.core.GrantedAuthority;
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
@@ -35,41 +36,6 @@ import java.util.Map;
 import java.util.NoSuchElementException;
 import java.util.UUID;
 
-/**
- * REST Controller for managing Cloudflare Tunnels.
- * 
- * <p>This controller provides the public API for managing Cloudflare Tunnels
- * and their ingress mappings. All endpoints require authentication via OIDC
- * and are protected by role-based access control.</p>
- * 
- * <p><b>Base URL:</b> {@code /cloudflare}</p>
- * 
- * <p><b>Authentication:</b> OIDC-based with role-based access</p>
- * 
- * <p><b>Available Roles:</b></p>
- * <ul>
- *   <li>USER - View tunnels and requests</li>
- *   <li>DEVELOPER - Create/modify/delete mappings</li>
- *   <li>APPROVER - Approve/reject requests</li>
- *   <li>ADMIN - Full tunnel configuration access</li>
- * </ul>
- * 
- * <p><b>Example Usage:</b></p>
- * <pre>
- * # Get all tunnels (requires USER role)
- * curl -H "Authorization: Bearer &lt;token&gt;" \
- *   https://api.example.com/cloudflare/tunnels
- * 
- * # Add a mapping (requires ADMIN role)
- * curl -X POST -H "Authorization: Bearer &lt;token&gt;" \
- *   -H "Content-Type: application/json" \
- *   -d '{"hostname":"api.example.com","service":"http://localhost:8080"}' \
- *   https://api.example.com/cloudflare/tunnels/{tunnelId}/mappings
- * </pre>
- * 
- * @see CloudflareAPIService
- * @see MappingRequestService
- */
 @RestController
 @RequestMapping("/cloudflare")
 public class TunnelController implements ErrorController {
@@ -97,21 +63,9 @@ public class TunnelController implements ErrorController {
     @Autowired
     private UserRepository userRepository;
 
-    /**
-     * Current environment (loaded from spring.profiles.active).
-     */
     @Value("${spring.profiles.active}")
     private String environment;
 
-    /**
-     * Get current user information.
-     * 
-     * <p>Returns the authenticated user's username and roles.</p>
-     * 
-     * @param oidcUser The authenticated OIDC user
-     * @return Map containing username and roles
-     * @throws SecurityException if authentication fails
-     */
     @PreAuthorize("hasAnyRole('USER')")
     @GetMapping("/whoami")
     public Map<String,Object> whoAmI(@AuthenticationPrincipal OidcUser oidcUser) {
@@ -125,16 +79,6 @@ public class TunnelController implements ErrorController {
         );
     }
 
-    /**
-     * Get all tunnels from Cloudflare API.
-     * 
-     * <p>Fetches the complete list of tunnels from Cloudflare,
-     * including their status and configuration from the Cloudflare API.</p>
-     * 
-     * @return Map containing list of all tunnels
-     * @throws SecurityException if user lacks required role
-     * @see <a href="https://api.cloudflare.com/#cfd_tunnel-get-tunnels">Cloudflare API</a>
-     */
     @PreAuthorize("hasAnyRole('USER')")
     @GetMapping("/tunnels")
     @Operation( security = { @SecurityRequirement(name = "oidcAuth") } )
@@ -148,16 +92,6 @@ public class TunnelController implements ErrorController {
         return ResponseEntity.ok(jsonResponse);
     }
 
-    /**
-     * Get locally configured tunnels.
-     * 
-     * <p>Returns the tunnels that have been configured locally
-     * with environment associations.</p>
-     * 
-     * @return Map containing list of configured tunnels
-     * @throws SecurityException if user lacks required role
-     * @see CloudflareAPIService#getAllConfiguredTunnels()
-     */
     @PreAuthorize("hasAnyRole('USER')")
     @GetMapping("/configured/tunnels")
     public ResponseEntity<Map<String,Object>> getConfiguredTunnels(){
@@ -172,14 +106,6 @@ public class TunnelController implements ErrorController {
         }
     }
 
-    /**
-     * Get all mapping requests.
-     * 
-     * <p>Returns all pending, approved, and rejected mapping requests.</p>
-     * 
-     * @return Map containing list of all requests
-     * @throws SecurityException if user lacks required role
-     */
     @PreAuthorize("hasAnyRole('USER')")
     @GetMapping("/requests")
     public ResponseEntity<Map<String,Object>> getAllRequests() {
@@ -194,17 +120,6 @@ public class TunnelController implements ErrorController {
         }
     }
 
-    /**
-     * Get tunnel configuration from Cloudflare.
-     * 
-     * <p>Fetches the complete configuration for a specific tunnel,
-     * including all ingress rules.</p>
-     * 
-     * @param tunnelId The Cloudflare tunnel ID (UUID)
-     * @return Map containing tunnel configuration
-     * @throws SecurityException if user lacks required role
-     * @see <a href="https://api.cloudflare.com/#cfd_tunnel-get-tunnel-config">Cloudflare API</a>
-     */
     @PreAuthorize("hasAnyRole('DEVELOPER')")
     @GetMapping("/tunnels/{tunnelId}/mappings")
     public ResponseEntity<Map<String,Object>> getTunnelConfigurations(@PathVariable String tunnelId) {
@@ -217,41 +132,22 @@ public class TunnelController implements ErrorController {
         return ResponseEntity.ok(jsonResponse);
     }
 
-    /**
+    // 50df9101-f625-4618-b7c5-100338a57124
-     * Add an ingress mapping to a tunnel.
-     * 
-     * <p>Adds a new ingress rule to the tunnel configuration.
-     * The new rule is inserted at the second-to-last position,
-     * before any catch-all rule.</p>
-     * 
-     * @param tunnelId The Cloudflare tunnel ID (UUID)
-     * @param ingress The ingress rule to add
-     * @return Map containing the updated configuration
-     * @throws SecurityException if user lacks required role
-     * @throws JsonProcessingException if JSON processing fails
-     * 
-     * @example
-     * {
-     *   "hostname": "api.example.com",
-     *   "service": "http://localhost:8080",
-     *   "originRequest": {"noTLSVerify": true}
-     * }
-     */
     @PreAuthorize("hasAnyRole('ADMIN')")
     @PostMapping("/tunnels/{tunnelId}/mappings")
     public ResponseEntity<Map<String, Object>> addTunnelconfiguration(@PathVariable String tunnelId, @RequestBody Ingress ingress) throws JsonProcessingException {
 
         ResponseEntity<TunnelResponse> responseEntity = cloudflareAPIService.getCloudflareTunnelConfigurations(tunnelId, restTemplateConfig.restTemplate(), TunnelResponse.class);
 
-        // Inserting new ingress value at second-to last position in list
+        // * * Inserting new ingress value at second-to last position in list
         Config config = responseEntity.getBody().getResult().getConfig();
         List<Ingress> response_ingress = config.getIngress();
         response_ingress.add(response_ingress.size()-1, ingress);
 
-        // Hitting put endpoint
+        // * * Hitting put endpoint
         ResponseEntity<TunnelResponse> response = cloudflareAPIService.putCloudflareTunnelConfigurations(tunnelId, restTemplateConfig.restTemplate(), TunnelResponse.class, config);
 
-        // Displaying response
+        // * * Displaying response
         Map<String, Object> jsonResponse = new HashMap<>();
         jsonResponse.put("status", response.getStatusCode().toString());
         jsonResponse.put("data", response.getBody());
@@ -259,32 +155,21 @@ public class TunnelController implements ErrorController {
         return ResponseEntity.ok(jsonResponse);
     }
 
-    /**
-     * Delete an ingress mapping from a tunnel.
-     * 
-     * <p>Removes an ingress rule by hostname from the tunnel configuration.</p>
-     * 
-     * @param tunnelId The Cloudflare tunnel ID (UUID)
-     * @param ingress Ingress containing hostname to delete (only hostname field is used)
-     * @return Map containing the result
-     * @throws SecurityException if user lacks required role
-     * @throws JsonProcessingException if JSON processing fails
-     */
     @PreAuthorize("hasAnyRole('DEVELOPER')")
     @DeleteMapping("/tunnels/{tunnelId}/mappings")
     public ResponseEntity<Map<String, Object>> deleteTunnelConfiguration(@PathVariable String tunnelId, @RequestBody Ingress ingress) throws JsonProcessingException {
 
         ResponseEntity<TunnelResponse> responseEntity = cloudflareAPIService.getCloudflareTunnelConfigurations(tunnelId, restTemplateConfig.restTemplate(), TunnelResponse.class);
 
-        // Deleting the selected ingress value
+        // * * Deleting the selected ingress value
         Config config = responseEntity.getBody().getResult().getConfig();
         List<Ingress> response_ingress = config.getIngress();
         Boolean result = Ingress.deleteByHostName(response_ingress, ingress.getHostname());
 
-        // Hitting put endpoint
+        // * * Hitting put endpoint
         ResponseEntity<TunnelResponse> response = cloudflareAPIService.putCloudflareTunnelConfigurations(tunnelId, restTemplateConfig.restTemplate(), TunnelResponse.class, config);
 
-        // Displaying response
+        // * * Displaying response
         Map<String, Object> jsonResponse = new HashMap<>();
 
         if (result){
@@ -299,20 +184,6 @@ public class TunnelController implements ErrorController {
         return ResponseEntity.ok(jsonResponse);
     }
 
-    /**
-     * Create a mapping change request.
-     * 
-     * <p>Creates a new request for changing tunnel ingress mappings.
-     * The request starts in PENDING status and must be approved
-     * before the changes are applied.</p>
-     * 
-     * @param tunnelId  The Cloudflare tunnel ID (UUID)
-     * @param oidcUser  The authenticated user
-     * @param ingess   The ingress configuration to request
-     * @return The created request with PENDING status
-     * @throws SecurityException if user lacks required role
-     * @see MappingRequestService#createMappingRequest(String, Ingress, OidcUser)
-     */
     @PreAuthorize("hasAnyRole('DEVELOPER')")
     @PostMapping("/tunnels/configure/{tunnelId}/requests")
     public ResponseEntity<Request> createTunnelMappingRequest(@PathVariable String tunnelId, @AuthenticationPrincipal OidcUser oidcUser, @RequestBody Ingress ingess){
@@ -322,17 +193,6 @@ public class TunnelController implements ErrorController {
         return ResponseEntity.status(HttpStatus.BAD_REQUEST).build();
     }
 
-    /**
-     * Approve a mapping request.
-     * 
-     * <p>Approves a pending mapping request. If approved, the
-     * mapping will be applied to the Cloudflare tunnel.</p>
-     * 
-     * @param requestId The ID of the request to approve
-     * @param oidcUser  The approver (must have APPROVER role)
-     * @return The updated request with APPROVED status
-     * @throws SecurityException if user lacks required role
-     */
     @PreAuthorize("hasAnyRole('APPROVER')")
     @PutMapping("/requests/{requestId}/approve")
     public ResponseEntity<Request> approveMappingRequest(@PathVariable UUID requestId, @AuthenticationPrincipal OidcUser oidcUser) {
@@ -350,17 +210,6 @@ public class TunnelController implements ErrorController {
         }
     }
 
-    /**
-     * Reject a mapping request.
-     * 
-     * <p>Rejects a pending mapping request. No changes
-     * will be made to the tunnel.</p>
-     * 
-     * @param requestId The ID of the request to reject
-     * @param oidcUser  The rejecter (must have APPROVER role)
-     * @return The updated request with REJECTED status
-     * @throws SecurityException if user lacks required role
-     */
     @PreAuthorize("hasAnyRole('APPROVER')")
     @PutMapping("/requests/{requestId}/reject")
     public ResponseEntity<Request> rejectMappingRequest(@PathVariable UUID requestId, @AuthenticationPrincipal OidcUser oidcUser) {
@@ -378,31 +227,13 @@ public class TunnelController implements ErrorController {
         }
     }
 
-    /**
-     * Configure a tunnel for the current environment.
-     * 
-     * <p>Creates a local configuration entry for a tunnel,
-     * associating it with the current environment (from spring.profiles.active).</p>
-     * 
-     * <p><b>Response Codes:</b></p>
-     * <ul>
-     *   <li>200 - Created/updated with new tunnel</li>
-     *   <li>204 - No changes needed</li>
-     *   <li>404 - Tunnel not found in Cloudflare</li>
-     * </ul>
-     * 
-     * @param tunnelId The Cloudflare tunnel ID (UUID)
-     * @param user    The authenticated user
-     * @return The tunnel configuration
-     * @throws SecurityException if user lacks required role
-     */
     @PreAuthorize("hasAnyRole('ADMIN')")
     @PutMapping("/tunnels/configure/{tunnelId}")
     public ResponseEntity<Tunnel> configureTunnelForEnvironment(@PathVariable String tunnelId, @AuthenticationPrincipal OidcUser user) {
         /*
-         * Returns 200 if an object is created or updated with a new representation of the object
+         *  * Returns 200 if an object is created or updated with a new representation of the object
-         * Returns 204 if the object state did not need any changing.
+         *  * Returns 204 if the object state did not need any changing.
-         * Returns 404 if the tunnelId is not valid
+         *  * Returns 404 if the tunnelId is not valid
          */
 
         try {

src/main/java/com/hithomelabs/CFTunnels/Entity/Mapping.java

@@ -6,29 +6,9 @@ import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.Setter;
 
+
 import java.util.UUID;
 
-/**
- * JPA Entity representing an ingress mapping configuration for a Cloudflare Tunnel.
- * 
- * <p>A mapping defines how incoming traffic should be routed through the tunnel
- * to your internal services. It specifies the protocol, port, and subdomain
- * where the service will be accessible.</p>
- * 
- * <p>Database Table: {@code mappings}</p>
- * 
- * <p><b>Example Usage:</b></p>
- * <pre>
- * Mapping mapping = new Mapping();
- * mapping.setPort(8080);
- * mapping.setProtocol(Protocol.HTTP);
- * mapping.setSubdomain("api");
- * </pre>
- * 
- * @see Tunnel
- * @see Protocol
- * @see Request
- */
 @Entity
 @Getter
 @Setter
@@ -37,49 +17,21 @@ import java.util.UUID;
 @Table(name = "mappings")
 public class Mapping {
 
-    /**
-     * Unique identifier for this mapping (auto-generated UUID).
-     */
     @Id
     @GeneratedValue
     @Column(columnDefinition = "uuid", nullable = false, unique = true)
     private UUID id;
 
-    /**
-     * Port number where the internal service is running.
-     * 
-     * <p>Example: 8080 for a Spring Boot application's default port.</p>
-     */
     @Column(nullable = false)
     private int port;
 
-    /**
-     * Protocol used for the connection.
-     * 
-     * <p>Supported values: HTTP, HTTPS, TCP, SSH</p>
-     * @see Protocol
-     */
     @Enumerated(EnumType.STRING)
     @Column(length = 10, nullable = false)
     private Protocol protocol;
 
-    /**
-     * Subdomain prefix for accessing this service.
-     * 
-     * <p>Example: "api" would make the service available at
-     * {@code api.yourdomain.com}</p>
-     */
     @Column(length = 50, nullable = false)
     private String subdomain;
 
-    /**
-     * The tunnel this mapping is associated with.
-     * 
-     * <p>Each mapping belongs to exactly one tunnel.
-     * This is a lazy-loaded relationship to optimize performance.</p>
-     * 
-     * @see Tunnel
-     */
     @ManyToOne(fetch = FetchType.LAZY)
     @JoinColumn(name = "tunnel_id", nullable = false)
     private Tunnel tunnel;

src/main/java/com/hithomelabs/CFTunnels/Entity/Protocol.java

@@ -1,43 +1,8 @@
 package com.hithomelabs.CFTunnels.Entity;
 
-/**
- * Enum representing supported protocols for Cloudflare Tunnel ingress mappings.
- * 
- * <p>Cloudflare Tunnel supports multiple protocols for routing traffic
- * to your internal services. This enum defines the available options.</p>
- * 
- * <p><b>Supported Protocols:</b></p>
- * <ul>
- *   <li>{@link #HTTP} - Standard HTTP protocol (port 80)</li>
- *   <li>{@link #HTTPS} - Secure HTTP protocol (port 443)</li>
- *   <li>{@link #TCP} - Raw TCP connections</li>
- *   <li>{@link #SSH} - SSH protocol for remote access</li>
- * </ul>
- * 
- * @see Mapping
- */
 public enum Protocol {
-    /**
-     * HTTP protocol for web services.
-     * Typically used with internal services running on port 80.
-     */
     HTTP,
-
-    /**
-     * HTTPS protocol for secure web services.
-     * Use this for services with TLS/SSL certificates.
-     */
     HTTPS,
-
-    /**
-     * Raw TCP protocol for non-HTTP services.
-     * Useful for databases, message queues, or custom protocols.
-     */
     TCP,
-
-    /**
-     * SSH protocol for secure shell access.
-     * Enables secure remote access to servers.
-     */
     SSH
 }

src/main/java/com/hithomelabs/CFTunnels/Entity/Request.java

@@ -8,31 +8,6 @@ import lombok.Setter;
 
 import java.util.UUID;
 
-/**
- * JPA Entity representing a mapping change request in the approval workflow.
- * 
- * <p>This entity tracks requests to add or modify tunnel ingress mappings.
- * It implements an approval workflow where:</p>
- * <ul>
- *   <li>Users create requests (status: PENDING)</li>
- *   <li>Approvers review and approve/reject (status: APPROVED/REJECTED)</li>
- * </ul>
- * 
- * <p><b>Database Table:</b> {@code requests}</p>
- * 
- * <p><b>Workflow:</b></p>
- * <pre>
- * 1. User submits mapping request via REST API
- * 2. Request is created with PENDING status
- * 3. APPROVER role reviews the request
- * 4. If approved: mapping is applied to Cloudflare tunnel
- * 5. If rejected: request is marked REJECTED
- * </pre>
- * 
- * @see Mapping
- * @see User
- * @see RequestStatus
- */
 @Entity
 @Getter
 @Setter
@@ -41,79 +16,29 @@ import java.util.UUID;
 @Table(name = "requests")
 public class Request {
 
-    /**
-     * Unique identifier for this request (auto-generated UUID).
-     */
     @Id
     @GeneratedValue
     @Column(columnDefinition = "uuid", unique = true, nullable = false)
     private UUID id;
 
-    /**
-     * The mapping configuration being requested.
-     * 
-     * <p>This is a one-to-one relationship - each request
-     * contains exactly one mapping configuration.</p>
-     * 
-     * @see Mapping
-     */
     @OneToOne
     @JoinColumn(name = "mapping_id", unique = true, nullable = false)
     private Mapping mapping;
 
-    /**
-     * User who created this request.
-     * 
-     * <p>This field is required and tracks accountability.</p>
-     * 
-     * @see User
-     */
     @ManyToOne
     @JoinColumn(name = "created_by", nullable = false)
     private User createdBy;
 
-    /**
-     * User who approved or rejected this request.
-     * 
-     * <p>This is null until the request is processed.</p>
-     * 
-     * @see User
-     */
     @ManyToOne
     @JoinColumn(name = "accepted_by")
     private User acceptedBy;
 
-    /**
-     * Status of the mapping request in the workflow.
-     * 
-     * @see RequestStatus
-     */
     public enum RequestStatus {
-        /**
-         * Request is waiting for approval.
-         */
         PENDING,
-
-        /**
-         * Request has been approved.
-         * The mapping should now be applied to the tunnel.
-         */
         APPROVED,
-
-        /**
-         * Request has been rejected.
-         * No changes will be made to the tunnel.
-         */
         REJECTED
     }
 
-    /**
-     * Current status of this request.
-     * 
-     * <p>Initially set to PENDING when created.</p>
-     * 
-     * @see RequestStatus
-     */
     @Enumerated(EnumType.STRING)
     @Column(length = 10, nullable = false)
     private RequestStatus status;

src/main/java/com/hithomelabs/CFTunnels/Entity/Tunnel.java

@@ -8,26 +8,6 @@ import lombok.Setter;
 
 import java.util.UUID;
 
-/**
- * JPA Entity representing a Cloudflare Tunnel configuration.
- * 
- * <p>This entity stores the locally cached configuration of a Cloudflare Tunnel,
- * linking the tunnel's unique identifier from Cloudflare with its local
- * environment name for easier reference and management.</p>
- * 
- * <p>The entity is uniquely constrained by tunnel ID and environment name,
- * ensuring only one configuration exists per tunnel per environment.</p>
- * 
- * <p><b>Database Table:</b> {@code tunnels}</p>
- * 
- * <p><b>Relationships:</b></p>
- * <ul>
- *   <li>One Tunnel has many Mappings (via tunnel_id foreign key)</li>
- * </ul>
- * 
- * @see Mapping
- * @see Request
- */
 @Entity
 @Getter
 @Setter
@@ -36,32 +16,13 @@ import java.util.UUID;
 @Table(name="tunnels")
 public class Tunnel {
 
-    /**
-     * Unique identifier for the tunnel (UUID).
-     * 
-     * <p>This corresponds to the Cloudflare-assigned tunnel ID
-     * and serves as the primary key for this entity.</p>
-     */
     @Id
     @Column(columnDefinition = "uuid", insertable = false, updatable = false, nullable = false)
     private UUID id;
 
-    /**
-     * Environment name associated with this tunnel configuration.
-     * 
-     * <p>Examples: "production", "staging", "development"</p>
-     * <p>Each tunnel can be configured for multiple environments.</p>
-     */
     @Column(length = 10, unique = true, nullable = false)
     private String environment;
 
-    /**
-     * Display name of the tunnel as configured in Cloudflare.
-     * 
-     * <p>This is the user-friendly name assigned to the tunnel
-     * when it was created in Cloudflare Zero Trust Dashboard
-     * or via the Cloudflare API.</p>
-     */
     @Column(length = 50, unique = true, nullable = false)
     private String name;
 }

src/main/java/com/hithomelabs/CFTunnels/Entity/User.java

@@ -1,5 +1,4 @@
 package com.hithomelabs.CFTunnels.Entity;
-
 import jakarta.persistence.*;
 import jakarta.validation.constraints.Size;
 import lombok.AllArgsConstructor;
@@ -9,26 +8,6 @@ import lombok.Setter;
 
 import java.util.UUID;
 
-/**
- * JPA Entity representing a user in the system.
- * 
- * <p>This entity stores user information synced from the OIDC provider
- * during authentication. Users are assigned roles that determine their
- * access levels to the API endpoints.</p>
- * 
- * <p><b>Database Table:</b> {@code users}</p>
- * 
- * <p><b>Roles:</b></p>
- * <ul>
- *   <li>USER - Basic access to view tunnels</li>
- *   <li>DEVELOPER - Can create/modify mappings</li>
- *   <li>APPROVER - Can approve/reject requests</li>
- *   <li>ADMIN - Full access including tunnel configuration</li>
- * </ul>
- * 
- * @see Request
- * @see Mapping
- */
 @Entity
 @Getter
 @Setter
@@ -36,32 +15,15 @@ import java.util.UUID;
 @AllArgsConstructor
 @Table(name = "users")
 public class User {
-
-    /**
-     * Unique identifier for the user (UUID).
-     * 
-     * <p>This corresponds to the user's ID in the OIDC provider.</p>
-     */
     @Id
     @GeneratedValue
     @Column(columnDefinition = "uuid", insertable = false, updatable = false, nullable = false)
     private UUID id;
 
-    /**
-     * User's display name.
-     * 
-     * <p>This is typically the full name from the OIDC provider.</p>
-     */
     @Column(length = 50, nullable = false)
     @Size(max = 50)
     private String name;
 
-    /**
-     * User's email address.
-     * 
-     * <p>Used as the unique identifier for authentication
-     * and for associating users with their roles.</p>
-     */
     @Column(length = 50, nullable = false)
     @Size(max = 50)
     private String email;

src/main/java/com/hithomelabs/CFTunnels/Models/Ingress.java

@@ -8,86 +8,17 @@ import lombok.Setter;
 import java.util.List;
 import java.util.Map;
 
-/**
- * Model representing an ingress rule for a Cloudflare Tunnel.
- * 
- * <p>Ingress rules define how incoming requests should be routed through
- * the tunnel to your internal services. Each rule specifies:</p>
- * <ul>
- *   <li>{@link #hostname} - The domain/subdomain to match</li>
- *   <li>{@link #service} - The internal service URL</li>
- *   <li>{@link #originRequest} - Optional settings for origin requests</li>
- *   <li>{@link #path} - Optional path prefix to match</li>
- * </ul>
- * 
- * <p><b>Example JSON:</b></p>
- * <pre>
- * {
- *   "hostname": "api.example.com",
- *   "service": "http://localhost:8080",
- *   "originRequest": {
- *     "noTLSVerify": true
- *   },
- *   "path": "/api"
- * }
- * </pre>
- * 
- * @see <a href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/routing/ingress/">Cloudflare Ingress Docs</a>
- */
 @NoArgsConstructor
 @AllArgsConstructor
 @Getter
 @Setter
 public class Ingress {
 
-    /**
-     * The target service URL.
-     * 
-     * <p>Format: {@code protocol://host:port}</p>
-     * <p>Example: {@code http://localhost:8080}</p>
-     */
     private String service;
-
-    /**
-     * Hostname pattern to match for this ingress rule.
-     * 
-     * <p>Can be a full domain (api.example.com) or use wildcards 
-     * (*.example.com) to match subdomains.</p>
-     * <p>If null, this rule acts as a catch-all.</p>
-     */
     private String hostname;
-
-    /**
-     * Optional settings for requests to the origin server.
-     * 
-     * <p>Supported options:</p>
-     * <ul>
-     *   <li>noTLSVerify - Skip TLS verification</li>
-     *   <li>connectTimeout - Connection timeout in seconds</li>
-     *   <li>tlsTimeout - TLS handshake timeout</li>
-     *   <li>httpHostHeader - Host header to send</li>
-     * </ul>
-     */
     private Map<String, Object> originRequest;
-
-    /**
-     * Optional path to match before routing.
-     * 
-     * <p>Example: "/api" would only route requests with
-     * paths starting with /api to this service.</p>
-     */
     private String path;
 
-    /**
-     * Removes an ingress rule by hostname from a list.
-     * 
-     * <p>This utility method finds and removes the first ingress
-     * matching the given hostname.</p>
-     * 
-     * @param ingressList  List of ingress rules to modify
-     * @param toBeDeleted Hostname of the rule to remove
-     * @return true if an ingress was removed, false otherwise
-     */
     public static boolean deleteByHostName(List<Ingress> ingressList, String toBeDeleted){
          return ingressList.removeIf(ingress -> ingress.getHostname() != null && ingress.getHostname().equals(toBeDeleted));
     }

src/main/java/com/hithomelabs/CFTunnels/Services/CloudflareAPIService.java

@@ -22,60 +22,21 @@ import java.util.NoSuchElementException;
 import java.util.Optional;
 import java.util.UUID;
 
-/**
- * Service for interacting with the Cloudflare Tunnel API.
- * 
- * <p>This service provides methods to manage Cloudflare Tunnels,
- * including fetching tunnel configurations, creating/updating tunnels,
- * and adding ingress mappings. It handles all communication with the
- * Cloudflare API using the configured credentials.</p>
- * 
- * <p><b>API Endpoints Used:</b></p>
- * <ul>
- *   <li>GET /accounts/{accountId}/cfd_tunnel - List all tunnels</li>
- *   <li>GET /accounts/{accountId}/cfd_tunnel/{tunnelId}/configurations - Get tunnel config</li>
- *   <li>PUT /accounts/{accountId}/cfd_tunnel/{tunnelId}/configurations - Update tunnel config</li>
- * </ul>
- * 
- * @see CloudflareConfig
- * @see Tunnel
- * @see Ingress
- */
 @Service
 public class CloudflareAPIService {
 
-    /**
-     * Configuration for Cloudflare API credentials and settings.
-     * Loaded from application.properties using the {@code cloudflare.*} prefix.
-     */
     @Autowired
     CloudflareConfig cloudflareConfig;
 
-    /**
-     * Header provider for Cloudflare API authentication.
-     * Generates the X-Auth-Key and X-Auth-Email headers.
-     */
     @Autowired
     AuthKeyEmailHeader authKeyEmailHeader;
 
-    /**
-     * HTTP client for making API requests.
-     */
     @Autowired
     RestTemplate restTemplate;
 
-    /**
-     * Repository for storing tunnel configurations locally.
-     */
     @Autowired
     TunnelRepository tunnelRepository;
 
-    /**
-     * Fetches all Cloudflare tunnels from the API.
-     * 
-     * @return Response containing the list of tunnels from Cloudflare
-     * @see TunnelsResponse
-     */
     public ResponseEntity<TunnelsResponse> getCloudflareTunnels() {
 
         String url = "https://api.cloudflare.com/client/v4/accounts/" + cloudflareConfig.getAccountId() + "/cfd_tunnel";
@@ -85,18 +46,9 @@ public class CloudflareAPIService {
         return responseEntity;
     }
 
-    /**
-     * Fetches the configuration for a specific tunnel.
-     * 
-     * @param tunnelId      The Cloudflare tunnel ID (UUID string)
-     * @param restTemplate HTTP client to use for the request
-     * @param responseType Class to deserialize the response into
-     * @param <T>         Response type
-     * @return Response containing the tunnel configuration
-     */
     public <T> ResponseEntity<T> getCloudflareTunnelConfigurations(String tunnelId, RestTemplate restTemplate, Class<T> responseType) {
 
-        // Resource URL to hit get request at
+        // * * Resource URL to hit get request at
         String url = "https://api.cloudflare.com/client/v4/accounts/" + cloudflareConfig.getAccountId() + "/cfd_tunnel/" + tunnelId + "/configurations";
 
         HttpEntity<String> httpEntity = new HttpEntity<>("",authKeyEmailHeader.getHttpHeaders());
@@ -104,22 +56,9 @@ public class CloudflareAPIService {
         return responseEntity;
     }
 
-    /**
-     * Updates the configuration for a specific tunnel.
-     * 
-     * <p>This method is used to add, modify, or remove ingress mappings
-     * by providing a complete configuration object.</p>
-     * 
-     * @param tunnelId      The Cloudflare tunnel ID (UUID string)
-     * @param restTemplate HTTP client to use for the request
-     * @param responseType Class to deserialize the response into
-     * @param config      The new configuration to apply
-     * @param <T>        Response type
-     * @return Response containing the updated tunnel configuration
-     */
     public <T> ResponseEntity<T> putCloudflareTunnelConfigurations(String tunnelId, RestTemplate restTemplate, Class<T> responseType, Config config) {
 
-        // Resource URL to hit get request at
+        // * * Resource URL to hit get request at
         String url = "https://api.cloudflare.com/client/v4/accounts/" + cloudflareConfig.getAccountId() + "/cfd_tunnel/" + tunnelId + "/configurations";
 
         HttpHeaders httpHeaders = authKeyEmailHeader.getHttpHeaders();
@@ -129,29 +68,10 @@ public class CloudflareAPIService {
         return responseEntity;
     }
 
-    /**
-     * Converts a Cloudflare API tunnel result to a local Tunnel entity.
-     * 
-     * @param tunnelResult The tunnel result from Cloudflare API
-     * @param env          The environment name to associate
-     * @return New Tunnel entity instance
-     */
     private Tunnel getTunnelFromTunnelResponse(TunnelResult tunnelResult, String env){
         return new Tunnel(UUID.fromString(tunnelResult.getId()), env, tunnelResult.getName());
     }
 
-    /**
-     * Creates or updates a tunnel's local configuration.
-     * 
-     * <p>This method fetches the tunnel from Cloudflare API, validates it exists,
-     * and stores a local copy with the environment association.</p>
-     * 
-     * @param tunnelId    The Cloudflare tunnel ID
-     * @param environment Environment name (e.g., "production", "staging")
-     * @return The created or updated Tunnel entity
-     * @throws ExternalServiceException if Cloudflare API returns an error
-     * @throws NoSuchElementException if the tunnel doesn't exist in Cloudflare
-     */
     public Tunnel createOrUpdateTunnel(String tunnelId, String environment) throws ExternalServiceException, NoSuchElementException  {
 
         ResponseEntity<TunnelsResponse> responseEntity = getCloudflareTunnels();
@@ -172,25 +92,10 @@ public class CloudflareAPIService {
         return toBeConfigured;
     }
 
-    /**
-     * Retrieves all tunnels that have been locally configured.
-     * 
-     * @return List of locally configured tunnels
-     */
     public List<Tunnel> getAllConfiguredTunnels() {
         return tunnelRepository.findAll();
     }
 
-    /**
-     * Adds an ingress mapping to an existing tunnel.
-     * 
-     * <p>The new ingress is inserted at the second-to-last position in the
-     * ingress list (Cloudflare requires a catch-all rule at the end).</p>
-     * 
-     * @param tunnelId The Cloudflare tunnel ID
-     * @param ingress  The ingress configuration to add
-     * @return Response with the updated tunnel configuration
-     */
     public ResponseEntity<TunnelResponse> addTunnelIngress(String tunnelId, Ingress ingress) {
         ResponseEntity<TunnelResponse> currentConfig = getCloudflareTunnelConfigurations(tunnelId, restTemplate, TunnelResponse.class);
         

src/main/resources/application.properties

@@ -2,9 +2,9 @@ spring.application.name=CFTunnels
 cloudflare.accountId=${CLOUDFLARE_ACCOUNT_ID}
 cloudflare.apiKey=${CLOUDFLARE_API_KEY}
 cloudflare.email=${CLOUDFLARE_EMAIL}
-spring.profiles.active=${ENV:default}
+spring.profiles.active=${ENV}
 
-# Making sure app works behind a reverse proxy
+/ * * Masking sure app works behind a reverse proxy
 server.forward-headers-strategy=framework
 
 spring.security.oauth2.client.registration.cftunnels.client-id=${OAUTH_CLIENT_ID}