diff --git a/src/app/app.component.html b/src/app/app.component.html index 0680b43..7bb51a4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c5f1864..da86dca 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,14 @@ -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'] }) @@ -14,5 +16,13 @@ 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); + } } diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts index 9f5eada..bb4252c 100644 --- a/src/app/feed/feed.component.ts +++ b/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); } } diff --git a/src/app/shared/components/snackbar/snackbar.component.scss b/src/app/shared/components/snackbar/snackbar.component.scss new file mode 100644 index 0000000..f687d82 --- /dev/null +++ b/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); +} diff --git a/src/app/shared/components/snackbar/snackbar.component.ts b/src/app/shared/components/snackbar/snackbar.component.ts new file mode 100644 index 0000000..275a7d2 --- /dev/null +++ b/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) { +
+ {{ message }} +
+ } + `, + 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); + } +} diff --git a/src/app/shared/components/snackbar/snackbar.service.spec.ts b/src/app/shared/components/snackbar/snackbar.service.spec.ts new file mode 100644 index 0000000..3872524 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/shared/components/snackbar/snackbar.service.ts b/src/app/shared/components/snackbar/snackbar.service.ts new file mode 100644 index 0000000..1ae72d6 --- /dev/null +++ b/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); + } +} diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts index 58ad414..3fe7d89 100644 --- a/src/app/shared/services/auth/auth.service.ts +++ b/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'); }); } diff --git a/src/app/sign-in/sign-in.component.ts b/src/app/sign-in/sign-in.component.ts index ceb6c1c..03c6bd1 100644 --- a/src/app/sign-in/sign-in.component.ts +++ b/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); }); } } diff --git a/src/app/sign-up/sign-up.component.ts b/src/app/sign-up/sign-up.component.ts index 66edabf..c17fd5a 100644 --- a/src/app/sign-up/sign-up.component.ts +++ b/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'); } }