@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/auth/landing.guard.ts.ejs

@@ -0,0 +1,61 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, PLATFORM_ID } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { CanActivateFn, Router } from '@angular/router';
+import { filter, map, of, take } from 'rxjs';
+import { NAVIGATION, NavigationItem } from '@/app/domains/admin/layout/data/navigation';
+import { AccessControlService } from '../services/access-control.service';
+
+function findFirstAllowedRoute(items: NavigationItem[], access: AccessControlService): string | null {
+  for (const item of items) {
+    if (item.children?.length) {
+      const child = findFirstAllowedRoute(item.children, access);
+      if (child) {
+        return child;
+      }
+    }
+    if (!item.route || !item.id) {
+      continue;
+    }
+    if (item.route.includes('/welcome') || item.route.includes('/no-access')) {
+      continue;
+    }
+    if (access.hasScreenAccess(item.id)) {
+      return item.route;
+    }
+  }
+  return null;
+}
+
+export const LandingGuard: CanActivateFn = (_route, state) => {
+  const platformId = inject(PLATFORM_ID);
+  if (!isPlatformBrowser(platformId)) {
+    return of(true);
+  }
+
+  const url = state.url.split('?')[0].replace(/\/$/, '') || '/admin';
+  if (url !== '/admin' && url !== '/admin/welcome') {
+    return true;
+  }
+
+  const access = inject(AccessControlService);
+  const router = inject(Router);
+
+  const decide = () => {
+    if (access.isUserAdmin()) {
+      return true;
+    }
+    const first = findFirstAllowedRoute(NAVIGATION, access);
+    return first ? router.parseUrl(first) : router.parseUrl('/admin/no-access');
+  };
+
+  if (access.isLoaded() || access.isUserAdmin()) {
+    return decide();
+  }
+
+  return toObservable(access.isLoaded).pipe(
+    filter(Boolean),
+    take(1),
+    map(() => decide())
+  );
+};

package/src/templates/angular/auth/no-auth.guard.ts.ejs

@@ -0,0 +1,19 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, PLATFORM_ID } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { map, of } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+export const NoAuthGuard: CanActivateFn = () => {
+  const platformId = inject(PLATFORM_ID);
+  if (!isPlatformBrowser(platformId)) {
+    return of(true);
+  }
+
+  const router = inject(Router);
+  const authService = inject(AuthService);
+
+  return authService.check().pipe(
+    map((authenticated) => (authenticated ? router.parseUrl('/admin/welcome') : true))
+  );
+};

package/src/templates/angular/auth/permission-attribute.util.ts.ejs

