feat: enhance application structure and improve accessibility

- Refactor various components for better readability and maintainability.
- Update HTML templates to include `alt` attributes for images and `for` attributes for labels.
- Implement reactive forms in OTP component and improve token management in AuthService.
- Adjust routing to redirect to 'admin/about' by default.
- Remove deprecated interceptor implementation and streamline authentication logic.
- Add console logs for better debugging during initialization.

src/app/admin/projects/projects.html

@@ -14,13 +14,15 @@
 
             @for (category of model.projectsCategories; track category) {
             <li class="filter-item">
-                <button (click)="filterProjects(category)" [ngClass]="{active: filter === category}">{{category}}</button>
+                <button (click)="filterProjects(category)"
+                    [ngClass]="{active: filter === category}">{{category}}</button>
             </li>
             }
 
         </ul>
 
-        <div class="filter-select-box" (click)="categoryClicked = !categoryClicked">
+        <div class="filter-select-box" (click)="categoryClicked = !categoryClicked" tabindex="0"
+            (keyup.enter)="categoryClicked = !categoryClicked">
 
             <button class="filter-select" [ngClass]="{active: categoryClicked}">
 
@@ -58,7 +60,7 @@
                 <ion-icon name="eye-outline"></ion-icon>
               </div> -->
 
-                        <img src="{{imagesOrigin + project.imagePath}}" loading="lazy">
+                        <img src="{{imagesOrigin + project.imagePath}}" alt="{{project.name}}" loading="lazy">
                     </figure>
 
                     <h3 class="project-title">{{project.name}}</h3>

src/app/admin/resume/resume.html

@@ -20,7 +20,7 @@
 
             <li class="timeline-item">
 
-                <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization != null ? " - "
+                <h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization !== null ? " - "
                     + education.degreeSpecialization : ""}}</h4>
 
                 <span>{{education.period}}</span>

src/app/admin/resume/resume.ts

