+
+## ⚙ Requisitos previos
+
+- Node.js ([^16.14.0 || ^18.10.0](https://angular.io/guide/versions)): Angular Boilerplate
-
- Lightweight & minimalistic Angular starter
-
-
- https://angularboilerplate.vercel.app
Angular Boilerplate
+
+
+ Live site (Demo)
-
- Contributing Guidelines
- ·
- Submit an Issue
-
+ English |
+ Español
-
+-
+ -
+ -
+ -
+ -
+-
+ -
+
+## ⚙ Prerequisites
+
+- Node.js ([^16.14.0 || ^18.10.0](https://angular.io/guide/versions)):
-
+
-
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 7cd488c94..0642fdfcc 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -2,15 +2,15 @@ import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [AppComponent],
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppComponent],
+ }).compileComponents();
+ });
- it('should create the app', () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.componentInstance;
- expect(app).toBeTruthy();
- });
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index aef0bce2f..bd52470cd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,26 +1,22 @@
import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthService } from '@lib/services';
import { ThemeService } from '@lib/services/theme';
-import { Observable } from 'rxjs';
import { LayoutHorizontalComponent } from './lib/components/layouts/layout-horizontal/layout-horizontal.component';
@Component({
- selector: 'app-root',
- standalone: true,
- imports: [CommonModule, RouterModule, LayoutHorizontalComponent],
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
+ selector: 'app-root',
+ standalone: true,
+ imports: [CommonModule, RouterModule, LayoutHorizontalComponent],
+ templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
- isLoggedIn$!: Observable;
+ isAuthenticated$ = inject(AuthService).isAuthenticated$;
- constructor(private _authService: AuthService, private _themeService: ThemeService) {}
+ private readonly _themeService = inject(ThemeService);
- ngOnInit(): void {
- this.isLoggedIn$ = this._authService.isLoggedIn$;
-
- this._themeService.init();
- }
+ ngOnInit(): void {
+ this._themeService.init();
+ }
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
new file mode 100644
index 000000000..15e307853
--- /dev/null
+++ b/src/app/app.config.ts
@@ -0,0 +1,12 @@
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { jwtInterceptor, serverErrorInterceptor } from '@lib/interceptors';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideRouter(routes, withComponentInputBinding()),
+ provideHttpClient(withInterceptors([serverErrorInterceptor, jwtInterceptor])),
+ ],
+};
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 2bfac87b5..34fadb39d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,34 +1,29 @@
import { Routes } from '@angular/router';
-import { AuthGuard, NoAuthGuard } from '@lib/guards';
+import { authGuard } from '@lib/guards';
export const routes: Routes = [
- {
- path: '',
- redirectTo: 'home',
- pathMatch: 'full',
- },
- {
- path: 'auth',
- loadChildren: async () => (await import('@pages/auth/auth.routes')).ROUTES,
- canLoad: [NoAuthGuard],
- },
- {
- path: 'home',
- loadChildren: async () => (await import('@pages/home/home.routes')).ROUTES,
- canLoad: [AuthGuard],
- },
- {
- path: ':username',
- loadChildren: async () => (await import('@pages/profile/profile.routes')).ROUTES,
- canLoad: [AuthGuard],
- },
- {
- path: 'settings',
- loadChildren: async () => (await import('@pages/settings/settings.routes')).ROUTES,
- canLoad: [AuthGuard],
- },
- {
- path: '**',
- loadComponent: async () => (await import('@pages/screens/not-found/not-found.page')).NotFoundPage,
- },
+ {
+ path: 'auth',
+ loadChildren: async () => (await import('@pages/auth')).routes,
+ canMatch: [authGuard({ requiresAuthentication: false })],
+ },
+ {
+ path: '',
+ loadChildren: async () => (await import('@pages/home')).routes,
+ canMatch: [authGuard()],
+ },
+ {
+ path: 'users/:username',
+ loadChildren: async () => (await import('@pages/user')).routes,
+ canMatch: [authGuard()],
+ },
+ {
+ path: 'settings',
+ loadChildren: async () => (await import('@pages/settings')).routes,
+ canMatch: [authGuard()],
+ },
+ {
+ path: '**',
+ loadComponent: async () => (await import('@pages/screens/not-found/not-found.component')).NotFoundComponent,
+ },
];
diff --git a/src/app/lib/components/footer/footer.component.css b/src/app/lib/components/footer/footer.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/lib/components/footer/footer.component.html b/src/app/lib/components/footer/footer.component.html
index fa57ed6b1..399f58aed 100644
--- a/src/app/lib/components/footer/footer.component.html
+++ b/src/app/lib/components/footer/footer.component.html
@@ -1,21 +1,28 @@
diff --git a/src/app/lib/components/footer/footer.component.spec.ts b/src/app/lib/components/footer/footer.component.spec.ts
index e90970504..c6895e2e6 100644
--- a/src/app/lib/components/footer/footer.component.spec.ts
+++ b/src/app/lib/components/footer/footer.component.spec.ts
@@ -4,22 +4,22 @@ import { RouterTestingModule } from '@angular/router/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
- let component: FooterComponent;
- let fixture: ComponentFixture;
+ let component: FooterComponent;
+ let fixture: ComponentFixture;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [FooterComponent, RouterTestingModule],
- }).compileComponents();
- });
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [FooterComponent, RouterTestingModule],
+ }).compileComponents();
+ });
- beforeEach(() => {
- fixture = TestBed.createComponent(FooterComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/lib/components/footer/footer.component.ts b/src/app/lib/components/footer/footer.component.ts
index 150bb7897..340cbeb5d 100644
--- a/src/app/lib/components/footer/footer.component.ts
+++ b/src/app/lib/components/footer/footer.component.ts
@@ -1,18 +1,18 @@
import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { REPOSITORY_URL } from '@lib/constants';
+import { PACKAGE_JSON, providePackageJson } from '@lib/providers';
import { LogoComponent } from '../logo/logo.component';
@Component({
- selector: 'app-footer',
- standalone: true,
- imports: [CommonModule, RouterModule, LogoComponent],
- templateUrl: './footer.component.html',
- styleUrls: ['./footer.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-footer',
+ standalone: true,
+ imports: [CommonModule, RouterModule, LogoComponent],
+ providers: [providePackageJson()],
+ templateUrl: './footer.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterComponent {
- readonly repositoryURL = REPOSITORY_URL;
- readonly currentYear = new Date().getFullYear();
+ readonly packageJson = inject(PACKAGE_JSON);
+ readonly currentYear = new Date().getFullYear();
}
diff --git a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.css b/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.css
deleted file mode 100644
index f099db0bb..000000000
--- a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.css
+++ /dev/null
@@ -1,24 +0,0 @@
-:host {
- display: grid;
- grid-template-columns: 1fr;
- grid-template-rows: var(--size-navbar-height) 1fr var(--size-footer-height);
- gap: 0;
- grid-template-areas:
- 'navbar'
- 'main'
- 'footer';
- height: 100vh;
-}
-
-app-navbar {
- grid-area: navbar;
- @apply w-full fixed top-0 left-0 right-0;
-}
-
-main {
- grid-area: main;
-}
-
-app-footer {
- grid-area: footer;
-}
diff --git a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.html b/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.html
index 4ee0f7556..f3751f487 100644
--- a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.html
+++ b/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.html
@@ -1,7 +1,7 @@
-
;
+ let component: LayoutHorizontalComponent;
+ let fixture: ComponentFixture;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [LayoutHorizontalComponent, RouterTestingModule],
- }).compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [LayoutHorizontalComponent, RouterTestingModule],
+ }).compileComponents();
- fixture = TestBed.createComponent(LayoutHorizontalComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(LayoutHorizontalComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.ts b/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.ts
index e838a4133..8f0811dcb 100644
--- a/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.ts
+++ b/src/app/lib/components/layouts/layout-horizontal/layout-horizontal.component.ts
@@ -3,11 +3,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FooterComponent, NavbarComponent } from '@lib/components';
@Component({
- selector: 'app-layout-horizontal',
- standalone: true,
- imports: [CommonModule, NavbarComponent, FooterComponent],
- templateUrl: './layout-horizontal.component.html',
- styleUrls: ['./layout-horizontal.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-layout-horizontal',
+ standalone: true,
+ imports: [CommonModule, NavbarComponent, FooterComponent],
+ templateUrl: './layout-horizontal.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LayoutHorizontalComponent {}
diff --git a/src/app/lib/components/logo/logo.component.css b/src/app/lib/components/logo/logo.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/lib/components/logo/logo.component.html b/src/app/lib/components/logo/logo.component.html
index 5a1c81bea..dd69c1910 100644
--- a/src/app/lib/components/logo/logo.component.html
+++ b/src/app/lib/components/logo/logo.component.html
@@ -1,6 +1,31 @@
-
-
- AB
- Angular Boilerplate
+
+
+
+ AB
+ Angular Boilerplate
diff --git a/src/app/lib/components/logo/logo.component.spec.ts b/src/app/lib/components/logo/logo.component.spec.ts
index f047edcaf..d6e0c21a3 100644
--- a/src/app/lib/components/logo/logo.component.spec.ts
+++ b/src/app/lib/components/logo/logo.component.spec.ts
@@ -3,20 +3,20 @@ import { RouterTestingModule } from '@angular/router/testing';
import { FooterComponent } from '../footer/footer.component';
describe('FooterComponent', () => {
- let component: FooterComponent;
- let fixture: ComponentFixture;
+ let component: FooterComponent;
+ let fixture: ComponentFixture;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [FooterComponent, RouterTestingModule],
- }).compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [FooterComponent, RouterTestingModule],
+ }).compileComponents();
- fixture = TestBed.createComponent(FooterComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(FooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/lib/components/logo/logo.component.ts b/src/app/lib/components/logo/logo.component.ts
index 772e44ca1..8c37cd573 100644
--- a/src/app/lib/components/logo/logo.component.ts
+++ b/src/app/lib/components/logo/logo.component.ts
@@ -3,11 +3,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
- selector: 'app-logo',
- standalone: true,
- imports: [CommonModule, RouterModule],
- templateUrl: './logo.component.html',
- styleUrls: ['./logo.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-logo',
+ standalone: true,
+ imports: [CommonModule, RouterModule],
+ templateUrl: './logo.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LogoComponent {}
diff --git a/src/app/lib/components/navbar/navbar.component.css b/src/app/lib/components/navbar/navbar.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/lib/components/navbar/navbar.component.html b/src/app/lib/components/navbar/navbar.component.html
index 0c8c28c40..6d0cd96c7 100644
--- a/src/app/lib/components/navbar/navbar.component.html
+++ b/src/app/lib/components/navbar/navbar.component.html
@@ -1,13 +1,31 @@
-
-
+
+
-
-
-
- Log out
-
-
-
+
+
+
+
+ Log out
+
+
+
diff --git a/src/app/lib/components/navbar/navbar.component.spec.ts b/src/app/lib/components/navbar/navbar.component.spec.ts
index bafeaaf6f..98d8a4bfd 100644
--- a/src/app/lib/components/navbar/navbar.component.spec.ts
+++ b/src/app/lib/components/navbar/navbar.component.spec.ts
@@ -4,20 +4,20 @@ import { RouterTestingModule } from '@angular/router/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
- let component: NavbarComponent;
- let fixture: ComponentFixture;
+ let component: NavbarComponent;
+ let fixture: ComponentFixture;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [NavbarComponent, RouterTestingModule],
- }).compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavbarComponent, RouterTestingModule],
+ }).compileComponents();
- fixture = TestBed.createComponent(NavbarComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
- it('should create', () => {
- expect(component).toBeTruthy();
- });
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
});
diff --git a/src/app/lib/components/navbar/navbar.component.ts b/src/app/lib/components/navbar/navbar.component.ts
index f64a1f632..8bc407f98 100644
--- a/src/app/lib/components/navbar/navbar.component.ts
+++ b/src/app/lib/components/navbar/navbar.component.ts
@@ -1,25 +1,22 @@
import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
-import { REPOSITORY_URL } from '@lib/constants';
import { AuthService } from '@lib/services';
import { LogoComponent } from '../logo/logo.component';
@Component({
- selector: 'app-navbar',
- standalone: true,
- imports: [CommonModule, RouterModule, LogoComponent],
- templateUrl: './navbar.component.html',
- styleUrls: ['./navbar.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ selector: 'app-navbar',
+ standalone: true,
+ imports: [CommonModule, RouterModule, LogoComponent],
+ templateUrl: './navbar.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavbarComponent {
- readonly repositoryURL = REPOSITORY_URL;
+ private readonly _router = inject(Router);
+ private readonly _authService = inject(AuthService);
- constructor(private _router: Router, private _authService: AuthService) {}
-
- onClickSignOut(): void {
- this._authService.logout();
- this._router.navigateByUrl('/auth/login');
- }
+ onClickSignOut(): void {
+ this._authService.logout();
+ this._router.navigate(['/auth/login']);
+ }
}
diff --git a/src/app/lib/enums/user-role.enum.ts b/src/app/lib/enums/user-role.enum.ts
index 0fdf1aac7..71e4ffdd0 100644
--- a/src/app/lib/enums/user-role.enum.ts
+++ b/src/app/lib/enums/user-role.enum.ts
@@ -1,5 +1,5 @@
export enum UserRole {
- Admin = 'ADMIN',
- User = 'USER',
- Guest = 'GUEST',
+ Admin = 'ADMIN',
+ User = 'USER',
+ Guest = 'GUEST',
}
diff --git a/src/app/lib/guards/auth.guard.spec.ts b/src/app/lib/guards/auth.guard.spec.ts
new file mode 100644
index 000000000..8793fefde
--- /dev/null
+++ b/src/app/lib/guards/auth.guard.spec.ts
@@ -0,0 +1,38 @@
+import { TestBed } from '@angular/core/testing';
+import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
+import { AuthService } from '@lib/services';
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+ let authService: AuthService;
+ let router: Router;
+ let canMatch: CanMatchFn;
+
+ beforeEach(() => {
+ authService = TestBed.inject(AuthService);
+ router = TestBed.inject(Router);
+ canMatch = authGuard();
+ });
+
+ it('should allow navigation to proceed when requiresAuthentication is true and the user is logged in', () => {
+ authService.isAuthenticated$.next(true);
+ expect(canMatch({} as Route, [] as UrlSegment[])).toBe(true);
+ });
+
+ it(`should block navigation and redirect to '/auth/login' when requiresAuthentication is true and the user is not logged in`, () => {
+ authService.isAuthenticated$.next(false);
+ expect(canMatch({} as Route, [] as UrlSegment[])).toEqual(router.createUrlTree(['/auth/login']));
+ });
+
+ it(`should block navigation and redirect to '/' when requiresAuthentication is false and the user is logged in`, () => {
+ authService.isAuthenticated$.next(true);
+ canMatch = authGuard({ requiresAuthentication: false });
+ expect(canMatch({} as Route, [] as UrlSegment[])).toEqual(router.createUrlTree(['/']));
+ });
+
+ it('should allow navigation to proceed when requiresAuthentication is false and the user is not logged in', () => {
+ authService.isAuthenticated$.next(false);
+ canMatch = authGuard({ requiresAuthentication: false });
+ expect(canMatch({} as Route, [] as UrlSegment[])).toBe(true);
+ });
+});
diff --git a/src/app/lib/guards/auth.guard.ts b/src/app/lib/guards/auth.guard.ts
index 4c54e0a30..bd74e1f1d 100644
--- a/src/app/lib/guards/auth.guard.ts
+++ b/src/app/lib/guards/auth.guard.ts
@@ -1,21 +1,60 @@
-import { Injectable } from '@angular/core';
-import { CanLoad, Route, Router, UrlSegment } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';
import { AuthService } from '@lib/services';
-@Injectable({
- providedIn: 'root',
-})
-export class AuthGuard implements CanLoad {
- constructor(private _router: Router, private _authService: AuthService) {}
+type AuthGuardOptions = {
+ requiresAuthentication: boolean;
+};
- canLoad(_: Route, segments: UrlSegment[]): boolean {
- const isLoggedIn = this._authService.isLoggedIn;
- if (isLoggedIn) {
- return true;
- }
+const defaultAuthGuardOptions = (): AuthGuardOptions => ({
+ requiresAuthentication: true,
+});
- const callbackURL = segments.map((s) => s.path).join('/');
- this._router.navigate(['/auth/login'], { queryParams: { callbackURL } });
- return false;
- }
-}
+/**
+ * Guard that allows or blocks the navigation based on the user's authentication status.
+ *
+ * @param options An optional object that configures the behavior of the guard.
+ * @param options.requiresAuthentication An optional boolean that specifies whether the guard should allow or block navigation based on the user's authentication status.
+ *
+ * @returns A function that acts as an Angular route guard.
+ *
+ * @example
+ * import { authGuard } from '@lib/guards';
+ *
+ * const routes: Routes = [
+ * {
+ * path: 'my-protected-component-path',
+ * loadComponent: async () => (await import('./path/to/my-protected-component')).MyProtectedComponent,
+ * canMatch: [authGuard()],
+ * },
+ * ];
+ *
+ * @example
+ * import { authGuard } from '@lib/guards';
+ *
+ * const routes: Routes = [
+ * {
+ * path: 'my-path-component',
+ * loadComponent: async () => (await import('./path/to/my-auth-component')).MyAuthComponent,
+ * canMatch: [authGuard({ requiresAuthentication: false })],
+ * },
+ * ];
+ */
+export const authGuard = (options: AuthGuardOptions = defaultAuthGuardOptions()): CanMatchFn => {
+ return (_: Route, segments: UrlSegment[]) => {
+ const router = inject(Router);
+ const authService = inject(AuthService);
+
+ if (options.requiresAuthentication === authService.isAuthenticated) {
+ return true;
+ }
+
+ return options.requiresAuthentication
+ ? router.createUrlTree(['/auth/login'], {
+ queryParams: {
+ returnUrl: segments.map((s) => s.path).join('/'),
+ },
+ })
+ : router.createUrlTree(['/']);
+ };
+};
diff --git a/src/app/lib/guards/index.ts b/src/app/lib/guards/index.ts
index e005d922b..b41e34a4c 100644
--- a/src/app/lib/guards/index.ts
+++ b/src/app/lib/guards/index.ts
@@ -1,2 +1 @@
-export { AuthGuard } from './auth.guard';
-export { NoAuthGuard } from './no-auth.guard';
+export * from './auth.guard';
diff --git a/src/app/lib/guards/no-auth.guard.ts b/src/app/lib/guards/no-auth.guard.ts
deleted file mode 100644
index b274f6033..000000000
--- a/src/app/lib/guards/no-auth.guard.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-import { CanLoad, Router } from '@angular/router';
-import { AuthService } from '@lib/services';
-
-@Injectable({
- providedIn: 'root',
-})
-export class NoAuthGuard implements CanLoad {
- constructor(private _router: Router, private _authService: AuthService) {}
-
- canLoad(): boolean {
- const isLoggedIn = this._authService.isLoggedIn;
- if (isLoggedIn) {
- this._router.navigateByUrl('/');
- return false;
- }
-
- return true;
- }
-}
diff --git a/src/app/lib/interceptors/index.ts b/src/app/lib/interceptors/index.ts
index b15b318ff..d66827de9 100644
--- a/src/app/lib/interceptors/index.ts
+++ b/src/app/lib/interceptors/index.ts
@@ -1,2 +1,2 @@
-export { JwtInterceptor } from './jwt.interceptor';
-export { ServerErrorInterceptor } from './server-error.interceptor';
+export * from './jwt.interceptor';
+export * from './server-error.interceptor';
diff --git a/src/app/lib/interceptors/jwt.interceptor.ts b/src/app/lib/interceptors/jwt.interceptor.ts
index 62daab109..672e898fa 100644
--- a/src/app/lib/interceptors/jwt.interceptor.ts
+++ b/src/app/lib/interceptors/jwt.interceptor.ts
@@ -1,31 +1,31 @@
-import {
- HttpEvent,
- HttpHandler,
- HttpInterceptor,
- HttpRequest,
-} from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
import { environment } from '@env/environment';
-import { Observable } from 'rxjs';
+import { AuthService } from '@lib/services';
-@Injectable()
-export class JwtInterceptor implements HttpInterceptor {
- intercept(
- request: HttpRequest,
- next: HttpHandler,
- ): Observable> {
- const isLoggedIn = true;
- const token = 'ABC';
- const isApiUrl = request.url.startsWith(environment.apiUrl);
+/**
+ * Interceptor that adds an Authorization header to requests that are authenticated and target the API URL.
+ *
+ * @param request The request object.
+ * @param next The next interceptor in the chain.
+ *
+ * @returns The next Observable.
+ */
+export const jwtInterceptor: HttpInterceptorFn = (request, next) => {
+ const authService = inject(AuthService);
- if (isLoggedIn && isApiUrl) {
- request = request.clone({
- setHeaders: {
- Authorization: `Bearer ${token}`,
- },
- });
+ const isRequestAuthorized = authService.isAuthenticated && request.url.startsWith(environment.apiUrl);
+
+ if (isRequestAuthorized) {
+ const clonedRequest = request.clone({
+ setHeaders: {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ Authorization: `Bearer ${'JWT TOKEN'}`,
+ },
+ });
+
+ return next(clonedRequest);
}
- return next.handle(request);
- }
-}
+ return next(request);
+};
diff --git a/src/app/lib/interceptors/server-error.interceptor.ts b/src/app/lib/interceptors/server-error.interceptor.ts
index 5f51a9215..2fa4ee757 100644
--- a/src/app/lib/interceptors/server-error.interceptor.ts
+++ b/src/app/lib/interceptors/server-error.interceptor.ts
@@ -1,30 +1,27 @@
-import {
- HttpErrorResponse,
- HttpEvent,
- HttpHandler,
- HttpInterceptor,
- HttpRequest,
-} from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { HttpErrorResponse, HttpInterceptorFn, HttpStatusCode } from '@angular/common/http';
+import { inject } from '@angular/core';
import { Router } from '@angular/router';
-import { Observable, throwError } from 'rxjs';
+import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
-@Injectable()
-export class ServerErrorInterceptor implements HttpInterceptor {
- constructor(private _router: Router) {}
+/**
+ * Interceptor that handles server errors.
+ *
+ * @param request The request object.
+ * @param next The next interceptor in the chain.
+ *
+ * @returns The next Observable.
+ */
+export const serverErrorInterceptor: HttpInterceptorFn = (request, next) => {
+ const router = inject(Router);
- intercept(request: HttpRequest, next: HttpHandler): Observable> {
- return next.handle(request).pipe(
- catchError((error: HttpErrorResponse) => {
- if ([401, 403].includes(error.status)) {
- this._router.navigateByUrl('/auth/login');
- return throwError(() => error);
- } else {
- console.error(error);
- return throwError(() => error);
- }
- }),
+ return next(request).pipe(
+ catchError((error: HttpErrorResponse) => {
+ if ([HttpStatusCode.Unauthorized, HttpStatusCode.Forbidden].includes(error.status)) {
+ router.navigateByUrl('/auth/login');
+ }
+
+ return throwError(() => error);
+ }),
);
- }
-}
+};
diff --git a/src/app/lib/interfaces/user.interface.ts b/src/app/lib/interfaces/user.interface.ts
index d346d2c2f..1b42e77a0 100644
--- a/src/app/lib/interfaces/user.interface.ts
+++ b/src/app/lib/interfaces/user.interface.ts
@@ -1,5 +1,5 @@
export interface User {
- username: string;
- email: string;
- role: string;
+ username: string;
+ email: string;
+ role: string;
}
diff --git a/src/app/lib/providers/index.ts b/src/app/lib/providers/index.ts
new file mode 100644
index 000000000..add04650a
--- /dev/null
+++ b/src/app/lib/providers/index.ts
@@ -0,0 +1 @@
+export * from './package-json.token';
diff --git a/src/app/lib/providers/package-json.token.ts b/src/app/lib/providers/package-json.token.ts
new file mode 100644
index 000000000..562101768
--- /dev/null
+++ b/src/app/lib/providers/package-json.token.ts
@@ -0,0 +1,15 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { name, version } from '../../../../package.json';
+
+type PackageJson = {
+ name: string;
+ version: string;
+};
+
+export const PACKAGE_JSON = new InjectionToken('PACKAGE_JSON');
+
+export const providePackageJson = (): Provider => ({
+ provide: PACKAGE_JSON,
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ useValue: { name, version } as PackageJson,
+});
diff --git a/src/app/lib/services/auth/auth.service.spec.ts b/src/app/lib/services/auth/auth.service.spec.ts
index 9798036fd..4bd6f8c8c 100644
--- a/src/app/lib/services/auth/auth.service.spec.ts
+++ b/src/app/lib/services/auth/auth.service.spec.ts
@@ -3,14 +3,14 @@ import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
describe('AuthService', () => {
- let service: AuthService;
+ let service: AuthService;
- beforeEach(() => {
- TestBed.configureTestingModule({ teardown: { destroyAfterEach: false } });
- service = TestBed.inject(AuthService);
- });
+ beforeEach(() => {
+ TestBed.configureTestingModule({ teardown: { destroyAfterEach: false } });
+ service = TestBed.inject(AuthService);
+ });
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
});
diff --git a/src/app/lib/services/auth/auth.service.ts b/src/app/lib/services/auth/auth.service.ts
index d2b40eefe..06d7b1156 100644
--- a/src/app/lib/services/auth/auth.service.ts
+++ b/src/app/lib/services/auth/auth.service.ts
@@ -3,22 +3,22 @@ import { storage } from '@lib/utils/storage/storage.utils';
import { BehaviorSubject } from 'rxjs';
@Injectable({
- providedIn: 'root',
+ providedIn: 'root',
})
export class AuthService {
- isLoggedIn$ = new BehaviorSubject(!!storage.getItem('App/session'));
+ isAuthenticated$ = new BehaviorSubject(!!storage.getItem('appSession'));
- get isLoggedIn(): boolean {
- return this.isLoggedIn$.getValue();
- }
+ get isAuthenticated(): boolean {
+ return this.isAuthenticated$.getValue();
+ }
- login(): void {
- storage.setItem('App/session', { user: 'some-user-id', token: 'abc' });
- this.isLoggedIn$.next(true);
- }
+ login(): void {
+ storage.setItem('appSession', { user: 'some-user-id', token: 'abc' });
+ this.isAuthenticated$.next(true);
+ }
- logout(): void {
- storage.removeItem('App/session');
- this.isLoggedIn$.next(false);
- }
+ logout(): void {
+ storage.removeItem('appSession');
+ this.isAuthenticated$.next(false);
+ }
}
diff --git a/src/app/lib/services/theme/theme.service.spec.ts b/src/app/lib/services/theme/theme.service.spec.ts
index d60a2b585..1888cfa7c 100644
--- a/src/app/lib/services/theme/theme.service.spec.ts
+++ b/src/app/lib/services/theme/theme.service.spec.ts
@@ -3,49 +3,49 @@ import { TestBed } from '@angular/core/testing';
import { ThemeService } from './theme.service';
describe('ThemeService', () => {
- let service: ThemeService;
- let document: Document;
-
- beforeEach(() => {
- TestBed.configureTestingModule({ teardown: { destroyAfterEach: false } });
- service = TestBed.inject(ThemeService);
- document = TestBed.inject(DOCUMENT);
- });
-
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-
- it('should set system theme as current theme', () => {
- service.setTheme('system');
- expect(service.currentTheme).toBe('system');
- });
-
- it('should set system theme as a document.body class', () => {
- service.setTheme('system');
- const bodyClasses = document.body.classList;
- expect(bodyClasses.contains(service.systemTheme)).toBeTruthy();
- });
-
- it('should set light theme as current theme', () => {
- service.setTheme('light');
- expect(service.currentTheme).toBe('light');
- });
-
- it('should set light theme as a document.body class', () => {
- service.setTheme('light');
- const bodyClasses = document.body.classList;
- expect(bodyClasses.contains('light')).toBeTruthy();
- });
-
- it('should set dark theme as current theme', () => {
- service.setTheme('dark');
- expect(service.currentTheme).toBe('dark');
- });
-
- it('should set dark theme as a document.body class', () => {
- service.setTheme('dark');
- const bodyClasses = document.body.classList;
- expect(bodyClasses.contains('dark')).toBeTruthy();
- });
+ let service: ThemeService;
+ let document: Document;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({ teardown: { destroyAfterEach: false } });
+ service = TestBed.inject(ThemeService);
+ document = TestBed.inject(DOCUMENT);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+
+ it('should set system theme as current theme', () => {
+ service.setTheme('system');
+ expect(service.currentTheme).toBe('system');
+ });
+
+ it('should set system theme as a document.body class', () => {
+ service.setTheme('system');
+ const bodyClasses = document.body.classList;
+ expect(bodyClasses.contains(service.systemTheme)).toBeTruthy();
+ });
+
+ it('should set light theme as current theme', () => {
+ service.setTheme('light');
+ expect(service.currentTheme).toBe('light');
+ });
+
+ it('should set light theme as a document.body class', () => {
+ service.setTheme('light');
+ const bodyClasses = document.body.classList;
+ expect(bodyClasses.contains('light')).toBeTruthy();
+ });
+
+ it('should set dark theme as current theme', () => {
+ service.setTheme('dark');
+ expect(service.currentTheme).toBe('dark');
+ });
+
+ it('should set dark theme as a document.body class', () => {
+ service.setTheme('dark');
+ const bodyClasses = document.body.classList;
+ expect(bodyClasses.contains('dark')).toBeTruthy();
+ });
});
diff --git a/src/app/lib/services/theme/theme.service.ts b/src/app/lib/services/theme/theme.service.ts
index cb5930fea..6e7173c59 100644
--- a/src/app/lib/services/theme/theme.service.ts
+++ b/src/app/lib/services/theme/theme.service.ts
@@ -1,93 +1,90 @@
import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, OnDestroy } from '@angular/core';
+import { Injectable, OnDestroy, inject } from '@angular/core';
import { DEFAULT_BASE_THEME } from '@lib/constants';
import { storage } from '@lib/utils';
-import { BehaviorSubject, fromEventPattern, Subject } from 'rxjs';
+import { BehaviorSubject, Subject, fromEventPattern } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AppTheme } from './theme.config';
@Injectable({
- providedIn: 'root',
+ providedIn: 'root',
})
export class ThemeService implements OnDestroy {
- //#region attributes
- currentTheme$ = new BehaviorSubject(this._storedTheme);
+ currentTheme$ = new BehaviorSubject(this._storedTheme);
- private _destroy$ = new Subject();
- private readonly _mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
- //#endregion
+ private readonly _document = inject(DOCUMENT);
- //#region accessors
- public get currentTheme(): AppTheme | null {
- return this.currentTheme$.getValue();
- }
+ private readonly _destroy$ = new Subject();
- public get systemTheme(): AppTheme {
- return this._mediaQuery.matches ? 'dark' : 'light';
- }
+ private readonly _mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
- private get _storedTheme(): AppTheme | null {
- return storage.getItem('App/theme');
- }
+ public get currentTheme(): AppTheme | null {
+ return this.currentTheme$.getValue();
+ }
- private set _storedTheme(theme: AppTheme | null) {
- storage.setItem('App/theme', theme as AppTheme);
- }
- //#endregion
+ public get systemTheme(): AppTheme {
+ return this._mediaQuery.matches ? 'dark' : 'light';
+ }
- constructor(@Inject(DOCUMENT) private _document: Document) {}
+ private get _storedTheme(): AppTheme | null {
+ return storage.getItem('appTheme');
+ }
- ngOnDestroy(): void {
- this._destroy$.complete();
- this._destroy$.unsubscribe();
- }
+ private set _storedTheme(theme: AppTheme | null) {
+ storage.setItem('appTheme', theme as AppTheme);
+ }
- init(): void {
- this.setTheme(this._storedTheme || DEFAULT_BASE_THEME);
- this._listenForMediaQueryChanges();
- }
+ ngOnDestroy(): void {
+ this._destroy$.complete();
+ this._destroy$.unsubscribe();
+ }
- /**
- * Manually changes theme in LocalStorage & HTML body
- *
- * @param theme new theme
- */
- setTheme(theme: AppTheme): void {
- this._clearThemes();
- this._storedTheme = theme;
+ init(): void {
+ this.setTheme(this._storedTheme || DEFAULT_BASE_THEME);
+ this._listenForMediaQueryChanges();
+ }
- let bodyClass = theme;
- this.currentTheme$.next(bodyClass);
+ /**
+ * Manually changes theme in LocalStorage & HTML body
+ *
+ * @param theme new theme
+ */
+ setTheme(theme: AppTheme): void {
+ this._clearThemes();
+ this._storedTheme = theme;
- if (theme === 'system') {
- bodyClass = this.systemTheme;
- }
- this._document.body.classList.add(bodyClass);
- }
+ let bodyClass = theme;
+ this.currentTheme$.next(bodyClass);
- /**
- * Handles system theme changes & applies theme automatically
- *
- */
- private _listenForMediaQueryChanges(): void {
- fromEventPattern(
- this._mediaQuery.addListener.bind(this._mediaQuery),
- this._mediaQuery.removeListener.bind(this._mediaQuery),
- )
- .pipe(takeUntil(this._destroy$))
- .subscribe(() => {
- // Only applies changes when the current theme is "system"
- if (this._storedTheme === 'system') {
- this.setTheme('system');
+ if (theme === 'system') {
+ bodyClass = this.systemTheme;
}
- });
- }
+ this._document.body.classList.add(bodyClass);
+ }
- /**
- * Clears all themes in ThemeList enum from the HTML element
- *
- */
- private _clearThemes(): void {
- this._document.body.classList.remove('system', 'light', 'dark');
- }
+ /**
+ * Handles system theme changes & applies theme automatically
+ *
+ */
+ private _listenForMediaQueryChanges(): void {
+ fromEventPattern(
+ this._mediaQuery.addListener.bind(this._mediaQuery),
+ this._mediaQuery.removeListener.bind(this._mediaQuery),
+ )
+ .pipe(takeUntil(this._destroy$))
+ .subscribe(() => {
+ // Only applies changes when the current theme is "system"
+ if (this._storedTheme === 'system') {
+ this.setTheme('system');
+ }
+ });
+ }
+
+ /**
+ * Clears all themes in ThemeList enum from the HTML element
+ *
+ */
+ private _clearThemes(): void {
+ this._document.body.classList.remove('system', 'light', 'dark');
+ }
}
diff --git a/src/app/lib/utils/storage/storage.types.ts b/src/app/lib/utils/storage/storage.types.ts
index de83a1e1c..6c1e6b28c 100644
--- a/src/app/lib/utils/storage/storage.types.ts
+++ b/src/app/lib/utils/storage/storage.types.ts
@@ -1,16 +1,16 @@
import { AppTheme } from '@lib/services/theme';
type StorageObjectMap = {
- 'App/session': {
- user: string;
- token: string;
- };
- 'App/theme': AppTheme;
+ appSession: {
+ user: string;
+ token: string;
+ };
+ appTheme: AppTheme;
};
-export type StorageObjectType = 'App/session' | 'App/theme';
+export type StorageObjectType = 'appSession' | 'appTheme';
export type StorageObjectData = {
- type: T;
- data: StorageObjectMap[T];
+ type: T;
+ data: StorageObjectMap[T];
};
diff --git a/src/app/lib/utils/storage/storage.utils.spec.ts b/src/app/lib/utils/storage/storage.utils.spec.ts
index dd7bc0cd8..2d1a64e7a 100644
--- a/src/app/lib/utils/storage/storage.utils.spec.ts
+++ b/src/app/lib/utils/storage/storage.utils.spec.ts
@@ -1,37 +1,37 @@
import { storage } from './storage.utils';
describe('StorageUtils', () => {
- it('should store & retrieve item from local & session storage', () => {
- // LocalStorage
- storage.setItem('App/theme', 'dark');
- expect(storage.getItem('App/theme')).toBe('dark');
+ it('should store & retrieve item from local & session storage', () => {
+ // LocalStorage
+ storage.setItem('App/theme', 'dark');
+ expect(storage.getItem('App/theme')).toBe('dark');
- // sessionStorage
- storage.setItem('App/theme', 'dark', { api: 'SessionStorage' });
- expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBe('dark');
- });
+ // sessionStorage
+ storage.setItem('App/theme', 'dark', { api: 'SessionStorage' });
+ expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBe('dark');
+ });
- it('should remove item from local & session storage', () => {
- // LocalStorage
- storage.setItem('App/theme', 'dark');
- expect(storage.getItem('App/theme')).toBe('dark');
- storage.removeItem('App/theme');
- expect(storage.getItem('App/theme')).toBeNull();
+ it('should remove item from local & session storage', () => {
+ // LocalStorage
+ storage.setItem('App/theme', 'dark');
+ expect(storage.getItem('App/theme')).toBe('dark');
+ storage.removeItem('App/theme');
+ expect(storage.getItem('App/theme')).toBeNull();
- // sessionStorage
- storage.setItem('App/theme', 'dark', { api: 'SessionStorage' });
- expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBe('dark');
- storage.removeItem('App/theme', { api: 'SessionStorage' });
- expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBeNull();
- });
+ // sessionStorage
+ storage.setItem('App/theme', 'dark', { api: 'SessionStorage' });
+ expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBe('dark');
+ storage.removeItem('App/theme', { api: 'SessionStorage' });
+ expect(storage.getItem('App/theme', { api: 'SessionStorage' })).toBeNull();
+ });
- it('should clear all items from local & session storage', () => {
- // LocalStorage
- storage.clear();
- expect(localStorage.length).toBe(0);
+ it('should clear all items from local & session storage', () => {
+ // LocalStorage
+ storage.clear();
+ expect(localStorage.length).toBe(0);
- // sessionStorage
- storage.clear({ api: 'SessionStorage' });
- expect(localStorage.length).toBe(0);
- });
+ // sessionStorage
+ storage.clear({ api: 'SessionStorage' });
+ expect(localStorage.length).toBe(0);
+ });
});
diff --git a/src/app/lib/utils/storage/storage.utils.ts b/src/app/lib/utils/storage/storage.utils.ts
index 8419470bd..9ed5b9259 100644
--- a/src/app/lib/utils/storage/storage.utils.ts
+++ b/src/app/lib/utils/storage/storage.utils.ts
@@ -1,48 +1,45 @@
import { StorageObjectData, StorageObjectType } from './storage.types';
type StorageOptions = {
- api?: 'LocalStorage' | 'SessionStorage';
+ api?: 'LocalStorage' | 'SessionStorage';
};
-function getStorageAPI(api: StorageOptions['api']): Storage {
- return api === 'SessionStorage' ? sessionStorage : localStorage;
+function getStorageApi(api: StorageOptions['api']): Storage {
+ return api === 'SessionStorage' ? sessionStorage : localStorage;
}
-function getItem(
- item: T,
- options?: StorageOptions,
-): StorageObjectData['data'] | null {
- const api = getStorageAPI(options?.api || 'LocalStorage');
- const data = api.getItem(item.toString());
- return data ? JSON.parse(data) : null;
+function getItem(item: T, options?: StorageOptions): StorageObjectData['data'] | null {
+ const api = getStorageApi(options?.api || 'LocalStorage');
+ const data = api.getItem(item.toString());
+ return data ? (JSON.parse(data) as StorageObjectData['data']) : null;
}
function setItem(
- itemName: T,
- data: StorageObjectData['data'],
- options?: StorageOptions,
+ itemName: T,
+ data: StorageObjectData['data'],
+ options?: StorageOptions,
): void {
- if (data === null || data === undefined) {
- return;
- }
+ if (data === null || data === undefined) {
+ return;
+ }
- const api = getStorageAPI(options?.api || 'LocalStorage');
- api.setItem(itemName, JSON.stringify(data));
+ const api = getStorageApi(options?.api || 'LocalStorage');
+ api.setItem(itemName, JSON.stringify(data));
}
function removeItem(item: T, options?: StorageOptions): void {
- const api = getStorageAPI(options?.api || 'LocalStorage');
- api.removeItem(item);
+ const api = getStorageApi(options?.api || 'LocalStorage');
+ api.removeItem(item);
}
function clear(options?: StorageOptions): void {
- const api = getStorageAPI(options?.api || 'LocalStorage');
- api.clear();
+ const api = getStorageApi(options?.api || 'LocalStorage');
+ api.clear();
}
export const storage = {
- getItem,
- setItem,
- removeItem,
- clear,
+ getItem,
+ setItem,
+ removeItem,
+ clear,
};
diff --git a/src/app/pages/auth/auth.routes.ts b/src/app/pages/auth/auth.routes.ts
deleted file mode 100644
index aab3664d9..000000000
--- a/src/app/pages/auth/auth.routes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Route } from '@angular/router';
-
-export const ROUTES: Route[] = [
- {
- path: 'login',
- title: 'Login',
- loadComponent: async () => (await import('./login/login.page')).LoginPage,
- },
- {
- path: 'register',
- title: 'Register',
- loadComponent: async () => (await import('./register/register.page')).RegisterPage,
- },
-];
diff --git a/src/app/pages/auth/index.ts b/src/app/pages/auth/index.ts
new file mode 100644
index 000000000..9ccb20094
--- /dev/null
+++ b/src/app/pages/auth/index.ts
@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: 'login',
+ title: 'Login',
+ loadComponent: async () => (await import('./login/login.component')).LoginComponent,
+ },
+ {
+ path: 'register',
+ title: 'Register',
+ loadComponent: async () => (await import('./register/register.component')).RegisterComponent,
+ },
+];
diff --git a/src/app/pages/auth/login/login.component.html b/src/app/pages/auth/login/login.component.html
new file mode 100644
index 000000000..865e11047
--- /dev/null
+++ b/src/app/pages/auth/login/login.component.html
@@ -0,0 +1,9 @@
+
+
You're not logged in!
+
+ Login
+
+
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [LoginComponent, RouterTestingModule],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(LoginComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/auth/login/login.component.ts b/src/app/pages/auth/login/login.component.ts
new file mode 100644
index 000000000..942a2466e
--- /dev/null
+++ b/src/app/pages/auth/login/login.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@lib/services';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './login.component.html',
+})
+export class LoginComponent {
+ @Input() returnUrl!: string;
+
+ private readonly _router = inject(Router);
+ private readonly _authService = inject(AuthService);
+
+ login(): void {
+ this._authService.login();
+
+ this._router.navigate([this.returnUrl ?? `/`]);
+ }
+}
diff --git a/src/app/pages/auth/login/login.page.css b/src/app/pages/auth/login/login.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/auth/login/login.page.html b/src/app/pages/auth/login/login.page.html
deleted file mode 100644
index 4b8eec023..000000000
--- a/src/app/pages/auth/login/login.page.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
You're not logged in!
-
- Sign in
-
-
;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [LoginPage, RouterTestingModule],
- }).compileComponents();
-
- fixture = TestBed.createComponent(LoginPage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/auth/login/login.page.ts b/src/app/pages/auth/login/login.page.ts
deleted file mode 100644
index bdef68285..000000000
--- a/src/app/pages/auth/login/login.page.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AuthService } from '@lib/services';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './login.page.html',
- styleUrls: ['./login.page.css'],
-})
-export class LoginPage {
- private _callbackURL: string;
-
- constructor(
- private _router: Router,
- private _activatedRoute: ActivatedRoute,
- private _authService: AuthService,
- ) {
- this._callbackURL = this._activatedRoute.snapshot.queryParamMap.get('callbackURL') || `/`;
- }
-
- onClickSignIn(): void {
- this._authService.login();
- this._router.navigate([this._callbackURL]);
- }
-}
diff --git a/src/app/pages/auth/register/register.page.html b/src/app/pages/auth/register/register.component.html
similarity index 100%
rename from src/app/pages/auth/register/register.page.html
rename to src/app/pages/auth/register/register.component.html
diff --git a/src/app/pages/auth/register/register.component.spec.ts b/src/app/pages/auth/register/register.component.spec.ts
new file mode 100644
index 000000000..bff242011
--- /dev/null
+++ b/src/app/pages/auth/register/register.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+ let component: RegisterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RegisterComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(RegisterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/auth/register/register.component.ts b/src/app/pages/auth/register/register.component.ts
new file mode 100644
index 000000000..490f9e55b
--- /dev/null
+++ b/src/app/pages/auth/register/register.component.ts
@@ -0,0 +1,9 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './register.component.html',
+})
+export class RegisterComponent {}
diff --git a/src/app/pages/auth/register/register.page.css b/src/app/pages/auth/register/register.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/auth/register/register.page.spec.ts b/src/app/pages/auth/register/register.page.spec.ts
deleted file mode 100644
index 2c253fa0d..000000000
--- a/src/app/pages/auth/register/register.page.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RegisterPage } from './register.page';
-
-describe('RegisterPage', () => {
- let component: RegisterPage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [RegisterPage],
- }).compileComponents();
-
- fixture = TestBed.createComponent(RegisterPage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/auth/register/register.page.ts b/src/app/pages/auth/register/register.page.ts
deleted file mode 100644
index 9f6e0f6fb..000000000
--- a/src/app/pages/auth/register/register.page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './register.page.html',
- styleUrls: ['./register.page.css'],
-})
-export class RegisterPage {}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
new file mode 100644
index 000000000..65263a1d9
--- /dev/null
+++ b/src/app/pages/home/home.component.html
@@ -0,0 +1,95 @@
+
+ Home
+
+ Choose your theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts
new file mode 100644
index 000000000..b8620992b
--- /dev/null
+++ b/src/app/pages/home/home.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [HomeComponent, RouterTestingModule],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
new file mode 100644
index 000000000..fb9179066
--- /dev/null
+++ b/src/app/pages/home/home.component.ts
@@ -0,0 +1,33 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AppTheme, ThemeService } from '@lib/services/theme';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule, RouterModule],
+ templateUrl: './home.component.html',
+})
+export class HomeComponent implements OnInit, OnDestroy {
+ currentTheme!: AppTheme | null;
+
+ private readonly _themeService = inject(ThemeService);
+
+ private readonly _destroy$ = new Subject();
+
+ ngOnInit(): void {
+ this._themeService.currentTheme$
+ .pipe(takeUntil(this._destroy$))
+ .subscribe((theme) => (this.currentTheme = theme));
+ }
+
+ ngOnDestroy(): void {
+ this._destroy$.complete();
+ this._destroy$.unsubscribe();
+ }
+
+ handleThemeChange(theme: AppTheme): void {
+ this._themeService.setTheme(theme);
+ }
+}
diff --git a/src/app/pages/home/home.page.css b/src/app/pages/home/home.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
deleted file mode 100644
index f67d8b3bc..000000000
--- a/src/app/pages/home/home.page.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
- Home
-
- Choose your theme
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/pages/home/home.page.spec.ts b/src/app/pages/home/home.page.spec.ts
deleted file mode 100644
index 4d7c107a0..000000000
--- a/src/app/pages/home/home.page.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HomePage } from './home.page';
-
-describe('HomePage', () => {
- let component: HomePage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [HomePage, RouterTestingModule],
- }).compileComponents();
-
- fixture = TestBed.createComponent(HomePage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
deleted file mode 100644
index caec38fa5..000000000
--- a/src/app/pages/home/home.page.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { AppTheme, ThemeService } from '@lib/services/theme';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
- standalone: true,
- imports: [CommonModule, RouterModule],
- templateUrl: './home.page.html',
- styleUrls: ['./home.page.css'],
-})
-export class HomePage implements OnInit, OnDestroy {
- currentTheme!: AppTheme | null;
-
- private _destroy$ = new Subject();
-
- constructor(private _themeService: ThemeService) {}
-
- ngOnInit(): void {
- this._themeService.currentTheme$
- .pipe(takeUntil(this._destroy$))
- .subscribe((theme) => (this.currentTheme = theme));
- }
-
- ngOnDestroy(): void {
- this._destroy$.complete();
- this._destroy$.unsubscribe();
- }
-
- handleThemeChange(theme: AppTheme): void {
- this._themeService.setTheme(theme);
- }
-}
diff --git a/src/app/pages/home/home.routes.ts b/src/app/pages/home/home.routes.ts
deleted file mode 100644
index 9d56d8ede..000000000
--- a/src/app/pages/home/home.routes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Route } from '@angular/router';
-
-export const ROUTES: Route[] = [
- {
- path: '',
- title: 'Home',
- loadComponent: async () => (await import('./home.page')).HomePage,
- },
-];
diff --git a/src/app/pages/home/index.ts b/src/app/pages/home/index.ts
new file mode 100644
index 000000000..aea19e5fc
--- /dev/null
+++ b/src/app/pages/home/index.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: '',
+ title: 'Home',
+ loadComponent: async () => (await import('./home.component')).HomeComponent,
+ },
+];
diff --git a/src/app/pages/profile/profile.page.css b/src/app/pages/profile/profile.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/profile/profile.page.html b/src/app/pages/profile/profile.page.html
deleted file mode 100644
index 28782ec3e..000000000
--- a/src/app/pages/profile/profile.page.html
+++ /dev/null
@@ -1 +0,0 @@
-Username: {{username}}
diff --git a/src/app/pages/profile/profile.page.spec.ts b/src/app/pages/profile/profile.page.spec.ts
deleted file mode 100644
index 47ce94b9c..000000000
--- a/src/app/pages/profile/profile.page.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { ProfilePage } from './profile.page';
-
-describe('ProfilePage', () => {
- let component: ProfilePage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [ProfilePage, RouterTestingModule],
- }).compileComponents();
-
- fixture = TestBed.createComponent(ProfilePage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/profile/profile.page.ts b/src/app/pages/profile/profile.page.ts
deleted file mode 100644
index 25b3454f2..000000000
--- a/src/app/pages/profile/profile.page.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './profile.page.html',
- styleUrls: ['./profile.page.css'],
-})
-export class ProfilePage {
- username!: string | null;
-
- constructor(private _activatedRoute: ActivatedRoute) {
- this.username = this._activatedRoute.snapshot.paramMap.get('username');
- }
-}
diff --git a/src/app/pages/profile/profile.routes.ts b/src/app/pages/profile/profile.routes.ts
deleted file mode 100644
index bfecaf186..000000000
--- a/src/app/pages/profile/profile.routes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Route } from '@angular/router';
-
-export const ROUTES: Route[] = [
- {
- path: '',
- title: 'Profile',
- loadComponent: async () => (await import('./profile.page')).ProfilePage,
- },
-];
diff --git a/src/app/pages/screens/index.ts b/src/app/pages/screens/index.ts
new file mode 100644
index 000000000..f91eb9d67
--- /dev/null
+++ b/src/app/pages/screens/index.ts
@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: '**',
+ loadComponent: async () => (await import('@pages/screens/not-found/not-found.component')).NotFoundComponent,
+ },
+];
diff --git a/src/app/pages/screens/not-found/not-found.component.html b/src/app/pages/screens/not-found/not-found.component.html
new file mode 100644
index 000000000..5cc945e9a
--- /dev/null
+++ b/src/app/pages/screens/not-found/not-found.component.html
@@ -0,0 +1,53 @@
+
+
+
+
The page you were looking for was not found
+
+ Go home
+
+
+
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NotFoundComponent, RouterTestingModule],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NotFoundComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/screens/not-found/not-found.component.ts b/src/app/pages/screens/not-found/not-found.component.ts
new file mode 100644
index 000000000..6c6bbabba
--- /dev/null
+++ b/src/app/pages/screens/not-found/not-found.component.ts
@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule, RouterModule],
+ templateUrl: './not-found.component.html',
+})
+export class NotFoundComponent {}
diff --git a/src/app/pages/screens/not-found/not-found.page.css b/src/app/pages/screens/not-found/not-found.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/screens/not-found/not-found.page.html b/src/app/pages/screens/not-found/not-found.page.html
deleted file mode 100644
index 43bb617b2..000000000
--- a/src/app/pages/screens/not-found/not-found.page.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
The page you were looking for was not found
-
Go home
-
-
;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [NotFoundPage, RouterTestingModule],
- }).compileComponents();
-
- fixture = TestBed.createComponent(NotFoundPage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/screens/not-found/not-found.page.ts b/src/app/pages/screens/not-found/not-found.page.ts
deleted file mode 100644
index 5f8d4d814..000000000
--- a/src/app/pages/screens/not-found/not-found.page.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-@Component({
- standalone: true,
- imports: [CommonModule, RouterModule],
- templateUrl: './not-found.page.html',
- styleUrls: ['./not-found.page.css'],
-})
-export class NotFoundPage {}
diff --git a/src/app/pages/settings/accessibility/accessibility.component.html b/src/app/pages/settings/accessibility/accessibility.component.html
new file mode 100644
index 000000000..f9f7665af
--- /dev/null
+++ b/src/app/pages/settings/accessibility/accessibility.component.html
@@ -0,0 +1 @@
+Accessibility works!
diff --git a/src/app/pages/settings/accessibility/accessibility.component.spec.ts b/src/app/pages/settings/accessibility/accessibility.component.spec.ts
new file mode 100644
index 000000000..9e5efdd68
--- /dev/null
+++ b/src/app/pages/settings/accessibility/accessibility.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccessibilityComponent } from './accessibility.component';
+
+describe('AccessibilityComponent', () => {
+ let component: AccessibilityComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AccessibilityComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(AccessibilityComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/settings/accessibility/accessibility.component.ts b/src/app/pages/settings/accessibility/accessibility.component.ts
new file mode 100644
index 000000000..62f718fcf
--- /dev/null
+++ b/src/app/pages/settings/accessibility/accessibility.component.ts
@@ -0,0 +1,9 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './accessibility.component.html',
+})
+export class AccessibilityComponent {}
diff --git a/src/app/pages/settings/accessibility/accessibility.page.css b/src/app/pages/settings/accessibility/accessibility.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/settings/accessibility/accessibility.page.html b/src/app/pages/settings/accessibility/accessibility.page.html
deleted file mode 100644
index f00728b80..000000000
--- a/src/app/pages/settings/accessibility/accessibility.page.html
+++ /dev/null
@@ -1,143 +0,0 @@
-accessibility works!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dolore nobis, blanditiis a tempore explicabo
-dolorum impedit corporis laboriosam necessitatibus nam? Obcaecati, cum neque? Facere optio deleniti quis ex
-tempore. Exercitationem modi, blanditiis adipisci aspernatur vel excepturi aut. Quam facilis, enim excepturi
-neque labore nulla dolorem autem earum eveniet aut, asperiores et est soluta sit at deserunt, magnam
-voluptatem rem ex numquam. Est itaque explicabo recusandae fuga ratione cum omnis assumenda corporis dolores
-ipsum. Facere inventore exercitationem illum nihil quis fugit modi voluptatem rerum rem nesciunt. Esse dolor
-aut non obcaecati aliquam velit placeat perspiciatis laudantium, fuga cumque, sit voluptates, officia in quam
-vitae labore ab pariatur recusandae id! Quis, porro repellat? Quis nesciunt impedit, maiores debitis
-repellendus, quibusdam, aliquid voluptates officia amet quidem consequatur? Enim culpa alias repudiandae
-aspernatur sunt officiis praesentium natus assumenda non voluptate rerum ea, unde consequuntur, dolorum quod
-quo at ullam odio? Facilis quas distinctio aut impedit nemo debitis inventore quidem commodi reiciendis
-accusantium perferendis odio fugit fuga repellat ipsum eveniet esse, iste id. Perspiciatis necessitatibus
-nihil ad minus odio non facere quos, blanditiis, a optio fugiat assumenda commodi molestias doloremque? Odio
-tempore deleniti nam, temporibus ad dolores culpa doloremque ratione voluptates, accusantium natus odit eum
-at, explicabo eius dicta repellendus! Quod sunt sit voluptates eaque omnis id quos at, consequatur
-exercitationem tempora enim nesciunt odio officiis assumenda veritatis corporis hic vero soluta voluptas,
-blanditiis libero. Ut harum laboriosam molestias dolore inventore dolorem dicta nemo atque libero quas quos
-est, iure eaque! Libero optio numquam animi saepe quibusdam molestiae illum eum ratione et autem, veritatis
-unde reprehenderit error debitis nobis quos. Inventore fugiat quae officiis sequi temporibus? Corporis facere
-nihil porro mollitia accusamus, sunt sint. Ut praesentium perspiciatis aut quos animi repudiandae repellat
-officiis vero autem nostrum. Ipsam adipisci enim voluptatibus illum officiis eveniet quod ut a mollitia, illo
-temporibus, officia odio consequatur sint architecto accusamus expedita nulla rerum dolor dolorem id ducimus
-unde? Sint dignissimos ea aliquam laborum similique, ducimus, quibusdam dolorem exercitationem unde recusandae
-qui eum? Vero illum eligendi reprehenderit debitis repellat accusamus sapiente qui labore commodi officiis
-necessitatibus laudantium incidunt, distinctio amet impedit eum fugit. Recusandae rem placeat iste consectetur
-expedita magni, dolores natus? Autem itaque odio laboriosam amet voluptatibus praesentium nulla illo, quidem
-aperiam commodi cumque delectus quos! Unde consectetur sequi obcaecati ex, sunt aspernatur nesciunt quas eos
-vel ad repellendus, eveniet tempore labore? Commodi, culpa consequuntur. Laborum pariatur eos, consequatur
-voluptatibus corrupti possimus, a praesentium aliquid labore voluptas facilis numquam cupiditate eligendi
-doloribus harum totam rem. Libero accusantium mollitia assumenda neque quasi placeat impedit magnam
-perspiciatis ut distinctio earum nesciunt magni debitis nostrum, dolorem totam vel commodi beatae minus eum
-amet non alias dignissimos incidunt? Excepturi, omnis repudiandae officia libero numquam necessitatibus ipsum,
-saepe voluptatibus vel totam doloribus expedita? Exercitationem, tenetur! Sed error consequatur expedita sit
-unde cupiditate velit eos nobis assumenda ad aperiam provident ratione maiores voluptatibus magni repellendus
-nulla accusantium necessitatibus, perferendis, pariatur molestiae rerum. Ut eos cupiditate magnam explicabo
-voluptatibus, odio velit aliquid itaque cum deleniti eum error voluptate voluptates vitae! Obcaecati, libero
-laudantium architecto repellat quos illo quisquam sed corrupti, vero asperiores nostrum saepe accusamus
-deleniti unde facere aspernatur quas recusandae natus voluptatem? Quas impedit quidem vel rerum, accusantium
-quo quae a officia nobis et asperiores doloremque eum velit odio aperiam optio tenetur voluptate natus
-tempora, architecto delectus beatae voluptatum quos. Sint magnam deleniti impedit officiis quae soluta
-veritatis aut, nam perferendis nisi placeat ad quod, unde porro reiciendis sequi aliquam fugiat rerum at earum
-debitis! Recusandae sit quos quas voluptatum, est aperiam inventore excepturi molestiae eos autem. Laboriosam
-assumenda corporis sapiente corrupti nemo iste? Praesentium ipsam dolor nisi atque provident nesciunt harum,
-at rem minus! Expedita dolor reiciendis, modi earum consectetur molestias consequuntur ipsa nemo soluta
-officia quam sit dicta iusto cupiditate, dolore quisquam. Odio beatae esse sit asperiores veniam similique
-laboriosam quaerat dolore consectetur iusto repellendus aperiam ullam officiis, fuga optio dolores magni sunt
-ipsa quasi perspiciatis, nihil, corrupti voluptatem! Optio veritatis animi rerum quibusdam totam consectetur
-reiciendis consequuntur esse! Dicta, fuga commodi incidunt impedit exercitationem velit vero possimus mollitia
-blanditiis! Nesciunt ipsam quae debitis vel quibusdam odit nam praesentium repellat aspernatur soluta,
-doloribus earum totam eveniet assumenda quam eum deleniti rerum eius placeat? Veniam perspiciatis accusamus
-consequuntur ratione adipisci. Autem facere error quam aspernatur at nulla? Assumenda corrupti accusamus
-officiis, ipsa laboriosam iure, illo perferendis ducimus exercitationem quia fugiat quis molestiae,
-consequatur rem doloribus fuga magni obcaecati culpa deserunt quam esse reiciendis aut! Asperiores, culpa ea
-reprehenderit officiis neque possimus perferendis maiores voluptatum sapiente recusandae quos, cumque amet.
-Tempora consectetur quae, quo eos et itaque aliquid, aut veritatis eligendi architecto enim ut, corrupti
-animi. Ab maxime tenetur autem fugiat maiores odio dolorem at minus distinctio! Vero accusamus quo, non ea
-facilis similique corporis quas placeat repellat laudantium laboriosam voluptatum, dolorum eius officia velit
-reprehenderit error! Temporibus omnis quos itaque, quas unde accusantium magnam nisi necessitatibus enim,
-nihil voluptas quaerat dicta, porro vitae error cum officia minus. Repellendus temporibus unde aliquam saepe
-architecto sapiente necessitatibus, praesentium nemo totam omnis ab impedit voluptatem quas sunt
-exercitationem voluptatibus! Magni ad recusandae soluta minus porro enim eligendi, impedit veritatis modi qui
-consequatur eos nobis, rem rerum explicabo cum ex velit delectus illum, totam incidunt accusantium voluptatem?
-Iusto quo veniam adipisci similique debitis quis magni sed dolorem odit architecto accusamus quam ex
-recusandae ad rerum modi ab aperiam, dolor alias vitae ea ratione. Earum laboriosam veniam sequi aut est iure
-inventore distinctio beatae dignissimos dolorum, error nesciunt consequatur adipisci, quia quis, ad ratione
-debitis et maiores facere animi. Facilis eaque maiores inventore, sequi amet aliquid saepe impedit
-reprehenderit molestias odio incidunt sint asperiores animi accusamus. Blanditiis quae nobis esse temporibus
-explicabo nam iusto rerum inventore, reiciendis consectetur omnis at velit quas dolores delectus laboriosam?
-Corrupti, nisi similique dignissimos tenetur consectetur accusamus aspernatur temporibus eius quas magni ex
-quo consequuntur tempora deleniti sequi? Provident enim ducimus dolor reiciendis minus placeat, animi quam
-consequatur laborum sapiente exercitationem labore assumenda doloremque modi. Voluptatibus neque possimus, qui
-quod, repellendus, unde nam mollitia soluta illum excepturi ratione facilis aliquid magnam sed repellat ipsam
-nihil! Nobis numquam sint officiis debitis totam quo qui accusamus. Culpa quaerat non explicabo est aperiam
-maiores cum, odio sequi? Dolorem laudantium deleniti magnam qui nemo consequuntur, enim voluptatum vero
-aliquid exercitationem animi cumque iste blanditiis atque quisquam? Dolore labore iusto molestias quasi nisi
-totam excepturi autem a sequi laborum error placeat, accusantium delectus quis, blanditiis eligendi, sunt
-architecto beatae. Accusamus possimus alias minus rerum dicta porro incidunt, aut earum veritatis quaerat
-deserunt consequatur nam necessitatibus ipsum facilis, voluptatem debitis. Ex perspiciatis molestias
-exercitationem debitis eveniet itaque voluptatibus voluptates nisi deleniti perferendis, enim sequi eos.
-Incidunt similique id magnam voluptatum optio natus quidem provident ad odit. Nulla praesentium natus sunt
-commodi ut. Delectus accusamus ullam ipsam, nesciunt quo inventore nemo earum reiciendis ad impedit fugiat
-optio dignissimos provident autem placeat reprehenderit cumque. At nam pariatur tempore placeat vero dolores,
-reprehenderit id cumque amet cupiditate iusto commodi dignissimos sapiente nulla voluptatum error neque
-laboriosam porro nesciunt qui quaerat dolorum eveniet doloremque tempora? Totam, in ipsum quod consequatur
-quidem libero ea saepe qui adipisci? Odit voluptates, vero magni voluptate sunt tempora obcaecati laboriosam
-nemo autem? In explicabo, minima beatae nemo est corporis quos omnis natus rerum quisquam nulla dolorem atque
-velit assumenda excepturi dolor sed voluptate itaque sint laboriosam, reprehenderit dolores. Possimus veniam
-placeat facere nostrum hic rem mollitia quos incidunt asperiores autem vero ut, modi aliquam harum esse optio
-quaerat blanditiis ex consectetur ipsam nihil. Ratione itaque quod aliquid minus fugit, vero earum porro
-voluptatum dicta inventore magnam dignissimos, deleniti possimus illum quos officia sapiente placeat explicabo
-aliquam magni! Debitis eius a voluptas doloribus odit id nostrum numquam fugit at expedita, officia corporis
-eligendi facilis qui voluptate cumque rem fuga quo repellat ex ut suscipit quisquam alias? Eligendi, iste
-laborum voluptatem amet adipisci eos non debitis et itaque. Consequatur eligendi harum, delectus id molestias
-magni neque quam exercitationem. Facere voluptas cum est illum, obcaecati nemo ullam quisquam magni maxime quo
-illo assumenda ipsam quidem deserunt libero, cupiditate culpa quis? Saepe, fugiat sunt, dicta sint hic
-quisquam placeat provident laudantium eum repellendus voluptatibus numquam dolorum recusandae, quidem magni
-porro alias aspernatur qui iusto. Accusamus obcaecati inventore suscipit architecto. Eum facilis tenetur
-blanditiis aliquam atque omnis possimus, modi architecto quidem illum similique maiores, ut, officia soluta
-qui. Perspiciatis culpa accusantium ad minus doloribus, eum voluptatum veniam ullam ipsam molestias illo
-itaque, in laborum modi ducimus, libero natus nam! Similique itaque consequatur ipsa quasi voluptatum amet
-recusandae omnis dolores cumque? Nihil, magni tempora minima reprehenderit impedit placeat qui esse sequi
-porro temporibus voluptatum adipisci saepe, similique nam amet magnam assumenda ad corporis eius veritatis
-fugiat ratione consectetur! Nemo ullam modi assumenda iusto recusandae commodi voluptatem? Adipisci quasi,
-repellat incidunt atque explicabo eius laborum autem excepturi non porro culpa cupiditate esse consequatur,
-dolorem unde error iure ullam, tempore maiores! Quos mollitia fugiat a libero quaerat distinctio quod
-quibusdam maiores perferendis placeat numquam, totam nam molestias ratione inventore aperiam aliquam iste ex
-eaque est. Fuga, porro, soluta provident similique itaque suscipit fugiat ex assumenda deleniti doloremque
-harum laudantium sit cupiditate recusandae in, dolor perspiciatis illum amet enim optio? Excepturi magni nihil
-quaerat cum quasi dicta quis mollitia placeat quo aliquid illo delectus laborum cupiditate blanditiis sed
-praesentium tempore quam id, rerum unde ipsa hic perspiciatis minus doloribus. Omnis et illum nam nobis
-explicabo nisi ullam maiores id voluptatem inventore iure, commodi ipsam saepe ex repellendus a fuga,
-similique laborum ab illo repudiandae! Explicabo at beatae saepe neque quidem laudantium a minima laboriosam
-repudiandae architecto? Corrupti quis ab assumenda totam, rerum ratione tempore nostrum. Repellat, sunt? Quas
-corporis totam, dignissimos inventore placeat officia et ducimus iure, impedit a delectus? A ullam magni qui
-dolor asperiores mollitia possimus aut quod rerum iste tempore amet cupiditate, suscipit maiores vel! Quaerat
-culpa neque dignissimos velit quam sequi corporis illum sit est voluptates omnis fugiat enim eius perferendis
-numquam, laborum modi recusandae dolore ullam eaque doloribus? Voluptate eos eligendi recusandae mollitia
-voluptatem autem. Labore, error expedita dolore, voluptas officia ut veritatis minima animi enim ipsam magni
-similique itaque. Mollitia libero hic, nihil illo ipsa magnam velit architecto, laudantium facilis possimus
-quia, tenetur ducimus quos deserunt iure corrupti officiis ut. Nisi voluptatem quam cumque, sequi nobis,
-aspernatur, ipsam esse et id necessitatibus laboriosam enim officiis veniam in sapiente reiciendis magnam
-itaque expedita quas quibusdam? Dolore quasi consectetur quam nemo cum eos recusandae! Officiis dolorem eius
-veritatis animi eaque possimus doloribus quasi autem illo nostrum quidem perferendis, commodi reiciendis
-maxime expedita fugiat reprehenderit sit doloremque omnis dignissimos vel libero. Ut similique omnis repellat
-labore assumenda minus aliquid placeat quia consectetur, odio magnam atque aperiam minima vel ea velit
-veritatis! Doloremque suscipit quo aperiam ratione hic libero molestiae sint perferendis eveniet pariatur
-rerum velit alias beatae ipsa illo illum repudiandae maxime rem, reprehenderit ad quaerat dignissimos a dicta.
-Architecto molestiae distinctio laboriosam vero dicta quibusdam placeat consequuntur veniam ducimus sit,
-repudiandae numquam neque dignissimos tenetur repellat mollitia fugiat praesentium. Nam magnam voluptatum
-placeat perspiciatis consequatur soluta minima rem qui aspernatur pariatur, reprehenderit non est, reiciendis
-labore iusto delectus fugiat quas ea eveniet asperiores! Distinctio laboriosam dolorem mollitia porro
-dignissimos reprehenderit, repellendus ipsa, ea ab nam voluptate quaerat consectetur numquam error sapiente ut
-molestias modi. Ducimus vero beatae eius? Dicta sit blanditiis, esse explicabo et, ex eaque omnis
-exercitationem sapiente dignissimos voluptas dolorum dolores nisi, itaque labore dolorem voluptatum temporibus
-inventore officia reprehenderit autem ipsa recusandae tempore laboriosam. Eos modi aspernatur natus cumque
-cupiditate deleniti inventore aliquid perferendis, ipsam quo sit hic quidem laborum. Qui, possimus ab. Autem,
-doloribus blanditiis ad quos optio ipsa dolorum possimus exercitationem odio veritatis deserunt, quo eos
-eveniet molestias mollitia sed? Iusto labore ratione ipsum tempora quaerat, nihil consectetur voluptatibus,
-eveniet doloribus, obcaecati sed. Asperiores incidunt iusto ad vero distinctio vitae accusantium voluptatum
-quidem? Esse, unde? Dignissimos dolor obcaecati error! Accusantium incidunt placeat inventore porro illum
-cupiditate, at, laboriosam quidem enim minus autem exercitationem voluptatum fugit facilis ad dicta iste.
-Numquam beatae molestias repellendus ipsa iure nulla cupiditate dolore deserunt.
diff --git a/src/app/pages/settings/accessibility/accessibility.page.spec.ts b/src/app/pages/settings/accessibility/accessibility.page.spec.ts
deleted file mode 100644
index a22c4934f..000000000
--- a/src/app/pages/settings/accessibility/accessibility.page.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccessibilityPage } from './accessibility.page';
-
-describe('AccessibilityPage', () => {
- let component: AccessibilityPage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [ AccessibilityPage ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AccessibilityPage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/settings/accessibility/accessibility.page.ts b/src/app/pages/settings/accessibility/accessibility.page.ts
deleted file mode 100644
index ce6278620..000000000
--- a/src/app/pages/settings/accessibility/accessibility.page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './accessibility.page.html',
- styleUrls: ['./accessibility.page.css'],
-})
-export class AccessibilityPage {}
diff --git a/src/app/pages/settings/account/account.page.html b/src/app/pages/settings/account/account.component.html
similarity index 100%
rename from src/app/pages/settings/account/account.page.html
rename to src/app/pages/settings/account/account.component.html
diff --git a/src/app/pages/settings/account/account.component.spec.ts b/src/app/pages/settings/account/account.component.spec.ts
new file mode 100644
index 000000000..f058438cd
--- /dev/null
+++ b/src/app/pages/settings/account/account.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+ let component: AccountComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AccountComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(AccountComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/settings/account/account.component.ts b/src/app/pages/settings/account/account.component.ts
new file mode 100644
index 000000000..c3659c66d
--- /dev/null
+++ b/src/app/pages/settings/account/account.component.ts
@@ -0,0 +1,9 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './account.component.html',
+})
+export class AccountComponent {}
diff --git a/src/app/pages/settings/account/account.page.css b/src/app/pages/settings/account/account.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/settings/account/account.page.spec.ts b/src/app/pages/settings/account/account.page.spec.ts
deleted file mode 100644
index 176a09811..000000000
--- a/src/app/pages/settings/account/account.page.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccountPage } from './account.page';
-
-describe('AccountPage', () => {
- let component: AccountPage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [ AccountPage ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AccountPage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/settings/account/account.page.ts b/src/app/pages/settings/account/account.page.ts
deleted file mode 100644
index 88528fa04..000000000
--- a/src/app/pages/settings/account/account.page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './account.page.html',
- styleUrls: ['./account.page.css'],
-})
-export class AccountPage {}
diff --git a/src/app/pages/settings/appearance/appearance.page.html b/src/app/pages/settings/appearance/appearance.component.html
similarity index 100%
rename from src/app/pages/settings/appearance/appearance.page.html
rename to src/app/pages/settings/appearance/appearance.component.html
diff --git a/src/app/pages/settings/appearance/appearance.component.spec.ts b/src/app/pages/settings/appearance/appearance.component.spec.ts
new file mode 100644
index 000000000..81ef1c58b
--- /dev/null
+++ b/src/app/pages/settings/appearance/appearance.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AppearanceComponent } from './appearance.component';
+
+describe('AppearanceComponent', () => {
+ let component: AppearanceComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppearanceComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(AppearanceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/settings/appearance/appearance.component.ts b/src/app/pages/settings/appearance/appearance.component.ts
new file mode 100644
index 000000000..639e4c1e5
--- /dev/null
+++ b/src/app/pages/settings/appearance/appearance.component.ts
@@ -0,0 +1,9 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './appearance.component.html',
+})
+export class AppearanceComponent {}
diff --git a/src/app/pages/settings/appearance/appearance.page.css b/src/app/pages/settings/appearance/appearance.page.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/pages/settings/appearance/appearance.page.spec.ts b/src/app/pages/settings/appearance/appearance.page.spec.ts
deleted file mode 100644
index 4aeda177d..000000000
--- a/src/app/pages/settings/appearance/appearance.page.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AppearancePage } from './appearance.page';
-
-describe('AppearancePage', () => {
- let component: AppearancePage;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [ AppearancePage ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AppearancePage);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/pages/settings/appearance/appearance.page.ts b/src/app/pages/settings/appearance/appearance.page.ts
deleted file mode 100644
index 407abf9cc..000000000
--- a/src/app/pages/settings/appearance/appearance.page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-
-@Component({
- standalone: true,
- imports: [CommonModule],
- templateUrl: './appearance.page.html',
- styleUrls: ['./appearance.page.css'],
-})
-export class AppearancePage {}
diff --git a/src/app/pages/settings/index.ts b/src/app/pages/settings/index.ts
new file mode 100644
index 000000000..39ad31d92
--- /dev/null
+++ b/src/app/pages/settings/index.ts
@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: 'accessibility',
+ title: 'Accessibility settings',
+ loadComponent: async () => (await import('./accessibility/accessibility.component')).AccessibilityComponent,
+ },
+ {
+ path: 'account',
+ title: 'Account settings',
+ loadComponent: async () => (await import('./account/account.component')).AccountComponent,
+ },
+ {
+ path: 'appearance',
+ title: 'Appearance settings',
+ loadComponent: async () => (await import('./appearance/appearance.component')).AppearanceComponent,
+ },
+];
diff --git a/src/app/pages/settings/settings.routes.ts b/src/app/pages/settings/settings.routes.ts
deleted file mode 100644
index b3719c630..000000000
--- a/src/app/pages/settings/settings.routes.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Route } from '@angular/router';
-
-export const ROUTES: Route[] = [
- {
- path: 'accessibility',
- title: 'Accessibility settings',
- loadComponent: async () => (await import('./accessibility/accessibility.page')).AccessibilityPage,
- },
- {
- path: 'account',
- title: 'Account settings',
- loadComponent: async () => (await import('./account/account.page')).AccountPage,
- },
- {
- path: 'appearance',
- title: 'Appearance settings',
- loadComponent: async () => (await import('./appearance/appearance.page')).AppearancePage,
- },
-];
diff --git a/src/app/pages/user/index.ts b/src/app/pages/user/index.ts
new file mode 100644
index 000000000..1d44b0726
--- /dev/null
+++ b/src/app/pages/user/index.ts
@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+ {
+ path: '',
+ title: 'Profile',
+ loadComponent: async () => (await import('./profile/profile.component')).ProfileComponent,
+ },
+];
diff --git a/src/app/pages/user/profile/profile.component.html b/src/app/pages/user/profile/profile.component.html
new file mode 100644
index 000000000..b37fa6e3c
--- /dev/null
+++ b/src/app/pages/user/profile/profile.component.html
@@ -0,0 +1 @@
+User: {{ username }}
diff --git a/src/app/pages/user/profile/profile.component.spec.ts b/src/app/pages/user/profile/profile.component.spec.ts
new file mode 100644
index 000000000..bee72a71a
--- /dev/null
+++ b/src/app/pages/user/profile/profile.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+ let component: ProfileComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ProfileComponent, RouterTestingModule],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(ProfileComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/user/profile/profile.component.ts b/src/app/pages/user/profile/profile.component.ts
new file mode 100644
index 000000000..c0d9c1079
--- /dev/null
+++ b/src/app/pages/user/profile/profile.component.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './profile.component.html',
+})
+export class ProfileComponent {
+ @Input() username!: string;
+}
diff --git a/src/environments/environment.development.ts b/src/environments/environment.development.ts
new file mode 100644
index 000000000..8c19b16f2
--- /dev/null
+++ b/src/environments/environment.development.ts
@@ -0,0 +1,4 @@
+export const environment = {
+ production: false,
+ apiUrl: 'http://localhost:3000/api/v1',
+};
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index ccc74ef1a..000000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const environment = {
- production: true,
- apiUrl: '',
-};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index f61219143..54425fccf 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,8 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false,
- apiUrl: 'http://localhost:3000/api/v1',
+ production: true,
+ apiUrl: 'http://localhost:3000/api/v1',
};
/*
diff --git a/src/index.html b/src/index.html
index 48d68efaa..d53162320 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,18 +1,28 @@
-
- Angular Boilerplate
- Angular Boilerplate
+ (id: string): T;
- };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/src/theme/01-base/document.css b/src/theme/01-base/document.css
index e76d395ea..61eca0889 100644
--- a/src/theme/01-base/document.css
+++ b/src/theme/01-base/document.css
@@ -1,14 +1,14 @@
html,
body {
- @apply h-full;
+ @apply h-full;
}
body {
- @apply bg-slate-100;
- @apply text-slate-900;
+ @apply bg-slate-100;
+ @apply text-slate-900;
}
body.dark {
- @apply bg-zinc-900;
- @apply text-zinc-200;
+ @apply bg-zinc-900;
+ @apply text-zinc-200;
}
diff --git a/src/theme/01-base/font.css b/src/theme/01-base/font.css
index 3c7ff95cc..2246810c3 100644
--- a/src/theme/01-base/font.css
+++ b/src/theme/01-base/font.css
@@ -1,4 +1,4 @@
html {
- @apply font-body;
- @apply font-light;
+ @apply font-body;
+ @apply font-light;
}
diff --git a/src/theme/01-base/heading.css b/src/theme/01-base/heading.css
index 5595c1a7e..062ac5239 100644
--- a/src/theme/01-base/heading.css
+++ b/src/theme/01-base/heading.css
@@ -14,62 +14,62 @@ h6,
.display-2,
.display-3,
.display-4 {
- @apply font-display;
- @apply mt-0;
+ @apply font-display;
+ @apply mt-0;
}
h1,
.h1 {
- @apply text-4xl;
- @apply mb-12;
+ @apply text-4xl;
+ @apply mb-12;
}
h2,
.h2 {
- @apply text-3xl;
- @apply mb-10;
+ @apply text-3xl;
+ @apply mb-10;
}
h3,
.h3 {
- @apply text-2xl;
- @apply mb-8;
+ @apply text-2xl;
+ @apply mb-8;
}
h4,
.h4 {
- @apply text-xl;
- @apply mb-6;
+ @apply text-xl;
+ @apply mb-6;
}
h5,
.h5 {
- @apply text-lg;
- @apply mb-4;
+ @apply text-lg;
+ @apply mb-4;
}
h6,
.h6 {
- @apply text-base;
- @apply mb-2;
+ @apply text-base;
+ @apply mb-2;
}
.display-1 {
- @apply text-8xl;
- @apply mb-32;
+ @apply text-8xl;
+ @apply mb-32;
}
.display-2 {
- @apply text-7xl;
- @apply mb-24;
+ @apply text-7xl;
+ @apply mb-24;
}
.display-3 {
- @apply text-6xl;
- @apply mb-20;
+ @apply text-6xl;
+ @apply mb-20;
}
.display-4 {
- @apply text-5xl;
- @apply mb-16;
+ @apply text-5xl;
+ @apply mb-16;
}
diff --git a/src/theme/01-base/variables.css b/src/theme/01-base/variables.css
index 02777bfd4..dea62ad7b 100644
--- a/src/theme/01-base/variables.css
+++ b/src/theme/01-base/variables.css
@@ -1,4 +1,4 @@
:root {
- --size-navbar-height: 60px;
- --size-footer-height: 180px;
+ --size-navbar-height: 60px;
+ --size-footer-height: 180px;
}
diff --git a/src/theme/02-components/button.css b/src/theme/02-components/button.css
index cfdd1f152..95a7bd41b 100644
--- a/src/theme/02-components/button.css
+++ b/src/theme/02-components/button.css
@@ -1,32 +1,32 @@
.btn {
- @apply w-full md:w-auto;
- @apply border border-transparent rounded-lg outline-none;
- @apply h-10 min-w-[80px] py-2 px-3;
- @apply relative inline-flex items-center justify-center;
- @apply text-sm text-center font-medium leading-none;
- @apply select-none cursor-pointer;
+ @apply w-full md:w-auto;
+ @apply border border-transparent rounded-lg outline-none;
+ @apply h-10 min-w-[80px] py-2 px-3;
+ @apply relative inline-flex items-center justify-center;
+ @apply text-sm text-center font-medium leading-none;
+ @apply select-none cursor-pointer;
}
.btn:disabled {
- @apply opacity-80 cursor-not-allowed;
+ @apply opacity-80 cursor-not-allowed;
}
.btn:not(:disabled):hover {
- @apply bg-opacity-80;
+ @apply bg-opacity-80;
}
.btn:not(:disabled):focus {
- @apply ring-2 ring-gray-400 ring-offset-2 dark:ring-zinc-700;
+ @apply ring-2 ring-gray-400 ring-offset-2 dark:ring-zinc-700;
}
.btn-fit {
- @apply min-w-fit;
+ @apply min-w-fit;
}
.btn-secondary {
- @apply bg-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:text-white;
+ @apply bg-zinc-200 text-zinc-900 dark:bg-zinc-700 dark:text-white;
}
.btn-primary {
- @apply bg-blue-500 text-white;
+ @apply bg-blue-500 text-white;
}
diff --git a/src/theme/02-components/link.css b/src/theme/02-components/link.css
index bf74a0a7d..dbf8e5886 100644
--- a/src/theme/02-components/link.css
+++ b/src/theme/02-components/link.css
@@ -1,16 +1,17 @@
a.link {
- @apply underline;
- @apply text-indigo-500;
+ @apply font-semibold;
+ @apply text-indigo-500 dark:text-indigo-300;
}
a.link:hover {
- @apply text-indigo-400;
+ @apply underline;
+ @apply text-indigo-400;
}
a.link:focus {
- @apply text-indigo-800 dark:text-indigo-400;
+ @apply text-indigo-800 dark:text-indigo-400;
}
a.link:visited {
- @apply text-rose-800 dark:text-rose-400;
+ @apply text-rose-500 dark:text-rose-400;
}
diff --git a/src/theme/03-utilities/border.css b/src/theme/03-utilities/border.css
index 4057875e4..370613637 100644
--- a/src/theme/03-utilities/border.css
+++ b/src/theme/03-utilities/border.css
@@ -1,3 +1,3 @@
.border-base {
- @apply border-zinc-200 dark:border-zinc-800;
+ @apply border-zinc-200 dark:border-zinc-800;
}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index d4595efca..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
- content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
- darkMode: 'class',
- theme: {
- fontFamily: {
- display: ['Oswald', 'sans-serif'],
- body: ['Poppins', 'sans-serif'],
- },
- container: {
- center: true,
- padding: '1.5rem',
- },
- extend: {},
- },
- plugins: [],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 000000000..fcd5fe471
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { addDynamicIconSelectors } from '@iconify/tailwind';
+
+const TAILWIND_PLUGINS = [
+ require('@tailwindcss/aspect-ratio'),
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/typography'),
+];
+
+const CUSTOM_PLUGINS = [addDynamicIconSelectors()];
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
+ darkMode: 'class',
+ theme: {
+ fontFamily: {
+ display: ['Oswald', 'sans-serif'],
+ body: ['Poppins', 'sans-serif'],
+ },
+ container: {
+ center: true,
+ padding: '1.5rem',
+ },
+ extend: {},
+ },
+ plugins: [...TAILWIND_PLUGINS, ...CUSTOM_PLUGINS],
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index ff396d4ce..84f1f992d 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,6 +5,6 @@
"outDir": "./out-tsc/app",
"types": []
},
- "files": ["src/main.ts", "src/polyfills.ts"],
+ "files": ["src/main.ts"],
"include": ["src/**/*.d.ts"]
}
diff --git a/tsconfig.json b/tsconfig.json
index 6deda9d2c..b1a5f965f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,9 +16,12 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "es2020",
- "module": "es2020",
- "lib": ["es2020", "dom"],
+ "resolveJsonModule": true,
+ "allowSyntheticDefaultImports": true,
+ "target": "ES2022",
+ "module": "ES2022",
+ "useDefineForClassFields": false,
+ "lib": ["ES2022", "dom"],
"paths": {
"@lib/*": ["src/app/lib/*"],
"@pages/*": ["src/app/pages/*"],
@@ -27,7 +30,6 @@
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
- "fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 669344f8d..47e3dd755 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -5,6 +5,5 @@
"outDir": "./out-tsc/spec",
"types": ["jasmine"]
},
- "files": ["src/test.ts", "src/polyfills.ts"],
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}
+
-