From 26580eaa218702bc5841718310e340d049c50332 Mon Sep 17 00:00:00 2001 From: TheCatLady <52870424+TheCatLady@users.noreply.github.com> Date: Tue, 4 May 2021 04:42:27 -0400 Subject: [PATCH] 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 --- server/lib/settings.ts | 4 +- src/components/Layout/SearchInput/index.tsx | 1 + src/components/Login/LocalLogin.tsx | 7 +- .../ResetPassword/RequestResetLink.tsx | 2 +- .../Notifications/NotificationsDiscord.tsx | 67 ++-- .../Notifications/NotificationsEmail.tsx | 40 ++- .../NotificationsLunaSea/index.tsx | 26 +- .../NotificationsPushbullet/index.tsx | 163 +++++----- .../NotificationsPushover/index.tsx | 215 +++++++------ .../NotificationsSlack/index.tsx | 285 +++++++++--------- .../Notifications/NotificationsTelegram.tsx | 282 ++++++++--------- .../NotificationsWebPush/index.tsx | 1 + .../NotificationsWebhook/index.tsx | 8 +- src/components/Settings/RadarrModal/index.tsx | 28 +- src/components/Settings/SettingsMain.tsx | 3 +- src/components/Settings/SettingsPlex.tsx | 14 +- src/components/Settings/SonarrModal/index.tsx | 28 +- src/components/UserList/index.tsx | 3 +- src/i18n/locale/en.json | 35 +-- 19 files changed, 588 insertions(+), 624 deletions(-) diff --git a/server/lib/settings.ts b/server/lib/settings.ts index 178258fb..c5390f99 100644 --- a/server/lib/settings.ts +++ b/server/lib/settings.ts @@ -255,7 +255,7 @@ class Settings { }, plex: { name: '', - ip: '127.0.0.1', + ip: '', port: 32400, useSsl: false, libraries: [], @@ -272,7 +272,7 @@ class Settings { types: 0, options: { emailFrom: '', - smtpHost: '127.0.0.1', + smtpHost: '', smtpPort: 587, secure: false, allowSelfSigned: false, diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx index 9042ef45..1b0aca2a 100644 --- a/src/components/Layout/SearchInput/index.tsx +++ b/src/components/Layout/SearchInput/index.tsx @@ -27,6 +27,7 @@ const SearchInput: React.FC = () => { className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base" placeholder={intl.formatMessage(messages.searchPlaceholder)} type="search" + inputMode="search" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} onFocus={() => setIsOpen(true)} diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx index 2bcb5cbe..71b815fd 100644 --- a/src/components/Login/LocalLogin.tsx +++ b/src/components/Login/LocalLogin.tsx @@ -6,6 +6,7 @@ import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import * as Yup from 'yup'; import Button from '../Common/Button'; +import SensitiveInput from '../Common/SensitiveInput'; const messages = defineMessages({ email: 'Email Address', @@ -69,7 +70,7 @@ const LocalLogin: React.FC = ({ revalidate }) => { id="email" name="email" type="text" - placeholder="name@example.com" + inputMode="email" /> {errors.email && touched.email && ( @@ -81,12 +82,12 @@ const LocalLogin: React.FC = ({ revalidate }) => {
-
{errors.password && touched.password && ( diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx index 065ff43b..0cf20abb 100644 --- a/src/components/ResetPassword/RequestResetLink.tsx +++ b/src/components/ResetPassword/RequestResetLink.tsx @@ -107,7 +107,7 @@ const ResetPassword: React.FC = () => { id="email" name="email" type="text" - placeholder="name@example.com" + inputMode="email" className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5" />
diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx index f195e9e6..70427f69 100644 --- a/src/components/Settings/Notifications/NotificationsDiscord.tsx +++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx @@ -15,7 +15,8 @@ const messages = defineMessages({ botUsername: 'Bot Username', botAvatarUrl: 'Bot Avatar URL', webhookUrl: 'Webhook URL', - webhookUrlPlaceholder: 'Server Settings → Integrations → Webhooks', + webhookUrlTip: + 'Create a webhook integration in your server', discordsettingssaved: 'Discord notification settings saved successfully!', discordsettingsfailed: 'Discord notification settings failed to save.', toastDiscordTestSending: 'Sending Discord test notification…', @@ -137,65 +138,75 @@ const NotificationsDiscord: React.FC = () => {
-
-
-
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx index edce8fc6..a22c446f 100644 --- a/src/components/Settings/Notifications/NotificationsEmail.tsx +++ b/src/components/Settings/Notifications/NotificationsEmail.tsx @@ -131,7 +131,7 @@ const NotificationsEmail: React.FC = () => { types: data.types, emailFrom: data.options.emailFrom, smtpHost: data.options.smtpHost, - smtpPort: data.options.smtpPort, + smtpPort: data.options.smtpPort ?? 587, secure: data.options.secure, authUser: data.options.authUser, authPass: data.options.authPass, @@ -266,11 +266,22 @@ const NotificationsEmail: React.FC = () => {
+
+ +
+
+ +
+
+
{errors.emailFrom && touched.emailFrom && ( @@ -290,21 +301,6 @@ const NotificationsEmail: React.FC = () => { )} -
- -
-
- -
-
-
{errors.smtpHost && touched.smtpHost && ( @@ -334,7 +330,7 @@ const NotificationsEmail: React.FC = () => { id="smtpPort" name="smtpPort" type="text" - placeholder="465" + inputMode="numeric" className="short" /> {errors.smtpPort && touched.smtpPort && ( @@ -385,8 +381,7 @@ const NotificationsEmail: React.FC = () => { as="field" id="authPass" name="authPass" - type="password" - autoComplete="off" + autoComplete="one-time-code" /> @@ -441,8 +436,7 @@ const NotificationsEmail: React.FC = () => { as="field" id="pgpPassword" name="pgpPassword" - type="password" - autoComplete="off" + autoComplete="one-time-code" /> {errors.pgpPassword && touched.pgpPassword && ( diff --git a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx index b82e3acc..35ff51c4 100644 --- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx +++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx @@ -13,6 +13,8 @@ import NotificationTypeSelector from '../../../NotificationTypeSelector'; const messages = defineMessages({ agentenabled: 'Enable Agent', webhookUrl: 'Webhook URL', + webhookUrlTip: + 'Your user- or device-based notification webhook URL', validationWebhookUrl: 'You must provide a valid URL', profileName: 'Profile Name', profileNameTip: 'Only required if not using the default profile', @@ -129,6 +131,7 @@ const NotificationsLunaSea: React.FC = () => {
@@ -138,10 +141,31 @@ const NotificationsLunaSea: React.FC = () => {
- +
{errors.webhookUrl && touched.webhookUrl && (
{errors.webhookUrl}
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx index c16803dc..e6d877ba 100644 --- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx +++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx @@ -6,7 +6,6 @@ import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import * as Yup from 'yup'; import globalMessages from '../../../../i18n/globalMessages'; -import Alert from '../../../Common/Alert'; import Button from '../../../Common/Button'; import LoadingSpinner from '../../../Common/LoadingSpinner'; import SensitiveInput from '../../../Common/SensitiveInput'; @@ -15,6 +14,8 @@ import NotificationTypeSelector from '../../../NotificationTypeSelector'; const messages = defineMessages({ agentEnabled: 'Enable Agent', accessToken: 'Access Token', + accessTokenTip: + 'Create a token from your Account Settings', validationAccessTokenRequired: 'You must provide an access token', pushbulletSettingsSaved: 'Pushbullet notification settings saved successfully!', @@ -22,8 +23,6 @@ const messages = defineMessages({ toastPushbulletTestSending: 'Sending Pushbullet test notification…', toastPushbulletTestSuccess: 'Pushbullet test notification sent!', toastPushbulletTestFailed: 'Pushbullet test notification failed to send.', - settingUpPushbulletDescription: - 'To configure Pushbullet notifications, you will need to create an access token.', }); const NotificationsPushbullet: React.FC = () => { @@ -123,91 +122,87 @@ const NotificationsPushbullet: React.FC = () => { }; return ( - <> - - {msg} - - ); - }, - } - )} - type="info" - /> -
-
- -
- -
+ +
+ +
+
-
- -
-
- -
- {errors.accessToken && touched.accessToken && ( -
{errors.accessToken}
- )} +
+
+ +
+
+
+ {errors.accessToken && touched.accessToken && ( +
{errors.accessToken}
+ )}
- setFieldValue('types', newTypes)} - /> -
-
- - - - - - -
+
+ setFieldValue('types', newTypes)} + /> +
+
+ + + + + +
- - +
+ ); }} diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx index 0171343e..058be3e6 100644 --- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx +++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx @@ -6,15 +6,18 @@ import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import * as Yup from 'yup'; import globalMessages from '../../../../i18n/globalMessages'; -import Alert from '../../../Common/Alert'; import Button from '../../../Common/Button'; import LoadingSpinner from '../../../Common/LoadingSpinner'; import NotificationTypeSelector from '../../../NotificationTypeSelector'; const messages = defineMessages({ agentenabled: 'Enable Agent', - accessToken: 'Application/API Token', + accessToken: 'Application API Token', + accessTokenTip: + 'Register an application for use with Overseerr', userToken: 'User or Group Key', + userTokenTip: + 'Your 30-character user or group identifier', validationAccessTokenRequired: 'You must provide a valid application token', validationUserTokenRequired: 'You must provide a valid user key', pushoversettingssaved: 'Pushover notification settings saved successfully!', @@ -22,8 +25,6 @@ const messages = defineMessages({ toastPushoverTestSending: 'Sending Pushover test notification…', toastPushoverTestSuccess: 'Pushover test notification sent!', toastPushoverTestFailed: 'Pushover test notification failed to send.', - settinguppushoverDescription: - 'To configure Pushover notifications, you will need to register an application. (You can use one of the official Overseerr icons on GitHub.)', }); const NotificationsPushover: React.FC = () => { @@ -143,118 +144,112 @@ const NotificationsPushover: React.FC = () => { }; return ( - <> - - {msg} - - ); - }, - IconLink: function IconLink(msg) { - return ( - - {msg} - - ); - }, - })} - type="info" - /> -
-
- -
- -
+ +
+ +
+
-
- -
-
- -
- {errors.accessToken && touched.accessToken && ( -
{errors.accessToken}
- )} +
+
+ +
+
+
+ {errors.accessToken && touched.accessToken && ( +
{errors.accessToken}
+ )}
-
- -
-
- -
- {errors.userToken && touched.userToken && ( -
{errors.userToken}
- )} +
+
+ +
+
+
+ {errors.userToken && touched.userToken && ( +
{errors.userToken}
+ )}
- setFieldValue('types', newTypes)} - /> -
-
- - - - - - -
+
+ setFieldValue('types', newTypes)} + /> +
+
+ + + + + +
- - +
+ ); }} diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx index cbc084ee..57a7361d 100644 --- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx +++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx @@ -6,7 +6,6 @@ import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import * as Yup from 'yup'; import globalMessages from '../../../../i18n/globalMessages'; -import Alert from '../../../Common/Alert'; import Button from '../../../Common/Button'; import LoadingSpinner from '../../../Common/LoadingSpinner'; import NotificationTypeSelector from '../../../NotificationTypeSelector'; @@ -14,13 +13,13 @@ import NotificationTypeSelector from '../../../NotificationTypeSelector'; const messages = defineMessages({ agentenabled: 'Enable Agent', webhookUrl: 'Webhook URL', + webhookUrlTip: + 'Create an Incoming Webhook integration', slacksettingssaved: 'Slack notification settings saved successfully!', slacksettingsfailed: 'Slack notification settings failed to save.', toastSlackTestSending: 'Sending Slack test notification…', toastSlackTestSuccess: 'Slack test notification sent!', toastSlackTestFailed: 'Slack test notification failed to send.', - settingupslackDescription: - 'To configure Slack notifications, you will need to create an Incoming Webhook integration and enter the webhook URL below.', validationWebhookUrl: 'You must provide a valid URL', }); @@ -49,166 +48,162 @@ const NotificationsSlack: React.FC = () => { } return ( - <> - - {msg} - - ); - }, - })} - type="info" - /> - { + { + try { + await axios.post('/api/v1/settings/notifications/slack', { + enabled: values.enabled, + types: values.types, + options: { + webhookUrl: values.webhookUrl, + }, + }); + addToast(intl.formatMessage(messages.slacksettingssaved), { + appearance: 'success', + autoDismiss: true, + }); + } catch (e) { + addToast(intl.formatMessage(messages.slacksettingsfailed), { + appearance: 'error', + autoDismiss: true, + }); + } finally { + revalidate(); + } + }} + > + {({ errors, touched, isSubmitting, values, isValid, setFieldValue }) => { + const testSettings = async () => { + setIsTesting(true); + let toastId: string | undefined; try { - await axios.post('/api/v1/settings/notifications/slack', { - enabled: values.enabled, + addToast( + intl.formatMessage(messages.toastSlackTestSending), + { + autoDismiss: false, + appearance: 'info', + }, + (id) => { + toastId = id; + } + ); + await axios.post('/api/v1/settings/notifications/slack/test', { + enabled: true, types: values.types, options: { webhookUrl: values.webhookUrl, }, }); - addToast(intl.formatMessage(messages.slacksettingssaved), { - appearance: 'success', + + if (toastId) { + removeToast(toastId); + } + addToast(intl.formatMessage(messages.toastSlackTestSuccess), { autoDismiss: true, + appearance: 'success', }); } catch (e) { - addToast(intl.formatMessage(messages.slacksettingsfailed), { - appearance: 'error', + if (toastId) { + removeToast(toastId); + } + addToast(intl.formatMessage(messages.toastSlackTestFailed), { autoDismiss: true, + appearance: 'error', }); } finally { - revalidate(); + setIsTesting(false); } - }} - > - {({ - errors, - touched, - isSubmitting, - values, - isValid, - setFieldValue, - }) => { - const testSettings = async () => { - setIsTesting(true); - let toastId: string | undefined; - try { - addToast( - intl.formatMessage(messages.toastSlackTestSending), - { - autoDismiss: false, - appearance: 'info', - }, - (id) => { - toastId = id; - } - ); - await axios.post('/api/v1/settings/notifications/slack/test', { - enabled: true, - types: values.types, - options: { - webhookUrl: values.webhookUrl, - }, - }); - - if (toastId) { - removeToast(toastId); - } - addToast(intl.formatMessage(messages.toastSlackTestSuccess), { - autoDismiss: true, - appearance: 'success', - }); - } catch (e) { - if (toastId) { - removeToast(toastId); - } - addToast(intl.formatMessage(messages.toastSlackTestFailed), { - autoDismiss: true, - appearance: 'error', - }); - } finally { - setIsTesting(false); - } - }; + }; - return ( -
-
- -
- -
+ return ( + +
+ +
+
-
- -
-
- -
- {errors.webhookUrl && touched.webhookUrl && ( -
{errors.webhookUrl}
- )} +
+
+ +
+
+
+ {errors.webhookUrl && touched.webhookUrl && ( +
{errors.webhookUrl}
+ )}
- setFieldValue('types', newTypes)} - /> -
-
- - - - - - -
+
+ setFieldValue('types', newTypes)} + /> +
+
+ + + + + +
- - ); - }} - - +
+ + ); + }} + ); }; diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx index a3b6e16c..30e8f416 100644 --- a/src/components/Settings/Notifications/NotificationsTelegram.tsx +++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx @@ -6,7 +6,6 @@ import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import * as Yup from 'yup'; import globalMessages from '../../../i18n/globalMessages'; -import Alert from '../../Common/Alert'; import Button from '../../Common/Button'; import LoadingSpinner from '../../Common/LoadingSpinner'; import SensitiveInput from '../../Common/SensitiveInput'; @@ -16,18 +15,20 @@ const messages = defineMessages({ agentenabled: 'Enable Agent', botUsername: 'Bot Username', botUsernameTip: - 'Allow users to start a chat with the bot and configure their own personal notifications', - botAPI: 'Bot Authentication Token', + 'Allow users to also start a chat with your bot and configure their own notifications', + botAPI: 'Bot Authorization Token', + botApiTip: + 'Create a bot for use with Overseerr', chatId: 'Chat ID', - validationBotAPIRequired: 'You must provide a bot authentication token', + chatIdTip: + 'Start a chat with your bot, add @get_id_bot, and issue the /my_id command', + validationBotAPIRequired: 'You must provide a bot authorization token', validationChatIdRequired: 'You must provide a valid chat ID', telegramsettingssaved: 'Telegram notification settings saved successfully!', telegramsettingsfailed: 'Telegram notification settings failed to save.', toastTelegramTestSending: 'Sending Telegram test notification…', toastTelegramTestSuccess: 'Telegram test notification sent!', toastTelegramTestFailed: 'Telegram test notification failed to send.', - settinguptelegramDescription: - 'To configure Telegram notifications, you will need to create a bot and get the bot API key. Additionally, you will need the chat ID for the chat to which you would like to send notifications. You can find this by adding @get_id_bot to the chat and issuing the /my_id command.', sendSilently: 'Send Silently', sendSilentlyTip: 'Send notifications with no sound', }); @@ -151,158 +152,141 @@ const NotificationsTelegram: React.FC = () => { }; return ( - <> - - {msg} - - ); - }, - GetIdBotLink: function GetIdBotLink(msg) { - return ( - - {msg} - - ); - }, - code: function code(msg) { - return {msg}; - }, - })} - type="info" - /> -
-
- -
- -
+ +
+ +
+
-
- -
-
- -
- {errors.botUsername && touched.botUsername && ( -
{errors.botUsername}
- )} +
+
+ +
+
+
+ {errors.botAPI && touched.botAPI && ( +
{errors.botAPI}
+ )}
-
- -
-
- -
- {errors.botAPI && touched.botAPI && ( -
{errors.botAPI}
- )} +
+
+ +
+
+
+ {errors.botUsername && touched.botUsername && ( +
{errors.botUsername}
+ )}
-
- -
-
- -
- {errors.chatId && touched.chatId && ( -
{errors.chatId}
- )} +
+
+ +
+
+
+ {errors.chatId && touched.chatId && ( +
{errors.chatId}
+ )}
-
- -
- -
+
+
+ +
+
- setFieldValue('types', newTypes)} - /> -
-
- - - - - - -
+
+ setFieldValue('types', newTypes)} + /> +
+
+ + + + + +
- - +
+ ); }} diff --git a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx index 5f7d9104..aa4f98bf 100644 --- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx +++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx @@ -105,6 +105,7 @@ const NotificationsWebPush: React.FC = () => {
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx index 8bd1e9be..20727e85 100644 --- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx +++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx @@ -209,6 +209,7 @@ const NotificationsWebhook: React.FC = () => {
@@ -221,7 +222,12 @@ const NotificationsWebhook: React.FC = () => {
- +
{errors.webhookUrl && touched.webhookUrl && (
{errors.webhookUrl}
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx index 52c4e9ef..62c04bb2 100644 --- a/src/components/Settings/RadarrModal/index.tsx +++ b/src/components/Settings/RadarrModal/index.tsx @@ -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 = ({ 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 = ({ id="name" name="name" type="text" - placeholder={intl.formatMessage( - messages.servernamePlaceholder - )} onChange={(e: React.ChangeEvent) => { setIsValidated(false); setFieldValue('name', e.target.value); @@ -420,7 +413,7 @@ const RadarrModal: React.FC = ({ id="hostname" name="hostname" type="text" - placeholder="127.0.0.1" + inputMode="url" onChange={(e: React.ChangeEvent) => { setIsValidated(false); setFieldValue('hostname', e.target.value); @@ -443,7 +436,7 @@ const RadarrModal: React.FC = ({ id="port" name="port" type="text" - placeholder="7878" + inputMode="numeric" className="short" onChange={(e: React.ChangeEvent) => { setIsValidated(false); @@ -482,10 +475,7 @@ const RadarrModal: React.FC = ({ as="field" id="apiKey" name="apiKey" - type="text" - placeholder={intl.formatMessage( - messages.apiKeyPlaceholder - )} + autoComplete="one-time-code" onChange={(e: React.ChangeEvent) => { setIsValidated(false); setFieldValue('apiKey', e.target.value); @@ -507,9 +497,7 @@ const RadarrModal: React.FC = ({ id="baseUrl" name="baseUrl" type="text" - placeholder={intl.formatMessage( - messages.baseUrlPlaceholder - )} + inputMode="url" onChange={(e: React.ChangeEvent) => { setIsValidated(false); setFieldValue('baseUrl', e.target.value); @@ -682,9 +670,7 @@ const RadarrModal: React.FC = ({ id="externalUrl" name="externalUrl" type="text" - placeholder={intl.formatMessage( - messages.externalUrlPlaceholder - )} + inputMode="url" />
{errors.externalUrl && touched.externalUrl && ( diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx index fb81a1db..1f1ed4c9 100644 --- a/src/components/Settings/SettingsMain.tsx +++ b/src/components/Settings/SettingsMain.tsx @@ -222,7 +222,6 @@ const SettingsMain: React.FC = () => { id="applicationTitle" name="applicationTitle" type="text" - placeholder="Overseerr" />
{errors.applicationTitle && touched.applicationTitle && ( @@ -240,7 +239,7 @@ const SettingsMain: React.FC = () => { id="applicationUrl" name="applicationUrl" type="text" - placeholder="https://os.example.com" + inputMode="url" />
{errors.applicationUrl && touched.applicationUrl && ( diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx index d0c41981..b584247e 100644 --- a/src/components/Settings/SettingsPlex.tsx +++ b/src/components/Settings/SettingsPlex.tsx @@ -24,9 +24,7 @@ const messages = defineMessages({ 'Configure the settings for your Plex server. Overseerr scans your Plex libraries to determine content availability.', servername: 'Server Name', servernameTip: 'Automatically retrieved from Plex after saving', - servernamePlaceholder: 'Plex Server Name', serverpreset: 'Server', - serverpresetPlaceholder: 'Plex Server', serverLocal: 'local', serverRemote: 'remote', serverSecure: 'secure', @@ -281,7 +279,7 @@ const SettingsPlex: React.FC = ({ onComplete }) => { = ({ onComplete }) => { id="name" name="name" className="cursor-not-allowed" - placeholder={intl.formatMessage( - messages.servernamePlaceholder - )} value={data?.name} readOnly /> @@ -372,9 +367,6 @@ const SettingsPlex: React.FC = ({ onComplete }) => {