55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
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/useAuth';
|
|
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>
|
|
);
|
|
}
|