proposal-system/web/src/pages/auth/LoginPage.tsx

// Login — SHOC auth-card treatment (ADR 0003, mirrors AuthPageShell/AuthCardHeader):
// centered 384px card on --color-bg-page, brand lockup, Montserrat heading.
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Alert, Box, Button, Typography, Divider, Stack } from '@mui/material';
import GoogleIcon from '@mui/icons-material/Google';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import EngineeringIcon from '@mui/icons-material/Engineering';
import PersonIcon from '@mui/icons-material/Person';
import { useAuth } from '../../hooks/useAuth';
import { authApi } from '../../lib/api/auth';
import { setUser, setError } from '../../app/slices/authSlice';
import BrandLockup from '../../components/brand/BrandLockup';

const COGNITO_DOMAIN = import.meta.env.VITE_COGNITO_DOMAIN || '';
const CLIENT_ID = import.meta.env.VITE_COGNITO_CLIENT_ID || '';
const REDIRECT_URI = `${window.location.origin}/callback`;

function buildLoginUrl(): string {
  const params = new URLSearchParams({
    client_id: CLIENT_ID,
    response_type: 'code',
    scope: 'openid email profile',
    redirect_uri: REDIRECT_URI,
  });
  return `https://${COGNITO_DOMAIN}/oauth2/authorize?${params.toString()}`;
}

const devButtonSx = {
  py: 1.5,
  height: 56,
  justifyContent: 'flex-start',
} as const;

export default function LoginPage() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { isAuthenticated, error } = useAuth();
  const [loading, setLoading] = useState(false);

  const isDevMode = !CLIENT_ID;

  useEffect(() => {
    if (isAuthenticated) {
      navigate('/', { replace: true });
    }
  }, [isAuthenticated, navigate]);

  const devUsers: Record<string, { email: string; name: string }> = {
    SysAdmin: { email: 'adam@seahavenind.com', name: 'Adam Moussa' },
    Admin: { email: 'sarah@seahavenind.com', name: 'Sarah Chen' },
    Dispatcher: { email: 'mike@seahavenind.com', name: 'Mike Torres' },
  };

  const handleDevLogin = async (role: string) => {
    setLoading(true);
    try {
      const dev = devUsers[role] ?? devUsers['SysAdmin']!;
      const user = await authApi.devLogin(dev.email, dev.name, role);
      dispatch(setUser(user));
      navigate('/', { replace: true });
    } catch (err) {
      dispatch(setError(err instanceof Error ? err.message : 'Dev login failed'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'var(--color-bg-page)',
        px: 2,
      }}
    >
      <Box
        sx={{
          width: '100%',
          maxWidth: 384,
          borderRadius: 'var(--radius)',
          border: '1px solid var(--border)',
          backgroundColor: 'var(--card)',
          boxShadow: 'var(--shadow-sm)',
          p: 5,
        }}
      >
        <Box sx={{ mb: 4 }}>
          <BrandLockup />
        </Box>

        <Typography
          component="h2"
          sx={{
            textAlign: 'center',
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 'var(--text-xl)',
            color: 'var(--foreground)',
          }}
        >
          Welcome back
        </Typography>
        <Typography
          sx={{
            textAlign: 'center',
            color: 'var(--muted-foreground)',
            fontSize: 'var(--text-base)',
            mt: '6px',
            mb: 3,
          }}
        >
          Sign in to your account
        </Typography>

        {error && (
          <Alert severity="error" sx={{ mb: 2, textAlign: 'left' }}>
            {error}
          </Alert>
        )}

        {isDevMode ? (
          <>
            <Stack spacing={1.5}>
              <Button
                variant="contained"
                fullWidth
                startIcon={<AdminPanelSettingsIcon />}
                onClick={() => handleDevLogin('SysAdmin')}
                disabled={loading}
                sx={devButtonSx}
              >
                <Box sx={{ textAlign: 'left', flex: 1 }}>
                  <Box>SysAdmin</Box>
                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Full access</Box>
                </Box>
              </Button>
              <Button
                variant="contained"
                fullWidth
                startIcon={<EngineeringIcon />}
                onClick={() => handleDevLogin('Admin')}
                disabled={loading}
                sx={devButtonSx}
              >
                <Box sx={{ textAlign: 'left', flex: 1 }}>
                  <Box>Admin</Box>
                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
                </Box>
              </Button>
              <Button
                variant="contained"
                fullWidth
                startIcon={<PersonIcon />}
                onClick={() => handleDevLogin('Dispatcher')}
                disabled={loading}
                sx={devButtonSx}
              >
                <Box sx={{ textAlign: 'left', flex: 1 }}>
                  <Box>Dispatcher</Box>
                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Submit and track proposals</Box>
                </Box>
              </Button>
            </Stack>
            <Divider sx={{ my: 2 }} />
            <Typography variant="caption" sx={{ display: 'block', textAlign: 'center' }}>
              Development sign-in — only shown when Cognito is not configured.
            </Typography>
          </>
        ) : (
          <Button
            variant="contained"
            fullWidth
            startIcon={<GoogleIcon />}
            href={buildLoginUrl()}
            sx={{
              height: 42,
              fontFamily: 'var(--font-display)',
              fontSize: 'var(--text-base)',
              fontWeight: 600,
            }}
          >
            Sign in with Google
          </Button>
        )}

        <Typography
          sx={{
            mt: '20px',
            display: 'block',
            textAlign: 'center',
            fontFamily: 'var(--font-sans)',
            fontSize: 'var(--text-xs)',
            color: 'var(--muted-foreground)',
          }}
        >
          Having trouble? Contact your administrator.
        </Typography>
      </Box>
    </Box>
  );
}