mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added domain input to create short url form

Browse source
This commit is contained in:
Alejandro Celaya 2019-10-05 09:02:02 +02:00
parent 08b710930d
commit 67a23bfe33
3 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/short-urls/CreateShortUrl.js
View file

@ -1,6 +1,6 @@
import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
import { assoc, dissoc, isEmpty, isNil, pipe, replace, trim } from 'ramda';
import React from 'react';
import { Collapse } from 'reactstrap';
import * as PropTypes from 'prop-types';
@ -23,6 +23,7 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
longUrl: '',
tags: [],
customSlug: undefined,
domain: undefined,
validSince: undefined,
validUntil: undefined,
maxVisits: undefined,
@ -89,15 +90,25 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
<div className="row">
<div className="col-sm-6">
{renderOptionalInput('customSlug', 'Custom slug')}
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
<div className="col-sm-6">
{renderOptionalInput('domain', 'Domain', 'text')}
</div>
</div>
<div className="row">
<div className="col-sm-4">
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
</div>
<div className="col-sm-4">
{renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
</div>
<div className="col-sm-4">
{renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
</div>
</div>
<div className="mb-3 text-right">
<div className="mb-4 text-right">
<Checkbox
className="mr-2"
checked={this.state.findIfExists}
@ -119,7 +130,10 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
&nbsp;
{this.state.moreOptionsVisible ? 'Less' : 'More'} options
</button>
<button className="btn btn-outline-primary float-right" disabled={shortUrlCreationResult.loading}>
<button
className="btn btn-outline-primary float-right"
disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
>
{shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
</button>
</div>

5
src/short-urls/UseExistingIfFoundInfoIcon.js
View file

@ -20,7 +20,7 @@ const renderInfoModal = (isOpen, toggle) => (
<ul>
<li>
When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
if none is found
if none is found.
</li>
<li>
When long URL and custom slug are provided: Same as in previous case, but it will try to match the short URL
@ -33,9 +33,6 @@ const renderInfoModal = (isOpen, toggle) => (
all provided data. If any of them does not match, a new short URL will be created
</li>
</ul>
<blockquote className="use-existing-if-found-info-icon__modal-quote">
<b>Important:</b> This feature will be ignored while using a Shlink version older than v1.16.0.
</blockquote>
</ModalBody>
</Modal>
);

3
test/short-urls/CreateShortUrl.test.js
View file

@ -32,6 +32,7 @@ describe('<CreateShortUrl />', () => {
const urlInput = wrapper.find('.form-control-lg');
const tagsInput = wrapper.find(TagsSelector);
const customSlugInput = wrapper.find('#customSlug');
const domain = wrapper.find('#domain');
const maxVisitsInput = wrapper.find('#maxVisits');
const dateInputs = wrapper.find(DateInput);
const validSinceInput = dateInputs.at(0);
@ -40,6 +41,7 @@ describe('<CreateShortUrl />', () => {
urlInput.simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
tagsInput.simulate('change', [ 'tag_foo', 'tag_bar' ]);
customSlugInput.simulate('change', { target: { value: 'my-slug' } });
domain.simulate('change', { target: { value: 'example.com' } });
maxVisitsInput.simulate('change', { target: { value: '20' } });
validSinceInput.simulate('change', validSince);
validUntilInput.simulate('change', validUntil);
@ -53,6 +55,7 @@ describe('<CreateShortUrl />', () => {
longUrl: 'https://long-domain.com/foo/bar',
tags: [ 'tag_foo', 'tag_bar' ],
customSlug: 'my-slug',
domain: 'example.com',
validSince: validSince.format(),
validUntil: validUntil.format(),
maxVisits: '20',