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