update move login button to shared component

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

@@ -1,4 +1,4 @@
-<main class="flex flex-col justify-around h-[100vh] bg-[#EAE6E1]">
+<main class="flex flex-col justify-around h-[100vh] bg-primary">
   <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
       <img
@@ -13,18 +13,7 @@
       </h2>
       <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm flex justify-center">
         <!-- <div id="signin_google" #googleLoginButton></div> -->
-        <button
-          class="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
-          (click)="loginWithGoogle()"
-        >
-          <img
-            class="w-6 h-6"
-            src="assets/google-color.svg"
-            alt="google logo"
-            loading="lazy"
-          />
-          <span>Login with @foth.co.th Google account</span>
-        </button>
+        <app-google-button></app-google-button>
         <!-- <asl-google-signin-button
           type="standard"
           shape="pill"

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

@@ -1,35 +1,17 @@
 import { NgIf } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { Subject } from 'rxjs';
 import { Errors } from '../models/errors.model';
-import { UserService } from '../services/user.service';
-import jwtDecode from 'jwt-decode';
-import { HttpClient } from '@angular/common/http';
+import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-auth-page',
   templateUrl: './auth.component.html',
-  imports: [RouterLink, NgIf],
+  imports: [RouterLink, NgIf, GoogleButtonComponent],
   standalone: true,
 })
-export class AuthComponent implements OnInit, OnDestroy {
-  title = '';
-  errors: Errors = { errors: {} };
-  destroy$ = new Subject<void>();
-  constructor() {}
-
-  ngOnInit(): void {
-    this.title = 'Sign in';
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  loginWithGoogle(): void {
-    // redirect to google login in server
-    window.location.href = 'http://localhost:8080/auth/google';
-  }
+export class AuthComponent {
+  title = 'Login';
 }

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

@@ -1,3 +1,125 @@
-<header class="p-10">
-  <h1>This is Header</h1>
-</header>
+<!-- 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>
+        <img
+          class="h-16 rounded-full"
+          src="{{ user.image }}"
+          loading="lazy"
+          alt="profile picture"
+        />
+      </div>
+      <ng-template #login_button>
+        <app-google-button></app-google-button>
+      </ng-template>
+      <div
+        class="relative inline-block text-left text-gray-800"
+        (click)="closeMenu()"
+      >
+        <div>
+          <span class="rounded-md shadow-sm">
+            <button
+              (click)="isMenuOpen = !isMenuOpen"
+              type="button"
+              class="inline-flex items-center justify-between w-full rounded-md border border-gray-300 h-10 px-4 py-4 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-800 transition ease-in-out duration-150 btn-focus"
+              id="options-menu"
+              [attr.aria-haspopup]="isMenuOpen"
+              [attr.aria-expanded]="isMenuOpen"
+            >
+              <span> {{ label }} </span>
+              <img
+                src="https://s.svgbox.net/hero-solid.svg?ic=chevron-down&fill=grey-800"
+                class="-mr-1 ml-2 h-5 w-5"
+              />
+            </button>
+          </span>
+        </div>
+        <ng-container *ngIf="isMenuOpen">
+          <div
+            class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg text-sm overflow-hidden border z-20"
+          >
+            <div
+              class="rounded-md bg-white shadow-xs"
+              role="menu"
+              [attr.aria-orientation]="'vertical'"
+              [attr.aria-labelledby]="'options-menu'"
+            >
+              <div>
+                <div class="bg-gray-100 p-4 flex items-center">
+                  <div class="w-full">
+                    <img
+                      class="h-8 w-8 rounded-full mb-2"
+                      src="https://fayazz.co/fayaz.jpg"
+                      alt="avatar"
+                    />
+                    <p class="font-semibold text-base">Fayaz Ahmed</p>
+                    <button
+                      class="flex items-center justify-between w-full focus:outline-none"
+                    >
+                      <p class="text-gray-600">fayaz@email.com</p>
+                      <img
+                        src="https://s.svgbox.net/hero-solid.svg?ic=cog&fill=grey-700"
+                        class="h-4 w-4"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="border-t border-gray-100"></div>
+              <div class="py-1">
+                <a routerLink="/" class="p-4 flex items-center space-x-2">
+                  <img
+                    src="https://s.svgbox.net/hero-outline.svg?ic=currency-rupee"
+                    class="h-6 w-6"
+                  />
+                  <span> Transaction History </span>
+                </a>
+                <a routerLink="/" class="p-4 flex items-center space-x-2">
+                  <img
+                    src="https://s.svgbox.net/hero-outline.svg?ic=heart"
+                    class="h-6 w-6"
+                  />
+                  <span> Favourites </span>
+                </a>
+              </div>
+              <div class="border-t border-gray-100"></div>
+              <div class="py-1">
+                <a
+                  routerLink="/"
+                  (click)="isMenuOpen = false"
+                  class="p-4 flex items-center space-x-2"
+                >
+                  <img
+                    src="https://s.svgbox.net/hero-outline.svg?ic=logout"
+                    class="h-6 w-6"
+                  />
+                  <span> Logout </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</nav>

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

@@ -1,12 +1,28 @@
-import { NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { DatePipe, NgIf } from '@angular/common';
+import { Component, Input, OnInit } 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],
+  imports: [NgIf, GoogleButtonComponent, DatePipe],
   standalone: true,
 })
-export class HeaderComponent {
-  constructor() {}
+export class HeaderComponent implements OnInit {
+  user: User | null = null;
+  date: Date = new Date();
+  isMenuOpen = false;
+  label = 'Menu';
+
+  constructor(private userService: UserService) {}
+
+  ngOnInit(): void {
+    this.userService.currentUser.subscribe((user) => (this.user = user));
+  }
+
+  closeMenu(): void {
+    this.isMenuOpen = false;
+  }
 }

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

@@ -2,4 +2,4 @@
 
 <router-outlet></router-outlet>
 
-<app-layout-footer></app-layout-footer>
+<!-- <app-layout-footer></app-layout-footer> -->

client/src/app/shared/googleButton/googleButton.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-google-button',
+  template: `
+    <button
+      class="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
+      (click)="loginWithGoogle()"
+    >
+      <img
+        class="w-6 h-6"
+        src="assets/google-color.svg"
+        alt="google logo"
+        loading="lazy"
+      />
+      <span>Login with @foth.co.th Google account</span>
+    </button>
+  `,
+  standalone: true,
+})
+export class GoogleButtonComponent {
+  loginWithGoogle(): void {
+    // redirect to google login in server
+    window.location.href = environment.api + '/auth/google';
+  }
+}

client/src/index.html

@@ -7,6 +7,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="https://accounts.google.com/gsi/client" async></script>
+    <!-- <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Kanit"
+    /> -->
   </head>
   <body>
     <app-root></app-root>

client/src/styles.css

@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css?family=Kanit');

client/tailwind.config.js

@@ -2,7 +2,14 @@
 module.exports = {
   content: ["./src/**/*.{html,ts}"],
   theme: {
-    extend: {},
+    extend: {
+      "backgroundColor": {
+        "primary": "#EAE6E1",
+      },
+      "textColor": {
+        "primary": "#513C2F",
+      }
+    },
   },
   plugins: [],
 }