snackbar

src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet> <app-snackbar />

src/app/app.component.ts

@@ -1,18 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
+import { SnackbarComponent } from './shared/components/snackbar/snackbar.component';
+import { SnackbarService } from './shared/components/snackbar/snackbar.service';
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet],
+  imports: [CommonModule, RouterOutlet, SnackbarComponent],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'brevi-post';
   showHeader: boolean = true;
 
+  @ViewChild(SnackbarComponent) snackbarComponent!: SnackbarComponent;
+
+  private readonly snackbarService: SnackbarService = inject(SnackbarService);
+
+
+  ngAfterViewInit() {
+    this.snackbarService.bindSnackbarComponent(this.snackbarComponent);
+  }
 
 }

src/app/feed/feed.component.ts

@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { Auth } from '@angular/fire/auth';
 import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
+import { SnackbarService } from '../shared/components/snackbar/snackbar.service';
 
 @Component({
   selector: 'app-feed',
@@ -11,10 +12,11 @@ import { CustomButtonComponent } from '../shared/components/custom-button/custom
 })
 export class FeedComponent {
 
-  auth: Auth = inject(Auth);
+  private readonly auth: Auth = inject(Auth);
+  private readonly snackbarService: SnackbarService = inject(SnackbarService)
 
   ngOnInit() {
-    console.log(this.auth.currentUser)
+    this.snackbarService.show('Signed In Successfully', 5000);
   }
 
 }

src/app/shared/components/snackbar/snackbar.component.scss

@@ -0,0 +1,15 @@
+@import "../../../../partials/variables";
+
+.snackbar {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  color: black;
+  border-left: 5px solid $accent-color;
+  transform: translateX(-50%);
+  background-color: #fff;
+  padding: 16px;
+  text-align: center;
+  z-index: 1000;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
+}

src/app/shared/components/snackbar/snackbar.component.ts

@@ -0,0 +1,25 @@
+// snackbar.component.ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-snackbar',
+    standalone: true,
+    template: `
+    @if (show) {
+    <div class="snackbar" >
+      {{ message }}
+    </div>
+    }
+  `,
+    styleUrl: './snackbar.component.scss'
+})
+export class SnackbarComponent {
+    @Input() message: string = '';
+    show: boolean = false;
+
+    display(message: string, duration: number = 3000) {
+        this.message = message;
+        this.show = true;
+        setTimeout(() => this.show = false, duration);
+    }
+}

src/app/shared/components/snackbar/snackbar.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SnackbarService } from './snackbar.service';
+
+describe('SnackbarService', () => {
+  let service: SnackbarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SnackbarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/components/snackbar/snackbar.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { SnackbarComponent } from './snackbar.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnackbarService {
+  private snackbarComponent?: SnackbarComponent;
+
+  bindSnackbarComponent(component: SnackbarComponent) {
+    this.snackbarComponent = component;
+  }
+
+  show(message: string, duration: number = 3000) {
+    this.snackbarComponent?.display(message, duration);
+  }
+}

src/app/shared/services/auth/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable, inject } from '@angular/core';
 import { Auth, GoogleAuthProvider, signInWithPopup } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import { Observable, of } from 'rxjs';
