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({ ...@@ -8,7 +8,10 @@ const NewGoLinkValidator = Yup.object().shape({
targetURL: Yup.string() targetURL: Yup.string()
.required("You must supply a target URL!") .required("You must supply a target URL!")
.url("Not a valid 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; export default NewGoLinkValidator;
...@@ -4,9 +4,28 @@ import { Formik, Field, Form } from "formik"; ...@@ -4,9 +4,28 @@ import { Formik, Field, Form } from "formik";
import { GetCSRFToken } from "../../Utils/GetCSRFToken"; import { GetCSRFToken } from "../../Utils/GetCSRFToken";
import { SingleDatePicker } from "react-dates"; import { SingleDatePicker } from "react-dates";
import moment from "moment"; 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"; import MasonstrappedFormInput from "../Molecules/MasonstrappedFormInput";
const divStyle = {
display: "block"
};
const style2 = {
borderTopLeftRadius: "0rem",
borderBottomLeftRadius: "0rem"
};
const NewGoLinkForm = props => { const NewGoLinkForm = props => {
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
var today = new Date(); var today = new Date();
...@@ -17,7 +36,7 @@ const NewGoLinkForm = props => { ...@@ -17,7 +36,7 @@ const NewGoLinkForm = props => {
<Formik <Formik
// //
initialValues={{ initialValues={{
// shortcode: "", shortcode: "",
targetURL: "" targetURL: ""
// willExpire: false, // willExpire: false,
// expires: moment(tomorrow) // expires: moment(tomorrow)
...@@ -41,20 +60,57 @@ const NewGoLinkForm = props => { ...@@ -41,20 +60,57 @@ const NewGoLinkForm = props => {
handleChange handleChange
}) => ( }) => (
<Form> <Form>
<FormGroup> <Row>
<Label for="targetURL">Target URL</Label> <Col md="12">
<Field <FormGroup>
name="targetURL" <Label for="targetURL">Target URL</Label>
type="text" <Field
placeholder="https://longwebsitelink.com" name="targetURL"
component={MasonstrappedFormInput} type="text"
/> placeholder="https://longwebsitelink.com"
<FormText>Example help text that remains unchanged.</FormText> component={MasonstrappedFormInput}
</FormGroup> />
<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"> <Row>
Submit <Col>
</Button> <Button
type="submit"
disabled={isSubmitting}
outline
color="primary"
>
Submit
</Button>
</Col>
</Row>
</Form> </Form>
)} )}
/> />
......
import React from "react"; import React from "react";
import AuthedPageTemplate from "../Templates/AuthedPageTemplate"; import AuthedPageTemplate from "../Templates/AuthedPageTemplate";
import NewGolinkForm from "../Organisms/NewGoLinkForm"; import NewGolinkForm from "../Organisms/NewGoLinkForm";
import { Row, Col } from "reactstrap";
const NewGoLinkPage = props => { const NewGoLinkPage = props => {
return ( return (
<AuthedPageTemplate> <AuthedPageTemplate>
<h2 className="mt-4 font-weight-light">Create a new Go link</h2> <Row>
<p className="text-muted"> <Col>
A Go link is composed of the original "target" URL, and the shortcode to <h2 className="mt-4 font-weight-light">Create a new Go link</h2>
be used in the Go link. </Col>
</p> </Row>
<legend /> <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 /> <NewGolinkForm />
</AuthedPageTemplate> </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