103 lines
3.2 KiB
Svelte
103 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { currentStep } from '$lib/stores.js';
|
|
import { isSignedIn, handleSignOut, requestTokenFromUser } from '$lib/google';
|
|
import Navigator from './subcomponents/Navigator.svelte';
|
|
|
|
function handleSignIn() {
|
|
requestTokenFromUser();
|
|
}
|
|
</script>
|
|
|
|
<div class="p-6">
|
|
<div class="mb-6">
|
|
<h2 class="mb-2 text-xl font-semibold text-gray-900">Connect to Google</h2>
|
|
<p class="text-sm text-gray-700">
|
|
Sign in with your Google account to access your Google Sheets and Google Drive for photo
|
|
downloads.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-8 md:grid-cols-2">
|
|
<!-- Left Column: Information -->
|
|
<div class="space-y-6 text-gray-700">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Google Sheets Integration</h4>
|
|
<p class="text-sm">
|
|
Seamlessly import your data without the hassle of manual copy-pasting.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Google Drive Access</h4>
|
|
<p class="text-sm">
|
|
Automatically download photos for your cards directly from your Google Drive.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">Privacy & Security</h4>
|
|
<p class="text-sm">
|
|
Your data is processed entirely in your browser. Nothing is ever uploaded to or stored on
|
|
our servers. We only request read-only access. All of the data is then removed from your browser
|
|
when the work is finished.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Action -->
|
|
<div
|
|
class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8"
|
|
>
|
|
{#if $isSignedIn}
|
|
<!-- Authenticated state -->
|
|
<div class="text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 text-green-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-900">Successfully Connected</h3>
|
|
</div>
|
|
<p class="mb-6 mt-2 text-sm text-gray-600">You are signed in and ready to proceed.</p>
|
|
<button
|
|
onclick={handleSignOut}
|
|
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<!-- Unauthenticated state -->
|
|
<div class="w-full text-center">
|
|
<h3 class="text-lg font-medium text-gray-900">Ready to Connect?</h3>
|
|
<p class="mb-6 text-sm text-gray-600">
|
|
Click the button below to sign in with your Google account.
|
|
</p>
|
|
<button
|
|
onclick={handleSignIn}
|
|
class="flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
|
|
>
|
|
Sign In with Google
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div> <div class="mt-8">
|
|
<Navigator
|
|
canProceed={$isSignedIn}
|
|
{currentStep}
|
|
textBack="Back to Splash"
|
|
textForwardDisabled="Sign in to continue"
|
|
textForwardEnabled="Continue to Sheet Search"
|
|
/>
|
|
</div>
|
|
</div>
|