Genesis

src/components/LoginPage.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import GoogleIcon from '@mui/icons-material/Google';
+import { useSnackbar } from 'notistack';
+import { useAuth } from '../auth/AuthContext';
+import { requestGoogleIdToken } from '../auth/googleSignIn';
+
+export default function LoginPage() {
+  const { loginWithGoogle, googleClientId, status } = useAuth();
+  const { enqueueSnackbar } = useSnackbar();
+  const [busy, setBusy] = useState(false);
+
+  const handleLogin = async () => {
+    setBusy(true);
+    try {
+      const idToken = await requestGoogleIdToken(googleClientId);
+      await loginWithGoogle(idToken);
+    } catch (err) {
+      enqueueSnackbar(`Login failed: ${err.message}`, { variant: 'error' });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const loading = status === 'loading';
+  const ready = Boolean(googleClientId);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        bgcolor: 'grey.100',
+      }}
+    >
+      <Button
+        variant="contained"
+        size="large"
+        startIcon={<GoogleIcon />}
+        disabled={busy || loading || !ready}
+        onClick={handleLogin}
+      >
+        {busy ? 'Signing in…' : 'Sign in with Google'}
+      </Button>
+    </Box>
+  );
+}