@devmed555/angular-clean-architecture-cli 0.0.2 → 0.0.3

package/src/generators/core/files/auth/auth.service.ts.template

@@ -0,0 +1,137 @@
+import { Injectable, signal, inject, computed } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { catchError, tap } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { environment } from '../../../environments/environment';
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export interface LoginResponse {
+  access_token: string;
+  user: User;
+}
+
+const TOKEN_KEY = 'auth_token';
+const USER_KEY = 'auth_user';
+
+/**
+ * Auth Service - handles authentication with backend API
+ * Uses signals for reactive state management (Angular 21 zoneless compatible)
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private readonly http = inject(HttpClient);
+  private readonly router = inject(Router);
+  private readonly apiUrl = `${environment.apiUrl}/auth`;
+
+  // State signals
+  private readonly _currentUser = signal<User | null>(this.loadUserFromStorage());
+  private readonly _token = signal<string | null>(this.loadTokenFromStorage());
+  private readonly _loading = signal(false);
+  private readonly _error = signal<string | null>(null);
+
+  // Public readonly signals
+  readonly currentUser = this._currentUser.asReadonly();
+  readonly token = this._token.asReadonly();
+  readonly loading = this._loading.asReadonly();
+  readonly error = this._error.asReadonly();
+  
+  // Computed signal for authentication status
+  readonly isAuthenticated = computed(() => !!this._token() && !!this._currentUser());
+
+  login(credentials: { email: string; password: string }) {
+    this._loading.set(true);
+    this._error.set(null);
+
+    return this.http.post<LoginResponse>(`${this.apiUrl}/login`, credentials).pipe(
+      tap(response => {
+        this.setSession(response);
+        this._loading.set(false);
+      }),
+      catchError(error => {
+        this._error.set(error.error?.message || 'Login failed');
+        this._loading.set(false);
+        return of(null);
+      })
+    );
+  }
+
+  signup(userData: { name: string; email: string; password: string }) {
+    this._loading.set(true);
+    this._error.set(null);
+
+    return this.http.post<LoginResponse>(`${this.apiUrl}/signup`, userData).pipe(
+      tap(response => {
+        this.setSession(response);
+        this._loading.set(false);
+      }),
+      catchError(error => {
+        this._error.set(error.error?.message || 'Signup failed');
+        this._loading.set(false);
+        return of(null);
+      })
+    );
+  }
+
+  logout() {
+    this.http.post(`${this.apiUrl}/logout`, {}).subscribe();
+    this.clearSession();
+    this.router.navigate(['/login']);
+  }
+
+  refreshUser() {
+    if (!this._token()) return;
+
+    this.http.get<User>(`${this.apiUrl}/me`).pipe(
+      catchError(() => {
+        this.clearSession();
+        return of(null);
+      })
+    ).subscribe(user => {
+      if (user) {
+        this._currentUser.set(user);
+        this.saveUserToStorage(user);
+      }
+    });
+  }
+
+  private setSession(response: LoginResponse) {
+    this._token.set(response.access_token);
+    this._currentUser.set(response.user);
+    this.saveTokenToStorage(response.access_token);
+    this.saveUserToStorage(response.user);
+  }
+
+  private clearSession() {
+    this._token.set(null);
+    this._currentUser.set(null);
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+  }
+
+  private loadTokenFromStorage(): string | null {
+    if (typeof localStorage === 'undefined') return null;
+    return localStorage.getItem(TOKEN_KEY);
+  }
+
+  private loadUserFromStorage(): User | null {
+    if (typeof localStorage === 'undefined') return null;
+    const userJson = localStorage.getItem(USER_KEY);
+    return userJson ? JSON.parse(userJson) : null;
+  }
+
+  private saveTokenToStorage(token: string) {
+    localStorage.setItem(TOKEN_KEY, token);
+  }
+
+  private saveUserToStorage(user: User) {
+    localStorage.setItem(USER_KEY, JSON.stringify(user));
+  }
+}

package/src/generators/core/files/auth/login.component.ts.template

@@ -0,0 +1,165 @@
+import { Component, inject, ChangeDetectionStrategy, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RouterLink } from '@angular/router';
+import { AuthService } from './auth.service';
+import { Router } from '@angular/router';
+
+/**
+ * Login component - connects to backend API
+ */
+@Component({
+  selector: 'app-login',
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    RouterLink
+  ],
+  template: `
+    @let emailErrors = loginForm.get('email')?.errors;
+    @let passwordErrors = loginForm.get('password')?.errors;
+    @let isSubmitDisabled = !formValid() || authService.loading();
+    
+    <div class="auth-container">
+      <mat-card class="auth-card">
+        <mat-card-header>
+          <mat-card-title>Login</mat-card-title>
+          <mat-card-subtitle>Sign in to your account</mat-card-subtitle>
+        </mat-card-header>
+        
+        <mat-card-content>
+          @if (authService.error()) {
+            <div class="error-banner">{{ authService.error() }}</div>
+          }
+          
+          <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+            <mat-form-field appearance="outline">
+              <mat-label>Email</mat-label>
+              <input matInput formControlName="email" type="email" placeholder="Enter your email">
+              @if (emailErrors?.['required']) {
+                <mat-error>Email is required</mat-error>
+              }
+              @if (emailErrors?.['email']) {
+                <mat-error>Please enter a valid email</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Password</mat-label>
+              <input matInput formControlName="password" type="password" placeholder="Enter your password">
+              @if (passwordErrors?.['required']) {
+                <mat-error>Password is required</mat-error>
+              }
+            </mat-form-field>
+
+            <button 
+              mat-raised-button 
+              color="primary" 
+              type="submit" 
+              [disabled]="isSubmitDisabled"
+              class="submit-btn">
+              @if (authService.loading()) {
+                <mat-spinner diameter="20"></mat-spinner>
+                <span>Logging in...</span>
+              } @else {
+                Login
+              }
+            </button>
+          </form>
+          
+          <div class="auth-footer">
+            <p>Don't have an account? <a routerLink="/signup">Sign up</a></p>
+            <p class="demo-hint">Demo: admin@example.com / admin123</p>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  `,
+  styles: `
+    .auth-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 80vh;
+      padding: 1rem;
+    }
+    .auth-card {
+      width: 100%;
+      max-width: 400px;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    .submit-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 48px;
+    }
+    .error-banner {
+      background-color: #f44336;
+      color: white;
+      padding: 12px;
+      border-radius: 4px;
+      margin-bottom: 16px;
+    }
+    .auth-footer {
+      margin-top: 24px;
+      text-align: center;
+      
+      a {
+        color: var(--color-primary);
+        text-decoration: none;
+        font-weight: 500;
+      }
+      
+      .demo-hint {
+        margin-top: 8px;
+        font-size: 0.85rem;
+        color: var(--color-text-secondary);
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoginComponent {
+  private readonly fb = inject(FormBuilder);
+  protected readonly authService = inject(AuthService);
+  private readonly router = inject(Router);
+
+  readonly formValid = signal(false);
+
+  readonly loginForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required]]
+  });
+
+  constructor() {
+    this.loginForm.statusChanges.subscribe(() => {
+      this.formValid.set(this.loginForm.valid);
+    });
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.valid) {
+      const { email, password } = this.loginForm.value;
+      this.authService.login({ email: email!, password: password! }).subscribe(response => {
+        if (response) {
+          this.router.navigate(['/']);
+        }
+      });
+    }
+  }
+}

package/src/generators/core/files/auth/signup.component.ts.template

@@ -0,0 +1,171 @@
+import { Component, inject, ChangeDetectionStrategy, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { RouterLink } from '@angular/router';
+import { AuthService } from './auth.service';
+import { Router } from '@angular/router';
+
+/**
+ * Signup component - connects to backend API
+ */
+@Component({
+  selector: 'app-signup',
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    RouterLink
+  ],
+  template: `
+    @let nameErrors = signupForm.get('name')?.errors;
+    @let emailErrors = signupForm.get('email')?.errors;
+    @let passwordErrors = signupForm.get('password')?.errors;
+    @let isSubmitDisabled = !formValid() || authService.loading();
+    
+    <div class="auth-container">
+      <mat-card class="auth-card">
+        <mat-card-header>
+          <mat-card-title>Sign Up</mat-card-title>
+          <mat-card-subtitle>Create a new account</mat-card-subtitle>
+        </mat-card-header>
+        
+        <mat-card-content>
+          @if (authService.error()) {
+            <div class="error-banner">{{ authService.error() }}</div>
+          }
+          
+          <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
+            <mat-form-field appearance="outline">
+              <mat-label>Name</mat-label>
+              <input matInput formControlName="name" placeholder="Enter your name">
+              @if (nameErrors?.['required']) {
+                <mat-error>Name is required</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Email</mat-label>
+              <input matInput formControlName="email" type="email" placeholder="Enter your email">
+              @if (emailErrors?.['required']) {
+                <mat-error>Email is required</mat-error>
+              }
+              @if (emailErrors?.['email']) {
+                <mat-error>Please enter a valid email</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Password</mat-label>
+              <input matInput formControlName="password" type="password" placeholder="Enter your password">
+              @if (passwordErrors?.['required']) {
+                <mat-error>Password is required</mat-error>
+              }
+              @if (passwordErrors?.['minlength']) {
+                <mat-error>Password must be at least 6 characters</mat-error>
+              }
+            </mat-form-field>
+
+            <button 
+              mat-raised-button 
+              color="primary" 
+              type="submit" 
+              [disabled]="isSubmitDisabled"
+              class="submit-btn">
+              @if (authService.loading()) {
+                <mat-spinner diameter="20"></mat-spinner>
+                <span>Creating account...</span>
+              } @else {
+                Sign Up
+              }
+            </button>
+          </form>
+          
+          <div class="auth-footer">
+            <p>Already have an account? <a routerLink="/login">Login</a></p>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  `,
+  styles: `
+    .auth-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 80vh;
+      padding: 1rem;
+    }
+    .auth-card {
+      width: 100%;
+      max-width: 400px;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-top: 16px;
+    }
+    .submit-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 48px;
+    }
+    .error-banner {
+      background-color: #f44336;
+      color: white;
+      padding: 12px;
+      border-radius: 4px;
+      margin-bottom: 16px;
+    }
+    .auth-footer {
+      margin-top: 24px;
+      text-align: center;
+      
+      a {
+        color: var(--color-primary);
+        text-decoration: none;
+        font-weight: 500;
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SignupComponent {
+  private readonly fb = inject(FormBuilder);
+  protected readonly authService = inject(AuthService);
+  private readonly router = inject(Router);
+
+  readonly formValid = signal(false);
+
+  readonly signupForm = this.fb.group({
+    name: ['', [Validators.required]],
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]]
+  });
+
+  constructor() {
+    this.signupForm.statusChanges.subscribe(() => {
+      this.formValid.set(this.signupForm.valid);
+    });
+  }
+
+  onSubmit(): void {
+    if (this.signupForm.valid) {
+      const { name, email, password } = this.signupForm.value;
+      this.authService.signup({ name: name!, email: email!, password: password! }).subscribe(response => {
+        if (response) {
+          this.router.navigate(['/']);
+        }
+      });
+    }
+  }
+}

package/src/generators/core/files/guard/__name__.guard.ts.template

@@ -0,0 +1,6 @@
+import { CanActivateFn } from '@angular/router';
+
+export const <%= camelName %>Guard: CanActivateFn = (route, state) => {
+  // TODO: Implement guard logic
+  return true;
+};

package/src/generators/core/files/interceptor/__name__.interceptor.ts.template

@@ -0,0 +1,6 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+
+export const <%= camelName %>Interceptor: HttpInterceptorFn = (req, next) => {
+  // TODO: Implement interceptor logic
+  return next(req);
+};

package/src/generators/core/files/language-selector/language-selector.component.ts.template

@@ -0,0 +1,82 @@
+import { Component, inject, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateService } from '../translate/translate.service';
+
+@Component({
+  selector: 'app-language-selector',
+  imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule],
+  template: `
+    <button mat-button [matMenuTriggerFor]="menu" class="lang-button">
+      <mat-icon>translate</mat-icon>
+      <span class="lang-label">{{ currentLangLabel() }}</span>
+      <mat-icon class="dropdown-icon">arrow_drop_down</mat-icon>
+    </button>
+
+    <mat-menu #menu="matMenu" xPosition="before">
+      @for (lang of languages; track lang.code) {
+      <button mat-menu-item (click)="changeLang(lang.code)" [class.active-lang]="translate.currentLang() === lang.code">
+        <mat-icon *ngIf="translate.currentLang() === lang.code">check</mat-icon>
+        <span>{{ lang.label }}</span>
+      </button>
+      }
+    </mat-menu>
+  `,
+  styles: [
+    `
+      .lang-button {
+        display: flex;
+        align-items: center;
+        padding: 0 12px;
+        height: 40px;
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.1);
+        color: white;
+        transition: background 0.3s ease;
+      }
+
+      .lang-button:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      .lang-label {
+        margin: 0 4px;
+        font-weight: 500;
+        text-transform: uppercase;
+        font-size: 0.85rem;
+      }
+
+      .dropdown-icon {
+        margin: 0;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+
+      .active-lang {
+        color: var(--primary-color, #3f51b5);
+        font-weight: bold;
+      }
+    `,
+  ],
+})
+export class LanguageSelectorComponent {
+  translate = inject(TranslateService);
+
+  languages = [
+    { code: 'en', label: 'English' },
+    { code: 'fr', label: 'Français' },
+    { code: 'es', label: 'Español' },
+  ];
+
+  currentLangLabel = computed(() => {
+    const current = this.translate.currentLang();
+    return this.languages.find((l) => l.code === current)?.label || current;
+  });
+
+  changeLang(lang: string) {
+    this.translate.setLanguage(lang);
+  }
+}

