update firebase login

src/app/components/login/login.component.html

@@ -64,13 +64,15 @@
             mail.invalid ||
             !loginData.mail ||
             password.invalid ||
-            !loginData.password
+            !loginData.password ||
+            sharedService.isBtnDisabled
           "
         ></app-form-btn>
         <app-form-btn
           [class]="'btn-guest-login'"
           [type]="'button'"
           [value]="'Guest Log in'"
+          [disabled]="sharedService.isBtnDisabled"
           (click)="guestLogin()"
         ></app-form-btn>
       </div>

src/app/components/login/login.component.ts

@@ -4,6 +4,8 @@ import { FormsModule, NgForm } from '@angular/forms';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { FirebaseService } from '../../services/firebase.service';
 import { Router } from '@angular/router';
+import { LoginService } from '../../services/login.service';
+import { SharedService } from '../../services/shared.service';
 
 @Component({
   selector: 'app-login',
@@ -20,20 +22,22 @@ export class LoginComponent {
 
   constructor(
     private firebaseService: FirebaseService,
+    private loginSerivce: LoginService,
+    public sharedService: SharedService,
     private router: Router
   ) {}
 
   onSubmit(ngForm: NgForm) {
+    this.sharedService.isBtnDisabled = true;
     if (ngForm.submitted && ngForm.form.valid) {
+      this.loginSerivce.login(this.loginData);
     }
   }
 
   guestLogin() {
-    this.getUserIdInLocalStorage();
-    window.location.reload();
-  }
-
-  getUserIdInLocalStorage() {
-    localStorage.setItem('currentUser', JSON.stringify('5EX7gnwPPGEDbN186Rdw'));
+    this.sharedService.isBtnDisabled = true;
+    this.loginData.mail = 'guest@guestaccount.com';
+    this.loginData.password = 'guest@guestaccount.com';
+    this.onSubmit({ submitted: true, form: { valid: true } } as NgForm);
   }
 }

src/app/interfaces/user.interface.ts

@@ -1,5 +1,6 @@
 export interface User {
   id: string;
+  uId: string;
   firstName: string;
   lastName: string;
   email: string;

src/app/services/firebase.service.ts

@@ -110,6 +110,10 @@ export class FirebaseService implements OnDestroy {
     return this.getAllUsers().filter((user) => user.initials !== 'G');
   }
 
+  checkUserUID(userUid: string): User[] {
+    return this.getAllUsers().filter((user) => user.uId === userUid);
+  }
+
   getCurrentUserId() {
     let currentUser = localStorage.getItem('currentUser');
     if (currentUser !== null) {

src/app/services/login.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, inject } from '@angular/core';
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
+import { FirebaseService } from './firebase.service';
+import { Firestore, collection, query, where } from '@angular/fire/firestore';
+import { SharedService } from './shared.service';
+@Injectable({
+  providedIn: 'root',
+})
+export class LoginService {
+  firestore: Firestore = inject(Firestore);
+
+  constructor(
+    private firebaseService: FirebaseService,
+    public sharedService: SharedService
+  ) {}
+
+  login(loginData: { mail: string; password: string }) {
+    const auth = getAuth();
+
+    signInWithEmailAndPassword(auth, loginData.mail, loginData.password)
+      .then((userCredential) => {
+        const user = userCredential.user;
+        if (this.firebaseService.checkUserUID(user.uid).length > 0) {
+          this.getUserIdInLocalStorage(
+            this.firebaseService.checkUserUID(user.uid)[0].id
+          );
+          window.location.reload();
+        } else {
+          console.error('No user with this UID was found!');
+        }
+        this.sharedService.isBtnDisabled = false;
+      })
+      .catch((error) => {
+        console.error(error);
+        alert('Invalid email or password! Please try again.');
+        this.sharedService.isBtnDisabled = false;
+      });
+  }
+
+  getUserIdInLocalStorage(userId: string) {
+    localStorage.setItem('currentUser', JSON.stringify(userId));
+  }
+}

src/app/services/shared.service.ts

@@ -4,6 +4,7 @@ import { Injectable } from '@angular/core';
   providedIn: 'root',
 })
 export class SharedService {
+  isBtnDisabled: boolean = false;
   isAnyDialogOpen: boolean = false;
   isEditContactDialogOpen: boolean = false;
   isDeleteContactDialogOpen: boolean = false;

src/app/shared/components/buttons/form-btn/form-btn.component.scss

@@ -38,7 +38,7 @@
   cursor: pointer;
   &:hover {
     color: var(--light-blue);
-    border-color: var(--light-bluek);
+    border-color: var(--light-blue);
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
   }
 }
@@ -94,17 +94,24 @@
   padding: 12px 18px;
   margin: 12px;
   border-radius: 10px;
-  color: var(--black);
-  background-color: var(--white);
+  background-color: var(--light-gray);
   border: 1px solid var(--black);
   font-size: 23px;
   font-weight: 700;
   transition: 125ms ease-in-out;
   cursor: pointer;
-  &:hover {
+  &:hover:not(:disabled) {
     color: var(--light-blue);
-    border-color: var(--light-bluek);
+    border-color: var(--light-blue);
     box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+  &:not(:disabled) {
+    background-color: var(--white) !important;
+    color: var(--black);
+  }
+  &:hover {
+    cursor: default;
   }
 }