mirror of
https://github.com/pezkuwichain/pwap.git
synced 2026-04-21 23:47:56 +00:00
feat: add Google OAuth sign-in button to login page
Users can now sign in with their Google account via Supabase OAuth. Google button appears above wallet connect in the "Or continue with" section.
This commit is contained in:
+46
-12
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { usePezkuwi } from '@/contexts/PezkuwiContext';
|
||||
import { supabase } from '@/lib/supabase';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -121,6 +122,26 @@ const Login: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoogleSignIn = async () => {
|
||||
setError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
const { error } = await supabase.auth.signInWithOAuth({
|
||||
provider: 'google',
|
||||
options: {
|
||||
redirectTo: window.location.origin + '/',
|
||||
},
|
||||
});
|
||||
if (error) {
|
||||
setError(error.message);
|
||||
}
|
||||
} catch {
|
||||
setError('Google sign-in failed. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
|
||||
@@ -360,19 +381,32 @@ const Login: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
|
||||
onClick={handleWalletConnect}
|
||||
disabled={loading}
|
||||
>
|
||||
<Wallet className="mr-2 h-4 w-4" />
|
||||
{t('login.connectWallet', 'Connect with Pezkuwi.js')}
|
||||
</Button>
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
|
||||
onClick={handleGoogleSignIn}
|
||||
disabled={loading}
|
||||
>
|
||||
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
|
||||
<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>
|
||||
{t('login.googleSignIn', 'Continue with Google')}
|
||||
</Button>
|
||||
|
||||
<p className="mt-2 text-xs text-center text-gray-500">
|
||||
{t('login.walletHint', 'Connect your Pezkuwi.js for instant access')}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-gray-700 bg-gray-800 hover:bg-gray-700 text-white"
|
||||
onClick={handleWalletConnect}
|
||||
disabled={loading}
|
||||
>
|
||||
<Wallet className="mr-2 h-4 w-4" />
|
||||
{t('login.connectWallet', 'Connect with Pezkuwi.js')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="text-center text-sm text-gray-500">
|
||||
|
||||
Reference in New Issue
Block a user