146 lines
4.0 KiB
JavaScript
146 lines
4.0 KiB
JavaScript
import React, { useState, useRef } from 'react'
|
||
import { Formik, Form, Field } from 'formik'
|
||
import { TextField } from 'formik-mui'
|
||
import {
|
||
Button,
|
||
Box,
|
||
Grid,
|
||
Alert,
|
||
Snackbar,
|
||
CircularProgress
|
||
} from '@mui/material'
|
||
import emailjs from '@emailjs/browser'
|
||
|
||
const validate = (values) => {
|
||
const errors = {}
|
||
if (!values.fio) errors.fio = 'Укажите ваше ФИО'
|
||
if (!values.phone) errors.phone = 'Укажите ваш номер телефона'
|
||
else if (
|
||
!/^(\+7|7|8)?[\s-]?\(?[489][0-9]{2}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/i.test(
|
||
values.phone
|
||
)
|
||
)
|
||
errors.phone = 'Неправильный формат номера телефона'
|
||
if (!values.email) errors.email = 'Укажите ваш email'
|
||
else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email))
|
||
errors.email = 'Неправильный формат email'
|
||
return errors
|
||
}
|
||
|
||
const SignUpForm = () => {
|
||
const [showToast, setShowToast] = useState(false)
|
||
const form = useRef()
|
||
|
||
const sendEmail = (values) => {
|
||
emailjs
|
||
.send(
|
||
process.env.REACT_APP_SERVICE_ID,
|
||
process.env.REACT_APP_TEMPLATE_ID,
|
||
values,
|
||
process.env.REACT_APP_PUBLIC_KEY
|
||
)
|
||
.then(
|
||
(result) => {
|
||
console.log(result.text)
|
||
setShowToast(true)
|
||
},
|
||
(error) => {
|
||
console.log(error.text)
|
||
}
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Formik
|
||
initialValues={{
|
||
fio: '',
|
||
phone: '',
|
||
email: '',
|
||
business: '',
|
||
about: ''
|
||
}}
|
||
validate={(values) => validate(values)}
|
||
onSubmit={(values, { setSubmitting }) => {
|
||
sendEmail(values)
|
||
setSubmitting(false)
|
||
}}
|
||
>
|
||
{({ submitForm, isSubmitting }) => (
|
||
<Form style={{ width: 300 }} ref={form}>
|
||
<Grid container justifyContent='center'>
|
||
{isSubmitting && <CircularProgress />}
|
||
<Box margin={1} marginTop={3}>
|
||
<Field
|
||
component={TextField}
|
||
name='fio'
|
||
type='text'
|
||
label='Ваше ФИО'
|
||
/>
|
||
</Box>
|
||
<Box margin={1}>
|
||
<Field
|
||
component={TextField}
|
||
name='phone'
|
||
type='tel'
|
||
label='Ваш номер телефона'
|
||
/>
|
||
</Box>
|
||
<Box margin={1}>
|
||
<Field
|
||
component={TextField}
|
||
name='email'
|
||
type='email'
|
||
label='Ваш email'
|
||
/>
|
||
</Box>
|
||
<Box margin={1}>
|
||
<Field
|
||
component={TextField}
|
||
name='business'
|
||
type='text'
|
||
label='Ваша сфера бизнеса'
|
||
/>
|
||
</Box>
|
||
<Box margin={1}>
|
||
<Field
|
||
multiline
|
||
rows={3}
|
||
component={TextField}
|
||
name='about'
|
||
type='text'
|
||
label='Расскажите о себе'
|
||
/>
|
||
</Box>
|
||
<Box margin={1}>
|
||
<Button
|
||
variant='contained'
|
||
color='primary'
|
||
disabled={isSubmitting}
|
||
onClick={submitForm}
|
||
>
|
||
Зарегистрироваться
|
||
</Button>
|
||
</Box>
|
||
</Grid>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
<Snackbar
|
||
open={showToast}
|
||
autoHideDuration={6000}
|
||
onClose={() => setShowToast(false)}
|
||
>
|
||
<Alert
|
||
onClose={() => setShowToast(false)}
|
||
severity='success'
|
||
sx={{ width: '100%' }}
|
||
>
|
||
Вы успешно зарегистрировались на мероприятие!
|
||
</Alert>
|
||
</Snackbar>
|
||
</>
|
||
)
|
||
}
|
||
export default SignUpForm
|