diff --git a/src/short-urls/ShortUrlForm.scss b/src/short-urls/ShortUrlForm.scss index 37f9376d..afb93736 100644 --- a/src/short-urls/ShortUrlForm.scss +++ b/src/short-urls/ShortUrlForm.scss @@ -1,6 +1,10 @@ @import '../utils/base'; -.short-url-form .form-group:last-child, +.short-url-form .card-body > .form-group:last-child, .short-url-form p:last-child { margin-bottom: 0; } + +.short-url-form .card { + height: 100%; +} diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx index 762df157..abdb969e 100644 --- a/src/short-urls/ShortUrlForm.tsx +++ b/src/short-urls/ShortUrlForm.tsx @@ -1,10 +1,14 @@ import { FC, useState } from 'react'; import { InputType } from 'reactstrap/lib/Input'; -import { Button, FormGroup, Input } from 'reactstrap'; +import { Button, FormGroup, Input, Row } from 'reactstrap'; import { isEmpty } from 'ramda'; import * as m from 'moment'; import DateInput, { DateInputProps } from '../utils/DateInput'; -import { supportsListingDomains, supportsSettingShortCodeLength } from '../utils/helpers/features'; +import { + supportsListingDomains, + supportsSettingShortCodeLength, + supportsShortUrlTitle, +} from '../utils/helpers/features'; import { SimpleCard } from '../utils/SimpleCard'; import { handleEventPreventingDefault, hasValue } from '../utils/utils'; import Checkbox from '../utils/Checkbox'; @@ -34,7 +38,7 @@ export const ShortUrlForm = ( TagsSelector: FC, ForServerVersion: FC, DomainSelector: FC, -): FC => ({ mode, saving, onSave, initialState, selectedServer, children }) => { +): FC => ({ mode, saving, onSave, initialState, selectedServer, children }) => { // eslint-disable-line complexity const [ shortUrlData, setShortUrlData ] = useState(initialState); const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) }); const reset = () => setShortUrlData(initialState); @@ -88,6 +92,8 @@ export const ShortUrlForm = ( const showDomainSelector = supportsListingDomains(selectedServer); const disableShortCodeLength = !supportsSettingShortCodeLength(selectedServer); + const supportsTitle = supportsShortUrlTitle(selectedServer); + const isEdit = mode === 'edit'; return (
@@ -98,27 +104,38 @@ export const ShortUrlForm = ( {basicComponents} -
+
- {renderOptionalInput('customSlug', 'Custom slug', 'text', { - disabled: hasValue(shortUrlData.shortCodeLength), - })} - {renderOptionalInput('shortCodeLength', 'Short code length', 'number', { - min: 4, - disabled: disableShortCodeLength || hasValue(shortUrlData.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')} - {showDomainSelector && ( - - setShortUrlData({ ...shortUrlData, domain })} - /> - + {supportsTitle && renderOptionalInput('title', 'Title')} + {!isEdit && ( + <> + +
+ {renderOptionalInput('customSlug', 'Custom slug', 'text', { + disabled: hasValue(shortUrlData.shortCodeLength), + })} +
+
+ {renderOptionalInput('shortCodeLength', 'Short code length', 'number', { + min: 4, + disabled: disableShortCodeLength || hasValue(shortUrlData.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')} + {showDomainSelector && ( + + setShortUrlData({ ...shortUrlData, domain })} + /> + + )} + )}
@@ -130,13 +147,15 @@ export const ShortUrlForm = ( {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince as m.Moment | undefined })}
- + -

- Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all - provided data. -

+ {!isEdit && ( +

+ Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all + provided data. +

+ )}

-

- setShortUrlData({ ...shortUrlData, findIfExists })} - > - Use existing URL if found - - -

+ {!isEdit && ( +

+ setShortUrlData({ ...shortUrlData, findIfExists })} + > + Use existing URL if found + + +

+ )}
)}