fix(ui): improve form usability (#1563)

* fix(ui): improve form usability

* refactor: remove unnecessary <> and </> tags

* fix(ui): set url inputmode for *arr URL base fields
This commit is contained in:
TheCatLady
2021-05-04 04:42:27 -04:00
committed by GitHub
parent b05b177776
commit 26580eaa21
19 changed files with 598 additions and 634 deletions

View File

@@ -39,17 +39,13 @@ const messages = defineMessages({
defaultserver: 'Default Server',
default4kserver: 'Default 4K Server',
servername: 'Server Name',
servernamePlaceholder: 'A Radarr Server',
hostname: 'Hostname or IP Address',
port: 'Port',
ssl: 'Enable SSL',
apiKey: 'API Key',
apiKeyPlaceholder: 'Your Radarr API key',
baseUrl: 'Base URL',
baseUrlPlaceholder: 'Example: /radarr',
baseUrl: 'URL Base',
syncEnabled: 'Enable Scan',
externalUrl: 'External URL',
externalUrlPlaceholder: 'External URL pointing to your Radarr server',
qualityprofile: 'Quality Profile',
rootfolder: 'Root Folder',
minimumAvailability: 'Minimum Availability',
@@ -247,7 +243,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
initialValues={{
name: radarr?.name,
hostname: radarr?.hostname,
port: radarr?.port,
port: radarr?.port ?? 7878,
ssl: radarr?.useSsl ?? false,
apiKey: radarr?.apiKey,
baseUrl: radarr?.baseUrl,
@@ -392,9 +388,6 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="name"
name="name"
type="text"
placeholder={intl.formatMessage(
messages.servernamePlaceholder
)}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('name', e.target.value);
@@ -420,7 +413,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="hostname"
name="hostname"
type="text"
placeholder="127.0.0.1"
inputMode="url"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('hostname', e.target.value);
@@ -443,7 +436,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="port"
name="port"
type="text"
placeholder="7878"
inputMode="numeric"
className="short"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
@@ -482,10 +475,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
as="field"
id="apiKey"
name="apiKey"
type="text"
placeholder={intl.formatMessage(
messages.apiKeyPlaceholder
)}
autoComplete="one-time-code"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('apiKey', e.target.value);
@@ -507,9 +497,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="baseUrl"
name="baseUrl"
type="text"
placeholder={intl.formatMessage(
messages.baseUrlPlaceholder
)}
inputMode="url"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setIsValidated(false);
setFieldValue('baseUrl', e.target.value);
@@ -682,9 +670,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
id="externalUrl"
name="externalUrl"
type="text"
placeholder={intl.formatMessage(
messages.externalUrlPlaceholder
)}
inputMode="url"
/>
</div>
{errors.externalUrl && touched.externalUrl && (