Finished the contact-form.
This commit is contained in:
parent
7f11fe6903
commit
6148bf5d92
3 changed files with 119 additions and 5 deletions
85
package-lock.json
generated
85
package-lock.json
generated
|
|
@ -1305,6 +1305,15 @@
|
|||
"@hapi/hoek": "^8.3.0"
|
||||
}
|
||||
},
|
||||
"@hypnosphi/create-react-context": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
|
||||
"integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
|
||||
"requires": {
|
||||
"gud": "^1.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"@istanbuljs/load-nyc-config": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
|
||||
|
|
@ -7335,6 +7344,11 @@
|
|||
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
|
||||
"optional": true
|
||||
},
|
||||
"gud": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
|
||||
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
|
||||
|
|
@ -11539,6 +11553,11 @@
|
|||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.28",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||
|
|
@ -12856,6 +12875,20 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-alert": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-alert/-/react-alert-7.0.2.tgz",
|
||||
"integrity": "sha512-oUxPk9DMaEm93Y33mdAmy4vDPZauMj30di4p4+QuZ3JOyoFSFteLSsjlhTkDjkyvJuVxToi3bbnsxehRHEPpeg==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-group": "^4.4.1"
|
||||
}
|
||||
},
|
||||
"react-alert-template-basic": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-alert-template-basic/-/react-alert-template-basic-1.0.0.tgz",
|
||||
"integrity": "sha512-6x5Us0oc+jj8BDNkvSWfQMESk5SdyGKitXdLb7CwIlIlecyATjCTKSWpLABg8tpKAPOSJu4Dv/fYUqxXEio/XA=="
|
||||
},
|
||||
"react-app-polyfill": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz",
|
||||
|
|
@ -13108,6 +13141,20 @@
|
|||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.3.11",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
|
||||
"integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@hypnosphi/create-react-context": "^0.3.1",
|
||||
"deep-equal": "^1.1.1",
|
||||
"popper.js": "^1.14.4",
|
||||
"prop-types": "^15.6.1",
|
||||
"typed-styles": "^0.0.7",
|
||||
"warning": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
|
@ -13258,6 +13305,39 @@
|
|||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"reactstrap": {
|
||||
"version": "8.9.0",
|
||||
"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
|
||||
"integrity": "sha512-pmf33YjpNZk1IfrjqpWCUMq9hk6GzSnMWBAofTBNIRJQB1zQ0Au2kzv3lPUAFsBYgWEuI9iYa/xKXHaboSiMkQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"classnames": "^2.2.3",
|
||||
"prop-types": "^15.5.8",
|
||||
"react-popper": "^1.3.6",
|
||||
"react-transition-group": "^2.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"dom-helpers": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
|
||||
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
|
||||
"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
|
||||
"requires": {
|
||||
"dom-helpers": "^3.4.0",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
|
|
@ -15508,6 +15588,11 @@
|
|||
"mime-types": "~2.1.24"
|
||||
}
|
||||
},
|
||||
"typed-styles": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
|
||||
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
|
||||
},
|
||||
"typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
"joi-browser": "^13.4.0",
|
||||
"nodemailer": "^6.5.0",
|
||||
"react": "^17.0.2",
|
||||
"react-alert": "^7.0.2",
|
||||
"react-alert-template-basic": "^1.0.0",
|
||||
"react-bootstrap": "^1.5.2",
|
||||
"react-bootstrap-carousel": "^4.1.1",
|
||||
"react-dom": "^17.0.2",
|
||||
|
|
@ -24,6 +26,7 @@
|
|||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-select": "^4.3.0",
|
||||
"reactstrap": "^8.9.0",
|
||||
"spectre.css": "^0.5.9",
|
||||
"web-vitals": "^1.1.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ import {
|
|||
FieldFeedbacks,
|
||||
FormWithConstraints
|
||||
} from 'react-form-with-constraints';
|
||||
import Alert from 'react-bootstrap/Alert';
|
||||
|
||||
|
||||
|
||||
class ContactUs extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -16,7 +19,10 @@ class ContactUs extends Component {
|
|||
email: "",
|
||||
message: "",
|
||||
agent: "",
|
||||
house: ""
|
||||
house: "",
|
||||
alertBad: false,
|
||||
alertSucess: false,
|
||||
time: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -24,6 +30,18 @@ class ContactUs extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="contact-us">
|
||||
<Alert variant="danger" style={{ display: this.state.alertBad ? "block" : "none" }} onClose={() => this.setState({ alertBad: false })} dismissible>
|
||||
<Alert.Heading>Message could not send.</Alert.Heading>
|
||||
<p>
|
||||
There are some errors in your contact form.
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert variant="success" style={{ display: this.state.alertSucess ? "block" : "none" }} onClose={() => this.setState({ alertSucess: false })} dismissible>
|
||||
<Alert.Heading>The message is successfully sent.</Alert.Heading>
|
||||
<p>
|
||||
You contact form will be delivered to our support team.
|
||||
</p>
|
||||
</Alert>
|
||||
<div className="container">
|
||||
<section class="colored-section" id="contact">
|
||||
<div className="container-fluid">
|
||||
|
|
@ -166,23 +184,31 @@ class ContactUs extends Component {
|
|||
this.form.validateFields();
|
||||
|
||||
if (!this.form.isValid()) {
|
||||
this.alertBad();
|
||||
return;
|
||||
} else {
|
||||
this.alertSuccess();
|
||||
axios({
|
||||
method: "POST",
|
||||
url: "http://localhost:3002/send",
|
||||
data: this.state
|
||||
}).then((response) => {
|
||||
if (response.data.status === 'success') {
|
||||
alert("Message Sent.");
|
||||
this.resetForm();
|
||||
} else if (response.data.status === 'fail') {
|
||||
alert("Message failed to send.");
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
alertSuccess(){
|
||||
this.setState({ alertBad: false, alertSucess: true })
|
||||
}
|
||||
|
||||
alertBad(){
|
||||
this.setState({ alertSucess: false, alertBad: true })
|
||||
}
|
||||
|
||||
resetForm() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue