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

package/src/templates/angular/auth/disabled-account-overlay.component.css.ejs

@@ -0,0 +1,95 @@
+.cforge-disabled-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.72);
+  backdrop-filter: blur(2px);
+}
+
+.cforge-disabled-modal {
+  width: min(92vw, 26rem);
+  border-radius: 1rem;
+  background: #0f172a;
+  color: #e2e8f0;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
+  padding: 1.5rem 1.75rem 1.75rem;
+  text-align: center;
+}
+
+.cforge-disabled-title {
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  margin-bottom: 1rem;
+}
+
+.cforge-disabled-headline {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.cforge-disabled-message {
+  font-size: 0.95rem;
+  color: #cbd5e1;
+  margin-bottom: 1.5rem;
+  line-height: 1.45;
+}
+
+.cforge-disabled-timer {
+  position: relative;
+  width: 9rem;
+  height: 9rem;
+  margin: 0 auto 1rem;
+}
+
+.cforge-disabled-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.cforge-disabled-track {
+  fill: none;
+  stroke: #1e293b;
+  stroke-width: 10;
+}
+
+.cforge-disabled-progress {
+  fill: none;
+  stroke: #f97316;
+  stroke-width: 10;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.35s linear;
+}
+
+.cforge-disabled-core {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.cforge-disabled-value {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.cforge-disabled-unit {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.cforge-disabled-countdown {
+  font-size: 0.875rem;
+  color: #94a3b8;
+}

package/src/templates/angular/auth/disabled-account-overlay.component.html.ejs

@@ -0,0 +1,33 @@
+<div
+  class="cforge-disabled-backdrop"
+  role="alertdialog"
+  aria-live="assertive"
+  aria-label="Account access blocked"
+  tabindex="0"
+>
+  <div class="cforge-disabled-modal">
+    <div class="cforge-disabled-title">System Status</div>
+    <div class="cforge-disabled-headline">Please wait...</div>
+    <div class="cforge-disabled-message">{{ message }}</div>
+
+    <div class="cforge-disabled-timer">
+      <svg class="cforge-disabled-svg" viewBox="0 0 200 200" aria-hidden="true">
+        <circle class="cforge-disabled-track" cx="100" cy="100" [attr.r]="ringRadius"></circle>
+        <circle
+          class="cforge-disabled-progress"
+          cx="100"
+          cy="100"
+          [attr.r]="ringRadius"
+          [attr.stroke-dasharray]="ringCircumference"
+          [attr.stroke-dashoffset]="timerDashOffset"
+        ></circle>
+      </svg>
+      <div class="cforge-disabled-core">
+        <div class="cforge-disabled-value">{{ countdown }}</div>
+        <div class="cforge-disabled-unit">sec</div>
+      </div>
+    </div>
+
+    <div class="cforge-disabled-countdown">Signing out in {{ countdown }}s</div>
+  </div>
+</div>

package/src/templates/angular/auth/disabled-account-overlay.component.ts.ejs

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cforge-disabled-account-overlay',
+  standalone: true,
+  templateUrl: './disabled-account-overlay.component.html',
+  styleUrl: './disabled-account-overlay.component.css',
+})
+export class DisabledAccountOverlayComponent {
+  @Input({ required: true }) countdown = 0;
+  @Input() totalCountdownSeconds = 20;
+  @Input() message = 'Your account has been disabled. Please contact your administrator.';
+
+  readonly ringRadius = 76;
+  readonly ringCircumference = 2 * Math.PI * this.ringRadius;
+
+  get timerDashOffset(): number {
+    const safeTotal = Math.max(this.totalCountdownSeconds, 1);
+    const clamped = Math.max(0, Math.min(this.countdown, safeTotal));
+    const progress = clamped / safeTotal;
+    return this.ringCircumference * (1 - progress);
+  }
+}

package/src/templates/angular/auth/fuse-account.ts.ejs

@@ -0,0 +1,234 @@
+import { AuthService } from '@/app/core/auth';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { Component, inject, linkedSignal } from '@angular/core';
+import { email, form, FormField, required } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatOption } from '@angular/material/core';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatError,
+  MatFormField,
+  MatHint,
+  MatInput,
+  MatLabel,
+  MatPrefix,
+} from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'account-settings',
+  imports: [
+    CdkTextareaAutosize,
+    MatButton,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    MatOption,
+    MatPrefix,
+    MatSelect,
+    FormField,
+    MatDivider,
+    MatHint,
+    MatError,
+  ],
+  template: `
+    <form
+      class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8"
+      (submit)="save($event)"
+    >
+      <!-- Profile section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Profile</div>
+        <div class="text-neutral-500">
+          Following information is publicly displayed, be careful!
+        </div>
+      </div>
+
+      <!-- Name -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Name</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.name"
+        />
+        <mat-icon
+          svgIcon="user"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (error of accountSettingsForm.name().errors(); track error) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- Username -->
+      <mat-form-field class="col-span-full md:col-span-2 md:col-start-1">
+        <mat-label>Username</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.username"
+        />
+        <div
+          class="text-neutral-500"
+          matPrefix
+        >
+          fusetheme.com/
+        </div>
+      </mat-form-field>
+
+      <!-- Title -->
+      <mat-form-field class="col-span-full md:col-span-2 md:col-start-1">
+        <mat-label>Title</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.title"
+        />
+        <mat-icon
+          svgIcon="briefcase-business"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Company -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Company</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.company"
+        />
+        <mat-icon
+          svgIcon="building-2"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- About -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>About</mat-label>
+        <textarea
+          matInput
+          cdkTextareaAutosize
+          [formField]="accountSettingsForm.about"
+          [cdkAutosizeMinRows]="4"
+          [cdkAutosizeMaxRows]="6"
+        ></textarea>
+        <mat-hint>
+          Brief description for your profile. Basic HTML and Emoji are allowed.
+        </mat-hint>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Personal information section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Personal Information</div>
+        <div class="text-neutral-500">
+          Communication details in case we want to connect with you. These will
+          be kept private.
+        </div>
+      </div>
+
+      <!-- Email -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Email</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.email"
+        />
+        <mat-icon
+          svgIcon="mail"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (error of accountSettingsForm.email().errors(); track error) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- Phone -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Phone</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.phone"
+        />
+        <mat-icon
+          svgIcon="phone"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Country -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Country</mat-label>
+        <mat-select [formField]="accountSettingsForm.country">
+          <mat-option [value]="'usa'">United States</mat-option>
+          <mat-option [value]="'canada'">Canada</mat-option>
+          <mat-option [value]="'mexico'">Mexico</mat-option>
+          <mat-option [value]="'france'">France</mat-option>
+          <mat-option [value]="'germany'">Germany</mat-option>
+          <mat-option [value]="'italy'">Italy</mat-option>
+        </mat-select>
+        <mat-icon
+          svgIcon="map-pin"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Language -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Language</mat-label>
+        <mat-select [formField]="accountSettingsForm.language">
+          <mat-option [value]="'english'">English</mat-option>
+          <mat-option [value]="'french'">French</mat-option>
+          <mat-option [value]="'spanish'">Spanish</mat-option>
+          <mat-option [value]="'german'">German</mat-option>
+          <mat-option [value]="'italian'">Italian</mat-option>
+        </mat-select>
+        <mat-icon
+          svgIcon="globe"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Actions -->
+      <div class="col-span-full flex items-center justify-end gap-x-3">
+        <button
+          type="button"
+          matButton="outlined"
+        >
+          Cancel
+        </button>
+        <button matButton="filled">Save</button>
+      </div>
+    </form>
+  `,
+})
+export default class AccountSettings {
+  // State
+  private readonly authService = inject(AuthService);
+  protected accountSettingsModel = linkedSignal(() => ({
+    name: this.authService.profile()?.name || '',
+    username: this.authService.currentUser()?.preferred_username || '',
+    email: this.authService.profile()?.email || '',
+    title: '', company: '', about: '', phone: '', country: '', language: '',
+  }));
+  protected accountSettingsForm = form(this.accountSettingsModel, (schema) => {
+    required(schema.name, { message: 'Name is required' });
+
+    required(schema.email, { message: 'Email is required' });
+    email(schema.email, { message: 'Invalid email address' });
+  });
+
+  save(event: Event) {
+    event.preventDefault();
+  }
+}

package/src/templates/angular/auth/fuse-user.ts.ejs

@@ -0,0 +1,264 @@
+import { Component, OnDestroy, computed, inject, signal } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { AccessControlService, AuthService } from '@/app/core/auth';
+
+@Component({
+  selector: 'user',
+  standalone: true,
+  imports: [MatIcon],
+  host: {
+    class: 'block w-full',
+  },
+  styles: [`
+    .power-btn-container {
+      width: 36px;
+      height: 36px;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .power-btn-container input {
+      display: none;
+    }
+
+    .power-btn-container .power-button {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 2px solid rgba(16, 185, 129, 0.4);
+      background-color: transparent;
+      background-image: linear-gradient(145deg, #171717, #262626);
+      box-sizing: border-box;
+      box-shadow: inset 1px 1px 0 #7d7c7e, inset -1px -1px 0px #1c1c1c;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.25s ease;
+    }
+
+    .power-btn-container .power-button::before {
+      position: absolute;
+      content: "";
+      width: 106%;
+      height: 106%;
+      border-radius: inherit;
+      background-color: transparent;
+      background-image: linear-gradient(145deg, #262626, #444245);
+      z-index: -1;
+      box-shadow: 2px 2px 6px #141414, -2px -2px 6px #404040;
+    }
+
+    .power-btn-container .power-button .icon {
+      width: 17px;
+      height: 17px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .power-btn-container .power-button .icon svg {
+      height: 100%;
+      width: 100%;
+      fill: #10b981;
+      filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.6));
+      transition: all 0.25s ease;
+    }
+
+    .power-btn-container:hover .power-button {
+      border-color: rgba(16, 185, 129, 0.8);
+      box-shadow: 0 0 10px rgba(16, 185, 129, 0.35), inset 1px 1px 0 #7d7c7e, inset -1px -1px 0px #1c1c1c;
+    }
+
+    .power-btn-container:hover .power-button .icon svg {
+      fill: #34d399;
+      filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.8));
+    }
+
+    .power-btn-container input:checked + .power-button {
+      box-shadow: inset -1px -1px 0 #5e5e5e, inset 1px 1px 0 #1c1c1c, 0 0 12px rgba(239, 68, 68, 0.5);
+      border: 2px solid rgba(239, 68, 68, 0.8);
+      animation: animeBorderRed 0.4s linear alternate-reverse infinite;
+    }
+
+    .power-btn-container input:checked + .power-button .icon svg {
+      fill: rgb(239, 68, 68);
+      filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.9));
+      animation: animeFillRed 0.4s linear alternate-reverse infinite;
+    }
+
+    @keyframes animeFillRed {
+      to {
+        fill: rgba(248, 113, 113, 0.65);
+        filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.5));
+      }
+    }
+
+    @keyframes animeBorderRed {
+      to {
+        border-color: rgba(239, 68, 68, 0.3);
+      }
+    }
+  `],
+  template: `
+    <div
+      class="flex w-full items-center gap-x-2.5 pl-1 pr-2 py-1 text-left text-slate-900 overflow-visible dark:text-slate-100"
+    >
+      <!-- Avatar + Super Admin badge -->
+      <div class="flex flex-col items-center shrink-0">
+        @if (profile()?.avatar && failedAvatar() !== profile()?.id + ':' + profile()?.avatar) {
+          <img
+            class="size-8 rounded-xl object-cover"
+            [src]="profile()!.avatar"
+            [alt]="userName()"
+            (error)="failedAvatar.set(profile()!.id + ':' + profile()!.avatar)"
+          />
+        } @else {
+          <span
+            class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900"
+            aria-hidden="true"
+          >
+            <mat-icon class="!h-4 !w-4 text-current" svgIcon="user-round" />
+          </span>
+        }
+        @if (isSuperAdmin()) {
+          <span
+            class="mt-0.5 inline-flex items-center gap-0.5 rounded bg-amber-500 px-1 py-0.5 text-[7px] font-extrabold uppercase leading-none tracking-tight text-slate-950 shadow-xs"
+            title="Super Admin Privilege"
+          >
+            <mat-icon class="!h-2 !w-2 text-slate-950" svgIcon="shield-check" />
+            Super Admin
+          </span>
+        }
+      </div>
+
+      <!-- Name + email -->
+      <div class="flex min-w-0 flex-auto flex-col justify-center select-none pl-0.5">
+        <div class="truncate text-xs font-bold leading-tight text-slate-900 dark:text-slate-100">{{ userName() }}</div>
+        <div class="truncate text-[10px] leading-tight text-slate-500 dark:text-slate-400">
+          {{ userEmail() }}
+        </div>
+      </div>
+
+      <!-- Power logout -->
+      <div class="ml-auto flex items-center justify-center shrink-0">
+        <label class="power-btn-container" title="Logout">
+          <input
+            type="checkbox"
+            [checked]="confirmLogoutOpen()"
+            (change)="openLogoutConfirm()"
+          />
+          <span class="power-button">
+            <span class="icon">
+              <svg
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 30.143 30.143"
+                aria-hidden="true"
+              >
+                <g>
+                  <path
+                    d="M20.034,2.357v3.824c3.482,1.798,5.869,5.427,5.869,9.619c0,5.98-4.848,10.83-10.828,10.83 c-5.982,0-10.832-4.85-10.832-10.83c0-3.844,2.012-7.215,5.029-9.136V2.689C4.245,4.918,0.731,9.945,0.731,15.801 c0,7.921,6.42,14.342,14.34,14.342c7.924,0,14.342-6.421,14.342-14.342C29.412,9.624,25.501,4.379,20.034,2.357z"
+                  ></path>
+                  <path
+                    d="M14.795,17.652c1.576,0,1.736-0.931,1.736-2.076V2.08c0-1.148-0.16-2.08-1.736-2.08 c-1.57,0-1.732,0.932-1.732,2.08v13.496C13.062,16.722,13.225,17.652,14.795,17.652z"
+                  ></path>
+                </g>
+              </svg>
+            </span>
+          </span>
+        </label>
+      </div>
+    </div>
+
+    @if (confirmLogoutOpen()) {
+      <div class="fixed inset-0 z-[200] flex items-center justify-center bg-slate-950/45 p-4">
+        <div class="w-full max-w-sm rounded-2xl bg-white p-5 shadow-2xl dark:bg-slate-900">
+          <div class="flex items-start gap-3">
+            <div class="flex size-10 shrink-0 items-center justify-center rounded-full bg-rose-100 text-rose-600">
+              <mat-icon class="size-5" svgIcon="power" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="text-base font-semibold text-slate-900 dark:text-slate-100">Confirm logout</div>
+              <div class="mt-1 text-sm text-slate-600 dark:text-slate-300">
+                Are you sure you want to sign out?
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 flex justify-end gap-2">
+            <button
+              type="button"
+              class="rounded-lg border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
+              (click)="closeLogoutConfirm()"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="rounded-lg bg-rose-600 px-3 py-2 text-sm font-semibold text-white transition hover:bg-rose-700"
+              (click)="confirmLogout()"
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class User implements OnDestroy {
+  private readonly authService = inject(AuthService);
+  private readonly accessControlService = inject(AccessControlService);
+
+  protected readonly profile = this.authService.profile;
+  protected readonly failedAvatar = signal('');
+  protected readonly confirmLogoutOpen = signal(false);
+  protected readonly isSuperAdmin = computed(() => this.accessControlService.isUserAdmin());
+
+  protected readonly userName = computed(() => {
+    const profile = this.profile();
+    if (profile?.name?.trim()) {
+      return profile.name.trim();
+    }
+    const user = this.authService.currentUser();
+    if (!user) {
+      return 'User';
+    }
+    return (
+      user.name ||
+      `${user['given_name'] || ''} ${user['family_name'] || ''}`.trim() ||
+      user.preferred_username ||
+      'User'
+    );
+  });
+
+  protected readonly userEmail = computed(() => {
+    const profile = this.profile();
+    if (profile?.email?.trim()) {
+      return profile.email.trim();
+    }
+    return this.authService.currentUser()?.email || '';
+  });
+
+  ngOnDestroy(): void {
+    this.confirmLogoutOpen.set(false);
+  }
+
+  openLogoutConfirm(): void {
+    this.confirmLogoutOpen.set(true);
+  }
+
+  closeLogoutConfirm(): void {
+    this.confirmLogoutOpen.set(false);
+  }
+
+  confirmLogout(): void {
+    this.confirmLogoutOpen.set(false);
+    this.authService.signOut('user');
+  }
+}

package/src/templates/angular/auth/has-permission.directive.ts.ejs

@@ -0,0 +1,51 @@
+import { Directive, Input, TemplateRef, ViewContainerRef, effect, inject } from '@angular/core';
+import { AccessControlService } from '../services/access-control.service';
+
+@Directive({
+  selector: '[hasPermission]',
+  standalone: true,
+})
+export class HasPermissionDirective {
+  private readonly templateRef = inject(TemplateRef<unknown>);
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly accessControl = inject(AccessControlService);
+  private screenId = '';
+  private componentId = '';
+  private hasView = false;
+
+  @Input()
+  set hasPermission(screenId: string) {
+    this.screenId = screenId;
+    this.render();
+  }
+
+  @Input()
+  set hasPermissionComponent(componentId: string) {
+    this.componentId = componentId;
+    this.render();
+  }
+
+  constructor() {
+    effect(() => {
+      this.accessControl.isLoaded();
+      this.accessControl.isUserAdmin();
+      this.render();
+    });
+  }
+
+  private render(): void {
+    const allowed = this.componentId
+      ? this.accessControl.hasComponentAccess(this.screenId, this.componentId)
+      : this.accessControl.hasScreenAccess(this.screenId);
+
+    if (allowed && !this.hasView) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      this.hasView = true;
+      return;
+    }
+    if (!allowed && this.hasView) {
+      this.viewContainer.clear();
+      this.hasView = false;
+    }
+  }
+}