@@ -0,0 +1,182 @@
+export type UserAttributes = Record<string, string[]>;
+
+export const PROTECTED_USER_ATTRIBUTE_KEYS = new Set(['custompassword']);
+export const ROLE_METADATA_ATTRIBUTE_KEYS = new Set(['parentrole']);
+
+const VIEW_SUFFIXES = ['-actions', '-list', '-form', '-view', '-detail', '-page'];
+
+export function normalizeUserAttributes(raw: Record<string, unknown> | null | undefined): UserAttributes {
+  const result: UserAttributes = {};
+  Object.entries(raw || {}).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      result[key] = value.map((item) => String(item));
+      return;
+    }
+    if (value === undefined || value === null) {
+      return;
+    }
+    result[key] = [String(value)];
+  });
+  return result;
+}
+
+export function getScreenBaseId(screenId: string): string {
+  const value = String(screenId || '').trim().toLowerCase();
+  if (!value) {
+    return '';
+  }
+  for (const suffix of VIEW_SUFFIXES) {
+    if (value.endsWith(suffix) && value.length > suffix.length) {
+      return value.slice(0, -suffix.length);
+    }
+  }
+  return value;
+}
+
+function screenLeaf(screenId: string): string {
+  const value = String(screenId || '').trim().toLowerCase();
+  if (!value) {
+    return '';
+  }
+  const leaf = value.split('/').pop() || value;
+  return getScreenBaseId(leaf);
+}
+
+export function isScreenPermissionGranted(attrs: UserAttributes, screenId: string): boolean {
+  const target = String(screenId || '').trim().toLowerCase();
+  if (!target) {
+    return false;
+  }
+  const base = getScreenBaseId(target);
+  const leaf = screenLeaf(target);
+  // Match nav ids like `micro-functions/region` with ACL stamps like `region`.
+  const candidates = new Set(
+    [target, base, leaf, `${base}-actions`, `${leaf}-actions`].filter(Boolean)
+  );
+
+  const screens = (attrs['screens'] || []).map((item) => String(item).toLowerCase());
+  if (
+    screens.some((entry) => {
+      const entryLeaf = screenLeaf(entry);
+      return (
+        candidates.has(entry) ||
+        candidates.has(getScreenBaseId(entry)) ||
+        candidates.has(entryLeaf) ||
+        entryLeaf === leaf
+      );
+    })
+  ) {
+    return true;
+  }
+
+  return Object.entries(attrs).some(([key, values]) => {
+    const keyLower = key.toLowerCase();
+    if (PROTECTED_USER_ATTRIBUTE_KEYS.has(keyLower) || ROLE_METADATA_ATTRIBUTE_KEYS.has(keyLower) || keyLower === 'screens') {
+      return false;
+    }
+    const keyLeaf = screenLeaf(keyLower);
+    if (!candidates.has(keyLower) && getScreenBaseId(keyLower) !== base && keyLeaf !== leaf) {
+      return false;
+    }
+    return values.map(String).includes('true');
+  });
+}
+
+export function isComponentPermissionGranted(
+  attrs: UserAttributes | undefined,
+  componentId: string,
+  screenId = ''
+): boolean {
+  if (!attrs) {
+    return false;
+  }
+  const component = String(componentId || '').trim();
+  const screenKey = String(screenId || '').trim();
+  if (!component) {
+    return false;
+  }
+  // PMB: component grant requires screen grant when a screenId is provided.
+  if (screenKey && !isScreenPermissionGranted(attrs, screenKey)) {
+    return false;
+  }
+  const valuesForComponent = Object.entries(attrs).find(([key]) => key.toLowerCase() === component.toLowerCase());
+  if (valuesForComponent && valuesForComponent[1].map(String).includes('true')) {
+    return true;
+  }
+  if (screenKey && (attrs[screenKey] || []).map(String).includes(component)) {
+    return true;
+  }
+  return false;
+}
+
+export function mergePermissionAttributes(...groups: UserAttributes[]): UserAttributes {
+  const merged: UserAttributes = {};
+  groups.forEach((group) => {
+    Object.entries(group || {}).forEach(([key, values]) => {
+      merged[key] = Array.from(new Set([...(merged[key] || []), ...values.map(String)]));
+    });
+  });
+  return merged;
+}
+
+export function collectParentRole(attrs: UserAttributes): string | null {
+  const values = attrs['parentRole'] || attrs['parentrole'] || [];
+  const parent = values.map(String).find((item) => item.trim());
+  return parent || null;
+}
+
+
+export function screenIdsMatch(left: string, right: string): boolean {
+  const a = String(left || '').trim().toLowerCase();
+  const b = String(right || '').trim().toLowerCase();
+  if (!a || !b) {
+    return false;
+  }
+  if (a === b) {
+    return true;
+  }
+  const baseA = getScreenBaseId(a);
+  const baseB = getScreenBaseId(b);
+  if (baseA && baseB && baseA === baseB) {
+    return true;
+  }
+  const leafA = a.split('/').pop() || a;
+  const leafB = b.split('/').pop() || b;
+  return leafA === leafB || getScreenBaseId(leafA) === getScreenBaseId(leafB);
+}
+
+export function revokeScreenGrant(
+  attributes: UserAttributes | undefined,
+  screenIds: string[],
+  componentIds: string[]
+): UserAttributes {
+  const source = attributes || {};
+  const revokeScreenIds = new Set(
+    screenIds.map((id) => String(id ?? '').trim().toLowerCase()).filter(Boolean)
+  );
+  const revokeComponentIds = new Set(
+    componentIds.map((id) => String(id ?? '').trim().toLowerCase()).filter(Boolean)
+  );
+  const next: UserAttributes = {};
+
+  Object.entries(source).forEach(([key, values]) => {
+    if (ROLE_METADATA_ATTRIBUTE_KEYS.has(key) || PROTECTED_USER_ATTRIBUTE_KEYS.has(key)) {
+      next[key] = Array.isArray(values) ? values.map(String) : [String(values)];
+      return;
+    }
+    if (key === 'screens') {
+      const kept = (values || []).map(String).filter((entry) => !screenIdsMatch(entry, Array.from(revokeScreenIds)[0]) && !Array.from(revokeScreenIds).some((id) => screenIdsMatch(entry, id)));
+      if (kept.length > 0) {
+        next[key] = kept;
+      }
+      return;
+    }
+    const lowerKey = key.toLowerCase();
+    if (revokeComponentIds.has(lowerKey) || Array.from(revokeScreenIds).some((id) => screenIdsMatch(key, id))) {
+      return;
+    }
+    next[key] = Array.isArray(values) ? values.map(String) : [String(values)];
+  });
+
+  return next;
+}

