Login basics

src/app/app.routes.ts

@@ -1,9 +1,15 @@
 import { Routes } from '@angular/router';
-import {HomePage} from './pages/homepage/homepage';
+import {AuthGuard} from './guards/auth.guard';
+import {LoginPage, HomePage} from './pages';
 
 export const routes: Routes = [
   {
     path: '',
-    component: HomePage
+    component: HomePage,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'login',
+    component: LoginPage,
   }
 ];

src/app/guards/auth.guard.ts

@@ -0,0 +1,17 @@
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
+import {inject, Injectable} from '@angular/core';
+import {AuthService} from '../services/auth.service';
+
+@Injectable({providedIn: 'root'})
+export class AuthGuard implements CanActivate {
+  private authService: AuthService = inject(AuthService);
+  private router = inject(Router);
+
+  canActivate(): boolean {
+    let isLoggedIn = this.authService.isLoggedIn();
+    if (isLoggedIn) return true;
+
+    this.router.navigate(['/login']);
+    return false;
+  }
+}

src/app/pages/home/home-page.html

@@ -2,6 +2,9 @@
   <analyser></analyser>
 </div>
 
+
+<button (click)="logout()">Logout</button>
+
 Home<br/>
 Home<br/>
 Home<br/>

src/app/pages/home/home-page.ts

@@ -2,10 +2,11 @@ import {AfterViewInit, Component, effect, ElementRef, inject, ViewChild} from '@
 import {AudioService} from '../../services/audio.service';
 import {FileSystemFile, Track, TrackMeta} from '../../models';
 import {Analyser} from '../../components/analyser/Analyser';
+import {AuthService} from '../../services/auth.service';
 
 @Component({
   selector: 'app-home',
-  templateUrl: 'homepage.html',
+  templateUrl: 'home-page.html',
   imports: [
     Analyser
   ]
@@ -14,6 +15,7 @@ export class HomePage implements AfterViewInit{
   @ViewChild('range') rangeRef!: ElementRef<HTMLInputElement>;
   protected input!: HTMLInputElement;
   protected audio: AudioService = inject(AudioService);
+  protected authService: AuthService = inject(AuthService);
   protected files: Track[] = [];
 
   constructor() {
@@ -93,4 +95,8 @@ export class HomePage implements AfterViewInit{
     const item = this.audio.current();
     if (item) await this.audio.removeItem(item);
   }
+
+  logout(): void {
+    this.authService.logout();
+  }
 }

src/app/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './home/home-page';
+export * from './login/login-page';

src/app/pages/login/login-page.html

@@ -0,0 +1,5 @@
+<img src="/jukesquare.svg">
+
+Login
+
+<button (click)="login($event)">Login</button>

src/app/pages/login/login-page.ts

@@ -0,0 +1,16 @@
+import {Component, inject} from '@angular/core';
+import {AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: 'login-page.html',
+  imports: []
+})
+export class LoginPage {
+  private authService: AuthService = inject(AuthService);
+
+  protected login(event: Event) {
+    this.authService.login();
+    this.authService.redirectHome();
+  }
+}

src/app/services/auth.service.ts

@@ -0,0 +1,29 @@
+import {inject, Injectable, signal, WritableSignal} from '@angular/core';
+import {Router} from '@angular/router';
+import {LocalStorageService} from './local-storage.service';
+
+@Injectable({providedIn: 'root'})
+export class AuthService {
+  public isLoggedIn: WritableSignal<boolean>;
+  public localStorageService = inject(LocalStorageService);
+  public router = inject(Router);
+
+  constructor() {
+    this.isLoggedIn = signal(this.localStorageService.get('login') || false);
+  }
+
+  login() {
+    this.localStorageService.set('login', true);
+    this.isLoggedIn.set(true);
+  }
+
+  logout() {
+    this.localStorageService.set('login', false);
+    this.isLoggedIn.set(false);
+    this.router.navigate(['/login']);
+  }
+
+  redirectHome() {
+    this.router.navigate(['/']);
+  }
+}

src/app/services/local-storage.service.ts

@@ -0,0 +1,13 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class LocalStorageService {
+  get(key: string): any {
+    return JSON.parse(localStorage.getItem(key) || 'null');
+  }
+
+  set(key: string, value: any): any {
+    const json = JSON.stringify(value);
+    return localStorage.setItem(key, json);
+  }
+}