376 lines
17 KiB
JavaScript
376 lines
17 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
TextField,
|
|
Button,
|
|
Typography,
|
|
Grid,
|
|
MenuItem,
|
|
FormControl,
|
|
InputLabel,
|
|
Select,
|
|
FormHelperText,
|
|
Chip,
|
|
Avatar,
|
|
Container,
|
|
} from '@mui/material';
|
|
import { useFormik } from 'formik';
|
|
import * as yup from 'yup';
|
|
import PersonIcon from '@mui/icons-material/Person';
|
|
import EmailIcon from '@mui/icons-material/Email';
|
|
import PhoneIcon from '@mui/icons-material/Phone';
|
|
import WorkIcon from '@mui/icons-material/Work';
|
|
import SendIcon from '@mui/icons-material/Send';
|
|
|
|
const validationSchema = yup.object({
|
|
firstName: yup
|
|
.string('Enter your first name')
|
|
.min(2, 'First name should be at least 2 characters')
|
|
.required('First name is required'),
|
|
lastName: yup
|
|
.string('Enter your last name')
|
|
.min(2, 'Last name should be at least 2 characters')
|
|
.required('Last name is required'),
|
|
email: yup
|
|
.string('Enter your email')
|
|
.email('Enter a valid email')
|
|
.required('Email is required'),
|
|
phone: yup
|
|
.string('Enter your phone number')
|
|
.matches(/^[\+]?[1-9][\d]{0,15}$/, 'Enter a valid phone number')
|
|
.required('Phone number is required'),
|
|
age: yup
|
|
.number('Enter your age')
|
|
.min(18, 'Must be at least 18 years old')
|
|
.max(120, 'Must be less than 120 years old')
|
|
.required('Age is required'),
|
|
department: yup
|
|
.string('Select a department')
|
|
.required('Department is required'),
|
|
skills: yup
|
|
.array()
|
|
.min(1, 'Select at least one skill')
|
|
.required('Skills are required'),
|
|
bio: yup
|
|
.string('Enter your bio')
|
|
.min(10, 'Bio should be at least 10 characters')
|
|
.max(500, 'Bio should not exceed 500 characters')
|
|
.required('Bio is required'),
|
|
});
|
|
|
|
const departments = [
|
|
'Engineering',
|
|
'Marketing',
|
|
'Sales',
|
|
'HR',
|
|
'Finance',
|
|
'Operations',
|
|
'Design',
|
|
];
|
|
|
|
const skillOptions = [
|
|
'JavaScript',
|
|
'React',
|
|
'Node.js',
|
|
'Python',
|
|
'UI/UX Design',
|
|
'Project Management',
|
|
'Data Analysis',
|
|
'Marketing',
|
|
'Sales',
|
|
'Communication',
|
|
];
|
|
|
|
export default function FormPage() {
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
age: '',
|
|
department: '',
|
|
skills: [],
|
|
bio: '',
|
|
},
|
|
validationSchema: validationSchema,
|
|
onSubmit: (values, { setSubmitting, resetForm }) => {
|
|
setTimeout(() => {
|
|
console.log('Form submitted:', values);
|
|
alert('Form submitted successfully!');
|
|
setSubmitting(false);
|
|
resetForm();
|
|
}, 1000);
|
|
},
|
|
});
|
|
|
|
const handleSkillChange = (event) => {
|
|
const value = event.target.value;
|
|
formik.setFieldValue('skills', typeof value === 'string' ? value.split(',') : value);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
minHeight: '100vh',
|
|
background: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? 'linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%)'
|
|
: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
py: 4,
|
|
}}
|
|
>
|
|
<Container maxWidth="sm">
|
|
<Card
|
|
elevation={8}
|
|
sx={{
|
|
borderRadius: 3,
|
|
background: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? 'rgba(26, 26, 46, 0.95)'
|
|
: 'rgba(255, 255, 255, 0.95)',
|
|
backdropFilter: 'blur(10px)',
|
|
border: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? '1px solid rgba(99, 102, 241, 0.2)'
|
|
: '1px solid rgba(255, 255, 255, 0.3)',
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 4 }}>
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
alignItems="center"
|
|
mb={4}
|
|
>
|
|
<Avatar
|
|
sx={{
|
|
bgcolor: 'primary.main',
|
|
width: 56,
|
|
height: 56,
|
|
mb: 2,
|
|
}}
|
|
>
|
|
<PersonIcon fontSize="large" />
|
|
</Avatar>
|
|
<Typography
|
|
variant="h4"
|
|
component="h1"
|
|
fontWeight="bold"
|
|
color="primary"
|
|
textAlign="center"
|
|
>
|
|
User Registration
|
|
</Typography>
|
|
<Typography variant="subtitle1" color="text.secondary" textAlign="center">
|
|
Please fill out all required fields
|
|
</Typography>
|
|
</Box>
|
|
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
|
<Typography variant="h6" color="primary" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<PersonIcon /> Personal Information
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
fullWidth
|
|
id="firstName"
|
|
name="firstName"
|
|
label="First Name"
|
|
value={formik.values.firstName}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.firstName && Boolean(formik.errors.firstName)}
|
|
helperText={formik.touched.firstName && formik.errors.firstName}
|
|
variant="outlined"
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<TextField
|
|
fullWidth
|
|
id="lastName"
|
|
name="lastName"
|
|
label="Last Name"
|
|
value={formik.values.lastName}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.lastName && Boolean(formik.errors.lastName)}
|
|
helperText={formik.touched.lastName && formik.errors.lastName}
|
|
variant="outlined"
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<TextField
|
|
fullWidth
|
|
id="email"
|
|
name="email"
|
|
label="Email Address"
|
|
type="email"
|
|
value={formik.values.email}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.email && Boolean(formik.errors.email)}
|
|
helperText={formik.touched.email && formik.errors.email}
|
|
variant="outlined"
|
|
InputProps={{
|
|
startAdornment: <EmailIcon sx={{ color: 'action.active', mr: 1 }} />,
|
|
}}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
id="phone"
|
|
name="phone"
|
|
label="Phone Number"
|
|
value={formik.values.phone}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.phone && Boolean(formik.errors.phone)}
|
|
helperText={formik.touched.phone && formik.errors.phone}
|
|
variant="outlined"
|
|
InputProps={{
|
|
startAdornment: <PhoneIcon sx={{ color: 'action.active', mr: 1 }} />,
|
|
}}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
id="age"
|
|
name="age"
|
|
label="Age"
|
|
type="number"
|
|
value={formik.values.age}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.age && Boolean(formik.errors.age)}
|
|
helperText={formik.touched.age && formik.errors.age}
|
|
variant="outlined"
|
|
/>
|
|
|
|
<Typography variant="h6" color="primary" sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 2 }}>
|
|
<WorkIcon /> Professional Information
|
|
</Typography>
|
|
|
|
<FormControl
|
|
fullWidth
|
|
error={formik.touched.department && Boolean(formik.errors.department)}
|
|
>
|
|
<InputLabel id="department-label">Department</InputLabel>
|
|
<Select
|
|
labelId="department-label"
|
|
id="department"
|
|
name="department"
|
|
value={formik.values.department}
|
|
label="Department"
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
>
|
|
{departments.map((dept) => (
|
|
<MenuItem key={dept} value={dept}>
|
|
{dept}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{formik.touched.department && formik.errors.department && (
|
|
<FormHelperText>{formik.errors.department}</FormHelperText>
|
|
)}
|
|
</FormControl>
|
|
|
|
<FormControl
|
|
fullWidth
|
|
error={formik.touched.skills && Boolean(formik.errors.skills)}
|
|
>
|
|
<InputLabel id="skills-label">Skills</InputLabel>
|
|
<Select
|
|
labelId="skills-label"
|
|
id="skills"
|
|
multiple
|
|
value={formik.values.skills}
|
|
onChange={handleSkillChange}
|
|
onBlur={formik.handleBlur}
|
|
label="Skills"
|
|
renderValue={(selected) => (
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|
{selected.map((value) => (
|
|
<Chip key={value} label={value} size="small" />
|
|
))}
|
|
</Box>
|
|
)}
|
|
>
|
|
{skillOptions.map((skill) => (
|
|
<MenuItem key={skill} value={skill}>
|
|
{skill}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
{formik.touched.skills && formik.errors.skills && (
|
|
<FormHelperText>{formik.errors.skills}</FormHelperText>
|
|
)}
|
|
</FormControl>
|
|
|
|
<TextField
|
|
fullWidth
|
|
id="bio"
|
|
name="bio"
|
|
label="Bio"
|
|
multiline
|
|
rows={4}
|
|
value={formik.values.bio}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.bio && Boolean(formik.errors.bio)}
|
|
helperText={
|
|
formik.touched.bio && formik.errors.bio
|
|
? formik.errors.bio
|
|
: `${formik.values.bio.length}/500 characters`
|
|
}
|
|
variant="outlined"
|
|
placeholder="Tell us about yourself..."
|
|
/>
|
|
|
|
<Button
|
|
color="primary"
|
|
variant="contained"
|
|
fullWidth
|
|
size="large"
|
|
type="submit"
|
|
disabled={formik.isSubmitting}
|
|
startIcon={<SendIcon />}
|
|
sx={{
|
|
mt: 2,
|
|
py: 1.5,
|
|
borderRadius: 3,
|
|
background: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? 'linear-gradient(45deg, #6366f1 30%, #8b5cf6 90%)'
|
|
: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
|
|
boxShadow: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? '0 3px 5px 2px rgba(99, 102, 241, .3)'
|
|
: '0 3px 5px 2px rgba(255, 105, 135, .3)',
|
|
'&:hover': {
|
|
background: (theme) =>
|
|
theme.palette.mode === 'dark'
|
|
? 'linear-gradient(45deg, #5b21b6 60%, #7c3aed 100%)'
|
|
: 'linear-gradient(45deg, #FE6B8B 60%, #FF8E53 100%)',
|
|
},
|
|
}}
|
|
>
|
|
{formik.isSubmitting ? 'Submitting...' : 'Submit Registration'}
|
|
</Button>
|
|
</Box>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
} |