Commit 3b400ddb authored by David Haynes's avatar David Haynes 🙆

Complete first pass on targetURL and shortcode

- design and functionality looking nice
parent e90949fa
Pipeline #3882 passed with stage
in 1 minute and 23 seconds
......@@ -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;
......@@ -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>
)}
/>
......
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>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment