registration-form/src/SignUpForm.js

146 lines
4.0 KiB
JavaScript
Raw Normal View History

2023-08-15 11:02:01 +03:00
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
2023-08-15 17:25:16 +03:00
multiline
rows={3}
2023-08-15 11:02:01 +03:00
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