register, login, create and manage sites and pages

frontend/src/app/dashboard/create-site-dialog/create-site-dialog.ts

@@ -0,0 +1,72 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { SiteService } from '../../core/services/site.service';
+
+@Component({
+  selector: 'app-create-site-dialog',
+  standalone: true,
+  imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
+  template: `
+    <h2 mat-dialog-title>Create New Site</h2>
+    <mat-dialog-content>
+      <form [formGroup]="form" class="flex flex-col gap-4 pt-2">
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Site Name</mat-label>
+          <input matInput formControlName="name" placeholder="My Awesome Site" />
+          <mat-error>Name is required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Subdomain</mat-label>
+          <span matTextSuffix>.indie.com</span>
+          <input matInput formControlName="subdomain" placeholder="my-site" />
+          <mat-error *ngIf="form.get('subdomain')?.hasError('required')">Subdomain is required</mat-error>
+          <mat-error *ngIf="form.get('subdomain')?.hasError('pattern')">
+            Lowercase letters, numbers, and hyphens only
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Description (optional)</mat-label>
+          <textarea matInput formControlName="description" rows="3" placeholder="What's your site about?"></textarea>
+        </mat-form-field>
+      </form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button mat-dialog-close>Cancel</button>
+      <button mat-flat-button color="primary" [disabled]="form.invalid || loading" (click)="onCreate()">
+        {{ loading ? 'Creating...' : 'Create' }}
+      </button>
+    </mat-dialog-actions>
+  `,
+})
+export class CreateSiteDialog {
+  private fb = inject(FormBuilder);
+  private dialogRef = inject(MatDialogRef<CreateSiteDialog>);
+  private siteService = inject(SiteService);
+
+  form = this.fb.group({
+    name: ['', Validators.required],
+    subdomain: ['', [Validators.pattern(/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/)]],
+    description: [''],
+  });
+  loading = false;
+
+  onCreate(): void {
+    if (this.form.invalid) return;
+    this.loading = true;
+    this.siteService.create(this.form.value as any).subscribe({
+      next: (site) => {
+        this.dialogRef.close(site);
+      },
+      error: () => {
+        this.loading = false;
+      },
+    });
+  }
+}