+import { SnackbarService } from '../../components/snackbar/snackbar.service';
 
 @Injectable({
   providedIn: 'root'
@@ -10,15 +11,15 @@ export class AuthService {
 
   private readonly auth: Auth = inject(Auth);
   private readonly router: Router = inject(Router);
-
+  private readonly snackbarService: SnackbarService = inject(SnackbarService);
   signInWithGoogle() {
     const provider = new GoogleAuthProvider();
     signInWithPopup(this.auth, provider)
       .then((result) => {
-        const credential = GoogleAuthProvider.credentialFromResult(result);
+        this.snackbarService.show('Logged In Successfully');
         this.router.navigateByUrl('/feed')
       }).catch((error) => {
-        const credential = GoogleAuthProvider.credentialFromError(error);
+        this.snackbarService.show('Error in Logging in to the App');
       });
   }
 

src/app/sign-in/sign-in.component.ts

@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AuthService } from '../shared/services/auth/auth.service';
 import { LoaderComponent } from '../shared/components/loader/loader.component';
+import { SnackbarService } from '../shared/components/snackbar/snackbar.service';
 
 @Component({
   selector: 'app-sign-in',
@@ -23,6 +24,8 @@ export class SignInComponent {
   private readonly formBuilder: FormBuilder = inject(FormBuilder);
 
   private readonly authService: AuthService = inject(AuthService);
+  private readonly snackbarService: SnackbarService = inject(SnackbarService);
+
 
 
   ERROR_CODE: string = "";
@@ -42,6 +45,7 @@ export class SignInComponent {
       const { email, password } = this.loginForm.value;
       signInWithEmailAndPassword(this.auth, email, password)
         .then((result) => {
+          this.snackbarService.show('Signed In Successfully', 5000);
           this.router.navigateByUrl('/feed');
         })
         .catch((error) => {
@@ -75,10 +79,10 @@ export class SignInComponent {
       const email = this.loginForm.get('email')!.value;
       sendPasswordResetEmail(this.auth, email)
         .then(() => {
-          console.log('Password reset email sent');
+          this.snackbarService.show('Password reset email sent', 5000);
         })
         .catch((error) => {
-          console.error('Error sending password reset email: ', error);
+          this.snackbarService.show('Error sending password reset email', 2500);
         });
     }
   }

src/app/sign-up/sign-up.component.ts

@@ -1,10 +1,10 @@
 import { Component, inject } from '@angular/core';
-import { Auth, createUserWithEmailAndPassword, updateProfile } from '@angular/fire/auth';
+import { Auth, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithPopup, updateProfile } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { AuthService } from '../shared/services/auth/auth.service';
 import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
 import { FirestoreService } from '../shared/services/firestore/firestore.service';
+import { SnackbarService } from '../shared/components/snackbar/snackbar.service';
 
 @Component({
   selector: 'app-sign-up',
@@ -20,8 +20,8 @@ export class SignUpComponent {
   private readonly auth: Auth = inject(Auth);
   private readonly router: Router = inject(Router);
   private readonly formBuilder: FormBuilder = inject(FormBuilder);
+  private readonly snackbarService: SnackbarService = inject(SnackbarService);
 
-  private readonly authService: AuthService = inject(AuthService);
   private firestoreService: FirestoreService = inject(FirestoreService);
   constructor() {
     this.registerForm = this.formBuilder.group({
@@ -47,10 +47,10 @@ export class SignUpComponent {
           };
           this.firestoreService.addUserDetails(uid, userDetails)
             .then(() => {
-              console.log('User details added to Firestore');
+              this.snackbarService.show('User details added to Firestore');
             })
             .catch((error) => {
-              console.error('Error adding user details to Firestore', error);
+              this.snackbarService.show('Error adding user details to Firestore');
             });
           return updateProfile(userCredential.user, { displayName: name });
         })
@@ -64,11 +64,32 @@ export class SignUpComponent {
   }
 
   signInWithGoogle() {
-    this.authService.signInWithGoogle();
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(this.auth, provider)
+      .then((result) => {
+        const uid = result.user.uid;
+        const email = result.user.email;
+        const name = result.user.displayName;
+        const userDetails = {
+          uid,
+          name,
+          email,
+        };
+        this.firestoreService.addUserDetails(uid, userDetails)
+          .then(() => {
+            this.snackbarService.show('User details added to Firestore');
+          })
+          .catch((error) => {
+            this.snackbarService.show('Error adding user details to Firestore');
+          });
+        this.router.navigateByUrl('/feed')
+      }).catch((error) => {
+        this.snackbarService.show('Error in Registering new User');
+      });
   }
 
   toLoginPage() {
-    this.router.navigateByUrl('sign-in')
+    this.router.navigateByUrl('sign-in');
   }
 
 }