Taobin-Recipe-Manager/client/src/app/core/auth/auth.component.html

<main class="flex flex-col justify-around h-[100vh] bg-[#EAE6E1]">
  <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
        class="mx-auto h-[200px] w-auto"
        src="/assets/logo.png"
        alt="Tao Bin | Forth Vanding Machine"
      />
      <h2
        class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
      >
        Sign in with your @Forth account
      </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>
        <!-- <asl-google-signin-button
          type="standard"
          shape="pill"
          text="signin_with"
          size="large"
          logo_alignment="center"
          theme="outline"
          width="400"
        ></asl-google-signin-button> -->
        <!-- <div
          id="g_id_onload"
          data-client_id="250904650832-atnankrca4pvegjofnp24hmefjke4doq.apps.googleusercontent.com"
          data-context="use"
          data-ux_mode="popup"
          data-callback="handleCredentialResponse"
          data-itp_support="true"
          data-moment_callback="handleMoment"
        ></div>

        <div
          class="g_id_signin"
          data-type="standard"
          data-shape="pill"
          data-theme="outline"
          data-text="signin_with"
          data-size="large"
          data-logo_alignment="center"
          data-width="400"
        ></div> -->
      </div>
    </div>
  </div>
</main>