Complete first pass on targetURL and shortcode

- design and functionality looking nice

go/go_ahead/src/Components/Molecules/NewGoLinkValidator.js

@@ -8,7 +8,10 @@ const NewGoLinkValidator = Yup.object().shape({
   targetURL: Yup.string()
     .required("You must supply a target URL!")
     .url("Not a valid URL!")
-    .max(1000, "URL is too long!")
+    .max(1000, "URL is too long!"),
+  shortcode: Yup.string()
+    .required("Required")
+    .max(20, "Your shortcode is too long!")
 });
 
 export default NewGoLinkValidator;

go/go_ahead/src/Components/Organisms/NewGoLinkForm.jsx

@@ -4,9 +4,28 @@ import { Formik, Field, Form } from "formik";
 import { GetCSRFToken } from "../../Utils/GetCSRFToken";
 import { SingleDatePicker } from "react-dates";
 import moment from "moment";
-import { FormGroup, Button, Label, FormText } from "reactstrap";
+import {
+  FormGroup,
+  Button,
+  Label,
+  FormText,
+  Row,
+  Col,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText
+} from "reactstrap";
 import MasonstrappedFormInput from "../Molecules/MasonstrappedFormInput";
 
+const divStyle = {
+  display: "block"
+};
+
+const style2 = {
+  borderTopLeftRadius: "0rem",
+  borderBottomLeftRadius: "0rem"
+};
+
 const NewGoLinkForm = props => {
   const [focused, setFocused] = useState(false);
   var today = new Date();
@@ -17,7 +36,7 @@ const NewGoLinkForm = props => {
     <Formik
       //
       initialValues={{
-        // shortcode: "",
+        shortcode: "",
         targetURL: ""
         // willExpire: false,
         // expires: moment(tomorrow)
@@ -41,20 +60,57 @@ const NewGoLinkForm = props => {
         handleChange
       }) => (
         <Form>
-          <FormGroup>
-            <Label for="targetURL">Target URL</Label>
-            <Field
-              name="targetURL"
-              type="text"
-              placeholder="https://longwebsitelink.com"
-              component={MasonstrappedFormInput}
-            />
-            <FormText>Example help text that remains unchanged.</FormText>
-          </FormGroup>
+          <Row>
+            <Col md="12">
+              <FormGroup>
+                <Label for="targetURL">Target URL</Label>
+                <Field
+                  name="targetURL"
+                  type="text"
+                  placeholder="https://longwebsitelink.com"
+                  component={MasonstrappedFormInput}
+                />
+                <FormText>The URL that you would like to shorten.</FormText>
+              </FormGroup>
+            </Col>
+          </Row>
+
+          <Row>
+            <Col>
+              <FormGroup>
+                <Label for="shortcode">Shortcode</Label>
+                <InputGroup>
+                  <InputGroupAddon addonType="prepend" style={divStyle}>
+                    https://go.gmu.edu/
+                  </InputGroupAddon>
+                  <Field
+                    name="shortcode"
+                    type="text"
+                    placeholder=""
+                    className="form-control"
+                    style={style2}
+                    component={MasonstrappedFormInput}
+                  />
+                </InputGroup>
+                <FormText>The unique address for your target URL.</FormText>
+              </FormGroup>
+            </Col>
+          </Row>
+
+          <legend />
 
-          <Button type="submit" disabled={isSubmitting} outline color="primary">
-            Submit
-          </Button>
+          <Row>
+            <Col>
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                outline
+                color="primary"
+              >
+                Submit
+              </Button>
+            </Col>
+          </Row>
         </Form>
       )}
     />

go/go_ahead/src/Components/Pages/NewGoLinkPage.jsx

 import React from "react";
 import AuthedPageTemplate from "../Templates/AuthedPageTemplate";
 import NewGolinkForm from "../Organisms/NewGoLinkForm";
+import { Row, Col } from "reactstrap";
 
 const NewGoLinkPage = props => {
   return (
     <AuthedPageTemplate>
-      <h2 className="mt-4 font-weight-light">Create a new Go link</h2>
-      <p className="text-muted">
-        A Go link is composed of the original "target" URL, and the shortcode to
-        be used in the Go link.
-      </p>
-      <legend />
+      <Row>
+        <Col>
+          <h2 className="mt-4 font-weight-light">Create a new Go link</h2>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <p className="text-muted">
+            A Go link is composed of the original "target" URL, and the unique
+            "shortcode" to be used in the Go link.
+          </p>
+          <legend />
+        </Col>
+      </Row>
       <NewGolinkForm />
     </AuthedPageTemplate>
   );