diff --git a/src/app/dashboard/expenses/expenses.component.html b/src/app/dashboard/expenses/expenses.component.html index 69c8c27..fc38e16 100644 --- a/src/app/dashboard/expenses/expenses.component.html +++ b/src/app/dashboard/expenses/expenses.component.html @@ -96,9 +96,9 @@ - + diff --git a/src/app/dashboard/expenses/expenses.component.ts b/src/app/dashboard/expenses/expenses.component.ts index 8c011a5..c02e9ac 100644 --- a/src/app/dashboard/expenses/expenses.component.ts +++ b/src/app/dashboard/expenses/expenses.component.ts @@ -30,13 +30,13 @@ export class ExpensesComponent implements OnInit { date:Date = new Date(); loading:boolean = false - tableItem!:any[] + tableItem:any[] | undefined visible: boolean = false; data:any; - dataId:any; + dataId:any[] | undefined; constructor( @@ -78,7 +78,6 @@ export class ExpensesComponent implements OnInit { getExpenses(){ this.service.getExpenses().subscribe((res)=>{ console.log(res); - this.tableItem = res; }) } diff --git a/src/app/dashboard/header/header.component.html b/src/app/dashboard/header/header.component.html index 2873d09..2690020 100644 --- a/src/app/dashboard/header/header.component.html +++ b/src/app/dashboard/header/header.component.html @@ -1,7 +1,9 @@
- + + +
\ No newline at end of file diff --git a/src/app/dashboard/header/header.component.ts b/src/app/dashboard/header/header.component.ts index bd8a91e..2d5275c 100644 --- a/src/app/dashboard/header/header.component.ts +++ b/src/app/dashboard/header/header.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; +import { AuthService } from 'src/app/shared/auth.service'; @Component({ selector: 'app-header', @@ -8,17 +9,12 @@ import { Router } from '@angular/router'; }) export class HeaderComponent { - constructor(private route: Router){} + constructor(private route: Router, private authService: AuthService){} loading:boolean = false; + isLoggedIn:boolean = true; menuItems = [ - { - label: '', - className: 'user-home', - icon: 'pi pi-user', - routerLink: '/dashboard' - }, { label: 'Income', className: 'menu', @@ -36,16 +32,16 @@ export class HeaderComponent { } ] - logOut(){ - this.loading = true; - setTimeout(() => { - this.loading = false; - this.route.navigate(['/register']); - }, 2000); + navHome(){ + this.route.navigate(['/register']) } - navHome(){ - this.route.navigate(['/dashboard']) + logOut(){ + this.isLoggedIn = false + this.authService.signOut().then((res)=>{ + + localStorage.removeItem('user') + }) } } diff --git a/src/app/guard/guard.guard.spec.ts b/src/app/guard/guard.guard.spec.ts new file mode 100644 index 0000000..ac2e1d4 --- /dev/null +++ b/src/app/guard/guard.guard.spec.ts @@ -0,0 +1,17 @@ +import { TestBed } from '@angular/core/testing'; +import { CanActivateFn } from '@angular/router'; + +import { guardGuard } from './guard.guard'; + +describe('guardGuard', () => { + const executeGuard: CanActivateFn = (...guardParameters) => + TestBed.runInInjectionContext(() => guardGuard(...guardParameters)); + + beforeEach(() => { + TestBed.configureTestingModule({}); + }); + + it('should be created', () => { + expect(executeGuard).toBeTruthy(); + }); +}); diff --git a/src/app/guard/guard.guard.ts b/src/app/guard/guard.guard.ts new file mode 100644 index 0000000..5af5762 --- /dev/null +++ b/src/app/guard/guard.guard.ts @@ -0,0 +1,21 @@ +import { inject } from '@angular/core'; +import { CanActivateFn, Router } from '@angular/router'; + +export const guardGuard: CanActivateFn = (route, state) => { + + + + const user = localStorage.getItem('user'); + + const router = inject(Router) + + if(user){ + + return true + + }else{ + alert("You must be logged in to view this page") + router.navigate(['login']) + return false + } +}; diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 17ffb72..ebda3be 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -1,18 +1,18 @@
-
+
- +
- - - + + +
- - Login + + Login
Don't have an account? Create one here
 diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index 2cfbaf5..9cf1811 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Message } from 'primeng/api'; +import { AuthService } from '../shared/auth.service'; @Component({ selector: 'app-login', @@ -11,8 +12,11 @@ export class LoginComponent implements OnInit { messages!: Message[]; + email!:string + password!:string; + - constructor(private route: Router){} + constructor(private route: Router, private authService: AuthService){} ngOnInit(): void { } @@ -20,7 +24,12 @@ export class LoginComponent implements OnInit { - login(){ + login(email:string, password:string){ + this.authService.signIn(email, password).then((res)=>{ + localStorage.setItem('user', res.user.uid); + console.log(res.user); + + }) this.messages = [{ severity: 'success', summary: 'Success', detail: 'Message Content' }]; // this.route.navigate(['/dashboard']) } diff --git a/src/app/prime-components/prime-components.module.ts b/src/app/prime-components/prime-components.module.ts index 7389dcc..9aea394 100644 --- a/src/app/prime-components/prime-components.module.ts +++ b/src/app/prime-components/prime-components.module.ts @@ -20,6 +20,7 @@ import { DialogModule } from 'primeng/dialog'; import { DynamicDialogModule } from 'primeng/dynamicdialog'; import { DropdownModule } from 'primeng/dropdown'; import { SkeletonModule } from 'primeng/skeleton'; +import { PasswordModule } from 'primeng/password'; @@ -49,7 +50,8 @@ import { SkeletonModule } from 'primeng/skeleton'; DialogModule, DynamicDialogModule, DropdownModule, - SkeletonModule + SkeletonModule, + PasswordModule ], exports:[ ButtonModule, @@ -71,7 +73,8 @@ import { SkeletonModule } from 'primeng/skeleton'; DialogModule, DynamicDialogModule, DropdownModule, - SkeletonModule + SkeletonModule, + PasswordModule ] }) export class PrimeComponentsModule { } diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html index b544d8c..082fb75 100644 --- a/src/app/register/register.component.html +++ b/src/app/register/register.component.html @@ -1,18 +1,18 @@
- -
+ +
- +
- - - + + +
- Sign Up + Sign Up
Already have an account? Signin here
diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts index 21b57cf..b7c0227 100644 --- a/src/app/register/register.component.ts +++ b/src/app/register/register.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Message } from 'primeng/api'; +import { AuthService } from '../shared/auth.service'; @Component({ selector: 'app-register', @@ -11,17 +12,32 @@ export class RegisterComponent implements OnInit { messages!: Message[]; + email!:string + password!:string; + - constructor(private route: Router){} + constructor(private route: Router, private authService: AuthService){} ngOnInit(): void { + + + + } - createAccount(){ - this.route.navigate(['/verify']) + createAccount(email:string, password:string){ + + this.authService.createAccount(email, password).then((res)=>{ + + localStorage.setItem('user', res.user.uid) + console.log(res.user); + }, err =>{ + console.log(err.message); + }) + // this.route.navigate(['/verify']) } } diff --git a/src/app/shared/auth.service.spec.ts b/src/app/shared/auth.service.spec.ts new file mode 100644 index 0000000..f1251ca --- /dev/null +++ b/src/app/shared/auth.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthService } from './auth.service'; + +describe('AuthService', () => { + let service: AuthService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AuthService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/shared/auth.service.ts b/src/app/shared/auth.service.ts new file mode 100644 index 0000000..c0c3c14 --- /dev/null +++ b/src/app/shared/auth.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core'; +import { signInAnonymously, signInWithEmailAndPassword, signOut, Auth, createUserWithEmailAndPassword, authState } from '@angular/fire/auth'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthService { + + constructor(private auth: Auth) { } + + createAccount(email:string, password:string){ + return createUserWithEmailAndPassword(this.auth, email, password); + } + + signIn(email:string, password:string){ + return signInWithEmailAndPassword(this.auth, email, password) + } + + signOut(){ + return signOut(this.auth) + } + + currentUser(){ + authState(this.auth) + } +} diff --git a/src/app/shared/service.service.ts b/src/app/shared/service.service.ts index 6ce6618..658df86 100644 --- a/src/app/shared/service.service.ts +++ b/src/app/shared/service.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { collection, addDoc, Firestore, collectionData } from '@angular/fire/firestore'; +import { collection, addDoc, Firestore, collectionData, } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; @Injectable({ @@ -7,7 +7,7 @@ import { Observable } from 'rxjs'; }) export class ServiceService { - expneses!:Observable + // expneses!:Observable constructor(private firestore : Firestore) { } @@ -18,8 +18,13 @@ export class ServiceService { } getExpenses(){ - const colRef = collection(this.firestore, 'Expenses'); - return this.expneses = collectionData(colRef, {idField: 'id'},) + const colRef = collection(this.firestore, 'Expenses') + return collectionData(colRef) + } + + getExpensesID(id:string){ + const colRef = collection(this.firestore, `Expenses/${{id}}`) + return collectionData(colRef, {idField: 'id'},) } }