diff --git a/public/jukesquare.svg b/public/jukesquare.svg
new file mode 100644
index 0000000..6a60e5e
--- /dev/null
+++ b/public/jukesquare.svg
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5de2d4d..ad3d46e 100644
--- a/src/app/app.routes.ts
+++ b/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,
}
];
diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts
new file mode 100644
index 0000000..b9c1b26
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/home/home-page.html
similarity index 92%
rename from src/app/pages/homepage/homepage.html
rename to src/app/pages/home/home-page.html
index e67766d..c0d75f3 100644
--- a/src/app/pages/homepage/homepage.html
+++ b/src/app/pages/home/home-page.html
@@ -2,6 +2,9 @@
+
+
+
Home
Home
Home
diff --git a/src/app/pages/homepage/homepage.ts b/src/app/pages/home/home-page.ts
similarity index 87%
rename from src/app/pages/homepage/homepage.ts
rename to src/app/pages/home/home-page.ts
index 8f8f33b..ddf50b8 100644
--- a/src/app/pages/homepage/homepage.ts
+++ b/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;
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();
+ }
}
diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts
new file mode 100644
index 0000000..fc93d15
--- /dev/null
+++ b/src/app/pages/index.ts
@@ -0,0 +1,2 @@
+export * from './home/home-page';
+export * from './login/login-page';
diff --git a/src/app/pages/login/login-page.html b/src/app/pages/login/login-page.html
new file mode 100644
index 0000000..efd5155
--- /dev/null
+++ b/src/app/pages/login/login-page.html
@@ -0,0 +1,5 @@
+
+
+Login
+
+
diff --git a/src/app/pages/login/login-page.ts b/src/app/pages/login/login-page.ts
new file mode 100644
index 0000000..ebbdc0d
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 0000000..bbbe09f
--- /dev/null
+++ b/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;
+ 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(['/']);
+ }
+}
diff --git a/src/app/services/local-storage.service.ts b/src/app/services/local-storage.service.ts
new file mode 100644
index 0000000..f126db9
--- /dev/null
+++ b/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);
+ }
+}