style: update fireblog ui

Sye0w · Oct 3, 2024 · 9dda20a · 9dda20a
1 parent cc122da
commit 9dda20a
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 38 deletions.
diff --git a/src/app/components/fireblog-page/fireblog-page.component.html b/src/app/components/fireblog-page/fireblog-page.component.html
@@ -7,7 +7,7 @@
   <mat-sidenav-content>
     <div class="fireblog-content">
       <section class="posts-section">
-        <h2>Fireblog Posts</h2>
+        <h2><span>Fire</span>blog Posts</h2>
         <ul>
           <app-post-card *ngFor="let post of blogPosts" [blogPost]="post"></app-post-card>
         </ul>

diff --git a/src/app/components/fireblog-page/fireblog-page.component.scss b/src/app/components/fireblog-page/fireblog-page.component.scss
@@ -1,4 +1,5 @@
 @use '../../../partials/variables' as *;
+@use '../../../partials/mixins' as *;
 
 .fireblog-container {
   padding-top: 2rem;
@@ -47,12 +48,34 @@
 
           max-height: 45rem;
           overflow-y: auto;
+
+          &::-webkit-scrollbar {
+            width: 8px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #fff;
+            border-radius: 4px;
+          }
+
+          &::-webkit-scrollbar-thumb:hover {
+            background: darken(#fff, 10%);
+          }
         }
 
         h2 {
+          @include title-text;
           text-align: center;
           color: $blueviolet;
           font-family: $titlefont;
+          span {
+            @include gradient-text;
+          }
         }
       }
     }

diff --git a/src/app/components/likes/likes/likes.component.html b/src/app/components/likes/likes/likes.component.html
@@ -2,7 +2,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" width="15" viewBox="0 0 24 24" fill="#C5C6EF">
     <path d="M7.493 18.5c-.425 0-.82-.236-.975-.632A7.48 7.48 0 0 1 6 15.125c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75A.75.75 0 0 1 15 2a2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23h-.777ZM2.331 10.727a11.969 11.969 0 0 0-.831 4.398 12 12 0 0 0 .52 3.507C2.28 19.482 3.105 20 3.994 20H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 0 1-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227Z" />
   </svg>
-  <div class="likes-count" matBadge="{{ likesCount }}" matBadgePosition="above after" matBadgeColor="accent" [matBadgeHidden]="likesCount || 0">
+  <div class="likes-count" matBadge="{{ likesCount }}" matBadgePosition="above after" matBadgeColor="accent" [matBadgeHidden]="likesCount ">
     <img id="likes" src="../../../assets/images/likes.svg" alt="Likes">
   </div>
   <svg xmlns="http://www.w3.org/2000/svg" width="15" viewBox="0 0 24 24" fill="#C5C6EF">

diff --git a/src/app/components/post-card/post-card.component.html b/src/app/components/post-card/post-card.component.html
@@ -1,19 +1,19 @@
-  <li class="post-card">
-    <app-likes [likesCount]="blogPost.likes"/>
-    <section class="content">
-      <div class="content-head">
-        <div class="title">
-          <img [src]="blogPost.user.image || '../../../assets/images/avatars/default-avatar.png'" [alt]="blogPost.user.username">
-          <h3>{{ blogPost.user.username }}</h3>
-          <p>{{ getTimeSince(blogPost.createdAt) }}</p>
-        </div>
-        <div class="comments">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#5357B6">
-            <path fill-rule="evenodd" d="M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 0 0 1.28.53l4.184-4.183a.39.39 0 0 1 .266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0 0 12 2.25ZM8.25 8.625a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm2.625 1.125a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
-          </svg>
-          <p>{{ blogPost.comments.length }} comments</p>
-        </div>
+<li class="post-card">
+  <app-likes [likesCount]="blogPost.likes"/>
+  <section class="content">
+    <div class="content-head">
+      <div class="title">
+        <img [src]="blogPost.user.image || randomAvatarUrl" [alt]="blogPost.user.username">
+        <h3>{{ blogPost.user.username || 'Non' }}</h3>
+        <p>{{ getTimeSince(blogPost.createdAt) }}</p>
       </div>
