Merge pull request #12 from Iheanemegregory-9/backup_branch

Backup branch

src/app/dashboard/expenses/expenses.component.html

@@ -96,9 +96,9 @@
         <e-column field='price' headerText='Price'>
 
         </e-column>
-        <e-column field='date' format='yMd' headerText='Date'>
+        <!-- <e-column field='date' format='yMd' headerText='Date'>
             
-        </e-column>
+        </e-column> -->
     </e-columns>
 
 </ejs-grid>

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;
     })
   }

src/app/dashboard/header/header.component.html

@@ -1,7 +1,9 @@
 <div class="menu card">
     <p-menubar [model]="menuItems">
         <ng-template pTemplate="end">
-            <p-button label="Get Started" icon="pi pi-sign-out" [loading]="loading" routerLink="/register"></p-button>
+            <p-button label="Get Started" icon="pi pi-sign-out" [loading]="loading" routerLink="/register" [hidden]="isLoggedIn"></p-button>
+
+            <p-button label="Sign Out" [hidden]="!isLoggedIn" icon="pi pi-sign-out" [loading]="loading" routerLink="/register"></p-button>
         </ng-template>
     </p-menubar> 
 </div>

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')
+    })
   }
 
 }

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();
+  });
+});

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
+  }
+};

src/app/login/login.component.html

@@ -1,18 +1,18 @@
 <div class="flex justify-content-center align-item-center h-screen">
         <p-card header="Login to your account" class="w-full xl:w-6" >
-            <form class="">
+            <form #f="ngForm">
                 <div class="flex flex-column gap-3 mb-3 animate-width animation-duration-500">
                     <label htmlFor="username">Email</label>
-                    <input pInputText id="username" aria-describedby="username-help" />
+                    <input pInputText name="email" [(ngModel)]="email" />
                     <!-- <small id="username-help">Enter your email address.</small> -->
                 </div>
                 <div class="flex flex-column gap-3 mb-3 animate-width animation-duration-500">
-                    <label htmlFor="username">Password</label>
-                    <input pInputText id="username" aria-describedby="username-help" />
-                    <!-- <small id="username-help">Enter your username to reset your password.</small> -->
+                    <label htmlFor="password">Password</label>
+                    <p-password [(ngModel)]="password" name="password" [toggleMask]="true"></p-password>
+                    <!-- <small id="username-help">Enter your username to reset your pasword.</small> -->
                 </div>
-
-                <p-button (onClick)="login()" class="animate-width animation-duration-500">Login</p-button>
+    
+                <p-button (onClick)="login(email, password)" class="animate-width animation-duration-500">Login</p-button>
             </form>
             <h5 class="mt-4">Don't have an account? <a routerLink="/register">Create one here</a></h5>
         </p-card>

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,16 +12,24 @@ export class LoginComponent implements OnInit {
 
   messages!: Message[];
 
+  email!:string
+  password!:string;
+
 
-  constructor(private route: Router){}
+  constructor(private route: Router, private authService: AuthService){}
 
   ngOnInit(): void {
   }
 
 
 
 
-  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'])
   }

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 { }

src/app/register/register.component.html

@@ -1,18 +1,18 @@
 <div class="flex justify-content-center align-item-center h-screen ">
-    <p-card header="Login to your account" class="w-full xl:w-6" >
-        <form class="">
+    <p-card header="Create an account" class="w-full xl:w-6" >
+        <form #f="ngForm">
             <div class="flex flex-column gap-3 mb-3 animate-width animation-duration-500">
                 <label htmlFor="username">Email</label>
-                <input pInputText id="username" aria-describedby="username-help" />
+                <input pInputText name="email" [(ngModel)]="email" />
                 <!-- <small id="username-help">Enter your email address.</small> -->
             </div>
             <div class="flex flex-column gap-3 mb-3 animate-width animation-duration-500">
-                <label htmlFor="username">Password</label>
-                <input pInputText id="username" aria-describedby="username-help" />
-                <!-- <small id="username-help">Enter your username to reset your password.</small> -->
+                <label htmlFor="password">Password</label>
+                <p-password [(ngModel)]="password" name="password" [toggleMask]="true"></p-password>
+                <!-- <small id="username-help">Enter your username to reset your pasword.</small> -->
             </div>
 
-            <p-button (onClick)="createAccount()" class="animate-width animation-duration-500">Sign Up</p-button>
+            <p-button (onClick)="createAccount(email, password)" class="animate-width animation-duration-500">Sign Up</p-button>
         </form>
         <h5 class="mt-4">Already have an account? <a routerLink="/login">Signin here</a></h5>
     </p-card>

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'])
   }
 
 }

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();
+  });
+});

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)
+  }
+}

src/app/shared/service.service.ts

@@ -1,13 +1,13 @@
 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({
   providedIn: 'root'
 })
 export class ServiceService {
 
-  expneses!:Observable<any>
+  // expneses!:Observable<any>
 
 
   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'},)
   }
 
 }