← back to Dear Bubbe Nextjs
components/GoogleSignIn.tsx
280 lines
'use client'
import { signIn, signOut, useSession } from 'next-auth/react'
import { useState, useEffect } from 'react'
interface UserProfile {
name?: string
age?: string
location?: string
relationship?: string
occupation?: string
interests?: string
favoriteFood?: string
}
interface GoogleSignInProps {
onProfileSaved?: (profile: UserProfile) => void
}
export default function GoogleSignIn({ onProfileSaved }: GoogleSignInProps = {}) {
const { data: session, status } = useSession()
const [showProfile, setShowProfile] = useState(false)
const [profile, setProfile] = useState<UserProfile>({})
const [profileSaved, setProfileSaved] = useState(false)
// Check if profile already exists
useEffect(() => {
if (session?.user?.email) {
const savedProfile = localStorage.getItem(`bubbe_profile_${session.user.email}`)
if (savedProfile) {
const parsed = JSON.parse(savedProfile)
setProfile(parsed)
setProfileSaved(true)
// Also update session storage with complete profile
const fullProfile = {
...parsed,
email: session.user.email,
relationshipStatus: parsed.relationship || parsed.relationshipStatus,
onboardingCompleted: true
}
sessionStorage.setItem('userProfile', JSON.stringify(fullProfile))
}
// REMOVED auto-show logic - profile form should ONLY show when user clicks Profile button
}
}, [session, profileSaved])
const handleSignIn = () => {
signIn('google')
}
const handleSignOut = () => {
signOut()
setProfile({})
setProfileSaved(false)
setShowProfile(false)
}
const handleProfileSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (session?.user?.email) {
const fullProfile = {
...profile,
email: session.user.email,
name: profile.name || session.user.name || 'Stranger',
// Map fields to match what the API expects
relationshipStatus: profile.relationship,
onboardingCompleted: true // Mark that profile is complete
}
// Save profile to localStorage
localStorage.setItem(`bubbe_profile_${session.user.email}`, JSON.stringify(fullProfile))
setProfileSaved(true)
setShowProfile(false)
// Also save to session storage for Bubbe to access
sessionStorage.setItem('userProfile', JSON.stringify(fullProfile))
// Trigger callback to make Bubbe respond about the profile
if (onProfileSaved) {
onProfileSaved(fullProfile)
}
// Also trigger a special Bubbe response via event
window.dispatchEvent(new CustomEvent('bubbeProfileSaved', {
detail: fullProfile
}))
}
}
const handleProfileChange = (field: keyof UserProfile, value: string) => {
setProfile(prev => ({ ...prev, [field]: value }))
}
if (status === 'loading') {
return (
<div className="fixed top-4 right-4 bg-white/10 backdrop-blur-md rounded-lg px-4 py-2">
<span className="text-white">Loading...</span>
</div>
)
}
return (
<>
{/* Sign In/Profile Button - Mobile optimized */}
<div className="google-signin-container">
{!session ? (
<button
onClick={handleSignIn}
className="google-signin-button"
>
<svg className="google-signin-icon" viewBox="0 0 24 24">
<path fill="#4285F4" 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"/>
<path fill="#34A853" 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"/>
<path fill="#FBBC05" 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"/>
<path fill="#EA4335" 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"/>
</svg>
<span className="google-signin-text">Sign in</span>
</button>
) : (
<div className="google-profile-container">
<div className="google-profile-info">
<p className="google-profile-label">Signed in as</p>
<p className="google-profile-name">{session.user?.name || session.user?.email}</p>
</div>
<div className="google-profile-buttons">
<button
onClick={() => setShowProfile(true)}
className={`google-profile-button profile-button ${!profileSaved ? 'animate-pulse bg-yellow-500' : ''}`}
>
{!profileSaved ? '⚠️ Setup' : 'Profile'}
</button>
<button
onClick={handleSignOut}
className="google-profile-button signout-button"
>
Sign Out
</button>
</div>
</div>
)}
</div>
{/* Profile Form Modal - Mobile optimized */}
{showProfile && session && (
<div className="profile-modal-backdrop">
<div className="profile-modal-container">
<h2 className="profile-modal-title">
Tell Bubbe About Yourself
</h2>
<p className="profile-modal-subtitle">
So she can kvetch about your life choices properly!
</p>
<form onSubmit={handleProfileSubmit} className="profile-form">
<div>
<label className="block text-white text-sm font-bold mb-1">
Your Name
</label>
<input
type="text"
value={profile.name || ''}
onChange={(e) => handleProfileChange('name', e.target.value)}
placeholder="What should Bubbe call you?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Age
</label>
<input
type="text"
value={profile.age || ''}
onChange={(e) => handleProfileChange('age', e.target.value)}
placeholder="How old are you?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Location
</label>
<input
type="text"
value={profile.location || ''}
onChange={(e) => handleProfileChange('location', e.target.value)}
placeholder="Where do you live?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Relationship Status
</label>
<select
value={profile.relationship || ''}
onChange={(e) => handleProfileChange('relationship', e.target.value)}
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white border border-white/30"
>
<option value="">Select...</option>
<option value="single">Single (Bubbe won't be happy)</option>
<option value="dating">Dating (When's the wedding?)</option>
<option value="engaged">Engaged (About time!)</option>
<option value="married">Married (Where are the grandkids?)</option>
<option value="divorced">Divorced (Oy vey!)</option>
<option value="complicated">It's Complicated (What meshugana?)</option>
</select>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Occupation
</label>
<input
type="text"
value={profile.occupation || ''}
onChange={(e) => handleProfileChange('occupation', e.target.value)}
placeholder="What do you do for a living?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Interests
</label>
<input
type="text"
value={profile.interests || ''}
onChange={(e) => handleProfileChange('interests', e.target.value)}
placeholder="What do you like to do?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div>
<label className="block text-white text-sm font-bold mb-1">
Favorite Food
</label>
<input
type="text"
value={profile.favoriteFood || ''}
onChange={(e) => handleProfileChange('favoriteFood', e.target.value)}
placeholder="What's your favorite food?"
className="w-full px-3 py-2 rounded-lg bg-white/20 text-white placeholder-white/50 border border-white/30"
/>
</div>
<div className="flex gap-3 pt-4">
<button
type="submit"
className="flex-1 bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold py-3 rounded-lg hover:from-pink-600 hover:to-purple-700 transition-all"
>
{profileSaved ? 'Update Profile' : 'Save Profile'}
</button>
<button
type="button"
onClick={() => setShowProfile(false)}
className="px-6 py-3 bg-white/20 text-white font-bold rounded-lg hover:bg-white/30 transition-all"
>
Cancel
</button>
</div>
</form>
{profileSaved && (
<p className="text-green-300 text-sm mt-4 text-center">
✅ Profile saved! Bubbe will remember you.
</p>
)}
</div>
</div>
)}
</>
)
}