Last active
December 3, 2025 20:23
-
-
Save PovilasKorop/e8861d78e8b873dbf7ccb408f37b1a3a to your computer and use it in GitHub Desktop.
Flux buttons for Social Login
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <x-layouts.auth> | |
| <div class="flex flex-col gap-6"> | |
| <x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" /> | |
| <!-- Session Status --> | |
| <x-auth-session-status class="text-center" :status="session('status')" /> | |
| <!-- Social Login Buttons --> | |
| <div class="flex flex-col gap-3"> | |
| <flux:button variant="outline" class="w-full justify-center" href="{{ route('socialite.redirect', 'google') }}"> | |
| <svg class="size-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/> | |
| <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> | |
| <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> | |
| <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> | |
| </svg> | |
| {{ __('Continue with Google') }} | |
| </flux:button> | |
| <flux:button variant="outline" class="w-full justify-center" href="{{ route('socialite.redirect', 'github') }}"> | |
| <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| {{ __('Continue with GitHub') }} | |
| </flux:button> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-zinc-300 dark:border-zinc-700"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="bg-white dark:bg-zinc-900 px-2 text-zinc-500 dark:text-zinc-400"> | |
| {{ __('Or continue with email') }} | |
| </span> | |
| </div> | |
| </div> | |
| <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6"> | |
| @csrf | |
| <!-- Email Address --> | |
| <flux:input | |
| name="email" | |
| :label="__('Email address')" | |
| :value="old('email')" | |
| type="email" | |
| required | |
| autofocus | |
| autocomplete="email" | |
| placeholder="[email protected]" | |
| /> | |
| <!-- Password --> | |
| <div class="relative"> | |
| <flux:input | |
| name="password" | |
| :label="__('Password')" | |
| type="password" | |
| required | |
| autocomplete="current-password" | |
| :placeholder="__('Password')" | |
| viewable | |
| /> | |
| @if (Route::has('password.request')) | |
| <flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate> | |
| {{ __('Forgot your password?') }} | |
| </flux:link> | |
| @endif | |
| </div> | |
| <!-- Remember Me --> | |
| <flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" /> | |
| <div class="flex items-center justify-end"> | |
| <flux:button variant="primary" type="submit" class="w-full" data-test="login-button"> | |
| {{ __('Log in') }} | |
| </flux:button> | |
| </div> | |
| </form> | |
| @if (Route::has('register')) | |
| <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400"> | |
| <span>{{ __('Don\'t have an account?') }}</span> | |
| <flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link> | |
| </div> | |
| @endif | |
| </div> | |
| </x-layouts.auth> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment