Skip to content

Commit

Permalink
issue MAVRICK-1#462
Browse files Browse the repository at this point in the history
  • Loading branch information
@DevGajjar28
DevGajjar28 committed Jul 22, 2024
1 parent 916f3ed commit 24d4845
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 121 deletions.
4 changes: 0 additions & 4 deletions npm.cmd
View file

This file was deleted.

Empty file removed npx.cmd
View file
Empty file.
189 changes: 86 additions & 103 deletions src/pages/Contactus/Contactus.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Button, TextField, TextareaAutosize, Typography } from '@mui/material';
import React, { useRef, useState } from 'react';
import { Slide, ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './contactus.css';
import emailjs from '@emailjs/browser';
import { Button, Snackbar, TextareaAutosize, Typography } from '@mui/material';
import TextField from '@mui/material/TextField';

export default function Contactus() {
let form = useRef();
const form = useRef();
const [formFields, setFormFields] = useState({
user_email: '',
user_name: '',
Expand All @@ -16,74 +16,77 @@ export default function Contactus() {
user_name: '',
message: ''
});
const serviceId = '';
const templateId = '';
const publicKey = '';

const validateEmail = (email) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

const onChangeField = (e) => {
const name = e.target.name;
const value = e.target.value;

let errors = { ...inputErrors };

// Validate email
if (name === 'user_email') {
errors.user_email = !validateEmail(value) ? 'Invalid email address' : '';
}

if (name == 'user_name' && value.length > 0) {
if (name === 'user_name' && value.length > 0) {
errors.user_name = '';
}
if (name == 'message' && value.length > 0) {
if (name === 'message' && value.length > 0) {
errors.message = '';
}

setInputErrors(errors);
setFormFields((prevFormFields) => ({
...prevFormFields,
[name]: value
}));
};
const handleClick = (e) => {
e.preventDefault();

const handleSubmit = (event) => {
event.preventDefault();

let errors = { ...inputErrors };

if (formFields.user_name.length == 0) {
if (formFields.user_name.length === 0) {
errors.user_name = 'Please Enter Name';
setInputErrors(errors);
return;
} else if (formFields.message.length == 0) {
errors.message = 'please Enter message';
setInputErrors(errors);
return;
} else if (formFields.user_email.length == 0) {
errors.user_email = 'please Enter Email';
setInputErrors(errors);
return;
}
if (
inputErrors.user_email ||
inputErrors.message ||
inputErrors.user_name
) {
if (formFields.message.length === 0) {
errors.message = 'Please Enter Message';
}
if (formFields.user_email.length === 0) {
errors.user_email = 'Please Enter Email';
}

setInputErrors(errors);

if (errors.user_email || errors.message || errors.user_name) {
return;
}
console.log(formFields);
emailjs
.sendForm(serviceId, templateId, form.current, {
publicKey: publicKey
})
.then(
() => {
console.log('SUCCESS!');
},
(error) => {
console.log('FAILED...', error);
}
);

setFormFields({
user_email: '',
user_name: '',
message: ''
});

toast.success('Sent Successfully!', {
position: 'top-center',
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: false,
draggable: true,
progress: undefined,
theme: 'light',
transition: Slide,
closeButton: true,
style: { fontSize: '16px' } // Increase font size of the toast
});
};

return (
<div className="contact-section-light">
<div className="contact-parent">
Expand All @@ -93,52 +96,44 @@ export default function Contactus() {
Get In Touch
</h1>
<div className="inside-contact">
<form ref={form}>
{/* <div className="contact-input contact-input-light">
<form ref={form} onSubmit={handleSubmit}>
<div className="contact-input contact-input-light">
<TextField
id="user_name"
type="text"
name="user_name"
autoFocus="on"
autoFocus
autoComplete="off"
placeholder="Your Name"
style={{ width: '100%' }}
onChange={onChangeField}
value={formFields.user_name}
error={inputErrors.user_name}
error={!!inputErrors.user_name}
helperText={inputErrors.user_name}
InputProps={{
style: { fontSize: '1.2rem', padding: '10px' } // Increase input text size
}}
/>
{inputErrors.user_name && (
<Typography
variant="caption"
style={{ fontSize: '1.4rem' }}
sx={{ color: 'red', padding: '5px' }}
>
{inputErrors.user_name}
</Typography>
)}
</div>
<br />
<div className="contact-input contact-input-light">
<TextField
id="user_email"
type="email"
name="user_email"
placeholder="Your Email"
onChange={onChangeField}
value={formFields.user_email}
autoComplete="email"
error={inputErrors.user_email}
style={{ width: '100%' }}
error={!!inputErrors.user_email}
helperText={inputErrors.user_email}
InputProps={{
style: { fontSize: '1.2rem', padding: '10px' } // Increase input text size
}}
/>
{inputErrors.user_email && (
<Typography
variant="caption"
style={{ fontSize: '1.4rem' }}
sx={{ color: 'red', padding: '5px' }}
>
{inputErrors.user_email}
</Typography>
)}
</div>
<br />

<div className="contact-input contact-input-light">
<TextareaAutosize
Expand All @@ -147,62 +142,50 @@ export default function Contactus() {
autoComplete="off"
name="message"
placeholder="Your Message"
onChange={onChangeField}
value={formFields.message}
error={inputErrors.message}
style={{
width: '100%',
height: '100px',
padding: '10px',
fontSize: '1.2rem'
}} // Increase textarea text size
className={inputErrors.message ? 'error' : ''}
/>
{inputErrors.message && (
<Typography
variant="caption"
style={{ fontSize: '1.4rem' }}
style={{ fontSize: '1rem' }}
sx={{ color: 'red', padding: '5px' }}
>
{inputErrors.message}
</Typography>
)}
</div> */}
<input
id="user_name"
name="user_name"
autoFocus="on"
autoComplete="off"
onChange={onChangeField}
value={formFields.user_name}
error={inputErrors.user_name}
type="text"
placeholder="Your Name"
/>
<input
id="user_email"
type="email"
name="user_email"
placeholder="Your Email"
onChange={onChangeField}
value={formFields.user_email}
autoComplete="email"
error={inputErrors.user_email}
/>
<input
id="message"
type="text"
autoComplete="off"
name="message"
placeholder="Your Message"
onChange={onChangeField}
value={formFields.message}
error={inputErrors.message}
/>
</div>
<br />
<div className="submit-btn">
<Button
type="submit"
className="btn btn-g btn-lg w-100"
onClick={handleClick}
style={{ fontSize: '1.2rem' }} // Increase button text size
>
Sign In
</Button>
</div>
</form>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="colored"
transition={Slide}
/>
</div>
</div>
</React.Fragment>
Expand Down
24 changes: 10 additions & 14 deletions src/pages/Contactus/contactus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,16 +275,15 @@

.contact-section-light {
margin: auto;
margin-top: 15%;
margin-top: 11%;
width: 90vw;
max-width: 600px;
}
@media (max-width: 600px) {
.contact-section-light {
width:92%;
width: 92%;
max-width: none;
margin-top: 25%;

margin-top: 25%;
}
}
.contact-card {
Expand All @@ -299,37 +298,34 @@
align-items: center;
justify-content: space-evenly;
padding: 40px 0;
height: 600px;

height: 700px;
}

.contact-card h1{
.contact-card h1 {
font-size: 40px;
font-weight: 700;
color: white;
letter-spacing: 1px;

}


.contact-card input{
.contact-card input {
color: black;
background: white;
}
.inside-contact{
.inside-contact {
/* background: #000; */
width: 90%;
}

form{
form {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 350px;
}
input{
input {
border-radius: 10px;
padding: 12px 15px;
color: gray;
border:none
border: none;
}

0 comments on commit 24d4845

Please sign in to comment.