Add contact us feature (Cloud-CV#28)

Author: gupta-utkarsh

frontend/src/components/App.js

@@ -19,6 +19,7 @@ const App = props => {
           <Route path="/news" component={HomePageComponent} />
           <Route path="/team" component={TeamPageComponent} />
           <Route path="/projects" component={ProjectPageComponent} />
+          <Route path="/contact-us" component={HomePageComponent} />
           <Route component={PageNotFoundHandler} />
         </Switch>
       </main>

frontend/src/components/home/HomeBody.js

@@ -4,6 +4,7 @@ import HomeAboutUs from "./homeBody/HomeAboutUs";
 import HomeNews from "./homeBody/HomeNews";
 import HomeSponsors from "./homeBody/HomeSponsors";
 import HomeShowcase from "./homeBody/HomeShowcase";
+import HomeContactUs from "./homeBody/HomeContactUs";
 import Button from "../common/Button";
 
 const HomeBody = props => {
@@ -54,6 +55,7 @@ const HomeBody = props => {
           </Link>
         </div>
       </div>
+      <HomeContactUs />
     </div>
   );
 };

frontend/src/components/home/homeBody/HomeContactUs.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Button from "../../common/Button";
+import axios from "axios";
+const AJAX_ROOT = process.env.AJAX_ROOT;
+
+const HomeContactUs = props => {
+  const sendResponse = event => {
+    event.preventDefault();
+    let formElement = document.getElementById("contact-us-form");
+    let formData = new FormData(formElement);
+    axios({
+      method: "post",
+      url: `${process.env.AJAX_ROOT}/api/web/contact/`,
+      data: formData
+    }).then(response => {
+      if (response.status === 201) {
+        formElement.reset();
+        document.getElementById("cv-home-form-success").innerHTML =
+          response.data.message;
+      }
+    });
+  };
+  const CONTACT_US_TITLE = "Contact Us";
+  return (
+    <div className="cv-home-contact-us cv-container" id="contact-us">
+      <h1 className="cv-home-showcase-heading">
+        {CONTACT_US_TITLE}
+      </h1>
+      <form
+        className="cv-home-contact-form"
+        encType="multipart/form-data"
+        action="http://example.com/cgiscript.pl"
+        method="post"
+        id="contact-us-form"
+        onSubmit={sendResponse}
+      >
+        <section className="cv-home-contact-form-elements">
+          <input
+            className="cv-input-text"
+            type="text"
+            name="name"
+            placeholder="Name"
+            required
+          />
+          <br />
+          <input
+            className="cv-input-text"
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+          />
+          <br />
+          <input
+            className="cv-input-text"
+            type="text"
+            name="message"
+            placeholder="Message/Query"
+            required
+          />
+          <br />
+          <label className="cv-input-label" htmlFor="image">
+            Any screenshot/image you would like to add :
+          </label>
+          <input className="cv-input-file" type="file" name="image" />
+        </section>
+        <input
+          className="cv-button cv-button-dark"
+          type="submit"
+          name="submit"
+          value="Submit"
+        />
+        <br />
+        <span className="cv-home-form-success" id="cv-home-form-success" />
+      </form>
+    </div>
+  );
+};
+
+export default HomeContactUs;

frontend/src/components/navbar/index.js

@@ -50,12 +50,21 @@ class Navbar extends Component {
       firstPath = this.props.location.pathname.substr(1);
     }
     let projectActive = firstPath === "projects";
-    let listItems = ["", "Projects", "News", "GSoC", "Team", "Contribute"];
+    let listItems = [
+      "",
+      "Projects",
+      "News",
+      "GSoC",
+      "Team",
+      "Contribute",
+      "Contact Us"
+    ];
     listItems = listItems.map((path, index) => {
       let active = path.toLowerCase() === firstPath;
+      let formattedPath = path.toLowerCase().replace(/ /g, "-");
       return (
         <NavbarItem active={active} key={path}>
-          <Link to={`\/${path.toLowerCase()}`}>
+          <Link to={`\/${formattedPath}`}>
             {path === "" ? "Home" : path}
           </Link>
         </NavbarItem>

frontend/src/styles/partials/_elements.scss

@@ -25,6 +25,7 @@
   cursor: pointer;
   font-family: $heading-font-family;
   padding: 1.7*$gutter-width 4.5*$gutter-width;
+  transition: all 0.2s linear;
 }
 
   .cv-button-light {
@@ -34,6 +35,10 @@
   .cv-button-dark {
     background: linear-gradient(45deg, $heading-color, $heading-color 30%, $secondary-color 70%, $secondary-color);
     color: $white;
+
+    &:hover {
+      background: linear-gradient(45deg, $heading-color, $heading-color 50%, $secondary-color 90%, $secondary-color);
+    }
   }
 
   .cv-button-small {
@@ -80,3 +85,25 @@
   }
 }
 
+/********FORM ELEMENTS********/
+
+.cv-input-text {
+  margin: 3 * $gutter-width 0 0 0;
+  padding: 0 0 1 * $gutter-width 0;
+  border-bottom: 2px solid $secondary-color;
+  transition: all 0.3s linear;
+  width: 350px;
+
+  &:focus {
+    border-bottom: 2px solid $heading-color;
+  }
+}
+
+.cv-input-label {
+  display: block;
+  padding: 4 * $gutter-width 0 0 0;
+}
+
+.cv-input-file {
+  padding: $gutter-width 0 0 0;
+}

frontend/src/styles/partials/_home.scss

@@ -275,6 +275,23 @@
           min-width: 70px;
         }
 
+    .cv-home-contact-us {
+      padding: 8 * $gutter-width 0 0 0;
+    }
+
+      .cv-home-contact-form {
+        margin: 3 * $gutter-width 0;
+      }
+        .cv-home-contact-form-elements {
+          margin: 5 * $gutter-width 0;
+        }
+
+        .cv-home-form-success {
+          padding: 2 * $gutter-width 0;
+          color: $success-color;
+          display: block;
+        }
+
   .cv-home-footer {
     margin: 0;
     padding: 8 * $gutter-width 0 0 0;

frontend/src/styles/partials/_theme.scss

@@ -1,7 +1,13 @@
 * {
   @include placeholder {
-    color: $secondary-color;
+    @include font-size(1.8, 1.2);
+    color: $primary-color;
   }
+
+}
+
+input:not(output):-moz-ui-invalid {
+  box-shadow:none !important;
 }
 
 body, input {

frontend/src/styles/partials/_variables.scss

@@ -43,7 +43,8 @@ $link-color--visited: hsla(271, 68%, 32%, 1);
 $white: hsla(0, 0%, 100%, 1);
 $black: hsla(0, 0%, 0%, 1);
 $shadow-color: hsla(0, 0%, 60%, 0.5);
-$deep-shadow-color: rgb(232, 232, 232);
+$deep-shadow-color: hsla(0, 0%, 91%, 1);
+$success-color: hsla(116, 46%, 49%, 1);
 /******MARGINS******/
 
 $gutter-width: 1rem;