Add form
This commit is contained in:
lumijiez
104
webui/package-lock.json
generated
104
webui/package-lock.json
generated
@@ -21,13 +21,15 @@
|
|||||||
"@stripe/react-stripe-js": "^3.7.0",
|
"@stripe/react-stripe-js": "^3.7.0",
|
||||||
"@stripe/stripe-js": "^7.3.1",
|
"@stripe/stripe-js": "^7.3.1",
|
||||||
"axios": "^1.9.0",
|
"axios": "^1.9.0",
|
||||||
|
"formik": "^2.4.6",
|
||||||
"i18next": "^25.2.1",
|
"i18next": "^25.2.1",
|
||||||
"lucide-react": "^0.516.0",
|
"lucide-react": "^0.516.0",
|
||||||
"next": "15.3.3",
|
"next": "15.3.3",
|
||||||
"next-i18next": "^15.4.2",
|
"next-i18next": "^15.4.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-i18next": "^15.5.3"
|
"react-i18next": "^15.5.3",
|
||||||
|
"yup": "^1.6.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
@@ -1954,6 +1956,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/deepmerge": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/delayed-stream": {
|
"node_modules/delayed-stream": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
@@ -2134,6 +2145,31 @@
|
|||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/formik": {
|
||||||
|
"version": "2.4.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
|
||||||
|
"integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://opencollective.com/formik"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/hoist-non-react-statics": "^3.3.1",
|
||||||
|
"deepmerge": "^2.1.1",
|
||||||
|
"hoist-non-react-statics": "^3.3.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"react-fast-compare": "^2.0.1",
|
||||||
|
"tiny-warning": "^1.0.2",
|
||||||
|
"tslib": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/function-bind": {
|
"node_modules/function-bind": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
@@ -2634,6 +2670,18 @@
|
|||||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/lodash": {
|
||||||
|
"version": "4.17.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||||
|
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/lodash-es": {
|
||||||
|
"version": "4.17.21",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||||
|
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/loose-envify": {
|
"node_modules/loose-envify": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||||
@@ -2991,6 +3039,12 @@
|
|||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/property-expr": {
|
||||||
|
"version": "2.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
|
||||||
|
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/proxy-from-env": {
|
"node_modules/proxy-from-env": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||||
@@ -3018,6 +3072,12 @@
|
|||||||
"react": "^19.1.0"
|
"react": "^19.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-fast-compare": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/react-i18next": {
|
"node_modules/react-i18next": {
|
||||||
"version": "15.5.3",
|
"version": "15.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.3.tgz",
|
||||||
@@ -3287,12 +3347,42 @@
|
|||||||
"node": ">=18"
|
"node": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tiny-case": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/tiny-warning": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/toposort": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/tslib": {
|
"node_modules/tslib": {
|
||||||
"version": "2.8.1",
|
"version": "2.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"license": "0BSD"
|
"license": "0BSD"
|
||||||
},
|
},
|
||||||
|
"node_modules/type-fest": {
|
||||||
|
"version": "2.19.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
|
||||||
|
"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
|
||||||
|
"license": "(MIT OR CC0-1.0)",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.20"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/use-sync-external-store": {
|
"node_modules/use-sync-external-store": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||||
@@ -3329,6 +3419,18 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"node_modules/yup": {
|
||||||
|
"version": "1.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
|
||||||
|
"integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"property-expr": "^2.0.5",
|
||||||
|
"tiny-case": "^1.0.3",
|
||||||
|
"toposort": "^2.0.2",
|
||||||
|
"type-fest": "^2.19.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,13 +22,15 @@
|
|||||||
"@stripe/react-stripe-js": "^3.7.0",
|
"@stripe/react-stripe-js": "^3.7.0",
|
||||||
"@stripe/stripe-js": "^7.3.1",
|
"@stripe/stripe-js": "^7.3.1",
|
||||||
"axios": "^1.9.0",
|
"axios": "^1.9.0",
|
||||||
|
"formik": "^2.4.6",
|
||||||
"i18next": "^25.2.1",
|
"i18next": "^25.2.1",
|
||||||
"lucide-react": "^0.516.0",
|
"lucide-react": "^0.516.0",
|
||||||
"next": "15.3.3",
|
"next": "15.3.3",
|
||||||
"next-i18next": "^15.4.2",
|
"next-i18next": "^15.4.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-i18next": "^15.5.3"
|
"react-i18next": "^15.5.3",
|
||||||
|
"yup": "^1.6.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
|
|||||||
376
webui/src/app/form/page.js
Normal file
376
webui/src/app/form/page.js
Normal file
@@ -0,0 +1,376 @@
|
|||||||
|
'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user