feat: Implement initial Angular frontend and NestJS backend project structure with authentication.

Author: beginwebdev2002

backend/src/main.ts

@@ -14,7 +14,15 @@ async function bootstrap() {
       transform: true,
     }),
   );
+  app.enableCors({
+    origin: '*',
+    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
+    credentials: true,
+    allowedHeaders: '*',
+    maxAge: 3600,
+  });
   const PORT = configService.get<number>('port') || 3000;
+
   await app.listen(PORT);
 }
 bootstrap();

frontend/angular.json

@@ -33,8 +33,8 @@
             "production": {
               "fileReplacements": [
                 {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "replace": "./src/environments/environment.ts",
+                  "with": "./src/environments/environment.prod.ts"
                 }
               ],
               "outputHashing": "all"
@@ -66,7 +66,7 @@
               "buildTarget": "mavluda-beauty:build:production"
             },
             "development": {
-              "buildTarget": "mavluda-beauty:build:production"
+              "buildTarget": "mavluda-beauty:build:development"
             },
             "en": {
               "buildTarget": "mavluda-beauty:build:production,en"

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "ng serve",
+    "dev": "ng serve --configuration=development",
     "build": "ng build",
     "preview": "ng serve --configuration=production"
   },

frontend/src/app/app.config.ts

@@ -1,14 +1,13 @@
 import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { routes } from '@src/app.routes';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { apiInterceptor } from './core/interceptors/api.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZonelessChangeDetection(),
     provideRouter(routes, withHashLocation()),
-    provideHttpClient(withFetch()),
-
+    provideHttpClient(withFetch(), withInterceptors([apiInterceptor])),
   ],
 };

frontend/src/app/core/interceptors/api.interceptor.ts

@@ -0,0 +1,12 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { environment } from '@environments/environment';
+
+export const apiInterceptor: HttpInterceptorFn = (req, next) => {
+  if (req.url.startsWith('/')) {
+    const apiReq = req.clone({
+      url: `${environment.apiUrl}${req.url}`
+    });
+    return next(apiReq);
+  }
+  return next(req);
+};

frontend/src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
-  apiUrl: 'https://api.yourdomain.com/api',
+  apiUrl: 'http://localhost:4100',
   telegramBotName: 'MavludaBeautyBot'
 };

frontend/src/environments/environment.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:3000/api',
+  apiUrl: 'http://localhost:4100',
   telegramBotName: 'test_bot'
 };

frontend/src/pages/auth/auth.component.html

@@ -3,8 +3,8 @@ import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/cor
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { AuthService } from '@shared/services/auth.service';
-import { LanguageSwitcherComponent } from '@features/language-selection/language-switcher.component';
+import { AuthService } from '../../shared/services/auth.service';
+import { LanguageSwitcherComponent } from '../../features/language-selection/language-switcher.component';
 
 @Component({
   selector: 'app-auth',
@@ -25,15 +25,56 @@ export class AuthComponent {
   isLoading = signal(false);
   showPassword = signal(false);
   isDarkMode = signal(this.document.documentElement.classList.contains('dark'));
+  
+  // 'signin' or 'signup' mode
+  authMode = signal<'signin' | 'signup'>('signin');
 
   loginForm = this.fb.group({
+    firstName: [''],
+    lastName: [''],
+    phone: [''],
     email: ['admin@mavluda.beauty', [Validators.required, Validators.email]],
     password: ['password123', [Validators.required, Validators.minLength(6)]],
     rememberMe: [false]
   });
 
-  setRole(role: 'admin' | 'client') {
-    this.authService.currentUserRole.set(role);
+  setAuthMode(mode: 'signin' | 'signup') {
+    this.authMode.set(mode);
+    const firstNameControl = this.loginForm.get('firstName');
+    const lastNameControl = this.loginForm.get('lastName');
+    const phoneControl = this.loginForm.get('phone');
+
+    if (mode === 'signup') {
+      firstNameControl?.setValidators([Validators.required]);
+      lastNameControl?.setValidators([Validators.required]);
+      phoneControl?.setValidators([Validators.required]);
+
+      // Clear defaults for signup
+      if (this.loginForm.get('email')?.value === 'admin@mavluda.beauty') {
+        this.loginForm.patchValue({
+          firstName: '',
+          lastName: '',
+          phone: '',
+          email: '',
+          password: ''
+        });
+      }
+    } else {
+      firstNameControl?.clearValidators();
+      lastNameControl?.clearValidators();
+      phoneControl?.clearValidators();
+
+      // Restore default admin credentials for demo convenience if empty
+      if (!this.loginForm.get('email')?.value) {
+        this.loginForm.patchValue({
+          email: 'admin@mavluda.beauty',
+          password: 'password123'
+        });
+      }
+    }
+    firstNameControl?.updateValueAndValidity();
+    lastNameControl?.updateValueAndValidity();
+    phoneControl?.updateValueAndValidity();
   }
 
   togglePassword() {
@@ -54,6 +95,15 @@ export class AuthComponent {
   onSubmit() {
     if (this.loginForm.valid) {
       this.isLoading.set(true);
+      
+      // Auto-determine role based on email credential for MVP demo
+      const email = this.loginForm.get('email')?.value || '';
+      if (email.includes('admin')) {
+          this.authService.currentUserRole.set('admin');
+      } else {
+          this.authService.currentUserRole.set('client');
+      }
+
       // Simulate API call
       setTimeout(() => {
         this.isLoading.set(false);

frontend/src/pages/auth/auth.component.ts

@@ -1,7 +1,9 @@
 
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, OnInit } from '@angular/core';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { API_ENDPOINTS } from '@shared/api/api-endpoints';
 
 @Component({
   selector: 'app-user-home',
@@ -11,6 +13,12 @@ import { RouterLink } from '@angular/router';
   templateUrl: './user-home.component.html',
   styleUrls: ['./user-home.component.scss']
 })
-export class UserHomeComponent {
-  // Component logic can be added here if needed in the future.
+export class UserHomeComponent implements OnInit {
+  http = inject(HttpClient);
+
+  ngOnInit(): void {
+    this.http.get(API_ENDPOINTS.AdminSettings).subscribe((res) => {
+      console.log(res);
+    });
+  }
 }