@@ -1,5 +1,5 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { CommonModule, isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { BaseComponent } from '../base.component';
 import { IResume } from './resume.model';
 import { AdminService } from '../services/admin.service';
@@ -11,6 +11,8 @@ import { AdminService } from '../services/admin.service';
   imports: [CommonModule]
 })
 export class Resume extends BaseComponent<IResume> implements OnInit {
+  platformId = inject(PLATFORM_ID);
+
   constructor() {
     const svc = inject(AdminService);
     super(svc);
@@ -19,6 +21,8 @@ export class Resume extends BaseComponent<IResume> implements OnInit {
 
   ngOnInit(): void {
     console.log("Resume component initialized");
+    console.log("Server:", isPlatformServer(this.platformId));
+    console.log("Browser:", isPlatformBrowser(this.platformId));
     if(!this.isDataLoading()) {
       this.isDataLoading.set(true);
       this.getResume();

src/app/admin/services/admin.service.ts

@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { IAbout } from '../about/about.model';
 import { ICv } from '../models/cv.model';
 import { IContactModel } from '../contact/contact.model';
 import { IResume } from '../resume/resume.model';
 import { IProjects } from '../projects/projects.model';
 import { HttpClient } from '@angular/common/http';
-import { Observable, of, Subject } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { environment } from '../../../environments/environment';
 
 @Injectable({
@@ -19,8 +19,7 @@ export class AdminService {
   public candidateAndSocialLinks!: IContactModel;
   public resume!: IResume;
   public projects!: IProjects;
-
-  constructor(private http: HttpClient) { }
+  private http: HttpClient = inject(HttpClient);
 
   private api(path: string) {
     return `${this.baseUrl}${path.startsWith('/') ? '' : '/'}${path}`;

src/app/app.config.ts

@@ -1,18 +1,16 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { provideHttpClient, withFetch, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
-import { httpInterceptorProviders } from './interceptors';
+import { provideHttpClient, withFetch, withInterceptors} from '@angular/common/http';
 import { loadingInterceptor } from './interceptors/loading-interceptor';
+import { AuthInterceptor } from './interceptors/auth-interceptor';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
-    provideHttpClient(withInterceptorsFromDi(), withInterceptors([loadingInterceptor]), withFetch()),
-    httpInterceptorProviders,
+    provideHttpClient(withInterceptors([loadingInterceptor, AuthInterceptor]), withFetch()),
     provideRouter(routes), provideClientHydration(withEventReplay())
   ]
 };

src/app/app.routes.ts

@@ -16,7 +16,7 @@ const enum AdminRouteTitles {
 export const routes: Routes = [
     {
         path: '',
-        redirectTo: 'admin',
+        redirectTo: 'admin/about',
         pathMatch: 'full'
     },
     {
@@ -24,11 +24,6 @@ export const routes: Routes = [
         component: AdminLayout,
         title: 'Admin',
         children: [
-            {
-                path: '',
-                redirectTo: 'about',   // ✔ correct relative redirect
-                pathMatch: 'full'
-            },
             {
                 path: 'login',
                 component: OtpComponent,

src/app/app.ts

@@ -13,4 +13,7 @@ import { RouterModule } from "@angular/router";
 export class App {
   loader = inject(LoaderService);
   protected readonly title = signal('portfolio-admin');
+  constructor(){
+    console.log('🎯 AppComponent initialized', { time: Date.now() });
+  }
 }

src/app/auth/auth-module.ts

@@ -1,23 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { OtpComponent } from './otp/otp.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { AuthInterceptor } from '../interceptors/auth-interceptor';
 
 
 
 @NgModule({
-  declarations: [
-    OtpComponent
-  ],
   imports: [
     CommonModule,
     BrowserModule,
-    ReactiveFormsModule
-  ],
-  providers:[
-    AuthInterceptor
   ]
 })
 export class AuthModule { }

src/app/auth/auth.service.ts

@@ -20,41 +20,50 @@ export class AuthService {
   private readonly baseUrl = (environment.apiUrl ?? '').replace(/\/+$/, '');
   private accessToken: string | null = null;
   private platformId = inject(PLATFORM_ID);
-  private accessTokenSub = new BehaviorSubject<string | null>(null);
-  tokenReady$ = new BehaviorSubject<boolean>(false);
+  public accessTokenSub = new BehaviorSubject<string | null>(null);
   http = inject(HttpClient);
   router = inject(Router);
 
   private readonly storageKey = 'accessToken';
 
+  constructor() {
+    console.log('🔥 AuthService constructor started');
+    this.accessToken = this.safeGetToken();
+    console.log('🔥 AuthService constructor finished', { accessToken: !!this.accessToken });
+  }
+
   private api(path: string) {
     return `${this.baseUrl}${path.startsWith('/') ? '' : '/'}${path}`;
   }
 
-  // Call on app start, or from guard
-  async ensureTokenReady(): Promise<void>{
-    if(this.tokenReady$.value) return;
+  // // Call on app start, or from guard
+  // async ensureTokenReady(): Promise<void>{
+  //   if(this.tokenReady$.value) return;
 
-    const stored = this.safeGetToken();
+  //   const stored = this.safeGetToken();
 
-    // try to restore from storage
-    if(stored){
-      this.accessTokenSub.next(stored);
-      this.tokenReady$.next(true);
-      return;
-    }
-
-    // // Optionally: try a silent refresh on startup to restore session using HttpOnly cookie
-    // try {
-    //   const res = await firstValueFrom(this.refreshToken());
-    //   this.safeSetToken(res.accessToken);
-    // }
-    // catch{
-    //   console.warn('Silent token refresh failed on startup');
-    // }
-    // finally{
+  //   // try to restore from storage
+  //   if(stored){
+  //     this.accessTokenSub.next(stored);
   //     this.tokenReady$.next(true);
+  //     return;
   //   }
+
+  //   // // Optionally: try a silent refresh on startup to restore session using HttpOnly cookie
+  //   // try {
+  //   //   const res = await firstValueFrom(this.refreshToken());
+  //   //   this.safeSetToken(res.accessToken);
+  //   // }
+  //   // catch{
+  //   //   console.warn('Silent token refresh failed on startup');
+  //   // }
+  //   // finally{
+  //   //   this.tokenReady$.next(true);
+  //   // }
+  // }
+
+  get currentToken(): string | null {
+    return this.safeGetToken();
   }
 
   safeSetToken(token: string) {
@@ -62,12 +71,19 @@ export class AuthService {
 
     if (isPlatformBrowser(this.platformId)) {
       localStorage.setItem(this.storageKey, token);
+      this.accessTokenSub.next(token);
     }
   }
 
   private safeGetToken(): string | null {
+    try {
       if (isPlatformBrowser(this.platformId)) {
-      return localStorage.getItem(this.storageKey);
+        const token = localStorage.getItem(this.storageKey);
+        this.accessTokenSub.next(token);
+        return token;
+      }
+    } catch (e) {
+      console.warn('Failed to read from localStorage:', e);
     }
     return null;
   }
@@ -77,6 +93,7 @@ export class AuthService {
 
     if (isPlatformBrowser(this.platformId)) {
       localStorage.removeItem(this.storageKey);
+      this.accessTokenSub.next(null);
     }
   }
 
@@ -100,7 +117,7 @@ export class AuthService {
   }
 
   getAccessToken(): string | null {
-    return this.accessToken ?? this.safeGetToken();
+    return this.accessToken;
   }
 
   logout(): Observable<void> {

src/app/auth/otp/otp.component.html

@@ -6,8 +6,8 @@
         <!-- Step 1: Enter Email -->
         @if (!isOtpSent()) {
         <form [formGroup]="emailForm" (ngSubmit)="sendOtp()" class="form-section">
-            <label>Email Address</label>
-            <input type="email" formControlName="email" placeholder="Enter your email" />
+            <label for="email">Email Address</label>
+            <input id="email" type="email" formControlName="email" placeholder="Enter your email" />
             <button type="submit" [disabled]="emailForm.invalid">Send OTP</button>
         </form>
         }
@@ -20,8 +20,8 @@
             </p>
 
             <form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
-                <label>Enter 6-digit OTP</label>
-                <input type="text" maxlength="6" formControlName="otp" placeholder="123456" />
+                <label for="otp">Enter 6-digit OTP</label>
+                <input id="otp" type="text" maxlength="6" formControlName="otp" placeholder="123456" />
                 <button type="submit" [disabled]="otpForm.invalid">
                     Verify OTP
                 </button>

src/app/auth/otp/otp.component.ts

@@ -1,12 +1,14 @@
 import { Component, inject, OnInit, signal } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { AuthService } from '../auth.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-otp',
   templateUrl: './otp.component.html',
-  styleUrls: ['./otp.component.scss']
+  styleUrls: ['./otp.component.scss'],
+  imports: [ReactiveFormsModule, CommonModule]
 })
 export class OtpComponent implements OnInit {
   emailForm: FormGroup;

src/app/guards/auth-guard.ts

@@ -2,19 +2,11 @@ import { inject } from '@angular/core';
 import { CanActivateFn, Router } from '@angular/router';
 import { AuthService } from '../auth/auth.service';
 
-export const authGuard: CanActivateFn = async (route, state) => {
+export const authGuard: CanActivateFn = (route, state) => {
   const auth = inject(AuthService);
   const router = inject(Router);
 
-  await auth.ensureTokenReady();
-
-  // No token → not logged in
-  if (!auth.isLoggedIn()) {
-    router.navigate(['admin/login'], {
-      queryParams: { returnUrl: state.url }
-    });
-    return false;
-  }
-
-  return true;
+  return auth.currentToken
+    ? true
+    : router.parseUrl(`/admin/login?returnUrl=${state.url}`);
 };

src/app/interceptors/auth-interceptor.ts

@@ -1,27 +1,25 @@
-import { inject, Injectable } from '@angular/core';
+import { inject } from '@angular/core';
 import {
   HttpRequest,
-  HttpHandler,
+  HttpHandlerFn,
   HttpEvent,
-  HttpInterceptor,
-  HttpErrorResponse
+  HttpErrorResponse,
+  HttpInterceptorFn
 } from '@angular/common/http';
 import { BehaviorSubject, catchError, filter, Observable, switchMap, take, throwError } from 'rxjs';
 import { AuthService } from '../auth/auth.service';
 
-@Injectable()
-export class AuthInterceptor implements HttpInterceptor {
-
-  private refreshInProgress = false;
-  private refreshSubject = new BehaviorSubject<string | null>(null);
-  authSvc: AuthService = inject(AuthService);
-
-  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+export const AuthInterceptor: HttpInterceptorFn = (
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
 
+  let refreshInProgress = false;
+  const refreshSubject = new BehaviorSubject<string | null>(null);
+  const authSvc: AuthService = inject(AuthService);
   let headers = req.headers;
-
       // add API key
-    const apiKey = this.authSvc.getApiKey();
+    const apiKey = authSvc.getApiKey();
     if (apiKey) {
       headers = headers.set('XApiKey', apiKey);
     }
@@ -35,7 +33,7 @@ export class AuthInterceptor implements HttpInterceptor {
     }
 
     // add access token
-    const token = this.authSvc.getAccessToken();
+    const token = authSvc.currentToken;
     if (token) {
       headers = headers.set('Authorization', `Bearer ${token}`);
     }
@@ -46,7 +44,7 @@ export class AuthInterceptor implements HttpInterceptor {
       withCredentials: true
     });
 
-    return next.handle(clonedRequest).pipe(
+    return next(clonedRequest).pipe(
       catchError((err: HttpErrorResponse) => {
 
         if (err.status !== 401) {
@@ -54,8 +52,8 @@ export class AuthInterceptor implements HttpInterceptor {
         }
 
         // if refresh is already in progress
-        if (this.refreshInProgress) {
-          return this.refreshSubject.pipe(
+        if (refreshInProgress) {
+          return refreshSubject.pipe(
             filter(t => t !== null),
             take(1),
             switchMap(newToken => {
@@ -65,41 +63,39 @@ export class AuthInterceptor implements HttpInterceptor {
                 withCredentials: true
               });
 
-              return next.handle(retryReq);
+              return next(retryReq);
             })
           );
         }
 
         // start refresh
-        this.refreshInProgress = true;
-        this.refreshSubject.next(null);
+        refreshInProgress = true;
+        refreshSubject.next(null);
 
-        return this.authSvc.refreshToken()!.pipe(
+        return authSvc.refreshToken()!.pipe(
           switchMap(res => {
 
-            this.refreshInProgress = false;
+            refreshInProgress = false;
             const newToken = res.accessToken;
-            this.authSvc.safeSetToken(newToken);
-
-            this.refreshSubject.next(newToken);
+            authSvc.safeSetToken(newToken);
 
+            refreshSubject.next(newToken);
             const retryReq = clonedRequest.clone({
               headers: clonedRequest.headers.set('Authorization', `Bearer ${newToken}`),
               withCredentials: true
             });
 
-            return next.handle(retryReq);
+            return next(retryReq);
           }),
 
           catchError(refreshErr => {
-            this.refreshInProgress = false;
-            this.refreshSubject.next(null);
+            refreshInProgress = false;
+            refreshSubject.next(null);
 
-            this.authSvc.logout();
+            authSvc.logout();
             return throwError(() => refreshErr);
           })
         );
       })
     );
-  }
-}
+};

src/app/interceptors/index.ts

@@ -1,7 +0,0 @@
-import { HTTP_INTERCEPTORS } from "@angular/common/http";
-import { AuthInterceptor } from "./auth-interceptor";
-
-
-export const httpInterceptorProviders = [
-    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
-]

src/app/layout/admin-layout/admin-layout.html

@@ -1,10 +1,11 @@
 <main>
-    @if(isLoggedIn()){
+    @if(loggedIn()){
         <app-contact></app-contact>
     }
+
     <div class="main-content">
 
-        @if(isLoggedIn()){
+        @if(loggedIn()){
         <nav class="navbar">
             <ul class="navbar-list">
                 <li class="navbar-item">

src/app/layout/admin-layout/admin-layout.ts

@@ -10,12 +10,12 @@ import { AuthService } from '../../auth/auth.service';
 })
 export class AdminLayout {
   authSvc = inject(AuthService);
-  isLoggedIn = signal(false);
+  loggedIn = signal(false);
+
   constructor() {
-    this.authSvc.tokenReady$.subscribe(ready => {
-      if (ready) {
-        this.isLoggedIn.set(!!this.authSvc.getAccessToken());
-      }
+    this.loggedIn.set(this.authSvc.currentToken !== null);
+    this.authSvc.accessTokenSub.subscribe(token => {
+      this.loggedIn.set(token !== null);
     });
     console.log("AdminLayout constructed");
   }

src/main.ts

@@ -2,5 +2,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
+console.log('🌍 bootstrapApplication called', { time: Date.now() });
+
 bootstrapApplication(App, appConfig)
   .catch((err) => console.error(err));