package/src/templates/angular/auth/sign-in.ts.ejs

@@ -0,0 +1,60 @@
+import { Component, inject, signal } from '@angular/core';
+import { form, FormField, required, submit } from '@angular/forms/signals';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { Router, RouterLink } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { AuthService } from '@/app/core/auth';
+
+@Component({
+  selector: 'auth-sign-in',
+  templateUrl: './sign-in.html',
+  imports: [
+    RouterLink,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormField,
+  ],
+})
+export default class AuthSignIn {
+  private readonly router = inject(Router);
+  private readonly authService = inject(AuthService);
+
+  protected signInError = signal('');
+  protected submitting = signal(false);
+  protected signInFormModel = signal({
+    email: '<%= auth.signInPrefill?.username || (auth.useMockAuth ? "demo@crudforge.com" : "") %>',
+    password: '<%= auth.signInPrefill?.password || (auth.useMockAuth ? "admin" : "") %>',
+  });
+  protected signInForm = form(this.signInFormModel, (schema) => {
+    required(schema.email, { message: 'You must enter a username or email' });
+    required(schema.password, { message: 'You must enter a password' });
+  });
+
+  signIn(event?: Event) {
+    event?.preventDefault();
+    event?.stopPropagation();
+    this.signInError.set('');
+
+    submit(this.signInForm, async () => {
+      this.submitting.set(true);
+      try {
+        const { email: username, password } = this.signInFormModel();
+        await firstValueFrom(this.authService.signIn({ username, password }));
+        await this.router.navigateByUrl('/admin/welcome');
+        return;
+      } catch {
+        this.signInError.set('Invalid username or password');
+        return [{ kind: 'server', message: 'Invalid username or password' }];
+      } finally {
+        this.submitting.set(false);
+      }
+    });
+  }
+}

package/src/templates/angular/entity/_entity_.model.ts.ejs

@@ -0,0 +1,64 @@
+import dayjs from 'dayjs/esm';
+<% 
+// Unique enum types to import
+const uniqueEnumImports = new Map();
+entity.fields.forEach(field => {
+    if (field.fieldTypeIsEnum) {
+        if (!uniqueEnumImports.has(field.fieldType)) {
+            uniqueEnumImports.set(field.fieldType, `import { ${field.fieldType} } from '${preferences.fuse?.enabled ? '../../enum/' : '../../enums/'}${toKebabCase(field.fieldType)}.model';`);
+        }
+    }
+});
+
+const uniqueRelImports = new Map();
+relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => {
+  if (rel.to.name !== entity.name && !uniqueRelImports.has(rel.to.name)) {
+    const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+    const folder = toKebabCase(rel.to.name);
+    uniqueRelImports.set(rel.to.name, `import { ${prefix}${rel.to.name} } from '${entityImportPath(rel.to.name)}/${folder}.model';`);
+  }
+});
+%>
+<%- Array.from(uniqueEnumImports.values()).join('\n') %>
+<%- Array.from(uniqueRelImports.values()).join('\n') %>
+
+
+export interface <%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %> {
+  id?: number;
+  <% entity.fields.forEach(field => { %>
+  <%
+    const typeMap = {
+      'String': 'string',
+      'Integer': 'number',
+      'Long': 'number',
+      'Float': 'number',
+      'Double': 'number',
+      'BigDecimal': 'number',
+      'Instant': 'dayjs.Dayjs',
+      'LocalDate': 'dayjs.Dayjs',
+      'ZonedDateTime': 'dayjs.Dayjs',
+      'Boolean': 'boolean',
+      'TextBlob': 'string',
+      'ImageBlob': 'string',
+      'Blob': 'string',
+      'AnyBlob': 'string'
+    };
+    const tsType = typeMap[field.fieldType] || field.fieldType;
+  %>
+  <%= field.fieldName %>?: <%- tsType %> | null;
+  <% }); %>
+  <% 
+  // Generate types for relationship properties
+  relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+     const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+     const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+     const prefix = preferences.namingConventions?.modelInterfacePrefix || 'I';
+  %>
+  <%= relFieldName %>?: <%= prefix %><%= rel.to.name %><%- isCollection ? '[]' : '' %> | null;
+  <% }); %>
+}
+
+export type New<%= entity.name %> = Omit<<%= preferences.namingConventions?.modelInterfacePrefix || 'I' %><%= entity.name %>, 'id'> & { id: null };
+
+// cforge-custom-code-start:model-additions
+// cforge-custom-code-end

