@extends('layouts.app')
@section('title', 'Log In - SOFT Paste')
@section('content')
<div class="flex-grow flex items-center justify-center">
<div class="max-w-md w-full bg-white dark:bg-slate-900 shadow-xl rounded-3xl p-8 border border-slate-100 dark:border-slate-800 text-center transition-colors">
<div class="mb-6 flex justify-center">
<div class="w-16 h-16 bg-gradient-to-tr from-indigo-100 to-violet-100 dark:from-indigo-900/40 dark:to-violet-900/40 rounded-2xl flex items-center justify-center shadow-sm">
<svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
</svg>
</div>
</div>
<h1 class="text-3xl font-extrabold text-slate-800 dark:text-slate-100 mb-2 tracking-tight">Welcome Back</h1>
<p class="text-slate-500 dark:text-slate-400 mb-8 font-light">Sign in to manage your pastes and access your secure dashboard.</p>
<div class="flex justify-center mb-6 min-h-[44px]">
<div id="google-signin-button"></div>
</div>
<p class="text-xs text-slate-400 dark:text-slate-500 mt-6 font-light">
By continuing, you agree to our Terms of Service and Privacy Policy.
</p>
</div>
</div>
@endsection
@push('scripts')
<script>
const renderGoogleButton = setInterval(() => {
if (typeof google !== 'undefined' && google.accounts && google.accounts.id) {
// 1. Explicitly initialize here to bypass the window.onload delay in app.blade.php.
// This guarantees the client is ready before we attempt to render the button.
google.accounts.id.initialize({
client_id: '{{ config('services.google.client_id') }}',
callback: handleCredentialResponse,
});
// 2. Determine the current theme
const isDark = document.documentElement.classList.contains('dark');
// 3. Render the standard button (This bypasses any One Tap rate limits/thresholds)
google.accounts.id.renderButton(
document.getElementById("google-signin-button"),
{
theme: isDark ? 'filled_black' : 'outline',
size: "large",
shape: "pill",
type: "standard",
text: "signin_with"
}
);
clearInterval(renderGoogleButton);
}
}, 100);
// Re-render the button if the user toggles dark mode while on the page
document.getElementById('theme-toggle')?.addEventListener('click', () => {
setTimeout(() => {
const isDark = document.documentElement.classList.contains('dark');
document.getElementById("google-signin-button").innerHTML = ''; // Clear existing button
google.accounts.id.renderButton(
document.getElementById("google-signin-button"),
{ theme: isDark ? 'filled_black' : 'outline', size: "large", shape: "pill", type: "standard" }
);
}, 50);
});
</script>
@endpush