package/src/generators/core/files/menu/__name__.component.html.template

@@ -0,0 +1,14 @@
+<mat-nav-list>
+  <div mat-subheader>Features</div>
+  @for (feature of features; track feature.path) {
+    <a mat-list-item [routerLink]="['/', feature.path]" routerLinkActive="selected-nav">
+      <mat-icon matListItemIcon>extension</mat-icon>
+      <span matListItemTitle>{{ feature.label }}</span>
+    </a>
+  }
+  @if (features.length === 0) {
+    <div class="no-features-msg">
+      No features generated yet.
+    </div>
+  }
+</mat-nav-list>

package/src/generators/core/files/menu/__name__.component.scss.template

@@ -0,0 +1,66 @@
+// Theme variables
+@use '@angular/material' as mat;
+
+:host {
+  display: block;
+  padding: 8px 0;
+}
+
+// Subheader styling (e.g. "Features")
+div[mat-subheader] {
+  color: var(--color-text-secondary) !important;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 1.2px;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+
+// List item styling
+a[mat-list-item] {
+  margin: 0 8px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  height: 48px;
+  
+  [matListItemTitle] {
+    color: var(--color-text) !important;
+    font-weight: 500;
+  }
+
+  mat-icon {
+    color: var(--color-text-secondary) !important;
+    transition: color 0.2s ease;
+  }
+
+  &:hover {
+    background-color: var(--color-bg-elevated);
+    
+    mat-icon {
+      color: var(--color-text) !important;
+    }
+  }
+
+  &.selected-nav {
+    background-color: rgba(63, 81, 181, 0.15);
+    border-left: 3px solid var(--color-primary);
+    
+    [matListItemTitle] {
+       color: var(--color-primary) !important;
+       font-weight: 600;
+    }
+    
+    mat-icon {
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
+.no-features-msg {
+  padding: 16px;
+  color: var(--color-text-secondary);
+  font-style: italic;
+  font-size: 0.9rem;
+  text-align: center;
+}

package/src/generators/core/files/menu/__name__.component.ts.template

@@ -0,0 +1,24 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { RouterModule, Router } from '@angular/router';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-menu',
+  imports: [RouterModule, MatListModule, MatIconModule],
+  templateUrl: './<%= name %>.component.html',
+  styleUrls: ['./<%= name %>.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class <%= pascalName %>Component {
+  private readonly router = inject(Router);
+
+  get features() {
+    return this.router.config
+      .filter(route => route.path && route.path !== '')
+      .map(route => ({
+        path: route.path,
+        label: route.data?.['label'] || route.path?.split('-').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(' ')
+      }));
+  }
+}