gcp-material-ui 0.0.4

package/src/app/layout/top-action-bar/top-action-bar.scss

@@ -0,0 +1,98 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  border-bottom: 1px solid #e8eaed;
+  padding: 0;
+}
+.logo {
+  height: 20px;
+  margin-left: 8px;
+  margin-top: 3px;
+}
+.spacer {
+  flex: 1 1 auto;
+}
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.user-popover-header {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-bottom: 1px solid #e8eaed;
+  background: #f8f9fa;
+  min-width: 200px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.2;
+}
+
+.user-email {
+  font-size: 12px;
+  color: #5f6368;
+  line-height: 1.2;
+}
+
+.project-selector-container {
+  margin-left: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.project-picker-btn {
+  height: 36px;
+  border-radius: 4px;
+  border: 1px solid #909090 !important; /* using important if material overrides it */
+  box-shadow: none !important;
+  background: white;
+  color: #5f6368;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 8px;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.picker-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #444746;
+}
+
+.project-name {
+  font-size: 14px;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arrow-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #444746;
+}
+
+.user-button {
+  padding: 4px;
+}
+
+::ng-deep .project-menu, ::ng-deep .user-menu-popover {
+  background-color: white !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}

package/src/app/layout/top-action-bar/top-action-bar.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Output, inject } from '@angular/core';
+import { AuthService } from '../../auth/auth.service';
+import { ProjectService, Project } from '../../services/project.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { signal, OnInit } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+@Component({
+  selector: 'app-top-action-bar',
+  standalone: true,
+  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatMenuModule],
+  templateUrl: './top-action-bar.html',
+  styleUrl: './top-action-bar.scss'
+})
+export class TopActionBarComponent implements OnInit {
+  @Output() toggleSidenav = new EventEmitter<void>();
+  public authService = inject(AuthService);
+  private projectService = inject(ProjectService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
+  projects = signal<Project[]>([]);
+  selectedProjectId = signal<string | null>(null);
+
+  ngOnInit() {
+    this.authService.isReady().then(() => {
+      setTimeout(() => this.loadProjects());
+    });
+    
+    this.route.queryParams.subscribe(params => {
+      const p = params['project'];
+      if (p) {
+        setTimeout(() => this.selectedProjectId.set(p));
+      }
+    });
+  }
+
+  loadProjects() {
+    this.projectService.getProjects().subscribe({
+      next: (projects) => {
+        this.projects.set(projects);
+      },
+      error: (err) => {
+        console.error('Failed to load projects:', err);
+        this.projects.set([]);
+      }
+    });
+  }
+
+  selectProject(projectId: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { project: projectId },
+      queryParamsHandling: 'merge'
+    });
+  }
+
+  navigateToHome() {
+    this.router.navigate(['/'], { queryParamsHandling: 'preserve' });
+  }
+
+  logout() {
+    this.authService.logout();
+  }
+}

package/src/app/page-templates/complex-form/complex-form.html

