Spaces:
Build error
Build error
| import { useState } from 'react' | |
| import Head from 'next/head' | |
| import LoginForm from '../components/LoginForm' | |
| import GoogleButton from '../components/GoogleButton' | |
| export default function Home() { | |
| const [isLoading, setIsLoading] = useState(false) | |
| const [error, setError] = useState('') | |
| const handleLogin = async (email, password) => { | |
| setIsLoading(true) | |
| setError('') | |
| try { | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 1500)) | |
| // Here you would make actual API call | |
| console.log('Login with:', email, password) | |
| alert('Login successful!') | |
| } catch (err) { | |
| setError('Invalid email or password') | |
| } finally { | |
| setIsLoading(false) | |
| } | |
| } | |
| const handleGoogleLogin = async () => { | |
| setIsLoading(true) | |
| setError('') | |
| try { | |
| // Redirect to Google OAuth | |
| window.location.href = '/api/auth/google' | |
| } catch (err) { | |
| setError('Failed to initiate Google login') | |
| setIsLoading(false) | |
| } | |
| } | |
| return ( | |
| <> | |
| <Head> | |
| <title>Sign in - Google Style</title> | |
| <meta name="description" content="Sign in to your account" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| </Head> | |
| <main className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> | |
| <div className="absolute top-4 right-4"> | |
| <a | |
| href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="text-sm text-gray-600 hover:text-gray-900 transition-colors" | |
| > | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div className="sm:mx-auto sm:w-full sm:max-w-md"> | |
| <div className="flex justify-center"> | |
| <div className="w-20 h-20 bg-gradient-to-r from-blue-400 via-red-500 to-yellow-400 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg"> | |
| G | |
| </div> | |
| </div> | |
| <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900"> | |
| Sign in to your account | |
| </h2> | |
| <p className="mt-2 text-center text-sm text-gray-600"> | |
| Or{' '} | |
| <a href="#" className="font-medium text-google-blue hover:text-google-blue/80"> | |
| create a new account | |
| </a> | |
| </p> | |
| </div> | |
| <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> | |
| <div className="bg-white py-8 px-4 shadow-xl sm:rounded-lg sm:px-10"> | |
| <LoginForm | |
| onSubmit={handleLogin} | |
| isLoading={isLoading} | |
| error={error} | |
| /> | |
| <div className="mt-6"> | |
| <div className="relative"> | |
| <div className="absolute inset-0 flex items-center"> | |
| <div className="w-full border-t border-gray-300" /> | |
| </div> | |
| <div className="relative flex justify-center text-sm"> | |
| <span className="px-2 bg-white text-gray-500">Or continue with</span> | |
| </div> | |
| </div> | |
| <div className="mt-6"> | |
| <GoogleButton | |
| onClick={handleGoogleLogin} | |
| isLoading={isLoading} | |
| /> | |
| </div> | |
| </div> | |
| <div className="mt-6 text-center"> | |
| <p className="text-xs text-gray-500"> | |
| By signing in, you agree to our{' '} | |
| <a href="#" className="font-medium text-google-blue hover:text-google-blue/80"> | |
| Terms | |
| </a>{' '} | |
| and{' '} | |
| <a href="#" className="font-medium text-google-blue hover:text-google-blue/80"> | |
| Privacy Policy | |
| </a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </> | |
| ) | |
| } |