From 734a708ac0e2b989a576edfcacd329720cbad4bb Mon Sep 17 00:00:00 2001
From: weebao <baochidangg@gmail.com>
Date: Sun, 24 Aug 2025 20:02:59 +0000
Subject: [PATCH 1/5] Fix infinite loading bug in Google OAuth callback form -
 Scout jam:
 [74c93e4f-3ac1-4a42-917c-e211ec198b0c](https://scout.new/jam/74c93e4f-3ac1-4a42-917c-e211ec198b0c)

Co-authored-by: Scout <scout@scout.new>
---
 docs/changes.md                               | 10 +++
 .../login/google/callback/+page.server.ts     | 15 +++-
 .../(auth)/login/google/callback/+page.svelte | 86 ++++++++++---------
 3 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/docs/changes.md b/docs/changes.md
index 4d5989e..c613517 100644
--- a/docs/changes.md
+++ b/docs/changes.md
@@ -2,6 +2,16 @@
 
 Keep up with the latest updates here :D
 
+## 2025-08-24
+
+### Fixed
+
+- Fixed infinite loading bug when saving profile on Google OAuth callback page with existing username ([#TBD](https://github.com/beatcode-official/client/pull/TBD))
+- Added proper field-specific error messages for Google OAuth registration form
+- Implemented consistent error handling patterns across authentication forms
+
+---
+
 ## 2025-04-30
 
 ## Fixed
diff --git a/src/routes/(auth)/login/google/callback/+page.server.ts b/src/routes/(auth)/login/google/callback/+page.server.ts
index 48efebb..c803280 100644
--- a/src/routes/(auth)/login/google/callback/+page.server.ts
+++ b/src/routes/(auth)/login/google/callback/+page.server.ts
@@ -47,16 +47,25 @@ export const actions = {
 
         try {
             const response = await registerWithGoogle(form.data, cookies);
+            if (response.status === 400) {
+                const message: string = response.error.detail;
+                if (message.toLowerCase().includes("username")) {
+                    form.errors.username = [message];
+                } else if (message.toLowerCase().includes("email")) {
+                    form.errors.email = [message];
+                }
+                return fail(400, { form, message });
+            }
             if (response.status >= 400) {
-                return fail(response.status, { form, error: response.error.detail });
+                return fail(response.status, { form, message: response.error.detail });
             }
             redirect(302, "/");
         } catch (e: unknown) {
             if (isRedirect(e)) throw e;
             if (isHttpError(e)) {
-                return fail(e.status, { form, error: "Something went wrong in the server" });
+                return fail(e.status, { form, message: "Something went wrong in the server" });
             }
-            return fail(500, { form, error: "An unexpected error occurred" });
+            return fail(500, { form, message: "An unexpected error occurred" });
         }
     }
 };
diff --git a/src/routes/(auth)/login/google/callback/+page.svelte b/src/routes/(auth)/login/google/callback/+page.svelte
index f7c615d..33c9cab 100644
--- a/src/routes/(auth)/login/google/callback/+page.svelte
+++ b/src/routes/(auth)/login/google/callback/+page.svelte
@@ -15,22 +15,28 @@
 
     import { announce } from "$lib/utils";
     import { onMount } from "svelte";
-    import { fromStore } from "svelte/store";
 
     let { data }: PageProps = $props();
 
-    let registerForm = $state<any>();
-    let isSubmitting = $state<boolean>(false);
+    let form = $state<any>();
+    let formData = $state<any>();
+    let submitting = $state<any>();
+    let enhance = $state<any>();
 
     onMount(() => {
         if (data.status === "success" && data.form) {
-            registerForm = superForm<Infer<typeof RegisterWithGoogleSchema>>(data.form, {
+            const registerForm = superForm<Infer<typeof RegisterWithGoogleSchema>>(data.form, {
                 onResult: async ({ result }) => {
                     if (result.type === "redirect") {
                         announce(result, "Account created successfully");
                     }
                 }
             });
+            form = registerForm;
+            const { form: fd, submitting: sub, enhance: enh } = registerForm;
+            formData = fd;
+            submitting = sub;
+            enhance = enh;
         }
     });
 </script>
@@ -55,62 +61,64 @@
             </div>
         </Card.Header>
         <Card.Content class="text-center">
-            {#if registerForm}
-                {@const { enhance } = registerForm}
-                {@const registerFormData = fromStore<RegisterWithGoogleData>(
-                    registerForm.form
-                ).current}
-                <form method="POST" use:enhance onsubmit={() => (isSubmitting = true)}>
+            {#if form && formData}
+                <form method="POST" use:enhance>
                     <div class="space-y-4">
-                        <Form.Field form={registerForm} name="username">
+                        <Form.Field {form} name="username">
                             <Form.Control>
-                                <Input
-                                    value={registerFormData.username}
-                                    name="username"
-                                    type="text"
-                                    placeholder="Username"
-                                    required
-                                />
+                                {#snippet children({ props })}
+                                    <Input
+                                        {...props}
+                                        bind:value={$formData.username}
+                                        type="text"
+                                        placeholder="Username"
+                                        required
+                                    />
+                                {/snippet}
                             </Form.Control>
                             <Form.FieldErrors />
                         </Form.Field>
 
-                        <Form.Field form={registerForm} name="display_name">
+                        <Form.Field {form} name="display_name">
                             <Form.Control>
-                                <Input
-                                    value={registerFormData.display_name}
-                                    name="display_name"
-                                    type="text"
-                                    placeholder="Display Name"
-                                    required
-                                />
+                                {#snippet children({ props })}
+                                    <Input
+                                        {...props}
+                                        bind:value={$formData.display_name}
+                                        type="text"
+                                        placeholder="Display Name"
+                                        required
+                                    />
+                                {/snippet}
                             </Form.Control>
                             <Form.FieldErrors />
                         </Form.Field>
 
-                        <Form.Field form={registerForm} name="email">
+                        <Form.Field {form} name="email">
                             <Form.Control>
-                                <Input
-                                    value={registerFormData.email}
-                                    name="email"
-                                    type="email"
-                                    placeholder="Email"
-                                    required
-                                    readonly
-                                />
+                                {#snippet children({ props })}
+                                    <Input
+                                        {...props}
+                                        bind:value={$formData.email}
+                                        type="email"
+                                        placeholder="Email"
+                                        required
+                                        readonly
+                                    />
+                                {/snippet}
                             </Form.Control>
                             <Form.FieldErrors />
                         </Form.Field>
 
-                        <input type="hidden" name="google_id" value={registerFormData.google_id} />
+                        <input type="hidden" name="google_id" bind:value={$formData.google_id} />
                         <input
                             type="hidden"
                             name="avatar_url"
-                            value={registerFormData.avatar_url}
+                            bind:value={$formData.avatar_url}
                         />
 
-                        <Button type="submit" disabled={isSubmitting}>
-                            {#if isSubmitting}
+                        <Button type="submit" disabled={submitting ? $submitting : false}>
+                            {#if submitting && $submitting}
                                 <Loader2 class="mr-2 h-4 w-4 animate-spin" />
                                 Saving...
                             {:else}

From 9b1272aa0514eb535bee3ecc64a80e2924db70e3 Mon Sep 17 00:00:00 2001
From: weebao <baochidangg@gmail.com>
Date: Sun, 24 Aug 2025 20:06:15 +0000
Subject: [PATCH 2/5] Update changelog with correct PR number - Scout jam:
 [74c93e4f-3ac1-4a42-917c-e211ec198b0c](https://scout.new/jam/74c93e4f-3ac1-4a42-917c-e211ec198b0c)

Co-authored-by: Scout <scout@scout.new>
---
 docs/changes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/changes.md b/docs/changes.md
index c613517..590502c 100644
--- a/docs/changes.md
+++ b/docs/changes.md
@@ -6,7 +6,7 @@ Keep up with the latest updates here :D
 
 ### Fixed
 
-- Fixed infinite loading bug when saving profile on Google OAuth callback page with existing username ([#TBD](https://github.com/beatcode-official/client/pull/TBD))
+- Fixed infinite loading bug when saving profile on Google OAuth callback page with existing username ([#107](https://github.com/beatcode-official/client/pull/107))
 - Added proper field-specific error messages for Google OAuth registration form
 - Implemented consistent error handling patterns across authentication forms
 

From f05faa5f17323af8b975572cb28b526d91737c8a Mon Sep 17 00:00:00 2001
From: weebao <baochidangg@gmail.com>
Date: Sun, 24 Aug 2025 20:16:30 +0000
Subject: [PATCH 3/5] Fix lint errors: remove unused import and format code -
 Scout jam:
 [74c93e4f-3ac1-4a42-917c-e211ec198b0c](https://scout.new/jam/74c93e4f-3ac1-4a42-917c-e211ec198b0c)

Co-authored-by: Scout <scout@scout.new>
---
 src/routes/(auth)/login/google/callback/+page.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/routes/(auth)/login/google/callback/+page.svelte b/src/routes/(auth)/login/google/callback/+page.svelte
index 33c9cab..5d3eb24 100644
--- a/src/routes/(auth)/login/google/callback/+page.svelte
+++ b/src/routes/(auth)/login/google/callback/+page.svelte
@@ -2,7 +2,7 @@
     import type { PageProps } from "./$types";
 
     import { type Infer, superForm } from "sveltekit-superforms";
-    import { type RegisterWithGoogleData, RegisterWithGoogleSchema } from "$models/auth";
+    import { RegisterWithGoogleSchema } from "$models/auth";
 
     import * as Card from "$components/ui/card";
     import { Button } from "$components/ui/button";
@@ -111,11 +111,7 @@
                         </Form.Field>
 
                         <input type="hidden" name="google_id" bind:value={$formData.google_id} />
-                        <input
-                            type="hidden"
-                            name="avatar_url"
-                            bind:value={$formData.avatar_url}
-                        />
+                        <input type="hidden" name="avatar_url" bind:value={$formData.avatar_url} />
 
                         <Button type="submit" disabled={submitting ? $submitting : false}>
                             {#if submitting && $submitting}

From bb9a0c4504bc1700b91e7bcc117339314906ccf5 Mon Sep 17 00:00:00 2001
From: weebao <baochidangg@gmail.com>
Date: Sun, 24 Aug 2025 20:32:48 +0000
Subject: [PATCH 4/5] Simplify changelog entry to match project style - Scout
 jam:
 [74c93e4f-3ac1-4a42-917c-e211ec198b0c](https://scout.new/jam/74c93e4f-3ac1-4a42-917c-e211ec198b0c)

Co-authored-by: Scout <scout@scout.new>
---
 docs/changes.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/changes.md b/docs/changes.md
index 590502c..73cc16b 100644
--- a/docs/changes.md
+++ b/docs/changes.md
@@ -6,9 +6,7 @@ Keep up with the latest updates here :D
 
 ### Fixed
 
-- Fixed infinite loading bug when saving profile on Google OAuth callback page with existing username ([#107](https://github.com/beatcode-official/client/pull/107))
-- Added proper field-specific error messages for Google OAuth registration form
-- Implemented consistent error handling patterns across authentication forms
+- Fixed infinite loading when saving profile during Google OAuth signup with existing username ([#107](https://github.com/beatcode-official/client/pull/107))
 
 ---
 

From 86237fdd221ef0fd8aada8450d50abc5679b3728 Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Sun, 24 Aug 2025 17:10:05 -0700
Subject: [PATCH 5/5] left align error message

---
 docs/changes.md                                      | 2 +-
 src/routes/(auth)/login/google/callback/+page.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/changes.md b/docs/changes.md
index 73cc16b..3440453 100644
--- a/docs/changes.md
+++ b/docs/changes.md
@@ -6,7 +6,7 @@ Keep up with the latest updates here :D
 
 ### Fixed
 
-- Fixed infinite loading when saving profile during Google OAuth signup with existing username ([#107](https://github.com/beatcode-official/client/pull/107))
+- Submit button no longer loads infinitely when signing in with an existing username through Google ([#107](https://github.com/beatcode-official/client/pull/107))
 
 ---
 
diff --git a/src/routes/(auth)/login/google/callback/+page.svelte b/src/routes/(auth)/login/google/callback/+page.svelte
index 5d3eb24..bef6830 100644
--- a/src/routes/(auth)/login/google/callback/+page.svelte
+++ b/src/routes/(auth)/login/google/callback/+page.svelte
@@ -60,7 +60,7 @@
                 {/if}
             </div>
         </Card.Header>
-        <Card.Content class="text-center">
+        <Card.Content>
             {#if form && formData}
                 <form method="POST" use:enhance>
                     <div class="space-y-4">