@@ -0,0 +1,103 @@
+<app-page title="Complex Form Example">
+  <div class="default-container-padding">
+    <mat-vertical-stepper class="custom-stepper" [linear]="true" #stepper>
+      
+      <!-- Step 1: Configure policy -->
+      <mat-step [stepControl]="step1FormGroup">
+        <form [formGroup]="step1FormGroup" class="step-content">
+          <ng-template matStepLabel>Configure policy</ng-template>
+          
+          <div class="row">
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Policy name</mat-label>
+              <input matInput formControlName="policyName" placeholder="Lowercase letters, numbers, hyphens allowed">
+
+              <mat-hint>Lowercase letters, numbers, hyphens allowed</mat-hint>
+              <mat-error *ngIf="step1FormGroup.get('policyName')?.hasError('required')">Policy name is required.</mat-error>
+              <mat-error *ngIf="step1FormGroup.get('policyName')?.hasError('pattern')">Invalid format (letters, numbers, hyphens only).</mat-error>
+            </mat-form-field>
+          </div>
+
+          <div class="row">
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Description</mat-label>
+              <textarea matInput formControlName="description" rows="3" placeholder="Description"></textarea>
+            </mat-form-field>
+          </div>
+
+          <div class="row">
+            <div class="form-section-header">
+              <span class="section-title">Policy type</span>
+              <p class="section-description">Select the policy type to define the network to which this policy applies, and the firewall features it enables. <a href="javascript:void(0)" class="learn-more">Learn more <span class="material-icons" style="font-size: 14px; vertical-align: middle;">open_in_new</span></a></p>
+            </div>
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Policy type</mat-label>
+              <mat-select formControlName="policyType">
+
+                <mat-option *ngFor="let type of policyTypes" [value]="type.value">{{ type.label }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
+          <div class="row direction-col">
+            <div class="form-section-header">
+              <span class="section-title">Deployment scope</span>
+              <p class="section-description">Use global network firewall policies to configure firewall policy rules with Layer 7 inspection. <a href="javascript:void(0)" class="learn-more">Learn more <span class="material-icons" style="font-size: 14px; vertical-align: middle;">open_in_new</span></a></p>
+            </div>
+            <mat-radio-group formControlName="scope" class="vertical-radio-group">
+              <mat-radio-button value="global">Global</mat-radio-button>
+              <mat-radio-button value="regional">Regional</mat-radio-button>
+            </mat-radio-group>
+          </div>
+
+          <div class="stepper-actions">
+            <button mat-stroked-button color="primary" matStepperNext>Continue</button>
+          </div>
+        </form>
+      </mat-step>
+
+      <!-- Step 2: Add rules -->
+      <mat-step [stepControl]="step2FormGroup">
+        <ng-template matStepLabel>Add rules</ng-template>
+        <div class="step-content">
+          <p>Define your firewall rules here.</p>
+          <div class="stepper-actions">
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-flat-button color="primary" matStepperNext>Continue</button>
+          </div>
+        </div>
+      </mat-step>
+
+      <!-- Step 3: Add mirroring rules -->
+      <mat-step [stepControl]="step3FormGroup">
+        <ng-template matStepLabel>Add mirroring rules</ng-template>
+        <div class="step-content">
+          <p>Define mirroring rules here.</p>
+          <div class="stepper-actions">
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-flat-button color="primary" matStepperNext>Continue</button>
+          </div>
+        </div>
+      </mat-step>
+
+      <!-- Step 4: Associate policy with networks -->
+      <mat-step [stepControl]="step4FormGroup">
+        <ng-template matStepLabel>Associate policy with networks (optional)</ng-template>
+        <div class="step-content">
+          <p>Associate networks here.</p>
+          <div class="stepper-actions">
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-flat-button color="primary" matStepperNext>Continue</button>
+          </div>
+        </div>
+      </mat-step>
+
+    </mat-vertical-stepper>
+
+    <!-- Global Actions -->
+    <div class="global-actions">
+      <button mat-flat-button color="primary" (click)="onSubmit()" [disabled]="step1FormGroup.invalid">Create</button>
+      <button mat-button (click)="cancel()">Cancel</button>
+    </div>
+  </div>
+</app-page>

package/src/app/page-templates/complex-form/complex-form.scss

@@ -0,0 +1,110 @@
+.custom-stepper {
+  background-color: transparent; // Make it blend with background
+  box-shadow: none;
+
+  .mat-step-header {
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    .mat-step-icon {
+      background-color: #5f6368; // Default grey context
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .mat-step-icon-selected {
+      background-color: #1a73e8; // Primary blue
+    }
+
+    .mat-step-label {
+      font-size: 1.25rem; // Equivalent to Heading 2
+      font-weight: 400;
+      color: #3c4043;
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .mat-step-label-selected {
+      font-weight: 500;
+      color: #202124;
+    }
+  }
+
+  .mat-vertical-content {
+    padding-left: 36px; // Align content with header text
+    padding-right: 0;
+  }
+}
+
+.step-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 600px; // Standard form width
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &.direction-col {
+    flex-direction: column;
+  }
+
+  mat-form-field {
+    width: 100%;
+  }
+}
+
+.form-section-header {
+  margin-bottom: 8px;
+
+  .section-title {
+    font-weight: 500;
+    font-size: 14px;
+    color: #3c4043;
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .section-description {
+    font-size: 13px;
+    color: #5f6368;
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .learn-more {
+    color: #1a73e8;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.vertical-radio-group {
+  display: flex;
+  flex-direction: column;
+
+  mat-radio-button {
+    font-size: 14px;
+    color: #3c4043;
+  }
+}
+
+.stepper-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.global-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 32px;
+  padding-top: 16px;
+  border-top: 1px solid #e8eaed; // Separator from stepper
+}

package/src/app/page-templates/complex-form/complex-form.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { PageComponent } from '../../components/page/page';
+
+@Component({
+  selector: 'app-complex-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatStepperModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatRadioModule,
+    MatButtonModule,
+    MatIconModule,
+    PageComponent
+  ],
+  templateUrl: './complex-form.html',
+  styleUrl: './complex-form.scss'
+})
+export class ComplexFormComponent {
+  step1FormGroup: FormGroup;
+  step2FormGroup: FormGroup;
+  step3FormGroup: FormGroup;
+  step4FormGroup: FormGroup;
+
+  policyTypes = [
+    { value: 'vpc', label: 'VPC policy' },
+    { value: 'org', label: 'Organization policy' }
+  ];
+
+  constructor(private _formBuilder: FormBuilder, private router: Router) {
+    this.step1FormGroup = this._formBuilder.group({
+      policyName: ['', [Validators.required, Validators.pattern(/^[a-z0-9-]+$/)]],
+      description: [''],
+      policyType: ['vpc', Validators.required],
+      scope: ['global', Validators.required]
+    });
+
+    this.step2FormGroup = this._formBuilder.group({});
+    this.step3FormGroup = this._formBuilder.group({});
+    this.step4FormGroup = this._formBuilder.group({});
+  }
+
+  onSubmit() {
+    if (this.step1FormGroup.valid) {
+      console.log('Form Submitted!', this.step1FormGroup.value);
+      this.router.navigate(['/templates/firewalls']);
+    }
+  }
+
+  cancel() {
+    this.router.navigate(['/templates/firewalls']);
+  }
+}

package/src/app/page-templates/firewall-add/firewall-add.html

@@ -0,0 +1,78 @@
+<app-page title="Create Firewall Rule Template">
+  <button back-button mat-icon-button (click)="cancel()">
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+
+  <div class="default-container-padding">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-container">
+      <p>Fill out the form below to define a new firewall rule configuration.</p>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Name</mat-label>
+          <input matInput formControlName="name" placeholder="allow-traffic-80">
+          <mat-hint>Letters, numbers and dashes only, start with a letter.</mat-hint>
+          <mat-error *ngIf="form.get('name')?.hasError('required')">Name is required.</mat-error>
+          <mat-error *ngIf="form.get('name')?.hasError('pattern')">Invalid format (Lowercase letter followed by letters, numbers, hyphens).</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Description</mat-label>
+          <textarea matInput formControlName="description" placeholder="Optional rule description" rows="3"></textarea>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Direction</mat-label>
+          <mat-select formControlName="direction">
+            <mat-option *ngFor="let dir of directions" [value]="dir.value">{{ dir.label }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline">
+          <mat-label>Action</mat-label>
+          <mat-select formControlName="actionType">
+            <mat-option *ngFor="let act of actionTypes" [value]="act.value">{{ act.label }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Priority</mat-label>
+          <input matInput type="number" formControlName="priority" placeholder="1000">
+          <mat-hint>Higher number means lower priority (0 to 65535).</mat-hint>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Source IP Ranges (comma-separated)</mat-label>
+          <input matInput formControlName="ipRangesCsv" placeholder="10.0.0.0/8, 192.168.1.0/24">
+          <mat-error *ngIf="form.get('ipRangesCsv')?.hasError('required')">At least one IP range is required.</mat-error>
+          <mat-error *ngIf="form.get('ipRangesCsv')?.hasError('pattern')">Invalid IP range format (CIDR notation required, e.g., 0.0.0.0/0).</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="row">
+        <mat-form-field appearance="outline">
+          <mat-label>Protocols and Ports (comma-separated)</mat-label>
+          <input matInput formControlName="portsCsv" placeholder="tcp:80, udp:53, icmp">
+          <mat-error *ngIf="form.get('portsCsv')?.hasError('required')">At least one protocol/port rule is required.</mat-error>
+        </mat-form-field>
+      </div>
+
+      <div class="checkbox-row" style="margin-top: 16px;">
+        <mat-checkbox formControlName="loggingEnabled">Enable logging for traffic matched by this rule</mat-checkbox>
+      </div>
+
+      <div class="actions">
+        <button mat-flat-button color="primary" type="submit" [disabled]="form.invalid">Create</button>
+        <button mat-button type="button" (click)="cancel()">Cancel</button>
+      </div>
+    </form>
+  </div>
+</app-page>

package/src/app/page-templates/firewall-add/firewall-add.scss

@@ -0,0 +1 @@
+@use '../../../_variables' as theme;

package/src/app/page-templates/firewall-add/firewall-add.ts

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+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 { MatCardModule } from '@angular/material/card';
+import { PageComponent } from '../../components/page/page';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { FirewallService } from '../firewall.service';
+import { CommonModule } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'app-golden-firewall-add',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatCardModule,
+    PageComponent,
+    MatIconModule,
+    MatCheckboxModule
+  ],
+  templateUrl: './firewall-add.html',
+  styleUrl: './firewall-add.scss'
+})
+export class FirewallTemplateAddComponent {
+  form: FormGroup;
+
+  directions = [
+    { value: 'INGRESS', label: 'Ingress' },
+    { value: 'EGRESS', label: 'Egress' }
+  ];
+
+  actionTypes = [
+    { value: 'ALLOW', label: 'Allow' },
+    { value: 'DENY', label: 'Deny' }
+  ];
+
+  constructor(
+    private fb: FormBuilder,
+    private service: FirewallService,
+    private router: Router
+  ) {
+    this.form = this.fb.group({
+      name: ['', [
+        Validators.required, 
+        Validators.maxLength(63), 
+        Validators.pattern('^[a-z]([-a-z0-9]*[a-z0-9])?$')
+      ]],
+      description: [''],
+      direction: ['INGRESS', Validators.required],
+      priority: [1000, [Validators.required, Validators.min(0), Validators.max(65535)]],
+      actionType: ['ALLOW', Validators.required],
+      ipRangesCsv: ['', [
+        Validators.required,
+        Validators.pattern('^([0-9]{1,3}\\.){3}[0-9]{1,3}(\\/([0-9]|[1-2][0-9]|3[0-2]))(,\\s*([0-9]{1,3}\\.){3}[0-9]{1,3}(\\/([0-9]|[1-2][0-9]|3[0-2])))*$')
+      ]],
+      portsCsv: ['', Validators.required],
+      loggingEnabled: [false]
+    });
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      const val = this.form.value;
+      const ipRanges = val.ipRangesCsv.split(',').map((t: string) => t.trim()).filter((t: string) => t.length > 0);
+      const ports = val.portsCsv.split(',').map((t: string) => t.trim()).filter((t: string) => t.length > 0);
+      
+      this.service.addRule({
+        name: val.name,
+        description: val.description,
+        direction: val.direction,
+        priority: val.priority,
+        actionType: val.actionType,
+        ipRanges: ipRanges,
+        protocolsAndPortsForDisplay: ports,
+        loggingEnabled: val.loggingEnabled
+      });
+
+      this.router.navigate(['/templates/firewalls']);
+    }
+  }
+
+  cancel() {
+    this.router.navigate(['/templates/firewalls']);
+  }
+}