create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/starter/layout.js

@@ -0,0 +1,852 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Starter Layout Components
+ * - Header with navigation and language switcher
+ * - Footer with links
+ * - Auth Layout with Login, Register, Forgot Password
+ */
+
+async function createLayout(config) {
+  await createHeader(config);
+  await createFooter(config);
+}
+
+async function createHeader(config) {
+  const headerComponentTs = `import { Component, inject, OnInit } from '@angular/core';
+import { RouterModule, Router } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage } from '@ng-icons/heroicons/outline';
+import { TranslateModule } from '@ngx-translate/core';
+import { AuthService } from '@core/services/auth.service';
+import { TranslationService, type SupportedLanguage, type LanguageOption } from '@core/i18n/translation.service';
+
+interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent, TranslateModule],
+  viewProviders: [provideIcons({ heroHome, heroInformationCircle, heroEnvelope, heroUser, heroBars3, heroXMark, heroChevronDown, heroLanguage })],
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent implements OnInit {
+  private authService = inject(AuthService);
+  private router = inject(Router);
+  public translationService = inject(TranslationService);
+
+  protected readonly projectName = '${config.projectName}';
+
+  mobileMenuOpen = false;
+  userMenuOpen = false;
+  langMenuOpen = false;
+  isAuthenticated = false;
+  currentUser: User | null = null;
+  currentLang: SupportedLanguage = 'en';
+  currentLanguage: LanguageOption = this.translationService.languages[0];
+
+  ngOnInit() {
+    // Subscribe to authentication state
+    this.authService.isAuthenticated$.subscribe(
+      isAuth => this.isAuthenticated = isAuth
+    );
+
+    this.authService.currentUser$.subscribe(
+      user => this.currentUser = user
+    );
+
+    // Subscribe to language changes
+    this.currentLang = this.translationService.getCurrentLanguage();
+    const lang = this.translationService.getLanguageOption(this.currentLang);
+    if (lang) {
+      this.currentLanguage = lang;
+    }
+  }
+
+  changeLanguage(lang: SupportedLanguage) {
+    this.translationService.setLanguage(lang);
+    this.currentLang = lang;
+    const langOption = this.translationService.getLanguageOption(lang);
+    if (langOption) {
+      this.currentLanguage = langOption;
+    }
+    this.langMenuOpen = false;
+  }
+
+  onLogout() {
+    this.authService.logout();
+    this.userMenuOpen = false;
+    this.router.navigate(['/']);
+  }
+
+  closeAllMenus() {
+    this.mobileMenuOpen = false;
+    this.userMenuOpen = false;
+    this.langMenuOpen = false;
+  }
+}`;
+
+  const headerComponentHtml = `<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-200/80">
+  <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+
+      <!-- Logo -->
+      <div class="flex items-center space-x-4">
+        <a routerLink="/" class="flex items-center space-x-3">
+         <div class="flex rounded-lg">
+            <img src="assets/images/logo.svg" alt="Logo" class="h-10 w-10" />
+            <span class="text-white font-bold text-sm">{{ projectName.charAt(0).toUpperCase() }}</span>
+          </div>
+          <span class="text-xl font-semibold text-gray-900">
+            {{ projectName }}
+          </span>
+        </a>
+      </div>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:block">
+        <div class="ml-10 flex items-center space-x-8">
+          <a
+            routerLink="/"
+            routerLinkActive="text-primary-600"
+            [routerLinkActiveOptions]="{exact: true}"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-600 transition-colors font-medium">
+            <ng-icon name="heroHome" size="18"></ng-icon>
+            {{ 'nav.home' | translate }}
+          </a>
+          <a
+            routerLink="/about"
+            routerLinkActive="text-primary-600"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-600 transition-colors font-medium">
+            <ng-icon name="heroInformationCircle" size="18"></ng-icon>
+            {{ 'nav.about' | translate }}
+          </a>
+          <a
+            routerLink="/contact"
+            routerLinkActive="text-primary-600"
+            class="flex items-center gap-1.5 text-gray-700 hover:text-primary-600 transition-colors font-medium">
+            <ng-icon name="heroEnvelope" size="18"></ng-icon>
+            {{ 'nav.contact' | translate }}
+          </a>
+        </div>
+      </div>
+
+      <!-- Right side actions -->
+      <div class="flex items-center space-x-4">
+
+        <!-- Language Switcher -->
+        <div class="hidden md:block relative">
+          <button
+            (click)="langMenuOpen = !langMenuOpen"
+            class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 transition-colors px-3 py-2 rounded-lg hover:bg-gray-100"
+            [class.text-primary-600]="langMenuOpen"
+            [class.bg-gray-100]="langMenuOpen">
+            <ng-icon name="heroLanguage" size="20"></ng-icon>
+            <span class="font-medium text-sm">{{ currentLanguage.nativeName }}</span>
+            <ng-icon name="heroChevronDown" size="16"></ng-icon>
+          </button>
+
+          <!-- Language dropdown menu -->
+          @if (langMenuOpen) {
+            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+              <div class="py-1">
+                @for (lang of translationService.languages; track lang.code) {
+                  <button
+                    (click)="changeLanguage(lang.code)"
+                    class="w-full text-left px-4 py-2 text-sm transition-colors flex items-center justify-between"
+                    [class.bg-primary-50]="currentLang === lang.code"
+                    [class.text-primary-600]="currentLang === lang.code"
+                    [class.text-gray-700]="currentLang !== lang.code"
+                    [class.hover:bg-gray-100]="currentLang !== lang.code">
+                    <span class="flex items-center space-x-2">
+                      <span class="text-lg">{{ lang.flag }}</span>
+                      <span>{{ lang.nativeName }}</span>
+                    </span>
+                    @if (currentLang === lang.code) {
+                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                      </svg>
+                    }
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Authentication Section -->
+        <div class="hidden md:flex items-center space-x-3">
+          <!-- Logged out state -->
+          @if (!isAuthenticated) {
+            <a
+              routerLink="/auth/login"
+              class="text-gray-700 hover:text-primary-600 transition-colors font-medium">
+              {{ 'nav.login' | translate }}
+            </a>
+            <a
+              routerLink="/auth/register"
+              class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
+              {{ 'nav.register' | translate }}
+            </a>
+          }
+
+          <!-- Logged in state -->
+          @if (isAuthenticated) {
+            <div class="relative">
+            <button
+              (click)="userMenuOpen = !userMenuOpen"
+              class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 transition-colors"
+              [class.text-primary-600]="userMenuOpen">
+              <div class="h-8 w-8 bg-primary-600 rounded-full flex items-center justify-center">
+                <ng-icon name="heroUser" size="16" style="color: white;"></ng-icon>
+              </div>
+              <span class="font-medium">{{ currentUser?.firstName || 'User' }}</span>
+              <ng-icon name="heroChevronDown" size="16"></ng-icon>
+            </button>
+
+            <!-- User dropdown menu -->
+            @if (userMenuOpen) {
+              <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
+              <div class="py-1">
+                <div class="px-4 py-2 text-sm text-gray-500 border-b border-gray-100">
+                  {{ currentUser?.email }}
+                </div>
+                <button
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                  {{ 'nav.profile' | translate }}
+                </button>
+                <button
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
+                  {{ 'nav.account' | translate }}
+                </button>
+                <hr class="my-1">
+                <button
+                  (click)="onLogout()"
+                  class="w-full text-left px-4 py-2 text-sm text-danger-600 hover:bg-danger-50 transition-colors">
+                  {{ 'nav.logout' | translate }}
+                </button>
+              </div>
+              </div>
+            }
+          </div>
+        }
+        </div>
+
+        <!-- Mobile menu button -->
+        <button
+          (click)="mobileMenuOpen = !mobileMenuOpen"
+          class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
+          @if (!mobileMenuOpen) {
+            <ng-icon name="heroBars3" size="24"></ng-icon>
+          }
+          @if (mobileMenuOpen) {
+            <ng-icon name="heroXMark" size="24"></ng-icon>
+          }
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile Navigation -->
+    @if (mobileMenuOpen) {
+      <div class="md:hidden pb-4">
+      <div class="flex flex-col space-y-2 mt-4">
+        <!-- Navigation Links -->
+        <a
+          routerLink="/"
+          routerLinkActive="text-primary-600 bg-primary-50"
+          [routerLinkActiveOptions]="{exact: true}"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.home' | translate }}
+        </a>
+        <a
+          routerLink="/about"
+          routerLinkActive="text-primary-600 bg-primary-50"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.about' | translate }}
+        </a>
+        <a
+          routerLink="/contact"
+          routerLinkActive="text-primary-600 bg-primary-50"
+          (click)="mobileMenuOpen = false"
+          class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
+          {{ 'nav.contact' | translate }}
+        </a>
+
+        <!-- Mobile Language Switcher -->
+        <hr class="my-2">
+        <div class="px-3 py-2">
+          <p class="text-xs font-semibold text-gray-500 uppercase mb-2">{{ 'language.select' | translate }}</p>
+          <div class="flex flex-col space-y-1">
+            @for (lang of translationService.languages; track lang.code) {
+              <button
+                (click)="changeLanguage(lang.code)"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between"
+                [class.bg-primary-50]="currentLang === lang.code"
+                [class.text-primary-600]="currentLang === lang.code"
+                [class.text-gray-700]="currentLang !== lang.code"
+                [class.hover:bg-gray-100]="currentLang !== lang.code">
+                <span class="flex items-center space-x-2">
+                  <span class="text-lg">{{ lang.flag }}</span>
+                  <span>{{ lang.nativeName }}</span>
+                </span>
+                @if (currentLang === lang.code) {
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        </div>
+
+        <!-- Mobile Auth Section -->
+        <hr class="my-2">
+        @if (!isAuthenticated) {
+          <a
+            routerLink="/auth/login"
+            (click)="mobileMenuOpen = false"
+            class="px-3 py-2 rounded-lg text-gray-700 hover:text-primary-600 hover:bg-gray-100 transition-colors font-medium">
+            {{ 'nav.login' | translate }}
+          </a>
+          <a
+            routerLink="/auth/register"
+            (click)="mobileMenuOpen = false"
+            class="px-3 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors font-medium text-center">
+            {{ 'nav.register' | translate }}
+          </a>
+        }
+
+        @if (isAuthenticated) {
+          <div class="px-3 py-2 text-sm text-gray-500">
+            Welcome, {{ currentUser?.firstName || 'User' }}!
+          </div>
+          <button
+            class="w-full text-left px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
+            {{ 'nav.profile' | translate }}
+          </button>
+          <button
+            (click)="onLogout(); mobileMenuOpen = false"
+            class="w-full text-left px-3 py-2 rounded-lg text-danger-600 hover:bg-danger-50 transition-colors">
+            {{ 'nav.logout' | translate }}
+          </button>
+        }
+      </div>
+    </div>
+    }
+  </nav>
+</header>
+
+<!-- Backdrop for mobile menu and user dropdown -->
+@if (mobileMenuOpen || userMenuOpen || langMenuOpen) {
+  <button
+    (click)="closeAllMenus()"
+    (keydown.escape)="closeAllMenus()"
+    type="button"
+    aria-label="Close menu"
+    class="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm cursor-default">
+  </button>
+}
+`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/header/header.component.ts'),
+    headerComponentTs
+  );
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/header/header.component.html'),
+    headerComponentHtml
+  );
+}
+
+async function createFooter(config) {
+  const footerComponentTs = `import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [TranslateModule],
+  templateUrl: './footer.component.html'
+})
+export class FooterComponent {
+  protected readonly projectName = '${config.projectName}';
+  protected readonly currentYear = new Date().getFullYear();
+}`;
+
+  const footerComponentHtml = `<footer class="bg-white border-t border-gray-200">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+
+      <!-- Company Info -->
+      <div>
+        <div class="flex items-center space-x-3 mb-4">
+          <img src="assets/images/logo.svg" alt="Logo" class="h-10 w-10" />
+          <span class="text-xl font-semibold text-gray-900">
+            {{ projectName }}
+          </span>
+        </div>
+        <p class="text-gray-600 text-sm max-w-md">
+          {{ 'footer.description' | translate }}
+        </p>
+      </div>
+
+      <!-- Quick Links -->
+      <div>
+        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">
+          {{ 'footer.quickLinks' | translate }}
+        </h3>
+        <ul class="space-y-2">
+          <li>
+            <a href="/" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              {{ 'nav.home' | translate }}
+            </a>
+          </li>
+          <li>
+            <a href="/about" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              {{ 'nav.about' | translate }}
+            </a>
+          </li>
+          <li>
+            <a href="/contact" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              {{ 'nav.contact' | translate }}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Tech Stack -->
+      <div>
+        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">
+          {{ 'footer.builtWith' | translate }}
+        </h3>
+        <ul class="space-y-2">
+          <li>
+            <a href="https://angular.dev" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              Angular
+            </a>
+          </li>
+          <li>
+            <a href="https://tailwindcss.com" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              Tailwind CSS
+            </a>
+          </li>
+          <li>
+            <a href="https://typescript.org" target="_blank" class="text-gray-600 hover:text-primary-600 transition-colors text-sm">
+              TypeScript
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Bottom Bar -->
+    <div class="border-t border-gray-200 mt-8 pt-8">
+      <p class="text-gray-500 text-sm text-center">
+        {{ 'footer.copyright' | translate:{ year: currentYear, name: projectName } }}
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/footer/footer.component.ts'),
+    footerComponentTs
+  );
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/footer/footer.component.html'),
+    footerComponentHtml
+  );
+}
+
+async function createAuthLayout(config) {
+  // Auth Layout Component
+  const authLayoutComponent = `import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-auth-layout',
+  standalone: true,
+  imports: [RouterOutlet, TranslateModule],
+  template: \`
+    <div class="min-h-screen bg-linear-to-br from-primary-500 via-accent-600 to-secondary-700 flex items-center justify-center p-4">
+      <div class="w-full max-w-md">
+
+        <!-- Logo/Brand -->
+        <div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center h-16 w-16 bg-white/20 backdrop-blur-lg rounded-2xl mb-4">
+            <span class="text-2xl font-bold text-white">{{ firstLetter }}</span>
+          </div>
+          <h1 class="text-2xl font-bold text-white">{{ projectName }}</h1>
+          <p class="text-primary-100 mt-2">{{ 'auth.layout.welcome' | translate }}</p>
+        </div>
+
+        <!-- Auth Form Container -->
+        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-8">
+          <router-outlet />
+        </div>
+
+        <!-- Footer -->
+        <div class="text-center mt-8 text-primary-100 text-sm">
+          <p>{{ 'auth.layout.copyright' | translate:{ year: currentYear, name: projectName } }}</p>
+        </div>
+      </div>
+    </div>
+  \`
+})
+export class AuthLayoutComponent {
+  protected readonly projectName = '${config.projectName}';
+  protected readonly firstLetter = '${config.projectName}'.charAt(0).toUpperCase();
+  protected readonly currentYear = new Date().getFullYear();
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/layout/auth/auth-layout.component.ts'),
+    authLayoutComponent
+  );
+
+  // Create auth pages
+  await createLoginComponent(config);
+  await createRegisterComponent(config);
+  await createForgotPasswordComponent(config);
+}
+
+async function createLoginComponent(config) {
+  const loginComponentTs = `import { Component, inject } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './login.component.html'
+})
+export class LoginComponent {
+  private fb = inject(FormBuilder);
+  private router = inject(Router);
+
+  showPassword = false;
+  isLoading = false;
+  errorMessage = '';
+
+  loginForm = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]],
+    rememberMe: [false]
+  });
+
+  togglePassword(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.valid) {
+      this.isLoading = true;
+      this.errorMessage = '';
+
+      // Simulate login API call
+      setTimeout(() => {
+        this.isLoading = false;
+
+        // Mock login logic - replace with actual authentication service
+        const { email, password } = this.loginForm.value;
+
+        if (email === 'demo@example.com' && password === 'password') {
+          // Store token (mock)
+          localStorage.setItem('auth_token', 'mock_token_12345');
+          this.router.navigate(['/']);
+        } else {
+          this.errorMessage = 'Invalid email or password. Try demo@example.com / password';
+        }
+      }, 1500);
+    } else {
+      // Mark all fields as touched to show validation errors
+      Object.keys(this.loginForm.controls).forEach(key => {
+        this.loginForm.get(key)?.markAsTouched();
+      });
+    }
+  }
+}`;
+
+  const loginComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.login.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.login.subtitle' | translate }}</p>
+  </div>
+
+  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
+
+    <!-- Email Field -->
+    <div>
+      <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+        {{ 'auth.login.email' | translate }}
+      </label>
+      <input
+        id="email"
+        type="email"
+        formControlName="email"
+        autocomplete="email"
+        [placeholder]="'auth.login.email' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
+        [class.border-danger-500]="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
+      @if (loginForm.get('email')?.invalid && loginForm.get('email')?.touched) {
+        <div class="mt-1 text-sm text-danger-600">
+          @if (loginForm.get('email')?.errors?.['required']) {
+            <span>{{ 'auth.validation.emailRequired' | translate }}</span>
+          }
+          @if (loginForm.get('email')?.errors?.['email']) {
+            <span>{{ 'auth.validation.emailInvalid' | translate }}</span>
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Password Field -->
+    <div>
+      <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+        {{ 'auth.login.password' | translate }}
+      </label>
+      <div class="relative">
+        <input
+          id="password"
+          [type]="showPassword ? 'text' : 'password'"
+          formControlName="password"
+          autocomplete="current-password"
+          [placeholder]="'auth.login.password' | translate"
+          class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
+          [class.border-danger-500]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
+        <button
+          type="button"
+          (click)="togglePassword()"
+          [attr.aria-label]="showPassword ? ('auth.login.hidePassword' | translate) : ('auth.login.showPassword' | translate)"
+          class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
+          @if (!showPassword) {
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+            </svg>
+          }
+          @if (showPassword) {
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
+            </svg>
+          }
+        </button>
+      </div>
+      @if (loginForm.get('password')?.invalid && loginForm.get('password')?.touched) {
+        <div class="mt-1 text-sm text-danger-600">
+          @if (loginForm.get('password')?.errors?.['required']) {
+            <span>{{ 'auth.validation.passwordRequired' | translate }}</span>
+          }
+          @if (loginForm.get('password')?.errors?.['minlength']) {
+            <span>{{ 'auth.validation.passwordMinLength' | translate }}</span>
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Remember Me & Forgot Password -->
+    <div class="flex items-center justify-between">
+      <label class="flex items-center">
+        <input
+          type="checkbox"
+          formControlName="rememberMe"
+          class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+        <span class="ml-2 rtl:mr-2 text-sm text-gray-600">{{ 'auth.login.rememberMe' | translate }}</span>
+      </label>
+      <a routerLink="/auth/forgot-password" class="text-sm text-primary-600 hover:text-primary-700">
+        {{ 'auth.login.forgotPassword' | translate }}
+      </a>
+    </div>
+
+    <!-- Submit Button -->
+    <app-button
+      type="submit"
+      [fullWidth]="true"
+      [loading]="isLoading"
+      [disabled]="loginForm.invalid">
+      {{ (isLoading ? 'auth.login.signing' : 'auth.login.submit') | translate }}
+    </app-button>
+
+    <!-- Error Message -->
+    @if (errorMessage) {
+      <div class="p-3 bg-danger-100 border border-danger-300 text-danger-700 rounded-lg text-sm">
+        {{ errorMessage }}
+      </div>
+    }
+  </form>
+
+  <!-- Sign Up Link -->
+  <div class="text-center pt-4 border-t border-gray-200">
+    <p class="text-sm text-gray-600">
+      {{ 'auth.login.noAccount' | translate }}
+      <a routerLink="/auth/register" class="text-primary-600 hover:text-primary-700 font-medium">
+        {{ 'auth.login.createAccount' | translate }}
+      </a>
+    </p>
+  </div>
+</div>
+`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/login/login.component.ts'),
+    loginComponentTs
+  );
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/login/login.component.html'),
+    loginComponentHtml
+  );
+}
+
+async function createRegisterComponent(config) {
+  const registerComponentTs = `import { Component, inject } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './register.component.html'
+})
+export class RegisterComponent {
+  private fb = inject(FormBuilder);
+  registerForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: ['', Validators.required],
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(6)]]
+  });
+  onSubmit() { /* Implementation */ }
+}`;
+
+  const registerComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.register.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.register.subtitle' | translate }}</p>
+  </div>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
+    <div class="grid grid-cols-2 gap-4">
+      <input
+        type="text"
+        formControlName="firstName"
+        autocomplete="given-name"
+        [placeholder]="'auth.register.firstName' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+      <input
+        type="text"
+        formControlName="lastName"
+        autocomplete="family-name"
+        [placeholder]="'auth.register.lastName' | translate"
+        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+    </div>
+    <input
+      type="email"
+      formControlName="email"
+      autocomplete="email"
+      [placeholder]="'auth.register.email' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+    <input
+      type="password"
+      formControlName="password"
+      autocomplete="new-password"
+      [placeholder]="'auth.register.password' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+    <app-button type="submit" [fullWidth]="true" [disabled]="registerForm.invalid">
+      {{ 'auth.register.submit' | translate }}
+    </app-button>
+    <div class="text-center">
+      <a routerLink="/auth/login" class="text-primary-600 hover:text-primary-700">
+        {{ 'auth.register.hasAccount' | translate }}
+      </a>
+    </div>
+  </form>
+</div>
+`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/register/register.component.ts'),
+    registerComponentTs
+  );
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/register/register.component.html'),
+    registerComponentHtml
+  );
+}
+
+async function createForgotPasswordComponent(config) {
+  const forgotPasswordComponentTs = `import { Component, inject } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [ReactiveFormsModule, RouterModule, TranslateModule, ButtonComponent],
+  templateUrl: './forgot-password.component.html'
+})
+export class ForgotPasswordComponent {
+  private fb = inject(FormBuilder);
+  forgotForm = this.fb.group({ email: ['', [Validators.required, Validators.email]] });
+  onSubmit() { /* Implementation */ }
+}`;
+
+  const forgotPasswordComponentHtml = `<div class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-bold text-gray-900">{{ 'auth.forgot.title' | translate }}</h2>
+    <p class="text-gray-600 mt-2">{{ 'auth.forgot.subtitle' | translate }}</p>
+  </div>
+  <form [formGroup]="forgotForm" (ngSubmit)="onSubmit()" class="space-y-4">
+    <input
+      type="email"
+      formControlName="email"
+      autocomplete="email"
+      [placeholder]="'auth.forgot.email' | translate"
+      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+    <app-button type="submit" [fullWidth]="true" [disabled]="forgotForm.invalid">
+      {{ 'auth.forgot.submit' | translate }}
+    </app-button>
+    <div class="text-center">
+      <a routerLink="/auth/login" class="text-primary-600 hover:text-primary-700">
+        {{ 'auth.forgot.backToLogin' | translate }}
+      </a>
+    </div>
+  </form>
+</div>
+`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/forgot-password/forgot-password.component.ts'),
+    forgotPasswordComponentTs
+  );
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/features/auth/forgot-password/forgot-password.component.html'),
+    forgotPasswordComponentHtml
+  );
+}
+
+module.exports = {
+  createLayout,
+  createAuthLayout,
+};