From 8e6e544ffe977fb6eeb536126185ef8e75770212 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Tue, 14 Apr 2026 19:50:40 -0300
Subject: [PATCH] feat: move Google login button above email/password form on
 login and register pages

---
 resources/js/pages/auth/Login.vue    |  94 +++++++------
 resources/js/pages/auth/Register.vue | 200 ++++++++++++++-------------
 2 files changed, 149 insertions(+), 145 deletions(-)

diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 2be5550e..0deb7fe1 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -30,59 +30,61 @@ defineProps<{
             {{ status }}
         </div>
 
-        <Form v-bind="store.form()" :reset-on-success="['password']" v-slot="{ errors, processing }"
-            class="flex flex-col gap-6">
-            <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
-            <div class="grid gap-6">
-                <div class="grid gap-2">
-                    <Label for="email">{{ $t('auth.login.email') }}</Label>
-                    <Input id="email" type="email" name="email" autofocus :tabindex="1" autocomplete="email"
-                        placeholder="email@example.com" :default-value="email ?? ''" />
-                    <InputError :message="errors.email" />
-                </div>
-
-                <div class="grid gap-2">
-                    <div class="flex items-center justify-between">
-                        <Label for="password">{{ $t('auth.login.password') }}</Label>
-                        <TextLink :href="request()" class="text-sm" :tabindex="5">
-                            {{ $t('auth.login.forgot_password') }}
-                        </TextLink>
-                    </div>
-                    <Input id="password" type="password" name="password" :tabindex="2"
-                        autocomplete="current-password" :placeholder="$t('auth.login.password')" />
-                    <InputError :message="errors.password" />
-                </div>
-
-                <div class="flex items-center justify-between">
-                    <Label for="remember" class="flex items-center space-x-3">
-                        <Checkbox id="remember" name="remember" :tabindex="3" />
-                        <span>{{ $t('auth.login.remember_me') }}</span>
-                    </Label>
-                </div>
-
-                <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing" data-test="login-button">
-                    <Spinner v-if="processing" />
-                    {{ $t('auth.login.submit') }}
-                </Button>
-            </div>
-
+        <div class="flex flex-col gap-6">
             <template v-if="$page.props.googleAuthEnabled">
+                <Button variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
+                    <img src="/images/social/google.svg" alt="Google" class="size-4" />
+                    {{ $t('auth.google_login') }}
+                </Button>
+
                 <div
                     class="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
                 >
                     <span class="relative z-10 bg-background px-2 text-muted-foreground">{{ $t('auth.or_continue_with') }}</span>
                 </div>
-
-                <Button variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
-                    <img src="/images/social/google.svg" alt="Google" class="size-4" />
-                    {{ $t('auth.google_login') }}
-                </Button>
             </template>
 
-            <div class="text-center text-sm text-muted-foreground">
-                {{ $t('auth.login.no_account') }}
-                <TextLink :href="register()" :tabindex="5">{{ $t('auth.login.sign_up') }}</TextLink>
-            </div>
-        </Form>
+            <Form v-bind="store.form()" :reset-on-success="['password']" v-slot="{ errors, processing }"
+                class="flex flex-col gap-6">
+                <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
+                <div class="grid gap-6">
+                    <div class="grid gap-2">
+                        <Label for="email">{{ $t('auth.login.email') }}</Label>
+                        <Input id="email" type="email" name="email" autofocus :tabindex="1" autocomplete="email"
+                            placeholder="email@example.com" :default-value="email ?? ''" />
+                        <InputError :message="errors.email" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <div class="flex items-center justify-between">
+                            <Label for="password">{{ $t('auth.login.password') }}</Label>
+                            <TextLink :href="request()" class="text-sm" :tabindex="5">
+                                {{ $t('auth.login.forgot_password') }}
+                            </TextLink>
+                        </div>
+                        <Input id="password" type="password" name="password" :tabindex="2"
+                            autocomplete="current-password" :placeholder="$t('auth.login.password')" />
+                        <InputError :message="errors.password" />
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                        <Label for="remember" class="flex items-center space-x-3">
+                            <Checkbox id="remember" name="remember" :tabindex="3" />
+                            <span>{{ $t('auth.login.remember_me') }}</span>
+                        </Label>
+                    </div>
+
+                    <Button type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing" data-test="login-button">
+                        <Spinner v-if="processing" />
+                        {{ $t('auth.login.submit') }}
+                    </Button>
+                </div>
+
+                <div class="text-center text-sm text-muted-foreground">
+                    {{ $t('auth.login.no_account') }}
+                    <TextLink :href="register()" :tabindex="5">{{ $t('auth.login.sign_up') }}</TextLink>
+                </div>
+            </Form>
+        </div>
     </AuthBase>
 </template>
\ No newline at end of file
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index 0fa1becd..862bc443 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -39,112 +39,114 @@ const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     >
         <Head :title="$t('auth.register.page_title')" />
 
-        <Form
-            v-bind="store.form()"
-            :reset-on-success="['password']"
-            v-slot="{ errors, processing }"
-            class="flex flex-col gap-6"
-        >
-            <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
-            <input type="hidden" name="timezone" :value="timezone" />
-            <div class="grid gap-6">
-                <div class="grid gap-2">
-                    <Label for="name">{{ $t('auth.register.name') }}</Label>
-                    <Input
-                        id="name"
-                        type="text"
-                        autofocus
-                        :tabindex="1"
-                        autocomplete="name"
-                        name="name"
-                        :placeholder="$t('auth.register.name_placeholder')"
-                    />
-                    <InputError :message="errors.name" />
-                </div>
-
-                <div class="grid gap-2">
-                    <Label for="email">{{ $t('auth.register.email') }}</Label>
-                    <Input
-                        id="email"
-                        type="email"
-                        :tabindex="2"
-                        autocomplete="email"
-                        name="email"
-                        placeholder="email@example.com"
-                        :default-value="email ?? ''"
-                    />
-                    <InputError :message="errors.email" />
-                </div>
-
-                <div class="grid gap-2">
-                    <Label for="password">{{ $t('auth.register.password') }}</Label>
-                    <div class="relative">
-                        <Input
-                            id="password"
-                            :type="showPassword ? 'text' : 'password'"
-                            :tabindex="3"
-                            autocomplete="new-password"
-                            name="password"
-                            :placeholder="$t('auth.register.password')"
-                        />
-                        <div class="absolute inset-y-0 end-0 flex items-center pe-3">
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger as-child>
-                                        <button
-                                            type="button"
-                                            :tabindex="-1"
-                                            class="cursor-pointer text-muted-foreground hover:text-foreground"
-                                            @click="showPassword = !showPassword"
-                                        >
-                                            <IconEyeOff v-if="showPassword" class="size-4" />
-                                            <IconEye v-else class="size-4" />
-                                        </button>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        <p>{{ showPassword ? $t('auth.register.hide_password') : $t('auth.register.show_password') }}</p>
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        </div>
-                    </div>
-                    <InputError :message="errors.password" />
-                </div>
-
-                <Button
-                    type="submit"
-                    class="mt-2 w-full"
-                    tabindex="4"
-                    :disabled="processing"
-                    data-test="register-user-button"
-                >
-                    <Spinner v-if="processing" />
-                    {{ $t('auth.register.submit') }}
-                </Button>
-            </div>
-
+        <div class="flex flex-col gap-6">
             <template v-if="$page.props.googleAuthEnabled">
+                <Button variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
+                    <img src="/images/social/google.svg" alt="Google" class="size-4" />
+                    {{ $t('auth.google_signup') }}
+                </Button>
+
                 <div
                     class="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
                 >
                     <span class="relative z-10 bg-background px-2 text-muted-foreground">{{ $t('auth.or_continue_with') }}</span>
                 </div>
-
-                <Button variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
-                    <img src="/images/social/google.svg" alt="Google" class="size-4" />
-                    {{ $t('auth.google_signup') }}
-                </Button>
             </template>
 
-            <div class="text-center text-sm text-muted-foreground">
-                {{ $t('auth.register.has_account') }}
-                <TextLink
-                    :href="login()"
-                    class="underline underline-offset-4"
-                    :tabindex="5"
-                    >{{ $t('auth.register.log_in') }}</TextLink
-                >
-            </div>
-        </Form>
+            <Form
+                v-bind="store.form()"
+                :reset-on-success="['password']"
+                v-slot="{ errors, processing }"
+                class="flex flex-col gap-6"
+            >
+                <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
+                <input type="hidden" name="timezone" :value="timezone" />
+                <div class="grid gap-6">
+                    <div class="grid gap-2">
+                        <Label for="name">{{ $t('auth.register.name') }}</Label>
+                        <Input
+                            id="name"
+                            type="text"
+                            autofocus
+                            :tabindex="1"
+                            autocomplete="name"
+                            name="name"
+                            :placeholder="$t('auth.register.name_placeholder')"
+                        />
+                        <InputError :message="errors.name" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <Label for="email">{{ $t('auth.register.email') }}</Label>
+                        <Input
+                            id="email"
+                            type="email"
+                            :tabindex="2"
+                            autocomplete="email"
+                            name="email"
+                            placeholder="email@example.com"
+                            :default-value="email ?? ''"
+                        />
+                        <InputError :message="errors.email" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <Label for="password">{{ $t('auth.register.password') }}</Label>
+                        <div class="relative">
+                            <Input
+                                id="password"
+                                :type="showPassword ? 'text' : 'password'"
+                                :tabindex="3"
+                                autocomplete="new-password"
+                                name="password"
+                                :placeholder="$t('auth.register.password')"
+                            />
+                            <div class="absolute inset-y-0 end-0 flex items-center pe-3">
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger as-child>
+                                            <button
+                                                type="button"
+                                                :tabindex="-1"
+                                                class="cursor-pointer text-muted-foreground hover:text-foreground"
+                                                @click="showPassword = !showPassword"
+                                            >
+                                                <IconEyeOff v-if="showPassword" class="size-4" />
+                                                <IconEye v-else class="size-4" />
+                                            </button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            <p>{{ showPassword ? $t('auth.register.hide_password') : $t('auth.register.show_password') }}</p>
+                                        </TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                            </div>
+                        </div>
+                        <InputError :message="errors.password" />
+                    </div>
+
+                    <Button
+                        type="submit"
+                        class="mt-2 w-full"
+                        tabindex="4"
+                        :disabled="processing"
+                        data-test="register-user-button"
+                    >
+                        <Spinner v-if="processing" />
+                        {{ $t('auth.register.submit') }}
+                    </Button>
+                </div>
+
+                <div class="text-center text-sm text-muted-foreground">
+                    {{ $t('auth.register.has_account') }}
+                    <TextLink
+                        :href="login()"
+                        class="underline underline-offset-4"
+                        :tabindex="5"
+                        >{{ $t('auth.register.log_in') }}</TextLink
+                    >
+                </div>
+            </Form>
+        </div>
     </AuthBase>
 </template>