checking again

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -11,4 +12,7 @@ import { RouterOutlet } from '@angular/router';
 })
 export class AppComponent {
   title = 'brevi-post';
+  showHeader: boolean = true;
+
+
 }

src/app/app.routes.ts

@@ -2,10 +2,11 @@ import { Routes } from '@angular/router';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
 import { FeedComponent } from './feed/feed.component';
+import { authGuard } from './shared/services/guard/auth.guard';
 
 export const routes: Routes = [
     { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
     { path: 'sign-in', component: SignInComponent },
     { path: 'register-user', component: SignUpComponent },
-    { path: 'feed', component: FeedComponent }
+    { path: 'feed', component: FeedComponent, canActivate: [authGuard] }
 ];

src/app/feed/feed.component.html

@@ -1 +1,24 @@
-<p>feed works!</p>
+<section class="feed-container">
+  <CustomButton [buttonName]="'Write'" />
+  <h2 class="feed-title">News Feed</h2>
+  <div class="feed-list">
+    <!-- Repeat this block for each post -->
+    <div class="feed-item">
+      <div class="author-info">
+        <div class="author-image"></div>
+        <div class="author-details">
+          <h3>Arjun Reddy</h3>
+          <p class="time-stamp">10 mins ago</p>
+        </div>
+      </div>
+      <p class="feed-content">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <div class="feed-interaction">
+        <!-- Interaction buttons go here (like, comment, etc.) -->
+      </div>
+    </div>
+    <!-- End of post block -->
+  </div>
+</section>

src/app/feed/feed.component.scss

@@ -0,0 +1,77 @@
+@import "../../partials/variables";
+
+.feed-container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+@media (max-width: 768px) {
+  .write-button {
+    padding: 10px 20px;
+    font-size: 0.9rem;
+  }
+}
+
+.feed-title {
+  color: #333;
+  margin-top: 30px;
+  text-align: center;
+}
+
+.feed-list {
+  margin-top: 20px;
+}
+
+.feed-item {
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.author-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.author-image {
+  width: 50px;
+  height: 50px;
+  background-color: #ddd; // Replace with the author's image
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.author-details {
+  h3 {
+    margin: 0;
+  }
+  .time-stamp {
+    color: #999;
+    font-size: 0.9em;
+  }
+}
+
+.feed-content {
+  color: #666;
+}
+
+//   .feed-interaction {
+//     // Add styles for interaction buttons
+//   }
+
+// Responsive styling
+@media (max-width: 768px) {
+  .feed-container {
+    padding: 10px;
+  }
+
+  .write-button {
+    padding: 8px 16px;
+  }
+
+  // Adjust other styles as needed for mobile responsiveness
+}

src/app/feed/feed.component.ts

@@ -1,12 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Auth } from '@angular/fire/auth';
+import { CustomButtonComponent } from '../shared/components/custom-button/custom-button.component';
 
 @Component({
   selector: 'app-feed',
   standalone: true,
-  imports: [],
+  imports: [CustomButtonComponent],
   templateUrl: './feed.component.html',
   styleUrl: './feed.component.scss'
 })
 export class FeedComponent {
 
+  auth: Auth = inject(Auth);
+
+  ngOnInit() {
+    console.log(this.auth.currentUser)
+  }
+
 }

src/app/shared/components/custom-button/custom-button.component.html

@@ -0,0 +1 @@
+<button class="write-button">{{ buttonName }}</button>

src/app/shared/components/custom-button/custom-button.component.scss

@@ -0,0 +1,29 @@
+@import "../../../../partials/variables";
+
+.write-button {
+  background-color: $accent-color;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  outline: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
+  display: inline-block;
+  margin-top: 20px;
+}
+
+.write-button:hover,
+.write-button:focus {
+  opacity: 0.7;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 768px) {
+  .write-button {
+    padding: 10px 20px;
+    font-size: 0.9rem;
+  }
+}

src/app/shared/components/custom-button/custom-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomButtonComponent } from './custom-button.component';
+
+describe('CustomButtonComponent', () => {
+  let component: CustomButtonComponent;
+  let fixture: ComponentFixture<CustomButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CustomButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/custom-button/custom-button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, signal } from '@angular/core';
+
+@Component({
+  selector: 'CustomButton',
+  standalone: true,
+  imports: [],
+  templateUrl: './custom-button.component.html',
+  styleUrl: './custom-button.component.scss'
+})
+export class CustomButtonComponent {
+
+  @Input() buttonName = "";
+}

src/app/shared/components/loader/loader.component.html

@@ -0,0 +1,3 @@
+<div class="full-page-loader">
+  <div class="logo-loader">BREVIPOST</div>
+</div>

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

@@ -0,0 +1,50 @@
+.full-page-loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes ellipsis {
+  0%,
+  100% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+}
+
+.logo-loader::after {
+  content: "";
+  animation: ellipsis 2s infinite;
+}
+
+.logo-loader {
+  font-size: 48px;
+  font-weight: bold;
+  color: transparent;
+  font-family: "Luckiest", sans-serif; /* Ensure this font is loaded or choose an alternative */
+  -webkit-text-stroke: 1px #ed546b;
+  background-image: repeating-linear-gradient(
+    45deg,
+    #ed546b,
+    #ed546b 2px,
+    transparent 2px,
+    transparent 10px
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+}

src/app/shared/components/loader/loader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'Loader',
+  standalone: true,
+  imports: [],
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss'
+})
+export class LoaderComponent {
+
+}

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

@@ -1,9 +1,28 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
+import { Auth, GoogleAuthProvider, signInWithPopup } from '@angular/fire/auth';
+import { Router } from '@angular/router';
+import { Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
 
-  constructor() { }
+  private readonly auth: Auth = inject(Auth);
+  private readonly router: Router = inject(Router);
+
+  signInWithGoogle() {
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(this.auth, provider)
+      .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        this.router.navigateByUrl('/feed')
+      }).catch((error) => {
+        const credential = GoogleAuthProvider.credentialFromError(error);
+      });
+  }
+
+  isAuthenticated$(): Observable<boolean> {
+    return of(this.auth.currentUser !== null);
+  }
 }

src/app/shared/services/guard/auth.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,19 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { take, tap, } from 'rxjs';
+import { AuthService } from '../auth/auth.service';
+
+export const authGuard: CanActivateFn = (route, state) => {
+
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  return authService.isAuthenticated$().pipe(
+    take(1),
+    tap((isAuthenticated: boolean) => {
+      if (!isAuthenticated) {
+        router.navigateByUrl('/sign-in');
+      }
+    })
+  );
+};