update model and remove unuse component

client/src/app/app.module.ts

@@ -2,21 +2,13 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
-import { FooterComponent } from './core/layout/footer.component';
-import { HeaderComponent } from './core/layout/header.component';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { ErrorInterceptor } from './core/interceptors/error.interceptor';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [
+  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
-    BrowserModule,
-    FooterComponent,
-    HeaderComponent,
-    AppRoutingModule,
-    HttpClientModule,
-  ],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

client/src/app/core/callback/callback.component.ts

@@ -22,8 +22,8 @@ export class CallbackComponent implements OnInit {
       if (params['email'] && params['name'] && params['picture']) {
         this.userService.setAuth({
           email: params['email'],
-          username: params['name'],
+          name: params['name'],
-          image: params['picture'],
+          picture: params['picture'],
         });
       }
 

client/src/app/core/layout/footer.component.html

@@ -1,9 +0,0 @@
-<footer class="p-10">
-  <div class="container">
-    <a class="logo-font" routerLink="/">conduit</a>
-    <span class="attribution">
-      &copy; {{ today | date : "yyyy" }}. An interactive learning project from
-      <a href="https://thinkster.io">Thinkster</a>. Code licensed under MIT.
-    </span>
-  </div>
-</footer>

client/src/app/core/layout/footer.component.ts

@@ -1,14 +0,0 @@
-import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { RouterLink } from '@angular/router';
-
-@Component({
-  selector: 'app-layout-footer',
-  templateUrl: './footer.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [DatePipe, RouterLink],
-  standalone: true,
-})
-export class FooterComponent {
-  today: number = Date.now();
-}

client/src/app/core/layout/header.component.html

@@ -1,58 +0,0 @@
-<!-- nav bar with logo -->
-<nav class="bg-primary">
-  <div class="flex items-center justify-between flex-wrap p-6">
-    <div class="flex items-center flex-shrink-0 text-black mr-6">
-      <img
-        class="h-20 mr-2"
-        src="/assets/logo.png"
-        alt="Tao Bin | Forth Vanding Machine"
-      />
-    </div>
-    <div class="flex flex-row">
-      <div class="flex flex-row items-center" *ngIf="user; else login_button">
-        <div class="flex flex-col items-center px-5">
-          <span
-            class="flex items-center text-primary text-xl font-normal font-kanit"
-          >
-            {{ date | date : "dd MMM yyyy" }}
-          </span>
-          <span
-            class="flex items-center text-primary text-xl font-normal font-kanit"
-          >
-            {{ user.username }}
-          </span>
-        </div>
-        <div class="relative" #dropdownMenu>
-          <img
-            class="h-16 rounded-full cursor-pointer"
-            src="{{ user.image }}"
-            loading="lazy"
-            alt="profile picture"
-            (click)="toggleDropdown()"
-          />
-
-          <!-- Dropdown Items -->
-          <div
-            class="absolute right-0 w-40 mt-2 py-2 bg-white rounded-md shadow-xl z-20"
-            *ngIf="isMenuOpen"
-          >
-            <ul>
-              <li>
-                <!-- logout button -->
-                <button
-                  class="flex items-center w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                  (click)="logout()"
-                >
-                  Logout
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <ng-template #login_button>
-        <app-google-button></app-google-button>
-      </ng-template>
-    </div>
-  </div>
-</nav>

client/src/app/core/layout/header.component.ts

@@ -1,60 +0,0 @@
-import { DatePipe, NgIf } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostListener,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { User } from '../models/user.model';
-import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
-import { UserService } from '../services/user.service';
-
-@Component({
-  selector: 'app-layout-header',
-  templateUrl: './header.component.html',
-  imports: [NgIf, GoogleButtonComponent, DatePipe],
-  standalone: true,
-})
-export class HeaderComponent implements OnInit {
-  user: User | null = null;
-  date: Date = new Date();
-  isMenuOpen = false;
-  @ViewChild('dropdownMenu') dropdownMenu: ElementRef | undefined;
-
-  constructor(
-    private userService: UserService,
-    private changeDetector: ChangeDetectorRef
-  ) {}
-
-  ngOnInit(): void {
-    this.userService.currentUser.subscribe((user) => (this.user = user));
-  }
-
-  @HostListener('document:click', ['$event'])
-  handleDocumentClick(event: Event) {
-    if (!this.dropdownMenu) {
-      return;
-    }
-
-    const targetNode = event.target as Node;
-    if (this.dropdownMenu.nativeElement.contains(targetNode)) {
-      // Click occurred inside the dropdown, do nothing
-      return;
-    }
-
-    // Click occurred outside the dropdown, close it
-    this.isMenuOpen = false;
-  }
-
-  toggleDropdown() {
-    this.isMenuOpen = !this.isMenuOpen;
-    this.changeDetector.detectChanges();
-  }
-
-  logout(): void {
-    this.userService.logout();
-  }
-}

client/src/app/core/layout/layout.component.html

@@ -49,7 +49,7 @@
               <span
                 class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
               >
-                {{ user?.username }}
+                {{ user?.name }}
               </span>
             </div>
             <button
@@ -61,7 +61,7 @@
               <span class="sr-only">Open user menu</span>
               <img
                 class="sm:h-10 md:h-14 rounded-full cursor-pointer"
-                src="{{ user?.image }}"
+                src="{{ user?.picture }}"
                 loading="lazy"
                 alt="profile picture"
               />
@@ -74,7 +74,7 @@
           >
             <div class="px-4 py-3" role="none">
               <p class="text-sm text-gray-900" role="none">
-                {{ user?.username }}
+                {{ user?.name }}
               </p>
               <p class="text-sm font-medium text-gray-900 truncate" role="none">
                 {{ user?.email }}

client/src/app/core/layout/layout.component.ts

@@ -1,8 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { HeaderComponent } from './header.component';
-import { FooterComponent } from './footer.component';
 import { RouterModule } from '@angular/router';
-import { SidebarComponent } from './sidebar.component';
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
@@ -20,16 +17,7 @@ interface MenuItem {
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   standalone: true,
-  imports: [
+  imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
-    HeaderComponent,
-    FooterComponent,
-    SidebarComponent,
-    RouterModule,
-    NgFor,
-    NgIf,
-    GoogleButtonComponent,
-    DatePipe,
-  ],
 })
 export class LayoutComponent implements OnInit {
   menuItems: MenuItem[] = [

client/src/app/core/layout/sidebar.component.html

@@ -1,152 +0,0 @@
-<aside class="w-64" aria-label="Sidebar">
-  <div class="px-3 py-4 overflow-y-auto rounded bg-primary">
-    <ul class="space-y-2">
-      <li>
-        <a
-          href="#"
-          class="flex items-center p-2 text-base font-normal text-primary rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
-            <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-          </svg>
-          <span class="ml-3">Dashboard</span>
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          target="_blank"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
-          <span
-            class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
-            >Pro</span
-          >
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          target="_blank"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
-            ></path>
-            <path
-              d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
-          <span
-            class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
-            >3</span
-          >
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Products</span>
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
-        </a>
-      </li>
-      <li>
-        <a
-          href="#"
-          class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-        >
-          <svg
-            class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-          <span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</aside>

client/src/app/core/layout/sidebar.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-layout-sidebar',
-  templateUrl: './sidebar.component.html',
-  standalone: true,
-})
-export class SidebarComponent {}

client/src/app/core/models/user.model.ts

@@ -1,5 +1,5 @@
 export interface User {
   email: string;
-  username: string;
+  name: string;
-  image: string;
+  picture: string;
 }

client/src/app/features/dashboard/dashboard.component.ts

@@ -3,6 +3,7 @@ import { UserService } from 'src/app/core/services/user.service';
 import { HttpClient } from '@angular/common/http';
 import { User } from 'src/app/core/models/user.model';
 import { NgIf } from '@angular/common';
+import { initFlowbite } from 'flowbite';
 
 @Component({
   selector: 'app-dashboard',
@@ -16,6 +17,8 @@ export class DashboardComponent implements OnInit {
   constructor(private _userService: UserService) {}
 
   ngOnInit(): void {
+    initFlowbite();
+
     this._userService.currentUser.subscribe((user) => {
       this.userInfo = user;
     });