Spaces:
Running
Running
File size: 2,506 Bytes
0383459 c5ac4b3 0383459 ac9231d 0383459 ac9231d 0383459 ac9231d 0383459 76ac418 c79f5fa 76ac418 c79f5fa 0383459 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
'use client';
// This is the login screen for the client website.
import { useRouter } from 'next/navigation';
import { useCallback } from 'react';
export default function LoginPage() {
const router = useRouter();
const signInWithGoogle = useCallback(async () => {
// Dynamically import firebase only on client
const { auth, googleProvider } = await import('@/libs/firebase');
const { signInWithPopup } = await import('firebase/auth');
try {
await signInWithPopup(auth, googleProvider);
router.push('/main');
} catch (err) {
alert('Login failed');
console.error(err);
}
}, [router]);
return (
<div className="min-h-screen flex items-center justify-center p-3 md:p-6 max-w-2xl mx-auto">
<div className="neuro-container w-full max-w-md p-4 md:p-8">
<div className="text-center mb-6 md:mb-8">
<h1 className="text-2xl md:text-4xl font-bold mb-4 text-primary">
MCP API Monitoring System
</h1>
<p className="text-sm md:text-lg text-secondary">
Sign in to generate and view your MCP API key
</p>
</div>
<div className="space-y-4 md:space-y-6">
<button
onClick={signInWithGoogle}
className="neuro-button-primary w-full py-3 px-4 md:py-4 md:px-6 text-base md:text-lg font-semibold"
>
<svg className="w-5 h-5 md:w-6 md:h-6 mr-3" 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>Continue with Google</span>
</button>
<div className="neuro-display p-4">
<p className="text-sm text-secondary text-center">
Generate your MCP API key, then head to your MCP-enabled application to start.
</p>
</div>
</div>
</div>
</div>
);
}
|