Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
go
Commits
3b400ddb
Commit
3b400ddb
authored
Feb 13, 2019
by
David Haynes
🙆
Browse files
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
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
go/go_ahead/src/Components/Molecules/NewGoLinkValidator.js
View file @
3b400ddb
...
...
@@ -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
View file @
3b400ddb
...
...
@@ -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
View file @
3b400ddb
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
>
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment