registration-form/src/SignUpForm.js
2023-08-15 17:25:16 +03:00

146 lines
4.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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