package/src/templates/angular/entity/_entity_.routes.ts.ejs

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export default [
+  { path: '', loadComponent: () => import('./components/presentation/list/<%= toKebabCase(entity.name) %>-list.component').then(m => m.<%= entity.name %>ListComponent) },
+  { path: ':id/view', loadComponent: () => import('./components/presentation/detail/<%= toKebabCase(entity.name) %>-detail.component').then(m => m.<%= entity.name %>DetailComponent) },
+  { path: ':id/card', loadComponent: () => import('./components/presentation/card/<%= toKebabCase(entity.name) %>-card.component').then(m => m.<%= entity.name %>CardComponent) },
+  { path: ':id/edit', loadComponent: () => import('./components/forms/form-page/<%= toKebabCase(entity.name) %>-form-page.component').then(m => m.<%= entity.name %>FormPageComponent) },
+  { path: 'new', loadComponent: () => import('./components/forms/form-page/<%= toKebabCase(entity.name) %>-form-page.component').then(m => m.<%= entity.name %>FormPageComponent) },
+] as Routes;

package/src/templates/angular/entity/components/forms/form/_entity_-form.component.html.ejs

@@ -0,0 +1,168 @@
+<!-- Reusable form component template -->
+<form
+  class="flex h-full min-h-0 w-full min-w-0 max-w-none flex-1 flex-col self-stretch"
+  [formGroup]="form"
+  (ngSubmit)="onSubmit()"
+>
+  <div class="flex items-start justify-between gap-4 border-b border-neutral-200 pb-5">
+    <div class="min-w-0">
+      <h2 class="text-2xl font-bold tracking-tight text-neutral-950">
+        {{
+          heading || (isEditMode ? 'Edit <%= entity.name %>' : 'New <%= entity.name %>')
+        }}
+      </h2>
+    </div>
+  </div>
+
+  <div class="flex-auto w-full min-w-0 overflow-y-auto py-6">
+    <div class="flex w-full min-w-0 max-w-none flex-1 flex-col items-stretch gap-4 self-stretch">
+      <% entity.fields.filter(field => !isHiddenFromUi(field.fieldName, 'forms')).forEach(field => { %>
+        <% if (field.fieldTypeIsEnum) { %>
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="block w-full min-w-0 max-w-none self-stretch"
+      >
+        <mat-label><%= field.fieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %></mat-label>
+        <mat-select formControlName="<%= field.fieldName %>">
+          @for (option of <%= toCamelCase(field.fieldType) %>Options; track option) {
+            <mat-option [value]="option">
+              {{ option }}
+            </mat-option>
+          }
+        </mat-select>
+        @if (preferences.formBehavior?.showErrorMessages && form.get('<%= field.fieldName %>')?.invalid && form.get('<%= field.fieldName %>')?.touched) {
+          @if (form.get('<%= field.fieldName %>')?.hasError('required')) {
+            <mat-error>Required field.</mat-error>
+          }
+        }
+      </mat-form-field>
+        <% } else if (field.fieldType === 'Boolean') { %>
+      <div class="w-full min-w-0 self-stretch rounded-2xl border border-neutral-200 bg-neutral-50 px-4 py-4">
+        <mat-checkbox formControlName="<%= field.fieldName %>">
+          <%= field.fieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %>
+        </mat-checkbox>
+      </div>
+        <% } else if (['LocalDate', 'Instant', 'ZonedDateTime'].includes(field.fieldType)) { %>
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="block w-full min-w-0 max-w-none self-stretch"
+      >
+        <mat-label><%= field.fieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %></mat-label>
+        <input
+          matInput
+          <% if (['String', 'TextBlob'].includes(field.fieldType) && !(preferences.fields?.audit?.names || ['createdBy', 'createdDate', 'lastModifiedBy', 'lastModifiedDate']).includes(field.fieldName)) { %>[appInputFormat]="fieldSettings.<%= field.fieldName %>.inputFormat"<% } %>
+          [matDatepicker]="picker<%= field.fieldName %>"
+          formControlName="<%= field.fieldName %>"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker<%= field.fieldName %>"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker<%= field.fieldName %>></mat-datepicker>
+        @if (preferences.formBehavior?.showErrorMessages && form.get('<%= field.fieldName %>')?.invalid && form.get('<%= field.fieldName %>')?.touched) {
+          @if (form.get('<%= field.fieldName %>')?.hasError('required')) {
+            <mat-error>Required field.</mat-error>
+          }
+        }
+      </mat-form-field>
+        <% } else { %>
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="block w-full min-w-0 max-w-none self-stretch"
+      >
+        <mat-label><%= field.fieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %></mat-label>
+        <% if (field.fieldName.toLowerCase().includes('message') || field.fieldName.toLowerCase().includes('description') || field.fieldName.toLowerCase().includes('content') || field.fieldName.toLowerCase().includes('remark')) { %>
+        <textarea
+          matInput
+          <% if (['String', 'TextBlob'].includes(field.fieldType) && !(preferences.fields?.audit?.names || ['createdBy', 'createdDate', 'lastModifiedBy', 'lastModifiedDate']).includes(field.fieldName)) { %>[appInputFormat]="fieldSettings.<%= field.fieldName %>.inputFormat"<% } %>
+          formControlName="<%= field.fieldName %>"
+          <% if (field.fieldValidateRules.includes('required')) { %>required<% } %>
+          rows="5"
+          class="resize-y"
+        ></textarea>
+        <% } else { %>
+        <input
+          matInput
+          <% if (['String', 'TextBlob'].includes(field.fieldType) && !(preferences.fields?.audit?.names || ['createdBy', 'createdDate', 'lastModifiedBy', 'lastModifiedDate']).includes(field.fieldName)) { %>[appInputFormat]="fieldSettings.<%= field.fieldName %>.inputFormat"<% } %>
+          <% if (['Integer', 'Long', 'Float', 'Double', 'BigDecimal'].includes(field.fieldType)) { %>type="number"<% } %>
+          formControlName="<%= field.fieldName %>"
+          <% if (field.fieldValidateRules.includes('required')) { %>required<% } %>
+        />
+        <% } %>
+        @if (preferences.formBehavior?.showErrorMessages && form.get('<%= field.fieldName %>')?.invalid && form.get('<%= field.fieldName %>')?.touched) {
+          @if (form.get('<%= field.fieldName %>')?.hasError('required')) {
+            <mat-error>Required field.</mat-error>
+          }
+          @if (form.get('<%= field.fieldName %>')?.hasError('minlength')) {
+            <mat-error>Minimum length is {{ form.get('<%= field.fieldName %>')?.errors?.['minlength']?.requiredLength }} chars.</mat-error>
+          }
+          @if (form.get('<%= field.fieldName %>')?.hasError('maxlength')) {
+            <mat-error>Maximum length is {{ form.get('<%= field.fieldName %>')?.errors?.['maxlength']?.requiredLength }} chars.</mat-error>
+          }
+          @if (form.get('<%= field.fieldName %>')?.hasError('min')) {
+            <mat-error>Minimum value is {{ form.get('<%= field.fieldName %>')?.errors?.['min']?.min }}.</mat-error>
+          }
+          @if (form.get('<%= field.fieldName %>')?.hasError('max')) {
+            <mat-error>Maximum value is {{ form.get('<%= field.fieldName %>')?.errors?.['max']?.max }}.</mat-error>
+          }
+          @if (form.get('<%= field.fieldName %>')?.hasError('pattern')) {
+            <mat-error>Format is invalid.</mat-error>
+          }
+        }
+      </mat-form-field>
+        <% } %>
+      <% }); %>
+      <% relationships.filter(rel => preferences.generate?.relationships !== false && rel.from.name === entity.name).forEach(rel => { 
+           const relFieldName = rel.from.fieldName || toCamelCase(rel.to.name);
+           const isCollection = ['OneToMany', 'ManyToMany'].includes(rel.type);
+      %>
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="block w-full min-w-0 max-w-none self-stretch"
+      >
+        <mat-label><%= relFieldName.replace(/([A-Z])/g, ' $1').trim().replace(/^./, c => c.toUpperCase()) %></mat-label>
+        <mat-select formControlName="<%= relFieldName %>" [compareWith]="compare<%= rel.to.name %>" <%- isCollection ? 'multiple' : '' %>>
+          @for (option of <%= toCamelCase(rel.to.name) %>sSharedCollection; track option.id) {
+            <mat-option [value]="option">
+              {{ ($any(option)).name || ($any(option)).title || option.id }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <% }); %>
+    </div>
+  </div>
+
+  @if (errorMessage) {
+    <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+      {{ errorMessage }}
+    </div>
+  }
+
+  <div class="mt-6 flex flex-col-reverse gap-3 border-t border-neutral-200 pt-5 sm:flex-row sm:items-center sm:justify-end">
+    <button
+      type="button"
+      mat-button
+      (click)="onCancel()"
+    >
+      Cancel
+    </button>
+
+    <button
+      type="submit"
+      mat-flat-button
+      color="primary"
+      [disabled]="form.invalid || isSaving"
+    >
+      @if (!isSaving) {
+        <span>Save</span>
+      } @else {
+        <span>Saving…</span>
+      }
+    </button>
+  </div>
+</form>