-      <p>{{ blogPost.content }}</p>
-    </section>
-  </li>
+      <div class="comments">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 24 24" fill="#5357B6">
+          <path fill-rule="evenodd" d="M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 0 0 1.28.53l4.184-4.183a.39.39 0 0 1 .266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0 0 12 2.25ZM8.25 8.625a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm2.625 1.125a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z" clip-rule="evenodd" />
+        </svg>
+        <p>{{ blogPost.comments.length }} comments</p>
+      </div>
+    </div>
+    <p>{{ blogPost.content }}</p>
+  </section>
+</li>
diff --git a/src/app/components/post-card/post-card.component.ts b/src/app/components/post-card/post-card.component.ts
@@ -12,6 +12,16 @@ import { IBlog } from '../../services/blog.interface';
 })
 export class PostCardComponent {
   @Input() blogPost!: IBlog;
+  randomAvatarUrl: string = '';
+
+  ngOnInit() {
+    this.generateRandomAvatarUrl();
+  }
+
+  generateRandomAvatarUrl() {
+    const seed = Math.random().toString(36).substring(7);
+    this.randomAvatarUrl = `https://api.dicebear.com/9.x/thumbs/svg?seed=${seed}`;
+  }
 
   getTimeSince(createdAt: string): string {
     const now = new Date();

diff --git a/src/app/views/auth/user-profile/user-profile.component.html b/src/app/views/auth/user-profile/user-profile.component.html
@@ -1,24 +1,24 @@
 <section>
   <h3>User Profile</h3>
-  <form class="profile-form">
+  <form class="profile-form" (ngSubmit)="saveChanges()">
     <div class="profile-image">
-      <img id="profile-img" #userAvatar src="../../../assets/images/avatars/image-juliusomo.png" alt="User Avatar" id="userAvatar">
-      <button mat-mini-fab color="primary" class="upload-btn" (click)="onUploadButtonClick()">
+      <img id="profile-img" #userAvatar [src]="user.image || '../../../assets/images/avatars/image-juliusomo.png'" alt="User Avatar" id="userAvatar">
+      <button mat-mini-fab color="primary" class="upload-btn" type="button" (click)="onUploadButtonClick()">
         <mat-icon>add_a_photo</mat-icon>
       </button>
       <input #imageUpload type="file" id="imageUpload" accept="image/*" style="display: none;" (change)="onImageSelected($event)">
     </div>
     <mat-form-field appearance="outline">
       <mat-label>Username</mat-label>
-      <input matInput placeholder="Enter your username">
+      <input matInput [(ngModel)]="user.username" name="username" placeholder="Enter your username">
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-label>Email</mat-label>
-      <input matInput placeholder="Enter your email" type="email">
+      <input matInput [(ngModel)]="user.email" name="email" placeholder="Enter your email" type="email">
     </mat-form-field>
     <div class="button-group">
-      <button mat-raised-button color="primary" (click)="saveChanges()">Save Changes</button>
-      <button mat-raised-button color="warn" (click)="logOut()">Log Out</button>
+      <button mat-raised-button color="primary" type="submit">Save Changes</button>
+      <button mat-raised-button color="warn" type="button" (click)="logOut()">Log Out</button>
     </div>
   </form>
 </section>
diff --git a/src/app/views/auth/user-profile/user-profile.component.ts b/src/app/views/auth/user-profile/user-profile.component.ts
@@ -1,11 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+// import { Router } from 'express';
+import { AuthService } from '../../../services/auth/auth.service';
+import { IUser } from '../../../services/blog.interface';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-user-profile',
@@ -23,14 +27,37 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
   styleUrl: './user-profile.component.scss'
 })
 
-export class UserProfileComponent {
-logOut() {
-throw new Error('Method not implemented.');
-}
+export class UserProfileComponent implements OnInit {
   @ViewChild('imageUpload') imageUpload!: ElementRef<HTMLInputElement>;
   @ViewChild('userAvatar') userAvatar!: ElementRef<HTMLImageElement>;
 
-  constructor(private snackBar: MatSnackBar) {}
+  user: IUser = {
+    email: '',
+    password: '',
+    image: '',
+    username: '',
+    uid: ''
+  };
+
+  constructor(
+    private authService: AuthService,
+    private snackBar: MatSnackBar,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.authService.user$.subscribe((user) => {
+      if (user) {
+        this.user = {
+          email: user.email || '',
+          password: '',
+          image: user.photoURL || '',
+          username: user.displayName || '',
+          uid: user.uid
+        };
+      }
+    });
+  }
 
   onUploadButtonClick() {
     this.imageUpload.nativeElement.click();
@@ -44,16 +71,40 @@ throw new Error('Method not implemented.');
       reader.onload = (e: ProgressEvent<FileReader>) => {
         if (e.target && e.target.result && this.userAvatar) {
           this.userAvatar.nativeElement.src = e.target.result as string;
+          this.user.image = e.target.result as string;
         }
       };
       reader.readAsDataURL(file);
     }
   }
 
-  saveChanges() {
-    // Implement save functionality here
-    this.snackBar.open('Changes saved successfully', 'Close', {
-      duration: 3000,
-    });
+  async saveChanges() {
+    try {
+      await this.authService.updateUserProfile(this.user);
+      this.snackBar.open('Profile updated successfully', 'Close', {
+        duration: 3000,
+      });
+    } catch (error) {
+      console.error('Error updating profile:', error);
+      let errorMessage = 'An unexpected error occurred while updating the profile.';
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+      this.snackBar.open(`Error updating profile: ${errorMessage}`, 'Close', {
+        duration: 5000,
+      });
+    }
+  }
+
+  async logOut() {
+    try {
+      await this.authService.logout();
+      this.router.navigate(['/login']);
+    } catch (error) {
+      console.error('Error logging out:', error);
+      this.snackBar.open('Error logging out', 'Close', {
+        duration: 3000,
+      });
+    }
   }
 }
diff --git a/src/assets/Fonts/Age-Normal.woff2 b/src/assets/Fonts/Age-Normal.woff2