mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Changed 'create' page, grouping components and adding more explanations

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-08 18:52:18 +01:00
parent 43af6fdaba
commit e60d241fcf
2 changed files with 77 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/short-urls/CreateShortUrl.scss
View file

@ -6,3 +6,8 @@
display: block; display: block;
} }
} }
.create-short-url .form-group:last-child,
.create-short-url p:last-child {
margin-bottom: 0;
}

132
src/short-urls/CreateShortUrl.tsx
View file

@ -1,6 +1,6 @@
import { isEmpty, pipe, replace, trim } from 'ramda'; import { isEmpty, pipe, replace, trim } from 'ramda';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { Button, FormGroup, Input } from 'reactstrap'; import { Button, Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
import { InputType } from 'reactstrap/lib/Input'; import { InputType } from 'reactstrap/lib/Input';
import * as m from 'moment'; import * as m from 'moment';
import DateInput, { DateInputProps } from '../utils/DateInput'; import DateInput, { DateInputProps } from '../utils/DateInput';
@ -101,7 +101,7 @@ const CreateShortUrl = (
const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' }); const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
return ( return (
<form onSubmit={save}> <form className="create-short-url" onSubmit={save}>
<FormGroup> <FormGroup>
<Input <Input
bsSize="lg" bsSize="lg"
@ -120,52 +120,62 @@ const CreateShortUrl = (
{!basicMode && ( {!basicMode && (
<> <>
<div className="row"> <div className="row">
<div className="col-sm-4"> <div className="col-sm-6 mb-3">
{renderOptionalInput('customSlug', 'Custom slug', 'text', { <Card>
disabled: hasValue(shortUrlCreation.shortCodeLength), <CardHeader>Customize the short URL</CardHeader>
})} <CardBody>
<p>
Use a custom slug for your marketing campaigns, change the domain or set a specific length for
the auto-generated short code.
</p>
{renderOptionalInput('customSlug', 'Custom slug', 'text', {
disabled: hasValue(shortUrlCreation.shortCodeLength),
})}
{renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
min: 4,
disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug),
...disableShortCodeLength && {
title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
},
})}
{!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', {
disabled: disableDomain,
...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
})}
{showDomainSelector && (
<FormGroup>
<DomainSelector
value={shortUrlCreation.domain}
onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
/>
</FormGroup>
)}
</CardBody>
</Card>
</div> </div>
<div className="col-sm-4">
{renderOptionalInput('shortCodeLength', 'Short code length', 'number', { <div className="col-sm-6 mb-3">
min: 4, <Card>
disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug), <CardHeader>Limit access to the short URL</CardHeader>
...disableShortCodeLength && { <CardBody>
title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length', <p>Determine when and how many times your short URL can be accessed.</p>
}, {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
})} {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
</div> {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
<div className="col-sm-4"> </CardBody>
{!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', { </Card>
disabled: disableDomain,
...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
})}
{showDomainSelector && (
<FormGroup>
<DomainSelector
value={shortUrlCreation.domain}
onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
/>
</FormGroup>
)}
</div> </div>
</div> </div>
<div className="row"> <Card className="mb-3">
<div className="col-sm-4"> <CardHeader>Extra validations</CardHeader>
{renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })} <CardBody>
</div> <p>
<div className="col-sm-4"> Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
{renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })} provided data.
</div> </p>
<div className="col-sm-4"> <ForServerVersion minVersion="2.4.0">
{renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })} <p>
</div>
</div>
<ForServerVersion minVersion="1.16.0">
<div className="mb-4 row">
<div className="col-sm-6 text-center text-sm-left mb-2 mb-sm-0">
<ForServerVersion minVersion="2.4.0">
<Checkbox <Checkbox
inline inline
checked={shortUrlCreation.validateUrl} checked={shortUrlCreation.validateUrl}
@ -173,25 +183,27 @@ const CreateShortUrl = (
> >
Validate URL Validate URL
</Checkbox> </Checkbox>
</ForServerVersion> </p>
</div> </ForServerVersion>
<div className="col-sm-6 text-center text-sm-right"> <ForServerVersion minVersion="1.16.0">
<Checkbox <p>
inline <Checkbox
className="mr-2" inline
checked={shortUrlCreation.findIfExists} className="mr-2"
onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })} checked={shortUrlCreation.findIfExists}
> onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
Use existing URL if found >
</Checkbox> Use existing URL if found
<UseExistingIfFoundInfoIcon /> </Checkbox>
</div> <UseExistingIfFoundInfoIcon />
</div> </p>
</ForServerVersion> </ForServerVersion>
</CardBody>
</Card>
</> </>
)} )}
<div className="text-right"> <div className="text-center">
<Button <Button
outline outline
color="primary" color="primary"