81 lines
3.2 KiB
Svelte
81 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { currentStep } from '$lib/stores.js';
|
|
import { isSignedIn, handleSignIn, handleSignOut, isGoogleApiReady } from '$lib/google';
|
|
|
|
function proceed() {
|
|
currentStep.set(2);
|
|
}
|
|
</script>
|
|
|
|
<div class="p-6">
|
|
<div class="max-w-md mx-auto text-center">
|
|
<div class="mb-6">
|
|
<div class="mx-auto mb-4 w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.017 11.215c-3.573-2.775-9.317-.362-9.317 4.686C2.7 21.833 6.943 24 12.017 24c5.076 0 9.319-2.167 9.319-8.099 0-5.048-5.744-7.461-9.319-4.686z"/>
|
|
<path d="M20.791 5.016c-1.395-1.395-3.61-1.428-5.024-.033l-1.984 1.984v-.002L12.017 8.73 10.25 6.965l-1.984-1.984c-1.414-1.395-3.629-1.362-5.024.033L1.498 6.758c-1.438 1.438-1.438 3.77 0 5.208l1.744 1.744c1.395 1.395 3.61 1.428 5.024.033l1.984-1.984v.002L12.017 9.996l1.767 1.765 1.984 1.984c1.414 1.395 3.629 1.362 5.024-.033l1.744-1.744c1.438-1.438 1.438-3.77 0-5.208L20.791 5.016z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-2">
|
|
Connect to Google
|
|
</h2>
|
|
|
|
<p class="text-sm text-gray-700 leading-relaxed mb-6">
|
|
Sign in with your Google account to access your Google Sheets and Google Drive for photo downloads.
|
|
</p>
|
|
|
|
<div class="text-xs text-gray-500 mb-6 space-y-1">
|
|
<p>Required permissions:</p>
|
|
<p>• View your Google Spreadsheets</p>
|
|
<p>• View and manage the files in your Google Drive</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if $isSignedIn}
|
|
<!-- Authenticated state -->
|
|
<div class="bg-green-50 border border-green-300 rounded-lg p-4 mb-4">
|
|
<div class="flex items-center justify-center mb-2">
|
|
<svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="text-sm font-medium text-green-800">Authenticated</span>
|
|
</div>
|
|
|
|
<p class="text-sm text-green-800 mb-3">
|
|
You are signed in.
|
|
</p>
|
|
|
|
<div class="flex space-x-3 justify-center">
|
|
<button
|
|
on:click={proceed}
|
|
class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700"
|
|
>
|
|
Continue →
|
|
</button>
|
|
|
|
<button
|
|
on:click={handleSignOut}
|
|
class="text-red-600 hover:text-red-700 px-4 py-2 text-sm font-medium"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<!-- Unauthenticated state -->
|
|
<button
|
|
on:click={handleSignIn}
|
|
disabled={!$isGoogleApiReady}
|
|
class="w-full bg-blue-600 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{#if $isGoogleApiReady}
|
|
Sign In with Google
|
|
{:else}
|
|
Loading Google API...
|
|
{/if}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|