feat : add icon and introduce login with google

components/auth/account-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState, type FormEvent } from "react";
 import { EyeClosedIcon, EyeIcon } from "lucide-react";
@@ -33,12 +34,14 @@ export function AccountForm({
   mode,
   siteKey,
   nextPath,
+  googleEnabled,
   verified,
   verificationError,
 }: {
   mode: "login" | "register";
   siteKey: string;
   nextPath: string;
+  googleEnabled: boolean;
   verified?: boolean;
   verificationError?: boolean;
 }) {
@@ -109,6 +112,27 @@ export function AccountForm({
     };
   }, [captcha, siteKey, pendingEmail, captchaAttempt]);
 
+  async function signInWithGoogle() {
+    if (!googleEnabled || busy || (captcha && !token)) return;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await authClient.signIn.social({
+        provider: "google",
+        callbackURL: nextPath,
+        newUserCallbackURL: `/auth/register?step=profile&next=${encodeURIComponent(nextPath)}`,
+        fetchOptions: { headers: captcha ? { "x-captcha-response": token } : undefined },
+      });
+      if (result.error) throw new Error(result.error.message ?? "เข้าสู่ระบบไม่สำเร็จ");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "ลองอีกครั้ง");
+      setToken("");
+      if (widget.current) window.turnstile?.reset(widget.current);
+    } finally {
+      setBusy(false);
+    }
+  }
+
   async function sendRegistrationOtp() {
     if (!register || busy || (pendingEmail && resendSeconds > 0)) return;
     if (pendingEmail) {
@@ -276,6 +300,13 @@ export function AccountForm({
             }}>ข้ามการยืนยันอีเมลตอนนี้</Button>}
           </FieldGroup>
         </form>
+        {googleEnabled && !register && <>
+          <p className="text-center text-xs text-muted-foreground">หรือ</p>
+          <Button type="button" variant="outline" className="w-full" disabled={busy || (captcha && !token)} onClick={() => void signInWithGoogle()}>
+            <Image src="/icon/google.svg" alt="" width={18} height={18} data-icon="inline-start" />
+            เข้าสู่ระบบด้วย Google
+          </Button>
+        </>}
         {register ? <Button variant="link" nativeButton={false}
           render={<Link href={`/auth/login${nextPath === "/" ? "" : `?next=${encodeURIComponent(nextPath)}`}`} />}>
           มีบัญชีแล้ว? เข้าสู่ระบบ