120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Container,
|
|
Typography,
|
|
Box,
|
|
Button,
|
|
Stack,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { EmailSignupForm } from './EmailSignupForm';
|
|
import { EmailCredentials } from '../../services/auth/authService';
|
|
import { RegistrationService } from '../../services/auth/registrationService';
|
|
import { logger } from '../../debugConfig';
|
|
import MicrosoftIcon from '@mui/icons-material/Microsoft.js';
|
|
|
|
const SignupPage: React.FC = () => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { user } = useAuth();
|
|
const registrationService = RegistrationService.getInstance();
|
|
|
|
// Get role from location state, default to teacher
|
|
const { role = 'teacher' } = location.state || {};
|
|
const roleDisplay = role === 'teacher' ? 'Teacher' : 'Student';
|
|
|
|
logger.debug('signup-page', '🔍 Signup page loaded', {
|
|
role,
|
|
hasUser: !!user,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
navigate('/dashboard');
|
|
}
|
|
}, [user, navigate]);
|
|
|
|
const handleSignup = async (
|
|
credentials: EmailCredentials,
|
|
displayName: string
|
|
) => {
|
|
try {
|
|
const result = await registrationService.register(
|
|
credentials,
|
|
displayName
|
|
);
|
|
if (result.user) {
|
|
navigate('/dashboard');
|
|
}
|
|
} catch (error) {
|
|
logger.error('signup-page', '❌ Registration failed', error);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const switchRole = () => {
|
|
navigate('/signup', {
|
|
state: { role: role === 'teacher' ? 'student' : 'teacher' },
|
|
});
|
|
};
|
|
|
|
if (user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Container
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '100vh',
|
|
gap: 4,
|
|
}}
|
|
>
|
|
<Typography variant="h2" component="h1" gutterBottom>
|
|
ClassroomCopilot.ai
|
|
</Typography>
|
|
|
|
<Typography variant="h4" gutterBottom>
|
|
{roleDisplay} Sign Up
|
|
</Typography>
|
|
|
|
<Box sx={{ width: '100%', maxWidth: 400 }}>
|
|
<Button
|
|
fullWidth
|
|
variant="outlined"
|
|
startIcon={<MicrosoftIcon />}
|
|
onClick={() => {}}
|
|
sx={{ mb: 3 }}
|
|
>
|
|
Sign up with Microsoft
|
|
</Button>
|
|
|
|
<Divider sx={{ my: 2 }}>OR</Divider>
|
|
|
|
<EmailSignupForm
|
|
role={`email_${role}` as 'email_teacher' | 'email_student'}
|
|
onSubmit={handleSignup}
|
|
/>
|
|
|
|
<Stack
|
|
direction="row"
|
|
spacing={2}
|
|
justifyContent="center"
|
|
sx={{ mt: 3 }}
|
|
>
|
|
<Button variant="text" onClick={switchRole}>
|
|
Switch to {role === 'teacher' ? 'Student' : 'Teacher'} Sign Up
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default SignupPage;
|